diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
| commit | de5c456ebded0e038adbf23db34cc290c8829180 (patch) | |
| tree | 2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/dokumentacja_gecko_dom | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2 translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip | |
unslug pl: move
Diffstat (limited to 'files/pl/dokumentacja_gecko_dom')
| -rw-r--r-- | files/pl/dokumentacja_gecko_dom/index.html | 85 | ||||
| -rw-r--r-- | files/pl/dokumentacja_gecko_dom/przedmowa/index.html | 47 | ||||
| -rw-r--r-- | files/pl/dokumentacja_gecko_dom/przykłady_użycia_dom/index.html | 354 | ||||
| -rw-r--r-- | files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html | 171 |
4 files changed, 0 insertions, 657 deletions
diff --git a/files/pl/dokumentacja_gecko_dom/index.html b/files/pl/dokumentacja_gecko_dom/index.html deleted file mode 100644 index e4c1475516..0000000000 --- a/files/pl/dokumentacja_gecko_dom/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Dokumentacja Gecko DOM -slug: Dokumentacja_Gecko_DOM -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Document_Object_Model ---- -<p> -</p><p>Ta strona jest przyszłym spisem treści Dokumentacji Gecko DOM, którą przenosimy <a class="external" href="http://www.mozilla.org/docs/dom/domref/">stąd</a>. -</p><p><br> -</p> -<h4 id="Przedmowa"> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa">Przedmowa</a> </h4> -<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#O_dokumentacji">O dokumentacji</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Kto_j.C4.85_powinien_przeczyta.C4.87">Kto ją powinien przeczytać</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Czym_jest_Gecko.3F">Czym jest Gecko?</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Sk.C5.82adnia_API">Składnia API</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Korzystanie_z_przyk.C5.82ad.C3.B3w">Korzystanie z przykładów</a> -</li></ul> -<h4 id="Wprowadzenie"> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie">Wprowadzenie</a> </h4> -<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Czym_jest_DOM.3F">Czym jest DOM?</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#DOM_vs._JavaScript">DOM vs. JavaScript</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Wa.C5.BCne_typy_danych">Ważne typy danych</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Interfejsy_DOM">Interfejsy DOM</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Testowanie_DOM_API">Testowanie DOM API</a> -</li></ul> -<h4 id="Elementy_w_DOM"> <a href="pl/DOM/element">Elementy w DOM</a> </h4> -<ul><li> <a href="pl/DOM/element#Wprowadzenie">Wprowadzenie</a> -</li><li> <a href="pl/DOM/element#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/element#Metody">Metody</a> -</li><li> <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> -</li></ul> -<h4 id="Obiekt_window"> <a href="pl/DOM/window">Obiekt window</a> </h4> -<ul><li> <a href="pl/DOM/window#Wprowadzenie">Wprowadzenie</a> -</li><li> <a href="pl/DOM/window#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/window#Metody">Metody</a> -</li><li> <a href="pl/DOM/window#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> -</li></ul> -<h4 id="Obiekt_document"> <a href="pl/DOM/document">Obiekt document</a> </h4> -<ul><li> <a href="pl/DOM/document#Wprowadzenie">Wprowadzenie</a> -</li><li> <a href="pl/DOM/document#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/document#Metody">Metody</a> -</li></ul> -<h4 id="Zdarzenia"> <a href="pl/DOM/event">Zdarzenia</a> </h4> -<ul><li> <a href="pl/DOM/event#Wprowadzenie">Wprowadzenie</a> -</li><li> <a href="pl/DOM/event#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/event#Metody">Metody</a> -</li></ul> -<h4 id="Style_w_DOM"> <a href="pl/DOM/style">Style w DOM</a> </h4> -<ul><li> <a href="pl/DOM/style#Notatki">Notatki</a> -</li><li> <a href="pl/DOM/style#Materia.C5.82y_do_przeniesienia_na_inne_strony">Materiały do przeniesienia na inne strony</a> -</li></ul> -<h4 id="DOM_range"> <a href="pl/DOM/range">DOM range</a> </h4> -<ul><li> <a href="pl/DOM/range#Wprowadzenie">Wprowadzenie</a> -</li><li> <a href="pl/DOM/range#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/range#Metody">Metody</a> -</li></ul> -<h4 id="Interfejs_elementu_HTML_FORM"> <a href="pl/DOM/form">Interfejs elementu HTML FORM</a> </h4> -<ul><li> <a href="pl/DOM/form#Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</a> -</li><li> <a href="pl/DOM/form#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/form#Metody">Metody</a> -</li></ul> -<h4 id="Interfejs_elementu_HTML_TABLE"> <a href="pl/DOM/table">Interfejs elementu HTML TABLE</a> </h4> -<ul><li> <a href="pl/DOM/table#Interfejs_elementu_HTML_TABLE">Interfejs elementu HTML TABLE</a> -</li><li> <a href="pl/DOM/table#W.C5.82asno.C5.9Bci">Własności</a> -</li><li> <a href="pl/DOM/table#Metody">Metody</a> -</li></ul> -<h4 id="Przyk.C5.82ady_u.C5.BCycia_DOM"> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a> </h4> -<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</a> -</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</a> -</li></ul> -<p><br> -</p> -<div class="noinclude"> -</div> -{{ languages( { "en": "en/Gecko_DOM_Reference", "es": "es/Referencia_DOM_de_Gecko", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git a/files/pl/dokumentacja_gecko_dom/przedmowa/index.html b/files/pl/dokumentacja_gecko_dom/przedmowa/index.html deleted file mode 100644 index 046ce870ca..0000000000 --- a/files/pl/dokumentacja_gecko_dom/przedmowa/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Przedmowa -slug: Dokumentacja_Gecko_DOM/Przedmowa -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -<p>{{ ApiRef() }}</p> -<h3 id="O_dokumentacji" name="O_dokumentacji">O dokumentacji</h3> -<p>Ten rozdział opisuje przewodnik jaki czytasz: czyli czym jest, jakie informacje są w nim zaprezentowane i w jaki sposób można użyć przykładów zawartych w dokumentacji do własnego programowania.</p> -<p>Uwaga, bo ten dokument nie służy do programowania i nie jest aktualnie pełną listą metod DOM i własności zaimplementowanych w Gecko. Każdy indywidualny rozdział dokumentu (np., <a href="pl/DOM/document">Obiekt document</a>) są w pełni opisanym obiektem(ami). Jako informacje dokumentacji dla rozmaitych użytkowników wraz z odnośnikami do poszczególnych części API będą zintegrowane z tym dokumentem.</p> -<h3 id="Kto_powinien_j.C4.85_przeczyta.C4.87" name="Kto_powinien_j.C4.85_przeczyta.C4.87">Kto powinien ją przeczytać</h3> -<p>Czytelnik <a href="pl/Dokumentacja_Gecko_DOM">dokumentacji Gecko DOM</a> jest programista piszący strony internetowe lub wprawny użytkownik sieci, który wie trochę o pisaniu stron oraz zna ich budowę. W dokumentacji nie tworzy się założeń, że czytelnik posiada wiedzę z DOM, z <a href="pl/XML">XML</a>, z tematyki serwerów sieciowych lub standardów sieciowych, czy nawet z <a href="pl/JavaScript">JavaScriptu</a>, bo język, w którym DOM został stworzony, jest dostępny dla czytającego tą dokumentację. Natomiast w tym dokumencie założono, że czytelnik ma obycie z <a href="pl/HTML">HTML</a>, ze znacznikami, z podstawową strukturą stron internetowych, z przeglądarkami i z arkuszami stylów.</p> -<p>We wstępnym materiale, znajduje się wiele przykładów i ich wykorzystanie na bardzo wysokim poziomie, dokument jest dla "początkujących" programistów sieciowych. Ogólnie, kiedykolwiek, dokumentacja API powinna być wartościowa zarówno dla doświadczonych jak i niedoświadczonych deweloperów.</p> -<h3 id="Czym_jest_Gecko.3F" name="Czym_jest_Gecko.3F">Czym jest Gecko?</h3> -<p>Mozilla, Firefox, Netscape 6+, i inne oparte o Mozillę przeglądarki posiadają identyczną implementację DOM. Dzieje się tak ponieważ używają tej samej technologii. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it\'s tricky to explain</span></p> -<p>Gecko, komponent oprogramowania w tych przeglądarkach, który obsługuje przetwarzanie kodu HTML, rozmieszczenie elementów na stronach, model obiektowy dokumentu (DOM), a nawet tworzenie całego interfejsu aplikacji, jest szybkim, zgodnym ze standardami silnikiem renderowania, który implementuje standard W3C DOM i podobny do DOM (ale niestandardowy) model obiektowy przeglądarki (np., <a href="pl/DOM/window"><code>window</code></a> i inne) w kontekście stron WWW i interfejsu aplikacji.</p> -<p>Mimo, że interfejs aplikacji i zawartość wyświetlana przez przeglądarkę różnią się w wielu praktycznych aspektach, DOM reprezentuje je jednorodnie jako hierarchię węzłów. <span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p> -<h3 id="Sk.C5.82adnia_API" name="Sk.C5.82adnia_API">Składnia API</h3> -<p>Każdy opis w dokumentacji API zawiera przykłady składni, parametry wejścia - wyjścia (gdzie podawany jest również typ zmiennej), przykład, dodatkowe uwagi i link do odpowiedniego tematu w specyfikacji.</p> -<p>Normalnie właściwości tylko do odczytu posiadają tylko jedna linię składni, gdyż mogą być one tylko odczytane a nie zapisane. Na przykład własność <code>availHeight</code> obiektu <code>screen</code> zawiera następująca informacje:</p> -<div> - <img alt="Grafika:Preface2.gif"></div> -<p>Oznacza to, że można używać tylko własności z prawej strony wyrażenia; dla własności typu odczyt/zapis można je wykorzystywać po obydwu stronach wyrażenia jak ilustruje poniższy przykład:</p> -<div> - <img alt="Grafika:Prefacea.gif"></div> -<p>Ogólnie, dla obiektów opisanych powyżej jest podana prosta składnia, np. <code>element</code> dla wszystkich elementów, <code>document</code> dla głównych dokumentów obiektu, table dla obiektu <code>TABLE</code> itd. (zobacz <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Wa.C5.BCne_typy_danych">Ważne typy danych</a> dla różnych typów danych).</p> -<h3 id="Korzystanie_z_przyk.C5.82ad.C3.B3w" name="Korzystanie_z_przyk.C5.82ad.C3.B3w">Korzystanie z przykładów</h3> -<p>Wiele przykładów w tej dokumentacji jest pełnymi plikami, które możemy wykorzystać poprzez skopiowanie i wklejenie do nowego pliku i następnie otworzenie w swojej przeglądarce. Reszta jest tylko fragmentami kodu. Taki fragment możesz uruchomić poprzez umieszczenie go w wewnątrz funkcji JavaScript zwracającej nazwę. Na przykład własność <a href="pl/DOM/window.document">window.document</a> może być testowana wewnątrz funkcji takiej jak ta poniżej, która jest wywołana za pomocą przycisku:</p> -<pre><html> -<script> -function testWinDoc() { -doc= window.document; -alert(doc.title); -} -</script> -<button onclick="testWinDoc();">Test własności dokumentu</button> -</html> -</pre> -<p>Podobne funkcje i strony można wymyślić dla wszystkich składników obiektów, które jeszcze nie znajdują się w pakiecie. Zobacz temat <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Testowanie_DOM_API">Testowanie DOM API</a> we wprowadzeniu dla "test harness", który będziesz mógł użyć do testowania liczby wszystkich API na raz.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/pl/dokumentacja_gecko_dom/przykłady_użycia_dom/index.html b/files/pl/dokumentacja_gecko_dom/przykłady_użycia_dom/index.html deleted file mode 100644 index 90d24738ef..0000000000 --- a/files/pl/dokumentacja_gecko_dom/przykłady_użycia_dom/index.html +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: Przykłady użycia DOM -slug: Dokumentacja_Gecko_DOM/Przykłady_użycia_DOM -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/API/Document_Object_Model/Examples ---- -<p>{{ ApiRef() }}</p> - -<p>Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie <a href="pl/XML">XML</a>-a. Gdzie tylko jest to możliwe, przykłady używają ogólnie API, trików i wzorów kodu napisanych w JavaScripcie służących do manipulacji obiektem dokumentu.</p> - -<h3 id="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87" name="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</h3> - -<p>Następujący przykład pokazuje użycie własności <code>height</code> i <code>width</code> obok obrazków, które się różnią rozmiarami:</p> - -<pre><!DOCTYPE html> -<html lang="pl"> -<head> -<title>Przykład width/height</title> -<script> -function init() -{ - var arrImages = new Array(3); - - arrImages[0] = document.getElementById("image1"); - arrImages[1] = document.getElementById("image2"); - arrImages[2] = document.getElementById("image3"); - var objOutput = document.getElementById("output"); - var strHtml = "<ul>"; - for (var i = 0; i < arrImages.length; i++) - strHtml += "<li>image" + (i+1) + - ": height=" + arrImages[i].height + - ", width=" + arrImages[i].width + - ", style.height=" + arrImages[i].style.height + - ", style.width=" + arrImages[i].style.width + - "<\/li>"; - strHtml += "<\/ul>"; - objOutput.innerHTML = strHtml; -} -</script> -</head> -<body onload="init();"> - -<p>Obrazek 1: Brak wysokości, szerokości oraz stylu - <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> -</p> -<p>Obrazek 2: height="50", width="500", lecz bez stylu - <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" - height="50" width="500"> -</p> -<p>Obrazek 3: Brak wysokości, szerokości, lecz style="height: 50px; width: 500px;" - <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" - style="height: 50px; width: 500px;"> -</p> - -<div id="output"> </div> -</body> -</html> -</pre> - -<p><code>height</code> i <code>width</code> są także własnościami elementów <code>OBJECT</code> i <code>APPLET</code>.</p> - -<h3 id="Przyk.C5.82ad_2:_Atrybuty_obrazu" name="Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</h3> - -<pre><!DOCTYPE html> -<html lang="pl"> -<head> -<title>Modyfikacja obramowania obrazka</title> - -<script> -function setBorderWidth(width) { - document.getElementById("img1").style.borderWidth = width + "px"; -} -</script> -</head> - -<body> -<p> - <img id="img1" - src="image1.gif" - style="border: 5px solid green;" - width="100" - height="100" - alt="test obramowania"> -</p> - -<form name="FormName"> - <input type="button" value="Utwórz obramowanie 20px-wide" onclick="setBorderWidth(20);"> - <input type="button" value="Utwórz obramowanie 5px-wide" onclick="setBorderWidth(5);"> -</form> - -</body> -</html> -</pre> - -<h3 id="Przyk.C5.82ad_3:_Manipulacja_stylami" name="Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</h3> - -<p>W tym prostym przykładzie, niektóre podstawowe własności stylów elementu znacznika HTML są dostępne przy zastosowaniu obiektów stylu elementu i obiektów własności stylu CSS, który może być odzyskiwany i ustawiany z DOM. W tym przypadku manipulujemy bezpośrednio pojedynczym stylem. W następnym przykładzie (zobacz <a href="#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">przykład 4</a>), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.</p> - -<pre><!DOCTYPE html> -<html lang="pl"> -<head> -<title>Zmiana koloru i rozmiaru czcionki w przykładzie</title> - -<script> -function changeText() { - var p = document.getElementById("pid"); - - p.style.color = "blue" - p.style.fontSize = "18pt" -} -</script> -</head> -<body> - -<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> - -<form> - <p><input value="rec" type="button" onclick="changeText();"></p> -</form> - -</body> -</html> -</pre> - -<h3 id="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w" name="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</h3> - -<p>Własność obiektu dokumentu styleSheets zwraca listę arkusza stylów wczytanego do tegoż dokumentu. Można uzyskać dostęp do indywidualnych własności arkusza stylów używając obiektów stylesheet, style oraz CSSRule jak zademonstrowano w poniższym przykładzie, który wyświetla selektory reguł stylu na konsole.</p> - -<pre>var ss = document.styleSheets; - -for(var i=0; i < ss.length; i++) { - for(var j=0; j < ss[i].cssRules.length; j++) { - console.log(ss[i].cssRules[j].selectorText + "\n" ); - } -} -</pre> - -<p>Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:</p> - -<pre class="eval">body { background-color: darkblue; } -p { font-face: Arial; font-size: 10pt; margin-left: .125in; } -#lumpy { display: none; } -</pre> - -<p>Wynik skryptu będzie następujący:</p> - -<pre class="eval">BODY -P -#LUMPY -</pre> - -<h3 id="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84" name="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</h3> - -<p>Poniższy przykład demonstruje w prosty sposób jak zainicjować zdarzenia oraz ich obsługę przez DOM. Kiedy BODY tegoż dokumentu zostanie załadowany nasłuch zdarzeń zostaje zarejestrowany w pierwszym rzędzie TABLE. Nasłuch zdarzeń obsługuje zdarzenie przez wykonanie funkcji l_func, która zmienia wartość dolnej komórki tabeli.</p> - -<p>Jednakże, l_func wywołuje również metodę obiektu zdarzenia <a href="pl/DOM/event.stopPropagation">event.stopPropagation</a> powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia <a href="pl/DOM/element.onclick">onclick</a>, który powinien wyświetlić powiadomienie w przypadku kliknięcia na tabelę. Metoda l_func powstrzymała propagacje, tak wiec po zaktualizowaniu danych tabeli faza zdarzenia została zakończona.</p> - -<pre><!DOCTYPE html> -<html lang="pl"> -<head> - <title>Propagowanie zdarzeń</title> - <style> - #t-daddy { border: 1px solid red } - #t1 { background-color: pink; } - </style> - <script> - function stopEvent(e) { - t2 = document.getElementById("t2"); - t2.innerHTML = "hej"; - // this ought to keep t-daddy from getting the click. - e.stopPropagation(); - alert("propagowanie zdarzeń zatrzymane."); - } - function load() { - el = document.getElementById("t"); - el.addEventListener("click", stopEvent, false); - } - </script> -</head> -<body onload="load();"> - -<table id="t-daddy" onclick="alert('hi');"> - <tr id="t"> - <td id="t1">jeden</td> - </tr> - <tr> - <td id="t2">dwa</td> - </tr> -</table> -</body> -</html> -</pre> - -<h3 id="Przyk.C5.82ad_6:_getComputedStyle" name="Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</h3> - -<p>Poniższy przykład demonstruje jak użyć metody DOM document.defaultView.getComputedStyle() do pobrania stylu elementu, który nie jest zgodny z językiem JavaScript (np., elementReference.style.backgroundColor="rgb(173, 216, 230)"). Typy stylów można pobrać w bardziej bezpośredni sposób style = własności elementReference.style, których lista własności przedstawiona jest <a href="pl/DOM/style">DOM Style Reference</a> książki (patrz <a href="pl/DOM/CSS">DOM CSS Properties List</a>). Zobacz również własności stylów w <a href="pl/DOM/element">DOM Elements Reference</a>. getComputedStyle() zwraca obiekt ComputedCSSStyleDeclaration, którego własności stylów można związać z metodą getPropertyValue() obiektu, jak pokazuje poniższy przykład dokumentu.</p> - -<pre><!DOCTYPE html> -<html lang="pl"> -<head> - -<title>Przykład getComputedStyle</title> - -<script> -function cStyles() { - var RefDiv = document.getElementById("d1"); - - var txtHeight = document.getElementById("t1"); - var h_style = -document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); - txtHeight.value = h_style; - - var txtWidth = document.getElementById("t2"); - var w_style = -document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); - txtWidth.value = w_style; - - var txtBackgroundColor = document.getElementById("t3"); - var b_style = -document.defaultView.getComputedStyle(RefDiv, -null).getPropertyValue("background-color"); - txtBackgroundColor.value = b_style; - } - </script> - - <style> - #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); -height: 20px; max-width: 20px; } - </style> - -</head> - -<body> - -<div id="d1">&nbsp;</div> - -<form action=""> -<p><button type="button" onclick="cStyles();">getComputedStyle</button> - height<input id="t1" type="text" value="1"> - max-width<input id="t2" type="text" value="2"> - bg-color<input id="t3" type="text" value="3"></p> -</form> - -</body> -</html> -</pre> - -<h3 id="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia" name="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</h3> - -<p>Przykład pokazuje jak używając DOM można stworzyć tabele zawierającą zarówno wszystkie stałe obiektu zdarzenia jak i ich wartości. Pokazuje kilka ciekawych aspektów DOM, włączając w to własność Event.prototype pozwalającą uzyskać dostęp do własności danego obiektu, dobry wzorzec iteracji przez własności tegoż prototypu oraz same wartości stałych wyświetlanych w tabeli. Zauważ, że środkowy zakres zmiennych to kody znaków reprezentujące klawisze wciśnięte podczas zdarzenia (i do pobrania za pomocą własności charCode). Załaduj poniższy kod jako stronę www, aby zobaczyć stale obiektu zdarzenia.</p> - -<pre><!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="utf-8"> -<title>Show Event properties</title> - -<style> - table {border-collapse: collapse;} - thead {font-weight: bold;} - td {padding: 2px 10px 2px 10px;} - .odd {background-color: #efdfef;} - .even {background-color: #ffffff;} -</style> - -<script> - -function showEventProperties(e) { - function addCell(row, text) { - var cell = row.insertCell(-1); - cell.appendChild(document.createTextNode(text)); - } - - var e = e || window.event; - document.getElementById('eventType').innerHTML = e.type; - - var table = document.createElement('table'); - var thead = table.createTHead(); - var row = thead.insertRow(-1); - var lableList = ['#', 'Property', 'Value']; - var len = lableList.length; - - for (var i=0; i<len; i++) { - addCell(row, lableList[i]); - } - - var tbody = document.createElement('tbody'); - table.appendChild(tbody); - - for (var p in e) { - row = tbody.insertRow(-1); - row.className = (row.rowIndex % 2)? 'odd':'even'; - addCell(row, row.rowIndex); - addCell(row, p); - addCell(row, e[p]); - } - - document.body.appendChild(table); -} -window.onload = function(event){ - showEventProperties(event); -} -</script> -</head> - -<body> -<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> -</body> - -</html> -</pre> - -<h3 id="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table" name="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</h3> - -<p>Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są <code><a href="pl/DOM/table.insertRow">table.insertRow</a></code> i <code><a href="pl/DOM/tableRow.insertCell">row.insertCell</a></code>.</p> - -<p>Aby dodać wiersz i kilka komórek do istniejącej tabeli:</p> - -<pre><table id="table0"> - <tr> - <td>Row 0 Cell 0</td> - <td>Row 0 Cell 1</td> - </tr> -</table> - -<script> - -var table = document.getElementById('table0'); -var row = table.insertRow(-1); -var cell, text; - -for (var i=0; i<2; i++) { - cell = row.insertCell(-1); - text = 'Row ' + row.rowIndex + ' Cell ' + i; - cell.appendChild(document.createTextNode(text)); -} -</script> -</pre> - -<h4 id="Uwagi" name="Uwagi">Uwagi</h4> - -<ul> - <li>A table's <code><a href="pl/DOM/element.innerHTML">innerHTML</a></code> property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.</li> - <li>If DOM Core methods <code><a href="pl/DOM/document.createElement">document.createElement</a></code> and <code><a href="pl/DOM/element.appendChild">element.appendChild</a></code> are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).</li> - <li>There are a number of other convenience methods belonging to the <a href="pl/DOM/table#Metody">table interface</a> that can be used for creating and modifying tables.</li> -</ul> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Examples", "es": "es/Referencia_DOM_de_Gecko/Ejemplos", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Exemples", "ja": "ja/Gecko_DOM_Reference/Examples" } ) }}</p> diff --git a/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html b/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html deleted file mode 100644 index 2ffb9814a7..0000000000 --- a/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Wprowadzenie -slug: Dokumentacja_Gecko_DOM/Wprowadzenie -tags: - - DOM - - Gecko -translation_of: Web/API/Document_Object_Model/Introduction ---- -<p>Ten rozdział ma dać ogólne pojęcie o <a href="pl/DOM">DOM</a>: co to jest, o strukturze dla dokumentów <a href="pl/HTML">HTML</a> i <a href="pl/XML">XML</a>, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.</p> - -<h2 id="Czym_jest_DOM.3F" name="Czym_jest_DOM.3F">Czym jest DOM?</h2> - -<p><b>Model obiektowy dokumentu</b> (ang. Document Object Model, DOM) stanowi API dla dokumentów HTML i XML. Odpowiada za dwie rzeczy: zapewnia reprezentację struktury dokumentu oraz określa, w jaki sposób odnosić się do tej struktury z poziomu skryptu. DOM przedstawia stronę jako strukturyzowaną grupę węzłów, co omówimy pokrótce. W gruncie rzeczy, DOM łączy stronę ze skryptami bądź językami programowania.</p> - -<p>Zauważ, że DOM nie jest konkretną aplikacją czy produktem. Jest raczej interfejsem, API, które twórcy oprogramowania muszą zaimplementować, jeśli chcą spełniać standard W3C DOM. Mały przykład: każda przeglądarka internetowa musi zwracać wszystkie elementy <code><P></code> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę <code>getElementsByTagName</code>:</p> - -<pre>paragraphs = document.getElementsByTagName("P"); -// paragraphs[0] to pierwszy element <p> -// paragraphs[1] - drugi element <p>, etc. -alert(paragraphs[0].nodeName); -</pre> - -<p>Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt <code>document</code>, reprezentujący sam dokument, obiekt <code>table</code>, implementujący specjalny interfejs DOM <code>HTMLTableElement</code>, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.</p> - -<h2 id="DOM_vs._JavaScript" name="DOM_vs._JavaScript">DOM vs. JavaScript</h2> - -<p>Powyższy przykład, jak i inne w tej dokumentacji, napisano w <a href="pl/JavaScript">JavaScript</a>. Ściślej, został on - - <i>napisany</i> - w JavaScript, ale - - <i>korzysta</i> - z DOM, by manipulować stroną i jej elementami. DOM nie jest sam w sobie językiem programowania, ale bez niego język JavaScript nie miałby żadnego odniesienia do stron czy dokumentów XML i ich elementów. Każdy z elementów - jak nagłówek, tabele, nagłówki tabel, komórki tych tabel, tekst w tych komórkach - są częściami obiektowego modelu tego konkretnego dokumentu i, za pomocą DOM, język taki jak JavaScript może nimi operować.</p> - -<p>DOM zaprojektowano tak, by był niezależny od języka programowania, dzięki czemu reprezentacja struktury dokumentu dostępna jest poprzez jedno, spójne API. W niniejszej dokumentacji skupimy się wyłącznie na JavaScripcie, jednak można stworzyć implementację DOM dla dowolnego języka - poniżej przykład w Pythonie:</p> - -<pre class="eval"># Przykład: DOM w Pythonie -import xml.dom.minidom as m -doc = m.parse("C:\\Projects\\Py\\chap1.xml"); -doc.nodeName # DOM - własność obiektu document; -p_list = doc.getElementsByTagName("para"); -</pre> - -<h2 id="Jak_korzysta.C4.87_z_DOM.3F" name="Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</h2> - -<p>Aby zacząć korzystać z DOM, nie musisz robić nic szczególnego. Różne przeglądarki różnią się implementacją DOM, implementacje wykazują różny stopień zgodności z faktycznym standardem DOM (jest to kwestia, której staramy się unikać w niniejszej dokumentacji), ale każda przeglądarka używa jakiegoś obiektowego modelu dokumentu, by dać dostęp do strony z poziomu skryptu.</p> - -<p>Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <code><SCRIPT></code>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów <code>document</code> lub <code>window</code> by manipulować samym dokumentem lub by przechwycić któregoś z potomków - elementów strony. Programowanie w DOM może być tak proste jak poniższy przykład, który wykorzystuje metodę <code>alert()</code> obiektu <code>window</code>, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.</p> - -<pre class="eval"><body onload="window.alert('Witaj!');"> -</pre> - -<p>Niezależnie od elementu <code><script></code>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza <code>H1</code> do drzewa dokumentu.</p> - -<pre class="eval"><html> -<script> - // create a couple of elements - // in an otherwise empty HTML page - heading = document.createElement("h1"); - heading_text = document.createTextNode("Big Head!"); - heading.appendChild(heading_text); - document.body.appendChild(heading); -</script> -</html> -</pre> - -<h2 id="Wa.C5.BCne_typy_danych" name="Wa.C5.BCne_typy_danych">Ważne typy danych</h2> - -<h2 id="Interfejsy_DOM" name="Interfejsy_DOM">Interfejsy DOM</h2> - -<p>Założeniem tego przewodnika jest ograniczenie do minimum dyskusji o abstrakcyjnych interfejsach, dziedziczeniu i innych szczegółach implementacji, a zamiast tego omówienie obiektów w DOM, faktycznych - <i>bytów</i> - , jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML <code>FORM</code> pobiera własność <b>name</b> z interfejsu <code>HTMLFormElement</code>, a własność <b>className</b> z interfejsu <code>HTMLElement</code>. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie <code>form</code>.</p> - -<p>Jednakże zależność między obiektami a interfejsami, jakie one implementują, może być myląca, dlatego w tym podrozdziale spróbujemy powiedzieć coś o faktycznych interfejsach w specyfikacji DOM oraz o tym, w jaki sposób są one dostępne.</p> - -<h3 id="Interfejsy_a_obiekty" name="Interfejsy_a_obiekty">Interfejsy a obiekty</h3> - -<p>W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. <code>table</code> - reprezentują kilka różnych interfejsów. Dla przykładu - <code>table</code> implementuje specjalny interfejs <code>HTMLTableElement</code>, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, <code>table</code> implementuje też interfejs <code>Element</code>, opisany w rozdziale <a href="pl/DOM/element">Obiekt element</a>. I wreszcie, ponieważ element HTML jest, jeśli mówimy o DOM, węzłem w drzewie węzłów, jakie tworzy obiektowy model strony internetowej czy XML, element <code>table</code> implementuje także bardziej podstawowy interfejs <code>Node</code>, z którego wywodzi się <code>Element</code>.</p> - -<p>Kiedy otrzymasz referencję do obiektu <code>table</code>, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.</p> - -<pre>var table = document.getElementById("table"); -var tableAttrs = table.attributes; // interfejs Node/Element -for(var i = 0; i < tableAttrs.length; i++){ - // interfejs HTMLTableElement: atrybut border - if(tableAttrs[i].nodeName.toLowerCase() == "border") - table.setAttribute("border", "1"); -} -// interfejs HTMLTableElement: atrybut summary -table.summary = "uwaga: zwiększono obramowanie"; -</pre> - -<h3 id="Najwa.C5.BCniejsze_interfejsy_w_DOM" name="Najwa.C5.BCniejsze_interfejsy_w_DOM">Najważniejsze interfejsy w DOM</h3> - -<p>W tej części wymienione zostaną niektóre z najczęściej używanych interfejsów DOM. Celem nie jest opisanie, co wymienione API robią, ale raczej by dać Tobie ogólne pojęcie o rodzajach metod i własności, jakie będziesz często widywał, używając DOM. Te API wykorzystano także w <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">przykładach</a>, jakie znajdziesz na końcu tej dokumentacji.</p> - -<p>Obiekty <code>document</code> i <code>window</code> to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, <code>window</code> reprezentuje coś takiego jak przeglądarka, zaś <code>document</code> jest początkiem, górą całego dokumentu. <code>Element</code> dziedziczy z ogólnego interfejsu <code>Node</code>, zaś razem te dwa interfejsy odpowiadają za wiele metod i własności, jakich będziesz używał na konkretnych elementach. Elementy te mogą mieć też własne, osobne interfejsy, służące do obsługi konkretnego rodzaju danych, jaki przechowują - tak jak na przykład wspomniany wcześniej obiekt <code>table</code>.</p> - -<p>Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.</p> - -<ul> - <li><code><a href="pl/DOM/document.getElementById">document.getElementById</a>(id)</code></li> - <li><code>element.<a href="pl/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> - <li><code><a href="pl/DOM/document.createElement">document.createElement</a>(name)</code></li> - <li><code>parentNode.<a href="pl/DOM/element.appendChild">appendChild</a>(node)</code></li> - <li><code>element.<a href="pl/DOM/element.innerHTML">innerHTML</a></code></li> - <li><code>element.<a href="pl/DOM/element.style">style</a>.left</code></li> - <li><code>element.<a href="pl/DOM/element.setAttribute">setAttribute</a></code></li> - <li><code>element.<a href="pl/DOM/element.getAttribute">element.getAttribute</a></code></li> - <li><code>element.<a href="pl/DOM/element.addEventListener">addEventListener</a></code></li> - <li><code><a href="pl/DOM/window.content">window.content</a></code></li> - <li><code><a href="pl/DOM/window.onload">window.onload</a></code></li> - <li><code><a href="pl/DOM/window.dump">window.dump</a></code></li> - <li><code><a href="pl/DOM/window.scrollTo">window.scrollTo</a></code></li> -</ul> - -<h2 id="Testowanie_DOM_API" name="Testowanie_DOM_API">Testowanie DOM API</h2> - -<p>W dokumentacji tej znajdziesz do każdego interfejsu przykłady wykorzystania. W niektórych przypadkach są to kompletne strony HTML, działające z poziomu elementu <code><script></code>, z elementami (jak np. przyciski) niezbędnymi do uruchomienia skryptu, jak również elementami, którymi operuje DOM. W takim przypadku możesz po prostu skopiować przykład, wkleić go do nowego pliku, zapisać i uruchomić w przeglądarce.</p> - -<p>Jednakże, w wielu przypadkach przykłady są bardziej zwięzłe. Aby uruchomić kod, który pokazuje proste relacje między interfejsem a elementami HTML, możesz chcieć stworzyć stronę testową. Poniżej znajdziesz właśnie taką, prostą stronę do testów - funkcje testujące możesz umieścić w znaczniku <code><script></code> w nagłówku, umieszczono też kilka elementów wraz z atrybutami, którymi możesz swobodnie manipulować, a także interfejs użytkownika, pozwalający wywoływać funkcje testowe z poziomu przeglądarki.</p> - -<p>Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.</p> - -<pre><html> -<head> -<title>DOM Tests</title> -<script type="application/x-javascript"> -function setBodyAttr(attr,value){ - if(document.body) eval('document.body.'+attr+'="'+value+'"'); - else notSupported(); -} -</script> -</head> -<body> -<div style="margin: .5in; height="400""> -<p><b><tt>text</tt> color</p> -<form> -<select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> -<option value="black">black -<option value="darkblue">darkblue -</select> - <p><b><tt>bgColor</tt></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> -<option value="white">white -<option value="lightgrey">gray - </select> -<p><b><tt>link</tt></p> -<select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> -<option value="blue">blue -<option value="green">green -</select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> -(sample link)</a></small><br> -</form> -<form> - <input type="button" value="version" onclick="ver()" /> -</form> -</div> -</body> -</html> -</pre> - -<p><img alt="Przykładowa strona testowa DOM"><br> - By przetestować więcej interfejsów na jednej stronie - np. komplet własności zmieniających kolory strony - możesz stworzyć podobną stronę z całą konsolą przycisków, pól tekstowych i innych elementów HTML. Poniższy zrzut ekranu przedstawia przykładowy pomysł pogrupowania interfejsów do testów.</p> - -<p>W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (<code>bgColor</code>), kolory linków (<code>aLink</code>), tekstu (<code>text</code>). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.</p> |