4366

JavaScript. Необходимость применения динамических технологий

Лекция

Информатика, кибернетика и программирование

JavaScript. Необходимость применения динамических технологий Наиболее распространенные технологии (Macromedia Flash, Java Applet, JavaScript, VBScript) Сценарий JavaScript внедряется в тело HTML документа. Пример простого скрипта...

Русский

2012-11-18

126.5 KB

29 чел.

JavaScript. Необходимость применения динамических технологий

Наиболее распространенные технологии (Macromedia Flash, Java Applet, JavaScript, VBScript)

Сценарий JavaScript внедряется в тело HTML документа. Пример простого скрипта

<html>

<head><title>JS</title></head>

<body>

Обычный HTML документ.

<script language="JavaScript">

<!-- //

alert('Пример JS');

// -->

</script>

</body></html>

  •  Текст программы описывается между тегами <script></script>, параметр language - тип языка
  •  Для браузеров без поддержки JavaScript используется тег <noscript></noscript>
  •  Если программа оформлена в виде списка операторов, то выполнение начинается с первого оператора. Если в виде списка функций – автоматический запуск не произойдет. Для запуска необходимо, чтобы произошло событие (например нажатие кнопки мыши)
  •  Возможно несколько скриптовых блоков. Скрипты работают в едином адресном пространстве. Пример.

<html>

<head><title>JS</title></head>

<body>

<script language="JavaScript">

var a='Пример JS';

 </script>

Обычный HTML документ.

<script language="JavaScript">

alert(a);

 </script>

</body>

</html>

  •  В языке реализованы типы данных: логический, числовой, строковый, массив, объект.
  •  Преобразования типов данных (из числовых в строковые и обратно) осуществляется автоматически при присвоении значений переменным
  •  Синтаксические конструкции: if...else, for, while, function. Синтаксис похож на C
  •  С точки зрения архитектуры, браузер представляет собой набор объектов, образующих иерархию (объектная модель браузера).
  •  Один из объектов, входящих в состав браузера, описывает загруженный в настоящий момент документ. Описание документа - совокупность объектов, (объектная модель документа).
  •  JavaScript позволяет манипулировать свойствами и методами объектной модели документа и объектной модели браузера.
  •  Технология объединения HTML-кода с JavaScript-кодом, для управления страницей – DHTML.
  •  В объектной модели документа реализована система обработки событий, инициируемых действиями пользователя.


Пример

<html>

<head><title>JS</title></head>

<body>

<script>

function jump() {

var path='http://www.yandex.ru';

 window.location.href=path;

}

</script>

<b onclick="jump()">Переход</b>

</body></html>

  •  Объектная модель браузера и документа (за основу взят браузер Internet Explorer 4.0)

Уровень

Объект

Описание

1

Window

Объект самого высокого уровня. Представляет собой окно программы просмотра (браузера). Позволяет управлять свойствами окна (открытие, закрытие, скроллирование). Может быть как окном верхнего уровня, так и окном фрейма.

1.1

Location

Содержит информацию о текущем URL. Предоставляет методы, позволяющие перезагрузить страницу

1.2

Frames

Коллекция. Предоставляет доступ ко всем фреймам, открытым в окне верхнего уровня

1.3

History

Содержит информацию о всех адресах страниц, посещенных клиентом. Позволяет перемещаться по этому списку

1.4

Navigator

Содержит информацию о браузере (название, поддерживаемые функции)

1.5

Event

Позволяет обращаться к параметрам произошедшего события (код нажатой клавиши, точка нажатия на экране, объект породивший событие)

1.6

Screen

Предоставляет информацию о разрешающей способности и графических возможностях монитора клиента

1.7

Document

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

1.7.1

Links

Коллекция гиперссылок

1.7.2

Anchors

Коллекция меток

1.7.3

Images

Коллекция изображений

1.7.4

Forms

Коллекция форм

1.7.5

Applets

Коллекция java-апплетов

1.7.6

Embeds

Коллекция внедренных элементов (например Flash)

1.7.7

Scripts

Коллекция внедренных скриптов

1.7.8

Selection

Выделенный пользователем текст на странице

1.7.9

StyleSheets

Коллекция стилей, встроенных или привязанных к страннице

1.7.10

All

Все элементы страницы, включая теги


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

  •  Список событий, наиболее часто обрабатываемых сценариями JavaScript

onClick

событие происходит при однократном щелчке левой кнопки мышки на элементе

onDblClick

событие происходит при двойном щелчке левой кнопкой мышки на элементе

onMouseMove

событие наступает, когда пользователь перемещает курсор мыши над элементом страницы

onMouseOver

событие происходит при наведении курсора мыши на элемент

onMouseOut

событие происходит при перемещении курсора мышки за пределы элемента

onFocus

событие происходит при получении элементом фокуса с помощью мышки или последовательного перехода (клавиша Tab).

onBlur

событие приосходит при потере фокуса с элемента с помощью курсора мышки или последовательности перехода (клавиша Tab).

onChange

событие происходит при изменении значения элемента формы в момент потери им фокуса

onSubmit

событие происходит при отправке формы

onLoad

событие происходит, когда загрузка документа в окно или фрейм закончена

onUnload

событие происходит, когда пользователь закрывает документ

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

<html><head>

<style>

.st1 {color : Red;}

.st2 {color : Blue;}

</style></head>

<body>

<span class="st1"

onMouseOver="this.className='st2'"

onMouseOut="this.className='st1'">

 Текст</span>

</body></html> 

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

Пример. Содержимое ячейки таблицы изменяется при нажатии на цифру

<html><body>

<script>

function change(num) {

content=new Array(2);

content[0]='Один';

content[1]='Два';

document.all['cell'].innerText=content[num-1];

// cell.innerText=content[num-1];

}

</script>

<table border="1">

<tr><td id="cell">Ноль</td></tr>

</table>

<b onClick="change(1)">1</b><br>

<b onClick="change(2)">2</b>

</body></html>

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

<html><body>

<script>

function change(param) {

if (param==0)

document.images[0].src="pic2.gif";

else document.images[0].src="pic1.gif";

 }

</script>

<img src="pic1.gif"

onMouseOver="change(0)"

onMouseOut="change(1)">

</body></html>


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

Установочный файл

Файл frtest.html

<html>

<frameset cols="50%,*">

<frame name="fr1" src="frtest.html">

<frame name="fr2" src="frtest.html">

 </frameset>

</html>

<html><body>

<script>

function change() {

window.parent.frames['fr1'].location='page1.html';

window.parent.frames['fr2'].location='page2.html';

 }

</script>

<a href="javascript: change()">Ссылка</a>

</body></html>


Приложение. Теория и примеры

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

  •  Macromedia Flash
  •  Java Applet
  •  JavaScript (версия 1.3 поддерживается 99% браузеров)
  •  VBScript

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

 <html>

<head><title>JS</title></head>

<body>

Обычный HTML документ.

<script language="JavaScript">

<!-- //

alert('Пример JS');

// -->

</script>

</body>

</html>

Текст программы, написанной на JavaScript, помещается между тегами <script></script>, параметр language задает тип используемого языка программирования. Этот параметр не является обязательным, поскольку большинство современных браузеров в качестве внутреннего языка программирования используют JavaScript

Для того, чтобы браузеры без поддержки JavaScript не отображали на странице текст программы, необходимо воспользоваться тегами комментария. Сообщение о том, что браузер не поддерживает исполнение скриптов, может быть помещено между тегами <noscript></noscript>.

При загрузке страницы браузер анализирует программу, написанную на языке JavaScript. В случае, если программа не оформлена в виде набора функций, т.е. представляет собой список операторов, разделенных символом ; (точка с запятой), выполнение программы начинается с первого оператора первого блока <script>. Если программа реализована в виде одной или нескольких функций, автоматический запуск не произойдет. Для запуска программы должно произойти событие (например, нажатие кнопки мыши). Внутри документа может быть несколько блоков <script>. Скрипты, в разных блоках, функционируют в едином адресном пространстве.

<html>

<head><title>JS</title></head>

<body>

<script language="JavaScript">

var a='Пример JS';

 </script>

Обычный HTML документ.

<script language="JavaScript">

alert(a);

 </script>

</body>

</html>

В языке JavaScript реализованы следующие типы данных:

  •  Логический (булевский) тип
  •  Числовой тип (целые и дробные числа)
  •  Строковый тип
  •  Массивы
  •  Объекты

Переменные должны быть объявлены пред использованием. Преобразования типов данных (из числовых в строковые и обратно) осуществляется автоматически при присвоении значений переменным. Синтаксические конструкции, реализованные в языке JavaScript:

  •  Условный оператор if… else;
  •  Циклы for, while
  •  Пользовательские функции function

Синтаксис JavaScript во многом похож на синтаксис языка C.

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

Технология создания документа, при которой обычный HTML-код объединяется с JavaScript-кодом, причем последний управляет страницей с помощью объектной модели, называется динамическим HTML (DHTML).

В объектной модели документа реализована система обработки событий. События, как правило, инициируются действиями пользователя. Ниже приведен пример программы, иллюстрирующий взаимодействие JavaScript и объектной модели браузера в результате наступления события (нажатия кнопки мыши).

<html>

<head><title>JS</title></head>

<body>

<script>

function jump() {

var path='http://www.yandex.ru';

 window.location.href=path;

}

</script>

<b onclick="jump()">Переход</b>

</body></html>

Объектная модель браузера и документа (за основу взят браузер Internet Explorer 4.0)

Уровень

Объект

Описание

1

Window

Объект самого высокого уровня. Представляет собой окно программы просмотра (браузера). Позволяет управлять свойствами окна (открытие, закрытие, скроллирование). Может быть как окном верхнего уровня, так и окном фрейма.

1.1

Location

Содержит информацию о текущем URL. Предоставляет методы, позволяющие перезагрузить страницу

1.2

Frames

Коллекция. Предоставляет доступ ко всем фреймам, открытым в окне верхнего уровня

1.3

History

Содержит информацию о всех адресах страниц, посещенных клиентом. Позволяет перемещаться по этому списку

1.4

Navigator

Содержит информацию о браузере (название, поддерживаемые функции)

1.5

Event

Позволяет обращаться к параметрам произошедшего события (код нажатой клавиши, точка нажатия на экране, объект породивший событие)

1.6

Screen

Предоставляет информацию о разрешающей способности и графических возможностях монитора клиента

1.7

Document

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

1.7.1

Links

Коллекция гиперссылок

1.7.2

Anchors

Коллекция меток

1.7.3

Images

Коллекция изображений

1.7.4

Forms

Коллекция форм

1.7.5

Applets

Коллекция java-апплетов

1.7.6

Embeds

Коллекция внедренных элементов (например Flash)

1.7.7

Scripts

Коллекция внедренных скриптов

1.7.8

Selection

Выделенный пользователем текст на странице

1.7.9

StyleSheets

Коллекция стилей, встроенных или привязанных к страннице

1.7.10

All

Все элементы страницы, включая теги

Список событий, наиболее часто обрабатываемых сценариями JavaScript

onClick

событие происходит при однократном щелчке левой кнопки мышки на элементе

onDblClick

событие происходит при двойном щелчке левой кнопкой мышки на элементе

onMouseMove

событие наступает, когда пользователь перемещает курсор мыши над элементом страницы

onMouseOver

событие происходит при наведении курсора мыши на элемент

onMouseOut

событие происходит при перемещении курсора мышки за пределы элемента

onFocus

событие происходит при получении элементом фокуса с помощью мышки или последовательного перехода (клавиша Tab).

onBlur

событие приосходит при потере фокуса с элемента с помощью курсора мышки или последовательности перехода (клавиша Tab).

onChange

событие происходит при изменении значения элемента формы в момент потери им фокуса

onSubmit

событие происходит при отправке формы

onLoad

событие происходит, когда загрузка документа в окно или фрейм закончена

onUnload

событие происходит, когда пользователь закрывает документ

Каждый объект обладает набором свойств и методов (подробнее о структуре объектов можно узнать в справочном руководстве JavaScript). Самый простой способ получить доступ к текущему объекту – воспользоваться указателем this, являющемуся синонимом текущего объекта.

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

<html><head>

<style>

.st1 {color : Red;}

.st2 {color : Blue;}

</style></head>

<body>

<span class="st1"

onMouseOver="this.className='st2'"

onMouseOut="this.className='st1'">

 Текст</span>

</body></html> 

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

Пример. Содержимое ячейки таблицы изменяется при нажатии на цифру

<html><body>

<script>

function change(num) {

content=new Array(2);

content[0]='Один';

content[1]='Два';

document.all['cell'].innerText=content[num-1];

// cell.innerText=content[num-1];

}

</script>

<table border="1">

<tr><td id="cell">Ноль</td></tr>

</table>

<b onClick="change(1)">1</b><br>

<b onClick="change(2)">2</b>

</body></html>

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

<html><body>

<script>

function change(param) {

if (param==0)

document.images[0].src="pic2.gif";

else document.images[0].src="pic1.gif";

 }

</script>

<img src="pic1.gif"

onMouseOver="change(0)"

onMouseOut="change(1)">

</body></html>

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

Установочный файл

Файл frtest.html

<html>

<frameset cols="50%,*">

<frame name="fr1" src="frtest.html">

<frame name="fr2" src="frtest.html">

 </frameset>

</html>

<html><body>

<script>

function change() {

window.parent.frames['fr1'].location='page1.html';

window.parent.frames['fr2'].location='page2.html';

 }

</script>

<a href="javascript: change()">Ссылка</a>

</body></html>


 

А также другие работы, которые могут Вас заинтересовать

83956. Гигиеническая оценка физического развития и питания пациента 106.5 KB
  Содержание курсовой работы включает следующие разделы: Анамнез образа жизни пациента Исследование и оценка физического состояния пациента Исследование и оценка фактического питания пациента Изучение суточных энергозатрат и определение потребности пациента в основных питательных веществах...
83957. Показатели оценки работы ремонтной службы 77.62 KB
  Современные предприятия оснащены дорогостоящим и разнообразным оборудованием, установками, роботизированными комплексами, транспортными средствами и другими видами основных фондов. В процессе работы из-за износа и разрушения отдельных деталей снижается их производительность, точность и другие параметры.
83958. ФИЛОСОФИЯ В СИСТЕМЕ КУЛЬТУРЫ 34.46 KB
  Философия как мировоззрение. По-этому уже на ранних этапах наряду с религией выработку новых знаний и ориентаций берет на себя светская культура в ее разнообразных проявлениях: искусство и литература философия и наука. Философия мировоззренческая форма сознания.
83959. Кредитные деньги и кредитные орудия 38.02 KB
  Деньги одно из величайших человеческих изобретений. В частности по форме существования деньги бывают наличные и безналичные. Наличные деньги в свою очередь подразделяются на реальные деньги это монеты из драгоценных металлов слитки кредитные деньги банкноты и казначейские билеты и разменные монеты.
83960. НЕСТАЦИОНАРНАЯ ТЕПЛОПРОВОДНОСТЬ 874.45 KB
  В результате вычислений необходимо выполнить следующие задания: Определить число Nu коэффициент теплоотдачи и плотность теплового потока: при свободной конвекции в воде и воздухе; при вынужденной конвекции в воде и воздухе; и плотность теплового потока за счет теплового излучения тела.
83961. ОПИС, ПРИЗНАЧЕННЯ, БУДОВА І ПРИНЦИП ДІЇ ТРИСТУПЕНЕВОГО ЦИЛІНДРИЧНОГО РЕДУКТОРА 182.02 KB
  Редуктор класифікують за такими ознаками: за типом передачі: зубчасті за числом ступенів: триступеневий за типом зубчастих коліс: циліндричні косо зубі прямозубі шевронні за відносним розташуванням валів редуктора в просторі: горизонтальне лінійне за особливостями кінематичної...
83962. Грибы. Слизевики. Особенности строения и деления на таксоны 2.09 MB
  Среди них есть как свободноживущие в почве на разлагающихся растительных остатках и тому подобных субстратах так и паразиты водорослей водных грибов и высших водных и наземных растений. Черты строения гифохитриомикотовых и лабирунтуломикотовых грибов.
83963. Финансовая деятельность и финансовый механизм предприятия. Управление капиталом предприятия 42.38 KB
  Финансовая деятельность и финансовый механизм предприятия. Понятие финансовой деятельности и финансового механизма предприятия. Управление капиталом предприятия 3. Финансы это совокупность денежных отношений возникающих в процессе производства и реализации продукции работ услуг и включающих формирование и использование денежных доходов обеспечение кругооборота средств в воспроизводственном процессе организацию взаимоотношений с другими предприятиями бюджетом банками страховыми организациями и др.
83964. НАСЛЕДОВАНИЕ ИМУЩЕСТВА СУПРУГОВ 105.07 KB
  Как подчеркивается в современной юридической литературе, отсутствие законодательно установленного определения брака связано с тем, что брак является сложным комплексным социальным явлением, находящимся под воздействием не только правовых, но и этических, моральных норм...