6. Функции

Как и в других языках программирования функции предназначены для структурирования кода приложения.

Примечание. Кроме функций JS поддерживает работу с объектами в парадигме ООП, но это будет рассмотрено в следующих лабораторных.

Код 8. Пример функции

var test = "МИЭТ - лучший";

var temp = "Неужели";

var attentions = {}; //глобальный объект предупреждений

var errors = {}; //глобальный объект ошибок

//Определение функции

function showTest(data, text, flag) {

var Result = true;

if( flag === undefined ) {

Result = false;

attentions.showTest = 'Флаг не передан';

}

alert( data + " " + test + " " + text );

// test берется извне функции

// будет выведено - "2017 год МИЭТ - лучший однозначно"

return Result;

}

//Вызов функции с проверкой возвращаемого значения

if( !showTest("2017 год", "однозначно") ) {

if( attentions.showTest )

alert( attentions.showTest ); //сработает т.к. флаг не был передан

}

4. Взаимодействие JavaScript иDom

Как было показано в примерах кода: Код2 и Код3 JS имеет доступ к объектам DOM. Это позволяет получить в коде JS объекты DOM и их свойства. Поскольку свойств у объектов много, удобно пользоваться справочником отладчика броузера, который при выборе элемента на странице показывает все свойства и методы допустимые для манипулирования с ним см. рис. 8.

Рис. 8. Просмотр свойств и методов элементов страницы

1. Применение JavaScript для задач управления размером и позиционированием элементов

Предположим есть трехколоночный макет сайта, в котором в первой и третьей колонках определены по два контейнера. Предположим, что при изменении размеров экрана до ширины менее 900 пикселей второй контейнер из правой колонки нужно переместить в левую колонку. Сделать это средствами CSS — невозможно т. к. CSS не может изменить иерархию DOM.

Составим алгоритм задачи

1. «Взять» второй контейнер из правой колонки

2. Разместить взятый контейнер в левой колонке между первым и вторым контенером

Код 9. HTML код

<div class="layout">

<div class="leftCol">

<div id="leftFirst">

Первый в левой колонке

</div>

<div id="leftSecond">

Второй в левой колонке

</div>

</div>

<div class="rightCol">

<div id="rightFirst">

Первый в правой колонке

</div>

<div id="rightSecond">

Второй в правой колонке

</div>

</div>

<div class="centerCol">Колонка 2</div>

</div>

Поскольку для контейнеров определены id “взять” контейнер c ID=”rightSecond” можно с помощью метода getElementByID. Затем контейнер нужно разместить после контейнера с ID=”leftFirst”. Эту операцию можно оформить в виде фукции в которую передается ID извлекаемого контейнера, ID контейнера назначения и flag операции: вставить до, вставить после.

Код 9. Функция перемещения контейнера

function moveDiv(IDFrom, IDTo, flag) {

if( IDFrom === undefined || IDTo === undefined )

return false;

var obj_from = document.getElementById(IDFrom);

var obj_to = document.getElementById(IDTo);

var parent_obj_to = obj_to.parentNode; //Определяем родительский узел

if( obj_from === null || obj_to === null )

return false;

if( obj_to.parentNode === obj_from.parentNode )

return false; //Объект уже перемещен. Выходим

if( flag === undefined || flag === true) {

parent_obj_to.insertBefore(obj_from, obj_to);

//метод insertBefore вставляет элемент obj_from перед элментом obj_to

//внутри родительского элемента parent_obj_to

} else if (flag === false) {

parent_obj_to.insertBefore(obj_from, obj_to.nextSibling);

//метод nextSibling получает следующий элемент

//метод previousSibling получает предыдущий элемент

}

};

Теперь нужно вызывать эту функцию при изменении размеров экрана. Для этого нужно отслеживать эти изменения с помощью механизма событий DOM. С каждым объектом DOM ассоциированы различные события. У объекта window определены 6 событий:

• Load – вызывается после загрузки документа в окно

• Unload — вызывается перед выгрузкой из окна

• Focus — окно (документ) получает фокус

• Blur — окно (документ) теряет фокус

• Resize — окно меняет размеры

• Error — в коне произошла ошибка

Нам нужно, чтобы код срабатывал при изменении размеров окна, значит нам нужно «повесить обработчик» на событие Resize. Это делается с помощью метода addEventListener, которому передается имя события и обработчик, который нужно вызывать при наступлении этого события см. Код 10.

Код 10. Отслеживание ресайза окна

var startWidth = 900;

window.addEventListener("resize", function() {

//проверяем, что текущая ширина меньше заданной

if( window.innerWidth < startWidth) {

moveDiv("rightSecond", "leftFirst", false);

} else {

moveDiv("rightSecond", "rightFirst", false);

//перемещаем контейнер на прежнее место, если ширина больше заданной

}

});

Все возможные параметры окна показаны на рис. 9 и 10.

Рис. 9. Размеры окна

Рис. 10. Размеры при позиционировании путем скролинга

Кроме задания отслеживания через addEventListener, возможно также задавать отслеживание непосредственно в коде тега элемента.

Например так: <div onClick=”alert('Кликнули по этому контейнеру');”></div>