Вы наверно удивитесь, но производить отладку скриптов JavaScript можно при помощи Microsoft Office. Смешно, не правда ли? Тем не менее, в комплект поставки Microsoft Office 2003/XP входит Microsoft Script Editor – прекрасный дебаггер, внешне напоминающий Visual Studio. Он способен производить пошаговый проход, просмотр переменных, редактирование файлов и многое другое, и все это доступно для Internet Explorer 6/7 (и скорее всего для MS Office тоже ).

<< читать дальше >>

Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:

1. Способен проверять значения email, URL, числа, цифры, номера кредитных карт, минимальное и максимальное значения и др.
2. Поддержка удаленной проверки используя AJAX.
3. Автоматическое отображение сообщений об ошибках.

Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 3 поля – имя пользователя, пароль и checkbox “запомнить”.

<form name="myForm" id="myForm" action="" method="post" style="margin:20px">
	<label for="username">Имя пользователя </label><br/>
	<input type="text" name="username" value="" /><br/>
	<label for="password">Пароль</label><br/>
	<input type="password" name="password" value="" /><br/><br/>
	<label for="remember">Запомнить меня:</label>
	<input type="checkbox" name="remember" /><br/><br/>
	<input type="submit" name="" value="Submit" />
</form>

Для начала нам понадобится подключить библиотеку jQuery и плагин в страницу:

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.delegate.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

Теперь можно вызывать функцию jQuery.validate() которая инициализирует форму. В качестве атрибута в функцию нужно передать объект, содержащий правила (rules) и сообщения об ошибках (messages) для каждого проверяемого поля:

$().ready(function(){
	$("#myForm").validate({
		rules : {
			username : {required : true, minlength: 2},
			password : "required"
		},
		messages : {
			username : {
				required : "Введите ваше имя",
				minlength : "Введите не менее, чем 2 символа."
			},
			password : "Введите пароль"
		}
	});
});

Здесь все довольно таки просто. Селектор $(”#myForm”) получает указатель на форму, а функция validate() устанавливает правила для полей в соответствии с полученными данными. Объект rules содержит имя поля и список правил. Если правил несколько, то они должны быть объединены в отдельный объект. Так, для поля пароль просто указано правило “required”, т.е. обязательное поле, в то время как для поля username указан объект содержащий два правила – required и minlength (минимально допустимое количество символов). Структура объекта messages такая же, как и для rules, за исключением того, что вместо атрибутов правил указаны сообщения об ошибках.

Если при отправке формы обнаружены ошибки, то форма не отправляется, а высвечивается сообщение об ошибке в виде тэга <lable> с классом error. Также класс error присваивается элементу input, вызвавшему ошибку. Воспользуемся этим чтобы ярко выделить это поле:

label.error {
	color: red;
	font-style: italic;
}
input.error {
	border: 1px dotted #f00;
}

Таким образом, сообщения об ошибках будут выделены красным курсивом, а рамка поля, вызвавшего ошибку, будет выделена красной прерывистой линией.

Демо этого примера можно посмотреть здесь.

<< читать дальше >>

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

1. Уменьшение количества HTTP запросов к серверу.
2. Использование кэширования
3. GZip сжатие страниц
4. Уменьшение размера файлов JavaScript и CSS

Конечно же, можно вручную уменьшить размер стилей, скриптов и самих web-страниц простым удалением пробелов, сжимать все это используя GZip (подробнее об этом здесь (англ.)), однако более практично использовать утилиту PHP Speedy. Как видно из названия, эта утилита написана для сайтов на PHP и предназначена для ускорения их загрузки. Она использует все вышеперечисленные методики: уменьшение количества запросов на сервер обеспечивается путем объединения нескольких скриптов (стилей) в один, который кэшируется для дальнейшего использования; скрипты, стили и сама страница сжимаются путем удаления лишнего форматирования (пробелов, табов, переноса строк), скрипты JavaScript сжимаются утилитой JSMin. Чтобы визуально продемонстрировать эффект применения утилиты, я разместил ниже 2 изображения с сайта PHP Speedy: первое показывает лог загрузки до использования PHP Speedy, сделанный в Firebug, второе – при использовании PHP Speedy.

Без использования PHP Speedy – 14 запросов, 4,44 секунды

При использовании PHP Speedy – 4 запроса, 1,1 секунды

<< читать дальше >>

WP-Prettify – это плагин для wordpress, созданный мной на основе google-code-prettify. Он предназначен для подсветки синтаксиса на web-страницах. Подсветка выполняется на стороне клиента, то есть в браузере пользователя при помощи скрипта JavaScript. В данный момент доступны следующие языки программирования: C/С++, C#, Java, Python, Bash, SQL, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl. HTML и XML также доступны, однако при использовании этих языков, нужно заменять открывающие тэги < на &lt;, в противном случае вместо тэгов вы можете увидеть соответствующие HTML элементы.

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

Устанавливается плагин точно так же, как и любой другой плагин для wordpress: нужно просто распаковать дистрибутив в директорию с плагинами (/wp-content/plugins), затем активировать его из админ панели. Затем любой кусок кода, который необходимо отформатировать, нужно заключить в тэги pre, указав для них класс prettyprint:

<pre class="prettyprint">
   // далее код который нужно подсвечивать
   function hello(){
      alert('hello world');
   }
</pre>

В результате вы получите следующий отформатированный текст:

	// далее код который нужно подсвечивать
	function hello(){
		alert('hello world');
	}

Скачать скрипт можно здесь: wp-prettify-0.1.zip (19,8K). Страница проекта находится здесь.

Доброго времени суток.

Сегодня я добавил новый раздел – "Мои проекты" в котором я буду выкладывать мои разработки. Пока в нем только один проект – LightGallery – очень компактный и многофункциональный скрипт для просмотра изображений на странице, аналог популярного скрипта LightBox. Особый акцент я делаю на то, что мой скрипт не зависит от сторонних библиотек (Prototype, scriptaculous, jQuery). Надеюсь, будет очень полезен для вас.
До скорого!