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 --- files/pl/web/guide/ajax/getting_started/index.html | 221 +++++++++++++++++++++ .../web/guide/ajax/na_pocz\304\205tek/index.html" | 221 --------------------- files/pl/web/guide/css/kolumny_css3/index.html | 65 ------ .../guide/css/sprawdzanie_media_queries/index.html | 116 ----------- .../creating_and_triggering_events/index.html | 34 ++++ files/pl/web/guide/html/html5/index.html | 172 ++++++++++++++++ files/pl/web/guide/liczniki_css/index.html | 86 -------- 7 files changed, 427 insertions(+), 488 deletions(-) create mode 100644 files/pl/web/guide/ajax/getting_started/index.html delete mode 100644 "files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" delete mode 100644 files/pl/web/guide/css/kolumny_css3/index.html delete mode 100644 files/pl/web/guide/css/sprawdzanie_media_queries/index.html create mode 100644 files/pl/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/pl/web/guide/html/html5/index.html delete mode 100644 files/pl/web/guide/liczniki_css/index.html (limited to 'files/pl/web/guide') diff --git a/files/pl/web/guide/ajax/getting_started/index.html b/files/pl/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..1e4a4ec491 --- /dev/null +++ b/files/pl/web/guide/ajax/getting_started/index.html @@ -0,0 +1,221 @@ +--- +title: Na początek +slug: Web/Guide/AJAX/Na_początek +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

+

Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +

+

Czym jest AJAX?

+

AJAX (Asynchronous JavaScript and XML) jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps. +

Dzięki tym cechom możesz: +

+ +

Termin AJAX jest akronimem. A pochodzi od "asynchroniczny", co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. JA pochodzi od "JavaScript", a X pochodzi od "XML". +

+

Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP

+

W celu stworzenia zapytania HTTP przy użyciu JavaScriptu, potrzebujesz instancji klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą XMLHTTP. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę XMLHttpRequest, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +

W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +

+
if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+

(Na potrzeby przykładu powyższy fragment jest lekko uproszczoną wersją kodu używanego do stworzenia instancji XMLHTTP. Bardziej "życiowy" przykład można znaleźć w punkcie 3. tego artykułu). +

Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem mime-type. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to text/xml. +

+
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+

Następnie należy się zdecydować, co chcesz zrobić po otrzymaniu od serwera odpowiedzi na Twoje zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości onreadystatechange obiektu funkcji JavaScript, której będziesz używał, na przykład: +

http_request.onreadystatechange = nameOfTheFunction; +

Zwróć uwagę, że nie ma żadnych nawiasów za nazwą funkcji i nie są przekazywane żadne parametry, ponieważ chcemy przypisać referencję do tej funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład: +

+
http_request.onreadystatechange = function(){
+    // instrukcje
+};
+
+

Następnie, kiedy już zostało zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody open() i send() klasy zapytania HTTP, tak jak na poniższym przykładzie: +

+
http_request.open('GET', 'http://www.example.org/some.file', true);
+http_request.send(null);
+
+ + + +

Parametr metody send() może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody POST. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +

name=value&anothername=othervalue&so=on +

Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją encodeURIComponent. Na przykład jeśli w środku, jakiegoś przesyłanego łańcucha znajdzie się znak & to "obetnie" nasz łańcuch. Opis tej funkcji w dokumentcji zawiera bardziej szczegółowe informacje. +

Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą POST, musisz zmienić typ MIME swojego zapytania, używając składni: +

+
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+

W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +

+

Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera

+

Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +

http_request.onreadystatechange = nazwaFunkcji; +

Zobaczmy, co ta funkcja powinna zrobić. Najpierw musi ona sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie. +

+
if (http_request.readyState == 4) {
+    // wszystko jest OK, odpowiedź została odebrana
+} else {
+    // ciągle nie gotowe
+}
+
+

Możliwe są następujące wartości readyState: +

+ +

(Źródło) +

Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na stronie W3C. W tym przypadku interesuje nas tylko odpowiedź 200 OK. +

+
if (http_request.status == 200) {
+    // świetnie!!
+} else {
+    // wystąpił jakiś problem z zapytaniem,
+    // na przykład odpowiedzią mogło być 404 (Nie odnaleziono)
+    // lub 500 (Wewnętrzny błąd serwera)
+}
+
+

Teraz, kiedy został już sprawdzony stan zapytania i kod statusu odpowiedzi, możesz zrobić co zechcesz z danymi otrzymanymi z serwera. Masz dwie możliwości dostania się do danych: +

+ +

Krok 3 – "Do dzieła!" - Prosty przykład

+

Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML test.html, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji alert(). +

+
<script type="text/javascript" language="javascript">
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Przeczytaj o tym wierszu poniżej
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Wystąpił problem z zapytaniem.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')">
+        Odpytaj
+</span>
+
+

W tym przykładzie: +

+ +

Możesz przetestować ten przykład tutaj i zobaczyć testowy plik tutaj. +

Uwaga: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia http_request.overrideMimeType('text/xml'); spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: https://bugzilla.mozilla.org/show_bug.cgi?id=311724. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +

Uwaga 2: jeżeli wysyłasz zapytanie do skryptu, który ma zwrócić XML, zamiast do statycznego pliku XML, musisz ustawić nagłówki odpowiedzi, jeśli chcesz, aby zadziałało to także w Internet Explorerze. Jeżeli nie ustawisz nagłówka Content-Type: application/xml, IE zwróci błąd JavaScript "Object Expected" po wierszu, w którym próbujesz dostać się do XML-owego elementu. Jeżeli nie ustawisz nagłówka Cache-Control: no-cache, przeglądarka doda odpowiedź do pamięci podręcznej i nigdy nie wyśle żądania ponownie, sprawiając, że praca nad skryptem może być "kłopotliwa". +

Uwaga 3: jeżeli zmienna http_request jest używana globalnie, konkurujące funkcje wywołujące makeRequest() mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej http_request lokalnie dla funkcji i przekazywanie jej do funkcji alertContent() pozwala uniknąć takiej sytuacji. +

Uwaga 4: Aby zarejestrować funkcję zwrotną (callback function) onreadystatechange, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +

+
http_request.onreadystatechange = alertContents(http_request); // (nie działa)
+
+

Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć http_request jako zmiennej globalnej. Oto przykłady: +

+
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
+http_request.onreadystatechange = alertContents;  //2 (global variable)
+
+

Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli http_request jest zmienną globalną. +

Uwaga 5: W przypadku błędu połączenia (na przykład kiedy serwer WWW został wyłączony), zostanie wyrzucony wyjątek w metodzie onreadystatechange podczas próby odczytania zmiennej .status. Z tego względu dobrze jest opakować wyrażenie if...then w try...catch. (Zobacz: https://bugzilla.mozilla.org/show_bug.cgi?id=238559). +

+
function alertContents(http_request) {
+
+        try {
+            if (http_request.readyState == 4) {
+                if (http_request.status == 200) {
+                    alert(http_request.responseText);
+                } else {
+                    alert('Wystąpił problem z tym żądaniem.');
+                }
+            }
+        }
+        catch( e ) {
+            alert('Złapany wyjątek: ' + e.description);
+        }
+
+    }
+
+

Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML

+

W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości responseText obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości responseXML. +

Przede wszystkim stwórzmy prawidłowy dokument XML, o który odpytamy potem serwer. Taki dokument (<tt>test.xml</tt>) może wyglądać tak: +

+
<?xml version="1.0" ?>
+<root>
+    Jestem testem.
+</root>
+
+

W skrypcie musimy tylko zmienić linię zapytania na: +

+
...
+onclick="makeRequest('test.xml')">
+...
+
+

Potem w alertContents() musimy zmienić linię alert(http_request.responseText); na: +

+
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+

W ten sposób pobraliśmy obiekt XMLDocument, zwrócony przez responseXML i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML test.xml tutaj oraz do zaktualizowanego skryptu tutaj. +

Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów Mozilla's DOM implementation. +

+
+
+{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }} diff --git "a/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" "b/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" deleted file mode 100644 index 1e4a4ec491..0000000000 --- "a/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Na początek -slug: Web/Guide/AJAX/Na_początek -tags: - - AJAX - - Wszystkie_kategorie -translation_of: Web/Guide/AJAX/Getting_Started ---- -

-

Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. -

-

Czym jest AJAX?

-

AJAX (Asynchronous JavaScript and XML) jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps. -

Dzięki tym cechom możesz: -

- -

Termin AJAX jest akronimem. A pochodzi od "asynchroniczny", co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. JA pochodzi od "JavaScript", a X pochodzi od "XML". -

-

Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP

-

W celu stworzenia zapytania HTTP przy użyciu JavaScriptu, potrzebujesz instancji klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą XMLHTTP. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę XMLHttpRequest, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. -

W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: -

-
if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ...
-    http_request = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE
-    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
-

(Na potrzeby przykładu powyższy fragment jest lekko uproszczoną wersją kodu używanego do stworzenia instancji XMLHTTP. Bardziej "życiowy" przykład można znaleźć w punkcie 3. tego artykułu). -

Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem mime-type. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to text/xml. -

-
http_request = new XMLHttpRequest();
-http_request.overrideMimeType('text/xml');
-
-

Następnie należy się zdecydować, co chcesz zrobić po otrzymaniu od serwera odpowiedzi na Twoje zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości onreadystatechange obiektu funkcji JavaScript, której będziesz używał, na przykład: -

http_request.onreadystatechange = nameOfTheFunction; -

Zwróć uwagę, że nie ma żadnych nawiasów za nazwą funkcji i nie są przekazywane żadne parametry, ponieważ chcemy przypisać referencję do tej funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład: -

-
http_request.onreadystatechange = function(){
-    // instrukcje
-};
-
-

Następnie, kiedy już zostało zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody open() i send() klasy zapytania HTTP, tak jak na poniższym przykładzie: -

-
http_request.open('GET', 'http://www.example.org/some.file', true);
-http_request.send(null);
-
- - - -

Parametr metody send() może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody POST. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: -

name=value&anothername=othervalue&so=on -

Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją encodeURIComponent. Na przykład jeśli w środku, jakiegoś przesyłanego łańcucha znajdzie się znak & to "obetnie" nasz łańcuch. Opis tej funkcji w dokumentcji zawiera bardziej szczegółowe informacje. -

Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą POST, musisz zmienić typ MIME swojego zapytania, używając składni: -

-
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-

W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. -

-

Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera

-

Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? -

http_request.onreadystatechange = nazwaFunkcji; -

Zobaczmy, co ta funkcja powinna zrobić. Najpierw musi ona sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie. -

-
if (http_request.readyState == 4) {
-    // wszystko jest OK, odpowiedź została odebrana
-} else {
-    // ciągle nie gotowe
-}
-
-

Możliwe są następujące wartości readyState: -

- -

(Źródło) -

Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na stronie W3C. W tym przypadku interesuje nas tylko odpowiedź 200 OK. -

-
if (http_request.status == 200) {
-    // świetnie!!
-} else {
-    // wystąpił jakiś problem z zapytaniem,
-    // na przykład odpowiedzią mogło być 404 (Nie odnaleziono)
-    // lub 500 (Wewnętrzny błąd serwera)
-}
-
-

Teraz, kiedy został już sprawdzony stan zapytania i kod statusu odpowiedzi, możesz zrobić co zechcesz z danymi otrzymanymi z serwera. Masz dwie możliwości dostania się do danych: -

- -

Krok 3 – "Do dzieła!" - Prosty przykład

-

Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML test.html, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji alert(). -

-
<script type="text/javascript" language="javascript">
-
-    var http_request = false;
-
-    function makeRequest(url) {
-
-        http_request = false;
-
-        if (window.XMLHttpRequest) { // Mozilla, Safari,...
-            http_request = new XMLHttpRequest();
-            if (http_request.overrideMimeType) {
-                http_request.overrideMimeType('text/xml');
-                // Przeczytaj o tym wierszu poniżej
-            }
-        } else if (window.ActiveXObject) { // IE
-            try {
-                http_request = new ActiveXObject("Msxml2.XMLHTTP");
-            } catch (e) {
-                try {
-                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-                } catch (e) {}
-            }
-        }
-
-        if (!http_request) {
-            alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
-            return false;
-        }
-        http_request.onreadystatechange = function() { alertContents(http_request); };
-        http_request.open('GET', url, true);
-        http_request.send(null);
-
-    }
-
-    function alertContents(http_request) {
-
-        if (http_request.readyState == 4) {
-            if (http_request.status == 200) {
-                alert(http_request.responseText);
-            } else {
-                alert('Wystąpił problem z zapytaniem.');
-            }
-        }
-
-    }
-</script>
-<span
-    style="cursor: pointer; text-decoration: underline"
-    onclick="makeRequest('test.html')">
-        Odpytaj
-</span>
-
-

W tym przykładzie: -

- -

Możesz przetestować ten przykład tutaj i zobaczyć testowy plik tutaj. -

Uwaga: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia http_request.overrideMimeType('text/xml'); spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: https://bugzilla.mozilla.org/show_bug.cgi?id=311724. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. -

Uwaga 2: jeżeli wysyłasz zapytanie do skryptu, który ma zwrócić XML, zamiast do statycznego pliku XML, musisz ustawić nagłówki odpowiedzi, jeśli chcesz, aby zadziałało to także w Internet Explorerze. Jeżeli nie ustawisz nagłówka Content-Type: application/xml, IE zwróci błąd JavaScript "Object Expected" po wierszu, w którym próbujesz dostać się do XML-owego elementu. Jeżeli nie ustawisz nagłówka Cache-Control: no-cache, przeglądarka doda odpowiedź do pamięci podręcznej i nigdy nie wyśle żądania ponownie, sprawiając, że praca nad skryptem może być "kłopotliwa". -

Uwaga 3: jeżeli zmienna http_request jest używana globalnie, konkurujące funkcje wywołujące makeRequest() mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej http_request lokalnie dla funkcji i przekazywanie jej do funkcji alertContent() pozwala uniknąć takiej sytuacji. -

Uwaga 4: Aby zarejestrować funkcję zwrotną (callback function) onreadystatechange, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: -

-
http_request.onreadystatechange = alertContents(http_request); // (nie działa)
-
-

Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć http_request jako zmiennej globalnej. Oto przykłady: -

-
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
-http_request.onreadystatechange = alertContents;  //2 (global variable)
-
-

Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli http_request jest zmienną globalną. -

Uwaga 5: W przypadku błędu połączenia (na przykład kiedy serwer WWW został wyłączony), zostanie wyrzucony wyjątek w metodzie onreadystatechange podczas próby odczytania zmiennej .status. Z tego względu dobrze jest opakować wyrażenie if...then w try...catch. (Zobacz: https://bugzilla.mozilla.org/show_bug.cgi?id=238559). -

-
function alertContents(http_request) {
-
-        try {
-            if (http_request.readyState == 4) {
-                if (http_request.status == 200) {
-                    alert(http_request.responseText);
-                } else {
-                    alert('Wystąpił problem z tym żądaniem.');
-                }
-            }
-        }
-        catch( e ) {
-            alert('Złapany wyjątek: ' + e.description);
-        }
-
-    }
-
-

Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML

-

W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości responseText obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości responseXML. -

Przede wszystkim stwórzmy prawidłowy dokument XML, o który odpytamy potem serwer. Taki dokument (<tt>test.xml</tt>) może wyglądać tak: -

-
<?xml version="1.0" ?>
-<root>
-    Jestem testem.
-</root>
-
-

W skrypcie musimy tylko zmienić linię zapytania na: -

-
...
-onclick="makeRequest('test.xml')">
-...
-
-

Potem w alertContents() musimy zmienić linię alert(http_request.responseText); na: -

-
var xmldoc = http_request.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
-

W ten sposób pobraliśmy obiekt XMLDocument, zwrócony przez responseXML i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML test.xml tutaj oraz do zaktualizowanego skryptu tutaj. -

Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów Mozilla's DOM implementation. -

-
-
-{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }} diff --git a/files/pl/web/guide/css/kolumny_css3/index.html b/files/pl/web/guide/css/kolumny_css3/index.html deleted file mode 100644 index 19d3c4285a..0000000000 --- a/files/pl/web/guide/css/kolumny_css3/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Kolumny CSS3 -slug: Web/Guide/CSS/Kolumny_CSS3 -tags: - - CSS - - CSS_3 - - Wszystkie_kategorie -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -

-

-

Wprowadzenie

-

Czytanie tekstu wyświetlanego w długich wierszach jest trudne i męczące dla oczu - jeśli przenoszenie wzroku z końca jednej linii na początek drugiej zajmuje zbyt wiele czasu, łatwo jest zgubić się w tekście i rozpocząć czytanie niewłaściwego wiersza. Z tego powodu i aby w pełni wykorzystać szerokość ekranu, tekst na stronach internetowych - tak samo jak w gazetach - powinien być układany w sąsiadujących kolumnach o stałej szerokości. Niestety osiągnięcie tego efektu nie jest możliwe przy użyciu języków HTML i obecnego CSS bez wymuszania sztywnej wysokości kolumn, znacznego ograniczania dozwolonej składni wewnątrz tekstu bądź też bez stosowania skomplikowanych skryptów. -

Szkic specyfikacji CSS3 proponuje kilka nowych własności CSS, które rozwiązałyby ten problem. W Firefoksie 1.5 i następnych zaimplementowana została część tych własności i zachowują się one w sposób opisany przez szkic specyfikacji (z jednym wyjątkiem opisanym niżej).

Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) blog Roberta O'Callahana. -

-

Stosowanie kolumn

-

Liczba i szerokość kolumn

-

Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: -moz-column-count oraz -moz-column-width. -

-moz-column-count pozwala ustalić liczbę kolumn. Na przykład: -

-
<div style="-moz-column-count:2">Z powodu trwających przygotowań do wydania Mozilli
-Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
-Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
-którego wydanie zaplanowane jest na czwartek.</div>
-
-

Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: -

-
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
-

-moz-column-width pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność -moz-column-count nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: -

-
<div style="-moz-column-width:20em;">Z powodu trwających przygotowań do wydania Mozilli
-Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
-Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
-którego wydanie zaplanowane jest na czwartek.</div>
-
-

przeglądarka wyświetli następująco: -

-
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
-

Szczegóły dotyczące kolumn CSS opisano w szkicu specyfikacji CSS3. -

W przypadku wyświetlania wielokolumnowego, treść automatycznie przepływa do następnych kolumn, jeśli zachodzi taka potrzeba. Cała funkcjonalność HTML, CSS oraz DOM jest zachowana, podobnie jak możliwość edycji i drukowania. -


-

-

Wyrówywanie wysokości kolumn

-

Szkic specyfikacji CSS3 zakłada, że wysokości kolumn powinny być wyrównywane przez przeglądarkę w taki sposób, by wysokości treści w każdej kolumnie były możliwie najbardziej zbliżone. I to właśnie robi Firefox. -

Czasami jednak pojawia się potrzeba jednoznacznego zdefiniowania wysokości kolumn. W takim przypadku treść - w zależności od długości - wyświetlana powinna być w różnej, nieznanej projektantowi liczbie kolumn. Efekt ten zastosowano na stronach International Herald Tribune, gdzie jednak użyto w tym celu odpowiednich skryptów. Firefox rozszerza szkic specyfikacji CSS w taki sposób, że nadanie blokowi kolumn własności height powoduje wydłużanie się kolumn do określonej wysokości, a po osiągnięciu tejże - utworzeniu nowej kolumny. Zachowanie to jest bardzo przydatne przy tworzeniu układów stron WWW. -

-

Odstęp między kolumnami

-

Domyślnie, przeglądarka wyświetla kolumny jedna tuż obok drugiej, przylegające do siebie. Zazwyczaj jednak nie jest to zachowanie pożądane. Aby poprawić tę sytuację, można za pomocą CSS ustawić dla kolumn odpowiednie wartości marginesów wewnętrznych, często jednak o wiele łatwiej zastosować jest własność -moz-column-gap ustawianą dla bloku kolumn: -

-
<div style="-moz-column-width:20em; -moz-column-gap:2em;">Z powodu trwających
-przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś
-w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą
-przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div>
-
-
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
-

Czytelność w starszych przeglądarkach

-

Starsze przeglądarki ignorują własności -moz-column, dzięki czemu stosunkowo łatwo jest utworzyć stronę, której treść będzie wyświetlana w pojedynczej kolumnie w starszych przeglądarkach, a w wielu kolumnach w Firefoksie 1.5. -

-

Zakończenie

-

Kolumny w CSS3 to nowe narzędzie, które pomoże projektantom stron internetowych w najlepszy możliwy sposób wykorzystywać cenną powierzchnię ekranów uzytkowników. Dzięki takim opcjom jak automatycze wyrównywanie wysokości, kolumny na pewno znajdą wiele zastosowań w tworzeniu stron internetowych. -

-

Dodatkowe zasoby

- -{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns" } ) }} diff --git a/files/pl/web/guide/css/sprawdzanie_media_queries/index.html b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html deleted file mode 100644 index 140d3a1796..0000000000 --- a/files/pl/web/guide/css/sprawdzanie_media_queries/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Sprawdzanie media queries -slug: Web/Guide/CSS/Sprawdzanie_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -

{{SeeCompatTable}}

- -

DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu {{domxref("MediaQueryList") }} i jego funkcji oraz właściwości. Po utworzeniu obiektu {{domxref("MediaQueryList") }} możesz zbadać wynik zapytania (query) lub (dodatkowo) otrzymywać powiadomienie, gdy rezultat się zmieni.

- -

Tworzenie listy media query

- -

Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, reprezentujący media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.

- -

Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:

- -
var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */
-
- -

Sprawdzanie rezultatu zapytania (query)

- -

Po wykonaniu powyższej metody, mamy dostęp do obiektu {{domxref("MediaQueryList") }}, który ma kilka przydatnych metod i właściwości. Jedną z nich jest cecha matches, która zwraca prawdę lub fałsz.

- -
if (mql.matches) {
-  /* wykryta orientacja pionowa */
-} else {
-  /* wykryta orientacja pozioma */
-}
-
- -

Otrzymywanie powiadomień

- -

W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji addListener(), która jest zdecydowanie wydajniejsza aniżeli sprawdzanie "ręcznie" co jakiś czas. By skorzystać z tego ułatwienia, wywołaj tę funkcję na obiekcie {{domxref("MediaQueryList") }}, określając obserwator, który implementuje interfejs {{domxref("MediaQueryListListener") }}:

- -
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(zmianaOrientacji);
-zmianaOrientacji(mql);
-
- -

Powyższy kod tworzy media query list, a następnie dołącza listener. Zauważ, że po dodaniu listenera, przywołaliśmy listenera bezpośrednio - trzecia linijka. To pozwala nam określić aktualną orientację urządzenia.

- -

Zaimplementowana metoda zmianaOrientacji() pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.

- -
function zmianaOrientacji(mql) {
-  if (mql.matches) {
-    /* wykryta orientacja pionowa */
-  } else {
-    /* wykryta orientacja pozioma */
-  }
-}
-
- -

Wyłączenie powiadomień

- -

Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę removeListener() dostępną w obiekcie {{domxref("MediaQueryList") }}:

- -
mql.removeListener(zmianaOrientacji);
-
- -

Zgodność z przeglądarką

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
-
- -

Zobacz także

- - diff --git a/files/pl/web/guide/events/creating_and_triggering_events/index.html b/files/pl/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..82deba43c1 --- /dev/null +++ b/files/pl/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,34 @@ +--- +title: dispatchEvent - przykład +slug: DOM/dispatchEvent_-_przykład +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +
+ {{ ApiRef() }}
+

Poniższy przykład przedstawia symulację kliknięcia w pole wyboru opartą o metody DOM. Możesz zobaczyć przykład w działaniu.

+
function simulateClick() {
+  var evt = document.createEvent("MouseEvents");
+  evt.initMouseEvent("click", true, true, window,
+    0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  var cb = document.getElementById("checkbox");
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // metoda obsługi zdarzenia wywołała preventDefault
+    alert("canceled");
+  } else {
+    // nie wywołano preventDefault
+    alert("not canceled");
+  }
+}
+
+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "fr": "fr/DOM/dispatchEvent_exemple" } ) }}

diff --git a/files/pl/web/guide/html/html5/index.html b/files/pl/web/guide/html/html5/index.html new file mode 100644 index 0000000000..77e7775ce2 --- /dev/null +++ b/files/pl/web/guide/html/html5/index.html @@ -0,0 +1,172 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - CSS3 + - HTML + - HTML 5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 jest najnowszą wersją standardu opisującego język HTML. Termin ten możemy zdefiniować na dwa sposoby:

+ + + +

Zawarta poniżej treść przeznaczona jest do zastosowania przez wszystkich programistów, strona zawiera dużo informacji na temat technologii HTML5, która została opisana w kilku grupach podzielonych według ich funkcji.

+ + + +
+

Semantyka

+ +
+
Elementy sekcji zawarte w dokumencie HTML5
+
Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.
+
Zastosowanie elementów audio i video
+
Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.
+
Formularze w HTML5
+
Spojrzenie na ulepszenia formularzy sieciowych w HTML5: wymuszenie poprawności API, kilka nowych atrybutów, nowe wartości dla atrybutów {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} i nowego elementu {{HTMLElement("output")}}.
+
Nowe semantyczne elementy 
+
Obok sekcji, elementów mediów i formularzy, są liczne, nowe elementy takie jak: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, lub {{HTMLElement("meter")}} i {{HTMLElement("main")}}, zwiększenie ilości elementów poprawności HTML 5.
+
Ulepszenia w {{HTMLElement("iframe")}}
+
Używając atrybutów {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}} , autorzy mogą teraz precyzyjniej określać poziom bezpieczeństwa i pożądane wyświetlanie elementów {{HTMLElement("iframe")}}.
+
MathML
+
Pozwala na bezpośrednie umieszczanie formuł matematycznych.
+
Wprowadzenie do HTML5
+
Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.
+
Parser zgodny z HTML5
+
Parser, który przetwarza dokument HTML na DOM, został rozszerzony i teraz precyzyjnie definiuje zachowanie we wszystkich przypadkach, nawet w wypadku niepoprawnego HTML-a. To prowadzi do znacznie większej przewidywalności zachowania strony i współpracy między przeglądarkami zgodnymi z HTML 5.
+
+ +

Połączenia

+ +
+
Web Sockets (dwukierunkowa komunikacja z serwerem)
+
Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i  wymieniać nie-HTML-owe dane.
+
Server-Sent Events (zdarzenia wysłane przez serwer)
+
Pozwala serwerowi na "własnowolne" wysyłanie zdarzeń do klienta, inaczej niż w przypadku klasycznego paradygmatu, w którym serwer mógł wysyłać dane tylko w odpowiedzi na zapytanie klienta.
+
WebRTC
+
Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
+
+ +

Tryb Offline i przechowywanie

+ +
+
Zasoby offline: pamięć cache aplikacji
+
Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.
+
Zdarzenia online i offline
+
Firefox 3 wspiera zdarzenia WHATWG online i offline, dzięki czemu aplikacje i dodatki mogą wykryć czy istnieje aktywne połączenie internetowe, a także wykrywać kiedy połączenie wygaśnie i kiedy jest aktywne.
+
Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)
+
Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.
+
IndexedDB
+
IndexedDB jest sieciowym standardem przechowywania znacznych ilości danych strukturalnych w przeglądarce i wysokiej wydajności wyszukiwania w tych danych za pomocą indeksów.
+
Używanie plików z aplikacji internetowych
+
Wsparcie dla nowego API plików HTML5 zostało dodane do Gecko, tworząc możliwość dostępu aplikacji internetowych do plików lokalnych wybranych przez użytkownika. Obejmuje też wsparcie dla wielokrotnego wyboru plików z użyciem {{HTMLElement("input")}} z atrybutem type file i nowym atrybutem elementu: multiple. Istnieje także FileReader.
+
+ +

Multimedia

+ +
+
Zastosowanie elementów audio i video w HTML5
+
Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.
+
WebRTC
+
Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
+
Używanie API kamery internetowej
+
Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
+
Track and WebVTT
+
Znacznik {{HTMLElement("track")}} pozwala  tworzyć napisy i rozdziały. WebVTT jest formatem ścieżek tekstowych.
+
+ +

EFEKTY I GRAFIKA 3D

+ +
+
Przewodnik po Canvas
+
Informacje o nowym elemencie {{HTMLElement("canvas")}} wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie.
+
HTML5 text API dla elementów <canvas>
+
HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.
+
WebGL
+
WebGL przenosi grafikę 3D do sieci poprzez wprowadzenie API, które ściśle odpowiada OpenGl ES 2.0 i może być używane w znacznikach HTML5 {{HTMLElement("canvas")}}.
+
SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa
+
Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.
+
+ +
+

WYDAJNOŚĆ i iNTEGRACJA

+ +
+
Web Workers
+
Umożliwia przekazanie działania JavaScript do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.
+
XMLHttpRequest Poziom 2
+
Umożliwia asynchroniczne pobieranie części strony, co umożliwia wyświetlanie elementów dynamicznych, zmieniających się w zależności od czasu i działań użytkownika. Jest to "następca" Ajax-a.
+
JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)
+
Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.
+
API do obsługi przycisku wstecz (History API)
+
Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.
+
Atrybut contentEditable: przekształć swoją stronę w encyklopedię!
+
HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.
+
Przeciągnij i upuść
+
API 'przeciągnij i upuść' w HTML5 wspiera przeciąganie i upuszczanie elementów wewnątrz strony i pomiędzy stronami. Upraszcza to także API dla dodatków i aplikacji bazujących na technologiach Mozilli.
+
Zarządzanie aktywnością w HTML
+
Nowe atrybuty HTML5 activeElement i hasFocus są już wspierane.
+
Obsługa protokołów opartych na sieci
+
Możesz teraz zarejestrować aplikacje internetowe jako obsługę protokołów używając funkcji navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Pozwala kontrolować renderowanie animacji dla uzyskania optymalnej wydajności.1
+
Pełnoekranowe API
+
Kontroluje użycie całego ekranu dla stron internetowych lub aplikacji sieciowych bez wyświetlania UI przeglądarki.
+
Blokowanie kursora
+
Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.
+
Zdarzenia online i offline
+
Aby stworzyć dobrze obsługującą tryb offline aplikację internetową trzeba wiedzieć, kiedy aplikacja jest rzeczywiście offline. Prawdę mówiąc, musisz wiedzieć też, kiedy aplikacja powróci do stanu online.
+
+ +

DOSTĘP DO URZĄDZENIA

+ +
+
+
Używanie API kamery internetowej
+
Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
+
Zdarzenia dotykowe
+
Narzędzia do obsługi zdarzeń tworzonych przez użytkownika używającego ekranu dotykowego.
+
Geolokacja
+
Pozwól przeglądarce zlokalizować pozycję użytkownika przy użyciu geolokacji.
+
Wykrywanie orientacji urządzenia
+
Pobierz informację o zmianie orientacji urządzenia na którym pracuje przeglądarka. Może ona być użyta jako urządzenie wejściowe( np w grach reagujących na zmianę pozycji urządzenia) lub służyć przystosowaniu layoutu strony do aktualnej orientacji urządzenia (portrait lub landscape)
+
+
Blokowanie kursora
+
Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.
+
+ +

stylizacja

+ +

CSS zostało rozszerzone, aby móc o wiele wygodniej stylizować elementy. Jest często nazywane CSS3, choć CSS nie jest monolitycznym tworem, w którym wszystkie elementy są na poziomie 3. Część jest na poziomie 1, część na 4, Lub którymś z poziomów pośrednich.

+ +
+
Nowe właściwości stylizacji tła
+
Teraz jest możliwe dodanie cienia do box-ów używając {{cssxref("box-shadow")}}, a także można ustawić wielokrotne tło.
+
Bardziej fantazyjne obramowania
+
Teraz nie tylko możliwe jest stylizowanie obramowań za pomocą obrazów, używając {{cssxref("border-image")}} i związanych z pismem odręcznym właściwościami, ale także zaokrąglenia obramowań są wspierane przez właściwość {{cssxref("border-radius")}}.
+
Wpraw w ruch swój styl
+
Używając Przejść CSS do animacji przejść pomiędzy różnymi stanami lub używając Animacji CSS do animowania części strony, bez zdarzenia wywołującego, możesz teraz kontrolować elementy interaktywne na twojej stronie.
+
Poprawa typografii Typography improvement
+
Autorzy mają większą kontrolę dla osiągnięcia lepszej typografii. Mogą kontrolować {{cssxref("text-overflow")}} i dzielenie wyrazów, a także mogą dodawać cienie i precyzyjniej kontrolować dekoracje tekstu. Niestandardowe kroje można pobrać i zastosować za pomocą {{cssxref("@font-face")}}.
+
Nowe, prezentacyjne layouty
+
W celu polepszenia elastyczności designów zostały dodane dwa nowe layouty: CSS multi-column layout(wielokolumnowy layout CSS) i CSS flexible box layout(layout elastycznego pudełka CSS).
+
+
+
+ +
+
+
diff --git a/files/pl/web/guide/liczniki_css/index.html b/files/pl/web/guide/liczniki_css/index.html deleted file mode 100644 index 3c494e6af3..0000000000 --- a/files/pl/web/guide/liczniki_css/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Liczniki CSS -slug: Web/Guide/Liczniki_CSS -tags: - - CSS - - Wszystkie_kategorie -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -

 

- -

Podsumowanie

- -

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

- -

Zastosowanie liczników

- -

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

- -
  body {
-    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
-  }
-  h1::before {
-    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
-    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
-  }
-
- -

Zagnieżdżanie liczników

- -

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

- -
  ol {
-    counter-reset: sekcja;                /* Tworzy nową instancję licznika
-                                             sekcja w każdym elemencie ol */
-    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
-  }
-  li::before {
-    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
-                                             licznika sekcja */
-    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
-                                             instancji licznika sekcja,
-                                             oddzielając je ciągiem ".". */
-  }
-
- -

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

- -
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
-
- -

Zobacz także

- - - -

potrzebna treść do artykułu

- -

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

-- cgit v1.2.3-54-g00ecf