mozilla
Wyniki wyszukiwania

    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:

    • 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.
    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:

    • 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ści background-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.
    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

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Anonymous, Takenbot, Verruckt, Ptak82, gandalf, teoli, Witia
    Ostatnia aktualizacja: teoli,