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

1 Введение в JavaScript

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

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

4 Свойства Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря... имеет атрибут HREF, который превращает его в гипертекстовую ссылку: intuit Если рассматривать контейнер якоря... как объект, то атрибут HREF будет задавать свойство объекта "якорь". Программист может изменить значение атрибута и, следовательно, свойство объекта: document.links[0].href="intuit.htm";

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

6 Пример переопределения свойств j1.html загрузка файла document.links[0].href="j1_2.html"; загрузка файла

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

8 Пример использования методов j2.html function hello() { id1=window.open("","example1","width=400,heig ht=150"); id1.focus(); id.document.open(); id1.document.write(" Привет от функции! "); id1.document.write(" "); id1.document.write(""); id1.document.close(); }

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

10 Пример обработчика события j3.html

11 Размещение кода на HTML-странице Исполняет JavaScript-код браузер. В него встроен интерпретатор JavaScript. Следовательно, выполнение программы зависит от того, когда и как этот интерпретатор получает управление. В общем случае можно выделить четыре способа функционального применения JavaScript: гипертекстовая ссылка (схема URL); обработчик события (handler); подстановка (entity) (в Microsoft Internet Explorer реализована в версиях от 5.X и выше); вставка (контейнер SCRIPT).

12 Пример размещения кода j4.html

13 URL-схема Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL javascript:... Например: Вниман ие!!!

14 Обработчики событий или

15 Подстановки В поле выводится URL текущей страницы

16 Вставка Используется контейнер SCRIPT- принудительный вызов интерпретатора. … document.f.i.value='text';

17 Вставка d = new Date(); document.write(" "); document.write("Момент загрузки страницы: "+d.getHours()+":"+d.getMinutes()+":"+ d.getSeconds()); document.write(" ");

18 Иерархия классов

19 Класс объектов Window-окно браузера

20 Поле статуса –свойство status j5.html function statbar(txt) { window.status=txt; } Размещение кода внутри HTML-документа Пример записи и стирания в строке статуса

21 Поле location свойства объекта Location document.write(" href="+window.location.href+" "); document.write(" proocol="+window.location.protocol+" "); document.write(" hostname="+window.location.hostname+" "); document.write(" host="+window.location.host+" "); document.write(" port="+window.location.port+" "); document.write(" pathname="+window.location.pathname+" ");

22 Поле location Методы Location Методы Location предназначены для управления загрузкой и перезагрузкой страницы. Это управление заключается в том, что можно либо перезагрузить документ (reload), либо загрузить (replace). При этом в трассу просмотра страниц (history) информация не заносится: window.location.reload(true); window.location.replace('#top');

23 Метод reload() Метод reload() полностью моделирует поведение браузера при нажатии на кнопку Reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true, то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Такое поведение соответствует простому нажатию на кнопку Reload. Если в качестве аргумента указать false, то браузер перезагрузит текущий документ с сервера, несмотря ни на что. Такое поведение соответствует одновременному нажатию на Reload и кнопку клавиатуры Shift (Reload+Shift).

24 Метод replace() Метод replace() позволяет заменить одну страницу другой таким образом, что это замещение не будет отражено в трассе просмотра HTML-страниц (history), и при нажатии на кнопку Back из панели инструментов пользователь всегда будет попадать на первую загруженную обычным способом (по гипертекстовой ссылке) страницу. Напомним, что при изменении свойств Location также происходит перезагрузка страниц, но в этом случае записи об их посещении в history попадают.

25 История посещений (History)

26 Объект Navigator – тип браузера document.write(navigator.appNamev+" "); document.write(navigator.appCodeName+" "); document.write(navigator.appVersion+" "); document.write(navigator.userAgent+" ");

27 Методы Window Простые и наиболее популярные методы управления окнами: alert(); confirm(); prompt(); open(); close(); focus(); setTimeout(); clearTimeout().

28 Управление окнами j8.html

29 Метод alert() Повторите запрос!

30 Метод confirm()

31 Метод prompt() document.forms[1].elements[1].value =window.prompt('Введите сообщение');

32 Метод open() Метод предназначен для создания новых окон. В общем случае его синтаксис выглядит следующим образом: open("URL","window_name","param,param,...",replace); где: URL страница, которая будет загружена в новое окно, window_name имя окна, которое можно использовать в атрибуте TARGET в контейнерах A и FORM.

33 Параметры метода open()

34 Простое окно

35 Параметры «простого окна»

36 Пример «простого окна»

37 Сложное окно

38 Параметры «сложного окна»

39 Пример «сложного окна»

40 Метод close() Метод close() позволяет закрыть окно. Чаще всего возникает вопрос, какое из окон следует закрыть. Если необходимо закрыть текущее, то: window.close(); Если необходимо закрыть родительское окно, т.е. окно, из которого было открыто текущее, то: window.opener.close(); Если необходимо закрыть произвольное окно, то тогда сначала нужно получить его идентификатор: id=window.open();... id.close();

41 Выбор каскадных таблиц стилей

42 {function hello(a) if (a=='1') a='s5.css'; if (a=='2') a='s3.css'; id1=window.open('','test2','directories=yes, height=200,location=yes,menubar=yes,resizable=yes, scrollbars=yes, status=yes,toolbar=yes,width=600? height=600');

43 id1.document.write(" "); id1.document.write(" Пример параграфа "); id1.document.write(" "); id1.document.write(" Пример заголовка первого уровня "); id1.document.write(" ");

44 id1.document.write(" text1 text2 "); id1.document.write(" 1 2 "); id1.document.write(" "); }

45 Этот пример демонстрирует выбор каскадных таблиц стилей