10 полезных скриптов JavaScript
JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.
В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.
1. Максимальная высота или ширина в наборе элементов
Очень полезный скрипт для выравнивания высоты или ширины колонок.
Вариант для высоты:
var getMaxHeight = function ($elms) {
var maxHeight = 0;
$elms.each(function () {
// В некоторых случаях можно использовать outerHeight()
var height = $(this).height();
if (height > maxHeight) {
maxHeight = height;
}
});
return maxHeight;
};
Использование:
$(elements).height( getMaxHeight($(elements)) );
Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.
Демонстрация использования кода
2. Эффективная проверка дат
Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.
function isValidDate(value, userFormat) {
// Используем формат по умолчанию, если ничего не указано
userFormat = userFormat || 'mm/dd/yyyy';
// Находим разделитель исключая символы месяца, дня и года (в английском варианте - m, d, y)
var delimiter = /[^mdy]/.exec(userFormat)[0];
// Создаем массив из месяца, дня и года,
// то есть мы знаем порядок форматаы
var theFormat = userFormat.split(delimiter);
// Создаем массив из даты пользователя
var theDate = value.split(delimiter);
function isDate(date, format) {
var m, d, y, i = 0, len = format.length, f;
for (i; i < len; i++) {
f = format[i];
if (/m/.test(f)) m = date[i];
if (/d/.test(f)) d = date[i];
if (/y/.test(f)) y = date[i];
}
return (
m > 0 && m < 13 &&
y && y.length === 4 &&
d > 0 &&
// Проверяем правильность дня месяца
d <= (new Date(y, m, 0)).getDate()
);
}
return isDate(theDate, theFormat);
}
Использование:
Следующая строка вернет false, так как в ноябре 30 дней:
isValidDate('dd-mm-yyyy', '31/11/2012')
Демонстрация использования кода
3. Устанавливаем соответствие между шириной экрана и точками излома для адаптивного дизайна
Быстрый способ связать медиа запросы CSS и код JavaScript.
function isBreakPoint(bp) {
// Tочки излома, которые установлены в коде CSS
var bps = [320, 480, 768, 1024];
var w = $(window).width();
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
}
}
return w > min && w <= max;
}
Использование:
if ( isBreakPoint(320) ) {
// Ширина экрана меньше точки 320
}
if ( isBreakPoint(480) ) {
// Ширина экрана между точками излома 320 и 480
}
…
Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.
Демонстрация использования кода
4. Выделение текста
Существует много плагинов jQuery для выделения текста, но можно легко реализовать решение такой задачи без использования библиотек. Скрипт возвращает оригинальный текст, в котором найденные термины помещены в тег, и поэтому их легко стилизовать с помощью CSS.
function highlight(text, words, tag) {
// Устанавливаем тег по умолчанию, если ничего не указано
tag = tag || 'span';
var i, len = words.length, re;
for (i = 0; i < len; i++) {
// Глобальное регульрное выражение для подсвечивания всех терминов
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
return text;
}
Также можно отменить выделение текста.
function unhighlight(text, tag) {
// Устанавливаем тег по умолчанию, если ничего не указано
tag = tag || 'span';
var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
return text.replace(re, '');
}
Использование:
$('p').html( highlight(
$('p').html(), // Текст
['foo', 'bar', 'baz', 'hello world'], // Список терминов для выделения
'strong' // Пользовательский тег
));
Демонстрация использования кода
5. Анимированные текстовые эффекты
Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы було легче использовать):
$.fn.animateText = function(delay, klass) {
var text = this.text();
var letters = text.split('');
return this.each(function(){
var $this = $(this);
$this.html(text.replace(/./g, '<span class="letter">$&</span>'));
$this.find('span.letter').each(function(i, el){
setTimeout(function(){ $(el).addClass(klass); }, delay * i);
});
});
};
Использование:
Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:
$('p').animateText(15, 'foo');
Демонстрация использования кода
6. Проявление элементов одного за другим
Плагин jQuery для проявления элементов одного за другим.
$.fn.fadeAll = function (ops) {
var o = $.extend({
delay: 500, // задержка между появлением элементов
speed: 500, // скорость анимации
ease: 'swing' // функция перехода (другие требуют подключения специального плагина)
}, ops);
var $el = this;
for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) {
$el.eq(i).delay(d).fadeIn(o.speed, o.ease);
}
return $el;
}
Использование:
$(elements).fadeAll({ delay: 300, speed: 300 });
Демонстрация использования кода
7. Подсчет нажатий кнопки мыши
Иногда требуется подсчитать, сколько раз пользователь нажал на элемент. Обычно для решения задачи создают счетчик в виде глобальной переменной, но jQuery помогает избавиться от засорения глобального пространства имен с помощью использования data() для хранения значения.
$(element)
.data('counter', 0) // Сбрасываем счетчик
.click(function() {
var counter = $(this).data('counter'); // Получаем значение
$(this).data('counter', counter + 1); // Устанавливаем значение
// Выполняем нужные действия
});
Демонстрация использования кода
8. Встраивание видео Youtube из ссылки
Полезный скрипт для встраивания видео Youtube из ссылки с использованием параметров. Код работает почти на всех форматах ссылки Youtube, так как используется специальное регулярное выражение. Также скрипт фиксирует проблему "super z-index", которая проявляется при встраивании видео Youtube.
function embedYoutube(link, ops) {
var o = $.extend({
width: 480,
height: 320,
params: ''
}, ops);
var id = /\?v\=(\w+)/.exec(link)[1];
return '<iframe style="display: block;"'+
' class="youtube-video" type="text/html"'+
' width="' + o.width + '" height="' + o.height +
' "src="http://www.youtube.com/embed/' + id + '?' + o.params +
'&wmode=transparent" frameborder="0" />';
}
Использование:
Значения для параметров описаны в документации Youtube API
embedYoutube(
'https://www.youtube.com/watch?v=JaAWdljhD5o',
{ params: 'theme=light&fs=0' }
);
Демонстрация использования кода
9. Уменьшаем размер текста
Данный скрипт похож на функцию excerpt в WordPress. Он обрезает текст по количеству слов и добавляет специальный элемент для указания сокращения текста. Работает с текстом, в котором имеются другие встроенные теги (например, такие как strong или em или ссылки).
function excerpt(str, nwords) {
var words = str.split(' ');
words.splice(nwords, words.length-1);
return words.join(' ') +
(words.length !== str.split(' ').length ? '…' : '');
}
Демонстрация использования кода
10. Создаем динамическое меню
Создаем любое меню динамически. Простой скрипт с большим потенциалом.
function makeMenu(items, tags) {
tags = tags || ['ul', 'li']; // Теги по умолчанию
var parent = tags[0];
var child = tags[1];
var item, value = '';
for (var i = 0, l = items.length; i < l; i++) {
item = items[i];
// Разделяем пункты и значения, если они имеются
if (/:/.test(item)) {
item = items[i].split(':')[0];
value = items[i].split(':')[1];
}
// Оборачиваем пункт в тег
items[i] = '<'+ child +' '+
(value && 'value="'+value+'"') +'>'+ // Добавляем значение, если оно есть
item +'</'+ child +'>';
}
return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}
Использование:
// Выпадающий список месяцев makeMenu( ['January:JAN', 'February:FEB', 'March:MAR'], // пункт:значение ['select', 'option'] ); // Список бакалеи makeMenu( ['Carrots', 'Lettuce', 'Tomatos', 'Milk'], ['ol', 'li'] );
Демонстрация использования кода
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-3dKxIvzgKA/lessons.php
|
JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.В данном уроке мы приводим 10 |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-12-23 » API Яндекс Бизнеса: как подключить карточки компании к вашей CRM или ERP-системе
- 2025-12-23 » Как управлять всеми филиалами в Яндекс Картах из одной панели
- 2025-12-23 » От отзыва к продаже: система быстрого ответа и управления репутацией через интеграцию
- 2025-12-23 » Оформление карточки организации в Яндекс Бизнес = Продающее оформление вашей компании на Яндекс Картах
- 2025-12-23 » Из чего складывается стоимость логотипа: разбираем по полочкам
- 2025-12-23 » Как провести ребрендинг логотипа, не потеряв старых клиентов
- 2025-12-23 » Логотип vs. Иконка: Что на самом деле нужно вашему бизнесу?
- 2025-12-23 » Трейд-маркетинг: как продвигать товары в точках продаж
- 2025-12-23 » Подписная модель: стратегия, риски и эффективность
- 2025-12-23 » Чёрный список почтовых серверов: как защитить рассылки от блокировки
- 2025-12-23 » Закон о рекомендательных технологиях: как использовать их легально
- 2025-12-23 » Как управлять жизненным циклом продукта: от запуска до спада
- 2025-12-17 » Почему медленный госсайт — это провал и как это исправить
- 2025-12-17 » Как соответствовать требованиям 152-ФЗ и 210-ФЗ при разработке государственных сайтов
- 2025-12-17 » Интеграция госсайта с внешними системами: от визитки к цифровому сервису
- 2025-12-17 » Введение: Ненужные страницы в индексе — это тихий слив бюджета и позиций
- 2025-12-17 » Продвинутая работа с анкорным профилем: баланс, многоуровневая стратегия и защита от спама
- 2025-12-17 » >Как удержать и повысить продажи после праздников
- 2025-12-17 » Почему сегодня офлайн-данные и SEO — это единая система
- 2025-12-17 » Надёжная доставка кодов входа: каскадная логика, которая защищает конверсию
- 2025-12-11 » Будущее SEO в эпоху ИИ: тренды 2024-2025 и стратегии адаптации
- 2025-12-11 » Техническое SEO 2025: Фундаментальное руководство по созданию безупречного цифрового актива
- 2025-12-11 » 10 устаревших SEO-ошибок, которые мешают росту в 2026 году + чек-лист для срочной проверки сайта
- 2025-12-11 » Навигация типа «хлебные крошки»: современный подход к удобству сайта
- 2025-12-11 » Оптимизация сайтов: как микроразметка Schema.org влияет на видимость и привлечение клиентов
- 2025-12-11 » Вирусы на сайте: как обнаружить, обезвредить и предотвратить угрозу
- 2025-12-11 » Generative Engine Optimization (GEO): как работать с новым типом поиска
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
"В будущем на рынке останется два вида компаний: те, кто в Интернет и те, кто вышел из бизнеса." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.


Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.