1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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
---
<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" } ) }}
|
