Web Мастерская

jQuery: Оптимизация производительности

Ошибка TypeError: Cannot read properties of undefined (reading 'trim') возникает, когда вы пытаетесь вызвать метод или прочитать свойство у переменной, которой присвоено значение undefined или null.

Обычно такая ошибка встречается в JavaScript, когда программа ожидает объект или строку, но по факту переменная не была инициализирована или стала неопределённой.

Наиболее частые причины появления этой ошибки

Обращение к свойствам объекта, который не определен
Например, вы вызвали метод .trim() на строке, но строка оказалась равна undefined:

ВыделитьJavaScript

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

Несуществующие элементы DOM
Если вы пытаетесь манипулировать элементом, который не существует в документе:

ВыделитьJavaScript

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

Поддержка устаревших версий браузера
Старые версии браузеров могут не поддерживать современные методы или классы. Например, если вы случайно вызываете .trim() на объектах, которые не поддерживали этот метод ранее.

Как исправить данную ошибку

Проверяйте существование переменной перед вызовом метода

ВыделитьJavaScript

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

Используйте оператор optional chaining (?.)
Начиная с ES2020, можно безопасно вызывать методы на неопределённых объектах с помощью опционального оператора цепочки:

ВыделитьJavaScript

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

Обрабатывайте случаи, когда элемент не найден
Если вы ищете элемент на странице, обязательно проверяйте, существует ли он:

ВыделитьJavaScript

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

Работайте с объектами осторожно
Если вы уверены, что переменная должна быть объектом, убедитесь, что она установлена корректно:

ВыделитьJavaScript

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);
}

Итог

Типичный сценарий ошибки — попытка чтения свойств у переменной, которая равна undefined или null. Решением является предварительная проверка существования переменной или использование безопасного оператора цепочки (?.).

Жалоба

Блог :: 30.12.2025 06:32:47 am

Зачем заботиться о производительности? Скорость загрузки и реакции страницы напрямую влияет на удобство пользования сайтом и конверсии. Именно поэтому оптимизация — важная составляющая качественного продукта.

Кеширование селекторов

Описание: Многократные поиски элементов в DOM снижают производительность и как избежать этого с помощью кеширования.
Решение: Показать, как сохранять выборки в переменную и повторно использовать их, снижая число обращений к DOM.

// Плохой пример (медленно)
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() {});

Сокращение DOM-взаимодействий

Описание: Постоянные обращения к DOM приводят к снижению производительности.
Решение: Демонстрировать, как комбинировать изменения элементов в одной операции, минуя постоянное обращение к DOM.

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

// Быстро
$("#element")

...

Зачем заботиться о производительности? Скорость загрузки и реакции страницы напрямую влияет на удобство пользования сайтом и конверсии. Именно поэтому оптимизация — важная составляющая качественного продукта.

Кеширование селекторов

Описание: Многократные поиски элементов в DOM снижают производительность и как избежать этого с помощью кеширования.
Решение: Показать, как сохранять выборки в переменную и повторно использовать их, снижая число обращений к DOM.

// Плохой пример (медленно)
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() {});

Сокращение DOM-взаимодействий

Описание: Постоянные обращения к DOM приводят к снижению производительности.
Решение: Демонстрировать, как комбинировать изменения элементов в одной операции, минуя постоянное обращение к DOM.

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

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

Грамотная работа с AJAX

Описание: Влияние асинхронных запросов сказывается на производительности.
Решение: Настройка кеширования данных, ограничение частоты запросов и ленивая загрузка (lazy loading).

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

Анимации и плавные переходы

Описание: Большая нагрузка на CPU и GPU может негативно сказаться на производительности.
Решение: Способы сокращения затрат на анимацию, выбор оптимальной длительности и альфа-канала для оптимизации кадров.

jQuery: Продвинутые техники манипуляции DOM

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

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

Заключение

Операции с DOM и событиями играют ключевую роль в общей производительности. Следуя лучшим практикам, можно добиться значительного прироста скорости и отзывчивости веб-приложений.

Жалоба

Блог :: 29.12.2025 07:38:47 am

jQuery — это библиотека JavaScript, облегчающая работу с Document Object Model (DOM). Она помогает изменять структуру страницы, стилизовать элементы и создавать динамичный пользовательский интерфейс. В этой статье мы рассмотрим полезные техники и примеры для продвинутой работы с DOM.

Управление DOM-структурой

Создание и добавление элементов
Иногда нужно динамически добавлять элементы на страницу. Сделать это легко с помощью jQuery:

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

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

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

Копирование и перемещение элементов
Часто требуется переместить или скопировать элементы на странице. Вот как это делается:

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

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

Удаление элементов
Удалить элементы с помощью jQuery можно несколькими способами:

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

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

Работа с атрибутами и свойствами

Установка и чтение атрибутов
Атрибуты элемента можно читать и устанавливать с помощью jQuery:

// Устанавливаем атрибут href у

...

jQuery — это библиотека JavaScript, облегчающая работу с Document Object Model (DOM). Она помогает изменять структуру страницы, стилизовать элементы и создавать динамичный пользовательский интерфейс. В этой статье мы рассмотрим полезные техники и примеры для продвинутой работы с DOM.

Управление DOM-структурой

Создание и добавление элементов
Иногда нужно динамически добавлять элементы на страницу. Сделать это легко с помощью jQuery:

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

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

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

Копирование и перемещение элементов
Часто требуется переместить или скопировать элементы на странице. Вот как это делается:

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

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

Удаление элементов
Удалить элементы с помощью jQuery можно несколькими способами:

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

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

Работа с атрибутами и свойствами

Установка и чтение атрибутов
Атрибуты элемента можно читать и устанавливать с помощью jQuery:

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

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

Установка и считывание свойств
Свойства отличаются от атрибутов. Атрибуты хранятся в HTML-разметке, а свойства представляют состояние самого элемента:

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

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

Управление стилем и классами

Добавление и удаление классов
Класс — это основной способ стилизации элементов в CSS. jQuery предоставляет удобный инструментарий для работы с классами:

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

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

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

Прямая установка стилей
Иногда нужно временно поменять стиль элемента. Для этого используют метод .css():

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

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

Интеракция с событием

Присоединение обработчиков событий
Одна из сильных сторон jQuery — удобная работа с событиями. Легко присоединить обработчики к различным действиям пользователя:

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

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

Удаление обработчиков событий
Если обработчик больше не нужен, его можно удалить:

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

Эффективная работа с DOM

Кэширование селекторов
Обращение к DOM обходится дорого. Лучше кэшировать результат выборки, чтобы повторно использовать его:

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

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

Группировка операций
Если планируется выполнить несколько модификаций подряд, имеет смысл сгруппировать их в одну операцию:

jQuery: Использование псевдоклассов CSS

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

Заключение

jQuery предоставляет богатый арсенал инструментов для удобной работы с DOM. Освоив эти техники, вы сможете легко создавать качественные и динамичные интерфейсы, обеспечивая отличную производительность и удобство работы с вашим сайтом.

Жалоба

Блог :: 28.12.2025 09:11:12 pm

Иногда при написании скриптов на jQuery хочется отобрать первые, последние или промежуточные элементы с помощью удобных выражений вроде :first, :last, :even, :odd. Однако эти псевдоклассы ведут себя особым образом и могут приводить к неожиданностям, если не соблюдать осторожность.

Какие бывают псевдоклассы?

jQuery предоставляет ряд специальных фильтров для выбора конкретных элементов из набора:

:first — выбирает первый элемент из набора.
:last — выбирает последний элемент из набора.
:even — выбирает элементы с чётными индексами (начиная с нуля).
:odd — выбирает элементы с нечётными индексами.
:eq(N) — выбирает элемент с номером N (также начинается с нуля).
:gt(N) — выбирает элементы с номерами большими, чем N.
:lt(N) — выбирает элементы с номерами меньшими, чем N.

Когда использовать псевдоклассы?

Псевдоклассы удобно использовать в двух ситуациях:

Непосредственно в селекторе jQuery
Это самый простой и быстрый способ выбора элементов. Просто напиши псевдокласс рядом с основным селектором, и jQuery автоматически подберёт нужный элемент:

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

Внутри методов jQuery, принимающих селекторы
Часто полезно сочетать псевдоклассы с методами jQuery, такими как .find(), .filter() и .not(). Например:

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

Опасные зоны: Когда псевдоклассы НЕ РАБОТАЮТ?

Несмотря на свою полезность, псевдоклассы не всегда применимы. Их нельзя использовать в тех методах jQuery, которые ожидают обычный...

Иногда при написании скриптов на jQuery хочется отобрать первые, последние или промежуточные элементы с помощью удобных выражений вроде :first, :last, :even, :odd. Однако эти псевдоклассы ведут себя особым образом и могут приводить к неожиданностям, если не соблюдать осторожность.

Какие бывают псевдоклассы?

jQuery предоставляет ряд специальных фильтров для выбора конкретных элементов из набора:

:first — выбирает первый элемент из набора.
:last — выбирает последний элемент из набора.
:even — выбирает элементы с чётными индексами (начиная с нуля).
:odd — выбирает элементы с нечётными индексами.
:eq(N) — выбирает элемент с номером N (также начинается с нуля).
:gt(N) — выбирает элементы с номерами большими, чем N.
:lt(N) — выбирает элементы с номерами меньшими, чем N.

Когда использовать псевдоклассы?

Псевдоклассы удобно использовать в двух ситуациях:

Непосредственно в селекторе jQuery
Это самый простой и быстрый способ выбора элементов. Просто напиши псевдокласс рядом с основным селектором, и jQuery автоматически подберёт нужный элемент:

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

Внутри методов jQuery, принимающих селекторы
Часто полезно сочетать псевдоклассы с методами jQuery, такими как .find(), .filter() и .not(). Например:

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

Опасные зоны: Когда псевдоклассы НЕ РАБОТАЮТ?

Несмотря на свою полезность, псевдоклассы не всегда применимы. Их нельзя использовать в тех методах jQuery, которые ожидают обычный CSS-селектор без дополнений.

Особенно опасно использовать псевдоклассы с методами, предназначенными для поиска ближайших родственников:

.parents() — метод ожидания простой CSS-селектор вида .block, и псевдокласс сломает его работу.
.children(), .siblings(), .next(), .prev() — аналогично, они хотят простой селектор без усложнений.

Пример неправильного использования

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

В этом примере псевдокласс испортит выполнение метода .parents(), так как он ожидал простой селектор.

Альтернативы псевдоклассам

Если псевдокласс неуместен или нежелателен, можно обратиться к специальным методам jQuery, которые решают схожие задачи:

.first() — выбирает первый элемент из набора.
.last() — выбирает последний элемент из набора.
.slice(start, end) — разрезаем набор элементов, выбрав диапазон индексов.
.eq(index) — выбирает элемент по номеру индекса.

Пример замены псевдокласса

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

Примеры использования

Рассмотрим несколько примеров, иллюстрирующих разные сценарии:

1. Отображение фона только у первого элемента

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

2. Скрытие последнего элемента списка

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

3. Применение стилей к каждому второму элементу таблицы

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

4. Выбор третьего элемента из набора

Что не так с Google AdSense

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

Заключение

Использование псевдоклассов эффективно и полезно, но соблюдай осторожность, особенно с методами, которые ждут обычный CSS-селектор.
Замена псевдоклассов методами вроде .first(), .last() и .eq() может повысить надёжность и гибкость твоего кода.
Помни, что чистота и простота повышают надежность проектов.

Теперь ты умеешь грамотно применять псевдоклассы и обходить ловушки!

Жалоба

Блог :: 14.04.2024 05:04:40 pm

Практически каждый, кто хотел заработать на своем сайте, стремился заполучить возможность отображать на страницах своего сайта рекламные блоки AdSense. Ведь это по настоящему самая оплачиваемая реклама. Помню, бывали клики, за которые платили по 1,7 баксов. Сейчас реклама не отображается на территории РФ, по известным всем причинам. Кто-то это переживает, будто расстался со своим любимым человеком. Ладно, давайте не будем о грустном, а лучше повспоминаем, как это было! А было это похоже на то, что Google хотел загнать всех Вебмастеров под каблук.

У данной рекламной сети было огромное количество требований, нарушив, хоть одно из них, можно было получить по шапке. Самое страшное - это быть пойманным за клики по своей рекламе, за что немедленно выдавался пожизненный бан, а заработанные деньги, якобы, возвращались рекламодателям. Этого бана боялись, как огня, абсолютно все. При чем, не важно, кто кликал по твоей рекламе, ты сам или, какой-то школьник из Оренбурга, которого ты даже не знаешь. Вебмастер получив бан за скликивание рекламы, тут же летел на форум поддержки AdSense и писал тысячу сообщений, о том, что он не нарушал правил, что это не он. Ну, кто в это поверит? С тобой даже разговаривать не будут, разве что нахамят. А, ну да, могут сказать, что ты в любом случае виноват сам, если кликал ты, то знал во что залазишь, а если кликал не ты, то вина твоя, что не доглядел, что кто-то тебя скликивает. Подозрительная активность, так сказать. Удобная фишка для тех кому ты не...

CSS: Как отменить float: left / right;

Практически каждый, кто хотел заработать на своем сайте, стремился заполучить возможность отображать на страницах своего сайта рекламные блоки AdSense. Ведь это по настоящему самая оплачиваемая реклама. Помню, бывали клики, за которые платили по 1,7 баксов. Сейчас реклама не отображается на территории РФ, по известным всем причинам. Кто-то это переживает, будто расстался со своим любимым человеком. Ладно, давайте не будем о грустном, а лучше повспоминаем, как это было! А было это похоже на то, что Google хотел загнать всех Вебмастеров под каблук.

У данной рекламной сети было огромное количество требований, нарушив, хоть одно из них, можно было получить по шапке. Самое страшное - это быть пойманным за клики по своей рекламе, за что немедленно выдавался пожизненный бан, а заработанные деньги, якобы, возвращались рекламодателям. Этого бана боялись, как огня, абсолютно все. При чем, не важно, кто кликал по твоей рекламе, ты сам или, какой-то школьник из Оренбурга, которого ты даже не знаешь. Вебмастер получив бан за скликивание рекламы, тут же летел на форум поддержки AdSense и писал тысячу сообщений, о том, что он не нарушал правил, что это не он. Ну, кто в это поверит? С тобой даже разговаривать не будут, разве что нахамят. А, ну да, могут сказать, что ты в любом случае виноват сам, если кликал ты, то знал во что залазишь, а если кликал не ты, то вина твоя, что не доглядел, что кто-то тебя скликивает. Подозрительная активность, так сказать. Удобная фишка для тех кому ты не понравился, зашли на твой сайт, понажимали на рекламу, и привет тебе, горячий.

Из-за кучи требований, Вебмастера делали сайты, читая правила рекламной сити, будто Библию. Доходило до того, что люди делали сайты для AdSense, а не для людей. А после получения бана от AdSense, терялся весь смысл в сайте.

Бывало, что реклама переставала отображаться, без всякого бана. В дальнейшем выяснялось, что на странице, где находится рекламный блок, было написано стоп-слово. А так как мы сайт делали ИСКЛЮЧИТЕЛЬНО для AdSense, то и контент подгоняем под него. Исправляем стоп-слово, на синоним, возможно придется исправить несколько предложений, возможно и смысл текста, но да ладно, главное вернуть показы объявлений. После чего, долгая переписка на форуме поддержки рекламной сети, с которого выходишь, как оплеванный, объявления восстановились. Самое прикольное то, что у тебя реклама не отображается за одно слово, а у какого-то Васи, реклама во всех цветах, среди порнографии и прочих нарушений.

Форум поддержки AdSense - это место, где собрались, так сказать, ~~высшие умы~~, чтобы показывать Вебмастерам, какие они все тупые, что и дня не проживут, без их знаний. Все они смотрят с высока. И вместо того, чтобы помочь правильным ответом, тыкают правилами рекламной сети. Ну, других ответов, от ~~знатоков~~ я не видел.

Сами правила программы написаны так, что прочитав их, становится вопросов больше, чем было до ознакомления правил.

В общем, такое мое воспоминание о рекламной сети AdSense. С ним я немного зарабатывал, но, когда его не стало, я понял, что все делал не для людей, а для того, чтобы только отображалась реклама.

Жалоба

2

Блог :: 12.12.2025 06:57:55 am

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; или display: inline-block;:

.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;
        }

...

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; или display: inline-block;:

.element {
    display: block;
}

Пример

Манипуляция SVG с помощью JavaScript

<!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>

Итог: Чтобы отменить float: left / right;, используйте float: none; или другие методы, такие как clear, overflow или display. Это позволит вернуть элемент в нормальный поток документа и отменить его плавающее положение.

Жалоба

Блог :: 10.12.2025 07:43:04 am

Scalable Vector Graphics (SVG) — это формат векторной графики, широко используемый в веб-разработке. Одним из мощных инструментов для работы с SVG является JavaScript, который позволяет динамически изменять атрибуты, стили и поведение SVG-элементов.

В этой статье мы рассмотрим основные приемы манипуляции SVG с помощью JavaScript.

Доступ к SVG-элементам

Для того чтобы манипулировать SVG-элементами, нужно сначала получить доступ к ним с помощью JavaScript. Вот несколько способов:

Получение элемента по ID:

ВыделитьJavaScript

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

Получение элементов по классу:

ВыделитьJavaScript

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

Получение всех элементов SVG:

ВыделитьJavaScript

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

Изменение атрибутов SVG

Один из самых частых способов манипуляции SVG — это изменение атрибутов элементов. Вот несколько примеров:

Изменение цвета заливки и обводки:

ВыделитьJavaScript

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

Изменение размеров и положения:

ВыделитьJavaScript

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

Изменение пути (path):

ВыделитьJavaScript

let path =

...

Простые и эффективные техники анимации SVG с GSAP

Жалоба

Блог :: 10.12.2025 07:20:05 am

GreenSock Animation Platform (GSAP) — это мощная библиотека для создания качественной анимации в веб-пространстве. Вместе с SVG GSAP позволяет создавать потрясающе выглядящие и интерактивные элементы. В этой статье мы рассмотрим простые и эффективные техники, которые помогут оживить SVG с помощью GSAP.

Введение в GSAP и SVG

Что такое GSAP?
GSAP — это высокопроизводительная библиотека для анимации, позволяющая анимировать практически любые CSS-свойства и DOM-элементы. В отличие от CSS-анимации, GSAP предлагает больший контроль и лёгкость управления.

Как подключить GSAP?
Подключить GSAP можно через CDN:

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

Простые техники анимации SVG с GSAP

Анимация движения (Motion Path)
GSAP позволяет анимировать путь (motion path) по траектории, заданной в SVG. Это особенно полезно для создания плавных перемещений объектов:

<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>

ВыделитьJavaScript

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

Масштабирование и вращения
Можно легко анимировать масштаб и угол поворота элементов SVG:

<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>

ВыделитьJavaScript

gsap.fro

...

Практическое руководство по SVG в CSS

Жалоба

Блог :: 09.12.2025 06:58:16 pm

Scalable Vector Graphics (SVG) — это технология векторной графики, широко используемая в веб-дизайне для создания иконок, логотипов, диаграмм и анимации. SVG идеально интегрируются с CSS, что позволяет динамически манипулировать их формой, цветом и анимацией.

В этом руководстве мы рассмотрим, как использовать SVG в CSS, и поговорим о базовых приемах работы с SVG.

Основы SVG и CSS

Что такое SVG? SVG — это XML-формат, который описывает графику в виде вектора. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, что делает его идеальным для веб-интерфейсов.

Интеграция SVG в HTML и CSS
SVG можно подключить тремя основными способами:

1. Прямо в HTML:

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

2. Импорт через CSS:

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

3. Вставка через <object> или <iframe>:

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

Управление SVG через CSS

1. Цвет и заливка
Цвет заливки и обводки можно изменить через CSS:

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

2. Трансформация и анимация
SVG легко поддается трансформации и анимации с помощью CSS:

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

@keyframes rotate {
    from {

...

Scalable Vector Graphics (SVG) — это технология векторной графики, широко используемая в веб-дизайне для создания иконок, логотипов, диаграмм и анимации. SVG идеально интегрируются с CSS, что позволяет динамически манипулировать их формой, цветом и анимацией.

В этом руководстве мы рассмотрим, как использовать SVG в CSS, и поговорим о базовых приемах работы с SVG.

Основы SVG и CSS

Что такое SVG? SVG — это XML-формат, который описывает графику в виде вектора. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, что делает его идеальным для веб-интерфейсов.

Интеграция SVG в HTML и CSS
SVG можно подключить тремя основными способами:

1. Прямо в HTML:

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

2. Импорт через CSS:

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

3. Вставка через <object> или <iframe>:

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

Управление SVG через CSS

1. Цвет и заливка
Цвет заливки и обводки можно изменить через CSS:

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

2. Трансформация и анимация
SVG легко поддается трансформации и анимации с помощью CSS:

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

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

3. Адаптация размеров
Масштабирование SVG можно производить с помощью CSS:

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

Примеры использования SVG в CSS

Пример 1: Иконка с анимацией

<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; }
}

Пример 2: Градиентная заливка

Стоит ли делать сайт обо всём на свете?

<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>

Заключение

SVG — это невероятно мощный инструмент для веб-дизайна, который тесно интегрируется с CSS. Благодаря поддержке векторной графики и возможностей CSS, SVG позволяет создавать адаптивные, масштабируемые и интерактивные элементы интерфейса.

Освоив эти базовые техники, ты сможешь эффективно использовать SVG в своих проектах и создавать профессиональные и функциональные веб-компоненты.

Блог: CSS переменные в SVG

Жалоба

Заметка :: 09.12.2025 03:36:11 pm

SWeb: С 29 декабря 2025 года цены на домены и SSL-сертификаты изменятся в связи с увеличением НДС.

С 1 января НДС в России увеличивается до 22%. Мы корректируем цены, чтобы компенсировать рост налоговой нагрузки и продолжать предоставлять качественный сервис.

Что делать:
Продлите домены и SSL в декабре — сохраните текущие цены на год.

Жалоба

Опрос :: 09.12.2025 07:41:55 am

Что вы думаете о создании сайта, который охватывает множество тем и сфер жизни? Хотели бы вы посещать портал, где можно найти информацию по любым вопросам, или предпочитаете специализированные ресурсы?

Выберите один из вариантов ответа:

ДА, это отличная идея: Хочу иметь доступ к большому объему информации на одном ресурсе. Удобно, когда не нужно искать информацию по разным сайтам.
Не уверен(а): С одной стороны, удобно, что всё собрано в одном месте, но боюсь, что качество контента пострадает.
НЕТ, лучше специализированные сайты: Предпочитаю сайты, которые специализируются на определенной теме. Там проще найти нужную информацию и глубже изучить вопрос.
По-другому: Нужен гибрид специализированных и общих сайтов. Ресурс, который объединяет разные тематики, но с качественным и глубоким контентом.

Поделитесь в комментариях: напишите, почему вы проголосовали именно так и какие ресурсы посещаете чаще всего!

Статистика доступна после голосования Публичный опрос

Жалоба

1

09.12.2025 09:13:47 am

Создавать сайт не имеющего конкретной темы - это отличная идея:
1. У человека могут быть множество хобби, и о всех он хочет рассказывать.
2. Человек просто хочет работать над своим сайтом, но с тематикой ни как не может определиться. В процессе работы сразу с несколькими темами, человек может выбрать, что ему ближе. Ну, или продолжать говорить обо всём сразу.

Для сайта обо всём на свете идеально подходит социальная сеть. Соцсети имеют возможность создавать тематические группы/сообщества, что помогает разные темы не превратить в кашу. Одна группа == одна тематика.

Жалоба

0

Блог :: 08.12.2025 07:40:50 am

CSS Flexbox: Руководство для начинающих

CSS Flexbox — это мощный инструмент для создания гибких и адаптивных макетов. Flexbox позволяет легко управлять расположением элементов, их выравниванием и распределением свободного пространства.

В этой статье мы познакомимся с основами Flexbox и научимся решать типичные задачи с его помощью.

Часть 1: Основы Flexbox

Что такое Flexbox?
Flexbox — это модуль CSS, разработанный для облегчения создания гибких и адаптивных макетов. Он основан на концепции гибких контейнеров и элементов, которые могут динамически перераспределять пространство между собой.

Основные понятия Flexbox:

Flex Container: родительский элемент, который управляет расположением дочерних элементов.
Flex Items: дочерние элементы, которые располагаются внутри контейнера.

Как создать Flexbox?
Чтобы превратить элемент в Flexbox-контейнер, нужно добавить свойство:

.container {
    display: flex;
}

Теперь все дочерние элементы контейнера станут flex-элементами.

Часть 2: Основные свойства Flexbox

1. Направление и ось

flex-direction: задает направление, вдоль которого располагаются элементы.

Возможные значения:

row (по умолчанию): элементы располагаются горизонтально слева направо.
column: элементы располагаются вертикально сверху вниз.
row-reverse: элементы располагаются горизонтально справа налево.
column-reverse: элементы располагаются вертикально снизу вверх.

Пример:

.container {
    display: flex;
    flex-direction: row; /* горизонтальное расположение */
}

2. Выравнивание элементов

justify-content

...

CSS: Как заставить текст вписываться в одну строку

Жалоба

Блог :: 08.12.2025 06:43:44 am

Иногда при оформлении текста на веб-странице возникает потребность в том, чтобы длинные строки не выходили за пределы блока, а текст отображался аккуратно и не ломал дизайн. Для этого можно использовать комбинацию трех CSS-свойств:

white-space: nowrap; — запрещает перенос текста на новую строку.
overflow: hidden; — скрывает текст, выходящий за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце текста, если он не помещается.

Эти свойства работают совместно, чтобы добиться желаемого эффекта.

Пример

.text-container {
    width: 200px; /* Ограничиваем ширину блока */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

<div class="text-container">
    Очень длинный текст, который не поместится в одну строку и должен обрываться многоточием.
</div>

Как это работает

white-space: nowrap; — запрещает тексту переноситься на новую строку, что позволяет нам видеть весь текст в одну строку.
overflow: hidden; — скрывает часть текста, выходящую за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце строки, если текст не помещается.

Важные моменты

Для корректной работы этих свойств необходимо задать фиксированную ширину блоку.
Без свойства overflow: hidden; многоточие не появится.
Многоточие добавляется только в конце последней строки, если текст не помещается.

Используя комбинации трёх свойств...

Иногда при оформлении текста на веб-странице возникает потребность в том, чтобы длинные строки не выходили за пределы блока, а текст отображался аккуратно и не ломал дизайн. Для этого можно использовать комбинацию трех CSS-свойств:

white-space: nowrap; — запрещает перенос текста на новую строку.
overflow: hidden; — скрывает текст, выходящий за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце текста, если он не помещается.

Эти свойства работают совместно, чтобы добиться желаемого эффекта.

Пример

.text-container {
    width: 200px; /* Ограничиваем ширину блока */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

Как хранить данные в виде массива в Базе Данных

<div class="text-container">
    Очень длинный текст, который не поместится в одну строку и должен обрываться многоточием.
</div>

Как это работает

white-space: nowrap; — запрещает тексту переноситься на новую строку, что позволяет нам видеть весь текст в одну строку.
overflow: hidden; — скрывает часть текста, выходящую за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце строки, если текст не помещается.

Важные моменты

Для корректной работы этих свойств необходимо задать фиксированную ширину блоку.
Без свойства overflow: hidden; многоточие не появится.
Многоточие добавляется только в конце последней строки, если текст не помещается.

Используя комбинации трёх свойств CSS, можно легко и эффективно ограничивать текст в одну строку, избегая выхода за пределы блока и придавая дизайну аккуратный вид.

Жалоба

Блог :: 03.12.2025 07:15:27 am

Хранение данных в виде массива в базе данных — распространённая практика, особенно когда приходится работать с разнородными или динамическими данными. Однако традиционные реляционные базы данных (например, MySQL) не поддерживают хранение массивов напрямую. Рассмотрим лучшие практики хранения и обработки таких данных.

Варианты хранения массивов в базе данных

Тип данных JSON: Начиная с версии MySQL 5.7 появился тип данных JSON, позволяющий хранить массивы и объекты в виде JSON-строки. Это наиболее удобное и современное решение.
Сериялизация: Можно сериализовать массив с помощью PHP-функций serialize() или json_encode() и сохранить результат в виде строки в поле типа TEXT или BLOB.
Нормализация: Нормализация данных подразумевает создание отдельной таблицы для хранения элементов массива. Это идеальный подход с точки зрения дизайна базы данных, но иногда неудобен в эксплуатации.

Пример использования JSON

Допустим, у тебя есть таблица users с полем settings типа JSON:

ВыделитьSQL

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    settings JSON
);

INSERT INTO users (name, settings) VALUES ('Алексей', '{"theme": "dark", "notifications": ["email", "sms"]}');

Обработка данных

Для работы с JSON-полями в MySQL доступны специализированные функции, такие как JSON_EXTRACT(), JSON_CONTAINS() и другие.

Пример:

ВыделитьPHP

<?php
// Получаем данные из базы
$stmt = $pdo->query("SELECT settings FROM users WHERE name='Алексей'");
$row =

...

Как предоставить сторонним сайтам доступ к вашим файлам для получения информации

Хранение данных в виде массива в базе данных — распространённая практика, особенно когда приходится работать с разнородными или динамическими данными. Однако традиционные реляционные базы данных (например, MySQL) не поддерживают хранение массивов напрямую. Рассмотрим лучшие практики хранения и обработки таких данных.

Варианты хранения массивов в базе данных

Тип данных JSON: Начиная с версии MySQL 5.7 появился тип данных JSON, позволяющий хранить массивы и объекты в виде JSON-строки. Это наиболее удобное и современное решение.
Сериялизация: Можно сериализовать массив с помощью PHP-функций serialize() или json_encode() и сохранить результат в виде строки в поле типа TEXT или BLOB.
Нормализация: Нормализация данных подразумевает создание отдельной таблицы для хранения элементов массива. Это идеальный подход с точки зрения дизайна базы данных, но иногда неудобен в эксплуатации.

Пример использования JSON

Допустим, у тебя есть таблица users с полем settings типа JSON:

ВыделитьSQL

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    settings JSON
);

INSERT INTO users (name, settings) VALUES ('Алексей', '{"theme": "dark", "notifications": ["email", "sms"]}');

Обработка данных

Для работы с JSON-полями в MySQL доступны специализированные функции, такие как JSON_EXTRACT(), JSON_CONTAINS() и другие.

Пример:

ВыделитьPHP

<?php
// Получаем данные из базы
$stmt = $pdo->query("SELECT settings FROM users WHERE name='Алексей'");
$row = $stmt->fetch(PDO::FETCH_ASSOC);

// Преобразуем JSON в массив
$settings = json_decode($row['settings'], true);

// Выводим данные
echo $settings['theme']; // dark
print_r($settings['notifications']); // Array ( [0] => email [1] => sms )
?>

Совет по использованию JSON

Индексация: Поля типа JSON не подлежат индексации напрямую. Если планируется интенсивный поиск по JSON-данным, рассмотрите возможность выделения ключевых данных в отдельные поля.
Совместимость: JSON-поддержка доступна только в последних версиях MySQL (5.7 и новее).

Итог: Теперь у тебя есть полное представление о том, как хранить и обрабатывать данные в виде массива в базе данных. Главное помнить, что современные базы данных предлагают удобные инструменты для работы с JSON, делая этот подход оптимальным для большинства задач.

Жалоба

Блог :: 26.11.2025 07:23:03 am

Часто возникает потребность предоставить сторонним сайтам доступ к определенной информации, хранящейся на вашем сервере. Это может быть статистика, прайс-листы, фотографии или другие данные. Существует несколько способов сделать это, обеспечив безопасность и удобство использования.

Зачем предоставлять доступ сторонним сайтам?

Монетизация: Продажа доступа к уникальным данным или услугам.
Партнерство: Совместная работа с партнерами, предоставление информации о товарах или услугах.
Повышение лояльности: Доступ к актуальной информации укрепляет доверие клиентов и партнеров.

Как это сделать?

Использование API: Создайте RESTful API, который предоставляет доступ к информации в формате JSON или XML. Сторонние сайты могут отправлять запросы и получать данные.
Файлы для скачивания: Поставьте файлы в общедоступную директорию или создайте защищённый доступ с помощью авторизации.
RSS-каналы: Предоставьте RSS-канал с актуальными данными, чтобы сторонние сайты могли автоматически получать обновления.
CDN (Content Delivery Network): Разместите файлы на CDN для быстрого и надежного доступа из любой точки мира.

Пример создания API для предоставления информации

Допустим, вы хотите предоставить доступ к списку товаров на своём сайте. Вот как это можно сделать:

1. Создание API:

ВыделитьPHP

<?php
// Файл api/products.php

// Подключение к базе данных
$mysqli = new mysqli("localhost", "user", "password", "database");

// Получение данных
$sql = "SELECT * FROM products";
$result =

...