Web-инжиниринг

Html


HTML-контейнеры как объекты программирования

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

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

Объекты

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

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

    Свойства

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

    <a href=kuku.htm>kuku</a>

    если рассматривать контейнер якоря <A ...>...</A> как объект, то атрибут href будет задавать свойство объекта якорь. Программист может изменить значение атрибута и, следовательно, свойство объекта:



    document.links[0].href="kuku1.htm";

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

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



    начало страницы


    Методы

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

    function hello()

    {

    id=window.open("","example","width=400,height=150");

    id.focus();

    id.document.open();

    id.document.write("<h1>Hello JavaScript</h1>");

    id.document.write("<hr><form>");

    id.document.write("<input type=button value='Закрыть окно' ");

    id.document.write("onClick='window.opener.focus();window.close();'>");

    id.document.close();

    }

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


    начало страницы


    События

    Кроме методов и свойств объекты характеризуются событиями, которые с ними могут происходить. Собственно, суть программирования на JavaScript заключена в написании обработчиков этих событий. Например, с объектом типа button(контейнер INPUT типа button - "кнопка") может происходить событие "Click", т.е. на кнопку могут нажать. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события Click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать автор HTML-документа на JavaScript:

    <input type=button value="Don't click here" onClick="window.alert('We repeate again: DON\'T CLICK HERE');">

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




    начало страницы






    u="u686.25.spylog.com";d=document;nv=navigator;na=nv.appName;p=1; bv=Math.round(parseFloat(nv.appVersion)*100); n=(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y=""; y+=""; y+="
    "; y+=""; d.write(y);if(!n) { d.write("








    Содержание раздела