Материал: IkxJ2A64Jt
идет ключевое слово function, после него имя функции, затем список параметров в скобках и тело функции – код, который выполняется при ее вызове.
Объявление функции:
function summ(a,b)
{
var с = a + b; return c;
}
Вызов функции:
var x = summ(5, 3);
4.3. Объектная модель документа
Объектная модель документа (DOM) обеспечивает программный интерфейс для HTML и XML-документов. Она определяет логическую структуру документов и способы взаимодействия с ними.
На рисунке представлен набор основных объектов с соблюдением их иерархии:
∙window – предназначен для работы с окнами браузера, дает возможность открывать новые окна с установленными параметрами;
∙screen – позволяет определить такие параметры экрана клиента, как разрешение и глубина цвета;
∙frames – дает доступ к документам, загруженным в фреймы;
∙location – дает доступ к URL документа, отображаемого в окне браузера. Позволяет определить полный URL, а также его части: протокол, доменное имя и т. д.;
∙navigator – дает информацию о версии браузера;
∙history – позволяет выполнять навигацию по посещенным страницам;
∙document – служит для обращения к элементам страницы.
Объекты имеют свойства и методы. Обращение к ним происходит следующим образом:
объект.свойство объект.метод
Свойства объекта могут являться объектами – в этом случае обращения к свойствам и методам объектов второго и последующих уровней происходит аналогично.
26
|
|
|
|
all |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
history |
|
links |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
navigator |
|
anchors |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
frames |
|
forms |
|
elements |
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window |
|
|
|
|
|
|
|
document |
|
scripts |
|
|
|
|
|
|
|
|
||
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
location |
|
frames |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
event |
|
images |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
screen |
|
selection |
|
|
|
|
|
|
|
|
|
stylesheets
body
Например, на странице есть форма, а в форме – поле ввода. Требуется записать содержимое этого поля в переменную. Это можно сделать следующим образом:
var a = document.имя_формы.имя_поля_ввода.value;
4.4.События объектов
ВJavaScript, как и в других объектно-ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа, а значением этого атрибута является выражение
JavaScript.
Следующий пример показывает обработку события наведения курсора на элемент. При этом изменится цвет фона этого элемента.
<div onMouseOver="this.style.bgColor='#CCCCCC'">
Наведите курсор мыши
</div>
Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам текущего объекта.
27
Пример использования JavaScript:
<html>
<head></head>
<body>
Начало текста
<div onClick="openClose('1')">подробнее...</div> <div id="1" style="display:none;">скрытый текст</div>
продолжение текста
</body>
</html>
<script language="JavaScript" type="text/javascript"> function openClose(id)
{
var obj = document.getElementById(id).style;
if(obj.display == "") obj.display = "none";
else if(obj.display != "none") obj.display = "none";
else
obj.display = "block";
}
</script>
28
Список литературы
1.Кириленко А. Самоучитель HTML. СПб.: Питер, 2006. 272 с.
2.Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. СПб.: БХВПетербург, 2007. 672 с.
3.Днепров А. Г. JavaScript на 100 %. СПб.: Питер, 2008. 304 с.
4.Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Русская редакция. СПб.: БХВ-Петербург, 2015. 688 с.
29
|
Содержание |
|
Введение................................................................................................................... |
3 |
|
1. |
Основы веб-технологий.................................................................................... |
4 |
2. |
Язык разметки гипертекста .............................................................................. |
7 |
|
2.1. Общие сведения .................................................................................. |
7 |
|
2.2. Структура HTML-страницы............................................................... |
8 |
|
2.3. Служебные символы, пробелы и перевод строки............................ |
8 |
|
2.4. Форматирование текста.................................................................... |
10 |
|
2.5. Списки................................................................................................ |
13 |
|
2.6. Ссылки................................................................................................ |
15 |
|
2.7. Таблицы.............................................................................................. |
15 |
|
2.8. Фреймы............................................................................................... |
17 |
|
2.9. Формы ................................................................................................ |
18 |
3. Каскадные таблицы стилей CSS .................................................................... |
21 |
|
|
3.1. Способы подключения стилей......................................................... |
21 |
|
3.2. Формат записи стилей ...................................................................... |
22 |
|
3.3. Классы................................................................................................ |
23 |
4. |
Язык программирования JavaScript ............................................................... |
24 |
|
4.1. Способы подключения ..................................................................... |
24 |
|
4.2. Элементы языка................................................................................. |
25 |
|
4.3. Объектная модель документа .......................................................... |
26 |
|
4.4. События объектов............................................................................. |
27 |
Список литературы ............................................................................................... |
29 |
|
30