Используемая в HTML5 <html>, а остальные элементы являются ветвями на этом дереве. JavaScript использует DOM для обращения к html-странице и выполнения с ней дополнительных манипуляций, помимо того, что можно сделать, используя только HTML5. Целиком дерево модели DOM является представлением документа, расположенного в памяти мобильного устройства.
Для того чтобы обратиться к любой части дерева DOM, необходимо составить ссылку на элемент внутри дерева, начав с объекта document. Обращение к любому элементу дерева выполняется в порядке иерархии, начиная с объекта document. Различные элементы html-страницы являются различными свойствами или методами (встроенными функциями) объекта document и отделяются точкой (.). Например:
document.body - свойство объекта document, выполняющее обращение к тегу <body>;
document.getElementByld("day_Image") - метод объекта document, выполняющий получение данных элемента HTML с идентификатором day_Image.Помимо функций документа, для манипулирования областью просмотра html-страницы будут полезны и несколько встроенных функций корневого элемента window.
Для лучшего понимания того, каким образом DOM работает с вашей страницей и JavaScript, будет полезно посмотреть, что можно сделать с просматриваемой частью вашей html-страницы. Следует отметить, что с точки зрения JavaScript html-страница является чем-то большим, чем просто статическим блоком кода HTML. Для этого кода каждый элемент разметки является объектом, который можно исследовать и модифицировать.
Самый простой способ получить доступ к объекту - это присвоить ему однозначное имя с помощью атрибута id объекта. Вот пример присвоения имени объекту:
<h1 id="pageTitle">Это мой заголовок</h1>
Элемент, которому присвоено однозначное имя, можно с легкостью найти в коде и манипулировать им посредством кода JavaScript.
Для поиска объектов в JavaScript применяется метод getElementByid() объекта document. По большому счету, document - это объект, который представляет весь документ HTML. Он имеет значительное количество полезных свойств и методов. Метод getElementByid() является одним из самых полезных - с его помощью можно просканировать html-страницу, чтобы найти требуемый элемент HTML.
При вызове метода document.getElementByid() ему передается идентификатор элемента HTML, который требуется найти. В следующем примере показан код для получения элемента HTML с идентификатором pageTitle:
var titleObject = document.getElementByid("pageTitle");
Этот код получает объект элемента <h1>, который был показан ранее, и сохраняет его содержимое ("Это мой заголовок") в переменной titleObject. Над сохраненным в переменной объектом можно выполнять разные операции, не требуя поиска его каждый раз для каждой операции.
Какие же операции можно выполнять над объектами HTML? В некоторой степени, ответ зависит от типа элемента, с которым мы работаем. Например, если объект - гиперссылка, можно изменить его URL, а если объект - изображение, то можно изменить его источник. Некоторые операции можно выполнять почти со всеми элементами HTML, например, изменять стиль или текст между открывающим и закрывающим тегами. Эти возможности позволяют сделать страницы динамическими, например, изменить внешний вид страницы, когда пользователь исполняет на ней какое-либо действие, скажем, щелкает по ссылке. Подобные ответные действия вызывают у пользователя чувство взаимодействия с интеллектуальной, реагирующей на его действия программой, а не простой, инертной html-страницей. Далее приведен пример, как можно модифицировать текст нашего подопытного элемента <h1>:
titleObject.innerHTML = "Мой заголовок изменился";
Этот код присваивает свойству innerHTML объекта titleObject (это наш элемент <h1>) текстовое значение, которое отображается как содержимое этого элемента. Свойство innerHTML - это всего лишь один аспект объекта HTML, который можно изменять. При создании кода для работы со свойствами объектов нужно знать, какие свойства JavaScript разрешает модифицировать.
Очевидно, что некоторые свойства относятся только к определенным элементам HTML, например атрибут src, который используется для загрузки изображения в элемент <img>:
var imgObject = document.getElementByld("dayImage");
daylmage.src = "cloudy.jpg";
А посредством свойств объекта style можно изменять свойства CSS:
titleObject.style.color = "rgb(0,191,255)";
Современные мобильные браузеры поддерживают огромный список свойств DOM, которые можно использовать практически со всеми элементами HTML [1-4]. Некоторые из наиболее полезных свойств приведены в следующей таблице.
| Свойство | Описание |
|---|---|
| className | Позволяет получить или установить атрибут class. Иными словами, это свойство определяет применяемые элементом стили (если таковые используются). Конечно же, этот стиль нужно сначала определить во встроенной или связанной со страницей таблице стилей, иначе получится простое форматирование по умолчанию. |
| innerHTML | Позволяет считывать или изменять содержимое элемента HTML. Свойство innerHTML очень полезно, но имеет две особенности. Первая: его можно использовать на всем содержимом HTML, включая текст и теги. Поэтому вставить в абзац полужирный текст можно, присвоив свойству innerHTML значение <b>Текст</b>. Вторая: присвоенное свойству innerHTML новое значение затирает все старое содержимое этого элемента, включая все другие элементы HTML. Таким образом, если присвоить новое значение свойству innerHTML элемента <div>, который содержит несколько абзацев текста и изображений, все будет заменено новым содержимым. |
| parentElement | Предоставляет HTML-объект элемента, содержащего текущий элемент. Например, если текущий элемент является элементом <b> в абзаце <p>, это свойство возвращает объект этого элемента <p>. Полученный таким образом объект также можно модифицировать. |
| style | Объединяет все атрибуты CSS, которые определяют внешний вид элемента HTML. Свойство style возвращает полноценный объект style и для изменения атрибута стиля нужно добавить еще одну точку, а потом название этого атрибута. Например, myElement.style.fontsize. С помощью объекта style можно устанавливать цвет, границы, шрифт и даже позиционирование элемента. |
| tagName | Предоставляет название элемента HTML для данного объекта без угловых скобок. Например, значением tagName элемента <img> будет текст img. |
Далее приводится пример работы программы, содержащей функцию, которая меняет содержимое тегов <img> местами и изменяет соответствующие им подписи, используя свойства DOM:
(рис 13.1)
Полный текст разметки, содержащий JavaScript - программу имеет вид:
<!DOCTYPE HTML>
<html lang = "ru">
<head>
<script type="text/javascript">
var flag = true;
function swapImage() {
var image_Object1 = document.getElementById("Dog");
var image_Object2 = document.getElementById("Boy");
if (flag == true) {
flag = false;
Boy.src = "Images/Dog.jpg";
Dog.src = "Images/boy.jpg";
document.getElementById("Caption_Dog").innerHTML = "Мальчик ВИТЯ";
document.getElementById("Caption_Boy").innerHTML = "БОБИК";
}
else {
flag = true;
Dog.src = "Images/Dog.jpg";
Boy.src = "Images/boy.jpg";
document.getElementById("Caption_Dog").innerHTML = "ЖУЧКА";
document.getElementById("Caption_Boy").innerHTML = "Мальчик ПЕТЯ";
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type ="text/css">
body,a {
font-size:50px
}
</style>
<title>Обмен изображений</title>
</head>
<body>
<figure >
<img id ="Dog" src="Images/Dog.jpg" width="500" height="550">
<figcaption id ="Caption_Dog">Изображение 1</figcaption>
</figure>
<figure >
<img id ="Boy" src="Images/boy.jpg" width="500" height="550">
<figcaption id ="Caption_Boy">Изображение 2</figcaption>
</figure>
<p><a href="#" onClick = "swapImage()">Поменять местами</a></p>
</body>
</html>
Программа содержит функцию swapImage(), обращение к которой происходит от события onClick - щелчка по гиперссылке. Эта функция берет элементы <img> и модифицирует их атрибуты src, чтобы они указывали на новые изображения. Кроме того, программа изменяет подписи к рисункам, используя метод getElementById() и свойство innerHTML объекта document.
Это самое известное новшество языка HTML5. Что же представляет этот холст?
Вообще, сама идея создания изображений (не путать со вставкой рисунков) совсем не нова, но вот воплощения ее до появления canvas удачными можно назвать с сильной натяжкой. Во-первых, это технология Flash со всеми ее достоинствами и недостатками, каковых, к сожалению, немало. Во-вторых, это VML (Vector Markup Language) - язык векторной разметки от Microsoft, в силу своей привязки к конкретной программной платформе не нашедший широкого распространения. Идея (да и первая реализация) canvas принадлежит компании Apple (в движке WebKit в 2004 году), которая, впрочем, пошла навстречу общественности и консорциуму W3C и в 2007 году раскрыла свои патенты без сохранения авторских прав. По сути, canvas является интерфейсом прикладного программирования. Уже сегодня его поддерживают все наиболее популярные, в том числе и мобильные, браузеры. С помощью canvas строятся графики, анимация, разрабатываются игры. Спецификации canvas - это одна из самых объемных частей HTML5, и мы рассмотрим лишь малую долю его возможностей для мобильных приложений.
Используя тег <canvas>, вы сможете нарисовать на HTML5- странице своего мобильного приложения почти все, что угодно. Вам не потребуется запоминать много атрибутов, поскольку данный тег использует только два атрибута - width (ширина) и height (высота). Тем не менее, применение элемента canvas выполняется в DOM-стиле. По сути, DOM-стиль означает запись необходимого JavaScript - кода со ссылками на объекты, их свойства и методы. Чтобы упростить нам жизнь, JavaScript использует то, что можно назвать облегченной версией ООП. Работа с DOM представляет собой объектно-ориентированное программирование в том отношении, что все используемые ссылки являются ссылками на объекты и их свойства.
Изначально вы имеете дело с пустым холстом, который задается атрибутами width (ширина) и height (высота) тега <canvas>. Для простоты первый шаг по созданию элемента canvas на вашей странице вы можете сравнить с натягиванием художественного холста на раму.
Для успешной работы с элементом canvas вы должны иметь представление о сетке и декартовых координатах. Верхний левый угол обладает координатами 0,0. По мере движения вправо первое значение растет. Если вы переместитесь вправо на 15 пикселов, значения будут равны 15,0- это движение по оси X. По мере движения вниз (по оси Y) будет увеличиваться второе значение. Если вы переместитесь вниз на 20 пикселов, положение будет выражаться уже значениями 15, 20. Предположим, вам нужно использовать эту точку в качестве точки отсчета для создания квадрата со стороной в 100 пикселов. Составить представление о положении и относительном размере изображения вам поможет отображение на html-странице сетки, однако, создавая изображение без отображения сетки, вы будете иметь более ясное представление о его внешнем виде. В Visual Studio вы можете использовать оба режима отображения.
Теперь мы готовы к тому, чтобы заполнить пустой прямоугольник, и для этого нам потребуется использовать JavaScript. Единственное, что нужно сделать с тегом <canvas>, - это определить область для размещения изображений в контексте визуализации, а также идентификатор. С точки зрения разметки, <canvas> - это простой до предела элемент с тремя атрибутами - id, width и hight. Таким образом, создание первого рисунка мы начнем со следующего тега:
<canvas id="briefCase" width="950" height="950" >
Для простоты атрибутам width и height присваивается одинаковое значение в 950 пикселов; также новому объекту canvas присваивается имя briefCase. Обычно холст отражается как пустой прямоугольник без рамки, т.е. он не виден вообще. Чтобы сделать холст видимым, с помощью таблицы стилей ему можно задать цветной фон или рамку, как показано в следующем правиле:
canvas{
border: 1px, dashed black;
}
Остальная часть работы представляет собой программирование на JavaScript модели DOM. Мы будем использовать в JavaScript объектно-ориентированный подход, позволяющий отразить программную структуру DOM. Таким образом, наша первая задача состоит в том, чтобы создать объект и метод для него:
CanvasMaster = new Object(); CanvasMaster.showCanvas = function () {...}
Этот код создаст объект и метод для этого объекта - функцию, которая будет выполнять операции JavaScript, когда нам это потребуется.
Далее программе требуется определенным образом получить доступ к узлу canvas модели DOM. Такой доступ обеспечивает модель DOM, которая содержит объект canvas и сопутствующие ему методы и свойства. Первый шаг при этом состоит в том, чтобы создать объект, содержащий узел DOM. Думайте об этом не как о создании переменной и присвоении ей узла, а как о создании экземпляра объекта, обладающего свойствами и методами объекта canvas.
В этой строке создается объект, содержащий объект canvas с именем briefCase:
canvasNow = document.getElementById("briefCase");
После того как мы создадим экземпляр объекта canvas, программе нужно будет получить контекст визуализации. Самый популярный из доступных контекстов называется 2d, что подразумевает контекст двухмерного рисования. Для получения контекста визуализации используется метод getContext (), которым обладает объект canvas (canvasNow):
contextNow = canvasNow.getContext('2d');
Экземпляру контекста визуализации присваивается имя contextNow. Данный объект обладает свойствами и методами контекста визуализации 2d.
Сначала мы назначим рисунку цвет. Для создания цвета можно использовать любой из доступных приемов. Будем использовать шестнадцатеричный формат:
contextNow.fillStyle = "#A7A7A7";
Свойство fillStyle определяет только цвета заливки и не используется для цвета обводки (контура) объекта.
Далее этим цветом заливки следует закрасить некоторую форму. Чтобы закрасить прямоугольник, можно использовать следующий код:
contextNow.fillRect(0, 0, 950, 950);
Первые два значения (0, 0) задают положение прямоугольника внутри области элемента canvas, а вторые два значения (950, 950) задают ширину и высоту прямоугольника.
Последнее, что нам потребуется сделать, это действительно выполнить закрашивание прямоугольника заданным нами цветом. Эту задачу выполняет следующая строка:
contextNow.fill();
При этом не имеет значения, сколько операций закрашивания вы определите; всего один метод fill () позаботится обо всех определенных заливках.
Теперь давайте сведем все эти фрагменты кода воедино в программе HTML5. Весь код этого сценария представлен в следующем листинге [1]:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
CanvasMaster = new Object();
CanvasMaster.showCanvas = function () {
canvasNow = document.getElementById("briefCase");
contextNow = canvasNow.getContext('2d');
contextNow.fillStyle = "#A7A7A7";
contextNow.fillRect(0, 0, 950, 950);
contextNow.beginPath();
contextNow.moveTo(400, 200);
contextNow.lineTo(720, 200);
contextNow.lineTo(720, 380);
contextNow.lineTo(880, 380);
contextNow.lineTo(880, 780);
contextNow.lineTo(280, 780);
contextNow.lineTo(280, 380);
contextNow.lineTo(400, 380);
contextNow.lineTo(400, 200);
contextNow.closePath();
contextNow.fillStyle = "#DC143C";
contextNow.fill();
contextNow.beginPath();
contextNow.moveTo(460, 260);
contextNow.lineTo(660, 260);
contextNow.lineTo(660, 380);
contextNow.lineTo(460, 380);
contextNow.closePath();
contextNow.fillStyle = "#FFD700";
contextNow.fill();
}
</script>
<style type ="text/css">
body,a {
font-size:70px
}
</style>
<title>Закрашенный контурный рисунок</title>
</head>
<body onload ="CanvasMaster.showCanvas()">
<article>
<figure>
<canvas id="briefCase" width="950" height="950" >
</canvas>
<figcaption> <br/>
<h1>Здесь был Пикассо</h1></figcaption>
</figure>
</article>
<br />
----------------------------------------
</body>
</html>
Как видите, данная программа использует стиль CSS3 и простую надпись, а также семантические теги <figure> и <figcaption>, охватывающие тег <canvas>. Результат выполнения данного сценария на эмуляторе мобильного устройства:
(рис 13.2)
Следующий пример использования <canvas> показывает, как можно добавить три метода к объекту CanvasMaster. Назовем их showCanvas(), punchOut(), punchOut2(). Первый рисует красный квадрат размером 800*800 пикселей. Второй и третий рисуют два маленьких квадрата другого цвета (отверстия) внутри первого. Вызов методов выполняется в тегах соответствующих гиперссылок, например, вызов метода рисования маленького квадрата:
<a href="#" onClick="CanvasMaster.punchOut()">Пробить отверстие</a>
Весь код представлен в листинге:
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript">
// Цвета: 595241,B8AE9C,FFFFFF,ACCFCC,8A0917
CanvasMaster = new Object();
CanvasMaster.showCanvas = function () {
canvasNow = document.getElementById("strokeAndChomp");
contextNow = canvasNow.getContext('2d');
contextNow.fillStyle = '#f53715';
contextNow.fillRect(50, 200, 800, 800);
contextNow.fill();
}
CanvasMaster.punchOut = function () {
contextNow.clearRect(300, 350, 200, 200);
}
CanvasMaster.punchOut2 = function () {
contextNow.clearRect(600, 650, 100, 100);
}
</script>
<style type="text/css">
body {
font-family:Verdana;
color:#e21849;
background-color:#f1d35f;
font-size:60px;
}
a {
text-decoration:none;
color:#1634c3;
margin-left:16px;
font-size:40px;
}
</style>
<title>Обводка и вырезание</title>
</head>
<body onLoad="CanvasMaster.showCanvas()">
<article>
<figure>
<canvas id="strokeAndChomp" width="1000" height="1000" >
Вы должны видеть то, что показывают браузеры с поддержкой HTML 5!
Как можно скорее установите такой браузер! </canvas>
<figcaption>
Квадрат </figcaption>
</figure>
<section>
<p><a href="#" onClick="CanvasMaster.punchOut()">Пробить отверстие</a></p>
</section>
<section>
<p><a href="#" onClick="CanvasMaster.punchOut2()">Пробить второе отверстие</a></p>
</section>
<section>
<p><a href="#" onClick="CanvasMaster.showCanvas()">Восстановить квадрат</a></p>
</section>
</article>
</body>
</html>
Результат выполнения данного сценария на эмуляторе мобильного устройства:
(рис 13.3)
Последний пример этой лекции демонстрирует возможность <canvas> для работы с готовыми изображениями, содержащимися на странице или в отдельном файле. Отрисовка таких изображений производится методом drawImage(), который может быть вызван с разным набором аргументов. Самый простой случай включает сам объект Image и его координаты на холсте. В примере эти координаты меняются посредством вложенного цикла. Код представлен в листинге:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showImages() {
var canvas = document.getElementById("briefCase");
var contextNow = canvas.getContext('2d');
var img = new Image(); var i, j, sx, sy ;
img.onload = function () {
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);
}
}
}
img.src = 'images/Dog.jpg';
}
</script>
<style type ="text/css">
body,a {
font-size:40px
}
</style>
<title>Работаем с изображением</title>
</head>
<body onload ="showImages();">
<article>
<figure>
<canvas id="briefCase" width="950" height="1400" >
</canvas>
<figcaption>
<h3>Цикл выполнен!!!</h3></figcaption>
</figure>
</article>
</html>
Результат выполнения данного JavaScript - кода на эмуляторе мобильного устройства:
(рис 13.4)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.