Календарь
Данный пример объекта на сайте представляет собой календарь. Он создается с помощью простых приемов javascript программирования. Данный пример-иллюстрация показывает возможности Javascript заполнять области контентом, содержание которого зависит от текущей даты и автоматически меняется каждый день. Календарей можно сделать очень много и самых разных. Здесь я рассмотрю простой календарь, который стоит на этом сайте в левой колонке. Сначала, как обычно, я просто покажу текст тестового сайта, содержащего программу календаря. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <style> записаны параметры тега с id=clndr. Такой id будет иметь область <div>, в которой будет находиться наш календарь. В принципе, форматирование можно было бы записать в самом теге, но такая запись облегчает чтение кода. Тут же записан шрифт для записи колонок таблиц с классом "c". Эта запись нам сократит форматирование колонок календаря. Далее открывается контент сайта, записывается заголовок и после него сразу заказывается та самая div область, про которую мы только что говорили. Рельно ее можно ставить на сайт в любое место, которое автор сайта зарезервировал под календарь. Заметьте, сама область пустая. А сразу за тегом стоят скобки тега <script> внутри которых и записывается календарь. Прежде всего стоит уже знакомая нам функция geid, она нужна только в примере, на реальном сайте она наверняка уже будет написана и здесь писать ее повторно не придется. А сразу за ней записана функция calendar, которая является совершенно стандартной и может быть использована на любом сайте без изменений. Функция имеет аргумент date. Этот аргумент позволяет указать функции конкретную дату, и календарь покажет месяц, в который входит эта дата и отметит дату. Но аргумент можно и не задавать. Следующей строкой записано, что если аргумент не задан, то есть null, параметр date определяется как сегодняшняя дата с помощью конструктора класса Date, который и выдает сегодняшнюю дату, причем ответ меняется каждый день. Теперь переменная date стала объектом класса Date, и к ней применимы все методы (функции) данного класса. Так значение переменной day получается с помощью функции getDate() данного класса, значение переменной month получается с помощью функции getMonth(), а значение переменной year -- из функции getFullYear(). Таким образом в этих переменных мы получили сразу три числа: число, месяц и год, которые в данный момент показывает компьютер. Javascript нам дает эту информацию через методы встроенного класса Date. Далее определяется массив строк с названиями месяцев года.
Далее вводятся новые объекты класса Date с названиями this_month, next_month. Но в аргументе конструктора сразу ставятся значения текущего года, текущего месяца (или +1) и первого дня. Затем определяется значение переменной fwd как день недели для первого дня месяца минус 1. Переменная dtm вычисляется более сложно. Встроенная функция getTime() выдает время в миллисекундах от 1 января 1970 года до текущей даты. Это вычисляется сначала для первого дня следующего месяца, затем для текущего месяца из второе вычитается из первого, после чего делится на число миллисекунд в одном дне. Такая процедура позволяет определить сколько дней в данном месяце. После этого начинает заполняться текстовая переменная c_html, в которую записывается код HTML. Тег за тегом в эту переменную записывается таблица. Знак += означает, что к текущему состоянию строки будет прибавлена новая строка. Здесь же указываются параметры CSS. Это оправдано тем, что данный объект является независимым и может встраиваться в любой сайт. Поэтому удобно внутреннее CSS форматирование делать тут же. А повторяющиеся фрагменты вынесены в общее описание. Я только замечу, что первая строка сразу объединяет 7 колонок, и в нее записывается название месяца из массива названий по номеру текущего месяца, а потом через пробел записывается число года. Затем открывается и сразу закрывается новая строка. Так как она пустая, то ее высота будет минимальной, тем не менее она создаст некоторый вертикальный промежуток. Затем открывается новая строка и в цикле от нуля до fwd (дня недели меньше на 1 чем день недели первого числа данного месяца) записываются пустые колонки со своим форматированием. Далее переменной wd присваивается значение fwd и выполняется цикл по всем дням месяца от первого до последнего. Внутри цикла определяется остаток wd после деления на 7. Если он равен 0, то строка закрывается и открывается новая строка. Далее делается проверка на совпадение дня в цикле с днем, который сегодня. Если совпадает, то колонка форматируется особым образом, этим самым отмечается текущий день календаря. Далее надо проверить на последний день недели, дни недели считаются от 0 до 6, то есть это 6 день. Если совпадает, то колонка форматируется специальным образом отмечая выходной день. Если оба условия не выполянются, то колонка форматируется обычным образом. В конце цикла день недели увеличивается на единицу. А после цикда надо закрыть последний ряд и таблицу. Вот и все. Осталось найти тег по id=clndr и вставить внутрь его новый HTML код из текстовой переменной, которую мы только что создали. После этого определение функции закрывается и она сразу вызывается на исполнение.
Итак, мы теперь понимаем как это делается. А раз так, то можем кое что подправить по своему вкусу или добавить кое что новое, или изменить старое. А можно ничего не меняя ставить календарь на любой сайт и он будет работать. Только помните одну тонкость. Javascript функцию, которая ищет область по заданному id, надо ставить только после того, как эта область определена. Как у на и сделано. Но если очень хочется поставить код в начало (хотя это плохой стиль), то можно использовать ссылку на область. А вот самц ссылку уже точно надо определять в конце. Но лучше всегда и везьде ставить весь javascript код в конце и никогда не будет проблем.
Автор: Виктор Кон, 9.09.2013
