Ciekawe i istotne rozwiązania dla stron www
lelahel.pl/javascript. Rozwijanie javascriptu
Ogólnie o javascript. Rozwijanie javascript. W skrócie o wyrażeniach regularnych.
Javascript jest obiektowym skryptowym językiem programowania.
Pod pojęciem zaznaczonym tą czcionką możesz znaleźć krótką definicję danego pojęcia, np. 'obiektowy'.
Javascript został opracowany przez Netscape. Organizacja ECMA wykonała na jego podstawie standard pod oficjalną nazwą ECMAScript. Po stworzeniu przez organizację W3C standardu DOM, za pomocą javascriptu można bez problemów manipulować zawartością dokumentu. Wcześniej też było to możliwe, tyle że przy użyciu różnych kolekcji dla różnych przeglądarek. Dla Netscape była to kolekcja: document.layers , już nie implementowana w przeglądarkach Mozilla Firefox. Dla Internet Explorera obowiązywała, wciąż implementowana: document.all . Piszę o tym, ponieważ wciąż można spotkać na stronach z dość wysokim Page Rank Google'a,
(czyli wyświetlanych przy poszukiwaniu na wysokich pozycjach)oferowanych jako tutoriale, rozwiązania z użyciem tych kolekcji.
Opracowano różne odmiany javascript, interpretowane przez różne silniki. Mozilla, Microsoft i inni stworzyli środowiska umożliwiające tworzenie aplikacji javascriptowych. Wielu autorów utworzyło i tworzy rzeczy określane u nas jako biblioteki programistyczne, a w ang 'framework'. Później omówimy niektóre z bardziej szczegółowo . Są to oddzielne pliki z kodem javascript, które zwykle upraszczają pracę programisty, bo zawierają klasy i interfejsy powtarzające się w różnych rozwiązaniach . Poza tym nie trzeba przy ich użyciu pamiętać o różnicach w implementacji języka javascript w różnych przeglądarkach, bo je już uwzględniają. Często powstały w celu łatwego powielania ( z możliwością adaptacji) konkretnych rozwiazań interfejsu użytkownika, czy wyglądu strony WWW (np. użycie harmonijki, czyli 'accordion').
Skrypty javascript umieszcza się na stronie z użyciem tagu <script> W <head> umieszcza się np.plik zewnetrzny js.: <script type="application/javascript" src="jquery.js"></script>. Dopuszczalny jest wpis: <script type="text/javascript" src="jquery.js"></script> aczkolwiek przestarzały, zgodnie ze specyfikacją w RFC 4329 dokumentacji IANA. Jeżeli kod znajduje się w dokumencie XHTML, w celu uniknięcia zinterpretowania niektórych operatorów jako elementów składni języka należy otoczyć skrypt
sekcją CDATA lub zapisać je w postaci encji. W XHTML nie można używać argumentu language w znaczeniu określenia wersji języka JS. Tutaj to atrybut oznaczający język, np EN,PL. Przykład zapisu: <script type="text/javascript">/* <![CDATA[ */ kod javascript; /* ]]> */</script> Koniecznie należy sprawdzić, czy przeglądarki interpretują tak zapisany skrypt dla danego dokumentu. Chodzi głównie o typ, czyli <!DOCTYPE... Wewnątrz dokumentu, np w <body> umieszczamy skrypt np. tak <script type="text/javascript" language="JavaScript 1.5">linijki kodu;</script> lub tak:<script type="text/javascript" >linijki kodu;</script> Używanie atrybutu language wydaje się niecelowe,
chyba, że z jakichś powodów chcemy odnieść się do konkretnej wersji javascript. Kolejne wersje różnią się zwłaszcza implementacją tablic oraz dat.
Istnieje wiele podręczników (tutorials) opisujących strukturę i zastosowanie javascript. Nie ma więc sensu tutaj ich powtarzać. Uwaga: Internet Explorer nie wykona zapisu w body: <script type="application/javascript">kod</script> Musi mieć text, nie application. Poniżej wykonanie następującego skryptu:
<script type="text/javascript">
document.write("<p style='font-family:\"Monotype Corsiva\",Georgia,Serif;color:#330099'><b>\"To mój pierwszy kod JS!\"- powiedział Jurek</b></p>");
</script>
Jak widać, za pomocą kodu javascript, możemy wykonać nawet całą stronę WWW, jako że można w nim zamieścić m.in. tagi HTML i kod CSS. Ukośniki wsteczne (The backslash \) użyłem, by interpreter nie potraktował cudzysłowów jako integralnej części kodu. Za owymi ukosnikami umieszcza się zresztą szereg znaków specjalnych - Special Characters . Te ukośniki nazywa się niekiedy znakami ucieczki - Escape Characters .Język dysponuje deklaracjami (statements), operatorami (operators), zmiennymi (variables), instrukcjami warunkowymi (if; if...else), obiektami (String, Date, Array, Boolean, Math, RegExp ). Możemy z jego użyciem manipulować dokumentem, czyli stroną, wykorzystując wspomnianą wyżej jej reprezentację i interfejs DOM . Dysponuje konstrukcją Try...Catch oraz Throw pozwalającymi na radzenie sobie z ewentualnymi błędami podczas działania kodu. Pozwala okreslić dane przeglądarki, tworzyć i przechowywać ciasteczka, sprawdzać dane worowadzone przez użytkownika poprzez form, animować tekst i obrazki, tworzyć obszary na obrazku (Image Maps, które użytkownik klika w celu wykonania jakiejś akcji, wykonać akcję po określonym czasie (Timing Events), kreować własne obiekty (w odróżnieniu od wbudowanych), dodawać właściwości i metody do obiektów istniejących (właściwość prototype).
Javascript rozróżnia duże i małe litery ( jest case sensitive ) w przeciwieństwie do HTML. Jak już wspomniałem, dysponuje obiektami, czy klasami, z których niekiedy trzeba, za pomocą new tworzyć instancje, by móc je użyć. Oto przykład:
Zastosowany w przykładzie kod:
<script type="text/javascript">
var now=new Date();
var cza= now.toLocaleDateString();
document.write("Mamy dzisiaj: " + cza);
</script>
Zwracam uwagę na funkcję toLocaleDateString(), która powoduje, że przeglądarka wyświetla datę po polsku. Internet Explorer jest tu poprawniejszy, pisząc 'września', gdy Firefox oznajmia, że jest wrzesień. To jeden z dość licznych przykładów, mniej lub bardziej utrudniających życie autorom stron WWW. Istnieją większe różnice dotyczące implementacji DOM, wykorzystywania zdarzeń- Events. Jeśli ich nie uwzględnimy, któraś z przeglądarek kodu nie wykona.
Składnia javascript oparta jest na ASCII , dlatego w nazwach zmiennych czy funkcji nie należy stosować polskich znaków diakrytycznych . Łańcuchy, czyli string mogą oczywiście je zawierać, co widać na przykładzie " To mój pierwszy kod JS ".
W skrócie o wyrażeniach regularnych.
Powyżej zastosowano następujący zapis:
<script type="text/javascript">
function checkpostal(){
var numer=/^\d{5}$/ //wyrażenie regularne definiujące 5-cio cyfrowy numer
if (document.myform.myinput.value.search(numer)==-1) //jeśli wpis nie pasuje do wyrażenia
{
alert("Proszę wpisać pięciocyfrowy numer !")
}
else
{alert("Wpisane dane pasują do zastosowanego wyrażenia regularnego")
}
}
</script>
<form name="myform">
<input type="text" name="myinput" size=15>
<input type="button" onClick="checkpostal()" value="Sprawdź">
</form>
Wyrażenia regularne (ang. regular expressions, w skrócie regex lub regexp) – wzorce, które opisują łańcuchy symboli. Wyrażenia regularne mogą określać zbiór pasujących łańcuchów, mogą również wyszczególniać istotne części łańcucha. Pozwalają opisywać wzorce tekstu, natomiast istniejące algorytmy określają, czy podany ciąg znaków pasuje do wzorca lub wyszukują w tekście wystąpienia wzorca. Wykorzystują też wsteczne referencje, czyli używają wcześniej dopasowanego fragmentu tekstu jako części wzorca. Wyrażenia regularne są elementami edytorów tekstu, języków programowania a także tworzą odrębne biblioteki dla wszystkich języków używanych obecnie. Dwie najpopularniejsze składnie wyrażeń regularnych to składnia uniksowa i - znacznie bardziej rozbudowana - składnia perlowa.
W javascript, wyrażenia regularne są zaimplementowane w postaci:
- literalnej (dosłownej); składnia:
var RegularneWyr = /wzorzec/; - jako obiekt RegExp, instancję którego używa się w kodzie dynamicznie, czyli gdy wzorzec jest określany podczas działania kodu:
var RegularneWyr = new RegExp("wzorzec");
Żeby użyć wyrażenia regularnego w celu porównania z nim danego łańcucha (string), trzeba najpierw zdefiniować łańcuch - wzorzec (pattern), a następnie użyć odpowiedniej metody javascriptowego obiektu String do wykonania akcji -np. wyszukania (search) czy zamiany (replace). W przykładzie użyto search().
W sieci jest dużo kursów opisujących wyrażenia regularne. Wydaje mi się, że przystępnie a jasno pisze o nich p.Łukasz Grabuń Strona o wyrażeniach.. Z kolei p. Maciej Lasyk opracował stronę do testowania wymyślonych przez jej użytkowników wzorców regex Sprawdzacz . Zwracam uwagę by nie popadać w przesadną dumę, jeśli nasze wyrażenie będzie pasować do naszego ciągu, który chcemy sprawdzić - czyli da wynik TRUE . Należy jeszcze wpisać ciągi dla których, według nas, powinno dać FALSE . Rzecz w zachłanności (greedy) wyrażeń regularnych. Na przykład wyrażenie <.+ > powinno dopasować znak <, następnie dowolną, niepustą treść za nim, następnie znak >. Czyli powinno np. znaleźć jeden tag HTML jak <p> w sprawdzanym łańcuchu. Niestety, jeśli zastosujemy go do np. źródła strony, gdzie jest dużo znaczników HTML, to pokaże nam całą tę stronę bez mała, jako pasującą do wzorca...
Innym problemem dotyczącym regex, jest oparcie ich na ASCII. Przykład z cyframi działa bez zarzutu, ale przy sprawdzaniu liter, te z polskimi znakami diakrytycznymi zostaną odrzucone. Istnieje wprawdzie zapis wyrażeń regularnych dla UTF-8 , ale nie spotkałem jakoś przykładów ich praktycznego zastosowania.
