 |
Основы подхода к программированию на JavaScript.
|
|
|
|
Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области браузера и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Никаких классов объектов, а тем более, наследования в JavaScript нет. Есть только объекты с набором свойств и набор функций над объектами, которые называются методами. Кроме методов существуют и другие функции, больше похожие на функции из традиционных языков программирования, которые позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например загрузка страницы в рабочую область Navigator или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы, ее отображающей, может организовать просмотр динамических объектов, например бегущей строки, или управление многооконным интерфейсом.
Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все браузеры способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария.
Пример
| <html><head><!—- <script language="JavaScript">Код сценария</script>--></head><body>Код HTML</body></html> | Пример встраивания скрипта в тело HTML-документа. |
В этом примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. Далее, в тексте страницы определен комментарий, в который включен текст скрипта.
Необходимо запомнить следующие вещи:
1. Поместив сценарий на JavaScript в разделе <head> документа, вы делаете так, что весь сценарий будет загружен до того, как потребуется его выполнить.
|
|
|
2. Код сценария должен быть заключен в теги комментария HTML для того, чтобы старые броузеры, не понимающие JavaScript, не отображали его на экране.
3. Регистр, которым написаны буквы, в JavaScript имеют значение.
Отступление. Для того чтобы можно было обратиться к какому-то объекту, при его описании используется атрибут ID или name, например, <P ID=passage>, теперь к параграфу можно обратиться, используя passage.
Новые понятия
Прежде чем обратиться к объектам, составляющим объектную модель броузера, следует рассмотреть ряд новых понятий, которые мы будем использовать на протяжении ряда следующих занятий.
Объект — совокупность свойств, методов, событий и коллекций, предоставляемая броузером в рамках объектной модели. Все объекты создаются самим броузером, и доступ к ним осуществляется через экземпляр:
Объект. метод ½ событие ½ коллекция ½ свойство.
Свойство — переменная в рамках объекта, которая может использоваться для получения каких-то значений или установки новых. Ряд свойств может быть доступен только для чтения.
Метод — процедура или функция, предоставляемая объектом для выполнения каких-либо действий или управления свойствами объекта.
Событие — какое-либо действие пользователя или момент работы броузера. Для реакции на события создаются обработчики событий.
Коллекция — упорядоченный набор свойств, похожий на массив, доступ к которому осуществляется специальными средствами.
Запуск JavaScript. Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например, Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0).
События. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие onClick. Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелчка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
|
|
|
| <form><input type="button" value="Щелкни" onClick = "alert('Yo')"> </form> | Пример обработки события: при нажатии на кнопке выводится сообщение «Yo». |
Данный пример имеет несколько новых особенностей: рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой. Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие on Click, компьютер должен выполнить вызов alert('Yo'). Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>. Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда Вы щелкаете на кнопке, наш скрипт создает окно, содержащее текст 'Yo'. В этом примере мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo")'.
|
|
|
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения о некоторых из них мы получим в данном описании, однако не о всех.
Функции. В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. Давайте, к примеру, напишем скрипт, печатающий некий текст:
<html>
<script language="JavaScript">
function myFunction()
{
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
</script>
<body>
<form>
<input type="button" value="Вызов функции" onClick="myFunction()">
</form>
<body>
</html>
В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Можно увидеть, что здесь при нажатии на кнопку осуществляется вызов функции myFunction().
Замечание:
1. Обратите внимание на строку onClick="myFunction()” при описании кнопки. Событие onClick возникает, когда пользователь щелкает левой кнопкой по объекту, и мы обрабатываем данное событие, вызывая функцию myFunction, описанную выше.
2. Обратите внимание, что даже если мы описываем функцию без параметров, например, myFunction(), как при описании, так и при вызове после имени функции мы должны указывать круглые скобки.
|
|
|
