Snowcore’s блог

Каким образом можно определить количество дней в месяце? На javascript это сделать очень просто.

Дело в том, что объект Date в javascript очень гибок. Если создать дату с числом, которого нет в данном месяце (например 33 - ну его уж точно нигде нету ))), то месяц (или год) объекта увеличится.

Например, попробуем создать дату 33 в текущем месяце - июне (не забываем также, что месяцы в javascript нумеруются с нуля):

var june = new Date(2009, 5, 33);

В итоге результирующей датой будет 3 июля 2009 г.

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

var dayCount = 32 - new Date(year, month, 32).getDate();

Или более красивый вариант:

var dayCount = new Date(year, month + 1, 0).getDate();

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

И так, приступим.

Работа с выпадающим списком на чистом javascript

Перечислим список основного, что нужно знать при работе с выпадающим списком:

Элемент select:

• select имеет коллекцию элементов option (свойство select.options). Данное свойство представляет собой массив,
  к элементам которого можно обратиться по индексу
• количество options в select хранит свойство select.length или select.options.length
• свойство select.selectedIndex содержит индекс текущего выбранного элемента option
• свойство select.value содержит значение выбранного элемента option
• выпадающий список с множественным выбором можно сделать используя атрибут multiple=”multiple”

Элемент option:

• option.value - значение элемента
• option.index - индекс элемента в коллекции HTMLOptionsCollection
• option.selected - атрибут, который показывает состояние элемента выбран/не выбран
• option.disabled - атрибут, который отвечает состояние элемента доступен/не доступен

У нас есть все тот же HTML элемент <select>:

<select id=“sel“ name=“sel“>
  <option value=“0“>zero</option>
  <option value=“1“>one</option>
  <option value=“2“>two</option>
  <option value=“3“>three</option>
</select>

1. Получить значение выбранного элемента

var value = document.getElementById(’sel’).value

2. Получить текст выбранного элемента

var sel = document.getElementById(’sel’);
var text = sel.options[sel.selectedIndex].text;

3. Добавить элемент в конец списка

var sel = document.getElementById(’sel’);
// создаем элемент option
var opt = document.createElement(‘option’);
// определяем значение и текст нового элемента
opt.value = 4;
opt.innerHTML = ‘four’;
// добавляем option в конец select
sel.appendChild(opt);

4. Добавить элемент в начало списка
Действия аналогичны предыдущему примеру, за исключением использования функции insertBefore

var sel = document.getElementById(’sel’);
var opt = document.createElement(‘option’);
opt.value = -1;
opt.innerHTML = ‘minus’;
sel.insertBefore(opt, sel.options[0]);

5. Вставить элемент после заданного элемента (после второго)

var sel = document.getElementById(’sel’);
var opt = document.createElement(‘option’);
opt.value = 7;
opt.innerHTML = ‘inserted’;
sel.insertBefore(opt, sel.options[2]);

6. Удалить выбранный элемент

var sel = document.getElementById(’sel’);
sel.removeChild(sel.options[sel.selectedIndex]);

7. Очистить select

var sel = document.getElementById(’sel’);
var nodes = sel.childNodes;
var len = nodes.length;
for (var i=len-1; i>=0; i–)
{
    sel.removeChild(nodes[i]);
}

8. Сделать элемент выбранным (последний)

var sel = document.getElementById(’sel’);
// вариант №1: через установку атрибута для option
sel.options[sel.length - 1].setAttribute(’selected’, ’selected’);
// вариант №2: используя свойство selectedIndex для select
sel.selectedIndex = sel.length - 1;

9. Сделать элемент недоступным (первый)

var sel = document.getElementById(’sel’);
sel.options[0].setAttribute(‘disabled’, ‘disabled’);

10. Изменить цвет текста всех элементов, кроме выбранного

var sel = document.getElementById(’sel’);
for(var i=0; i<sel.length; i++)
{
    if (i != sel.selectedIndex) {
        sel.options[i].style.color = ‘red’;
    }
}

Хороши фреймворки, да основы надо знать

В приложениях которые используют jQuery framework, обработчики событий практически всегда задаются так:

$(document).ready(function(){
  // do something…
});

Т.е. все действия будут выполнятся после полной загрузки документа. Но если у нас на странице единственный компонент javascript, использование которого не требует полной загрузки страницы? В данной ситуации можно задавать обработчик как только будет загружен javascript компонент (а не весь документ). Рассмотрим на примере: у нас есть компонент “часы” - для работы которого нужен элемент div. В данном случае javascript действия можно выполнять уже после загрузки элемента div с id=”clock”, например:

$(‘#clock’).ready(function(){
  // init clock
});

Все предельно просто, но а если у нас много javascript компонентов?
С данной проблемой я столкнулся на работе: вся страница грузится с нормальной скоростью, а баннеры загружаются в последнюю очередь. При чем этот процесс занимает слишком много времени. Получается, что используя обработчик вида $(document).ready(function(){…}); javascript ожидает загрузки всех баннеров. И в это время страница, состоящая из ajax элементов, находится в неработоспособном состоянии. Но, к счастью, jQuery позволяет вызвать ready вручную (jQuery ready manual call):

Данный метод сообщает о том, что документ был загружен. Таким образом можно использовать стандартный обработчик $(document).ready(function(){…});
Проблема была решена следующим образом: в главный layout шаблон, делается javascript вставка перед закрывающимся тегом body:

<script type=“text/javascript”>
 jQuery.ready();
</script>

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

На данный момент плагин находится в стадии разработки. Посмотреть на черновой вариант можно по адресу: http://snowcore.net/grid/.

Я планирую реализовать в нем следующие особенности:

• пейджинг
• валидация вводимых данных
• гибкая настройка (определение собственных стилей и прочее)
• применение фильров

Если у кого есть еще какие-либо пожелания или замечания - отпишитесь в комментариях.