- •Саратовский государственный технический университет
- •Введение
- •Три уровня web-документа
- •Навигация
- •Глава 1. Основы Java Script
- •Рекомендации по использованию JavaScript
- •Добавление JavaScript кода в html документы
- •Сокрытие сценариев от устаревших браузеров
- •Определение языка сценариев
- •Атрибут language
- •Атрибут defer
- •1.2. Ввод и вывод данных
- •Alert(сообщение);
- •Confirm(сообщение);
- •Вывод в тело документа
- •Практические задания
- •1.3. Типы данных и значения
- •Целые литералы
- •Шестнадцатеричные и восьмеричные литералы
- •Литералы вещественных чисел
- •Работа с числами
- •Специальные числовые значения
- •Строковые литералы
- •Управляющие последовательности в строковых литералах
- •Преобразование чисел в строки
- •Логические значения
- •Преобразование логических значений
- •Функции
- •Функциональные литералы
- •Объекты
- •Объектные литералы
- •Значение null
- •Значение undefined
- •Объекты Error
- •Преобразование типов
- •Имена переменных
- •Создание переменных
- •Var имя_переменной;
- •Типизация переменных
- •Область видимости переменной
- •Var X; // Объявляем неинициализированную переменную. Значением ее является undefined
- •Элементарные и ссылочные типы
- •Комментарии
- •Арифметические операторы
- •Операторы сравнения
- •Операторы сравнения
- •Оператор in
- •Оператор instanceof
- •Строковые операторы
- •Логические операторы
- •Присваивание с операцией
- •Условный оператор (?:)
- •Оператор typeof
- •Оператор создания объекта (new)
- •Оператор delete
- •Глава 2. Инструкции Java Script
- •Инструкция if - оператор условного перехода
- •If (условие)
- •If (условие1) {
- •If (!х) {// Если переменная username равна null, undefined, 0, "" или NaN, она
- •If (!X) alert('Bы ничего не ввели")
- •Инструкция else if
- •Инструкция switch
- •Практические задания
- •Операторы цикла
- •Инструкция while
- •Цикл do/while
- •Инструкция for
- •I f (условие2){
- •Инструкция for/in
- •Инструкция break
- •Инструкция continue
- •Практические задания
- •Инструкция var
- •Инструкция function
- •Инструкция return
- •Инструкция throw
- •Инструкция try/catch/finally
- •Инструкция with
- •Пустая инструкция
- •Глава 3 Объекты
- •Создание объектов
- •Свойства объектов
- •Объекты как ассоциативные массивы
- •Свойства и методы универсального класса Object
- •Объект String (Строка)
- •Методы String обработки строк
- •X.Split(" ") /* значение - массив из элементов: "Привет", "всем" */
- •Методы String форматирования строк
- •Функции вставки и замены подстрок
- •Insstr ("Привет, друзья", " мои", 7) // "Привет, мои друзья"
- •Insstr("Привет, друзья", " мои", 100) // "Привет, друзья мои"
- •Практическое задание
- •Массивы
- •Чтение и запись элементов массива
- •Добавление новых элементов в массив
- •Длина массива
- •Многомерные массивы
- •Методы массивов
- •Функции обработки числовых массивов
- •Практическое задание
- •Практические задания
- •Объект Date
- •Аргументы
- •Статические методы
- •Практические задания
- •Объект Math (Математика)
- •Свойства Math
- •Методы Math
- •Таймеры
- •If (confirm("Прервать процесс ?"))
- •Глава 4 Основы создания сценариев
Глава 4 Основы создания сценариев
Программы, работающие с объектами html-документа, называют сценариями.
Программа, написанная на языке JavaScript способна взаимодействовать с объектами среды, окружающей интерпретатор языка. Интерпретатор JavaScript, встроенный в веб-браузер, предоставляет пользователю возможность использовать средства языка для доступа к ресурсам браузера и всего того, что в нем находится в данный момент, например, свойствам браузера и документа, загруженного в него.
Одним из главных (но далеко не единственным) назначений сценариев в html-документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов html имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни. События называются довольно просто, особенно если вы знаете английский язык. Например, щелчок левой кнопкой мыши — onclick; изменение в поле ввода данных — onchange; событие onmouseover происходит, когда указатель мыши помещается на элемент html-документа. Список событий мы рассмотрим позже. Значением таких атрибутов-событий в тегах html является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий html-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию myfunc():
<h2 onclick = "myfunc()">Щелкни здесь</h2>
Для одного и того же элемента можно определить несколько событий, на которые он будет реагировать. Другими словами, для одного и того же тега можно указать несколько атрибутов-событий. Имена этих атрибутов, как и других, можно писать в любом регистре. Порядок следования атрибутов не имеет значения.
Итак, значением атрибута-события, как уже отмечалось, является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события.
В приведенном выше примере обработчиком события onclick является функция myfunc(). Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.
Обычно обработчики событий оформляются в виде функций, определения которых помещают в контейнерный тег <script>.
Пример: Изображение в html-документе определяется, как известно, тегом <img>.
Файл с изображением задается атрибутом src. Обработчик события onclick задается в примере как функция clickimage(), которая должна быть определена где-то в контейнере <script>. В результате щелчка на графическом изображении из файла picture.jpg выводится окно с сообщением:
<html>
<script>
function clickimage(){
alert("Привет!") }
</script>
<img src = "pict.jpg" onclick = "clickimage() ">
</html>
Вариант 2:
<html>
<img src = "pict.jpg" onclick = "alert(‘привет !’)" >
</html>
Если сценарий обработки события небольшой и используется в html-документе один раз, то целесообразно оформлять его непосредственно в виде значения атрибута-события. В других случаях предпочтителен первый вариант, то есть оформление обработчика в виде функции.
Чтобы указать браузеру явным образом, что сценарий написан на языке JavaScript, можно в значении атрибута-события написать префикс "javascript:". Например, <img onclick = "javascript: аlert(‘Привет!’)">. Если не указывать язык сценария, то браузер будет подразумевать JavaScript.
Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши и т. п.) формирует некоторое событие, то есть сообщение о произошедшем. Операционная система (например, Windows) анализирует это сообщение, чтобы узнать, откуда оно взялось и что с ним делать дальше. Если, например, пользователь нажал на кнопку мыши в момент, когда ее указатель находился над окном браузера, то Windows пошлет браузеру сообщение о том, какая кнопка мыши была нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Если пользователь щелкнул где-то на панели инструментов, браузер отработает это сообщение сам. Если же в момент щелчка указатель находился на территории HTML-документа, то браузер пропустит сообщение о событии через свою объектную модель. В HTML-коде документа может находиться сценарий для обработки этого события. Инструкции этого сценария направляются к браузеру опять же через объектную модель.
Сообщение о событии формируется в виде объекта, то есть контейнера для хранения информации. Как только объект события создан, браузер присваивает значения его свойствам. Например, объект, соответствующий щелчку мышью, содержит координаты указателя мыши, а также сведения о том, какая кнопка была нажата. Кроме того, объект события в одном из своих свойств содержит ссылку на элемент, с которым связсвязано данное событие (например, на кнопку, изображение, поле ввода и т. п.). Объект события хранится в памяти столько времени, сколько необходимо сценарию для его обработки. Пока выполняется обработчик события, объект события вместе со своими свойствами доступен сценарию, находящемуся в памяти браузера. Как только обработчик события завершит работу, объект события становится пустым (возвращается в исходное состояние).
В любой момент времени существует не более одного объекта события. Все инициированные события заносятся операционной системой в буфер и выполняются последовательно в том порядке, в каком они туда попали.
В объектной модели имеется объект event, являющийся подобъектом объекта окна Window. Он содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать, и ряд других характеристик. Объект event можно использовать в сценариях для документов с большим количеством интерактивных элементов, для выяснения причин неправильного отображения веб-страниц. Далее мы рассмотрим некоторые наиболее часто используемые свойства объекта event.
В качестве примера ниже приводится html-документ, не содержащий видимых элементов. Щелчок мышью или нажатие клавиши на клавиатуре выводит диалоговое окно со значениями некоторых свойств объекта event. Так, свойства х и у содержат значения координат указателя мыши в момент щелчка, отсчитанные в данном случае относительно окна браузера. Свойство keyCode возвращает код нажатой клавиши с символам в системе Unicode. Для латинских и цифровых символов кодировки Unicode и ASCII совпадают. При нажатии навигационных клавиш и клавиш дополнительной цифровой клавиатуры keyCode возвращает null. По существу, keyCode — это код соответствующего символа, а не код клавиши. Для фиксации самой клавиши используются события onkeydown и onkeyup, а не on keypress.