CIT / LabRab06
.pdf
11
<iframe id="target" src="lab2_6_target.htm" style="border: 2px solid #0F0; width:256px; padding:8px;">Не удалось загрузить lab2_6_target.htm!</iframe>
<br/><a href="#" onClick="popup=window.open('lab2_6_target.htm','_blank')">Открыть страницу-
приемник</a>
<br/><a href="#" onClick="if(popup){popup.close();popup=null;}">Закрыть страницу-приемник</a>
</body>
</html>
Метод postMessage присутствует как у элемента iframe, так и у всплывающего окна. Первым параметром метода является сообщение (текст, данные или др.), вторым — адрес сервера со страницей-приемником. Второй параметр введен в целях безопасности, он может содержать или имя сервера, или “*”, если страница-отправитель отправляет не конфиденциальные данные.
Пример 2.6.б. Страница-приемник сообщения «lab2_6_target.htm»
<!DOCTYPE html> <html>
<head>
<title>Обмен сообщениями между страницами. Страница-приемник</title> <meta charset="windows-1251">
</head>
<script type="text/javascript">
<!--
function init() {
if (window.addEventListener) window.addEventListener("message", receiveMessage, false);
else
window.attachEvent("onmessage", receiveMessage);
}
function receiveMessage(event) {
document.body.innerHTML = "Принято сообщение: " + event.data;
}
-->
</script>
<body onLoad="init()"> <i>Ожидание сообщения...</i>
</body>
</html>
12
2.7 Элементы векторной графики
В HTML5 добавлена поддержка SVG - языка разметки векторной графики на базе XML. Графика вставляется в разметку, с использованием тега <svg>.
Пример 2.7. Использование элементов векторной графики
<!DOCTYPE html> <html>
<head>
<title>Векторная графика</title> <meta charset="windows-1251">
</head>
<body>
<p>SVG - язык разметки векторной графики на базе XML. В HTML5 появилась возможность вставки векторной графики прямо в разметку документа с помощью тега
<svg>, к примеру так: <div align="center">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="150"
width="220">
<polygon points="10,10 10,90 60,120 110,90 110,10" style="fill:blue;stroke:green;" />
<rect x="100" y="20" width="100" height="95" style="fill:red;stroke:gray;fill-opacity: 0.5"/>
<circle cx="100px" cy="100px" r="50px" style="fill:green;stroke:cyan;fill-opacity: 0.75"/>
</svg>
</div></p>
</body>
</html>
С помощью тега <polygon> в SVG можно нарисовать ломаную линию, с помощью <rect> - прямоугольник, с помощью <circle> - круг. в атрибуте style каждого из этих тегов можно указать стиль каждого элемента индивидуально — цвет заливки (fill), цвет границы (stroke), прозрачность заливки (fill-opacity) и многое другое.
2.8 Работа с мультимедиа. Тег <audio>
С помощью нового HTML5 элемента <audio> вы можете добавить на ваш веб-сайт музыкальный трек или подкаст с помощью обычного разметочного тега. Атрибут src тега <audio> позволяет указать путь к аудио файлу, а атрибут control добавляет кнопки управления.
<audio id="player" src="m/Chipdisco.ogg" controls></audio>
В этом примере используется только формат Ogg, поэтому пример будет работать только в Firefox, Opera и Chrome. Для того, чтобы файл нормально проигрывался в Safari и
13
Internet Explorer необходимо добавить также файл в формате MP3.
С помощью элемента source вы можете предоставить несколько источников в разных форматах для воспроизведения. Браузер будет использовать первый поддерживаемый им формат. Текст находящийся в содержимом элемента будет отображен в случае если браузер пользователя не поддерживает элемент audio.
<audio id="player" controls>
<source src="m/Chipdisco.ogg" type="audio/ogg"> <source src="m/Chipdisco.mp3" type="audio/mpeg">
Ваш браузер не поддерживает тег <b><audio></b>! </audio>
С помощью атрибута autoplay вы можете заставить трек автоматически проигрываться после загрузки страницы.
Пример 2.8. Воспроизведение аудио
<!DOCTYPE html> <html>
<head>
<title>Тег <audio></title> <meta charset="windows-1251">
</head>
<body>
<audio id="player" controls>
<source src="m/Chipdisco.ogg" type="audio/ogg"> <source src="m/Chipdisco.mp3" type="audio/mpeg">
Ваш браузер не поддерживает тег <b><audio></b>! </audio>
<div>
<button type="button" onClick="var p=document.getElementById('player'); p.pause(); p.currentTime=0;">Стоп</button>
<button type="button" onClick="document.getElementById('player').pause()">Пауза</button>
<button type="button" onClick="document.getElementById('player').play()">Воспроизведение</button><br/>
<button type="button" onClick="document.getElementById('player').volume-=0.1">Убавить громкость</button>
<button type="button" onClick="document.getElementById('player').volume+=0.1">Прибавить громкость</button>
</div>
</body>
</html>
В примере показаны возможности управления плеером из скрипта. Плеер (как аудио, так и видео) содержит такие методы для управления воспроизведением медиафайла, как pause() - приостановить воспроизведение и play() - возобновить воспроизведение. Также плеер содержит свойство volume, изменение значения которого приводит к увеличению или уменьшению громкости. Значение громкости можно указать от 0.0 до 1.0.
14
2.9 Тег <video>
HTML5 вводит специальный тег <video> позволяющий встраивать в веб-страницы видео файлы.
Атрибут src тега <video> позволяет указать путь к видео файлу, который будет воспроизведен. Атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера. По-умолчанию плеер принимает размеры видеофайла.
<video id="player" src="m/Freddie%20Mercury%20Google%20Doodle.webm" controls></video>
Видео из этого примера будет нормально проигрываться только в браузерах Opera, Firefox и Chrome. Это происходит из-за того, что в данный момент разные браузеры поддерживают разные форматы.
Opera, Chrome и Firefox поддерживают формат Ogg (с видео кодеком Theora и аудио кодеком Vorbis) и WebM (с видео кодеком VP8 и аудио кодеком Vorbis), а Internet Explorer и Safari поддерживают MPEG4 (с видео кодеком H.264 и аудио кодеком AAC). Таким образом для того, чтобы видео нормально воспроизводилось во всех браузерах необходимо добавить источники в формате Ogg и MPEG4 (или WebM и MPEG4).
С помощью тега <source> Вы можете предоставить несколько источников видео в разных форматах для воспроизведения. Браузер будет использовать первый поддерживаемый им формат. Текст помещенный в содержимое элемента video будет отображен в случае если браузер пользователя не поддерживает тег <video>.
Пример 2.9. Воспроизведение видео
<!DOCTYPE html> <html>
<head>
<title>Тег <video></title> <meta charset="windows-1251">
</head>
<body>
<video id="player" poster="m/Freddie%20Mercury%20Google%20Doodle.jpg" controls>
<source src="m/Freddie%20Mercury%20Google%20Doodle.webm" type="video/webm">
<source src="m/Freddie%20Mercury%20Google%20Doodle.mp4" type="video/mp4">
<track label="English subtitles" kind="subtitles" srclang="en" src="m/Freddie%20Mercury%20Google%20Doodle.vtt" default>
Ваш браузер не поддерживает тег <b><video></b>! </video>
<div>
<button type="button" onClick="var p=document.getElementById('player'); p.pause(); p.currentTime=0;">Стоп</button>
<button type="button" onClick="document.getElementById('player').pause()">Пауза</button>
<button type="button" onClick="document.getElementById('player').play()">Воспроизведение</button><br/>
<button type="button" onClick="document.getElementById('player').volume-=0.1">Убавить громкость</button>
<button type="button" onClick="document.getElementById('player').volume+=0.1">Прибавить громкость</button>
</div>
</body>
</html>
В примере также рассмотрен пример подключения дорожки субтитров к видео. Браузеры требуют специальный формат субтитров, WebVTT или TTML, в отличие от обычных
15
плееров. Субтитры подключаются к видео с помощью тега <track> (дорожка), содержащего параметры kind – для описания субтитров используется значение “subtitles”, label – метка дорожки, отображается в некоторых браузерах при выборе субтитров с необходимым языком, srclang – язык дорожки, src – путь к файлу дорожки.
2.10 Перетаскивание элементов страницы
Это не что иное, как поддержка браузерами классической модели “drag and drop”, которая очень популярна в обычных приложениях с графическим интерфейсом. Для элементов, которые будете “ перетаскивать” необходимо определить атрибут draggable, а для элементов, на которые будете “ бросать” перетаскиваемые элементы нужно определить обработчики событий ondragenter, ondragover и ondrop.
Пример 2.10. Перетаскивание элементов страницы (drag'n'drop)
<!DOCTYPE html> <html>
<head>
<title>Перетаскивание элементов</title> <meta charset="windows-1251">
<style type="text/css">
.basket { border: 1px solid #777; width: 108px; height: 120px; padding: 10px; border-radius:0 0 10px 10px; margin: 8px; }
.basket0 { background-color: #e99; }
.basket1 { background-color: #9ce; }
.basket2 { background-color: #9e9; }
.ball { display: inline-block; width: 30px; height: 30px; border: 1px solid #777; border-radius:15px; margin:4px; }
.basket .ball { margin: 2px; }
.ball0 { background-color: #F55; }
.ball1 { background-color: #59F; }
.ball2 { background-color: #5F5; } </style>
</head>
16
<script type="text/javascript">
<!--
var moving = null;
function init() {
for (var i = 0; i < 12; i++) {
var e = document.createElement("div"); e.setAttribute("id", "ball"+i); e.setAttribute("draggable", "true");
e.className = "ball ball"+Math.floor(Math.random()*3); e.ondragstart = dragStart;
e.ondragend = dragEnd; document.getElementById("balls").appendChild(e);
}
}
function drop() {
var ev = ev || window.event;
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('Ball'))); if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true; return false;
}
function over(ev) {
var ev = ev || window.event;
if ((ev.target.className.search("basket0") != -1) && (moving.search("ball0") != -1))
return false; return true;
}
function dragStart(ev) {
var ev = ev || window.event; ev.dataTransfer.setData("Ball", ev.target.id); ev.dataTransfer.effectAllowed = "move";
moving = this.className; return true;
}
function dragEnd(e) {
var ev = ev || window.event; ev.dataTransfer.clearData("Ball"); moving = null;
return true;
}
-->
</script>
<body onLoad="init()"> <table><tr>
<td><div class="basket basket0" id="red" onDragEnter="return true" onDragOver="return over(event)" onDrop="return drop(event)"></div></td>
<td><div class="basket basket1" id="blue" onDragEnter="return true" onDragOver="return over(event)" onDrop="return drop(event)"></div></td>
<td><div class="basket basket2" id="green" onDragEnter="return true" onDragOver="return over(event)" onDrop="return drop(event)"></div></td>
</tr></table>
<div id="balls"></div> </body>
</html>
17
Этот пример показывает, каким образом динамически создавать объекты веб-страницы с помощью Javascript, как можно выполнять перемещение элементов в блоки <div> и как реализовать выборку элементов по их стилю. Исходный код примера реализует перемещение только красных кругов в соответствующий по цвету им блок.
По окончании загрузки страницы выполняется функция init(). Её задачей является создание перемещаемых элементов. Метод document.createElement(tagname) создает элемент структуры DOM и возвращает его как результат своего выполнения. Полученный объект имеет ряд методов, наиболее используемым из которых является setAttribute(attr, value). Этот метод устанавливает в элементе атрибуту attr значение value. В примере мы устанавливаем элементу его идентификатор (атрибут «id») и разрешаем его перемещение (атрибут «draggable», устанавливаем ему значение «true»). После этого мы устанавливаем класс элемента (его стиль), занося значение класса в свойство элемента className. Это равносильно установке того же значения атрибуту «class». После элементу устанавливаются обработчики событий onDragStart и onDragEnd – соответственно начало и окончание перемещения. И, после всех операций, с помощью метода appendChild(element) элемент добавляется к структуре DOM к объекту страницы с идентификатором «balls». И так происходит со всеми двенадцатью элементами.
Если бы мы создавали элементы не динамически, а прописывали бы их в структуре страницы, то они бы имели такой вид:
<div id="ballXX" draggable="true" class="ball ballX" onDragStart="dragStart(event)" onDragEnd="dragEnd(event)"></div>
Теперь рассмотрим обработчики этих двух событий. Когда элемент захватывают мышью, срабатывает событие onDragStart. В нем мы сохраняем выбранный элемент в объекте ev.dataTransfer. Эти данные записываются с помощью метода ev.dataTransfer.setData(name, object). После устанавливаем вид курсора с помощью свойства ev.dataTransfer.effectAllowed, установив ему значение «move».
С событием onDragEnd все намного проще. При его возникновении обработчику необходимо только очистить данные о перемещаемом элементе с помощью метода ev.dataTransfer.clearData(name).
В примере страница содержит 3 блока с разными идентификаторами — red, blue и green. Эти блоки — приемники элементов. Они содержат обработчики событий onDragEnter – внесение элемента в пределы блока, onDragOver – перемещение элемента над блоком и onDrop
– отпускание элемента в пределах блока. Важно обрабатывать как минимум два последних события.
В обработчике события onDragOver мы можем реализовать выборку, какие элементы
18
можно принять в блок. Если обработчик возвращает значение false, значит элемент разрешено отпустить в пределах блока. Если же обработчик возвращает значение, отличное от false, значил элемент запрещено отпускать в пределах этого блока, при этом курсор принимает вид «действие недоступно».
Обработчик события onDrop помещает элемент, который перемещается, в текущий блок. Он получает данные об элементе, сохраненные в начале перемещения с помощью метода event.dataTransfer.getData(name). После этого вызывается метод события event.stopPropagation(),
который отменяет всплытие события по элементам структуры DOM, предотвращая при этом срабатывания обработчиков события onDrop всех родительских элементов блока.
2.11 Использование холста. Тег <canvas>
Основная часть рекомендаций в части использования нового элемента <canvas> - это спецификация программного интерфейса вывода на него графики. Для начала вы размещаете на странице тег <canvas> определенной ширины и высоты, затем в коде JavaScript получаете к нему доступ (например, по id) и начинаете на нем рисовать. Рисование сводится к последовательному определению стиля линий strokeStyle, стиля заливки fillStyle и вызову методов рисования, таких как moveTo (перенести перо), lineTo (нарисовать отрезок), arc (нарисовать дугу) и т.д.
Пример 2.11. Рисование на элементе <canvas>
<!DOCTYPE html> <html>
<head>
<title>Тег <canvas></title> <meta charset="windows-1251">
</head>
<script type="text/javascript">
<!--
var x = 0, y = 0, sx, sy, img = new Image(); img.src = "m/html5.png";
function init() {
var cvs = document.getElementById("cvs"); if (!cvs.getContext)
alert("Ваш браузер не поддерживает тег <canvas>!");
}
function move(ev) {
var rect = document.getElementById("cvs").getBoundingClientRect();
x= ev.clientX-rect.left;
y= ev.clientY-rect.top;
}
function randomcolor() { return
"rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.fl
oor(Math.random()*256)+")";
}
function press(ev) {
var ctx = document.getElementById("cvs").getContext("2d"); switch (ev.button) {
case 0:
ctx.fillStyle = randomcolor(); ctx.beginPath();
ctx.arc(x, y, 20, 0, 2*Math.PI, false); ctx.fill();
break; case 1:
ctx.drawImage(img, x-64, y-64, 128, 128); break;
case 2:
ctx.fillStyle = randomcolor(); ctx.fillRect(x-20, y-20, 40, 40);
19
break;
}
}
-->
</script>
<body onLoad="init()">
<canvas id="cvs" style="border:2px solid #777" width="640px" height="480px" onMouseDown="press(event)" onMouseMove="move(event)" onContextMenu="return false">Ваш браузер не поддерживает тег <b><canvas></b>!</canvas>
</body>
</html>
Здесь в примере показано, как обрабатывать события нажатия кнопки мыши. Функция press(ev) срабатывает каждый раз, когда нажимается кнопка мыши на элементе canvas. При этом параметр ev содержит свойства наступившего события. Нас интересует свойство ev.button. Оно содержит число, которое характеризует нажатую кнопку мыши. Если там число 0 — нажата левая кнопка мыши, если 1 — правая, 2 — средняя. В зависимости от нажатой кнопки мыши на элемент <canvas> выводится или геометрическая фигура (квадрат, круг) или изображение.
Задания для самостоятельного выполнения:
—В примере 2.7 (элементы векторной графики) заменить цвета и прозрачность фигур. Первый вариант делает заливку круга непрозрачной и устанавливает фигурам цвета cyan, magenta и black. Второй вариант делает непрозрачным квадрат и заливает фигуры цветами yellow, gray и peru.
—В примере 2.10 (перемещение элементов) первый вариант реализовывает перемещение зеленых кругов в зеленый блок, синих — в синий. Второй вариант делает доступным перемещение зеленых кругов в синий блок, а синих — в зеленый.
20
Общие задания:
—Выполнить все примеры из лабораторной работы, сохраняя каждый пример в отдельном файле;
—Проверить правильность работы каждого примера;
—Показать преподавателю на компьютере все сделанные примеры, объясняя их работу;
—Оформить отчет о проделанной работе;
—Защитить лабораторную работу, ответив на вопросы преподавателя.
Содержание отчета:
—Титульный лист;
—Цель работы;
—Задание;
—Исходные тексты;
—Результаты работы;
—Выводы по работе.
Контрольные вопросы:
...here will be some questions in the nearest future...