diff options
Diffstat (limited to 'files/pl/learn/javascript')
-rw-r--r-- | files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html | 128 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/a_first_splash/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/math/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/math/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/variables/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/what_is_javascript/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/first_steps/what_went_wrong/index.html (renamed from files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html) | 3 | ||||
-rw-r--r-- | files/pl/learn/javascript/objects/index.html (renamed from files/pl/learn/javascript/obiekty/index.html) | 3 |
8 files changed, 142 insertions, 7 deletions
diff --git a/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..c9ed6ef957 --- /dev/null +++ b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,128 @@ +--- +title: JavaScript +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - CSS:Na_początek +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +original_slug: Web/CSS/Na_początek/JavaScript +--- +<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/learn/javascript/pierwsze_kroki/a_first_splash/index.html b/files/pl/learn/javascript/first_steps/a_first_splash/index.html index 0d0f49c69a..690de69753 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html +++ b/files/pl/learn/javascript/first_steps/a_first_splash/index.html @@ -1,7 +1,8 @@ --- title: A first splash into JavaScript -slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash +slug: Learn/JavaScript/First_steps/A_first_splash translation_of: Learn/JavaScript/First_steps/A_first_splash +original_slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/pierwsze_kroki/index.html b/files/pl/learn/javascript/first_steps/index.html index ab90523dce..c9b87b56f0 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/index.html +++ b/files/pl/learn/javascript/first_steps/index.html @@ -1,6 +1,6 @@ --- title: Pierwsze kroki w Javascript -slug: Learn/JavaScript/Pierwsze_kroki +slug: Learn/JavaScript/First_steps tags: - Artykuły - Liczby @@ -11,6 +11,7 @@ tags: - Pętle - Zmienne translation_of: Learn/JavaScript/First_steps +original_slug: Learn/JavaScript/Pierwsze_kroki --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/pierwsze_kroki/math/index.html b/files/pl/learn/javascript/first_steps/math/index.html index 3e5563d0da..b1931711f1 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/math/index.html +++ b/files/pl/learn/javascript/first_steps/math/index.html @@ -1,7 +1,8 @@ --- title: Basic math in JavaScript — numbers and operators -slug: Learn/JavaScript/Pierwsze_kroki/Math +slug: Learn/JavaScript/First_steps/Math translation_of: Learn/JavaScript/First_steps/Math +original_slug: Learn/JavaScript/Pierwsze_kroki/Math --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html b/files/pl/learn/javascript/first_steps/variables/index.html index d1b55aea20..4700074092 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html +++ b/files/pl/learn/javascript/first_steps/variables/index.html @@ -1,7 +1,8 @@ --- title: Przechowywanie potrzebnych informacji — Zmienne -slug: Learn/JavaScript/Pierwsze_kroki/Zmienne +slug: Learn/JavaScript/First_steps/Variables translation_of: Learn/JavaScript/First_steps/Variables +original_slug: Learn/JavaScript/Pierwsze_kroki/Zmienne --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html index 3898eb049c..0686f6bb16 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html +++ b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html @@ -1,7 +1,8 @@ --- title: Co to jest JavaScript? -slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript +slug: Learn/JavaScript/First_steps/What_is_JavaScript translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +original_slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html index 1a88f2b797..e4aa652ef7 100644 --- a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html +++ b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html @@ -1,7 +1,8 @@ --- title: Co poszło nie tak? Rozwiązywanie problemów w JavaScript -slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak +slug: Learn/JavaScript/First_steps/What_went_wrong translation_of: Learn/JavaScript/First_steps/What_went_wrong +original_slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak --- <div>{{LearnSidebar}}</div> diff --git a/files/pl/learn/javascript/obiekty/index.html b/files/pl/learn/javascript/objects/index.html index 9952e760a3..d514829256 100644 --- a/files/pl/learn/javascript/obiekty/index.html +++ b/files/pl/learn/javascript/objects/index.html @@ -1,12 +1,13 @@ --- title: Wprowadzenie do obiektów JavaScript -slug: Learn/JavaScript/Obiekty +slug: Learn/JavaScript/Objects tags: - JavaScript - Objekt - Początkujący - samouczek translation_of: Learn/JavaScript/Objects +original_slug: Learn/JavaScript/Obiekty --- <div>{{LearnSidebar}}</div> |