<
  • Главная
Статьи

Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2: Створення HTML елементів на льоту, використовуючи JavaScript

  1. Серія контенту:
  2. Цей контент є частиною серії: Розробка Web 2.0 додатків за допомогою PHP і DHTML, Частина 2
  3. Малюнок 1. Рівень світової безграмотності по роках
  4. Малюнок 2. Рівень безграмотності в Європі по роках
  5. Лістинг 1. Код гістограми
  6. Гістограми на PHP
  7. Лістинг 2. Код на PHP для гістограми
  8. точковий графік
  9. Малюнок 3. Графік декількох періодів синуса
  10. Малюнок 4. Графік трохи зміненого рівняння
  11. Лістинг 3. Код для точкового графіка
  12. Точкові графіки на PHP
  13. Лістинг 4. Код точенчного графіка на PHP
  14. Лістинг 5. Оновлений код на PHP для графіка
  15. Як далеко може зайти DHTML?
  16. висновок
  17. Ресурси для скачування

Розробка 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

Слідкуйте за виходом нових статей цієї серії.

В першій частині ми показали, як переміщати, ховати і відображати вміст web-сторінки. Але як створювати нові документи HTML на льоту? Як графічно зображати дані і використовувати ті ж функції? На малюнку 1 показана діаграма світового рівня безграмотності (дані надані Юнеско; см. ресурси ).

Малюнок 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); ?&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 [ '<? 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 [ '<?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью