JavaScript. Подробное руководство, 6-е издание, стр. 372

<b>* или числом точек данных, умноженным на значение атрибута data-dx, если он</b>

<b>* указан, или числом точек данных, умноженным на высоту, деленную на 6</b>

<b>* - Минимальное и максимальное значение по оси у извлекаются из атрибутов</b>

<b>* data-ymin и data-ymax, если они указаны, иначе отыскиваются минимальное</b>

* и максимальное значение в данных.

*/

onLoad(function() { // Когда документ будет загружен 

 //Отыскать все элементы с классом "sparkline"

 var elts = document.getElementsByClassName("sparkline");

 main: for(var e = 0; e < elts.length: e++) { // Для каждого элемента

 var elt = elts[e];

<b>    // Получить содержимое элемента и преобразовать его в массив чисел.</b>

<b>    // Если преобразование не удалось, пропустить этот элемент.</b>

 var content = elt.textContent || elt.innerText; // Содержимое

 var content = content.replace(/~\s+|\s+$/g, // Удалить пробелы

 var text = content.replace(/#.*$/gm, // Удалить комментарии

 text = text.replace(/[\n\r\t\v\f]/g, " ");// Преобр. \n и др. в пробел

 var data = text.split(/\s+|\s*,\s*/); // По пробелам и запятым

 for(var і = 0; і < data.length; і++) { // Каждый фрагмент

 data[i] = Number(data[і]); // Преобразовать в число

 if (isNaN(data[і])) continue main; // Прервать при неудаче

 }

<b>    // Определить цвет, ширину, высоту и границы по оси у для диаграммы</b>

<b>    // из данных, из атрибутов data- элемента и из вычисленного стиля,</b>

 var style = getComputedStyle(elt, null);

 var color = style.color:

 var height = parselnt(elt.getAttributefdata-height")) ||

 parseInt(style.fontSize) || 20;

 var width = parseInt(elt.getAttribute("data-width")) ||

 data.length * (parseInt(elt.getAttribute("data-dx")) || height/6);

 var ymin = parselnt(elt.getAttribute("data-ymin")) ||

 Math.min.apply(Math, data);

 var ymax = parseInt(elt.getAttribute("data-ymax")) || Math.max.apply(Math, data);

 if (ymin >= ymax) ymax = ymin + 1;

 // Создать элемент <canvas>.

 var canvas = document.createElement("canvas”);

 canvas.width = width; // Установить размеры холста

 canvas.height = height;

 canvas.title = content; // Содержимое использовать как подсказку

 elt.innerHTML = "" ;// Стереть содержимое элемента

 elt.appendChild(canvas); // Вставить холст в элемент

<b>    // Нарисовать график по точкам (і,data[і]), преобразовав в координаты холста,</b>

 var context = canvas.getContext('2d');

 for(var і = 0; і < data.length; i++) { // Для каждой точки на графике

 var х = width*i/data.length; // Масштабировать і

 var у = (ymax-data[i])*height/(ymax-ymin); // и data[i]

 context.1іnеТо(х,у); // Первый вызов lineТо() выполнит moveTo()

 }

 context.strokeStyle = color; // Указать цвет кривой на диаграмме

 context.stroke(); // и нарисовать ее

 }

});

Прикладные интерфейсы HTML5

Под термином HTML5 обычно подразумевается последняя версия спецификации языка разметки HTML, но этот термин также используется для обозначения целого комплекса веб-технологий, которые разрабатываются и определяются как часть языка разметки HTML или сопутствующие ему. Официально этот комплекс технологий называется «Open Web Platform». Однако на практике чаще используется сокращенное название «HTML5», и в данной главе мы будем использовать его именно в этом смысле. В других главах этой книги уже описывались некоторые новые прикладные интерфейсы HTML5:

• В главе 15 были представлены методы

getElementsByClassName(),

querySelectorAll()

и атрибуты данных элементов документа.

• В главе 16 было описано свойство

classList

элементов.

• В главе 18 рассказывалось о спецификации «XMLHttpRequest Level 2», о выполнении междоменных HTTP-запросов и о прикладном интерфейсе

EventSource

, определяемом спецификацией «Server-Sent Events».

• В главе 20 был описан прикладной интерфейс

WebStorage

и кэш приложений для автономных веб-приложений.