Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • JavaScript

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

  • 29.03.2001
Total
0
Shares
0
0
0
0
0
0

Автор статьи: Мельников Михаил

Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился 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, мы рассмотрим в следующей статье.

  • Total
    0
    Shares
    Телеграфировать 0
    Поделиться 0
    Репост 0
    Твитнуть 0
    Алексей Волков

    Предыдущий материал
    • CSS

    История про CSS (часть I)

    • 29.03.2001
    • Алексей Волков
    Read More
    Следующий материал
    • JavaScript

    JavaScript: полезные функции (часть I)

    • 29.03.2001
    • Алексей Волков
    Read More
    Вас также может заинтересовать
    Read More
    • JQuery

    Хитрости JQuery

    • jokar
    • 23.05.2012
    Read More
    • JQuery

    Закруглить углы изображения при помощи JQuery

    • jokar
    • 21.05.2012
    Read More
    • JQuery

    Знакомьтесь: Nivo Slider от jQuery

    • tamo
    • 28.09.2010
    Read More
    • JQuery

    Первое знакомство с jQuery: часть первая.

    • tamo
    • 26.09.2010
    Read More
    • JQuery

    Продолжаем изучать jQuery: часть вторая. Учимся выделять элементы.

    • tamo
    • 26.09.2010
    Read More
    • JQuery

    Продолжаем изучать jQuery: работа с анимацией. Часть третья.

    • tamo
    • 26.09.2010
    Read More
    • JQuery

    Плагин AeroWindow для jQuery

    • jokar
    • 13.09.2010
    Read More
    • JQuery

    Симпатична скользящая форма на jQuery

    • jokar
    • 12.09.2010

    Добавить комментарий

    Для отправки комментария вам необходимо авторизоваться.

    Свежие посты
    • Рассылка как продукт
      • 24.07.20
    • Google назвал лучшие приложения App Store за 2018 год
      • 14.12.18
    • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
      • 25.05.18
    • Бесплатная онлайн-конференция по управлению репутацией
      • 04.12.17
    • Открыта регистрация на CyberMarketing-2017
      • 19.10.17
    Маркетер
    • О проекте
    • Информационное спонсорство
    • Рекламным агентствам
    • Ссылки
    (с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

    Введите ключевые слова для поиска и нажмите Enter