From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../api/document_object_model/examples/index.html | 354 +++++++++++++++++++++ files/pl/web/api/document_object_model/index.html | 85 +++++ .../document_object_model/introduction/index.html | 171 ++++++++++ 3 files changed, 610 insertions(+) create mode 100644 files/pl/web/api/document_object_model/examples/index.html create mode 100644 files/pl/web/api/document_object_model/index.html create mode 100644 files/pl/web/api/document_object_model/introduction/index.html (limited to 'files/pl/web/api/document_object_model') diff --git a/files/pl/web/api/document_object_model/examples/index.html b/files/pl/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..90d24738ef --- /dev/null +++ b/files/pl/web/api/document_object_model/examples/index.html @@ -0,0 +1,354 @@ +--- +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 +--- +

{{ ApiRef() }}

+ +

Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie XML-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.

+ +

Przykład 1: Wysokość i szerokość

+ +

Następujący przykład pokazuje użycie własności height i width obok obrazków, które się różnią rozmiarami:

+ +
<!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>
+
+ +

height i width są także własnościami elementów OBJECT i APPLET.

+ +

Przykład 2: Atrybuty obrazu

+ +
<!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>
+
+ +

Przykład 3: Manipulacja stylami

+ +

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 przykład 4), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.

+ +
<!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>
+
+ +

Przykład 4: Zastosowanie stylów

+ +

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.

+ +
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" );
+  }
+}
+
+ +

Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:

+ +
body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Wynik skryptu będzie następujący:

+ +
BODY
+P
+#LUMPY
+
+ +

Przykład 5: Propagowanie zdarzeń

+ +

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.

+ +

Jednakże, l_func wywołuje również metodę obiektu zdarzenia event.stopPropagation powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia onclick, 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.

+ +
<!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>
+
+ +

Przykład 6: getComputedStyle

+ +

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 DOM Style Reference książki (patrz DOM CSS Properties List). Zobacz również własności stylów w DOM Elements Reference. 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.

+ +
<!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>
+
+ +

Przykład 7: Wyświetlanie stałych obiektu zdarzenia

+ +

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.

+ +
<!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>
+
+ +

Przykład 8: Zastosowanie interfejsu DOM Table

+ +

Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są table.insertRow i row.insertCell.

+ +

Aby dodać wiersz i kilka komórek do istniejącej tabeli:

+ +
<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>
+
+ +

Uwagi

+ + + +
 
+ +

{{ 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" } ) }}

diff --git a/files/pl/web/api/document_object_model/index.html b/files/pl/web/api/document_object_model/index.html new file mode 100644 index 0000000000..e4c1475516 --- /dev/null +++ b/files/pl/web/api/document_object_model/index.html @@ -0,0 +1,85 @@ +--- +title: Dokumentacja Gecko DOM +slug: Dokumentacja_Gecko_DOM +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model +--- +

+

Ta strona jest przyszłym spisem treści Dokumentacji Gecko DOM, którą przenosimy stąd. +


+

+

Przedmowa

+ +

Wprowadzenie

+ +

Elementy w DOM

+ +

Obiekt window

+ +

Obiekt document

+ +

Zdarzenia

+ +

Style w DOM

+ +

DOM range

+ +

Interfejs elementu HTML FORM

+ +

Interfejs elementu HTML TABLE

+ +

Przykłady użycia DOM

+ +


+

+
+
+{{ 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/web/api/document_object_model/introduction/index.html b/files/pl/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..2ffb9814a7 --- /dev/null +++ b/files/pl/web/api/document_object_model/introduction/index.html @@ -0,0 +1,171 @@ +--- +title: Wprowadzenie +slug: Dokumentacja_Gecko_DOM/Wprowadzenie +tags: + - DOM + - Gecko +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Ten rozdział ma dać ogólne pojęcie o DOM: co to jest, o strukturze dla dokumentów HTML i XML, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.

+ +

Czym jest DOM?

+ +

Model obiektowy dokumentu (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.

+ +

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 <P> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę getElementsByTagName:

+ +
paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] to pierwszy element <p>
+// paragraphs[1] - drugi element <p>, etc.
+alert(paragraphs[0].nodeName);
+
+ +

Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt document, reprezentujący sam dokument, obiekt table, implementujący specjalny interfejs DOM HTMLTableElement, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.

+ +

DOM vs. JavaScript

+ +

Powyższy przykład, jak i inne w tej dokumentacji, napisano w JavaScript. Ściślej, został on + + napisany + w JavaScript, ale + + korzysta + 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ć.

+ +

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:

+ +
# 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");
+
+ +

Jak korzystać z DOM?

+ +

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.

+ +

Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <SCRIPT>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów document lub window 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ę alert() obiektu window, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.

+ +
<body onload="window.alert('Witaj!');">
+
+ +

Niezależnie od elementu <script>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza H1 do drzewa dokumentu.

+ +
<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>
+
+ +

Ważne typy danych

+ +

Interfejsy DOM

+ +

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 + bytów + , jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML FORM pobiera własność name z interfejsu HTMLFormElement, a własność className z interfejsu HTMLElement. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie form.

+ +

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.

+ +

Interfejsy a obiekty

+ +

W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. table - reprezentują kilka różnych interfejsów. Dla przykładu - table implementuje specjalny interfejs HTMLTableElement, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, table implementuje też interfejs Element, opisany w rozdziale Obiekt element. 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 table implementuje także bardziej podstawowy interfejs Node, z którego wywodzi się Element.

+ +

Kiedy otrzymasz referencję do obiektu table, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.

+ +
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";
+
+ +

Najważniejsze interfejsy w DOM

+ +

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 przykładach, jakie znajdziesz na końcu tej dokumentacji.

+ +

Obiekty document i window to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, window reprezentuje coś takiego jak przeglądarka, zaś document jest początkiem, górą całego dokumentu. Element dziedziczy z ogólnego interfejsu Node, 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 table.

+ +

Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.

+ + + +

Testowanie DOM API

+ +

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 <script>, 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.

+ +

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 <script> 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.

+ +

Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.

+ +
<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>
+
+ +

Przykładowa strona testowa DOM
+ 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.

+ +

W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (bgColor), kolory linków (aLink), tekstu (text). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.

-- cgit v1.2.3-54-g00ecf