docPodstawy JS programowanie obiektowe (L)
download 
Reklamacja Transkrypt
Podstawy JS programowanie obiektowe (L)
Zajęcia laboratoryjne – JavaScript Obiekty 28 października 2016 1. Podstawowy kurs języka JavaScript wykorzystywany na zajęciach dostępny jest na stronie internetowej: http://www.w3schools.com/js/default.asp 2. Zadaniem zaliczającym laboratorium jest przygotowanie dokumentu HTML + JavaScript o następujących własnościach: (a) Zarówno kod HTML jak i całość kodu JavaScript umieszczone są w pojedynczym dokumencie. (b) Klasa Student zawiera jeszcze jakieś inne pole (pole charakterystyczne dla studenta). (c) Funkcja print drukuje również dodatkowe pola klasy (w zależności od klasy powinna się pojawić informacja dotycząca pól charakterystycznych dla tej klasy). (d) Zdefiniowana jest klasa Employee, która zawiera przynajmniej jedną informację charakterystyczną dla pracownika. (e) Zdefiniowana jest klasa Teacher, która zawiera przynajmniej jedną informację charakterystyczną dla nauczyciela. Proszę zadbać o to, aby klasy dziedziczyły w odpowiedni sposób. Główna część aplikacji powinna tworzyć przynajmniej po dwa obiekty każdej klasy i stosować do każdego z nich funkcję print. Wynik działania ma być widoczny na konsoli. Dla celów poglądowych w przykładowych plikach poniżej przedstawiono wyjściową implementację aplikacji i odpowiednich klas. Proszę pamiętać, że w Państwa przypadku wszystko ma ostatecznie znaleźć się w jednym dokumencie. Proszę zadbać o odpowiednie formatowanie kodu – wcięcia i przejrzystość. Wynikiem pracy studenta ma być pojedynczy plik HTML o nazwie: naz im.html, gdzie naz jest nazwiskiem, a im jest imieniem (proszę nie używać polskich znaków). Wszystkie dokumenty należy przesłać do starosty grupy, który następnie wysyła je w jednej wiadomości na adres [email protected]. 3. Elementy języka JavaScript, o których wiedzę ma posiadać student po zaliczeniu ćwiczenia: Podstawy JavaScript i programowania obiektowego. 4. Pliki zawierające kod, od którego można zacząć pracę. Plik person.html: <!DOCTYPE html> <html> <head> <title>Person</title> <meta charset=’utf-8’> </head> <body> <script type=’text/javascript’ src=’person.js’></script> <script type=’text/javascript’ src=’student.js’></script> <script type=’text/javascript’> // Definicja tablicy, w której będą przechowywane obiekty // (Person i Student). var t = []; // Dodanie t.push(new t.push(new t.push(new obiektów do listy. Person("Andrzej")); Student("Marek")); Student("Ania")); // Wydrukowanie wszystkich obiektów, które znajdują się na liście. for (var i = 0; i < t.length; i++) { t[i].print(); } </script> </body> </html> Plik person.js: // // Definicja konstruktora dla klasy Person. // // Na podstawie tej definicji będzie możliwe tworzenie obiektów klasy // Person przy użyciu operatora new: // var p = new Person("Chmielowiec"); // function Person (name) { this.name = name; } // Metody klasy Person umieszczamy w składowej prototype, która jest // domyślnie zdefiniowana dla każdego obiektu. // Metoda drukująca informację o obiekcie. Person.prototype.print = function () { console.log("Hello! " + this.whoiam() + " My name is " + this.name + "."); } // Metoda określająca tożsamość obiekmtu. Person.prototype.whoiam = function () { return "I am a person."; } Plik student.js: // // Definicja konstruktora dla klasy Student, która jest klasą pochodną // klasy Person. // // Konstruktor klasy Student wywołuje konstruktor klasy Person. // function Student(name) { Person.call(this, name); } // Kopiowanie prototypów metod (dziedziczenie). Student.prototype = Object.create(Person.prototype); // Przeciążenie metody whoiam. Student.prototype.whoiam = function () { return "I am a student."; }
