Akademia Górniczo-Hutnicza w Krakowie - AGH University of Krakow
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej
Katedra Biocybernetyki i Inżynierii Biomedycznej
Laboratorium Biocybernetyki, Kognitywistyki i Sztucznej Inteligencji
Przedmiot wprowadzający do świata projektowania, tworzenia i pozycjonowania stron WWW z wykorzystaniem klasycznych i sprawdzonych języków skryptowych: HTML, XHTML, CSS, JavaScript i PHP. Współcześnie informatyka daje możliwość prawie każdemu publikować ciekawe treści oraz prowadzić automatyczną interakcję z użytkownikami komputerów za pośrednictwem Internetu. W celu skorzystania z tych możliwości konieczne jest opanowanie przynajmniej pewnych podstaw, które umożliwiają tworzenie interaktywnych i dynamicznych stron WWW pozwalających na gromadzenie danych o użytkownikach, ich preferencjach, potrzebach oraz wielu innych aspektach istotnych z punktu widzenia twórcy serwisu internetowego lub jego gości.
UWAGA: Na zajęcia z PHP (2. ćwiczenia) niezbędne jest posiadanie konta na serwerze "student" lub innym pozwalającym na uruchamianie skryptów PHP po stronie serwera. Bardzo proszę wszystkich uczestników tych zajęć, żeby przed następnym zjazdem założyli sobie takie konta powiązane równocześnie z kontem pocztowym. Konto wymaga zatwierdzenia i nie można tego zrobić przez weekend! Każdy student AGH posiadający ważną legitymację studencką ma prawo do założenia sobie takiego konta pocztowego i konta WWW. Musi tylko zgłosić to w UCI (Uczelnianym Centrum Informatyki). Konta te będą również potrzebne na zajęcia z SQLa i baz danych, które będą kontynuacją tego przedmiotu.
Strony internetowe mogą być tworzone bezpośrednio przez ich twórcę, korzystając z różnych języków skryptowych, lub mogą być generowane w sposób dynamiczny w zależności od potrzeb. Pierwszy sposób jest prostszy i pozwala na podstawową interakcję z użytkownikiem oraz przekazuje zwykle pewne treści (informacje). Drugi sposób jest bardziej zaawansowany i zwykle powiązany z bazami danych, które umożliwiają wykorzystanie różnych faktów i reguł do automatycznego wygenerowania zawartości stron internetowych. Ten wykład będzie skupiał się przede wszystkim na pierwszym z tych sposobów, aczkolwiek w drugiej części tego wykładu zostaną przedstawione też pewne podstawowe sposoby generowania stron internetowych za pomocą PHP. Istotną częścią tego wykładu będzie skupienie się na podstawowej interakcji z użytkownikiem za pośrednictwem menu, formularzy i innych elementów interaktywnych. Do obsługi formularzy zostaną wykorzystane: JavaScript, wyrażenia regularne i PHP. Poruszone zostaną również zagadnienia pozycjonowania stron internetowych (SEO) oraz publikowania stron internetowych poprzez ich umieszczenie na serwerze oraz nadanie odpowiednich praw dostępu do poszczególnych plików. Umożliwi to również pewną ochronę serwisu internetowego, kontrolę nad nim oraz akcjami użytkowników. Ponadto będzie można zbierać dane o użytkownikach, zapisywać je, a następnie wykorzystywać do dalszej interakcji z użytkownikami. Na ćwiczeniach będzie wykorzystany Pajączek - rodzimy program do tworzenia stron internetowych, który oferuje wszystkie podstawowe funkcje potrzebne webmasterowi. Wersję testową tego programu w wersji standard lub professional można sobie ściągnąć za darmo.
HTML (HyperText Markup Language) – to rozszerzalny hipertekstowy język znaczników wywodzący się z XMLa – języka skryptowego o ogromnych możliwościach. HTML powstał, żeby opisać strukturę informacji zawartych w dokumencie nadając
znaczenie poszczególnym fragmentom tekstu (formując linki, nagłówki, paragrafy, listy, itp.) określając ich styl,rozmieszczenie oraz umożliwiając osadzenie w tekście dodatkowych obiektów, np. statyczne grafiki, interaktywne formularze, animacje. W składni języka HTML wykorzystuje się znaczniki opatrzone z obu stron nawiasami prostokątnymi. Język HTML jest bardzo niejednoznaczny i niekonsekwentny, umożliwia dużą swobodę w doborze składni i parametrów, wobec czego zdarza się, iż
jest odmiennie traktowany przez różne przeglądarki, co przysparza projektantom stron WWW dużo trudności, gdyż często muszą przygotowywać oddzielne skrypty dla różnych przeglądarek. Ponadto język HTML zawiera określenia stylu i akcji, co sprawia, że sama treść jest trudna do czytania i przetwarzania przez różne parsery, np. dla osób niepełnosprawnych.
Znaczniki (tagi) stanowią podstawowy komponent języka HTML. Charakteryzują je dwie cechy: atrybuty i zawartość. Każdy atrybut i zawartość musi spełniać określone wymagania, aby dokument został poprawnie sprawdzony pod kątem zgodności ze standardem. Znacznik zwykle rozpoczyna się znacznikiem otwierającym (np. <znacznik>), a kończy znacznikiem zamykającym (np. </znacznik>). W HTMLu nie wymaga się, aby wszystkie znaczniki były zamykane, co wprowadza niejednoznaczność i trudności z przetwarzaniem kodu przez przeglądarkę!
Atrybuty elementu (obecnie zastępowane przez CSS) są zawarte w znaczniku otwierającym (po nazwie znacznika), natomiast zawartość umieszczana jest pomiędzy znacznikiem otwierającym i zamykającym, np.:
Niektóre elementy, np. <br> (znacznik złamania linii) lub np. <img> (znacznik obrazu), nie posiadają zawartości, a także znacznika zamykającego, zaś niektóre go wymagają, np. <p> (znacznik akapitu) </p> lub <td> (znacznik komórki tabeli) </td>. Rozróżniamy więc:
zawartość (pomiędzy znacznikiem otwierającym i zamykającym): <znacznik> zawartość </znacznik>
znacznik zamykający: </znacznik>
Ponadto znaczniki mogą być różnych typów:
Strukturalne – opisują logiczną strukturę tekstu, np. <h2>nagłówek stopnia drugiego</h2>
Prezentacyjne – opisują wygląd poszczególnych elementów, np. <b>pogrubienie</b>. Wiele z nich jest zastępowanych przez definicje stylów w CSS.
Hipertekstowe – zawierają linki do innych dokumentów lub innych części tego samego dokumentu, np. <a>przekierowanie do innej podstrony lub strony</a>.
Istnieją tzw. atrybuty standardowe, które mogą występować u większości znaczników, np.:
id – nadaje elementowi unikalny identyfikator. Może on zostać użyty przez arkusze stylów CSS do sprecyzowania wyglądu tego elementu lub przez inne skrypty, np. do zmiany jego zawartości.
class – służy do sklasyfikowania elementów dla celów prezentacyjnych. Dokument HTML lub zbiór takich dokumentów może używać klasy, np. class="stopka", sugerując, że powinny być one wyświetlone na dole strony w postaci stopki. Elementy posiadające taką klasę mogą otrzymać styl, dzięki któremu zamiast wyświetlać się w miejscu występowania w kodzie HTML, będą zaprezentowane na dole strony w postaci stopki.
style – umożliwia nadanie zdefiniowanego stylu konkretnemu elementowi w kodzie HTMLa. Dobrą praktyką jest nadanie elementowi unikalnego identyfikatora id, odnosząc się do prezentacji tego znacznika w arkuszu stylów CSS, który został wcześniej zdefiniowany.
title – używa się w celu dodania do elementu informacji tekstowej, która wyświetlana jest w postaci podpowiedzi (tooltip), pojawiającej się po najechaniu myszą nad dany element. Wykorzystanie tych atrybutów może ułatwić znacznik span, należący do grupy tagów typu inline.
Podstawowa składnia dokumentu w HTMLu zwykle wygląda następująco:
<html lang="pl"> <head>
<meta http-equiv ="Content-Type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<meta name="Keywords" content="html, meta, head, body, p, h1">
<meta name="Description" content="Podstawowa struktura dokumentu HTML">
<meta name="Robots" content="ALL">
<title>Tytuł strony</title> </head> <body>
<h1>Nagłówek pierwszego poziomu: Składam najserdeczniejsze życzenia wszystkim kobietom z okazji ich święta i życzę miłego dnia!</h1>
<p>Zapraszam na <a href="http://home.agh.edu.pl/~horzyk">moją stronę</a>.</p> </body> </html>
Podstawową strukturę dokumenty możemy zwykle wygenerować korzystając z różnych kreatorów wbudowanych w edytory HTMLa, np. Plik → Nowy dokument → Szybki start w Pajączku.
Podstawowe znaczniki HTMLa:
<body bgcolor="kolor"> - służy do określenia domyślnego tła dokumentu, gdzie kolor podajemy w postaci nazwy (red, green, black, white) lub kodu koloru w systemie szesnastkowym (#FF0000, #008000, #000000, #FFFFFF). Warto jednak zaznaczyć, że tego rodzaju formatowanie dokumentów jest formą przestarzałą spotykaną w HTMLu lecz już nie w XHTMLu, gdzie zastępujemy takie znaczniki poprzez odpowiednie określenie stylów dla poszczególnych znaczników, np. <body style="background-color: transparent;">
<h1>Tytuł 1. stopnia</h1> - powinien na stronie wystąpić dokładnie raz. Jest to ważna informacja dla robotów internetowych, gdyż zasadniczo określa zawartość strony. Istnieje 6 stopni tytułów i podtytułów, które oznaczamy następująco: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>:
Nagłówek stopnia drugiego
Nagłówek stopnia trzeciego
Nagłówek stopnia czwartego
Nagłówek stopnia piątego
Nagłówek stopnia szóstego
<hr /> - umieszcza poziomą linię w dokumencie umożliwiając dzielenie dokumentu na pewne wyszczególnione fragmenty.
<p> ... </p> - akapit zawierający pewien tekst.
<br /> - złamanie linii, przejście do następnego wiersza bez odstępu, tzn. inaczej niż w przypadku znacznika akapitu.
Tworzenie listy wypunktowanej:
<ul>
<li>pierwszy element listy</li>
<li>...</li>
<li>ostatni element listy</li>
</ul>
Powyższy kod daje następujący efekt:
pierwszy element listy
...
ostatni element listy
Tworzenie listy numerowanej:
<ol>
<li>pierwszy element listy</li>
<li>...</li>
<li>ostatni element listy</li>
</ol>
Powyższy kod daje następujący efekt:
pierwszy element listy
...
ostatni element listy
W HTMLu spotykamy się ze znacznikami, które formatują (zmieniają wygląd) wyświetlanych elementów, np. powodując
<b>ich pogrubienie</b>
<i>użycie kursywy</i>
<u>ich podkreślenie</u>
...
Zaś w XHTMLu unikamy tych znaczników, zastępując je odpowiednio zdefiniowanymi stylami podstawowych znaczników (w CSS) celem oddzielenia treści dokumentów od ich formatowania.
Odsyłacze hipertekstowe
Bardzo ważnym elementem HTMLa jest możliwość tworzenia odsyłaczy hipertekstowych (tzw. linków) do innych stron lub treści na stronie, umożliwiając łatwą nawigację po dokumentach, np.:
<a href="http://home.agh.edu.pl/~horzyk/">Odsyłacz do podanej w cudzysłowie strony.</a>
Odsyłacze hipertekstowe mogą działać również w ramach strony, umożliwiając nawigację po zawartości strony. Wtedy stosujemy etykiety, które następnie podajemy zamiast adresu następująco:
Łatwo możemy wzbogacić stronę elementami graficznymi (obrazkami), które mogą mieć również postać aktywną i być wykorzystywane w postaci odsyłacza hipertekstowego:
Alternatywny tekst wyświetla się w przypadku, gdy obrazek nie zostanie wyświetlony lub gdy obrazek zostanie wskazany myszką.
Obrazy najlepiej zapisywać w formacie gif, jpg lub png. Format gif i png obsługuje przeźroczystość, zaś jpg jej nie obsługuje.
Animacje i filmy
Najprostsze animacje można wykonać poprzez umieszczenie na stronie tzw. animowanego bannera na bazie animowanego gifa, który można przygotować w programach takich jak Animation Shop, Ulead GIFAnimator. Taki plik osadzamy na stronie tak samo jak zwykły obraz.
Można też wykorzystać znacznik embed, który jednak nie wchodzi wskład składni HTMLa 4.01, a więc może nie być poprawnie obsługiwany przez przeglądarki.
<embed src="ścieżka dostępu do pliku" width="x" height="y" />
Wartości "x" i "y" określają wielkość okna, w którym odtwarzany będzie wskazany plik, który może być w jednym z poniższych formatów:
wav - plik dźwiękowy typu "wav"
mid - plik dźwiękowy typu "midi"
avi - plik typu "avi"
ra - plik Real Audio Player
mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
mpeg - plik typu "mpeg"
mov - plik typu "mov"
asf - plik typu "asf"
lub inne jeśli zainstalowano w przeglądarce odpowiednie wtyczki i podano atrybut pluginspage="...".
Wtyczka (tzw. plug-in) to specjalny program, który można zainstalować w przeglądarce, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik. Plik może zostać uruchomiony automatycznie lub ręcznie w zależności od ustawienia atrybutu autostart="wartość", gdzie wartość może być true lub false.
<embed src="ścieżka dostępu do pliku" autostart="true/false" />
Można również kontrolować wyświetlanie się panelu kontrolnego, paska, powtarzać utwór/film w pętli, ustawić domyślny poziom głośności, balans. Koniecznie też trzeba podać adres internetowy wtyczki (plug-in), która pozwala na odtworzenie pliku, jeśli nie jest standardowo zainstalowana w przeglądarce.
<embed SRC="ścieżka dostępu do pliku" showcontrols="typ" />
<embed src="ścieżka dostępu do pliku" showdisplay="typ" />
<embed src="ścieżka dostępu do pliku" loop="typ" />
<embed src="ścieżka dostępu do pliku" volume="v" />
<embed src="ścieżka dostępu do pliku" balance="b" />
<embed src="ścieżka dostępu do pliku" pluginspage="adres wtyczki" />
"http://www.microsoft.com/Windows/MediaPlayer/" - wtyczka Windows Media Player Plug-In for Netscape - dla posiadaczy Netscape (*.wav, mid, mp3, asf, wma, wmv, avi itp.)
W przeglądarce Internet Explorer istnieje też atrybut dynsrc="ścieżka dostępu do pliku" dla atrybutu img, który pozwala na odtwarzanie plików w formacie avi:
W celu podkreślenia szczególnej zawartości (np. cytat, definicja, skrót, akronim, wyróżnienia) stosujemy specjalne znaczniki dla podkreślenia tego faktu, co ułatwia robotom internetowym odpowiednie syntaktyczne potraktowanie takiej zawartości, np.:
Daje następujący efekt:
cytat
definicja
skrót
akronim wyróżnienie emfaza przykład
przykład kod programu
Grupowanie
Istnieją też znaczniki umożliwiające pogrupowanie pewnych elementów oraz nadanie im specyficznych formatów:
<pre>tekst wstępnie sformatowany</pre> wyświetlany czcionką o stałej szerokości znaku, umożliwiający wprowadzanie dodatkowych spacji, znaków tabulacji oraz znaki końca akapitu
<blockquote>blok cytatu jest wyróżniony i odpowiednio wcięty</blockquote>
<q>cytat w wierszu dodaje automatycznie znaki cudzysłowiów</q>
<div>wycinek dokumentu służący najczęściej do jego formatowania</div>
<fieldset>obramowanie elementu</fieldset>
<nobr>blokada przełamania wiersza</nobr>
Daje następujący efekt:
tekst wstępnie sformatowany
wyświetlany czcionką o stałej szerokości znaku
umożliwiający wprowadzanie dodatkowych spacji, znaków tabulacji oraz znaki końca akapitu
blok cytatu jest wyróżniony i odpowiednio wcięty
cytat w wierszu dodaje automatycznie znaki cudzysłowów
wycinek dokumentu służący najczęściej do jego formatowania
blokada przełamania wiersza
Listy definicyjne
Dla celów uefektywnienia indeksowania stron internetowych przez roboty internetowe (tzw. pająki) stosujemy znaczniki, które ułatwiają semantyczne zdefiniowanie pewnych zależności. Przykładem jest lista definicyjna:
<dl>początek listy definicyjnej
<dt>pierwszy termin
<dd>wyjaśnienie pierwszego terminu
<dt>drugi termin
<dd>wyjaśnienie drugiego terminu
</dl>koniec listy definicyjnej
Daje następujący efekt:
początek listy definicyjnej
pierwszy termin
wyjaśnienie pierwszego terminu
drugi termin
wyjaśnienie drugiego terminu
koniec listy definicyjnej
Ważna jest też możliwość umieszczenia komentarzy w kodzie, które opisują poszczególne części kodu, jak również umożliwiają wprowadzanie skryptów w innych językach, ukrywając je przed przeglądarkami, które je nie obsługują. Komentarze nie są widoczne na stronie.
<!-- komentarz -->
Tabele
Tabele stanowią ważny element HTMLa, gdyż oprócz przedstawiania danych w formie tabelarycznej wykorzystywane są również do rozmieszczania elementów na ekranie w postaci niewidocznej tabeli. Zaznaczyć trzeba, iż istnieją również inne sposoby na rozmieszczanie elementów.
Tabela składa się z wierszy i kolumn. Może posiadać wiersz nagłówkowy. Podstawowa struktura tabeli przedstawia się następująco:
<table border="1">
<tr>
<td>element (1,1)</td>
<td>element (1,2)</td>
</tr>
<tr>
<td>element (2,1)</td>
<td>element (2,2)</td>
</tr>
</table>
Daje następujący efekt:
element (1,1)
element (1,2)
element (2,1)
element (2,2)
Sposób wyświetlania tabel można modyfikować poprzez określenia atrybutów lub stylów dla poszczególnych jej elementów, wierszy, kolumn lub całych tabel. Tabele można obramowywać na różne sposoby, określać szerokość i wysokość poszczególnych elementów oraz dodawać obramowania, marginesy i odstępy itp. Można też łączyć komórki tabel w wierszach (atrybut rowspan="ilość komórek łączonych w wierszu") i kolumnach (atrybut colspan="ilość komórek łączonych w kolumnie"). Zawartość komórek można justować, kolorować, zmieniać tło poszczególnych elementów, a nawet umieszczać obrazy w komórkach tabel. Dzięki temu tabele są stosowane jako uniwersalne narzędzie do formatowania wyglądu dokumentów. Zaleca się jednak stosowanie innych sposobów, szczególnie w przypadku konieczności wykorzystania zagnieżdżonych tabel.
HTML ma wbudowany również mechanizm automatycznego odświeżania strony po upływie pewnego czasu. Wykorzystywane to jest np. do aktualizacji danych wyświetlanych na stronie, jeśli te dane zmieniają się z upływem czasu. Umożliwia to również automatyczne przejście do innej strony. Uwaga jednak na stosowanie zbyt krótkich czasów przeładowań, gdyż może być to niekorzystnie zinterpretowane przez mechanizmy indeksujące strony. Możemy to określić w części nagłówkowej dokumentu:
XHTML (Extensible HyperText Markup Language) – to rozszerzalny hipertekstowy język znaczników wywodzący się z XMLa – języka skryptowego o ogromnych możliwościach. XHTML wywodzący się z XMLa został wprowadzony celem wprowadzenia jednoznacznej składni i konsekwencji stosowania poszczególnych znaczników rozszerzając zarazem możliwości HTMLa. XHTML
jest następcą języka HTML 4. Dokumenty pisane w XHTMLu są zgodne z oficjalną specyfikacją XMLa, która obecnie jest standardem dla wielu dokumentów – nawet nie związanych z Internetem, tj. MS Office. Jedną z największych zalet
XHTMLa jest możliwość jego łatwego łączenia z innymi językami zgodnymi z XML, tj. MathML, AIML czy SVG. XHTML 1.0 dysponuje więc praktycznie tym samym zestawem elementów i atrybutów, co HTML 4; analogiczny jest też podział na 3 wersje DTD:
XHTML 1.0 Strict – odmiana ścisła, zalecana przez W3C, przeznaczona do tworzenia dokumentów z oddzieloną warstwą
semantyki od prezentacji; nie zawiera prawie żadnych elementów prezentacyjnych; ograniczone efekty prezentacyjne
XHTML 1.0 Transitional – odmiana przejściowa, obok elementów odmiany ścisłej zawiera wiele elementów prezentacyjnych, pozwala też na wykorzystanie pewnych cech HTMLa 4.
XHTML 1.0 Frameset – zawiera wszystkie elementy wersji przejściowej, a dodatkowo takŜe elementy przeznaczone do wyświetlania ramek. Ramki uniemożliwiają pozycjonowanie stron dlatego nie jest lubiany ani polecany przez twórców WWW.
Dlaczego warto wybrać XHTML?
XHTML jest aktualnym standardem znaczników zastępującym HTML 4.
XHTML jest zaprojektowany do współpracy z innymi językami skryptowymi, aplikacjami i protokołami bazującymi na XMLu, zaś HTML nie posiada takiej możliwości.
XHTML jest bardziej spójny niż HTML, zatem jest mniej skłonny do stwarzania problemów pod względem funkcjonowania i wyświetlania treści.
XHTML 1.0 jest pomostem do przyszłych wersji XHTML.
Stare przeglądarki radzą sobie z XHTMLem równie dobrze jak z HTMLem.
Nowe przeglądarki preferują XHTML (w szczególności XHTML 1.0) i często traktują tę specyfikację lepiej niż HTML 4, wobec tego XHTML jest o wiele bardziej przewidywalny w skutkach niż HTML.
XHTML działa równie dobrze w urządzeniach bezprzewodowych i programach do odczytywania zawartości ekranu.
XHTML jest częścią rodziny standardów sieciowych, tj. CSS, DOM, które pozwalają programiście kontrolować wygląd i zachowanie strony w różnych przeglądarkach i na różnych platformach i urządzeniach.
Czym różni się XHTML od HTMLa?
Dokument rozpoczyna się od poprawnej deklaracji DOCTYPE i przestrzeni nazw.
np. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
Deklaracją typu zawartości.
Zapisywaniem nazw znaczników i ich atrybutów małymi literami, gdyż XHTML rozróżnia wielkość znaków.
Wartości wszystkich atrybutów umieszczane są w cudzysłowach.
Przypisywanie wszystkim atrybutom pewnej wartości, nawet jeśli jest ona domyślna, np. checked = "checked"
Zamykaniem wszystkich znaczników, nawet jeśli ich zawartość jest pusta, np. <br /> lub <img src="plik.pdf" alt="" />.
Nie umieszczaniem podwójnych myślników w komentarzach.
Kodowaniem wszystkich znaków specjalnych typu <, >, & w postaci odpowiadających im kodów < > &.
Korzystamy z atrybutów style="..." określających style z wykorzystaniem CSS zamiast przestarzałych atrybutów definiujących styl poszczególnych elementów w HTMLu.
CSS (Cascading Style Sheets) – to tzw. kaskadowe arkusze stylów umożliwiające oddzielenie stylów od treści obsługiwanych obecnie w prawie wszystkich przeglądarkach. Obecnie zaleca się zrezygnowanie z wykorzystywania znaczników HTMLowskich opisujących wygląd strony wewnątrz jej opisu na rzecz kaskadowych arkuszy stylów CSS. W związku z tym, iż obecnie prawie wszystkie przeglądarki obsługują przeważającą część specyfikacji CSS 1.0 można ją bezpiecznie wykorzystywać do projektowania stron WWW, czego nie można na razie powiedzieć o CSS 2.0 i CSS 3.0.
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających, w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) HTML, XHTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki.
Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam HTML i XHTML.
Arkusz stylów składa się z definicji stylu (reguł). Reguła składa się z selektora określającego formatowany element lub grupę elementów oraz jednej lub więcej rozdzielonych dwukropkiem oraz zakończonych średnikiem par właściwość-wartość.
Pary muszą być otoczone nawiasami klamrowymi. Ponieważ średnik służy do separowania par, po ostatniej z nich nie powinno się pisać tego znaku (w przeciwnym razie cała definicja może zostać zignorowana).
W powyższym przykładzie "p" jest selektorem, dla którego zostanie zastosowana pewna reguła - w tym przypadku zmiana fontu znaków akapitu; "font-family" jest właściwością, która jest zmieniana, zaś "sans-serif" jest dopuszczalną wartością dla tej właściwości.
Przecinek służy do oddzielania poszczególnych wartości danej właściwości stylu.
Średnik służy do oddzielania poszczególnych właściwości stylów.
CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość i rozmiar dokumentu, ułatwia łatwe wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmienianie renderowania strony w zależności od obsługiwanego medium (ekran, palmtop, dokument do druku, czytnik ekranowy).
Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML,
ponieważ takie arkusze mogą być wspólne dla wielu dokumentów, co również zwiększa przepustowość łączy, ilość wykorzystanych serwerów, obniża koszty i pozytywnie wpływa na szybkość ładowania się dokumentów.
Style można definiować wewnątrz poszczególnych znaczników HTMLa, w części nagłówkowej dokumentu lub w oddzielnym pliku, który jest dołączany do dokumentu. Jeśli definicje stylów dotyczą tych samych elementów, to priorytet mają te, które są bliżej danego znacznika lub zostały zastosowane najpóźniej.
Zdefiniowane stylu wewnątrz znacznika:
<p style="color: red"></p>
Zdefiniowane stylu w części nagłówkowej dokumentu <head>...</head>:
<style type="text/css">
p { color: red }
...
</style>
Zdefiniowane stylu w osobnym pliku i jego dołączenie do dokumentu w części nagłówkowej <head>...</head>:
<link rel="stylesheet" href="arkusz.css" />
Kaskadowość
Kaskadowość arkuszy stylów wynika z faktu, iż reguły CSS mogą uzupełniać lub wykluczać się wzajemnie. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:
Domyśle style przeglądarki WWW (niezależne od autora strony) - najniższy priorytet
Domyśle arkusz stylów użytkownika przeglądarki (niezależny od autora strony)
Zewnętrzne arkusze stylów (dołączane z plików)
Definicje stylów określone w części nagłówkowej dokumentu
Definicje stylów określone w atrybucie style="..." poszczególnych elementów (znaczników).
Definicja klas w CSS
CSS pozwala również na zdefiniowanie klas stylów stosowanych dla więcej niż jednego znacznika. Nazwy klas oznaczamy po kropce następująco:
<h2 class="czerwony">Nagłówek jest w kolorze czerwonym.</h2>
<h2 class="zielony">Nagłówek jest w kolorze zielonym.</h2>
<h2 class="niebieski">Nagłówek jest w kolorze niebieskim.</h2>
<p class="glowny">glowny</p>
<p class="notka">notka</p>
<ul class="maly";> ... </ul>
<p class="maly";> ... </p>
Według nazwy pola "nazwa" będzie można uzyskać dostęp do wprowadzonego tekstu. Nazwy poszczególnych pól powinny więc być unikalne w ramach każdego formularza. Zastosowanie atrybutu value sprawia, iż w polu tekstowym wyświetli się podany tekst domyślny. Często stosowanymi atrybutami jest wielość pola tekstowego size oraz możliwość ograniczenia maksymalnej ilości wprowadzanych znaków maxlength.
Pola tekstowe do wprowadzania hasła
umożliwiają wprowadzanie haseł w formularzu tak, żeby wprowadzany tekst nie był widoczny:
<input type="password" name="haslo" />
Pola wyboru
umożliwiają wybrać pewną opcję lub z niej zrezygnować:
<input type="checkbox" name="nazwa" value="wartość" checked="checked" />Opis pola
Wartość wartość jest przekazywana, gdy dane pole zostanie wybrane.
Atrybut checked="checked" umożliwia domyślne zaznaczenie pola wyboru.
<form action="..." method="post">
W których miastach już byłeś w tym roku?
<input type="checkbox" name="miasto" value="Gdansk">Gdańsk
<input type="checkbox" name="miasto" value="Krakow" checked="checked">Kraków
<input type="checkbox" name="miasto" value="Poznan">Poznań
<input type="checkbox" name="miasto" value="Warszawa">Warszawa
<input type="checkbox" name="miasto" value="Wroclaw">Wrocław
</form>
Pola wyboru opcji wykluczających się
umożliwiają wybrać jedną z podanych opcji:
<input type="radio" name="nazwa" value="wartość" checked="checked" />Opis pola
Wartość wartość jest przekazywana, gdy dane pole zostanie wybrane.
Atrybut checked="checked" umożliwia domyślne zaznaczenie pola. Można tak zaznaczyć tylko jedną z opcji.
<form action="..." method="post">
W którym mieście podjąłeś studia podyplomowe?
<input type="radio" name="miasto" value="Gdansk">Gdańsk
<input type="radio" name="miasto" value="Krakow" checked="checked">Kraków
<input type="radio" name="miasto" value="Poznan">Poznań
<input type="radio" name="miasto" value="Warszawa">Warszawa
<input type="radio" name="miasto" value="Wroclaw">Wrocław
</form>
Wartości value są zwracane, gdy dana opcja zostanie wybrana. Można też domyślnie wybrać którąś z opcji korzystając z atrybutu selected="selected". Jeśli chcemy umożliwić dokonywanie wielokrotnych wyborów, należy zastosować atrybut multiple="multiple". Ilość wyświetlanych pozycji (opcji) można ograniczyć parametrem size="n"
Jeśli zaś usuniemy atrybuty size="n" multiple="multiple", wtedy uzyskamy następującą listę rozwijaną, w której można wybrać tylko jedną opcję spośród dostępnych:
W razie występowania dużej liczby opcji na liście, można je pogrupować, a grupom nadać nazwy:
Do stworzenia realistycznie wyglądających przycisków 3D przydatny będzie nowy standard CSS 3.0, który wprowadził nowe możliwości. Możemy zmienić odpowiednio wygląd odnośników hipertekstowych (linków) poprzez zmianę ich właściwości:
.przycisk3D /* Zmienia sposób wyświetlania się odnośników hipertekstowych należących do klasy .przycisk3D*/
{
/* Rozmiar */
display: block; /* Przekształca w prostokąt */
width: 160px; /* Nadaje szerokość */
height: 44px; /* Nadaje wysokość */ /* Tekst */
font-size: 22px; /* Wielkość czcionki */
line-height: 44px; /* Powoduje wycentrowanie tekstu na wysokość przycisku */
text-align: center; /* Powoduje wycentrowanie tkekstu horyzontalnie */
text-decoration: none; /* Usuwa podkreślenie odnośnika hipertekstowego (linku) */
color: white;
text-shadow: 0 -2px -2px #0f864a; /* Dodaje cień tekstowi */ /* Wygląd */
background-color: #12a65c; /* Nadaje kolor przyciskowi */
border-radius: 6px; /* Zaokrągla rogi przycisku */
box-shadow: 2px 4px 2px 2px #0f864a, 3px 5px 5px 1px rgba(0, 0, 0, 0.4); /* Dodaje cień u dołu i prawej strony przycisku */
margin: 0px 2px 5px 0px /* top right bottom left */
} .przycisk3D:active/* Zmienia wygląd przycisku po jego kliknięciu */
{
box-shadow: -2px -4px 2px 2px #153, -3px -5px 5px 1px rgba(0, 0, 0, 0.4); /*Dodaje cień u dołu i prawej strony przycisku*/
margin: 10px 0px 0px 4px /*przesuwa margines top right bottom left */
} .przycisk3D:hover/* Zmienia wygląd przycisku po wskazaniu go myszką */
{
Korzystając z Pajączka utwórz nowy dokument HTML korzystając z szablonu strony: Plik → Nowy dokument → Szybki start oraz ustaw w kreatorze pożądane parametry.
W części <body>...</body> wypróbuj poznane znaczniki HTMLa do stworzenia strony internetowej opisującej twoje zainteresowania. Wykorzystaj nagłówki (<h1> ... </h1>, <h2> ... </h2>), paragrafy (<p> ... </p>), rysunki (<img src="" alt="" />), listy (<ul> <li> ... </li> </ul> oraz <ol> <li> ... </li> </ol>), odnośniki hipertekstowe (<a href="">Nazwa odnośnika</a> ) a następnie eksperymentuj z różnymi atrybutami.
Uzupełnij swoją stronę formularzem, zbierz dane o odwiedzających twoją stronę i wyślij je e-mailem na swój adres. Przetwarzaniem formularzy zajmiemy się po przerobieniu JavaScriptu i PHP.
<!DOCTYPE html>
<html>
<head>
<title>Moja strona internetowa</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="zainteresowania" />
<meta name="Author" content="moje imie" />
<meta name="Robots" content="ALL" />
</head>
<body bgcolor="#008000" >
<!-- To jest miejsce na treść dokumentu -->
<form action="mailto:własny_e-mail?subject=temat" method="post">
Imię: <input type="text" name="imie" value="podaje swoje imię" size="30" maxlength="50" />
Nazwisko: <input type="text" name="nazwisko" value="podaje swoje nazwisko" size="30" maxlength="50" />
Które miasta chciałbyś zwiedzić w tym roku?
<input type="checkbox" name="miasto" value="Gdansk">Gdańsk
<input type="checkbox" name="miasto" value="Krakow" checked="checked">Kraków
<input type="checkbox" name="miasto" value="Poznan">Poznań
<input type="checkbox" name="miasto" value="Warszawa">Warszawa
<input type="checkbox" name="miasto" value="Wroclaw">Wrocław
Ile zamierzasz wydać na wczasy w tym roku i dlaczego?
<textarea name="ile" cols="x" rows="y">Kwota i uzasadnienie.</textarea>
<input type="submit" value="Wyślij" />
</form>
</body>
</html>
Następnie wykorzystaj tabelę do odpowiedniego rozmieszczenia elementów w oknie przeglądarki i eksperymentuj z parametrami tabel:
<!DOCTYPE html>
<html>
<head>
<title>Moja strona internetowa</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="zainteresowania" />
<meta name="Author" content="moje imie" />
<meta name="Robots" content="ALL" />
</head>
<body bgcolor="#008000" >
<!-- To jest miejsce na treść dokumentu -->
<form action="mailto:własny_e-mail?subject=temat" method="post">
<table>
<tr>
<td>Imię:</td> <td><input type="text" name="imie" value="podaje swoje imię" size="30" maxlength="50" /></td>
</tr>
<tr>
<td>Nazwisko:</td> <td><input type="text" name="nazwisko" value="podaje swoje nazwisko" size="30" maxlength="50" />
</td>
</tr>
<tr>
<td>Które miasta chciałbyś zwiedzić w tym roku?</td>
<td>
<input type="checkbox" name="miasto" value="Gdansk">Gdańsk
<input type="checkbox" name="miasto" value="Krakow" checked="checked">Kraków
<input type="checkbox" name="miasto" value="Poznan">Poznań
<input type="checkbox" name="miasto" value="Warszawa">Warszawa
<input type="checkbox" name="miasto" value="Wroclaw">Wrocław
</td>
</tr>
<tr>
<td>Ile zamierzasz wydać na wczasy w tym roku i dlaczego?</td>
<td>
<textarea name="ile" cols="x" rows="y">Kwota i uzasadnienie.</textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="Wyślij" /></td>
<td><input type="reset" value="Wyczyść" /></td>
</tr>
</table>
</form>
</body>
</html>
Spróbuj wykorzystać kaskadowe arkusze stylów do nadania stronie indywidualnego wyglądu.
Spróbuj dodać do strony menu zbudowane z listy nienumerowanej wykorzystując odnośniki hipertekstowe, którym nadaj odpowiednie style korzystając z CSS. Wykorzystaj materiały z wykładu.
JavaScript – to okrojony C++ dostosowany do zastosowań sieciowych – umożliwiający dodanie interakcji po stronie użytkownika (klienta), częściową obsługę formularzy, wykonanie pewnych obliczeń, animacji, wykorzystanie wyrażeń regularnych i wiele innych.
Kod JavaScript może zostać wstawiony do strony z pliku zewnętrznego, w części nagłówkowej dokumentu w postaci funkcji lub w ramach treści dokumentu. Kod JavaScript wydzielamy specjalnymi znacznikami:
<script type="text/javascript">
...
instrukcje w JavaScript
...
</script>
Warto dołączać kod JavaScript przygotowany w oddzielnym pliku, gdyż wtedy możemy przygotowane skrypty wykorzystywać na różnych stronach:
// Komentarz jednowierszowy
/* Komentarz wielowierszowy
mogący również obejmować pewną część kodu */
Zmienne
Tak jak w każdym innym języku programowania w JavaScript możemy wykorzystać zmienne do przechowywania pewnych wartości danych oraz do wykonywania na nich różnych operacji matematycznych i logicznych:
każda nazwa zmiennej musi się zaczynać od litery (A-Z, a-z), lub znaku podkreślenia ("_"),
nazwa zmiennej nie może się zaczynać od cyfry (0-9),
nazwa zmiennej nie może zawierać spacji (można zamiast spacji używać podkreślenia),
nazwa zmiennej nie może zawierać polskich liter,
nazwą zmiennej nie może być słowo kluczowe zarezerwowane przez JavaScript.
var liczba = 12; // zmienna typu liczbowego całkowitego
var liczba = 12.8; // zmienna typu liczbowego rzeczywistego
var zmienna = true; // zmienna typu logicznego
var tekst = "tekst"; // zmienna typu tekstowego
Ponadto każdy obiekt typu numerycznego może zwrócić nam dodatkowe wartości liczbowe:
MAX_VALUE – maksymalna wartość,
MIN_VALUE – minimalna wartość,
NaN – nie liczba,
NEGATIVE_INFINITY – specjalna wartość nieskończoności (zwracana w przypadku overflow),
POSITIVE_INFINITY – specjalna ujemna wartość nieskończoności (zwracana w przypadku overflow),
var Max = Number.MAX_VALUE;
document.write ('Maksimum = ' + Max)
W JavaScript typy są definiowane przez podstawiane do nich wartości. Istnieje też możliwość konwersji danych różnych typów:
var zmienna = 10; // zmienna typu liczbowego
zmienna = "to jest napis"; // ale może się później zmienić w typ znakowy
var zmienna = "to jest liczba " + 30; //zwróci "to jest liczba 30"
var zmienna = "30" + 1; // potraktuje jako tekst zwróci "301"
var zmienna = 10 - "3"; //zwróci 7, gdyż automatycznie przekonwertuje tekst 3 na liczbę 3
Można też wymusić konwersję na dany typ liczbowy stosując:
var x = 3
var y = 5
if ((x>2) && (y<6)) // prawda, bo x jest większe od 2 i y jest mniejsze od 6
if ((x>2) || (y<3)) // prawda, bo x jest większe od 2
if (x != 2) // prawda, bo x jest różne od 2
if (x >= 3) // prawda, bo x jest równe 3
Ciekawą funkcją JavaScript jest możliwość wczytania lub zbudowania pewnego tekstu, który podany do funkcji eval() zostanie automatycznie wykonany tak samo, jakby był częścią napisanego wcześniej kodu. Umożliwia to dużą swobodę w dynamicznym zmienianiu i łączeniu fragmentów kodu. Niestety korzystają z tego również wirusy komputerowe. Wykorzystanie tekstu w formie wyrażenia matematycznego, które zostanie wykonane demonstruje następujący przykład:
<script type="text/javascript">
var zmienna = "12 + 2 * 4";
document.write (zmienna); //wypisze się "12 + 2 * 4"
document.write ( eval (zmienna) ); //wypisze 20, gdyż tekst zapisany do zmiennej zostanie potraktowany jako wyrażenie matematyczne
</script>
Instrukcja warunkowa IF
Instrukcja warunkowa IF służy do ewaluacji różnych warunków oraz do podjęcia odpowiedniej akcji w zależności od tego, czy warunek jest spełniony czy nie jest:
if (warunek) { wykonane instrukcje jeżeli prawda } else { wykonane instrukcje jeśli fałsz }
if (liczba == 2) { alert ('Liczba równa się 2') }
if (liczba == 2) { alert ('Liczba równa się 2') } else { alert ('Liczba nie równa się 2') }
if (wyrażenie) { wykonane w przypadku gdy wyrażenie jest prawdziwe }
else if (kolejne wyrażenie) { wykonane, gdy poprzednie wyrażenie jest fałszywe a to prawdziwe }
else if (kolejne wyrażenie) { wykonane, gdy poprzednie wyrażenie jest fałszywe a to prawdziwe }
else { wykonane, gdy wszystkie poprzednie wyrażania są fałszywe }
Instrukcja wyboru SWITCH
Instrukcja wyboru SWITCH zastępuje blok instrukcji if-else i dokonuje wyboru w zależności od wartości wyrażenia:
switch (wyrażenie) {
case rezultat1: //fragment wykonywany gdy rezultat wyrażenia jest równy rezultat1
break; // przerywa badanie wartości wyrażenia dla pozostałych przypadków
case rezultat2: //fragment wykonywany gdy rezultat wyrażenia jest równy rezultat2
break; // przerywa badanie wartości wyrażenia dla pozostałych przypadków
default: //fragment wykonywany, gdy wszystkie powyższe rezultaty nie są równe rezultatowi wyrażenia
}
switch (numer) {
case 1: alert ('Numer równa się jeden'); break;
case 2: alert ('Numer równa się dwa'); break;
case 3: alert ('Numer równa się trzy'); break;
case 4: alert ('Numer równa się cztery'); break;
default: alert (Wartość numer jest inna niż 1,2,3,4.');
}
Instrukcja pętli FOR
Instrukcja pętli FOR służy iterowaniu instrukcji dla zmieniającej się wartości zmiennej, której wartość jest zwykle inkrementowana lub dekrementowana:
for (zainicjowanie zmiennej; wyrażenie testujące; zwiększenie/zmniejszenie zmiennej)
{ instrukcje wykonane pewną ilość razy }
for (var x=0; x<5; x++)
{ document.write(" Wypisz X = " + x + " <br />"); }
var tablica = new Array();
…
for (x=0; x
{ tablica[x] = x + 1; }
var t = ['pierwszy', 'drugi', 'trzeci'];
t[1000] = 'tysięczny';
for (var obj in a)
{ document.write(a[obj]); //dzięki temu pętla wykona się 4 razy a nie 1000
}
Instrukcja pętli WHILE
Instrukcja pętli WHILE służy powtarzaniu instrukcji dopóki wyrażenie jest prawdziwe:
while warunek { instrukcje }
var x=1;
while (x<=5) {
document.write(" Wypisz X = " + x);
x++;
}
Instrukcja pętli DO-WHILE
Instrukcja pętli DO-WHILE służy powtarzaniu instrukcji dopóki wyrażenie nie stanie się prawdziwe, przy czym pętla ta przynajmniej raz wykona zawarte w niej instrukcje, gdyż warunek sprawdzany jest na jej końcu:
do { instrukcje } while warunek;
var x=2;
do {
document.write(" Wypisz X = " + x);
x++;
}
while (x<2)
Tablice
Tablice służą przechowywaniu wartości tego samego rodzaju/typu w uporządkowanej sekwencyjnej strukturze komórek.
var NazwaTablicy = new Array();
//lub var NazwaTablicy = [];
// Przykłady:
var Tablica = new Array(10);
var NazwaTablicy = new Array('Marcin','Ania','Agnieszka');
//lub
var NazwaTablicy = ['Marcin','Ania','Agnieszka'];
document.write(NazwaTablicy[1]) //wypisz się Ania
document.write(tablica.join() + "<br />") //wypisze się "Marcin,Ania,Agnieszka";
for (x=0; x
document.write(Tablica[x] + "<br />");
// FUNKCJE NA TABLICACH:
Tablica.reverse(); // Odwraca kolejność elementów
Tablica.sort(); // Sortuje elementy tablicy
// TABLICE ASOCJACYJNE (wiążące ze sobą dwie wartości):
var Tablica = new Array()
Tablica['chomik'] = "radioaktywny";
Tablica['kot'] = "zmutowany";
Tablica['pies'] = "Super Samson";
Funkcje
W JavaScript możemy również definiować i wywoływać funkcje, które są pewnym wyodrębnionym fragmentem kodu, który możemy wielokrotnie wywoływać z różnych miejsc w programie. Funkcje mogą być wywoływane z różnymi parametrami, co zwykle różnicuje ich działanie oraz zwracane wyniki.
function nazwa_funkcji(atrybut1,atrybut2,atrybut3,…)
{
...kod funkcji
}
//lub nazwa_funkcji = function(atrybut1,atrybut2,atrybut3,…)
{
...kod funkcji anonimowej, czyli takiej, która nie posiada nazwy
}
function pisz()
{
alert("To jest tekst zawarty w funkcji.");
}
function wypisz(tekst)
{
alert(tekst)
}
function licz(liczba1, liczba2)
{
return liczba1 + liczba2
}
Przykład prostej obsługi formularza przez JavaScript
<html>
<head> </head>
<body>
<form name="frmPersonalDetails">
<input type ="radio" name="radio1" value="jeden">
<input type ="radio" name="radio1" value="dwa">
<input type ="radio" name="radio1" value="trzy">
</form>
<script>
var inputArray = document.frmPersonalDetails.radio1;
var arrayLength = inputArray.length;
for (val elementIndex = 0; elementIndex < arrayLength; elementIndex++)
{
var formElement = inputArray[elementIndex];
document.write ("Indeks elementu:" + elementIndex +"i");
document.write ("wartość elementu:" + fromElement.value);
}
</script>
</body>
<html>
Przykład obsługi formularza przy pomocy funkcji JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pozegnanie</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<script language="JavaScript">
<!-- //Ukrycie przed przeglądarkami nie obsługującymi JavaSrciptu
function powitanie (imie)
{ alert ("Cześć! Witamy na naszej stronie " + ((imie=="brak" ? "" : imie) + "!")); }
function podaj_imie ()
{ imie = prompt ("Proszę podaj nam swoje imię", "");
if (imie == null || imie == "")
{ imie = "brak"; document.write ("Miło, że jesteś z nami!<br />Szanujemy twoją prywatność.<br />"); }
else
{ document.write ("Miło, że jesteś z nami " + imie + "!<br />"); }
return imie;
}
function pozegnanie (imie)
{ if (imie != "brak") { alert("Do widzenia " + imie + "!\nMamy nadzieję, że niedługo znów nas odwiedzisz."); }
else { alert("Do widzenia!\nMamy nadzieję, że niedługo znów nas odwiedzisz."); }
}
-->
</script>
</head>
<body onLoad = "powitanie(podaj_imie())"; onUnload = "pozegnanie(imie)">
<h2><script language="JavaScript">
</script>
</h2>
</body>
</html>
Przykład otwarcia nowego okna przy pomocy funkcji JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pozegnanie</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<script language="JavaScript">
<!-- //Ukrycie przed przeglądarkami nie obsługującymi JavaSrciptu
function otworzokno()
{ var dlugosc = document.forms.formularz.dlugosc.value;
var wysokosc = document.forms.formularz.wysokosc.value;
var url = document.forms.formularz.url.value;
parametry = 'scrollbars=yes, width=' + dlugosc + ',height=' + wysokosc;
newwindow = open(url, 'secondWindow', parametry);
}
-->
</script>
</head>
<body>
<h2>
<form name="formularz">
<table border="0">
<tr><td>Długość okna:</td><td><input type="text" name="dlugosc" size="15"></td></tr>
<tr><td>Wysokość okna:</td><td><input type="text" name="wysokosc" size="15"></td></tr>
<tr><td>URL do strony:</td><td><input type="text" name="url" size="40" value="http://"></td></tr>
<tr><td colspan="2"><input type="button" name="noweokno" value=" Otwórz nowe okno! "onClick="otworzokno()"></td></tr>
</table>
</form>
</h2>
</body>
</html>
JavaScript można wykorzystać do szybkiego sprawdzania niepoufnych wartości pól formularzy przy pomocy wyrażeń regularnych.
Przykład sprawdzenia adresu e-mail w JavaScript z wykorzystaniem wyrażenia regularnego
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sprawdzenie adresu E-mail</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<script language="JavaScript">
<!-- //Ukrycie przed przeglądarkami nie obsługującymi JavaSrciptu
function Sprawdzenie()
{
var myEmailRegExp = /^\w(.?\w)*@\w(\.?[-\w])*\.([a-z]{3,4}(\.[a-z]{2})?|[a-z]{2}(\.[a-z]{2})?)$/i
if (myEmailRegExp.test(document.forms.formularz.email.value))
{ alert('E-mail ' + document.forms.formularz.email.value + ' wygląda poprawny.'); }
else { alert('E-mail ' + document.forms.formularz.email.value + ' zawiera błędy!'); }
}
-->
</script>
</head>
<body>
<h2>
<form name="formularz">
<table border="0">
<tr><td>Podaj adres e-mail do sprawdzenia:</td><td><input type="text" name="email" size="25"></td></tr>
<tr><td colspan="2"><input type="button" name="sprawdź" value="Sprawdź e-mail" onClick="Sprawdzenie()"></td></tr>
</table>
</form>
</h2>
</body>
</html>
Wyrażenia regularne – to pewne wzorce umożliwiające szybkie i łatwe sprawdzanie poprawności wprowadzonych danych o ustalonej formie, np.: daty, e-maile, strony WWW, adresy, kody pocztowe, numery kart kredytowych, numery kont bankowych, numery telefonów, PESELe, NIPy, KRSy itp.
Wyrażenie regularne w JavaScripcie przetwarzamy zwykle z wykorzystaniem obiektu RegExp oraz obiektu String, które są dostarczane przez przeglądarki:
var myString = new String ("Jakieś znaki");
var myRegExp = new RegExp ("Moje Wyrażenie Regularne - łańcuch");
gdzie Moje Wyrażenie Regularne – to łańcuch znaków, który reprezentuje wyrażenie regularne. Możemy też tworzyć obiekt RegExp za pomocą tzw. literału w postaci:
var myRegExp = /Moje Wyrażenie Regularne/;
Ta metoda z wykorzystaniem literału umożliwia wprowadzanie wyrażeń regularnych nie zaś łańcuchów reprezentujących wyrażenia regularne! Różnica polega na tym, że łańcuch może zawierać specjalne znaki, które nazywamy sekwencjami unikowymi, które pozwalają przedstawić znaki, których nie można zapisać wprost, np. \n dla znaku nowego wiersza lub \b dla znaku cofacz (backspace). Ponieważ \b w łańcuchu koliduje z \b w składni wyrażenia regularnego, przez dodanie jeszcze jednego lewego ukośnika z \b na \\b wskazujemy, że chodzi o \b ze składni wyrażenia regularnego, np.:
var myRegExp = /Witamy\b Was/; // kompilowany w momencie tworzenia - kompilowany w momencie tworzenia
zapiszemy z użyciem operatora new następująco:
var myRegExp = new RegExp (" Witamy\\b Was"); // nieskompilowany
Podczas tworzenia wyrażeń regularnych możemy od razu ustawić określone znaczniki, które określają, czy wzorce mają rozróżniać wielkość liter, są globalne czy wielowierszowe:
var myRegExp = new RegExp ("Kasia", "ig");
lub
var myRegExp = /Kasia/ ig;
Typy modyfikatorów:
i – wyłącza rozróżnianie wielkości liter w dopasowaniu, tak więc słowa Kasia i kasia będą traktowane tak samo. Domyślnie dopasowywane są tylko litery tej samej wielkości. ROZRÓŻNIANIE WIELKOŚCI LITER
g – szuka wszystkich wystąpień wzorca. Domyślnie znajdowany jest tylko pierwszy pasujący wzorzec. WYSZUKIWANIE GLOBALNE
m – określa sposób traktowania wzorców zawierających więcej niż jeden wiersz, np. znak początku ^ i końca $ oznacza domyślnie początek i koniec łańcucha; zaś jeśli ustawimy m, wtedy oznacza początek i koniec wiersza, więc może być dane wyrażenie zastosowanie wielokrotnie do danego łańcucha, co wpływa na zmianę sposobu działania wyrażenia regularnego. TRYB WIELOWIERSZOWY
Wykorzystanie wyrażeń regularnych do sprawdzania zgodności z nimi za pośrednictwem metody test() obiektu RegExp:
var myRegExp = /wzorzec/;
lub
if (myRegExp.test("Analizowane łańcuch, który próbujemy dopasować do zdefiniowanego wzorca będącego wyrażeniem regularnym."))
{ alert ("Znaleziono pasujący wzorzec"); }
else
{ alert ("Nie znaleziono wzorca"); }
Podmianę z wykorzystaniem wyrażeń regularnych realizujemy za pośrednictwem metody replace():
var myString = "Katarzyna uwielbia otrzymywać czerwone róże. Katarzyna wkłada je do wody. ";
var myRegExp = /Katarzyna/ g;
myString = myString.replace (myRegExp, "Kasia");
alert (myString);
Powyższy program powoduje powodujące podmianę wszystkich wystąpień słowa Katarzyna w zdefiniowanym stringu na słowo Kasia, więc otrzymamy następujący rezultat działania:
Kasia uwielbia otrzymywać czerwone róże. uwielbia otrzymywać czerwone róże. Kasia wkłada je do wody.
Składnia wyrażeń regularnych umożliwia dopasowanie znaków niedrukowanych, np. znaków tabulacji, nowego wiersza. W tym przypadku potrzebne są tzw. sekwencje unikowe, które służą do wskazania takich znaków. Sekwencja taka wskazuje interpreterowi JavaScriptu, że nie ma do czynienia ze znakiem jako takim, lecz z reprezentacją innego znaku. Znak \ wskazuje, że następujący po nim ciąg znaków jest sekwencją unikową, np. \t oznacza znak tabulacji. Natomiast niektóre znaki, np. ? * mają specjalne znaczenie w składni wyrażeń regularnych, więc chcąc je wyszukiwać jako normalne znaki trzeba je również reprezentować przy pomocy sekwencji unikowych, tj.: \/ \\ \. \* \+ \? \| \( \) \{ \} \^ \$.
\n – dopasowuje znak nowego wiersza
\r – dopasowuje znak karetki
\t – dopasowuje znak tabulacji
\v – dopasowuje znak tabulacji pionowej
\f – dopasowuje znak wysunięcia strony
\nnn – dopasowuje znak ASCII o numerze nnn
\xnn – dopasowuje znak ASCII o numerze nn podanym w formacie szesnastkowym
\unnnn – dopasowuje znak UNICODE o numerze nnnn w formacie szesnastkowym
np. var myRegExp = /\$\; wyszukuje znak dolara w łańcuchu, a nie znak końca.
Znaki specjale w wyrażeniach regularnych:
O sile wyrażeń regularnych stanowią liczne znaki specjalne, które pozwalają dopasowywać do określonych klas znaków, np. liter, cyfr, odstępów. Te klasy znaków pozwalają na dopasowanie, gdy mamy wzorzec, lecz nie wiemy lub nie obchodzi nas, jakie są faktyczne wartości znaków, np. wzorzec numeru telefonu, adresu e-mail, kodu pocztowego.
\d – dopasowuje dowolną cyfrę od 0 do 9,
\D – dopasowuje dowolny znak nie będący cyfrą,
\w – dopasowuje dowolny znak słowa: A-Z, a-z, 0-9 lub znak podkreślenia,
\W – dopasowuje dowolny znak inny niż wymieniony dla dopasowuje dowolny znak inny niż wymieniony dla \w,
\s – dopasowuje dowolny znak odstępu: tabulacji, nowego wiersza, powrotu karetki, wysunięcia strony i tabulacji pionowej,
\S – dopasowuje dowolny znak poza znakami odstępu,
[...] – dopasowuje dowolny znak z wymienionych wewnątrz nawiasów,
[^...] – dopasowuje dowolny znak z poza wymienionych wewnątrz nawiasów,
var myRegExp = /0\d\d\d-\d\d\d\d\d\d\; – chcąc wyszukać numery telefonów w tradycyjnym formacie, np.:
0601-123456.
Znaki powtórzeń w wyrażeniach regularnych
Znaki powtórzeń skracają zapis wyrażeń regularnych oraz pozwalają specyfikować znak jako grupę znaków określonej klasy:
{n} – dopasowuje n wystąpień poprzedzającego elementu, np.: /x{2}/ daje xx,
{n,} – dopasowuje n lub więcej wystąpień poprzedzającego elementu, np.: /x{2,}/ daje xx, xxx, xxxx, xxxxx... itd.,
{n,m} – dopasowuje przynajmniej n i maksymalnie m wystąpień poprzedzającego elementu, np.: /x{2,4}/ daje xx, xxx, xxxx,
? – dopasowuje poprzedzający element raz lub zero razy przez co poprzedzający element staje się opcjonalny, np. /ax?/ daje a lub ax,
+ – dopasowuje poprzedzający element raz lub więcej razy (czyli minimalnie raz), np. /x+/ daje x, xx, xxx, xxxx, xxxxx...,
* – dopasowuje poprzedzający element zero lub więcej razy (czyli minimalnie raz), np. /ax*/ daje a, ax, axx, axxx, axxxx, axxxxx...,
A więc chcąc sprawdzić poprawność 16-cyfrowego numer karty kredytowej gdzie poszczególne 4-ki mogą lecz nie muszą być rozdzielne spacjami, np.: 0601 1234 5678 9012, można zastosować następujące wyrażenie regularne:
var myRegExp = /\d{4} ?\d{4} ?\d{4} ?\d{4}/;
a w celu wykorzystania tego wyrażenia regularnego można zastosować funkcję JavaScript:
Znaki pozycji pozwalają nam określić, gdzie powinien znajdować się wzorzec wewnątrz łańcucha, czyli gdzie powinien być zakotwiczony. Kotwica anuluje standardowe zachowanie wyszukiwania wzorca w całym łańcuchu zamieniając je na wyszukiwania na jego początku lub końcu:
^ – wzorzec musi się znajdować na początku łańcucha lub na początku wiersza w przypadku wykorzystania opcji modyfikatora wielowierszowego,
$ – wzorzec musi się znajdować na końcu łańcucha lub na końcu wiersza w przypadku wykorzystania opcji modyfikatora wielowierszowego,
\b – dopasowuje granicę słowa, tj. punkt pomiędzy znakiem słowa i innym (początkiem lub końcem słowa),
\B – dopasowuje do położenia, które nie jest granicą słowa, czyli nie jest ani początkiem ani końcem słowa.
Możemy więc teraz ściślej dookreślić postać wyrażenia regularnego dla sprawdzenia poprawności numerów kart kredytowych:
var myRegExp = /^\d{4} ?\d{4} ?\d{4} ?\d{4}$/;
Wyrażenia logiczne w wyrażeniach regularnych
| – znak alternatywy, np. /jabłka|gruszki/,
(wzorzec) – znaki wewnątrz nawiasów przechwytujących zostaną zgrupowane i potraktowane jako całość. Można z takich grup skorzystać odwołując się do nich przez \nrGrupy,
(?:wzorzec) – działa tak samo jak nawiasy powyżej z tym, że nie przechwytują zawartości i nie można się do nich odwoływać przez numer grupy,
(?=wzorzec) – to grupowanie z przewidywanie pozytywnym, czyli wzorzec wewnątrz grupy musi zostać znaleziony, lecz nie jest przechwytywany na potrzeby przyszłych odwołań przez \nrGrupy i nie będzie zawarty w łańcuchach zwróconych jako ostateczny wynik dopasowania,
(?!wzorzec) – to grupowanie z przewidywanie negatywnym, który działa podobnie jak powyższy z tym, że wzorzec wewnątrz grupy nie zostanie znaleziony,
\nrGrupy – do wyrażenia \nrGrupy będą dopasowywane te same znaki, jak w wyrażaniu regularnym definiującym tą grupę,
Dzięki temu możemy zapisać bardziej skomplikowane wyrażenie regularne umożliwiające sprawdzanie poprawności e-maili:
var myEmailRegExp = /^\w(.?\w)*@\w(\.?[-\w])*\.([a-z]{3,4}(\.[a-z]{2})?|[a-z]{2}(\.[a-z]{2})?)$/i
PHP (Hypertex Preprocessor) – umożliwiający tworzenie dynamicznych stron WWW po stronie serwera i dynamiczne
generowanie treści stron w HTMLu/XHTMLu, obsługę formularzy, bezpieczne sprawdzanie haseł, obsługę baz danych itp. Ten język skryptowy jest również blisko spokrewiony z C++.
Typy danych w PHP
W PHP rozróżniamy 8 podstawowych typów danych, które można podzielić na:
typy skalarne:
typ boolean (logiczny)
typ integer (liczb całkowitych)
typ float (liczb rzeczywistych)
typ string (ciągów tekstów)
typy złożone:
typ array (tablicowy)
typ object (obiektowy)
typy specjalne:
typ resource (odwołania do zasobów zewnętrznych)
typ null (informacja, że zmienna nie przechowuje żadnych danych)
Zmienne w PHP
Zmienne w PHP rozpoczynamy od znaku „$”, po którym mogą występować znaki liter, podkreślenia i cyfry (cyfra nie może być na początku):
$zmienna
$zmienna1
$zmienna_1
$_1zmienna
$_12
W PHP nie ma wymogu deklarowania zmiennych ani też konieczności określania ich typów. Czynności te wykonywane są automatycznie na podstawie wartości im przypisywanych. Typ zmiennych można wykryć wywołując funkcje i sprawdzając wartość (true/false) zwracaną przez nie:
W PHP zasadnicze znaczenie odgrywają zmienne globalne, które służą do przekazywania danych pomiędzy klientem i serwerem, a to umożliwia obsługę formularzy po stronie serwera:
$GLOBALS – tablica zawierająca odniesienie do każdej zmiennej zdefiniowanej przez użytkownika o zasięgu globalnym;
$_SERVER – tablica zawierająca informacje ustawiane przez serwer WWW;
$_GET – tablica zawierająca dane przekazane do serwera WWW za pomocą metody GET;
$_POST – tablica zawierająca dane przekazane do serwera WWW za pomocą metody POST;
$_COOKIE – tablica tablica zawierająca ciasteczka (tzw. cookies) przekazane z serwera WWW;
$_FILES – tablica zawierająca elementy przekazane do skryptu za pomocą metody POST podczas przesyłania plików do serwera;
$_ENV – tablica zawierająca wartości zmiennych środowiskowych przekazanych z systemu, na którym działa PHP;
$_REQUEST – tablica asocjacyjna zawierająca dane z $_GET, $_POST i $_COOKIE;
$_SESSION – tablica asocjacyjna zawierająca dane związane z bieżącą sesją.
Stałe w PHP
Stałe nie zmieniają swojej wartości podczas wykonywania skryptu. Stałych nie poprzedzamy znakiem „$”. Definiujemy je przy pomocy:
define ('nazwa stalej'.wartosc_stalej);
Operatory w PHP
W PHP istnieją różne operatory umożliwiające wykonywanie operacji na danych:
operatory arytmetyczne:
* (mnożenie)
/ (dzielenie)
+ (dodawanie)
- (odejmowanie)
% (dzielenie modulo)
operatory inkrementacji i dekrementacji:
++ (inkrementacja) wykonanie inkrementacji: ++$a przed operacją, $a++ po operacji
-- (dekrementacja) wykonanie dekrementacji: --$a przed operacją, $a-- po operacji
Instrukcje warunkowe IF oraz ? służy do ewaluacji różnych warunków oraz do podjęcia odpowiedniej akcji w zależności od tego, czy warunek jest spełniony czy nie jest:
if (warunek) {...} if (warunek) {...} else { ... } if (warunek) {...} elseif { ... }
warunek ? instrukcja_gdy_wartość_true : instrukcja_gdy_wartość_false
Instrukcja wyboru CASE
Instrukcja wyboru CASE zastępuje blok instrukcji if-elseif i dokonuje wyboru w zależności od wartości wyrażenia:
switch (zmienna/wyrażenie)
{ case wartość1: instrukcje; break; case wartość2: instrukcje; break;
... default: instrukcje;
}
Pętle FOR, FOREACH, WHILE, DO-WHILE
Pętle umożliwiają powtarzanie zestawu instrukcji dla różnych danych, które mogą zmieniać się w trakcie wykonywania pętli.
for (wyrażenie początkowe; wyrażenie warunkowe; wyrażenie modyfikujące) { ... } while (wyrażenie warunkowe dopuszczające) { ... } do { ... } while (wyrażenie warunkowe dopuszczające) foreach ($tablica as $wartość) { ... }
lub foreach ($tablica as $klucz => $wartość) { ... } break – przerywa działanie pętli continue – przerywa wykonywanie pętli dla danej wartości i kontynuuje jej wykonywanie od początku dla kolejnej wartości
Tablice ARRAY
W PHP rozróżniamy tablice zwykłe (indeksowane poprzez kolejne liczby całkowite rozpoczynając od 0, 1, 2, ...) oraz tablice asocjacyjne, które indeksowane są poprzez inne wartości nazywane kluczami:
Do poszczególnych komórek tablic odnosimy się odpowiednio za pośrednictwem indeksu $i lub klucza. Umożliwia nam to dostęp do przechowywanej wartości dla celów jej odczytu lub aktualizacji (podmiany):
$tablica[$i]
$tablicaasoc[klucz]
Obsługa formularzy przez skrypty PHP
W celu obsłużenia formularza FORM przez skrypt PHP podajemy nazwę pliku PHP w atrybucie "action" lub "onclick" w zależności od potrzeb:
Powyższy prosty formularz zawiera dwa pola do wprowadzania danych (pola te nazwano Imię i Nazwisko) oraz przycisk Wyślij, po naciśnięciu którego wprowadzone wartości w polach Imię i Nazwisko zostaną wysłane do skryptu jakis-skrypt.php za pośrednictwem zmiennych globalnych. Następnie możemy zająć się przetwarzaniem tych danych w skrypcie PHP jakis-skrypt.php odczytując stosowne wartości tych pól w jeden z następujących sposobów:
Ciągi tekstowe w PHP łączymy za pośrednictwem kopki ".", np.:
$imie." ".$nazwisko
Komentarze w PHP
/* komentarze wielowierszowe
umożliwiające również zakomentowanie fragramentów kodu w trakcie jego odpluskwiania (debuggowania)*/ // komentarz do końca linii
Obsługa ciasteczek (cookies) w PHP
Ciasteczka (cookies) umożliwiają:
Zachować informację o stanie aplikacji przed jej zamknięciem.
Odtworzenie informacji po jej ponownym otwarciu z specjalnego pliku cookie.
Przechowywać dane lokalnie na komputerze użytkownika w postaci specjalnego pliku cookie.
Tworzenie ciasteczek o określonej nazwie, wartości, dacie ważności/trwałości:
gdzie funkcja time() zwraca aktualny stan systemowy, do którego dodajemy tyle sekund ile plik ciasteczka ma być obecny na dysku przed jego automatycznym skasowaniem. Jeśli więc chcemy szybciej usunąć określone ciasteczko (cookie), wtedy można skrócić jego czas trwania do zera lub go po prostu usunąć:
Utwórzmy teraz ciasteczko powitalne, które będzie wskazywało na to, iż użytkownik był już na tej stronie i zależności od tego zostanie podjęta odpowiednia akcja:
if (!isset($_COOKIE['visited'])) { echo 'Witam Cię na mojej stronie!'; }
else { echo 'Witam Cię ponownie na mojej stronie!'; } setcookie ('visited', '1', time() + 60 * 60 * 24 * 365);
A teraz utwórzmy bardzo prosty licznik odwiedzin:
<?php
if (!isset($_COOKIE['visitno'])) { $_COOKIE['visitno'] = 0}
$visitno = $_COOKIE['visitno'] + 1;
setcookie ('visitno', $visitno, time() + 3600 * 24 * 365);
?>
// A później w sekcji body dokumentu XHTML umieszczamy taki skrypt:
<?php
if ($visits > 1) { echo "Miło mi, że odwiedzasz mnie po raz $visitno."; }
else { echo "Witam na mojej stronie po raz pierwszy"; }
?>
UWAGA: Z poziomu przeglądarki można zablokować możliwość pracy z ciasteczkami lub można usunąć istniejące ciasteczka z dysku <?php unset($_COOKIE); ?>, a więc nie jest to pewny sposób przechowywania danych o użytkowniku. Bezpieczniej jest to robić na serwerze, wykorzystując do tego bazy danych. Można więc wykorzystać zmienne sesji lub zmienne globalne do zapisywania ważnych danych zamiast ciasteczek. Różnica polega na tym, iż zmienne sesji dostępne są tylko dla sesji połączenia się serwera z daną aplikacją kliencką (użytkownikiem), natomiast zmienne globalne dostępne są dla wszystkich sesji i wszystkich użytkowników. Ponadto sesja PHP automatycznie może umieszczać w przeglądarce internetowej cookie zawierające indentyfikator użytkownika podczas jego odwiedzin na stronie. Przeglądarka wtedy wysyła cookie wraz z wszystkimi żądaniami stron z tej witryny, co pozwala PHP na określenie, z której z trwających sesji pochodzi określone żądanie. Za pomocą takich tymczasowych plików umieszczonych na serwerze PHP śledzi zmienne zarejestrowane w każdej sesji oraz ich wartości. Mechanizm sesji w PHP działa również przy wyłączonej obsłudze cookies. Jeśli PHP wykryje, że przeglądarka użytkownika nie obsługuje cookies lub są one wyłączone, wtedy automatycznie dodaje identyfikator sesji jako zmienną łańcucha zapytania do wszystkich względnych odnośników w witrynie, a dzięki temu będzie on przekazywany do kolejnych podstron. Żeby można było skorzystać z takiego mechanizmu, wszystkie strony witryny WWW muszą być plikami PHP, a ponadto w pliku php.ini należy włączyć opcję session.use_trans_sid oraz inne parametry:
W celu uruchomienia skryptów PHP trzeba je umieścić na serwerze obsługującym je. Przygotowane pliki można przekopiować na serwer np. przy pomocy darmowego programu WinScp. Pliki umieszczamy w katalogu "public_html" lub w którymś jego podkatalogu. Do uruchomienia pliku PHP po stronie serwera jest jeszcze niezbędne nadanie mu odpowiednich praw wykonania, wchodząc we właściwości takiego pliku i ustawiając prawa dostępu ósemkowo na "0755".
lub