Logo Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

✅ Дешевый VPS-хостинг на AMD EPYC: 1vCore, 3GB DDR4, 15GB NVMe всего за €3,50!

🔥 Anti-DDoS защита 12 Тбит/с!

VPS в 21 локации

От 104 рублей в месяц

Безлимитный трафик. Защита от ДДоС.

🔥 VPS до 5.7 ГГц под любые задачи с AntiDDoS в 7 локациях

💸 Гифткод CITFORUM (250р на баланс) и попробуйте уже сейчас!

🛒 Скидка 15% на первый платеж (в течение 24ч)

2000 г

JavaScript и объектная модель

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript - подмножество Visual Basic-а и JavaScript. Вот последним мы и займемся, как наиболее универсальным.

Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью броузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.

Что такое объектная модель?

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

Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:

  1. Страничка скачивается с сайта и размещается в памяти компьютера
  2. Производится анализ странички, в результате которого она препарируется на составляющие.
  3. Блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных соответственно структуре объектной модели.
  4. База данных становится доступной другим программам и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.

Структура объектной модели

Чтобы было понятно, о чем мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше.

  • window - объект, дающий доступ к окну броузера
  • frames - объект, дающий доступ к фреймам
    • window...
    • window...
    • ...
  • document - объект, содержащий в себе всю страничку
    • all - полная коллекция всех тегов документа
    • forms - коллекция форм
    • anchors - коллекция якорей
    • appleеs - коллекция апплетов
    • embeds - коллекция внедренных объектов
    • filters - коллекция фильтров
    • images - коллекция изображений
    • links - коллекция ссылок
    • plugins - коллекция подключаемых модулей
    • scripts - коллекция блоков <script></script>
    • selection - коллекция выделений
    • stylesheets - коллекция объектов с индивидуально заданными стилями
  • history - объект, дающий доступ к истории посещенных ссылок
  • navigator - объект, дающий доступ к характеристикам броузера
  • location - объект, содержащий текущий URL
  • event - объект, дающий доступ к событиям
  • screen - объект, дающий доступ к характеристикам экрана

Объектная модель Netscape Navigator-а немного отличается от вышеприведенной, но ее смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей.

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

Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

И, как Вы понимаете, вот здесь-то на сцену и выходит скриптовый язык, который и позволяет нам манипулировать объектами.

Как любой язык программирования, JavaScript имеет определенный набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишите сами.

Как и где размещать код скрипта?

Но сначала мы немного отвлечемся от эффектов и поговорим о том, как и где размещать JavaScript. Так как язык скриптовый и рассчитан на работу на web-страничках, то его код размещается непосредственно в HTML-коде странички. Причем, код на JavaScript обычно состоит из двух частей:

  1. Функции, которые вызываются из кода странички в ответ на какое-то событие
  2. Код событий, которые вызывают функции :))

Описание функций должно располагаться в теге <head></head> - это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:

<script language="JavaScript">
<!--
function somefunction()
{
    // здесь располагается код функции
}
//-->
</script>

Обратите внимание, что непосредственно сам код заключен в тег комментария. Это сделано для того, чтобы более старые броузеры игнорировали непонятные им команды. Новые же программы знают о существовании закомментированных скриптов и им это не мешает.

Заметьте также, что закрывающий тег комментария несколько необычен и предваряется двумя косыми чертами. Две косые черты - это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.

Ну вот, с основами применения скриптов разобрались, а примеры популярных и полезных эффектов, реализованных при помощи JavaScript, мы рассмотрим в следующей статье.

Назад | Содержание | Вперед

 

Скидка до 20% на услуги дата-центра. Аренда серверной стойки. Colocation от 1U!

Миграция в облако #SotelCloud. Виртуальный сервер в облаке. Выбрать конфигурацию на сайте!

Виртуальная АТС для вашего бизнеса. Приветственные бонусы для новых клиентов!

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

VPS/VDS серверы. 30 локаций на выбор

Серверы VPS/VDS с большим диском

Хорошие условия для реселлеров

4VPS.SU - VPS в 17-ти странах

2Gbit/s безлимит

Современное железо!

Новости мира IT:

Архив новостей

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...