4366

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

Лекция

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

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

Русский

2012-11-18

126.5 KB

28 чел.

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>


 

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

61878. Робота з папером. Композиція до української народної казки «Ріпка» 37.91 MB
  Мета: вчити аналізувати ілюстрації казки, відтворювати її зміст;закріпити вміння різати папір по кривих лініях; розвивати зв’язне мовлення, уяву, фантазії; виховувати акуратність у ході виконання робіт, любов до народної творчості.
61879. Условное форматирование 39.5 KB
  Применение таких параметров формата ячейки, как шрифт, наличие границы и цвет заливки ячейки, можно поставить в зависимость от ряда условий, например, пока значения в этих ячейках не достигнут некоторых контрольных значений.
61880. Организация физического воспитания 262.5 KB
  Влажная уборка проводится ежедневно 2 раза в день после 3 урока физкультуры первой смены и перед началом первого урока физкультуры второй смены при открытых фрамугах силами преподавателей физкультуры. Подвижные игры на переменах физкультурные минутки на уроках проводятся но не во всех классах.
61881. Финансовый анализ в ms excel. Функции для анализа инвестиций 1.29 MB
  Функция П3 вычисляет текущую стоимость ряда равных по величине периодических выплат или единовременной выплаты периодические выплаты постоянной величины называют обыкновенной рентой.
61883. Классный час по теме «Формула выбора профессии». «Хочу-могу-надо» 76 KB
  Это выбор профессии и выбор спутника жизни. Сегодня мы поговорим о первом выборе профессии. Формула профессии Как же правильно выбрать профессию В математике все просто.
61884. Формула произведения 44 KB
  Какой материал про величины вы изучали на предыдущих уроках формула пути расстояния работы стоимости площади прямоугольника Сегодня на уроке мы закрепим ваши знания о величинах и формулы величин сведём в одну.