From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../manipulating_documents/index.html | 127 +++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html (limited to 'files/pl/learn/javascript/client-side_web_apis') 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..128ef84501 --- /dev/null +++ b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,127 @@ +--- +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 +--- +

+

Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. +

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

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

+

Informacja: JavaScript

+

JavaScript jest językiem programowania. +Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. +

JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. +

Istnieją na to trzy sposoby: +

+ + + +
Więcej szczegółów +
Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę JavaScript na tym wiki. +
+

Zadanie: Demonstracja wykorzystania Javascript-u

+

Stwórz nowy dokument HTML, doc5.html. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

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

Stwórz nowy plik CSS, style5.css. +Skopiuj i wklej do niego poniższy kod: +

+
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+

Stwórz nowy plik tekstowy, script5.js. +Skopiuj i wklej do niego poniższy kod: +

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

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +

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

+ + +
+ + +

JavaScript demonstration

+
+
+
+		 + + +

JavaScript demonstration

+
+
+
+
+

Uwagi dotyczące demonstracji: +

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

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

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: +Wiązania XBL +

{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} -- cgit v1.2.3-54-g00ecf