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


JavaScript. Объектная модель, свойства, методы, события

На этой странице даны общие представления о JavaScript, как о языке программирования.

Объектная модель документа и её назначение

Объектная модель документа осуществляет связь самого документа с браузером и действиями пользователя.

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

JavaScript свойства

Методы

Существуют методы в Java Script, позволяющие управлять свойствами объектов — open(), write() и др.
Они генерируют или меняют составляющие документа. Нажатие кнопок, закрытие и открытие окон — являются другими примерами методов.

События

В работе с javascript важным инструментом является обработка событий.
Прописав JScript код, в значение обработчика события для существующего элемента ( к примеру button), применив onClik, будет выполнено заданное действие при нажатии пользователем на кнопку.
Одним из наиболее важных инструментов работы с объектами в Jscript является обработка событий. К примеру в разметке HTML существует элемент кнопки – button, на который пользователи могут нажимать. При помощи событий мы сможем отследить и обработать нажатие пользователя на эту кнопку при помощи обработчика события нажатия onClick. В значение обработчика события вписывается JS код, который будет выполнен при нажатии пользователя на кнопку.
Событие обрабатывается только после полной загрузки элемента, для которого это событие заданно.

Справочник JavaScript: объекты, DOM, BOM

Справочник объектов JavaScript

Справочник содержит описание всех свойств и методов стандартных встроенных объектов JavaScript.

Объектная модель документа

Объектная модель документа (Document Object Model, DOM) – это интерфейс программирования приложений (Application Programming Interface, API) для XML, который был расширен также для работы с HTML.

В DOM всё содержимое страницы (элементы и текст) представляется как иерархия узлов. Рассмотрим следующий код:

Этот код можно изобразить с помощью DOM как иерархию узлов:

Представляя документ в виде дерева узлов, DOM API предоставляет разработчикам полный контроль над содержимым и структурой веб-страницы.

При описании древовидной структуры DOM используется терминология, которая была заимствована у генеалогических деревьев.

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


Справочник по DOM содержит описание объектов Document, Element, Event и NodeList, включая описание их методов и свойств:

Справочник BOM

BOM (Browser Object Model в переводе с анг. — Объектная Модель Браузера) обеспечивает доступ к окну браузера и позволяет манипулировать им и его элементами.

BOM-объекты обеспечивают доступ к функционалу браузера независимо от контента веб-страницы. Тема BOM интересна и одновременно сложна, потому что из-за длительного отсутствия спецификации производители браузеров свободно расширяли BOM по своему усмотрению. Многие элементы, схожие в разных браузерах, стали стандартами де-факто, которые соблюдаются и по сей день из соображений взаимной совместимости. Чтобы стандартизировать эти фундаментальные аспекты JavaScript, консорциум W3C определил основные BOM-элементы в спецификации HTML5.

Справочник содержит описание всех свойств и методов каждого из объектов:

Понятие объектной модели применительно к JavaScript

Назначение и применение JavaScript, общие сведения

Гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах и инструментах манипулирования узлами и связями. Технология World Wide Web — это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна соответствовать общему определению таких систем. Это означает, что все перечисленные выше компоненты гипертекстовой системы должны быть и в Web.

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

При втором подходе гипертекстовая сеть определяется на множестве элементарных информационных объектов самими HTML-страницами, которые и играют роль гипертекстовых связей. Этот подход более продуктивен с точки зрения построения отображаемых страниц «на лету» из готовых компонентов.

При генерации страниц в Web возникает дилемма, связанная с архитектурой «клиент-сервер». Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript — это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript — это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

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

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

Название «JavaScript» является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association — Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.

Использование JavaScript

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

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

Рекомендация Следует понаблюдать за тем, что создают с помощью JavaScript другие разработчики. Это отличный способ найти свежее решение.


Прочитав эту книгу, вы не только освоите JavaScript (вместо того, чтобы просто копировать и вставлять в Web-страницу готовые сценарии), но и узнаете множество интересных идей, реализовать которые вы сможете сами — с помощью JavaScript.

Важность изучения JavaScript

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

Илон Маск рекомендует:  Что такое код ircg_is_conn_alive

Рекомендация Запомните: единственное, что отличает пользующиеся успехом сайты от неудачных, — их внешний вид. Чем интереснее оформлен сайт, тем он популярнее.

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

Можно найти еще множество причин для изучения и использования JavaScript. Сценарий всего в несколько строк помогает посетителям сайта отыскать страницу, соответствующую их браузеру и установкам, либо автоматически подсчитать сумму колонок в форме заказа. Подобные «мелочи» не рассчитаны на внешний эффект, но они свидетельствуют о высоком уровне профессионализма разработчика и знании им этики деловых отношений.

Цель работы.

Целью данной работы является получение навыков при изучения языка программирования JavaScript и с помощью него создать тематическую Web – страницу.

Понятие объектной модели применительно к JavaScript

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер — это объект, который характеризуется тройкой:

Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель — это представление объектов, методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее — посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.

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

Cвойства

Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря . имеет атрибут HREF, который превращает его в гипертекстовую ссылку:

Если рассматривать контейнер якоря . как объект, то атрибут HREF будет задавать свойство объекта «якорь». Программист может изменить значение атрибута и, следовательно, свойство объекта:

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

Для общности картины свойствами в JavaScript наделены объекты, которые не имеют аналогов в HTML-разметке. Например, среда исполнения, называемая объектом Navigator, или окно браузера, которое является вообще самым старшим объектом JavaScript.

Методы

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом «документ» связаны методы open(),write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Приведем простой пример:


Привет!

Примечание:Данный скрип отвечает за то, чтобы на странице были ссылки на на какую либо информацию (в данном случаи это ссылки на описания). Так же этот скрипт отвечает за появления строки для ввода пароля ( если вы являетесь администратором).

Примечание: Данный скрипт показывает даты и время посещения сайта.

Понятие объектной модели применительно к JavaScript

Читайте также:

  1. A) Понятие о средних величинах
  2. B.I. Понятие культуры
  3. CASE-инструментарий бизнес-моделирования в нотации BPMN.
  4. CASE-инструментарий объектного моделирования и анализа
  5. CASE-инструментарий системно-объектного моделирования и анализа
  6. CASE-инструментарий системного моделирования и анализа
  7. Cтруктура электронного рынка, модели взаимодействия участников
  8. Ex 28. Образуйте прилагательные от следующих слов по модели
  9. Flash Player или запрещены сценарии JavaScript. Учтите такую возможность и предоставьте этим
  10. I. Погрешность математической модели.
  11. I. Понятие и система принципов конституционного статуса личности
  12. I. ПОНЯТИЕ И СУЩНОСТЬ РЕКЛАМЫ

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер — это объект, который характеризуется тройкой:

Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель — это представление объектов, методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее — посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.

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

Существует четыре версии JavaScript.

• JavaScript 1.0. Первая версия языка, поддерживаемая Internet Explorer 3.0 и Netscape Navigator 2.0.

• JavaScript 1.1. Поддерживается Netscape Navigator 3.0 и Internet Explorer 4.0 (почти полностью).

• JavaScript 1.2. Поддерживается Netscape Navigator 4.0 и Internet Explorer 4.0 (частично).

• JavaScript 1.3. Поддерживается Netscape Navigator 4.5.

2. Описание функций в JavaScript.

JavaScript — язык для составления скриптов, встраиваемых в Web-страницы для придания им привлекательного вида. В отличие от VBScript, который поддерживается только в Internet Explorer, JavaScript поддерживается большинством популярных браузеров.

JavaScript — это не Java ! Язык Java был разработан компанией Sun Microsistems, а JavaScript – фирмой Netscape (первоначально этот продукт Netscape назывался LiveScript и только после бума Java, фирма Netscape купила у Sun лицензию и переименовало свое детище в JavaScript). Хотя синтаксис Java и JavaScript во многом схож, однако возможности и назначение языков разные. Если апплеты Java представляют собой независимые программы с широкой гаммой возможностей, встраиваемые в HTML-страницу, то скрипты JavaScript в основном нацелены на использование существующей объектной модели Web-браузера, а также позволяют расширять ее, создавая собственные объекты.

Программы на Java представляют собой байт-код, а программы на JavaScript непосредственно включаются в Web-страницу в виде исходного текста. Таким образом, Java – это язык для написания программ, а JavaScript – это язык для написания скриптов управления HTML-страницами. Для включения программ на JavaScript в HTML-страницу необходимы те же теги , что и для программ на VBScript, выглядящие примерно так:

Принцип размещения и написания JavaScript программ заключается в объектно-ориентированном подходе, с манипулированием объектами Window, Document, Form и др. через их свойства, методы и события.

В лекции основной упор будет сделан на решение ряда задач (создание анимации, управление слоями и др.).


Начиная с версии JavaScript 1.2, программы на JavaScript могут не включаться непосредственно в текст HTML-страницы, а быть оформлены в виде отдельного файла, с расширением js.

Дата добавления: 2014-12-23 ; Просмотров: 460 ; Нарушение авторских прав? ;

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

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

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

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

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

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

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

  1. Страничка скачивается с сайта и размещается в памяти компьютера;
  2. Производится анализ странички, в результате которого она препарируется на составляющие;
  3. Блоки, из которых состоит страничка, размещаются во временной базе данных соответственно структуре объектной модели;
  4. База данных становится доступной другим программам и, в-частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.
Илон Маск рекомендует:  Dos fn 57h установитьопросить датувремя файла

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

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

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

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

  • navigator — объект, дающий доступ к характеристикам броузера
  • location — объект, содержащий текущий URL
  • event — объект, дающий доступ к событиям
  • screen — объект, дающий доступ к характеристикам экрана

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

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

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

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

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

JavaScript — Объектная модель документа или DOM

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

Объект Document представляет собой HTML-документ, который отображается в этом окне. Объект Document имеет различные свойства, которые относятся к другим объектам, которые разрешают доступ и изменение содержимого документа.

Способ доступа и изменения содержимого документа называется Document Object Model или DOM. Объекты организованы в иерархии. Эта иерархическая структура применяется к организации объектов в веб-документе.

  • Окно — верх иерархии. Это самый главный элемент иерархии объектов.
  • Объект документа. Каждый HTML-документ, который загружается в окно, становится объектом документа. Документ содержит содержимое страницы.
  • Объект формы — все, заключенное в теги form . / form , задает объект формы.
  • Элементы управления формой. Объект формы содержит все элементы, определенные для этого объекта, такие как текстовые поля, кнопки, переключатели и флажки.

Вот простая иерархия нескольких важных объектов —

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

  • Legacy DOM — это модель, которая была представлена в ранних версиях языка JavaScript. Он хорошо поддерживается всеми браузерами, но обеспечивает доступ только к определенным ключевым частям документов, таким как формы, элементы формы и изображения.
  • W3C DOM. Эта объектная модель документа позволяет получать доступ и изменять весь контент документа и стандартизован консорциумом World Wide Web (W3C). Эта модель поддерживается практически всеми современными браузерами.
  • IE4 DOM — эта объектная модель документа была представлена в версии 4 браузера Microsoft Internet Explorer. IE 5 и более поздние версии включают поддержку большинства базовых функций W3C DOM.


Совместимость DOM

Если вы хотите написать скрипт с гибкостью использования W3C DOM или IE 4 DOM в зависимости от их доступности, вы можете использовать подход тестирования возможностей, который сначала проверяет наличие метода или свойства, чтобы определить, имеет ли браузер способность, которую вы желаете. Например,

Основы JavaScript: Изучаем работу с DOM! (Часть 1)

Дата публикации: 2020-03-22

От автора: объектная модель документа, или «DOM», определяет логическую структуру документов HTML и по существу выступает в качестве интерфейса для веб-страниц. Благодаря использованию языков программирования, таких как JavaScript, мы можем получить доступ к DOM, чтобы управлять веб-сайтами и делать их интерактивными.

В этой статье мы рассмотрим объект document, дерево DOM и узлы. Мы также узнаем все о том, как получить доступ к элементам и, в целом, как происходит работа с DOM JavaScript. Давайте начнем!

Что такое DOM?

По своей сути веб-сайт должен состоять из HTML-документа index.html. Используя браузер, мы просматриваем веб-сайт, который отображает HTML-файлы и любые CSS-файлы, которые добавляют правила стиля и макета.

Браузер также создает представление этого документа, известное как объектная модель документа. Благодаря использованию DOM JavaScript может получать доступ и изменять содержимое и элементы веб-сайта.

Чтобы просмотреть DOM с помощью веб-браузера, кликните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть код». Будут открыты Инструменты разработчика:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

DOM отображается на вкладке Элементы. Вы также можете просмотреть его, выбрав вкладку «Консоль» и введя «document».

Объект document

Объект document является встроенным объектом, содержащим множество свойств и методов. Мы обращаемся к этому объекту и манипулируем им с помощью JavaScript. А манипулируя DOM, мы можем сделать веб-страницы интерактивными! Поскольку мы больше не ограничены только созданием статических сайтов со стилизованным HTML-контентом.

Теперь мы можем создавать приложения, которые обновляют данные страницы без необходимости обновления страницы, мы можем дать пользователям возможность настраивать макет страницы, мы можем создавать элементы перетаскивания, браузерные игры, часы, таймеры и сложную анимацию. Работа с DOM открывает множество возможностей!

Итак, давайте выполним нашу первую манипуляцию с DOM… Перейдите на сайт www.google.com и откройте Инструменты разработчика. Затем выберите вкладку Консоль и введите следующее:

Нажмите Enter, и вы увидите, что цвет фона теперь изменился на оранжевый. Конечно, вы не редактировали исходный код Google (!), но вы изменили способ отображения содержимого локально в вашем браузере, манипулируя объектом document.
document является объектом, свойство body которого мы выбрали для редактирования путем доступа к атрибуту style и изменения значения свойства backgroundColor на orange.


Обратите внимание, что в JavaScript мы используем способ написания имен backgroundColor, а не background-color, как в CSS. Любое свойство CSS через дефис будет записано в JavaScript в camelCase. Вы можете увидеть настройки DOM в разделе элемента body на вкладке Elements или набрав document.body в консоли.

Поскольку мы работаем в браузере напрямую с DOM, мы фактически не меняем исходный код. Если вы обновите браузер, все вернется в исходное состояние.

Дерево DOM и узлы

Во многом из-за структуры DOM, его часто называют Дерево DOM.

Илон Маск рекомендует:  span в HTML

Дерево состоит из объектов, называемых узлами. Существует много разных типов узлов, но чаще всего вы будете работать с узлами элементов (элементы HTML), текстовыми узлами (любое текстовое содержимое) и узлами комментариев (закомментированный код). Объект document является его собственным узлом , который находится в корневом каталоге.

Взаимодействие HTML5 и JavaScript (HTML5 and JavaScript interaction)

В статье описываются особенности создания графических приложений для WEB, связанных с аффинными преобразованиями. В Web приложениях элементы интерфейса описывается в HTML файлах, а логика приложения – в коде javascript (JS).

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

HTML (HyperText Markup Language) – язык разметки гипертекста для описания структуры Web-страницы. Основным компонентом HTML является тег (tag) – код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. HTML не является языком программирования, но для организации динамических Web-страниц в него можно включать программы на языке Javascript, в пределах тегов .

Основным инструментом работы и динамических изменений на HTML странице является DOM (Document Object Model) – объектная модель. Согласно DOM-модели, объекты, описываемые в пределах HTML-тегов, структурированы иерархическим способом по мере вложенности один в другой. Ссылку на объекты можно обнаружить в DOM с помощью JavaScript кода.

В HTML5 определен элемент как «растровый холст, который может быть использован для отображения 2D графики. Каждый холст имеет контекст рисования, для которого определены методы и свойства рисования. Объект canvas позволяет также получить WebGL контекст, который обеспечивает 3D графику, используя возможности библиотеки OpenGL.

Структура HTML документа

HTML (HyperText Markup Language) – язык разметки гипертекста, предназначенный для создания Web-страниц [16]. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. Основным компонентом HTML является тег (tag) – это код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Теги имеют атрибуты, значения которых могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения. Теги представляют собой зарезервированные последовательности символов, начинающиеся с (знаком больше). Закрытие тега отличается от открытия только наличием символа ‘/‘. Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам «Это мой текст». HTML-последовательность кодов будет выглядеть так:

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

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

HTML- программа должна начинаться тегом и заканчиваться тегом . Суммируя вышесказанное приведем общую структуру HTML-файла :

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java. Для вставки в HTML-программу фрагмента, написанного на языке JavaScript или Viual Basic Script сценариев, используют теги .

JavaScript – это скриптовый язык программирования, код которого, выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу. Javascript – не Java, а совсем другой язык. Он похоже называется, но не более того.

Подключение и выполнение JavaScript

Можно выделить 3 способа подключения скриптов:

  1. подключение в любом месте;
  2. вынос скриптов в заголовок HEAD;
  3. внешние скрипты.


Когда браузер читает HTML-страничку, и видит

Понятие объектной модели применительно к JavaScript

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер — это объект, который характеризуется тройкой:

Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель — это представление объектов, методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее — посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.

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

Иерархия объектов в JavaScript

В языке JavaScript определены объекты, которые называются объектами браузера. Каждый объект соответствует некоторому элементу Web- страницы: окну, документу, изображению, ссылке и т.п. Управлять частями документа можно с помощью методов браузера. Объекты браузера имеют иерархическую структуру. На самом верхнем уровне располагается объект window. Он является родителем остальных объектов. Объект window представляет окно браузера. Свойство window.status можно использовать для изменения вида строки состояния. Для отображения диалоговых сообщений объект window имеет три метода. См. работу с окнами

1. Электромагнитная волна (в религиозной терминологии релятивизма — «свет») имеет строго постоянную скорость 300 тыс.км/с, абсурдно не отсчитываемую ни от чего. Реально ЭМ-волны имеют разную скорость в веществе (например,

200 тыс км/с в стекле и

3 млн. км/с в поверхностных слоях металлов, разную скорость в эфире (см. статью «Температура эфира и красные смещения»), разную скорость для разных частот (см. статью «О скорости ЭМ-волн»)

2. В релятивизме «свет» есть мифическое явление само по себе, а не физическая волна, являющаяся волнением определенной физической среды. Релятивистский «свет» — это волнение ничего в ничем. У него нет среды-носителя колебаний.

3. В релятивизме возможны манипуляции со временем (замедление), поэтому там нарушаются основополагающие для любой науки принцип причинности и принцип строгой логичности. В релятивизме при скорости света время останавливается (поэтому в нем абсурдно говорить о частоте фотона). В релятивизме возможны такие насилия над разумом, как утверждение о взаимном превышении возраста близнецов, движущихся с субсветовой скоростью, и прочие издевательства над логикой, присущие любой религии.

4. В гравитационном релятивизме (ОТО) вопреки наблюдаемым фактам утверждается об угловом отклонении ЭМ-волн в пустом пространстве под действием гравитации. Однако астрономам известно, что свет от затменных двойных звезд не подвержен такому отклонению, а те «подтверждающие теорию Эйнштейна факты», которые якобы наблюдались А. Эддингтоном в 1919 году в отношении Солнца, являются фальсификацией. Подробнее читайте в FAQ по эфирной физике.

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

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

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

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

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

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

  1. Страничка скачивается с сайта и размещается в памяти компьютера
  2. Производится анализ странички, в результате которого она препарируется на составляющие.
  3. Блоки, из которых состоит страничка (
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL