luq techblog

o tworzeniu słów kilka…

JavaScript – czym jest? 14 marca 2010

Filed under: JS,Programowanie,Web — Łukasz @ 22:05
Tags: , , , ,

Witam,

 

dziś chciałbym dodać jako wpis artykuł, który został napisany, już jakiś czas temu, na potrzeby portalu e-pomocnik.pl (pozdro Lucider ;) lecz z powodu technicznych kłopotów, nie jest tam jeszcze opublikowany. Zanim pochłoniecie się czytaniem mojego pseudo technicznego bełkotu, chciałem tylko dodać, że począwszy od dziś zamierzam częściej pisywać na moim blogu…

 

Wstęp

W tym artykule chciałbym przybliżyć sam język JavaScript jak i możliwości które za nim idą. JavaScript (często, błędnie nazywany Javą – co jest niewybaczalnym błędem porównywalnym do mylenia kota z kotarą, kto przebywa na forum.php.pl ten pewnie za ten słynny obrazek ;]) jest językiem interpretowanym, działającym po stronie klienta a jego parserem jest sama przeglądarka. Tak więc, każde szanujące się oprogramowanie przeznaczone do surfowania w otchłani Internetu, obsługuję tą technologię, jak i umożliwia wyłączenie jej obsługi. Dlatego jesteśmy w stanie, pisać w języku JavaScript wprost w pasku adresu, np.:

 
javascript: alert( document.lastModified );
 

wyświetli alert z datą ostatniej modyfikacji strony, rzecz raczej mało przydatna. Oczywiście pisanie w pasku adresu do wygodnych raczej nie należy i jeśli już chcemy operować na modelu DOM wyświetlonej strony, debugować skrypt JS, czy napisać sobie w szybki sposób skrypt, bądź sprawdzić „czy tak to zadziała” – lepiej jest zaopatrzyć się w plugin do Firefox`a o, zresztą całkiem fajnej, nazwie – FireBug. Nie mam na celu opisywać tego narzędzia ale ogólnie rzecz biorąc, nie wyobrażam sobie swojej pracy bez niego. Wykorzystuję go także do obserwowania Ajax`owych żądań przez obiekt XHR, modyfikacji CSS`a, szybkiego podglądu typu – „jakby to wyglądało w innym kolorze?” i wielu, wielu innych sprawach…
JavaScript jest językiem w pełni obiektowym, nie istnieję tu tak naprawdę pojęcie funkcji, chodź może nie wygląda na to na pierwszy rzut oka. Istnieje np. coś takiego jak:

 
parseInt()
 

(dokładnie taka konstrukcja). Na pierwszy rzut oka – funkcja, a tak naprawdę metoda obiektu Global. Tak samo jak napisane przez nas funkcję są, tak naprawę, instancjami klasy Function. Język przez swoją pełną obiektowość nie traci jednak na prostocie użycia. ECMAScript, który jest jądrem języka – w nim zawarta jest składnia, słowa zarezerwowane etc. Jest bardzo czytelny i podobny do współczesnych języków typu, C++ czy PHP i przejście z tych języków jest właściwie bezbolesne jeśli chodzi o ECMAScript jako o część składową JS`a (a są jeszcze dwie – DOM i BOM, ale o tym dalej). Niestety muszę przyznać, że język ten jest nieco niszczony, niszczony nie przez co innego jak Internet… Bardzo często można spotkać kursy które uczą jedynie gołego ECMAScripa, zresztą nie dość pełnego, a przecież cała magia zawiera się z modelu DOM i chyba temu nikt nie zaprzeczy!

Ale po kolei…

Tak ja już zostało wspomniane JavaScript składa się z trzech rzeczy: ECMAScript`u, BOM`a i DOM`a. O ECMAScript`cie już wspomniałem i nie ma co więcej dodawać. BOM (Browser Object Model) to cześć JavaScripta, którą jest jakby nie patrzeć sama przeglądarka. W sumie BOM nie jest zawarty w żadnym standardzie, ale pewne elementy są implementowane we wszystkich nowoczesnych commanderach webowych. Ogólnie BOM to zbiór metod i właściwości których dostarcza nam sama aplikacja, która jest środowiskiem uruchomieniowym. Dzięki niemu jesteśmy w stanie otwierać nowe okna przeglądarki, manipulować nimi (zmieniać rozmiar, położenie etc.), mamy dostęp do informacji nt. systemu i samej przeglądarki (UserAgent), opcje ekranu (rozdzielczość etc.), ciasteczek, ramek, historii przeglądanych stron (tu z powodów bezpieczeństwa mamy tak naprawdę małą skale działania) i chyba tyle. Ogólnie ten artykuł ma na celu tylko przedstawienie języka JavaScript a nie jego opisie, bo na ten temat książki pisano, więc nie będę się na tym skupiał.

 

DOM (Document Object Model) jest natomiast cała kwintesencją tego języka dla webmastera. Postaram się wytłumaczyć czym jest DOM nie korzystając z wyrażenia – API. DOM jest to coś co umożliwia nam możliwość edycji nomen omen samego HTML`a. DOM to drzewiasta struktura tagów HTML`a które możemy edytować, usuwać i dodawać nowe. Dla przykładowego kodu HTML:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <span></span>
        <div>
            <p>
                <a href="">hello world</a>
            </p>
        </div>
    </body>
</html>

Struktura drzewka obrazuję się następująco:

DOM

Dzięki temu jesteśmy w stanie dostać się do wnętrza danego taga i np. coś do niego dopisać, edytować czy nawet go usunąć. DOM opisuję także zdarzenia do których możemy przypisać funkcję (a właściwie metody) które się wykonają. Dla przykładu, możemy w prosty sposób napisać funkcję która po najechaniu na tag <p> zmieni kolor tła strony, pokaże jego potomków (<a> i „hello world”) czy cokolwiek innego. Tak naprawę możemy zrobić z dokumentem co nam się żywnie podoba! Dzięki DOM`owi mamy także możliwość edycji styli CSS poszczególnych obiektów zawartych w drzewie. To właśnie DOM tworzy piękno tego języka…

Dodam jeszcze, że JS umożliwia kilka bardzo fajnych rzeczy.
Pierwszą z nich jest możliwość utworzenie lub nawet nadpisania metod standardowych obiektów. Dla przykładu mamy obiekt Array (tablica), do którego możemy dopisać metodę remove_index(), która usunie nam podany w argumencie index oraz przesunie następne do tyłu, co pozostawi nam płynność samej tablicy…

Array.prototype.remove_index = function( index ){
    var replaceindex = false;
    var cnt = this.length;
    for( var i = 0; i < cnt; i++ ){
        if( i == index ){
            replaceindex = true;
        }
        if( i == cnt - 1 ){
            this.pop();
        }
        else if( replaceindex ){
            this[i] = this[i+1];
         }
    }
} 

Bardzo fajna możliwość ;)

 

Poza tym możemy wrzucić w konstrukcję for in obiekt, dzięki czemu możemy przelecieć się po wszystkich właściwościach tego obiektu. Dodatkowo jest możliwość tworzenia obiektu bez klasy z samymi właściwościami tworzy coś a`la odpowiednik PHP`owych tablic asocjacyjnych:

{
 	'foo' : 'bla',
	'bar' : 'bla2' 
}

Na koniec dodam, że to właśnie na JS`ie, a właściwie na literałach tablicowych ([]) oraz obiektowych (jak wyżej {}), opiera się JSON (JavaScript Object Notation) który jest nazywany wersją odchudzoną XML`a. Jest to, co tu dużo mówić, standard kodowania danych w bardzo krótkim formacie.

Podsumowanie

JavaScript jest fajny i chodź zdarzyło mi się pisać w kilku, różnych i bardzo odmiennych, językach, mogę powiedzieć, że JS jest moim ulubionym, wygrywającym nawet z PHP którego znam lepiej. Tak więc zachęcam gorąco do poznania tego tworu, bo od niego do Ajax`a jest już tylko jeden malutki krok…

Reklamy
 

One Response to “JavaScript – czym jest?”

  1. R Says:

    Dobra notka, pierwsze słyszę o BOMie i o kilku innych rzeczach rowniez ;)


Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s