Розділ №3
3 Покрокове побудування html5 додатку
3.1 Программа
У HTML5 визначений елемент <canvas>, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту.
Код для візуалізації полотна з рамкою :
<canvas id = "tablet"
width = "900" height = "500">
На цьому полотні й буде відображатися візуалізація та маніпуляція сітками елементів.
Далі розглянемо покрокове побудування HTML5 додатку. Для того щоб маніпулювати програмою потрібен для цього користувальницький інтерфейс.
Розробимо дві кнопки для маніпулювання програмою:
HTML5: <input type = "button" id = "_close" name = "_close" value = "Замкнуть" />
JavaScript:
_closed = new Boolean (false);
_closed = false;
До
натискання :
Після
натискання :
<input type = "button" id = "clear" name = "clear" value = "Очистить" />
clear = new Boolean (false);
clear = false;
До
натискання
:
Після натискання :
Створимо таблицю фігур:
HTML5:
<div id="FiguresOutput"> Таблица фигур: <br> </ div>
CSS:
# FiguresOutput {
position: relative;
float: bottom;
top: 20px;
JavaScript:
if (coordX.length === 0) {document.getElementById ('FiguresOutput'). innerHTML + = ("Фигура №" + (fn +1) + ":");}
if (newFigure === true) {document.getElementById ('FiguresOutput'). innerHTML + = ('<br>' + "Фигура №" + (fn +1) + ":");}
newFigure = false;
Тепер створимо таблицю координат :
HTML5:
<div id="CoordOutput"> Таблиця координат: <br> </ div>
CSS:
# CoordOutput {
position: relative;
float: right;
top:-500px;
left:-200px;
}
JavaScript:
coordX [n] = x; var m = n +1;
coordY [n] = y; document.getElementById ('CoordOutput'). innerHTML + = ("Точка" + m + "(" + coordX [n] + ";" + coordY [n] + ");" + '<br>');
n = n +1;
Список літературі : Пітер Лабберс, Брайан Олберс, Френк Салім HTML5 для професіоналів: потужні інструменти для розробки сучасних веб-додатків = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. - М.: «Вільямс», 2011. - С. 272. - ISBN 978-5-8459-1715-7
Стівен Хольцнер HTML5 за 10 хвилин, 5-е видання = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. - М.: «Вільямс», 2011. - ISBN 978-5-8459-1745-4
David Flanagan - Canvas Pocket Reference.Scripted Graphics for HTML5 2010
Rob_Hawkes-HTML5 Canvas for games & entertainment-2011-ebook
S.Fulton, J.Fulton - HTML5 Canvas – 2011
Чак Муссіано і Білл Кеннеді "HTML і XHTML. Детальний керівництво" 6-е видання. Видавництво: Символ-Плюс, 2008 р.
Ерік А. Мейер "CSS. Каскадні таблиці стилів. Детальний керівництво" 3-е видання. Видавництво: Символ-Плюс, 2008 р.
Роберт Агулар "HTML і CSS. Основа будь-якого сайту" Видавництво: Ексмо, 2010 р.
Е. Кастро "HTML і CSS для створення Web-сторінок" Видавництво: НТ Пресс, 2006 р.
Н. Комолова, Є. Яковлєва "HTML. Самовчитель" 2-е видання. Видавництво: Пітер, 2011 р.
Джейсон Кренфорд Тіге "DHTML і CSS для Internet" 3-е видання. Видавництво: НТ Пресс, 2007 р.