Wikia

Wikia Polska

Komentarze4

Skryptowe rewolucje – 1: Początki z JavaScriptem i logo

Skoro ludzie chcą to czytać... Proszę bardzo! Dziś w temacie są obiekty, funkcje w obiektach oraz ich przykładowe użycie.

Skryptowe rewolucje

Przed dalszym czytaniem należy włączyć konsolę JavaScript w przeglądarce.

Zaczynając od tworzenia skryptu, powinniśmy zacząć od stworzenia zmiennej. Tak, zmiennej. Tylko że zmienna ta będzie nietypowa, bo będziemy ją określać jako obiekt.

var Jajko = new Object();

Nasze jajko będzie obiektem. Teraz trzeba opisać pewne funkcje, które coś zrobią z tym jajkiem, np. smażenie. Do tego posłuży nam patelnia, czyli kolejny nowy obiekt. Jej też trzeba przypisać jakieś funkcje i zmienne.

var Patelnia = new Object();
Patelnia = {
  zawartosc: null,
  temperatura: 20,
  usmaz: function(obj) {Patelnia.zawartosc = obj;},
  podgrzej: function(temp) {Patelnia.temperatura += temp;},
};
Jajko = {
  wysmazone: function() {
    if(Patelnia.zawartosc == Jajko && Patelnia.temperatura >= 100) {
      return true;
    } else {
      return false;
    }
  }
};

Możemy już gotować? Nie, brakuje nam tłuszczu, piekarnika itd...

Tak właśnie powinno się pisać skrypty (nie tylko w JS, ale w każdym języku obiektowym). Możemy teraz pobawić się skryptem.

Patelnia.usmaz(Jajko); // Jajko w patelni
Patelnia.podgrzej(20); // Temperatura wynosi teraz 40 (stopni)
Jajko.wysmazone(); // = false

Wyszło nam false, czyli jajko nie jest (w takiej temperaturze) wysmażone. Skoro określiliśmy, że zawartością patelni jest jajko, to zamiast „Jajko” będziemy używać „Patelnia.zawartosc”.

Patelnia.podgrzej(60); // Temperatura wynosi teraz 100 (stopni)
Patelnia.zawartosc.wysmazone(); // = true

Udało się! Jajko, które jest w patelni, jest wysmażone. Zacznijmy może od nowa, tym razem skrótowo.

var
 Patelnia = {
  zawartosc: null,
  temperatura: 20,
  usmaz: function(obj) {Patelnia.zawartosc = obj;},
  podgrzej: function(temp) {Patelnia.temperatura += temp;},
},
 Jajko = {
  wysmazone: function() {
   if(Patelnia.zawartosc == Jajko && Patelnia.temperatura >= 100) {
    return true;
   } else {
    return false;
   }
 }
};

Chcąc zachować wszystkie parametry, musimy stworzyć nowe obiekty opierające się na patelni i jajku.

var
 Tefal = new Object(Patelnia),
 Kurze = new Object(Jajko);

Za każdym razem, wpisując powyższy skrypt, zresetujemy parametry i wartości. Zmienne nie będą wpływać na patelnię i jajko.

Czego powinniście się z tego dowiedzieć?

  • Zmienna w obiekcie może być obiektem,
  • Nowy obiekt może powstać z innego obiektu,
  • Porównując obiekty, jeśli są takie same, zwraca true,
  • Powyższy skrypt nie operuje HTML-em, ale...
  • Można z tego zrobić fajną grę.

Następnym razem opiszę użycie tablic oraz tworzenie ich przez funkcje. Skrypt był testowany w Firefoksie (100% poprawnie).

Więcej od Wikii

Losowa wiki