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>


 

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

58043. Узагальнена теорема Фалеса 228.5 KB
  Мета уроку: Закріпити знання учнів про зміст узагальненої теореми Фалеса а також про означення та властивості подібних трикутників; доповнити знання учнів історичними фактами з життя Фалеса та таких понять як пропорціональність відрізків та подібність фігур; удосконалювати вміння застосовувати вивчені твердження під час розв’язування задач практичного змісту. Ми з вами вивчаємо одну з найцікавіших тем геометрії Узагальнена теорема Фалеса. Чому найцікавіших Тому що знання узагальненої теореми Фалеса та означення подібності трикутників і їх...
58044. Функція в основній школі 346.5 KB
  Мета: повторити, систематизувати та узагальнити знання учнів з теми «Функція в основній школі»; удосконалювати вміння та навички у застосуванні цих знань при розвязуванні вправ; розвивати логічне та асоціативне мислення...
58045. Квадратична функція і її графік 82 KB
  Мета: розглянути побудову графіка функції y=x2bxc та її властивості використовуючи графік функції y = x2 навчитись знаходити значення функції значення аргументу розвивати вміння увагу й систематизувати вивчений матеріал; розвивати графічну грамотність.
58046. Урок – игра «Бизнес». Квадратные уравнения 56 KB
  Цель: Повторить, обобщить и систематизировать знания, умения и навыки по теме « Квадратные уравнения»; Развивать: самостоятельность, творчество, инициативу, работать в заданном темпе; Воспитать: аккуратность, настойчивость и прилежания в работе...
58047. Додавання, віднімання, порівняння та округлення десяткових дробів 61.5 KB
  Мета: Повторити основні поняття з теми: «Десяткові дроби. Додавання, віднімання, порівняння та округлення десяткових дробів» при розв’язанні задач; Звернути увагу на практичний вміст математичних задач; Сприяти розвитку творчих здібностей учнів та їх естетичного сприйняття.
58048. Стихійні явища природи. Екологічні проблеми. Природоохоронні території Африки 63.5 KB
  Мета. Формувати в учнів знання про основні види стихійних явищ, екологічні проблеми та природоохоронні території Африки, сприяючи розвиткові комплексного світосприйняття шляхом екологічного виховання; розвивати навики роботи з картою, просторово-логічне мислення, память; виховувати культуру спілкування.
58049. Узагальнення і систематизація знань учнів по темі «Нерівності» 297.5 KB
  Розвивати логічне мислення. Розвивати почуття краси в математиці. Я думаю що на цьому уроці ми розкриємо красу математичних закономірностей покажемо творчість і досконалість математичної мови при повторенні питань даної теми: Розв’язування нерівностей...
58050. Графічний метод розв’язування рівнянь, нерівностей та їх систем 1.09 MB
  Мета: удосконалення вмінь та навичок учнів при розв’язуванні рівнянь, нерівностей та їх систем графічним методом; розвиток творчих здібностей засобами розв’язування нестандартних завдань; виховання культури математичного мовлення, графічної культури; стимулювання творчої активності, формування комунікативної компетентності...
58051. Построение сечений многогранников 24.86 MB
  Образовательные: ввести понятие сечения многогранника; рассмотреть способы решения задач на построение сечений многогранников на основе аксиоматики. Развивающие: развивать пространственное воображение обучающихся; формировать умения чётко и ясно излагать свои мысли; совершенствовать графическую культуру.