diff options
Diffstat (limited to 'files/pl/web/css/na_początek/javascript')
| -rw-r--r-- | files/pl/web/css/na_początek/javascript/index.html | 127 |
1 files changed, 0 insertions, 127 deletions
diff --git a/files/pl/web/css/na_początek/javascript/index.html b/files/pl/web/css/na_początek/javascript/index.html deleted file mode 100644 index 128ef84501..0000000000 --- a/files/pl/web/css/na_początek/javascript/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Na_początek/JavaScript -tags: - - 'CSS:Na_początek' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/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" } ) }} |