Fandom

Wikia Polska

Komentarze4

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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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 w Fandom

Losowa wiki