Полезные скрипты javascript. Веб-дизайнеру - полезные ссылки

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

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

Чаще всего под скриптом понимают файл или несколько файлов, которые написанные на языке javascript и каким-то образом дополняют функциональность сайта. Но сценарии можно создавать на любом языке программирования: PHP, Perl, Python и т.д. Больше всего скриптов существует на PHP и JavaScript, так как это самые популярные сегодня технологии.

Конечно, сегодня в сети можно скачать тысячи сценариев, но где можно найти наиболее крупные подборки? В этом плане зарубежные сайты немного впереди рунета, потому что там веб-технологии развиваются быстрее.

Например, hotscripts.com. Огромный зарубежный портал, на котором представлено более десяти тысяч сценариев и программ на самых разных языках программирования. В том числе там есть различные полезные вещи на HTML5. Только все на английском, поэтому как-то вам придется разбираться, если очень надо будет.

Рис. 1. Крупнейший в интернете портал скриптов. К сожалению, только для тех, кто дружит с английским.

Ну а это русскоязычная библиотека скриптов . В основном тут представлены материалы по PHP. В данном случае русскоязычный сайт выигрывает тем, что почти все инструкции по установке скриптов на русском, а значит, разобраться намного легче.

На этот вопрос точно ответить невозможно, потому что скрипты отличаются своей сложностью и способом установки. Например, для javascript-сценариев чаще всего требуется для начала скачать и установить библиотеку jQuery, а уже к ней подключать различные плагины, которые и будут реализовывать нужный функционал.

В случае с PHP установка может заключаться в копировании нужных файлов на сервер с дальнейшим прописыванием нового куска кода в функциях. Впрочем, почти каждый нормальный скрипт имеет инструкцию по установке.

Разница в том, что на javascript чаще всего создают красивые элементы оформления, пишут сценарии, которые срабатывают при различных действиях посетителя. Например, можно менять расположение элементов на веб-странице, менять цветовую схему сайта и даже его структуру. Например, на многих крупных порталах вы сами можете настроить дизайн сайта. Именно там применяется javascript и его самая популярная библиотека – jQuery.

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

На нем написаны самые популярные движки, такие как WordPress, с его помощью создаются библиотеки, счетчики, карты сайтов, инструменты для администрирования на хостинге и сотни других вещей. В этом плане PHP может гораздо больше, чем javascript.

Ну а теперь давайте установим какой-нибудь скрипт. Методом случайного тыка я выбрал этот — ссылка . Это графические часы. Сначала давайте распакуем скачанный архив и посмотрим, что там.

Мне сразу не понравилось, что там целых 14 изображений, которые нужны для работы. Ну да ладно, не будем сейчас оценивать качество скрипта, а просто установим его.

Для этого нужно открыть файл index.html. Там нас должен интересовать тег script и все его содержимое. Собственно, вариантов установки веб-сценария два:

Просто скопировать все содержимое тега script и вставить на свою страничку в тег head.

Скопировать код в отдельный файл (например, script.js), а потом подключить этот файл к html-страничке. Так мы поступим правильно с точки зрения стандартов, разделив разметку страницы и ее поведение.

Дальнейший процесс установки заключается в том, что тегу body нужно дописать атрибут onload = «show3()». Это означает, что после загрузки тела страницы должна быть выполнена функция show3(), которая и приводит в действие наши часы.

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

То есть все картинки для часов заключены в общий контейнер-ссылку на портал, где мы скачали скрипт. Нужно заменить контейнер a на контейнер div и расположить на своем сайте это там, где вы хотите видеть часы. Наиболее подходящие места: подвал сайта или низ его боковой колонки.

Вот собственно и все. Так же можно установить скрипт слайдера для сайта html, поиск по сайту, календарь и многое-многое другое. Иногда такие вещи устанавливаются в виде jQuery-плагинов. Если вы используете популярную CMS, то для нее тоже есть множество плагинов, реализующих нужный функционал.

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

JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.

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

Очень полезный скрипт для выравнивания высоты или ширины колонок.

Вариант для высоты:

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 соответственно.

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

Function isValidDate(value, userFormat) { // Используем формат по умолчанию, если ничего не указано userFormat = userFormat || "mm/dd/yyyy"; // Находим разделитель исключая символы месяца, дня и года (в английском варианте - m, d, y) var delimiter = /[^mdy]/.exec(userFormat); // Создаем массив из месяца, дня и года, // то есть мы знаем порядок формата 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