JavaScript – podstawy i popularne metody wykorzystywania

Język JavaScript (w skrócie JS) należy do grona skryptowych języków programowania zorientowanych obiektowo. Wersja 1.0 ukazała się w 1996 roku wypromowana przez bardzo znaną w owym czasie firmę Netscape Communications (twórcę popularnej przeglądarki Netscape Navigator). Głównym pomysłodawcą oraz autorem języka był pracownik Netscape Communications Corporation Brendan Eich, aktualnie pracownik Mozilla Fundation. 

Co to jest Java Script?

Język JavaScript wykorzystywany jest w tworzeniu stron WWW. Język ten został zaprojektowany jako rozwinięcie do popularnego języka HTML. Ze względu bezpieczeństwa JS nie ma możliwości ingerowania w operacje zapisu danych np. do pliku na komputerze klienta.

Największą zaleta tego języka jest prostota tworzenia skryptów, już po kilkuminutowym kursie znamy podstawy, składnię języka oraz jesteśmy w stanie pisać proste skrypty. Inną zaletą jest to, że kod wykonywany jest po stronie przeglądarki internetowej, która musi mieć wbudowaną i uaktywnioną obsługę JavaScript. Dzięki takiemu rozwiązaniu wszelkiego rodzaju skrypty umieszczone w kodzie strony nie obciążają serwera, na którym jest umieszczona strona internetowa oraz niwelują generowanie zbędnych danych na linii klient-serwer. Najnowsza wersja języka JS pozwala na tworzenie atrakcyjnych wizualnie stron internetowych, nowe funkcje języka pozwalają na modyfikację grafiki oraz uzyskanie w prosty i szybki sposób ciekawych i skomplikowanych efektów graficznych.

Osadzanie skryptu JS w plikach html

Wyróżniamy dwa sposoby umieszczania skryptu JS w plikach *.html. Pierwszym sposobem jest umieszczenie kodu bezpośrednio w pliku html. Umieszczenie kodu zadeklarowane jest przez element 'script’, po którym podajemy znacznik 'type’ obrazujący typ skryptu oraz opcjonalnie znacznik 'language’ odpowiadający wersji języka JS. Skrypt zamykamy poleceniem '/script’.

Przykład:

<script type="text/javascript" language="JavaScript 1.5">
kod skryptu
</script>

W przypadku, gdy nasze skrypty są rozbudowane oraz w celu zachowania przejrzystości kodu HTML istnieje możliwość umieszczana kodu JS w osobnym pliku oraz zamieszczenie do niego odnośnika z kodem w dokumencie html. Plik zawierający kod JavaScript ma rozszerzenie *.js.

Aby umieścić zewnętrzny skrypt JS zapisany w pliku należy po znaczniku 'script’ umieścić zmienną 'src’ odwołującą się do lokalizacji pliku. Przykład:

<script type="text/javascript" src="moj_skrypt.js"></script>

Dodatkową zaletą umieszczania kodu JS w pliku jest fakt, że możemy go wykorzystać dowolną ilość razy, np. w sytuacji gdy w pliku mamy funkcję liczącą sumę poszczególnych zmiennych, zamiast kopiować i wklejać rozbudowany kod w pliku html, możemy kilkukrotnie umieścić odwołania do pliku ze skryptem.

Komentarze w języku JavaScript możemy podzielić na 2 kategorie – komentarze liniowe oraz blokowe. Komentarz liniowy zaczyna się od znacznika '//’ tekst umieszczony po znaczniku aż do końca linii zostanie zinterpretowany przez przeglądarkę jako komentarz. Komentarz blokowy rozpoczyna się od znacznika '/*’ , a kończy znacznikiem '*/’, tekst umieszczony pomiędzy znacznikami traktowany jest jako komentarz.

Document.write

Podstawowym elementem pozwalającym wypisać tekst na ekranie w języku JS jest instrukcja document.write. W powyższej instrukcji uwidacznia się obiektowy charakter języka JavaScript. Analizując instrukcję document.write widzimy obiekt document, który określa nam bieżącą stronę oraz metodę write, która odpowiada za wypisanie tekstu. Wewnątrz instrukcji możemy także umieścić znaczniki HTML. Przykład użycia instrukcji w kodzie:

document.write("Hello Word")
document.write("Hello Word")

Pamiętajmy, że wypisywany tekst musimy zamieścić w cudzysłowie. W jaki zatem sposób umieścić np. cytowany tekst? Znaki specjalne w instrukcji document.write poprzedzamy backslashem (ukośnikiem w lewo):

document.write("Przykładowy tekst \"Hello Word \"")

Document.write ma za zadanie zobrazować obiektowość języka JS. Poznanie istoty działania języka jest niezbędne aby ułatwić czytanie skryptów.

Document.cookie

Innym ważnym elementem języka JavaScript jest dostęp do plików cookie (ciasteczka), w których przeglądarka zapisuje odpowiednie dane np. informacje o ostatnim logowaniu użytkownika, datę logowania, numer IP itp. Za obsługę ciasteczek w języku JS odpowiada instrukcja document.cookie. Przykład użycia (zapisanie informacji):

document.cookie = "Nazwa1=wartosc1; expires=Mon, 18 May 2009 23:00:10 GMT; 
domain=kreator.kei.pl";

Zastosowanie JS na przykładzie statystyk odwiedzin

Skrypty JavaScript wykorzystywane są między innymi przez różnego rodzaju liczniki oraz statystyki internetowe. Zasada ich działania bazuje na popularnym w sieciach komputerowych połączeniu klient-serwer. Polega na założeniu konta na serwerze, na którym działa główne oprogramowanie statystyk oraz umieszczeniu specjalnego kodu JS na stronie klienta. Kod ten ma za zadanie przesyłanie odpowiednich danych (data, godzina, liczba wywołań, IP odwiedzającego, przeglądarka z której nastąpiło logowanie, itp.) do serwera, który analizuje dane oraz odpowiada za prezentacje wyników.

Przed wklejeniem kodu JS odpowiedzialnego za przesył danych do serwera statystyk należy pamiętać, że wiele serwisów oferujących darmowe statystyki zastrzega (przynajmniej ta informacja powinna być uwzględniona w licencji/regulaminie) wyświetlenie reklam. Dlatego przed rejestracją na serwerze oferującym darmowe statystyki należy wcześniej przeczytać regulamin.

Pamiętajmy o tym, że w przypadku umieszczenia kodu JavaScript na końcu dokumentu, w momencie wystąpienia błędu i niepełnego wczytania pliku (kod JS nie wykona się) licznik nie zaliczy nam wizyty na stronie. W przypadku częstych rozłączeń, statystyki zostają obarczone błędami.

Nie zapominajmy, JavaScript jest językiem programowania i mimo zabezpieczeń (m .in. brak możliwości zapisu informacji do pliku) może zostać wykorzystany przez cyberprzestępców. Dlatego doklejając skrypt JS do kodu strony zwracajmy uwagę przede wszystkim na taki element jak dobre okomentowanie skryptu. Komentarze pozwalają nam zrozumieć działanie poszczególnych elementów kodu. Kolejnym elementem, na który warto zwrócić uwagę jest przekierowanie na zewnętrzne adresy (URL). Jeżeli nie znamy pochodzenia skryptu, nie umieszczajmy go w naszej witrynie. Zdarza się, że przekierowanie następuje na specjalnie przygotowane, zawirusowane strony internetowe.

Katarzyna Węgiel

Pasjonatka i praktyk działań inbound marketing. Testerka nowych rozwiązań pozycjonujących markę w umyśle klienta. Łączę teorię z praktyką. Wykorzystuję social media do efektywnego budowania relacji z klientem. Na co dzień zajmuję się kreowaniem wizerunku i świadomości marki w komunikacji on i off –line.