|
// Фабрика блочных элементов HTML: <div>. |
|
// <div> является одним из HTML элементов общего назначения (вместе со <span>). |
|
// Его особенность в том, что у него совершенно нет никаких особенностей. |
|
// Элемент <div> не обладает ни визуальными, ни смысловыми свойствами. |
|
// Это всего лишь некоторая обозначенная прямоугольная область интерфейса, |
|
// прямоугольный блок. По этой причине при создании веб-приложений <div> |
|
// повсеместно используют как фундаментальный логический кирпичик. |
|
var makeDiv = function(str, style) { |
|
// Создаём новый <div> в памяти и сохраняем в переменную. |
|
var div = $('<div>'); |
|
// Добавляем созданному элементу некоторые указанные визуальные свойства. |
|
div.css(style); |
|
// Размещаем внутри созданного элемента текст. |
|
// Это действие аналогично записи <div>(содержимое str)</div> в HTML. |
|
div.text(str); |
|
return div; |
|
}; |
|
|
|
// Фабрика элементов кнопок. |
|
// Мы передаём в функцию как текст кнопки, так и функцию-обработчик, которая |
|
// будет вызвана при нажатии пользователем кнопки. |
|
var makeButton = function(str, handler) { |
|
// Создаём новую кнопку и сохраняем в переменную. |
|
var btn = $('<button>'); |
|
// Устанавливаем текст кнопки. |
|
// Это действите аналогично записи <button>(содержимое str)</button> в HTML. |
|
btn.text(str); |
|
// Указываем, что по нажатию на кнопку нужно запустить функцию handler. |
|
btn.click(handler); |
|
return btn; |
|
}; |
|
|
|
// Фабрика интерактивных элементов интерфейса. |
|
// Внутри этой функции мы создаём всё необходимое для работы |
|
// кусочка интерфейса, отображающего один конкретный экземпляр человека |
|
// (и связанные с ним данные). |
|
var makePersonUI = function(person) { |
|
// Создаём блок для отображения полного имени. |
|
// Кроме размещения в нём полного имени, изменяем стиль средствами CSS. |
|
// Следует отметить, что взрослые дяди так не делают. Всё, что касается |
|
// внешнего вида элементов на экране, выносится в отдельный файл. |
|
// Но в образовательных целях мы позволим себе согрешить. |
|
var fullNameDiv = makeDiv(person.name + ' ' + person.surname, { |
|
backgroundColor: 'gray', // Цвет фона. |
|
color: 'white', // Цвет текста. |
|
padding: '2px 6px', // Отступ текста от краёв прямоугольника. |
|
fontSize: '14pt', // Размер шрифта. |
|
fontWeight: 'bold' // Начертание шрифта. |
|
}); |
|
|
|
// Создаём блок для отображения занятия человека. |
|
// Делаем текст цвета неба и воды. |
|
var creationDiv = makeDiv('Working on ' + person.creation, { |
|
color: 'blue', |
|
padding: '0 6px' |
|
}); |
|
|
|
// Блок для отображения зарплаты. |
|
var salaryDiv = makeDiv('', { |
|
color: 'green', |
|
padding: '0 6px' |
|
}); |
|
|
|
// Собственно, сама зарплата в у.е. |
|
var salary = 0; |
|
|
|
// Функция получения зарплаты. |
|
// Зарплату получать хорошо, вызывайте эту функцию почаще. |
|
var getSalary = function() { |
|
return salary; |
|
} |
|
|
|
// Функция назначения зарплаты. |
|
// При установке значения меняет текст в блоке отображения зарплаты, |
|
// а также контроллирует, чтобы зарплата не стала отрицательной. |
|
var setSalary = function(newSalary) { |
|
salary = newSalary; |
|
if (salary > 0) { |
|
salaryDiv.text('Salary: Ls ' + salary); |
|
} else { |
|
salary = 0; |
|
salaryDiv.text('Working for free!'); |
|
} |
|
}; |
|
|
|
// Функция изменения зарплаты на определённую сумму. |
|
// Сумма может быть как положительной, так и отрицательной. |
|
// Все операции с зарплатой производятся через приготовленные ранее |
|
// функции getSalary и setSalary. |
|
var changeSalary = function(amount) { |
|
setSalary(getSalary() + amount); |
|
} |
|
|
|
// Создаём кнопку для повышения зарплаты. |
|
var incButton = makeButton('Pay More', function() { |
|
changeSalary(100); |
|
}); |
|
|
|
// Создаём ещё одну кнопку, для понижения зарплаты. |
|
// Понижать зарплату приходится стремительнее, чем повышать. |
|
var decButton = makeButton('Pay Less', function() { |
|
changeSalary(-500); |
|
}); |
|
|
|
// Создаём главный блок. В него мы добавим все блоки и кнопки, |
|
// заготовленные ранее. |
|
var UI = makeDiv('', { margin: 20 }); |
|
UI.append(fullNameDiv, creationDiv, salaryDiv, incButton, decButton); |
|
// Устанавливаем начальное значение зарплаты. |
|
setSalary(Math.round(Math.random() * 10000) + 300); |
|
return UI; |
|
}; |
|
|
|
// Запускаем функцию, когда страница загрузилась |
|
// и с ней (страницей) можно начинать работать. |
|
jQuery(function($) { |
|
|
|
// Достаём данные о людях в переменную people. |
|
var people = getPeople(); |
|
// В цикле выводим одного за другим всех людей и создаём |
|
// визуальный интерфейс для каждого из них. После чего размещаем |
|
// этот интерфейс в теле документа средствами jQuery. |
|
for (var i = 0; i < people.length; i++) { |
|
var personUI = makePersonUI(people[i]); |
|
$('body').append(personUI); |
|
} |
|
|
|
}); |
