Поиск по этому блогу

понедельник, 25 июня 2012 г.

Как выбрать строку таблицы используя jQuery и Javascript

Имеется задача - выбрать каждую строку таблицы, которая, к примеру, в каждой третьей ячейке есть атрибут - rowspan. При использовании библиотеки jQuery это решается в одну строчку:
$('td:nth-child(3)[rowspan]').parent();
В данном примере выбираются все ячейки таблицы, которые относительно своего родительского элемента являются третими по счету и имеют атрибут rowspan, а потом возвращается их родительский элемент.
Не используя jQuery задачу выбора строки таблицы, в которой третяя ячейка имеет атрибут rowspan можно решить следующим образом:
for (var i = 0; row = tableHandler.rows[i]; i++) {
    if( row.cells[2].hasAttribute("rowspan") {
        //Выполнение нужных действий со строкой таблицы
    }
}

понедельник, 18 июня 2012 г.

Как определить высоту окна браузера через javascript

Иногда возникает тривиальная задача - точно определить высоту окна браузера, например для абсолютного позиционирования элементов. Проблема данной задачи состоит в том, что разные версии браузеров от разных производителей дают самые непредсказуемые результаты и при этом используют разные свойства для определения высоты. Поэтому, наиболее правильным решением задачи определения высоты окна браузера будет подсмотренное в исходных кодах библиотеки jQuery :)
function documentHeight() {
    return Math.max(
        document.documentElement.clientHeight,
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight
    );
}

пятница, 15 июня 2012 г.

Определение является ли переменная числом на javascript

Как определить является ли переданная переменная числом или нет? Есть встроенные функции, но все они дают неоднозначные результаты. При этом функция должна быть максимально простой и кросс-платформенной. Для этого лучше всего подходит следующий код: !isNaN(parseFloat(n)) && isFinite(n);
из всех возможных комбинаций и вариантов цифр он определяет наибольшее количество верно.

Сравнение переменных разных типов в javascript и возможные баги

Решил написать эту статью, т.к. иногда в констукции if () else могут возникнуть ошибки при сравнении переменных разных типов (вернее, не ошибки, а непониание работы интерпретатора). Время на поиск которых может быть несоизмеримым со временем написания данной статьи. Приведу пример сравнения массива и строки:
//Такой пример введет кого угодно в замешательство, но он хорошо отображает суть вопроса
> ",,," == Array(4)
//Вернет true
Если ввести данную команду в консоли вы получите положительный результат (true). Дело в том, что операция сравнения приводит выражения по обе стороны оператора сравнения к единому типу. В данном случае Пустой массив приводится к строковому типу: ",,," - четыре пустых элемента, разделенных запятыми (по умолчанию, элементы массива в javascript разделены запятыми). Для проверки этого можно ввести в консоль следующие примеры:
> Array(4).toString();
//Вернет ",,,"
> ['a','b','c'].toString();
//Вернет "a,b,c"
Во избежание таких ситуаций нужно использовать оператор эквивалентности: "===". В случае сравнения переменной простого типа и объекта к объекту применяется функция ToPrimitive(), которая возвращает значение по умолчанию для объекта это значение возвращаемое методом DefaultValue().

Оператор эквивалентности при работе с объектами javascript

Замечание касательно работы оператора эквивалентности состоит в том, что если проверяются на эквивалентность два объекта, то фактически проверяется эквивалентность их ссылок, поэтому, код: new String("a") !== new String("a") вернет false, т.к. это два разных объекта.

понедельник, 11 июня 2012 г.

Выполнение нескольких запросов AJAX через jQuery .post

Нужно построить приложение, в котором вызовы Ajax будут вложены в друг друга заданное количество раз, а параметры последующих запросов будут задаваться в зависимости от номера вложенности. При этом запросы к серверу должны идти последовательно, один за одним.
Если не возможно использовать синхронные запросы ($.ajaxSetup({async:false});) в силу разных причин (использования jsonp, выполнения других запросов в ajax в это же время или в силу блокировок браузера), то нужно использовать "Отложенный объект", а точнее функцию jQuery.then(). Реализация кода может быть следующей:
var args = ['arg1','arg2','arg3','arg4','arg5','arg6'];
deferredPost(0, 5);
function deferredPost(index, max){    
    var delay = Math.random()*3;
    if (index < max){
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'');
        }).then(function(){
            deferredPost(index+1, max);
        });
    } else {
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'');
        });
    }
}

четверг, 7 июня 2012 г.

Как преобразровать минимизированный код javascript

Думаю, не я один использую минимизированные библиотеки Java Script, но иногда возинкает задача преобразовать код в читаемый вид для отладки или доработки функционала, для этого существует отличный инструмент - JS Beautifier.
После отладки код javascript сжать можно с помощью приложения: http://closure-compiler.appspot.com

среда, 6 июня 2012 г.

Как проверить состояние checkbox-а используя jQuery

Иногда возникает задача проверить состояние чекбокса (checkbox) в форме HTML и в зависимости от его состояния показать/скрыть другие элементы формы. Итак, допустим наш элемент имеет идентификатор "surnameCB", а элемент, который нужно показать/скрыть - "surnameTXT". Одной из возможных реализций задачи показа/скрытия элемента страницы в зависимости от переключателя формы является следующая:
if ($('#surnameCB').is(':checked')) {
    $('#surnameTXT').show();
} else {
    $('#surnameTXT').hide();
} 
или более короткая (но менее удобочитаемая) запись:
$('#surnameCB').is(':checked') ? $("#surnameTXT").show() : $("#surnameTXT").hide();
В данных примерах используется метод .is() вместо .attr(), т.к. начиная с версии 1.6 разработчики не рекомендуют использовать последний для определения состояния флажка, вместо него можно использовать $('#surnameCB').prop('checked'), который возвращает true или false в зависимости от того отмечен флажек или нет
Также этот код можно просто реализовать без использования jQuery:
var surnameCheckbox = document.getElementById('surnameCB');
var surnameInput = document.getElementById('surnameTXT');
// Для совместимости со старыми версиями IE
surnameCheckbox.onchange = function() {
    // Проверка отмечен ли флажком checkbox.
    surnameInput.hidden = this.checked ? false : true;
    //Хотя, вместо hidden лучше использовать surnameInput.style.display для совместимости
};

вторник, 5 июня 2012 г.

Почему лучше не использовать jQuery конструкцию $().ready(handler) в версии библиотеки выше 1.4

В официальной документации по библиотеке jQuery написано, что все три нижеперечисленные конструкции эквивалентны:

$(document).ready(handler)
    $().ready(handler) (this is not recommended)
    $(handler)
Но вот во второй строчке есть приписка "this is not recommended". Стало интересно почему же?
Оказалось, хитрость закопана в истории версий jQuery: В версиях до 1.4 конструкция $() была ссылкой на конструкцию $(document). Поэтому, данный код воспринимался нормально.
Но масса людей начала делать столь безумные вещи как например: $().mouseover() А для того, чтобы получить пустой объект jQuery приходилось делать следующую манипуляцию: $([]).

Поэтому начиная с версии 1.4 конструкция $() вовзращает пустой объект jQuery. Но в версии 1.4 $().ready(fn) оставлена для совместимости. Лучшей практикой по мнению разработчиков библиотеки является использование конструкции: $(document).ready(fn)