Для достижения намеченной цели нам потребуется хотя бы поверхностное представление о объектно-ориентированном подходе программирования (ООП), JavaScript, компьютер, хотя бы простенький текстовый редактор (notepad подойдёт) , голова (это обязательно ;) и руки.

В случае если у вас нет не малейшего представления о ООП, но есть желание разобраться с данным материалом, ничего страшного, в рамках последнего я попытаюсь рассказать об основах подхода наиболее простым и понятным языком. Те кто знает, что такое ООП могут пропустить следующий параграф. Ну а те кто по каким-то причинам не хотят ни с чем разбираться, могут найти ссылку на готовый скрипт, а также инструкции по запуску в самом конце данной статьи.

Введение в ООП

ООП применяется для упращения процесса проектирования и разработки сложного программного обеспечения(ПО). Сам подход позаимствован из реальной жизни и по сути довольно прост. Заключается он в том, что все объекты, окружающие нас, по некоторым признакам можно группировать в классы. Так, чтобы каждый объект любого из этих классов имел один и тот-же набор свойств и выполняемых функций (методов) с другими объектами этого же класса.

Например объекты: компакт-диск, жёсткий диск, USB флэшек, дискету мы можем, нe долго думая, выделить в класс накопители информации. В данном случае рассматриваемый нами класс (в зависимости от задачи) может включать в себя такие свойства как объём, скорость чтения, скорость записи, скорость поиска информации, а также методы для её чтения и записи на накопитель. Впрочем, всё зависит от конкретной поставленной перед нами задачи. В некоторых случаях нам необходимо учитывать одни признаки объектов, а в некоторых какие-то другие. И уже исходя из этого мы делим объекты на классы, а также смотрим какие свойства и методы включать в этот класс.

Таким образом, класс в ООП является шаблоном с помощью которого создаются объекты.

Обратите внимание, что объект получает не только свойства, но и методы от порождающего его класса. Которые затем вызываются через сам созданный объект, а не откуда-то со стороны. Т.е. девизом ООП служит «всё своё ношу с собой», что делает объект самостоятельным. В этом и заключается основное преимущество ООП перед структурным программированием, где девиз на эту же тему «мухи отдельно, катлеты отдельно». Например, если у нас создан объект obj_cdrom1 класса cdrom_class, в котором описан метод open(), который призван открывать наш виртуальный CDROM (объект). Тогда чтобы «открыть устройство» нам надо просто «попросить» obj_cdrom1 вызвать свой метод open(). В структурном же подходе у нас была бы некая отдельная функция cdrom_opener(cdrom1_handler), в которую передавался бы указатель на какой-нибудь массив переменных, содержащий свойства конкретного устройства(cdrom1_handler) . А если таких методов в классе описано с десяток или более и количество объектов одного класса исчесляется далеко не в единицах? Так и запутаться можно..., даже на стадии разработки, не говоря уже о последующей доработке ПО. Поэтому если в подобных случаях вы предпочитаете использовать структурное программирование, то как говорится, мы идём к вам =)

Надеюсь, что в курс дела я вас ввёл. Кого заинтересовал объектно-ориентированный подход могут найти массу материалов на эту тему в интернете или почитать соответствующую литературу.

А снег идёт...

Чтобы смоделировать снегопад на страницах сайта для начала нам надо спроектировать как всё это будет выглядеть с точки зрения ООП, т.е. какие классы будут присутствовать в нашем сценарии, какие у них будут атрибуты и какие методы, будут ли они как-то между собой взаимодействовать и если да, то как.

В нашем случае, в сценарии будет присутствовать всего один класс - «снежинка». Она будет появляться на самом вверху страницы и затем падать до низу, после чего исчезать. А потом снова появляться вверху и снова падать... Падение, в свою очередь, означает изменение координатов объекта, а значит наш класс необходимо снабдить методами для получения и изменения этих координатов. Каждый объект класса «снежинка» должен как можно более самостоятельным от основной программы. Которой, в этом случае, останется лишь создать нужное количество снежинок и единожды вызвать их метод падения (помните о главном приемуществе ООП ;-) .

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

В действительности снежинка состоит из замороженной в особых условиях воды, но а наша виртуальная снежинка будет состоять из картинки(Img) заключённой в отдельный HTML слой (Div), чтобы свободно передвигаться по странице. Для полной самостоятельности метод её передвижения будет синхронизироваться таймером.

Как я уже говорил, снежинка будет долетать до низу страницы. Но как выяснилось позже, не всё так просто. Дело в том, что в одном браузере размеры HTML документа можно получить одним способом, а в другом для этих же целей приходиться прибегать к другим. Несовместимость - главное неудобство при разработке кросс-браузерных JavaScript сценариев. Но мы нашли универсальный метод решения задачи получения размеров страницы. Для этого в правом нижнем краю страницы необходимо разместить помеченный определённым ID объект HTML (Div подойдёт точно). А затем получить его координаты. Для большей точности можно также к полученным значениям X и Y прибавить соответственно ширину и высоту помеченного объекта, и таким образом мы получим координаты правого нижнего края страницы, а значит его размеры. Я называю этот метод «методом буйка».

Ну а далее пишем сам сценарий:

Если вы разобрались с данным сценарием, то при желании можете его какнибудь изменить (автор разрешает :). Просто «поигравшись» с некоторыми переменными можно получить какой-нибудь новый эффект. Самый простой пример это изменение количества генерируемых снежинок с помощью глобальной переменной snowflake_count. Либо можно поменять значение переменной snowcreate_maxseek. и тогда снежинки будут генерироваться с большей или меньшей периодичностью. Но самых интересных эффектов можно добиться, модифицируя непосредственно сами методы класса snowflake. Кардинально меняя таким образом поведение объектов. Можно даже добавить объекты каких-нибудь ещё классов от которых будет зависеть поведение снежинок и тогда у вас может получиться как описано в стихотворении А.С.Пушкина «Зимний вечер» (известные мне из школьной программы ;). Всё ограничено только вашим воображением и производительностью компьютера.

Установка сценария на сайт

Проиллюстрированный здесь сценарий вы можете также загрузить отсюда. Чтобы использовать его на страницах вашего сайта:
1. Расположите сам файл со сценарием на сайте;
2. Подключите сценарий к документу:
   <SCRIPT language="JavaScript" type="text/javascript" SRC="snow2.js"></SCRIPT>
   Где вместо snow2.js - URL к сценарию.
3. Разместите в правом нижнем углу документа какой-нибудь HTML объект с ID=”bottomdiv”:
   <a name="bdiv" id="bottomdiv"></a>
4. А затем можно вызывать функцию letitsnow():
   <SCRIPT>letitsnow()</SCRIPT>

Перейти к рубрике --> JavaScript