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:
- Przez pracę z listę arkuszy stylów dokumentu — na przykład: dodawanie, usuwanie i zmienianie arkusza stylów.
- Przez pracę z regułami w arkuszu stylów — na przykład: dodawanie, usuwanie lub modyfikowanie reguł.
- Przez pracę z pojedynczymi elementami w DOM — modyfikowanie jego stylu niezależnie od arkusza stylów dokumentu.
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:
|
|
Uwagi dotyczące demonstracji:
- Dokument HTML ma podpięty arkusz stylów, a także plik ze skryptem.
- Skrypt operuje na niezależnych elementach w DOM-ie. Modyfikuje styl obiektów bezpośrednio. Modyfikuje styl przycisku pośrednio, zmieniając jego atrybut.
- W JavaScripcie
document.getElementById("square")
jest podobne w działaniu do selektora CSS#square
. - W JavaScripcie
backgroundColor
odpowiada własnościbackground-color
w CSS. - Twoja przeglądarka posiada wbudowaną regułę CSS dla
button[disabled="true"]
, która zmienia wygląd przycisku, kiedy zostaje on wyłączony.
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