path: root/files/pl/dom_i_javascript/index.html

---
title: DOM i JavaScript
slug: DOM_i_JavaScript
tags:
  - DOM
  - JavaScript
  - Wszystkie_kategorie
---
<h3 id="Og.C3.B3lne_poj.C4.99cie" name="Og.C3.B3lne_poj.C4.99cie">Ogólne pojęcie</h3>

<p>Efekty wizualne takie jak przesuwanie warstw na stronie, pokazywanie i ukrywanie ich, wyskakujące menu itd., są często określane pojęciami „<a href="/pl/DHTML" title="pl/DHTML">DHTML</a>” lub „Dynamiczny HTML”. Niektórzy kwestionują zasadność użycia tych technologii na stronach, które powinny przecież obejmować treść, a nie prezentację. Ale faktem jest, że technologie te nadal istnieją.</p>

<p>Od kiedy pracuję nad tym projektem i mam kontakty z wieloma webmasterami, uderza mnie to, że duża ich część nie wie jak ich DHTML tak naprawdę działa. Większość z nich po prostu odnalazło stronę z repozytorium skryptów i skopiowali stamtąd kod na swoją stronę. Niestety, większość takich stron mówi o „JavaScripcie” i „DHTML-u”, jednak nigdy o „<a href="/pl/DOM" title="pl/DOM">DOM</a>”. Prawdą jest, że nawet jeśli DOM jest pomysłem starym, to pojęcie to weszło w „żargon przeciętnego webmastera” dopiero niedawno.</p>

<p>Wielkim wyzwaniem dla projektów takich jak Mozilla jest by przekonać właścicieli tego typu stron, że warto kodować według W3C DOM (co oznacza niekiedy wiele mozolnej pracy czy utrata wsparcia dla starszych przeglądarek). Dużym wyzwaniem jest również zebrać wszystkie fakty w prosty sposób związane ze wsparciem dla W3C DOM. Netscape 6 był mocno krytykowany przez niezdarnych projektantów internetowych, którzy pisali swój kod „JavaScript” pod Netscape'a 4 oraz Internet Explorera używając <code>document.layers</code> i <code>document.all</code>. Każdego dnia staramy się pomagać ludziom na grupach newsowych, poprzez e-maile, Bugzillę, by ich strony były jak najbardziej zgodne ze standardami. Jednym z największych problemów jakie napotykamy, jest zamieszanie związane z <a href="/pl/JavaScript" title="pl/JavaScript">JavaScriptem</a>, <a href="/pl/DHTML" title="pl/DHTML">DHTML-em</a> oraz <a href="/pl/DOM" title="pl/DOM">DOM</a>. Ten dokument jest próbą wyjaśnienia tych problemów, wyjaśnienia relacji pomiędzy tymi wymyślnymi oraz przydatnymi technologiami.</p>

<h3 id="JavaScript_-_sieciowy_j.C4.99zyk_skryptowy" name="JavaScript_-_sieciowy_j.C4.99zyk_skryptowy">JavaScript — sieciowy język skryptowy</h3>

<p><a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a> jest „obiektowym językiem skryptowym” początkowo opracowanym w Netscape Communications Corp. przez Brendana Eicha (który jest obecnie jednym z liderów projektu Mozilla). Silnik JavaScript używany przez Mozillę to <a href="/pl/SpiderMonkey" title="pl/SpiderMonkey">SpiderMonkey</a>, zgodny z 3 rewizją specyfikacji ECMA-262. JavaScript jest również znany jako <a href="/pl/ECMAScript" title="pl/ECMAScript">ECMAScript</a> (zobacz odsyłacz, aby uzyskać więcej informacji).</p>

<p>Wbrew popularnemu przekonaniu, JavaScript nie jest „interpretowaną Javą”. Wewnątrz JavaScript jest dynamicznym językiem skryptowym wspierającym prototypową konstrukcję obiektów. Podstawowa składnia jest świadomie podobna do tej znanej z Javy i C++, by zminimalizować liczbę nowych pojęć potrzebnych do opanowania języka. Świetną rzeczą jest to, że jest on bardzo łatwy do nauczenia się, jeśli chcesz zajmować się prostszymi rzeczami (jak na przykład te w prostym DHTML-u). Niewidoczne typy zmiennych, niezwykle proste w użyciu łańcuchy znakowe, całkowita neutralność platformowa itd. Dla bardziej zaawansowanych programistów funkcjonuje on również jako język zarówno obiektowy jak i proceduralny.</p>

<p>Odkryjesz, że większość informacji o JavaScripcie w tym akapacie pochodzi ze <a class="external" href="http://mozilla.org/js">strony Mozilla JavaScript</a>. Najnowsza wersja specyfikacji ECMA znajduje się <a class="external" href="http://www.mozilla.org/js/language/">tutaj</a>.</p>

<h3 id="Obiektowy_Model_Dokumentu.2C_neutralnie_j.C4.99zykowo_zestaw_interfejs.C3.B3w" name="Obiektowy_Model_Dokumentu.2C_neutralnie_j.C4.99zykowo_zestaw_interfejs.C3.B3w">Obiektowy Model Dokumentu, neutralnie językowo zestaw interfejsów</h3>

<p>JavaScript jest językiem programowania, który pozwala Ci działać na obiektach DOM i manipulować nimi programowo, DOM natomiast dostarczy Ci metod oraz własności do pobierania, modyfikowania, uaktualniania i usuwać części dokumentu nad którym pracujesz. Przykładowo, możesz pobrać wartość pola tekstowego jako łańcuch znaków używając DOM. Następnie możesz użyć operatora JavaScript <code>+</code>, by połączyć go z innym łańcuchem znaków i stworzyć z tego sensowną treść. Gdy to zrobisz, możesz użyć metody DOM <code>alert()</code>, aby wyświetlić użytkownikowi nowy łańcuch znaków w oknie dialogowym. Zobacz również poniższe przykłady</p>

<p>Jeśli strona internetowa byłaby importowanym szwedzkim meblem, DOM byłby ilustracjami jego elementów — półek, uchwytów, gwoździ oraz śrubokrętów. Możliwe jest napisanie instrukcji jak połączyć je w całość i używać tych elementów, instrukcji w wielu językach, ale Ty użyjesz tylko tego, który rozumiesz. Podręcznik ułatwia Ci złożenie tego mebla przy użyciu napisanych instrukcji (JavaScript) odwołujących się do przedstawionych ilustracji elementów (DOM), które reprezentują faktyczne obiekty (silnik renderujący przeglądarki) (dzięki Jonathanowi za analogię!).</p>

<p>Czym jest ten cały szum wokół neutralności językowej i DOM? Dlaczego DOM jest językowo neutralny, skoro jedynym językiem używanym razem z nim jest JavaScript? No cóż, nie jest to do końca prawda. Na przykład, Mozilla używa wewnętrznie DOM jednocześnie z C++ i JavaScriptem w interfejsie użytkownika. Z kolei edytor używa DOM w celu wstawiania, modyfikowania i usuwania kodu HTML, który widzisz w fazie tworzenia strony w module Kompozytora. Inne znane implementacje DOM zawierają <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a> oraz prawdopodobnie wiele innych. To wszystko możliwe jest tylko i wyłącznie dzięki neutralności językowej DOM.</p>

<h3 id="DOM_a_JavaScript_-_Co_robi_co.3F" name="DOM_a_JavaScript_-_Co_robi_co.3F">DOM a JavaScript — Co robi co?</h3>

<p>Docieramy do głównego gwoździa programu: Co robi co? Czym jest DOM, a czym JavaScript, w skrypcie, który zawarłem na mojej stronie? Spójrzmy bliżej na prosty przykład. Pobierze on wszystkie znaczniki <span class="nowiki">&lt;a&gt;</span> w listę węzłów (<code>NodeList</code>), którą nazwalismy <code>anchorTags</code>. Wtedy dla każdego znacznika kotwicy (każdy element z listy węzłów <code>anchorTags</code>) pojawi się komunikat z wartością atrybutu <code>href</code>.</p>

<p>Kolor niebieski oznacza JavaScript, czerwony — DOM.</p>

<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
{
   <span class="highlightred">alert</span>("Atrybut href dla " + i + " elementu to: " + <span class="highlightred">anchorTags[i].href</span> + "\n");
}</span>
</pre>

<h4 id="Wyja.C5.9Bnienia" name="Wyja.C5.9Bnienia">Wyjaśnienia</h4>

<p>Ten fragment kodu wyjaśnia czym jest prawdziwy JavaScript, a czym DOM.</p>

<dl>
 <dt><span class="highlightblue">var anchorTags =</span></dt>
 <dd>To utworzy zmienną JavaScript o nazwie „<code>anchorTags</code>”.</dd>
 <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt>
 <dd>Interfejs <code>Document</code> jest pierwszym interfejsem zdefiniowanym w DOM1 Core, a <code>document</code> jest głównym obiektem implementującym ten interfejs. Dokument przechowuje wszystko, co znajduje się na Twojej stronie.<br>
 DOM1 Core definiuje metodę <code>getElementsByTagName()</code> w interfejsie <code>Document</code>. Pobiera ona do listy węzłów (<code>NodeList</code>, rodzaj specyficznej dla DOM tablicy, która przechowuje węzły) wszystkie znaczniki, które odpowiadają przekazanemu parametrowi (w kolejności występowania w źródle dokumentu). Tym samym <code>anchorTags</code> jest teraz listą węzłów.</dd>
 <dt><span class="highlightblue">;</span></dt>
 <dd>Średnik kończący instrukcję w JavaScripcie.</dd>
 <dt><span class="highlightblue">for (var i = 0; i &lt;</span></dt>
 <dd>Typowa pętla „for” znana z wielu innych języków programowania. Pozwoli ona nam na przejście przez każdy węzeł zawarty w liście węzłów <code>anchorTags</code>. Zwróć uwagę na deklarację zmiennej „<code>i</code>”. To również JavaScript.</dd>
 <dt><span class="highlightred">anchorTags.length</span></dt>
 <dd>DOM1 Core definiuje własność <code>length</code> interfejsu <code>NodeList</code>. Zwraca ona liczbę całkowitą będącą ilością węzłów przechowywanych w liście węzłów. Zauważ, że tablica JavaScript również posiada <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/length" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/length">własność <code>length</code></a>.</dd>
 <dt><span class="highlightblue">; i++) {</span></dt>
 <dd>Typowa instrukcja JavaScript powiększająca wartość zmiennej o 1.</dd>
 <dt><span class="highlightred">alert(</span></dt>
 <dd><code>alert()</code> jest metodą DOM, która pokazuje okno dialogowe z przekazanym parametrem (łańcuchem znaków). Zwróć uwagę, że metoda ta jest częścią tzw. poziomu 0 DOM poziomu 0 lub DOM0. DOM0 jest zbiorem interfejsów obsługiwanych przez niektóre przeglądarki, ale które nie są częścią żadnej specyfikacji DOM.</dd>
 <dt><span class="highlightblue">"Atrybut href dla " + i + " elementu to: "</span></dt>
 <dd>Literały znakowe oraz operator ich łączenia (konkatenacji). JavaScript.</dd>
 <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt>
 <dd>„<code>href</code>” jest własnością interfejsu <code>HTMLAnchorElement</code> zdefiniowanego w specyfikacji HTML DOM1. Zwraca wartość atrybutu <code>href</code> odnośnika, jeśli wartość ta istnieje.<br>
 Używamy również <code>anchorTags{{ mediawiki.external('i') }}</code>, tej samej składni, która w JavaScripcie używana jest przy dostępie do <code>i</code>-tego elementu tablicy. Neutralnie językowym sposobem jest używanie metody <code>item()</code>, zdefiniowanej w interfejsie <code>NodeList</code>): <code>anchorTags.item(1).href</code>. Jednak większość implementacji JavaScriptu pozwala na używanie prostszej, tablicowej składni i takiej właśnie używa większość ludzi.</dd>
 <dt><span class="highlightblue">+ "\n");</span></dt>
 <dd>Kolejne łączenie łańcuchów znaków. Wstawienie znaku powrotu karetki na końcu łańcucha znaków.</dd>
 <dt><span class="highlightblue">}</span></dt>
 <dd>Koniec pętli „for”.</dd>
</dl>

<div class="originaldocinfo">
<p><strong>Informacje o oryginalnej wersji dokumentu</strong></p>

<ul>
 <li>Autor: Fabian Guisset &lt;fguisset at softhome dot net&gt;</li>
 <li>Informacja prawna: © 1998-2005 by individual mozilla.org contributors; treść dostępna pod licencją <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons</a></li>
</ul>
</div>

<p>{{ languages( { "en": "en/The_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript", "ja": "ja/The_DOM_and_JavaScript" } ) }}</p>