Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00042 006330 12422455 na godz. na dobę w sumie
PHP i HTML. Tworzenie dynamicznych stron WWW - ebook/pdf
PHP i HTML. Tworzenie dynamicznych stron WWW - ebook/pdf
Autor: Liczba stron: 208
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4639-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook (-60%), audiobook).

W prasie codziennej i internecie pełno jest ogłoszeń z ofertami pracy dla programistów. Duża ich część jest skierowana do osób profesjonalnie zajmujących się tworzeniem i utrzymywaniem serwisów WWW. Nic dziwnego, bowiem technologie internetowe przeżywają obecnie prawdziwy boom, coraz więcej ludzi ma dostęp do sieci i mają oni coraz większe wymagania wobec tego, co w niej znajdują. Najbardziej popularnymi narzędziami używanymi do tworzenia serwisów WWW od dłuższego już czasu są - i pozostaną jeszcze bardzo długo - języki PHP i HTML. Standardem jest też zastosowanie języka JavaScript, kaskadowych arkuszy stylów i technologii AJAX. Od czego jednak należy rozpocząć naukę?

Jeśli chciałbyś zacząć projektować atrakcyjne serwisy WWW i szybko dołączyć do grona najlepszych profesjonalistów w tej dziedzinie, sięgnij po książkę 'PHP i HTML. Tworzenie dynamicznych stron WWW '. Znajdziesz w niej przegląd najbardziej popularnych technik i nowoczesnych narzędzi, które pozwolą Ci odnaleźć się w skomplikowanym świecie technologii internetowych. Co ważniejsze, uda Ci się to bez konieczności wertowania grubych annałów informatycznych i przekopywania się przez niezrozumiałe dla przeciętnego człowieka specyfikacje techniczne. Książka ta ma szanse zastąpić kilka innych podręczników poświęconych tworzeniu serwisów WWW, a praktyczny sposób prezentacji wiedzy stanowi jeden z jej największych atutów. Lektura nie wymaga ukończenia wyższych studiów informatycznych, ponieważ zawarte w dodatkach podstawy umożliwią rozpoczęcie programowania nawet początkującym twórcom.

Sięgnij do kompetentnego źródła wiedzy o tworzeniu dynamicznych serwisów WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tworzenie dynamicznych stron WWW W prasie codziennej i internecie pełno jest ogłoszeń z ofertami pracy W prasie codziennej i internecie pełno jest ogłoszeń z ofertami pracy dla programi- stów. Duża ich część jest skierowana do osób profesjonalnie zajmujących się tworze- niem i utrzymywaniem serwisów WWW. Nic dziwnego, technologie internetowe prze- żywają bowiem obecnie prawdziwy boom, coraz więcej ludzi ma dostęp do sieci i mają oni coraz większe wymagania wobec tego, co w niej znajdują. Najbardziej popularnymi narzędziami używanymi do tworzenia serwisów WWW od dłuższego już czasu są — i pozostaną jeszcze bardzo długo — języki PHP i HTML. Standardem jest też zastoso- wanie języka JavaScript, kaskadowych arkuszy stylów i technologii AJAX. Od czego jednak należy rozpocząć naukę? Jeśli chciałbyś zacząć projektować atrakcyjne serwisy WWW i szybko dołączyć do grona najlepszych profesjonalistów w tej dziedzinie, sięgnij po książkę „PHP i HTML. Tworze- „PHP i HTML. Tworze- nie dynamicznych stron WWW” nie dynamicznych stron WWW”. Znajdziesz w niej przegląd najbardziej popularnych technik i nowoczesnych narzędzi, które pozwolą Ci odnaleźć się w skomplikowanym świecie technologii internetowych. Co ważniejsze, uda Ci się to bez konieczności wer- towania grubych annałów informatycznych i przekopywania się przez niezrozumiałe dla przeciętnego człowieka specyfikacje techniczne. Książka ta ma szanse zastąpić kil- ka innych podręczników poświęconych tworzeniu serwisów WWW, a praktyczny spo- sób prezentacji wiedzy stanowi jeden z jej największych atutów. Lektura nie wymaga ukończenia wyższych studiów informatycznych, ponieważ zawarte w dodatkach pod- stawy umożliwią rozpoczęcie programowania nawet początkującym twórcom. • Projektowanie serwisów WWW • Korzystanie z języków PHP, XML i HTML • Możliwości języka JavaScript i technologii DHTML • Podstawy technologii AJAX • Używanie kaskadowych arkuszy stylów • Praktyczne zastosowania technologii internetowych Sięgnij do kompetentnego źródła wiedzy o tworzeniu dynamicznych serwisów WWW! Sięgnij do kompetentnego źródła wiedzy o tworzeniu dynamicznych serwisów WWW! Cena: 39,00 zł 5413 /Jacek Ross i T w o r z e n e d y n a m i c z n y c h s t r o n W W W / J a c e k R o s s Rozpocznij naukę tworzenia serwisów WWW już dziś Poznaj najpopularniejsze rozwiązania stosowane w sieci Dołącz do grupy osób najczęściej poszukiwanych na rynku pracy PHTDYN.indd 1 PHTDYN.indd 1 21-06-10 13:40:56 21-06-10 13:40:56 PHP i HTML. Tworzenie dynamicznych stron WWW Autor: Jacek Ross ISBN: 978-83-246-2597-0 Format: 158235, stron: 208 • Rozpocznij naukê tworzenia serwisów WWW ju¿ dziœ • Poznaj najpopularniejsze rozwi¹zania stosowane w sieci • Do³¹cz do grupy osób najczêœciej poszukiwanych na rynku pracy W prasie codziennej i internecie pe³no jest og³oszeñ z ofertami pracy dla programistów. Du¿a ich czêœæ jest skierowana do osób profesjonalnie zajmuj¹cych siê tworzeniem i utrzymywaniem serwisów WWW. Nic dziwnego, bowiem technologie internetowe prze¿ywaj¹ obecnie prawdziwy boom, coraz wiêcej ludzi ma dostêp do sieci i maj¹ oni coraz wiêksze wymagania wobec tego, co w niej znajduj¹. Najbardziej popularnymi narzêdziami u¿ywanymi do tworzenia serwisów WWW od d³u¿szego ju¿ czasu s¹ – i pozostan¹ jeszcze bardzo d³ugo – jêzyki PHP i HTML. Standardem jest te¿ zastosowanie jêzyka JavaScript, kaskadowych arkuszy stylów i technologii AJAX. Od czego jednak nale¿y rozpocz¹æ naukê? Jeœli chcia³byœ zacz¹æ projektowaæ atrakcyjne serwisy WWW i szybko do³¹czyæ do grona najlepszych profesjonalistów w tej dziedzinie, siêgnij po ksi¹¿kê „PHP i HTML. Tworzenie dynamicznych stron WWW”. Znajdziesz w niej przegl¹d najbardziej popularnych technik i nowoczesnych narzêdzi, które pozwol¹ Ci odnaleŸæ siê w skomplikowanym œwiecie technologii internetowych. Co wa¿niejsze, uda Ci siê to bez koniecznoœci wertowania grubych anna³ów informatycznych i przekopywania siê przez niezrozumia³e dla przeciêtnego cz³owieka specyfikacje techniczne. Ksi¹¿ka ta ma szanse zast¹piæ kilka innych podrêczników poœwiêconych tworzeniu serwisów WWW, a praktyczny sposób prezentacji wiedzy stanowi jeden z jej najwiêkszych atutów. Lektura nie wymaga ukoñczenia wy¿szych studiów informatycznych, poniewa¿ zawarte w dodatkach podstawy umo¿liwi¹ rozpoczêcie programowania nawet pocz¹tkuj¹cym twórcom. • Projektowanie serwisów WWW • Korzystanie z jêzyków PHP, XML i HTML • Mo¿liwoœci jêzyka JavaScript i technologii DHTML • Podstawy technologii AJAX • U¿ywanie kaskadowych arkuszy stylów • Praktyczne zastosowania technologii internetowych Siêgnij do kompetentnego Ÿród³a wiedzy o tworzeniu dynamicznych serwisów WWW! Spis treĈci Rozdziaä 1. Wstöp .............................................................................................. 7 Rozdziaä 2. Przykäad aplikacji äñczñcej róĔne technologie .................................... 9 2.1. WstĊp ....................................................................................................................... 9 2.2. Opis aplikacji „Dodaj przepis” ................................................................................ 9 2.3. WewnĊtrzna architektura aplikacji ......................................................................... 12 2.4. Opis najciekawszych fragmentów kodu Ĩródáowego ............................................. 13 ZakoĔczenie .................................................................................................................... 23 Zadania do samodzielnego wykonania ........................................................................... 23 Pytania kontrolne ............................................................................................................ 23 Rozdziaä 3. Projektujemy serwis WWW ............................................................. 25 3.1. WstĊp ..................................................................................................................... 25 3.2. Z czego zbudowany jest serwis WWW? ................................................................ 25 3.3. Projektowanie aplikacji internetowych z biznesowego punktu widzenia ............... 27 3.3.1. Cele ............................................................................................................. 27 3.3.2. Porównanie z konkurencją .......................................................................... 28 3.3.3. Plan dziaáaĔ ................................................................................................ 29 3.3.4. BudĪet ......................................................................................................... 30 3.3.5. Metody kontrolowania postĊpów ................................................................ 31 3.4. Modele aplikacji internetowych — pajĊczyna HTML ........................................... 32 3.5. Modele aplikacji internetowych — HTML z arkuszem stylów ............................. 33 3.6. Modele aplikacji internetowych — klient-serwer .................................................. 34 3.7. Modele aplikacji internetowych — Dynamic HTML (DHTML) ........................... 35 3.8. Modele aplikacji internetowych — trójwarstwowa ............................................... 37 3.9. Modele aplikacji internetowych — trójwarstwowa — ujĊcie drugie ..................... 39 3.10. Modele aplikacji internetowych — wielowarstwowa ............................................ 39 3.11. Etapy projektowania aplikacji — podejĞcie klasyczne .......................................... 40 3.12. Etapy projektowania aplikacji — podejĞcie zwinne .............................................. 41 3.13. Planowanie utrzymania aplikacji ........................................................................... 46 Zadania do samodzielnego wykonania ........................................................................... 47 Pytania kontrolne ............................................................................................................ 47 Rozdziaä 4. Od PHP do HTML ........................................................................... 49 4.1. Pierwszy skrypt ...................................................................................................... 49 4.2. Przeplatanie PHP i HTML. Czego nie robiü, na co uwaĪaü? ................................. 51 4.3. Struktura skryptów ................................................................................................. 59 4 PHP i HTML. Tworzenie dynamicznych stron WWW Rozdziaä 5. 4.4. UĪycie szablonów .................................................................................................. 62 4.5. ObiektowoĞü w PHP — projektowanie obiektowe ................................................ 66 4.6. ObiektowoĞü w PHP — praktyczne przykáady ...................................................... 72 4.6.1. Przykáad 1. Odwzorowanie modelu danych ................................................ 72 4.6.2. Przykáad 2. Odwzorowanie trójwarstwowoĞci ............................................ 74 4.6.3. Przykáad 3. Uniwersalne przetwarzanie danych ......................................... 77 4.7. Typy danych w PHP .............................................................................................. 77 4.8. Generowanie w PHP plików innych niĪ HTML .................................................... 81 4.9. BezpieczeĔstwo aplikacji PHP ............................................................................... 84 4.9.1. Obsáuga danych z zewnątrz ........................................................................ 84 4.9.2. Przekazywanie danych miĊdzy skryptami .................................................. 86 4.9.3. Niebezpieczne konstrukcje jĊzyka .............................................................. 87 4.9.4. BezpieczeĔstwo systemu plików ................................................................ 88 4.9.5. Cross-Site Scripting .................................................................................... 88 4.9.6. Wstrzykiwanie kodu SQL ........................................................................... 90 4.9.7. Wstrzykiwanie poleceĔ systemowych (shell injection) .............................. 97 4.9.8. Cross-Site Request Forgery ........................................................................ 97 4.9.9. PrzejĊcie kontroli nad sesją (session fixation) ............................................ 99 4.9.10.Session poisoning ..................................................................................... 103 4.9.11.Ataki typu DOS i DDOS .......................................................................... 112 Zadania do samodzielnego wykonania ......................................................................... 114 Pytania kontrolne .......................................................................................................... 115 JavaScript i DHTML ...................................................................... 119 5.1. Skrypty JavaScript, ich ulokowanie w dokumencie ............................................. 119 5.2. Modyfikowanie dokumentu HTML przez JavaScript .......................................... 121 5.3. Obsáuga zdarzeĔ w JavaScript ............................................................................. 124 5.4. Podmiana fragmentów dokumentu ...................................................................... 126 5.5. Podmiana stylów CSS .......................................................................................... 127 5.6. Optymalizacja dziaáania skryptów JavaScript ...................................................... 128 Zadania do samodzielnego wykonania ......................................................................... 129 Pytania kontrolne .......................................................................................................... 129 Rozdziaä 6. Zastosowanie AJAX ..................................................................... 131 6.1. Czym jest technologia AJAX? ............................................................................. 131 6.2. Przykáadowy program .......................................................................................... 132 6.3. WiĊcej o XMLHttpRequest ................................................................................. 133 Zadania do samodzielnego wykonania ......................................................................... 135 Pytania kontrolne .......................................................................................................... 135 Rozdziaä 7. Od XML-a do HTML-a .................................................................... 137 7.1. Czym jest XML i po co go stosowaü? ................................................................. 137 7.2. Metody przetwarzania XML-a w aplikacjach sieciowych ................................... 139 7.3. XML w aplikacjach JavaScript ............................................................................ 144 Zadania do samodzielnego wykonania ......................................................................... 145 Pytania kontrolne .......................................................................................................... 146 Rozdziaä 8. Kaskadowe arkusze stylów (CSS) ................................................. 149 8.1. Czym jest CSS i po co go stosowaü? ................................................................... 149 8.2. Skáadnia CSS ....................................................................................................... 150 8.3. CSS a PHP ........................................................................................................... 152 8.4. CSS a JavaScript .................................................................................................. 152 Zadania do samodzielnego wykonania ......................................................................... 153 Pytania kontrolne .......................................................................................................... 154 Spis treĈci 5 Dodatki — wprowadzenie ............................................................. 155 Dodatek A Podstawy HTML ........................................................................... 157 A.1. Co to jest HTML? Podstawowe wiadomoĞci ....................................................... 157 A.2. Grafika ................................................................................................................. 158 A.3. UĪycie atrybutów, znacznik A ............................................................................. 159 A.4. Tabelki ................................................................................................................. 161 A.5. Formularze ........................................................................................................... 164 A.6. Inne znaczniki HTML .......................................................................................... 166 A.7. Dokument HTML — pisaü rĊcznie czy korzystaü z edytorów wizualnych? ........ 167 Zadania do samodzielnego wykonania ......................................................................... 167 Pytania kontrolne .......................................................................................................... 168 Dodatek B Podstawy programowania w jözyku PHP ........................................ 171 B.1. WstĊp ................................................................................................................... 171 B.2. Podstawy .............................................................................................................. 171 B.3. Zmienne i operatory ............................................................................................. 172 B.4. Instrukcje warunkowe i pĊtle ............................................................................... 174 B.4.1. Instrukcje warunkowe if-else .................................................................... 175 B.4.2. Instrukcje warunkowe switch ................................................................... 176 B.4.3. PĊtle typu for ............................................................................................ 177 B.4.4. PĊtle typu while ........................................................................................ 178 B.5. Funkcje ................................................................................................................ 179 B.6. Podstawy programowania obiektowego ............................................................... 181 Zadania do samodzielnego wykonania ......................................................................... 181 Pytania kontrolne .......................................................................................................... 181 Odpowiedzi do pytaþ kontrolnych .................................................. 183 Säowniczek pojöè ......................................................................... 191 Skorowidz .................................................................................... 195 Rozdziaä 5. JavaScript i DHTML 5.1. Skrypty JavaScript, ich ulokowanie w dokumencie JavaScript to obecnie najpopularniejszy jĊzyk uĪywany w aplikacjach sieciowych do akcji po stronie klienta. Jest interpretowany przez wszystkie nowoczesne przeglądarki. (Warto przy tym pamiĊtaü, Īe nie identycznie — niestety pewne techniki dostĊpne są tylko na niektórych przeglądarkach, a inne interpretowane inaczej; przenoĞnoĞü jest nadal przekleĔstwem JS). Skrypty JS mogą i w przypadku wiĊkszych fragmentów powinny byü umieszczane w osobnych plikach. W dokumencie HTML zawsze jednak musi siĊ znaleĨü odwoáanie do skryptów, których chcesz uĪyü. Podstawowy sposób, w jaki moĪesz to uczyniü, polega na wstawieniu znacznika SCRIPT do znacznika HEAD. Plik Simple.html: HTML HEAD SCRIPT type= text/javascript language= javascript !-- alert( hello ); //-- /SCRIPT /HEAD /HTML Skrypt wewnątrz znaczników komentarza ( !-- i -- ) moĪna dodaü w celu zgodnoĞci ze starymi przeglądarkami, które nie obsáugiwaáy JavaScript i dziĊki temu zabiegowi po prostu zignorują skrypt. JeĞli zakáadasz, Īe Twoja strona musi byü uruchamiana na nowszej przeglądarce, to moĪesz opuĞciü ten fragment. JeĞli chcesz wstawiü skrypt z innego dokumentu, powinieneĞ podaü atrybut src i wska- zaü nim lokalizacjĊ skryptu, a zawartoĞü znacznika SCRIPT pozostawiü pustą: script src= ../js/admin.produkty.js language= javascript /script 120 PHP i HTML. Tworzenie dynamicznych stron WWW Dawniej starsze wersje przeglądarek tolerowaáy skrypty wyáącznie wewnątrz znacz- nika HEAD. Ograniczaáo to moĪliwoĞci, nie pozwalając na osiągniĊcie wielu interesują- cych efektów. Obecnie moĪna umieszczaü je w zasadzie w dowolnym miejscu doku- mentu. NaleĪy przy tym pamiĊtaü, Īe jest on przetwarzany sekwencyjnie, co oznacza, Īe kod znajdujący siĊ w górnej czĊĞci dokumentu zostanie zinterpretowany najpierw, a ten znajdujący siĊ pod koniec dopiero w drugiej kolejnoĞci. W szczególnym przypadku, jeĞli strona nie zaáaduje siĊ do koĔca (z powodu báĊdu lub anulowania áadowania przez uĪytkownika), czĊĞü skryptów moĪe nie zostaü wykonana. Skrypty JS mogą byü umieszczone takĪe w atrybutach okreĞlających zdarzenia związane ze znacznikami. W dalszej czĊĞci rozdziaáu zostanie to opisane dokáadniej. Tutaj zapre- zentujĊ, jak wygląda taki skrypt na przykáadzie uĪytecznego zdarzenia onLoad znacz- nika BODY. Kod JS umieszczony w obsáudze tego zdarzenia zostanie wykonany, gdy caáa strona bĊdzie finalnie zaáadowana. BODY onLoad= javascript: location.href= inna_strona.php PowyĪszy przykáad pokazuje, jak za pomocą JavaScript wykonaü przekierowanie na inną stronĊ. Po zaáadowaniu strony do koĔca wykonany zostanie kod location.href= ´ inna_strona.php, który spowoduje, Īe przeglądarka rozpocznie áadowanie adresu inna_strona.php. (Wadą takiego przekierowania jest to, Īe uĪytkownik przez chwilĊ bĊdzie widziaá zawartoĞü strony, wiĊc jeĞli chce siĊ tego uniknąü, to przekierowanie trzeba zrobiü inaczej). Jak juĪ napisano — róĪne przeglądarki róĪnie interpretują kod JavaScript, mają takĪe inny zestaw klas opisujący dokument. Pisząc zaawansowane skrypty w tym jĊzyku, prĊdzej czy póĨniej na pewno zostaniesz zmuszony do wykrywania rodzaju przeglą- darki i pisania dwóch wersji niektórych fragmentów kodu. Gáówna linia podziaáu bie- gnie miĊdzy Internet Explorerem a Firefoksem. CzĊĞü rzadszych przeglądarek moĪe czasem wymagaü wáasnych dostosowaĔ, najczĊĞciej jednak albo ich udziaá w rynku jest tak znikomy, Īe moĪna je pominąü, albo zachowują siĊ identycznie jak jedna z dwóch wymienionych. (Przeglądarki oparte na jądrze Gecko bĊdą zachowywaü siĊ jak Fire- fox, z kolei wiele programów ma wbudowane wáasne wewnĊtrzne przeglądarki, które poprzez technologiĊ COM oparte są na zainstalowanym w systemie IE. Istnieją takĪe modyfikacje tej ostatniej, które pod wzglĊdem JS równieĪ zachowują z nią zgodnoĞü). Firefox odziedziczyá wiele cech po przeglądarce Netscape Navigator, moĪe siĊ jednak zdarzyü, Īe klient korzysta jeszcze z jakiejĞ wyjątkowo starej wersji tej przeglądarki (lub bardzo starej wersji IE), powinieneĞ zatem co najmniej sprawiü, Īeby Twoja strona wyĞwietliáa jakiĞ komunikat báĊdu lub chociaĪ nie zrobiáa nic. Jak wiĊc wykryü, z którą przeglądarką ma siĊ do czynienia? Nie ma sposobów idealnych — moĪna po prostu zapytaü przeglądarkĊ, jak siĊ nazywa, ale ze wzglĊdu na mnogoĞü wersji, odmian i modyfikacji trzeba by uĪyü doĞü skomplikowanego zestawu warunków i nie bĊdzie to ani skuteczne (a jeĞli nie przewidzimy jakiejĞ przeglądarki lub powstaną nowe?), ani eleganckie. Lepiej jest sprawdziü, jakie technologie udostĊpnia bieĪąca przeglądarka. W koĔcu jeĞli potrafi zwróciü takie obiekty, jakie zwraca IE6, nie musi CiĊ obchodziü, co to za program. WaĪne, Īe dziaáa jak IE6 itd. Zwykle podczas takiej weryfikacji spraw- dza siĊ, jak w danej przeglądarce moĪna odwoáaü siĊ do obiektu reprezentującego doku- ment HTML albo zestaw jego znaczników. Oto przykáadowy prosty kod. Rozdziaä 5. i JavaScript i DHTML 121 Plik browser1.html: HTML HEAD SCRIPT type= text/javascript language= javascript var ns6 = document.getElementById !document.all; var ie4 = document.all; if(ie4) alert ( Internet Explorer 4 lub nowszy ); else if(ns6) alert( NN6 lub FireFox ); else alert( Nieznana przeglædarka lub na tyle stara, ľe nie obsđuľy poprawnie naszego ´skryptu ); /SCRIPT /HEAD /HTML PowyĪszy kod opiera siĊ na tym, Īe IE4 i nowsze udostĊpniają zawartoĞü dokumentu poprzez document.all, a Firefox i pochodne nie udostĊpniają takiej wáaĞciwoĞci i naleĪy w nich skorzystaü z innych metod obiektu dokument. ToteĪ wszĊdzie, gdzie wystąpi potrzeba odwoáania siĊ do jednej z tych konstrukcji, trzeba bĊdzie niestety wstawiü instrukcjĊ warunkową. Jako ciekawostkĊ podajĊ jeszcze inny, bardziej rozbudowany przykáad rozpoznawania przeglądarek, który dokonuje dodatkowo rozróĪnienia miĊdzy NN4 a NN6 i nowszymi: HTML HEAD SCRIPT type= text/javascript language= javascript var nav4 = document.layers ? true : false; var iex = document.all ? true : false; var nav6 = document.getElementById !document.all ? true : false; var old = ( !( nav4 || iex || nav6 )); /SCRIPT /HEAD /HTML 5.2. Modyfikowanie dokumentu HTML przez JavaScript JavaScript umoĪliwia bardzo daleko idącą kontrolĊ nad dokumentem HTML. W zasa- dzie moĪna dokonaü w nim niemal nieograniczonych zmian, caákowicie modyfikując jego zawartoĞü. MoĪna podmieniaü atrybuty, znaczniki czy fragmenty HTML-a. Oczy- wiĞcie fakt, Īe techniki takie są dozwolone, nie oznacza, Īe moĪna z tym przesadzaü. Nadmiar ingerencji w treĞü dokumentu moĪe spowodowaü, Īe caáoĞü stanie siĊ komplet- nie nieczytelna, a znalezienie w niej báĊdu niemal niemoĪliwe. KaĪdej techniki naleĪy wiĊc uĪywaü z umiarem i wtedy, kiedy naprawdĊ jest potrzebna. Przyjrzyjmy im siĊ. 122 PHP i HTML. Tworzenie dynamicznych stron WWW Najprostszą metodą na zmodyfikowanie dokumentu HTML jest wygenerowanie jego fragmentu w miejscu dziaáania skryptu. Oto przykáad. Plik ala1.html: HTML BODY P Ala ma kota. /P SCRIPT type= text/javascript document.writeln( B To nie jest naprawdú kot Ali. /B ); /SCRIPT P Kot nazywa siú As. /P /BODY /HTML PowyĪszy kod spowoduje wyĞwietlenie siĊ w przeglądarce przykáadowego tekstu (rysunek 5.1). Rysunek 5.1. Zrzut ekranu: wykonanie przykáadu ala1.html Jak widaü, kod JavaScript wstawia fragment HTML-a. Dziaáanie przeglądarki polega na tym, Īe interpretuje on dokument normalnie do napotkania kodu JS, nastĊpnie wyko- nuje go, po czym interpretuje dalej, ale dokument zawiera juĪ w tym miejscu dodat- kowe znaczniki, które przeglądarka traktuje tak, jakby znajdowaáy siĊ w dokumencie od samego początku. Aby lepiej zrozumieü, jak przeglądarka przetwarza kod skryptów, przeanalizuj poniĪszy, nieco bardziej záoĪony przykáad. Plik ala2.html: HTML BODY P Ala ma kota. /P SCRIPT type= text/javascript function NapiszPrawdú() { document.writeln( B To nie jest naprawdú kot Ali. /B ); } /SCRIPT P Kot nazywa siú As. /P SCRIPT NapiszPrawdú(); /SCRIPT P To bardzo mædry kot. /P /BODY /HTML W przeglądarce zostanie wyĞwietlony nastĊpujący ciąg tekstów: Rozdziaä 5. i JavaScript i DHTML 123 Rysunek 5.2. Zrzut ekranu: wykonanie przykáadu ala2.html Nie jest bowiem waĪne miejsce ulokowania kodu, ale miejsce jego faktycznego wyko- nania. Kod funkcji zostaje wykonany w momencie, gdy przeglądarka interpretuje frag- ment dokumentu pomiĊdzy tekstem „Kot nazywa siĊ As” a tekstem „To bardzo mądry kot”, i wáaĞnie w to miejsce wstawiany jest nowy fragment tekstu. Korzystając z obiektu document, masz dostĊp do caáego dokumentu HTML, dziĊki czemu moĪesz dowolnie manipulowaü znacznikami. NaleĪy pamiĊtaü, Īe obiekt ten ma nieco inną postaü i trochĊ inne metody oraz wáaĞciwoĞci w róĪnych przeglądarkach, dlatego czĊsto trzeba bĊdzie pisaü kod warunkowy, co zostaáo omówione w podrozdziale 5.1. Do poszczególnych znaczników najáatwiej bĊdzie dostaü siĊ poprzez identyfikator. Aby nadaü go znacznikowi, naleĪy dodaü mu atrybut id i przypisaü do niego unikatową war- toĞü. Wówczas bardzo áatwo moĪna podmieniü wnĊtrze takiego znacznika. Plik ala3.html: HTML BODY P Ala ma kota. /P P id= imiú_kota Kot nazywa siú As. /P SCRIPT type= text/javascript var ns6=document.getElementById !document.all; var ie4=document.all; var imiú = B Kot nazywa siú Mruczek. /B ; if(ie4) document.all( imiú_kota ).innerHTML = imiú; else document.getElementById( imiú_kota ).innerHTML = imiú; /SCRIPT /BODY /HTML Tutaj istotne jest, Īe znacznik z id= imiú_kota znajduje siĊ wczeĞniej niĪ skrypt. Obiekt document jest bowiem budowany w trakcie interpretacji dokumentu HTML i jeĞli zamieni siĊ te dwa fragmenty, to nie zostanie podmieniony. Przy tym fragmenty wstawione juĪ przez sam kod JS równieĪ są dostĊpne, moĪna to zaobserwowaü, modyfikując powyĪ- szy przykáad. Plik ala4.html: HTML BODY P Ala ma kota. /P P id= imiú_kota Kot nazywa siú As. /P SCRIPT type= text/javascript document.write( p id= po_raz_drugi ddd /p ); var ns6=document.getElementById !document.all; var ie4=document.all; var imiú = B Kot nazywa siú Mruczek. /B ; if(ie4) document.all( imiú_kota ).innerHTML = imiú; 124 PHP i HTML. Tworzenie dynamicznych stron WWW else document.getElementById( imiú_kota ).innerHTML = imiú; if(ie4) document.all( po_raz_drugi ).innerHTML = imiú; else document.getElementById( po_raz_drugi ).innerHTML = imiú; /SCRIPT /BODY /HTML 5.3. Obsäuga zdarzeþ w JavaScript Podczas przeglądania dokumentu HTML uĪytkownik moĪe zainicjowaü wiele czyn- noĞci, takich jak klikniĊcie we fragment dokumentu, przesuniĊcie wskaĨnika myszy itp. Istnieje moĪliwoĞü implementacji funkcji w jĊzyku JavaScript, która zostanie wyko- nana, gdy takie zdarzenie wystąpi. Poza inicjowanymi przez uĪytkownika istnieją zda- rzenia, które pojawiają siĊ samoczynnie, są związane z wewnĊtrzną pracą przeglądarki lub zostaáy zaprogramowane. Przykáadem zdarzenia jest przedstawiony poniĪej kod. Plik events1.html: HTML HEAD SCRIPT type= text/javascript function Funkcja1() { alert( witam ); } /SCRIPT /HEAD BODY onLoad= javascript:Funkcja1() /BODY /HTML Zdarzenie onLoad znacznika BODY jest wywoáywane, kiedy caáy dokument siĊ zaáaduje (wáącznie z ewentualnym áadowaniem plików multimedialnych). Oznacza to, Īe w powyĪszym przypadku funkcja Funkcja1 zostanie wywoáana po tym, jak zaáaduje siĊ caáy dokument. Zamiast wywoáywaü funkcje, moĪna wprowadziü bezpoĞrednio poniĪszy kod. Plik events2.html: HTML HEAD /HEAD BODY onLoad= javascript:alert( witam ) /BODY /HTML Oto lista interesujących zdarzeĔ, które moĪna obsáuĪyü:  onMouseDown, onMouseUp, onMouseOver, onMouseOut — zdarzenia związane z myszką, odpowiednio: wciĞniĊcie klawisza myszy, puszczenie go, przesuniĊcie wskaĨnika ponad elementem, przesuniĊcie wskaĨnika poza obszar elementu.  onKeyDown, onKeyPress, onKeyUp — zdarzenia związane z klawiaturą, odpowiednio: naciĞniĊcie i przytrzymanie klawisza, naciĞniĊcie krótkotrwaáe i puszczenie klawisza po wczeĞniejszym naciĞniĊciu. Rozdziaä 5. i JavaScript i DHTML 125  onResize — zmiana rozmiaru okna.  onMove — poruszenie oknem.  onSelect — wybranie elementu (np. przycisku na formularzu).  onSubmit — zdarzenie wywoáywane po zatwierdzeniu (wysáaniu formularza).  onReset — zdarzenie wywoáywane po wyczyszczeniu formularza (przyciskiem reset).  onClick — klikniĊcie w element (dowolny znacznik).  onDblClick — podwójne klikniĊcie w element (dowolny znacznik).  onChange — reakcja na zmianĊ wartoĞci elementu formularza takiego jak pole tekstowe, pole wyboru itp.  onFocus — reakcja na uaktywnienie elementu, np. przycisku.  onError — zdarzenie wywoáywane, gdy áadowanie koĔczy siĊ báĊdem.  onUnload — zdarzenie wywoáywane przy opuszczaniu strony, np. po zamkniĊciu okna przeglądarki. Funkcje obsáugujące zdarzenia moĪna równieĪ podpinaü dynamicznie za pomocą kodu JS. Oto przykáad. Plik events3.html: HTML HEAD SCRIPT type= text/javascript language= javascript var ns6 = document.getElementById !document.all; var ie4 = document.all; function PowiedzWitam() { alert( witam ); } /SCRIPT /HEAD BODY A href= http://helion.pl id= linkHelion Helion /A SCRIPT type= text/javascript var link; if(ie4) link = document.all[ linkHelion ]; else link = document.getElementById( linkHelion ); if(ns6) link.addEventListener( mouseover , function() {PowiedzWitam()}, false); else link.attachEvent( onmouseout , function() {PowiedzWitam()}); /SCRIPT /BODY /HTML Program przykáadowy podpina zdarzenie onmouseout do odnoĞnika — po najechaniu na niego wskaĨnikiem myszki powinien pojawiü siĊ komunikat. Funkcje podpina siĊ 126 PHP i HTML. Tworzenie dynamicznych stron WWW inaczej, w zaleĪnoĞci od tego, jaką przeglądarką dysponuje uĪytkownik. W obydwu przy- padkach najpierw szuka siĊ elementu w drzewie obiektów JavaScript (dokument.all lub dokument.getElementById), a nastĊpnie podpina siĊ do niego anonimową funkcjĊ, która wywoáuje wáaĞciwą funkcjĊ obsáugującą zdarzenie (addEventListener lub attach ´Event). Anonimowa funkcja to po prostu fragment kodu, którego zadaniem jest wywoáanie funkcji — PowiedzWitam. 5.4. Podmiana fragmentów dokumentu JavaScript umoĪliwia szeroką manipulacjĊ zawartoĞcią dokumentu HTML. MoĪna nie- omal dowolnie zmieniaü jego treĞü. Aby tego dokonaü, naleĪy uzyskaü dostĊp do odpo- wiedniego obiektu w drzewie obiektów dokumentu. Istnieje taki dla kaĪdego znacznika HTML w dokumencie. Jednym ze sposobów dotarcia do niego jest uĪycie funkcji docu ´ment.getElementById, co zostaáo pokazane w przykáadach zamieszczonych w poprzed- nich podrozdziaáach. Jako parametru wejĞciowego uĪywa siĊ atrybutu id znacznika. Gdy juĪ ma siĊ odpowiedni obiekt, moĪna wykorzystaü jedną z wáaĞciwoĞci, która jest dostĊpna dla kaĪdego obiektu bĊdącego odpowiednikiem znacznika HTML:  innerHTML — umoĪliwia odczyt lub zmianĊ wnĊtrza znacznika w postaci HTML.  Tylko dla Internet Explorer: outerHTML — umoĪliwia odczyt lub zmianĊ fragmentu HTML stanowiącego zarówno wnĊtrze znacznika, jak i jego samego.  Tylko dla Internet Explorer: innerText — umoĪliwia odczyt lub zmianĊ fragmentu dokumentu HTML stanowiącego wnĊtrze znacznika, ale w postaci prostego tekstu, tj. niezawierającego znaczników. JeĞli przypisaü do tego pola wartoĞü np. DIV tekst /DIV , to znaki oraz zostaną zastąpione znakami specjalnymi i przeglądarka nie wyĞwietli znacznika DIV , a pokaĪe po prostu taki tekst.  Tylko dla Internet Explorer: outerText — podobnie jak w przypadku innerText, lecz obejmuje takĪe tekst stanowiący sam znacznik. Oto przykáad. NaleĪy pamiĊtaü, Īe dla przeglądarki Firefox zadziaáa wyáącznie inner- HTML, pozostaáe trzy funkcje powinny byü zastąpione przez manipulacje na obiektach (usuniĊcie jednego obiektu i wstawienie drugiego, podobnie jak w programie przykáa- dowym pokazanym w rozdziale 2.). Plik test.html: HTML HEAD SCRIPT type= text/javascript function Test() { var element = document.getElementById( jakis_div ); alert( innerHTML: + element.innerHTML); alert( innerText: + element.innerText); alert( outerText: + element.outerText); alert( outerHTML: + element.outerHTML); Rozdziaä 5. i JavaScript i DHTML 127 } /SCRIPT /HEAD BODY DIV id= jakis_div To jest DIV HR P Ala ma kota /P /DIV INPUT type= BUTTON onClick= Test() value= Test / /BODY /HTML Jak juĪ wspomniaáem, podmianĊ fragmentów dokumentu HTML moĪna równieĪ wyko- naü poprzez bezpoĞrednie manipulacje na drzewie obiektów, tzn. poprzez usuwanie pewnych elementów i dodawanie innych. Zostaáo to intensywnie wykorzystane w pro- gramie przykáadowym do rozdziaáu 2. 5.5. Podmiana stylów CSS Za pomocą kodu JavaScript moĪna równieĪ manipulowaü stylami CSS. DziĊki temu uzyskuje siĊ w áatwy sposób wiele ciekawych efektów, w tym zarówno dynamiczną szatĊ graficzną serwisu (zmieniającą siĊ pod wpáywem interakcji uĪytkownika), jak i moĪ- liwoĞü manipulacji np. pojawianiem siĊ pewnych elementów czy ich lokalizacją. Jednym z prostszych sposobów manipulowania stylami jest przygotowanie w arkuszu stylów kilku zestawów wyglądu pewnego elementu i nastĊpnie dynamiczne przeáącza- nie miĊdzy nimi poprzez zmianĊ atrybutu class elementu. Aby tego dokonaü, musisz znaleĨü obiekt odpowiadający znacznikowi i zmieniü wartoĞü pola className. Oto przykáad. Plik KlasyCSS.html: HTML STYLE .bialy { color: white;} .czerwony { color: red;} .zielony { color: green;} /STYLE BODY P id= zmiana Zmieē mój kolor /P INPUT TYPE= BUTTON value= Biađy onClick= javascript: ´document.getElementById( zmiana ).className= bialy / INPUT TYPE= BUTTON value= Czerwony onClick= javascript: ´document.getElementById( zmiana ).className= czerwony / INPUT TYPE= BUTTON value= Zielony onClick= javascript: ´document.getElementById( zmiana ).className= zielony / /BODY /HTML 128 PHP i HTML. Tworzenie dynamicznych stron WWW Zastosowanie powyĪszej techniki pozwala uzyskaü wiele interesujących efektów. Nie trzeba jednak koniecznie uciekaü siĊ do przygotowywania gotowych zestawów klas i podmieniania ich. MoĪna manipulowaü bezpoĞrednio zawartoĞcią stylu. KaĪdy obiekt bĊdący odpowiednikiem znacznika HTML posiada pole style, które jest obiektem odpo- wiadającym stylowi tego elementu zdefiniowanemu w arkuszu CSS lub bezpoĞrednio w dokumencie. Element stylu posiada z kolei pola odpowiadające róĪnym wáaĞciwo- Ğciom CSS, które moĪna modyfikowaü. W efekcie modyfikacji powyĪszego przykáadu, tak aby wykorzystywaá opisaną technikĊ, uzyskasz: HTML BODY P id= zmiana style= color: yellow Zmieē mój kolor /P INPUT TYPE= BUTTON value= Biađy onClick= javascript: ´document.getElementById( zmiana ).style.color= white / INPUT TYPE= BUTTON value= Czerwony onClick= javascript: ´document.getElementById( zmiana ).style.color= red / INPUT TYPE= BUTTON value= Zielony onClick= javascript: ´document.getElementById( zmiana ).style.color= green / /BODY /HTML 5.6. Optymalizacja dziaäania skryptów JavaScript W rozdziale 4. postulowaáem, aby nie oszczĊdzaü rozmiarów skryptów PHP przez skra- canie nazw zmiennych bądĨ funkcji czy teĪ np. przez pomijanie komentarzy. Zaciemniaáo to kod i nie dawaáo praktycznie Īadnych zysków. Niestety nie jest to aĪ takie oczywi- ste w przypadku JavaScript, poniewaĪ im krótszy bĊdzie dokument wysáany do prze- glądarki, tym szybciej zaáaduje ona stronĊ (czas przesyáu danych czĊsto stanowi wąskie gardáo). Interes uĪytkownika i programisty okazuje siĊ wiĊc niestety sprzeczny. Nie- którzy programiĞci z tego powodu rezygnują z pisania komentarzy i zaczynają korzystaü z jednoliterowych nazw zmiennych. Nie jest to jednak dobre rozwiązanie. Co wiĊc moĪna zrobiü? Jednym z rozwiązaĔ jest praca na szerszej wersji kodu, tj. zawierającej komentarze i dáugie nazwy identyfikatorów zmiennych. TuĪ przed wysáaniem na serwer wystarczy tĊ wersjĊ poddaü dziaáaniu specjalnego programu, który nie tylko skraca identyfikatory i usuwa nieproduktywne fragmenty kodu (np. komentarze), ale takĪe potrafi dokonaü ograniczonej kompresji kodu. Jest to dobre rozwiązanie, niestety ma jedną wadĊ: jeĞli juĪ po wysáaniu na serwer w skrypcie objawi siĊ báąd, trudno go bĊdzie naprawiü, dlatego Īe podgląd Ĩródeá skryptu pokaĪe zmodyfikowaną wersjĊ kodu, a nie orygi- nalną. Dlatego lepiej jest do momentu zakoĔczenia prac i testowania serwisu pozostawiü oryginalną wersjĊ, a skompresowaną wysáaü dopiero na serwer produkcyjny dostĊpny dla uĪytkowników. Niezwykle waĪne jest, aby zawsze zachowywaü oryginalną wersjĊ kodu, by móc w kaĪdej chwili dokonaü analizy. Rozdziaä 5. i JavaScript i DHTML 129 Zadania do samodzielnego wykonania 1. Napisz samodzielnie jakiĞ wiĊkszy program w JavaScript. MoĪe to np. byü gra w kóáko i krzyĪyk. 2. Wykorzystując informacje z rozdziaáu 2. oraz 5., spróbuj napisaü funkcje bĊdące odpowiednikami outerHTML i innerText dla przeglądarki Firefox. Pytania kontrolne P5.1. Czy podmieniona za pomocñ kodu JavaScript treĈè HTML jest widoczna w Ēródle dokumentu? a) Tak. b) Nie. c) Tak, ale tylko w programie Internet Explorer. d) Tak, ale tylko w programie Firefox. P5.2. Czy moĔna rozpoznaè, na jakiej przeglñdarce uruchamiany jest kod JavaScript? a) Tak. b) Nie. P5.3. Jakie zdarzenie wywoäywane jest po zatwierdzeniu (wysäaniu) formularza? a) onSelect. b) onSend. c) onSubmit. d) onClick. Tworzenie dynamicznych stron WWW W prasie codziennej i internecie pełno jest ogłoszeń z ofertami pracy W prasie codziennej i internecie pełno jest ogłoszeń z ofertami pracy dla programi- stów. Duża ich część jest skierowana do osób profesjonalnie zajmujących się tworze- niem i utrzymywaniem serwisów WWW. Nic dziwnego, technologie internetowe prze- żywają bowiem obecnie prawdziwy boom, coraz więcej ludzi ma dostęp do sieci i mają oni coraz większe wymagania wobec tego, co w niej znajdują. Najbardziej popularnymi narzędziami używanymi do tworzenia serwisów WWW od dłuższego już czasu są — i pozostaną jeszcze bardzo długo — języki PHP i HTML. Standardem jest też zastoso- wanie języka JavaScript, kaskadowych arkuszy stylów i technologii AJAX. Od czego jednak należy rozpocząć naukę? Jeśli chciałbyś zacząć projektować atrakcyjne serwisy WWW i szybko dołączyć do grona najlepszych profesjonalistów w tej dziedzinie, sięgnij po książkę „PHP i HTML. Tworze- „PHP i HTML. Tworze- nie dynamicznych stron WWW” nie dynamicznych stron WWW”. Znajdziesz w niej przegląd najbardziej popularnych technik i nowoczesnych narzędzi, które pozwolą Ci odnaleźć się w skomplikowanym świecie technologii internetowych. Co ważniejsze, uda Ci się to bez konieczności wer- towania grubych annałów informatycznych i przekopywania się przez niezrozumiałe dla przeciętnego człowieka specyfikacje techniczne. Książka ta ma szanse zastąpić kil- ka innych podręczników poświęconych tworzeniu serwisów WWW, a praktyczny spo- sób prezentacji wiedzy stanowi jeden z jej największych atutów. Lektura nie wymaga ukończenia wyższych studiów informatycznych, ponieważ zawarte w dodatkach pod- stawy umożliwią rozpoczęcie programowania nawet początkującym twórcom. • Projektowanie serwisów WWW • Korzystanie z języków PHP, XML i HTML • Możliwości języka JavaScript i technologii DHTML • Podstawy technologii AJAX • Używanie kaskadowych arkuszy stylów • Praktyczne zastosowania technologii internetowych Sięgnij do kompetentnego źródła wiedzy o tworzeniu dynamicznych serwisów WWW! Sięgnij do kompetentnego źródła wiedzy o tworzeniu dynamicznych serwisów WWW! Cena: 39,00 zł 5413 /Jacek Ross i T w o r z e n e d y n a m i c z n y c h s t r o n W W W / J a c e k R o s s Rozpocznij naukę tworzenia serwisów WWW już dziś Poznaj najpopularniejsze rozwiązania stosowane w sieci Dołącz do grupy osób najczęściej poszukiwanych na rynku pracy PHTDYN.indd 1 PHTDYN.indd 1 21-06-10 13:40:56 21-06-10 13:40:56
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

PHP i HTML. Tworzenie dynamicznych stron WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: