Archive for the 'Tutorial' Category
Безопасный Firebug
Мало какой вэб разработчик обходится без Firebug-a. Спасает уйму времени и нервов. Но бывает, что как раз из за фаербага случаются косяки. И случается это обычно из за того, что девелопер забывает убрать вызовы функции console.log (и прочих) из кода. В браузерах, где не установлен фаербаг естественно будут ошибки.
Исправить это легко. Например можно быть внимательнее и удалять ненужный код. А можно просто добавить небольшой кусок кода в начало своего скрипта и навсегда забыть про ошибки в других браузерах.
-
if (!window.console || !console.firebug) {
-
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
-
window.console = {};
-
for (var i = 0, len = names.length; i < len; ++i) {
-
window.console[names[i]] = function() {}
-
}
-
}
Ещё можно скачать тоже самое с сайта разработчиков фаербага и вставить в HEAD.
No commentsПодсказки для полей input и textarea
Работа с html формами это одно из самых интересных занятий. Чего только не сделаешь, и автокомплит и валидация форм и отправка данных аяксом. Недавно меня заинтересовала проблема показа подсказок для пользователей. Например если это поле поиска, то можно показывать некоторые примеры. Например список распространённым запросов. При нажатии на поле, эти подсказки надо спрятать и если юзер ничего не ввёл - то снова их показывать.
В интернете есть куча примеров как это сделать, но я решил написать своё. Вот идея реализации. Для подсказок будем использовать аттрибут "title" и "value". Также элементам с такой функциональностью дадим класс "ClearOnClick". Тоесть элемент формы будет выглядеть примерно так:
-
<input type="text" title="Example: ajaxrussia, google, yahoo" value="Example: ajaxrussia, google, yahoo" name="query" class="ClearOnClick" />
Namespace и джаваскрипт
Сегодня решил привести в порядок свои джаваскрипт функции. Заметил что все мои функции - глобальные. Это не очень хорошо и сейчас я покажу как этого избежать. Для этого я создам объект-функцию которая запустит саму себя и вернёт другие функции, которые будут жить в нужном мне именном пространстве.
Лучше всего выбирать имя как и у проекта. В моём случае пронстранство имени будет "AjaxRussia". И так, поехали. Read more
4 commentsJavascript scope: что делает this?
Столкнулся сегодня на работе с одной интересной особенностью джаваскрипта. Я раньше программировал на Java, и привык, что если пишешь:
-
{
-
return this.name;
-
}
то this будет означать инстанцию класса. В джаваскрипте это не всегда так, и это я продемонстрирую на небольшом примере. Read more
10 commentsCurl эффект - как загнуть угол у картинки без фотошопа
Я уже писал как можно делать зеркальные отражения картинок при помощи джаваскрипта. Сегодня статья из этой же серии - для программистов которые не хотят возится с фотошопом. На этот раз мы будем загибать углы у картинок, и создадим такой своеобразный 3D эффект. Пример эффекта можно посмотреть например на Flickr, или наберите в гугле "curl effect".
Для туториала нам понадобится одна картинка и два джаваскрипт файла из комплекта curl.js (по этому адресу можно почитать документацию и посмотреть другие примеры использования).
Нашёл на Flickr вот такую медузу, дал ей id="jellyfish" и сейчас мы будем у неё загибать уголки.
