Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2: Створення HTML елементів на льоту, використовуючи JavaScript
- Серія контенту:
- Цей контент є частиною серії: Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2
- Малюнок 1. Рівень світової безграмотності по роках
- Малюнок 2. Рівень безграмотності в Європі по роках
- Лістинг 1. Код гістограми
- Гістограми на PHP
- Лістинг 2. Код на PHP для гістограми
- точковий графік
- Малюнок 3. Графік декількох періодів синуса
- Малюнок 4. Графік трохи зміненого рівняння
- Лістинг 3. Код для точкового графіка
- Точкові графіки на PHP
- Лістинг 4. Код точенчного графіка на PHP
- Лістинг 5. Оновлений код на PHP для графіка
- Як далеко може зайти DHTML?
- висновок
- Ресурси для скачування
Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2
Серія контенту:
Цей контент є частиною # з серії # статей: Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2
https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Разработка+web+2.0+приложений+с+помощью+php+и+dhtml,+Часть+2
Слідкуйте за виходом нових статей цієї серії.
Цей контент є частиною серії: Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2
Слідкуйте за виходом нових статей цієї серії.
Малюнок 1. Рівень світової безграмотності по роках
Це не сама цікава інформація, зате підбадьорлива. А якщо вам захочеться подивитися рівень неписьменності в одній Європі? Все просто: в випадаючому меню виберіть Європу.
Малюнок 2. Рівень безграмотності в Європі по роках
На цій діаграмі видно, що рівень неписьменності в Європі набагато нижче світового. У лістингу 1 показаний код, який виводить цю динамічну діаграму.
Лістинг 1. Код гістограми
<Html> <head> <title> Bar Graph Example </ title> <script> var years = [1970, 1980, 1990, 1995, 2000., 2005, 2010 2015]; var rates = []; rates [ 'World'] = [36.6, 30.3, 24.7, 22.4, 20.3, 18.3, 16.5, 15.0]; rates [ 'Africa'] = [72.4, 62.4, 51.2, 45.6, 40.2, 35.2, 30.8, 26.8]; rates [ 'America'] = [14.8, 11.6, 9.0, 7.9, 6.9, 6.0, 5.3, 4.6]; rates [ 'Asia'] = [48.5, 38.7, 30.2, 27.2, 24.4, 21.8, 19.6, 17.7]; rates [ 'Europe'] = [6.4, 4.3, 2.8, 2.2, 1.8, 1.4, 1.1, 0.8]; rates [ 'Oceania'] = [11.1, 8.7, 7.1, 6.6, 6.1, 5.6, 5.3, 5.0]; function plot (region) {var html = ""; html + = "<table width = '100%' cellspacing = '0' cellpadding = '1'>"; for (var year in years) {var val = Math.round (rates [region] [year]); html + = "<tr>"; html + = "<td width = '8%'>" + years [year] + "</ td>"; html + = "<td width = '1%' class = 'bar-start'> </ td>"; html + = "<td width = '92% '>"; html + = "<table width = '100%' cellspacing = '0'"; html + = "cellpadding =" 0 "> <tr>"; html + = "<td width = '" + val + "%' class = 'bar-on'>"; html + = "& nbsp; </ td>"; html + = "<td width = '" + (100-val); html + = "% 'class =' bar-off '> & nbsp; </ td>"; html + = "</ tr> </ table> </ td>"; html + = "<td width = '1%' class = 'bar-start'> </ td>"; html + = "</ tr>"; } Html + = "</ table>"; document.getElementById ( "graph") .innerHTML = html; } </ Script> <style> body {font-family: arial, verdana, sans serif; } .Bar-on {background: blue; } .Bar-off {background: white; } .Bar-start {width: 1px; background: black; } #Graph {width: 600px; } </ Style> </ head> <body onload = "plot ( 'World')"> Region: <select onchange = "plot (this.options [this.selectedIndex] .value)"> <option value = "World "> World </ option> <option value =" Africa "> Africa </ option> <option value =" America "> America </ option> <option value =" Asia "> Asia </ option> <option value = "Europe"> Europe </ option> <option value = "Oceania"> Oceania </ option> </ select> <br/> <br/> Rates of illiteracy (larger is worse): <br/> <br / > <div id = "graph"> </ div> </ body> </ html>Почнемо з пустого тега <div> і значенням ID - "graph". Атрибут onload тега <body> повідомляє браузеру викликати функцію plot, коли завантажується сторінка. З функції plot починається все найцікавіше.
Спочатку функція створює порожній рядок. Потім вона будує діаграму, додаючи в рядок теги <table>, <tr> і <td>. Далі функція додає атрибут innerHTML до тегу graph <div>, і створюється новий документ HTML.
Сам по собі граф - це таблиця з чотирма колонками: роки, маленька вертикальна смужка, смуги діаграми і ще одна вертикальна смужка. Усередині кожного рядка в колонці смуг є ще одна таблиця. Ця внутрішня таблиця має два відділення: синя і біла. Відсоток неписьменності становить довжину синій смужки, а довжина білої виходить, якщо ми з 100 віднімемо вихідні відсотки. В результаті отримаємо просту гистограмму в HTML без малюнків.
Меню, що випадає регіону управляється атрибутом onchange, який викликається кожен раз, коли обраний новий об'єкт. І тоді запускається метод plot з обраним поточному значенням і діаграма оновлюється.
Це дуже сумісний код. Використання атрибута innerHTML, який може замінюватися такими методами DOM, як createElement і appendChild, сумісний з усіма сучасними браузерами.
Гістограми на PHP
Щоб використовувати PHP для гістограм, ми розглянемо в цій статті, як вибирати дані з коду PHP з сервера і інтегрувати їх в динамічний HTML (DHTML) JavaScript. Код на PHP для гістограми показаний в лістингу 2.
Лістинг 2. Код на PHP для гістограми
<? Php $ years = array (1970, 1980, 1990, 1995, 2000., 2005, 2010 2015); $ Countries = array (); $ Countries [ "World"] = array (36.6, 30.3, 24.7, 22.4, 20.3, 18.3, 16.5, 15.0); $ Countries [ "Africa"] = array (72.4, 62.4, 51.2, 45.6, 40.2, 35.2, 30.8, 26.8); $ Countries [ "America"] = array (14.8, 11.6, 9.0, 7.9, 6.9, 6.0, 5.3, 4.6); $ Countries [ "Asia"] = array (48.5, 38.7, 30.2, 27.2, 24.4, 21.8, 19.6, 17.7); $ Countries [ "Europe"] = array (6.4, 4.3, 2.8, 2.2, 1.8, 1.4, 1.1, 0.8); $ Countries [ "Oceania"] = array (11.1, 8.7, 7.1, 6.6, 6.1, 5.6, 5.3, 5.0); ?> <Html> <head> <title> Bar Graph Example </ title> <script> var years = [<? Php echo (join ( ",", $ years)); ?>]; var rates = []; <? Php foreach ($ countries as $ name => $ values) {?> Rates [ '<? Php echo ($ name)?>'] = [<? Php echo (join ( ",", $ values)) ; ?>]; <? Php}?> Function plot (region) {var html = ""; html + = "<table width = '100%' cellspacing = '0' cellpadding = '1'>"; for (var year in years) {var val = Math.round (rates [region] [year]); html + = "<tr>"; html + = "<td width = '8%'>" + years [year] + "</ td>"; html + = "<td width = '1%' class = 'bar-start'> </ td>"; html + = "<td width = '92% '>"; html + = "<table width = '100%' cellspacing = '0' cellpadding =" 0 "> <tr>"; html + = "<td width = '" + val + "%' class = 'bar-on'> & nbsp; </ td>"; html + = "<td width = '" + (100-val) + "%' class = 'bar-off'> & nbsp; </ td>"; html + = "</ tr> </ table> </ td>"; html + = "<td width = '1%' class = 'bar-start'> </ td>"; html + = "</ tr>"; } Html + = "</ table>"; document.getElementById ( "graph") .innerHTML = html; } </ Script> <style> body {font-family: arial, verdana, sans serif; } .Bar-on {background: blue; } .Bar-off {background: white; } .Bar-start {width: 1px; background: black; } #Graph {width: 600px; } </ Style> </ head> <body onload = "plot ( 'World')"> Region: <select onchange = "plot (this.options [this.selectedIndex] .value)"> <? Php foreach ($ countries as $ name => $ values) {?> <option value = "<? php echo ($ name)?>"> <? php echo ($ name)?> </ option> <? php}?> < / select> <br/> <br/> Rates of illiteracy (larger is worse): <br/> <br/> <div id = "graph"> </ div> </ body> </ html>На початку файлу розташовані масиви years і countries, в них перераховані роки і список країн з рівнем неписьменності. Тепер PHP створює три DHTML коду. Перший заповнює масив years в JavaScript, другий заповнює rates, а третій встановлює відповідність між тегом <select> і назвами країн.
точковий графік
Створення нових документів HTML на льоту - основа DHTML. Як варіант можна створити рядок і встановити теги HTML для внутрішніх елементів на сторінці. Цей приклад показує другий метод, який використовує в якості прикладу точковий графік. На малюнку 3 показаний графік простого рівняння.
Малюнок 3. Графік декількох періодів синуса
Ви можете змінити рівняння і натиснути кнопку Try It! , Щоб оновити графік, як показано на малюнку 4.
Малюнок 4. Графік трохи зміненого рівняння
І все це не звертаючись до PHP-сервера. Цей приклад взагалі не використовує сервер - ви просто створюєте новий HTML-файл і починаєте писати HTML код. Код для графіка показаний в лістингу 3.
Лістинг 3. Код для точкового графіка
<Html> <head> <title> Dynamic Graphing Example </ title> <style type = "text / css"> body {font-family: arial, verdana, sans serif; } #Graphdiv {height: 500px; width: 500px; border: 1px solid black; position: relative; } </ Style> <script> function drawgraph () {var g = document.getElementById ( "graphdiv"); var eq = document.getElementById ( "eq") .value; var dx = []; var dy = []; var sx = 10000; var ex = -10000; var sy = 10000; var ey = -10000; for (var i = 0; i <100; i ++) {var x = i / 100; var y = eval (eq); if (y> ey) ey = y; if (y <sy) sy = y; if (x> ex) ex = x; if (x <sx) sx = x; dx.push (x); dy.push (y); } Var gwidth = 500; var gheight = 500; var imgwidth = 100; var imgheight = 100; var fx = (gwidth- (imgwidth / 2)) / (ex-sx); var fy = ((gheight- (imgheight / 2)) / 2) / (ey-sy); g.innerHTML = ""; for (i = 0; i <dx.length; i ++) {var x = (dx [i] * fx); var y = ((gheight- (imgheight / 2)) / 2) + (dy [i] * fy); var img = document.createElement ( "img"); img.src = "ball.gif"; img.style.position = "absolute"; img.style.top = y + "px"; img.style.left = x + "px"; g.appendChild (img); }} </ Script> </ head> <body onload = "drawgraph ()"> Equation: <input type = "text" id = "eq" value = "Math.sin (x * 32)" /> <button onclick = "drawgraph ()"> Try It! </ button> <br/> <br/> <div id = "graphdiv"> </ div> </ body> </ html>Основна частина коду міститься в функції JavaScript drawgraph. Ця функція створює два масиви чисел - один для значень x, другий для значень y. Значення осі x пробігають від 0 до 1; а значення осі y виходять обчисленням рівняння для заданого значення x.
Так як дані виходять з рівняння, код містить максимальні і мінімальні значення для кожної осі, потім дані автоматично масштабуються для зручного розташування на сторінці.
Щоб підключити малюнки до графіку, ми скористаємося новою технікою: Використовуємо змінну document.createElement для створення тега <img>, потім застосовуємо appendChild, щоб додати щойно створений об'єкт img до об'єкту графіка. Застосовуючи цю техніку зручніше встановлювати значення атрибута innerHTML, використовуючи рядок, тому що код зручніше читати і зберігати - і вам не треба турбуватися про проблему кодування рядка.
Техніка використання createElement сумісна зі специфікаціями World Wide Web Consortium (W3C) Document Object Model (DOM) (Об'єктна модель документів) і є найкращим способом динамічного створення елементів HTML.
Точкові графіки на PHP
Приклад точкового графіка замкнутий. PHP код покриває точковий графік як компонент. Код для компонента показаний в лістингу 4.
Лістинг 4. Код точенчного графіка на PHP
<? Php function graph_header () {?> <Style type = "text / css"> body {font-family: arial, verdana, sans serif; } #Graphdiv {height: 500px; width: 500px; border: 1px solid black; position: relative; } </ Style> <script> function drawgraph () {var g = document.getElementById ( "graphdiv"); var eq = document.getElementById ( "eq") .value; var dx = []; var dy = []; var sx = 10000; var ex = -10000; var sy = 10000; var ey = -10000; for (var i = 0; i <100; i ++) {var x = i / 100; var y = eval (eq); if (y> ey) ey = y; if (y <sy) sy = y; if (x> ex) ex = x; if (x <sx) sx = x; dx.push (x); dy.push (y); } Var gwidth = 500; var gheight = 500; var imgwidth = 100; var imgheight = 100; var fx = (gwidth- (imgwidth / 2)) / (ex-sx); var fy = ((gheight- (imgheight / 2)) / 2) / (ey-sy); g.innerHTML = ""; for (i = 0; i <dx.length; i ++) {var x = (dx [i] * fx); var y = ((gheight- (imgheight / 2)) / 2) + (dy [i] * fy); var img = document.createElement ( "img"); img.src = "ball.gif"; img.style.position = "absolute"; img.style.top = y + "px"; img.style.left = x + "px"; g.appendChild (img); }} </ Script> <? Php} function graph_place () {?> </ Head> <div id = "graphdiv"> </ div> <? Php}?>Цей код визначає дві функції: graph_header і graph_place. Функція graph_header повинна викликатися в заголовку документа, а graph_place буде викликана там, де ви захочете розташувати графік. У лістингу 5 показаний код для оновленої сторінки з графіком.
Лістинг 5. Оновлений код на PHP для графіка
<? Php require_once ( "graph_component.php"); ?> <Html> <head> <title> Dynamic Graphing Example </ title> <? Php graph_header (); ?> </ Head> <body onload = "drawgraph ()"> Equation: <input type = "text" id = "eq" value = "Math.sin (x * 32)" /> <button onclick = "drawgraph () "> Try It! </ button> <br/> <br/> <? php graph_place (); ?> </ Body> </ html>Це набагато простіше початкового варіанта сторінки. Ви включаєте код для компонента. Потім викликаєте функцію graph_header, щоб додати JavaScript і CSS. Нарешті, викликаєте функцію graph_place там, де хочете розмістити граф на сторінці.
Як далеко може зайти DHTML?
Зовсім не складно отримати картинку в потужному і простому коді на JavaScript. Але тепер питання не в тому, як мало можна загорнути в конверт, а в тому, як далеко його можна проштовхнути. Карти Google (див. ресурси ) - це відмінний приклад програми на DHTML, яке не тільки корисно на сайті, але також може бути інтегровано в будь-яку інтернет-сторінку, як невеликий JavaScript. Але Google на цьому не зупинився: він створив пошту Gmail (див. ресурси ), Де активно використовує DHTML для створення простого в обігу поштового клієнта прямо в браузері. (Можливо, вам не вдасться так далеко просунути вашу програму на JavaScript, але приємно подивитися, що може статися, якщо б у вас був час.)
Кожен програміст на DHTML повинен подивитися таку технологію, як Asynchronous JavaScript and XML (Ajax). Ajax додає можливість браузерам відсунути інтернет-запити на задній план. Це означає, що ваш додаток на DHTML може викликати додаток на PHP, не вимагаючи оновлення сторінки. Сторінка може використовувати ці дані для оновлення представленої інформації - і все це не залишаючи затишної сторінки, на яку зайшов користувач. (Див. ресурси для посилань на статті та керівництва по Ajax.)
висновок
Попередня стаття цієї серії " jsp?search_by=devise+web+2.0+applications+php+dhtml> Розробка Web 2.0 додатків за допомогою PHP і DHTML "Починалася з модного слова Web 2.0. Інша модне вираз - розширені клієнтські програми (rich client applications). Обидва вони означають класні web-додатки. Існує безліч технологій для створення розширених інтренет-додатків (rich Internet applications). Laszlo і MXML значно спростили створення Flash, а Microsoft® взяв кілька ідей від Vista. Але DHTML намагається створювати розширені інтренет-додатки, тому що ви зможете створювати їх за допомогою технологій, які вже освоїли, як наприклад, PHP.
У цій статті показані кілька методів збагатити ваш досвід простими CSS і JavaScript. Ви можете зробити те ж саме з додатками, над якими зараз працюєте - просто відкрийте тег <script> і насолоджуйтеся.
Ресурси для скачування
Схожі теми
- оригінал статті Devise Web 2.0 applications with PHP and DHTML, Part 2: Use JavaScript to create HTML elements on the fly .
- PHP.net - точка відправлення для всього, що пов'язано з PHP.
- Знайти підказки з написання клієнтської сторони можна в блозі Ajaxian .
- Ajax Freaks - це ще один хороший сайт з описом клієнта.
- На сайті Web Reference ви знайдете відмінні статті та посилання на матеріали, присвячені питанням сумісності браузерів.
- Dynamic HTML: The Definitive Reference від О'Реллі - найкраща книга по динамічному HTML.
- Інститут Статистики Юнеско має інформацію про світовий рівень безграмотності.
- карти Google - це прекрасна демонстрація DHTML в дії, з їх допомогою ви зможете знайти своє місце розташування на земній кулі.
- Подивіться динамічну пошту на Gmail і Laszlo Mail .
- Прочитайте статтю " A cross-browser DHTML table "Про те, як створювати такі cross-browser таблиці за допомогою DHTML і JavaScript, які зможуть виконувати ті ж функції, що і компоненти таблиці, написаної на Java.
- IBM developerWorks пропонує безліч статей і посібників з jsp?search_by=Ajax> Ajax , Включаючи " Mastering Ajax, Part 1: Introduction to Ajax "І" Using Ajax with PHP and Sajax . "
- Щоб дізнатися більше про PHP, відвідайте сайт IBM developerWorks Проекти на PHP .
- Корисну технічну інформацію, інструментарії і поновлення проектів ви знайдете в зоні відкритого коду .
- використовуйте пробне програмне забезпечення від IBM при створенні своїх наступних проектів.
Підпишіть мене на повідомлення до коментарів
Jsp?Але як створювати нові документи HTML на льоту?
Як графічно зображати дані і використовувати ті ж функції?
А якщо вам захочеться подивитися рівень неписьменності в одній Європі?
Gt; <Html> <head> <title> Bar Graph Example </ title> <script> var years = [<?
Php echo (join ( ",", $ years)); ?
Gt;]; var rates = []; <?
Php foreach ($ countries as $ name => $ values) {?
Gt; Rates [ '<?