Лабораторная работа №7-8 по JavaScript (8 часов) Включение скриптов JavaScript в html-код
Для того чтобы добавить сценарий JavaScript на Web-страницу, используется пара дескрипторов <script> и </script>. Дескриптор <script> указывает браузеру рассматривать дальнейший текст как скрипт. Обнаружив дескриптор </script>, браузер возвращается к выполнению HTML.
<script type="text/javascript">
//JavaScript код
</script>
Рассмотрим пример.
<!-- пример pr2 -->
<html>
<head>
<title>Наша начальная страница</title>
</head>
<body>
<p>Добро пожаловать на первую скриптовую web-страницу.</p>
<script type="text/javascript">
document.write("Hello");
</script>
</body>
</html>
Метод write() объекта document позволяет отображать результат сценария на Web-странице.
Код скрипта выполняется незамедлительно, если только этот код не является функцией. Скрипты могут размещаться во всех частях документа HTML.
1. В разделе body, как в приведенном выше примере. В этом случае результат сценария отображается на Web-странице при ее загрузке в браузере.
2. В заголовке программы между парой дескрипторов <head>. Это гарантирует выполнение скрипта до начала загрузки основного HTML-кода страницы. Сценарий, размещенный в заголовке, может не выполняться при загрузке страницы, а использоваться другими сценариями как функция - группа операторов JavaScript, выполняемых как одно целое.
3. В дескрипторе HTML. Такая конструкция называется обработчиком событий и позволяет выполнять сценарий JavaScript вместе с дескриптором. Обработчик событий представляет собой отдельный тип сценария, который не требует использования дескриптора <script> для его обозначения. Рассмотрим пример:
<!-- Использование кнопки и события -->
<html> <body>
<form>
<input type="button" value="click me"
onclick="window.alert(' Hello!')"> </form>
</body>
</html>
4. В отдельном файле с расширением js. B этом случае скрипт объявляется в HTML-коде с помощью тега <script> с атрибутом src, в котором прописывается путь к файлу. Например
<script type="text/javascript" src="/jspr/pr.js"></script>
В этом варианте в директории /jspr/ должен находиться файл pr.js, который содержит код JavaScript без тегов <script> и </script>.
JavaScript позволяет поменять стандартную программу на программу пользователя используя схему URL — JavaScript:
<A HREF="JavaScript:код_программы">...</A>
<A HREF="JavaScript:alert('Внимание! Перехода по ссылке не будет!!!');"> Кликни здесь </A>
<FORM ACTION="JavaScript:код_программы" ...> ... </FORM>
В данном случае "код_программы" обозначает программу-обработчик на JavaScript, которая вызывается при выборе гипертекстовой ссылки в первом случае и при отправке данных формы (нажатии кнопки Submit) — во втором.
Широко используется вызов кода JavaScript через события. Событие представляет собой указатель на метод – обработчик события, который вызывается при возникновении события. Ниже приведены основные события, которые поддерживаются всеми браузерами:
onblur – происходит, когда пользователь убирает фокус с элемента формы;
onchange –элемент формы теряет фокус, а его значение изменилось;
onclick – происходит при нажатии мышкой на любой визуальный элемент;
ondblclick – аналогично предыдущему, но при двойном нажатии;
onfocus – элемент получает фокус, то есть выбирается этот элемент;
onkeydown – происходит, когда пользователь нажимает клавишу на клавиатуре;
onkeypress – пользователь нажимает и отпускает клавишу на клавиатуре;
onkeyup – происходит, когда пользователь отпускает нажатую клавишу;
onload – происходит, когда документ (или фрейм) загружен;
onmousedown – происходит, когда пользователь нажимает клавишу мыши;
onmousemove – пользователь двигает курсором мыши над элементом;
onmouseout – происходит, когда указатель мыши покидает область элемента;
onmouseover – происходит, когда указатель мыши попадает в область элемента;
onmouseup – происходит, когда пользователь отпускает нажатую клавишу мыши;
onreset – происходит, когда значения элементов формы сбрасываются;
onselect – происходит, когда пользователь выделяет текст в элементе формы;
onsubmit – происходит, когда пользователь отсылает форму;
onunload – пользователь покидает текущий документ.
В первых версиях браузеров обработчики событий определялись как дополнительные атрибуты в дескрипторах HTML. Чтобы обработать какое-либо стандартное событие в браузере, необходимо было добавить в подходящий HTML тэг дополнительный атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приведены выше. После имени атрибута - события записывается знак равенства, после чего в двойных или ординарных апострофах указывается обработчик события - функция или группа команд JavaScript в виде: имя_обработчика="команды_обработчика". Рассмотрим пример.
<a href="pr3.htm" onclick="alert('Links clicked')">
click me</a>
В следующем примере чтобы получить имя браузера, следует нажать кнопку "Browser"
<!-- пример pr15: получение типа и версии браузера -->
<html> <head>
<title>Test of Browser name</title>
</head>
<body>
<h1 align=center>Проверка типа браузера</h1>
<P><hr>
<form name=fr>
<input type=button name=browser value=Browser
onClick= "alert(window.navigator.appName+navigator.appVersion)">
</form>
</body> </html>
Имя и версия браузера здесь возвращаются через свойства navigator.appName и navigator.appVersion
Cобытия могут рассматриваться как методы или свойства объектов JavaScript. Для этого нужно получить элемент и назначить обработчик свойству on+имя. Вот пример установки обработчика события click на элемент с id="button":
<input id="button" type="button" value="Нажми"/>
document.getElementById('button').onclick = function() {
alert('Click')
}
Следует обратить внимание, что onclick это именно свойство, а не атрибут. Обработчик - не текст, а ананимная функция javascript. Этот код работает также как код HTML:
<input type="button" onclick=" alert('Click!') "/>
Можно и не создавать анонимную функцию, а использовать обычную:
function doIt() {
alert('Спасибо')
}
document.getElementById('button').onclick = doIt
Свойству присваивается именно сама функция-обработчик doIt, но без скобок, а не doIt(). При использовании свойства HTML - наоборот, скобки нужны:
<input type="button" id="mybutton" onclick="doIt()"/>