Практическая работа № 7 «Работа с JavaScript»

Цель работы: получение практических умений создания простейших скриптов на языке программирования JavaScript и добавления их на HTML-страницу. Формирование аналитического мышления и внимание в процессе выполнения практической работы.

Краткие теоретические сведения

JavaScript основан на некоторых концепциях языка C++ и получил во всем мире признание как средство разработки программ для Internet.

Вы можете использовать JavaScript для:

• взаимодействия со средой пользователя,

• изменения внешнего вида страниц при просмотре их пользователем

• обеспечения взаимодействия внедренных в страницу объектов между собой.

JavaScript не может существовать сам по себе, он должен выполняться внутри Web-страницы, а Web-страница должна просматриваться в браузере, который понимает язык JavaScript.

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

JavaScript сохраняется в виде текста вместе с документом HTML.

HTML многое прощает с точки зрения своей формы записи. Не имеет значения, сколько пробелов вы оставляете между словами или абзацами. Совсем другое дело JavaScript. У него четкая форма. И пренебрегать ею можно лишь изредка.

Сценарий

<SCRIPT LANGUAGE="javascript">

document.write

("<FONT COLOR='RED'>Это красный текст </FONT>")

</SCRIPT>

Например, вторая строка сценария выглядит следующим образом.

document.write

("<FONT COLOR='RED'>Это красный текст</font>")

Она целиком находится на одной линии и должна сохранять свою форму.

Предположим, вы скопировали ее в текстовый редактор с узкими страницами, и поля разорвали строку:

document.write

("<FONT COLOR='RED'>"Это красный текст</font>

")

Вы изменили форму, и в сценарий вкралась ошибка.

JavaScript является интерпретируемым языком в противоположность компилируемым языкам. Разработчики обычно создают программы, используя компи­лируемый язык типа C++. Компилятор транслирует каждую команду в машинный код, который непосредственно выполняется компьютером. В случае интерпретируе­мых языков программа, которую называют интерпретатором, разбирает и выполняет сценарий — строку за строкой.

Интерпретируемые программы выполняются медленнее компилируемых, но в данном случае это не является большой проблемой. Ваши, как правило, небольшие сценарии интерпретируются браузером. Обычно они выполняются только в ответ на действия пользователя, например — щелчок мыши, а не работают непрерывно, как компилируемые программы.

Добавление сценариев в HTML-файл

Вы можете вставить сценарии в файл HTML, используя дескрипторы так же, как и при вставке любого другого текста.

Сценарии размещаются между дескрипторами <SCRIPT> и </SCRlPT>.

Вы определяете используемый язык, присваивая тип языка в стандарте MIME атрибуту TYPE: text/javascript

<SCRIPT TYPE=”text/javascript”>

</SCRIPT>

Во время синтаксического анализа при загрузке браузером Web-страницы, в кото­рую включены сценарии, он передает текст из блока <SCRIPT> в подпрограмму вы­полнения сценариев. Эта подпрограмма находит в блоке все функции и глобальные переменные (т.е. переменные, определенные вне функции), компилирует их, после чего записывает их имена в таблицу символов для дальнейшего использования. Эта подпрограмма немедленно выполняет операторы, находящиеся вне функции (этот процесс называется немедленным выполнением; сценарии, которые браузер выполняет немедленно, называются встроенными сценариями).

До версии HTML4.0 можно было использовать атрибут language, чтобы определить язык сценария. Консорциум W3C предлагает использовать type вместо language, по­тому что его значения стандартизированы. <SCRIPT LANGUAGE=JAVASCRIPT>

Определение языка сценария по умолчанию

Вы можете определить значение по умолчанию для языка сценария в файле HTML и забыть об определении его внутри каждою дескриптора <Script>

Используйте дескриптор <МЕТА> в начале файла HTML.

Установите параметр HTTP-EQUIV равным Content-Script-Type и параметр CONTENT равным типу MIME языка сценария, который вы используете.

Следующий пример устанавливает язык сценария по умолчанию для документа HTML JavaScript:

<МЕТА http-equiv="Content-Script-Type" content="text/javascript">

Вы можете также устанавливать значения языка сценария по умолчанию, используя заголовок HTTP, как показано в этом примере:

Content-Script-Type: text/javascript

Связывание вместо внедрения

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

Чтобы сделать это, присвойте атрибуту SRC дескриптора <SCRIPT> URL файла, содержащего ваши сценарии:

<SCRIPT SRC=script.js TYPE="text/javascript">

Связь сценариев с событиями

Большинство объектов на Web-странице могут порождать события. Среди таких объектов — все дескрипторы HTML, управляющие элементы или элементы формы. Общий список событий, с которыми можно связать сценарии, показан в таблице:

Название	Когда вызывается событие
OnLoad	Браузер заканчивает открытие документа HTML
OnOnload	Браузер выгружает документ HTML
OnClick	Пользователь щелкнул мышью по элементу
OnDblclick	Пользователь дважды щелкнул мышью по элементу
OnMouseDown	Пользователь нажимает кнопку мыши
OnMouseOver	Пользователь перемешает мышь поверх элемента
OnMouseMove	Пользователь перемешает мышь поверх элемента
OnMouseOut	Пользователь перемешает мышь, выходя из элемента
OnFocus	Элемент получает фокус ввода
OnBlur	Элемент теряет фокус ввода
OnKeyPress	Пользователь нажимает и отпускает клавишу
OnKeyDown	Пользователь нажимает клавишу над элементом
Опкеуир	Пользователь отпускает клавишу над элементом
OnSubmit	Данные из формы переданы Web-серверу
OnReset	Форма очищена
OnSelect	Пользователь выбирает текст в текстовом поле
Onchange	Потеря фокуса ввода элементом после изменения его значения

Посмотрите на рисунок

Предположим, что вы должны связать объект с об­работчиком события объекта. Вы можете сделать это, добавив атрибут события к объ­екту HTML и установив его значение равным функции (или тексту функции).

На­пример, чтобы связать функцию JavaScript по имени MyFunction( ) с событием кноп­ки onClick, опишите дескриптор кнопки <INPUT> следующим образом:

<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()">

Вы можете также использовать атрибуты FOR и EVENT, которые позволяют связать сценарий с любым именованным объектом в файле HTML и любым событием для этого объекта.

Пример:

<SCRIPT FOR=”Button” EVENT=”Click” TYPE=”text/javascript”>

<!- -

Window.alert(“Вы щелкнули на кнопке”)

- - >

</SCRIPT>

<INPUT TYPE=BUTTON NAME=Button>

В этом примере определяется кнопка с помощью атрибута NAME=Button, которая запускает на выполнение сценарий, когда пользователь нажимает ее. Дескриптор содержит атрибуты FOR=”Button” EVENT=”Click”, которые указывают, что сценарий выполняется, когда объект по имени Button вызывает событие Click.