Kurs JavaScript - Wprowadzenie Udostępnij na: Facebook

  • Artykuł

Autor: Artur Jankowski

Opublikowano: 2011-11-07

Wstęp

W dzisiejszych czasach większość stron internetowych zapewnia interaktywność na różne zdarzenia, które mogą wystąpić po stronie klienta. Jeszcze niedawno podstawowym przykładem takiej interaktywności była walidacja poprawności danych. Obecnie większość z nas użyłaby do tego jQuery czyli frameworka języka JavaScript. Wysyłanie źle wypełnionego przez użytkownika formularza tylko po to, aby serwer zwrócił nam informację o niepoprawności wprowadzonych danych, mija się z celem. Zamiast zbędnego wysyłania danych od klienta do serwera, po kilkakroć możemy sprawdzić wprowadzone przez użytkownika dane przed ich wysłaniem. Język, którego wymieniona na wstępie funkcjonalność to zaledwie kropla w morzu spośród jego nieograniczonych możliwości, nosi nazwę JavaScript.

Trochę historii

Zanim przejdziemy jednak do opisu i semantyki tego języka skryptowego, zagłębimy się trochę w jego historię po to, aby zrozumieć jego powstanie. Wszystko zaczęło się więc wtedy, kiedy już dość rozpowszechniony Internet, jako zbiór statycznych dokumentów HTML, przestał wystarczać ambitnym developerom. Problemem dla nich stała się słaba interakcja z użytkownikiem. Wtedy to projektanci stron WWW mając wybór pomiędzy apletami Javy a językiem LiveScript, dokonali wyboru właśnie języka LiveScript, który to został dołączony do przeglądarki Netscape 2.0 w 1995 roku, pod nazwą, znaną dziś już wszystkim, JavaScript. Jego głównym twórcą był Brendan Eich. Język ten szybko został zaakceptowany przez społeczność, a przeglądarki zaczęły być dostosowywane do jego obsługi. W niedługim czasie Microsoft, w produkcie Internet Explorer 3.0, wzbogacił przeglądarkę o język JScript. Język ten był rozszerzonym produktem początkowym czyli JavaScript, posiadał jednak kilka dodatkowych funkcjonalności. Kluczowym momentem, dzięki któremu wszystkie obecne przeglądarki obsługują język JavaScript w ten sam sposób, jest stworzenie specyfikacji ECMAScript. Dokument ten jest ustandaryzowaniem różnych implementacji tego języka w jedną całość, gdzie obecnie obowiązujący standard to ECMA-262.

Wprowadzenie

Czym zatem jest dziś JavaScript?

Przede wszystkim jest to język skryptowy, którego głównym środowiskiem jest przeglądarka. Jest to również interpretowany prototypowany język obiektowy.

Podstawy JavaScript – zaczynamy zabawę

Zanim osadzimy kod JavaScript na stronie internetowej, konsorcjum standaryzacyjne W3C zaleca, aby umieścić znacznik w nagłówku dokumentu HTML, który będzie definiował domyślny język skryptowy strony.

W przypadku języka JavaScript wpis miałby taką postać:

<meta http-equiv="Content-Script-Type" content="text/javascript">

W przypadku braku powyższego wpisu w dokumencie, przeglądarka będzie próbowała ustalić domyślny język skryptowy na podstawie nagłówka http, otrzymanego z serwera.

Umieszczanie skryptów

Skrypty można umieszczać w dokumencie HTML na dwa sposoby:

  • poprzez umieszczenie skryptu w kodzie HTML w sekcji <head> bądź <body> dokumentu w postaci następującego kodu (jest to tak zwany skrypt osadzony):
<script type="text/javascript">
  tutaj kod skryptu
</script>
  • Wskazanie w sekcji <head> skryptu znajdującego się w oddzielnym pliku
<script type="text/javascript" src="lokalizacja skryptu">
</script>

Przykładowo

<script type="text/javascript" src="/Scripts/jquery-1.4.1-vsdoc.js"></script>

Jak widać, w powyższym przykładzie, src wskazuje adres URL lub ścieżkę do pliku.

Taki plik powinien mieć rozszerzenie .js, a w jego zawartości powinien znajdować się jedynie kod skryptu, a zatem znaczniki <script></script> są zbędne.

Komentarze w pliku .js

Pisząc własne skrypty, często mamy potrzebę dodania do niego komentarza po to, aby np. przy następnym odwiedzeniu tego pliku, po pewnym czasie, zrozumieć działanie wybranego kodu. Komentarze w języku JavaScript są podzielone na liniowe i blokowe.

Komentarz liniowy to taki, który rozpoczyna się dwoma znakami slash „//” i trwa do końca linii.

// Komentarz liniowy

Komentarz blokowy to taki, który rozpoczyna się slashem i gwiazką „/*”, kończy się również tymi samymi znakami, jednak w odwrotnej kolejności „*/”. Nie jest ograniczony tak, jak komentarz liniowy i może trwać przez wiele linii kodu. Jest on zatem często wykorzystywany do tymczasowego zakomentowania fragmentu kodu.

/*
function ShowMessage()
{    alert('Witaj');
}
*/

Obydwie metody mają zarówno swoje wady i zalety. Pierwsza z nich, czyli osadzenie kodu skryptu bezpośrednio w stronie, zwalnia nas od stworzenia dodatkowego pliku .js, w którym byłby trzymany tworzony przez nas skrypt. Jednakże gdybyśmy musieli umieścić ten sam skrypt na wielu stronach, wówczas korzystniejsze by było umieszczenie go w odrębnym pliku. Dzieje się tak, iż każda zmiana naszego skryptu ogranicza się do zmiany tylko jednego pliku, zamiast wszystkich, tam, gdzie ten skrypt występuje. Ponadto przeglądarka internetowa, ładując strony z serwera, ładuje taki plik tylko raz i przy kolejnych odwołaniach do niego nie musi go ponownie ściągać. Dodatkowo trzymanie skryptów w oddzielnym pliku zwiększa przede wszystkim czytelność pliku.

Poniżej przedstawiam przykład, obrazujący to co do tej pory opisałem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>Tytuł strony</title>
    <script type="text/javascript" src="/Scripts/testScript.js">
    </script>
  </head>
  <body>
    <script type="text/javascript">
function ShowMessage()
{
    alert('Witaj');
}
    </script>
    <input type="button" value="Wyświetl" onclick="ShowMessage();"></input>
  </body>
</html>

Jest to prosty przykład, w którym po kliknięciu na przycisk Wyświetl pojawi się okno dialogowe z napisem „Witaj”. Osiągnęliśmy to poprzez podpięcie pod zdarzenie „onclick” naszej metody skryptowej, zdefiniowanej w sekcji <body> pod nazwą „ShowMessage”. Temat zdarzeń zostanie opisany w dalszej części niniejszego dokumentu. Metoda „ShowMessage” nie robi nic ponad wywołanie metody alert z parametrem typu string. Jest to jedna z wbudowanych metod JavaScript, wyświetlająca takie właśnie okna dialogowe z tekstem, który do niej podaliśmy.

Podstawy języka JavaScript

Zmienne

jest zmienne służą do przechowywania danych i ich wyników, w celu dalszego ich wykorzystania, wg zasady, że lepiej jest coś obliczyć raz niż parę razy. By korzystać z takiej zmiennej, należy wykonać dwie czynności:

Zadeklarować zmienną

  • Nadać jej wartość

Przy deklaracji zmiennych wykorzystywane jest słowo kluczowe var, poprzedzające nazwę zmiennej:

var moja_zmienna;
var zmiennaNumer101;
var _kolejna_juz_nr3_zmienna;

Jak widać nazwy zmiennych mogą składać się z dowolnej kombinacji liter, cyfr i znaku podkreślenia „_”. Jednakże nie można nazwać zmiennej, zaczynającej się od cyfry bądź będącej słowem kluczowym w JavaScript, np. „while”. Warto tu również dodać, że wielkość liter ma znaczenie, a zatem:

var zm1=4;
var Zm1=”Ala ma kota”;

Są to zupełnie inne zmienne. Warto tu również zauważyć, że zmienne JavaScript nie mają określonego typu, jak jest to w innych językach programowania. Typ ten jest przypisywany do zmiennej po nadaniu jej wartości. Aby sprawdzić typ zmiennej, można użyć funkcji „typeof(zmienna)”. Przykładowo, po wywołaniu takiej instrukcji:

typeof(Zm1);

Zostanie nam zwrócony typ "string"

A po wywołaniu typeof(zm1) otrzymamy „numer”.

Typy danych

Dowiedzieliśmy się, że przy deklaracji zmiennych w JavaScript nie podajemy im typu, jednak po nadaniu im wartości, typ ten jest im przypisywany. W

  • numer – liczba całkowita lub zmiennoprzecinkowa, np. 5, 123.45,
  • string – ciąg znaków o dowolnej długości, np. „ala ma kota”,
  • boolean– wartość boolowska, która może przyjąć jedną z dwóch wartości true lub false,
  • undefinied– ten typ zawiera zmienne, którym nie została nadana żadna wartość,
  • null – wartość pusta; jest to kolejny, specjalny typ danych, oznaczający „nic”; różnica pomiędzy undefinied jest taka, że wartość null jest wartością zdefiniowaną, pustą.

W JavaScript istnieją również złożone typy danych. Są to:

  • object – obiekty,
  • array – tablice, np. var tab1[]; var tab2=[“ala ma”,2, “koty”].

JavaScript istnieją następujące proste typy danych:

Operatory

Operatory w JavaScript można podzielić na następujące kategorie:

  • arytmetyczne (+,-,*,/,%) 

    Var zm1,zm2;
    Zm1=6;
    Zm2=10;
    Zm1=zm1 * zm2;

  • Porównania (<,>,<=,>==,!=,!==,===) przy czym dwa ostatnie służą do porównania typów zmiennych, a nie ich wartości 

    (a>b)

  • logiczne (&&, !, ||)

     ((a>b) && (b<c) )

  • Bitowe (<<.>>,<<<,>>>,&,^,~)

  • Przypisania (+=,*=,-=,/=,%=)

  • Pozostałe

Warunki i pętle

Warunki to inaczej kontrola przepływu sterowania kodu, natomiast pętle umożliwiają nam powtórzenie pewnych operacji wybraną ilość razy, bez konieczności pisania tego samego kodu kilka razy.

  • Warunek if
if(zm>10)
{
    //kod
}

Jeżeli kod w nawiasie warunkowym (zm>10) zostanie spełniony, wówczas kod bloku zostanie wywołany. Warunek w nawiasie zawsze zwraca wartość logiczną czyli boolean. Może on zatem zawierać porównania, operacje logiczne, zmienne, które również zwracają wartość logiczną, czy ich kombinacje.

Warunek ifmoże opcjonalnie zawierać część else. W części tej umieszcza się kod, który ma zostać wykonany w przypadku, jeżeli nie zostanie spełniony warunek ustalony w części if.

if(typeof(zm)!=”undefined”)
{
//kod                                                                                                                                                                                                                                                 
}
else
{
    //kod alternatywny
}

Możliwe jest również zbudowanie całego drzewa warunkowego, którego struktura wygląda następująco:

if(warunek 1){}
else if (warunek2){}
else if(warunek3){}
…
else{}
  • Switch

Alternatywą dla instrukcji if jest switch. Zaleca się jej stosowanie gdy instrukcja if ma zbyt wiele części warunkowy.

var zm=’ala’;

switch(ala){
case ‘ala’:
    //ciąg instrukcji
    break;
case ‘ma’:
//ciąg instrukcji
    break;
default:
    //ciąg instrukcji alternatywnch
    break;
}

W instrukcjach typu switch, najczęściej używanym parametrem jest zmienna, aczkolwiek może tu być wszystko, co zwraca tylko jakąś wartość. Po każdej z podanych instrukcji case,następuje pewne wyrażenie. Jeżeli to wyrażenie odpowiada wyrażeniu podanemu w instrukcji switch, wówczas uruchomiony zostanie kod po dwukropku. Warto zauważyć, że w powyższym przykładzie, pod koniec każdej instrukcji case, znajduje się instrukcja break. Instrukcja ta jest opcjonalna, jednakże zalecana w większości przypadkach. Działa ona w taki sposób, że po wykonaniu kodu, związanego z daną wartością case,opuszczana jest instrukcja switch. Gdyby jej jednak nie było, kod związany z kolejną instrukcją casebyłby wykonany itd. Z kolei część default wyrażenia warunkowego wykonywana jest w sytuacji, jeśli żaden z powyższych warunków casenie został spełniony. Część ta jest opcjonalna.

  • Pętle

W języku JavaScript istnieją cztery rodzaje pętli:

  • for
  • for…in
  • while
  • do…while

Pętla for

Jest to najbardziej popularną wśród pętli.

for(var i=0;i<10;i++)
{
    //kod
}

Jak widać, pętla for została podzielona na trzy części, oddzielone od siebie średnikami(;).

Pierwsza część przeznaczona jest na definicję i inicjalizację zmiennych, używanych dalej w pętli. W powyższym przykładzie umieściłem jedną zmienną, aczkolwiek po przecinku można zadeklarować ich dowolną ilość.

Druga część pętli to warunek, do którego pętla pracuje. Warunek ten sprawdzany jest przed każdą kolejną iteracją i w przypadku, gdy przestaje on być spełniony, pętla przestaje działać.

Trzecia część pętli to część inkrementacji. Kod w niej umieszczony, wywoływany jest po każdej iteracji, przed sprawdzeniem warunku działania pętli.

Pętla for…in

Używana jest do iteracji po elementach tablicy.

var tab=[‘ala’,’ma’,’kota’];
                var zm;
        for(var i in tab)
{
zm+= i + ‘ ’;
}

Pętla while

Jest ona najprostszym typem pętli.

var zm=0;
While(zm<10)
{
zm++;
}

Pętla ta wykonuje się, dopóki warunek w nawiasie pozostaje spełniony i ma wartość true.

Pętla do…while

Ta pętla jest bardzo podobna do pętli while. Jest jednak pewna różnica, a mianowicie taka, że warunek pętli sprawdzany jest na jej końcu, przed następną iteracją. Skutkuje to tym, że pętla do…while zawsze wykona się co najmniej raz, podczas gdy pętla while nie musi wykonać się ani razu.

var zm =0;
do
{
zm++;
alert(zm);
}while(zm<10)

Funkcje

Funkcja to nazwany zgrupowany kod, który przy wykorzystaniu tej nazwy zostanie wykonany.

function Mnozenie(a,b)
{
var c =a*b;
return c;
}

Funkcja składa się z następujących części:

  • słowa kluczowego function,
  • nazwy, w tym przypadku Mnożenie,
  • parametrów, oddzielonych przecinkami, w tym przypadku a i b,
  • ciała funkcji,
  • opcjonalnej instrukcji return, jeżeli funkcja zwraca jest wartość; tak naprawdę funkcja zawsze zwraca pewną wartość i gdy nie zrobimy tego w jawny sposób, zwracana jest automatycznie wartość undefinied.

Wywołanie funkcji to podanie jej nazwy wraz z jej parametrami.

var wynik = Mnozenie(5,6);

W przypadku, gdy pominiemy parametry, zdefiniowane w funkcji, automatycznie nadane zostaną im wartości undefinied. W związku z tym wywołanie funkcji Mnozenie(10) zwróci nam wartość NaN, a nie, jakby ktoś mógł się spodziewać, 0.

Natomiast, gdy do funkcji dodamy większą ilość niż tą, która była w niej zadeklarowana, to po prostu zostaną one zignorowane.

Istnieje możliwość, aby funkcja wywołała samą siebie. Takie zachowanie nazywamy rekurencją. Wówczas należy pamiętać, aby określić warunek, kiedy funkcja powinna bezpośrednio zwrócić wartość, zamiast kolejny raz wywołać samą siebie.

Przykład rekurencyjnej funkcji, liczącej silnię:

function Silnia(n)
{
    If(n==0)
{
return 1;
}
else
    return n* Silnia(n-1);
}

Zdarzenia

Zdarzenia w JavaScript to mechanizm, pozwalający na uruchomienie dowolnego skryptu w momencie jego wystąpienia, np. załadowania całej strony lub ramki(onload), czy kliknięcie przycisku jak to było pokazane we wcześniejszej części dokumentu:

„onclick="ShowMessage();”

W momencie wciśnięcia klawisza, występuje zdarzenie onclick, które wywołuje podpiętą do niej metodę.

Zdarzenia w języku JavaScript zazwyczaj zaczynają się od prefixa „on”. Tak więc kliknięcie „click” będzie się nazywało „onclick”, najechanie myszką onmouseover „onmouseover” itd.

Aby obsłużyć zdarzenie, nie ma potrzeby przypisania pod nie funkcji. W przypadku, jeżeli kod, który ma zostać wywołany, jest nie dłuższy niż pojedyncza instrukcja, zaleca się wpisanie skryptu bezpośrednio jak poniżej.

<input type="button" value="Wyświetl" onclick="alert(‘Witaj’);"></input>

Podczas obsługiwania zdarzenia, mamy dostęp do słowa kluczowego this, które jest referencją do elementu, które dane zdarzenie wywołał. W przypadku naszego zdarzenia onclick, this będzie wskazywać na buton, gdyż to za jego sprawą zdarzenie zostało wywołane. Dzięki temu możemy się bezpośrednio odwołać do klikniętego elementu bez konieczności szukania go w drzewie DOM.

Lista zdarzeń myszy, które możemy obsłużyć to:

  • onclick – pojedyncze kliknięcie (naciśnięcie i zwolnienie klawisza myszki),
  • ondblclick – podwójne kliknięcie,
  • onmousedown –wciśnięcie klawisza myszki,
  • onmouseup –zwolnienie klawisza myszki,
  • onmouseover – kursor myszki znalazł się w obszarze obiektu,
  • onmousemove – kursor myszki został przesunięty,
  • onmouseout – kursor myszki opuścił obszar obiektu.

Lista zdarzeń klawiatury:

  • onkeypress – klawisz alfanumeryczny został wciśnięty,
  • onkeydown – klawisz został naciśnięty,
  • onkeyup – klawisz został zwolniony.

Dodatki do VisualStudio 2010

Praca z językiem JavaScript czasem staje się bardzo uciążliwa, nie przez to że jest to język trudny, a raczej przez to, iż brakuje nam odpowiedniego narzędzia do pracy z tym językiem. Dobrą wiadomością dla wszystkich tych, którzy korzystają z Visual Studio może być informacja, że istnieje wiele dodatków, które mają za zadanie ułatwić nam pracę z językiem JavaScript.

Aby zainstalować taki dodatek z głównego menu w środowisku VisualStudio, wybieramy w zakładce Tools opcję Extension Manager (Rys. 1.)

Rys. 1. Wybranie opcji Extension Manager.

Następnie należy wybrać zakładkę „Online Gallery” znajdującą się po lewej stronie i wpisać interesującą nas frazę w pasku wyszukiwania w prawym górnym rogu.

Na Rys. 2. zaznaczony jest dodatek, który w plikach .js daje wparcie dla automatycznego podkreślania nawiasu, w którym znajduje się aktualna pozycja kursora.

Rys. 2. Dodatek, który w plikach .js daje wparcie dla automatycznego podkreślania nawiasu, w którym znajduje się aktualna pozycja kursora.

Niniejszy artykuł był jedynie wstępem do języka JavaScript, gdyż jest to język o wiele większych możliwościach, niż tych przedstawionych i opisanych powyżej. które były jedynie fundamentem tego języka. Mam nadzieję, że artykuł Was zainteresował i zachęcił do dalszej nauki ponadczasowego JavaScript'u.

* *