Jak wspominałem w jednym z poprzednich wpisów – obecnie częściej pracuję z Javascriptem niż z Javą i czuję się w niej już na tyle pewnie, że postanowiłem nieco wiedzą się podzielić i zrobić to z perspektywy „backendowca”. Tak, więc przed Tobą pierwsza klasa Javascript ES6.
Po staremu…
Utwórzmy pusty katalog i zaimportujmy go do najpopularniejszego obecnie IDE używanego do projektów front-endowych – Visual Studio Code.
Utwórzmy w tym katalogu stary i lubiany index.html
<html>
<head></head>
<body>
Hello JavaScript World
</body>
</html>
Możemy ten plik zapisać i otworzyć w preferowanej przeglądarce.
Naszym celem będzie wyświetlenie tego samego tekstu za pomocą JavaScriptowych klas 🙂
Klasa Javascript ES6
Zacznijmy więc od utworzenia klasy Greeter z polem text i ustawieniu go podczas konstrukcji obiektu.
class Greeter {
constructor(text) {
this.text = "Hello JavaScript ES6 World";
}
greet() {
return this.text;
}
}
Wygląda całkiem znajomo? Jeśli programujesz w Javie/C# to powinno 🙂
class Hero definiuję nową klasę o nazwie Hero, osobą pracującym z z np. Javą zabraknie następnie definicji pól i ich typów… no właśnie – w JS nie mamy typów, więc po co same nazwy?
Następnie konstruktor, tu jest znacząca różnica – zamiast nazwy klasy używamy funkcji constructor wraz z listą parametrów (gdzie ponownie backendowcy przez pewien czas odczuwają tik nerwowy, bo brakuję tam typów). Samo ciało konstruktora pokrywa się 1 do 1 z tym, co widzimy w innych językach – do pola text tego obiektu przypisz daną wartość tekstową.
Pochód zamyka metoda greet() zwracająca pole text obiektu.
Użycie klasy w kodzie HTML
<html>
<head>
<scripttype="text/javascript"src="./Greeter.js"></script>
</head>
<body>
<script>
let greeter = new Greeter();
console.log(greeter.greet());
</script>
Hello JavaScript World
</body>
</html>
Importujemy nasz plik .js jak każdą inną bibliotekę, tworzymy nowy obiekt klasy Greet za pomocą znanego wyrażenia new, a następnie wypisujemy teskt powitania na konsolę javascriptową.
Został nam jeden, ostatni element układanki – mianowicie zamiast wypisywania na konsole – dodania elementu HTML do drzewa DOM z odpowiednim tekstem. Jako, że świat JS poszedł do przodu, nie musimy nawet używać do tego jQuery 😉
<html>
<head>
<script type="text/javascript" src="./Greeter.js"></script>
</head>
<body>
<h2 id="greet">
<script>
let greeter = new Greeter();
document.getElementById("greet").innerHTML = greeter.greet();
</script>
</h2>
</body>
</html>
I w ten oto sposób powstała nasza pierwsza klasa Javascript ES6.
Będziemy iść dalej w strone klas i obiektowowści w pracy z front-end, a pomoże nam w tym TypeScript – pierwszy artykuł z serii wprowadzającej jest tutaj.