Code Carrots

Programowanie obiektowe

Obiekty, konstruktory, prototypy - część pierwsza

Prowadzący: Michał Matulka

Czym jest obiekt w JavaScript?

{
    wlasnosc: "jakaśWłasność",
    metoda: function () {
        return "jestem jakąś metodą";
    }
}

Czym jest obiekt w ogóle?

Do czego służą obiekty?

Powtórzenie: słówko "this"

var jakisObiekt = {
    wlasnosc: "jakaśWłasność",
    metoda: function () {
        return "jestem jakąś metodą, i zwrócę sobie własność, a co: " + this.wlasnosc;
    }
};
console.log(jakisObiekt.metoda());
jakisObiekt.wlasnosc = 'zmieńmy to';
console.log(jakisObiekt.metoda());

Co jest, a co nie jest obiektem w JavaScript?

Programowanie obiektowe - słów kilka

Obiekty i klasy

Słowo kluczowe "new"

var mojaTablica = [];
var mojaDrugaTablica = new Array();
console.log(mojaTablica);
console.log(mojaDrugaTablica);
//to samo xD

Konstruktory w JavaScript

function Piesek() {
}

var mojPiesek = new Piesek();
console.log(mojPiesek);

"this" w kontekście konstruktora

function Piesek(imie) {
    this.imie = imie;
}

var mojPiesek = new Piesek("Azor");
console.log(mojPiesek.imie);

Własności obiektów a własności konstruktorów

function Piesek(imie) {
    this.imie = imie;
}

Piesek.rasa = "kundelek";

var mojPiesek = new Piesek("Azor");
console.log(mojPiesek.imie);
console.log(mojPiesek.rasa);

Zadanie 1

1. Stwórz nowy konstruktor "User", którego argumentami będą adres e-mail, hasło oraz adres url awatara
2. Stwórz obiekt userList, który będzie posiadał metodę "addUser", przyjmującą jako argument instancję User i zapamiętującą ją w obiekcie, oraz metodę "login" z argumentami "email" oraz "password", zwracającą true w przypadku podania prawidłowych danych dla któregoś z użytkowników, oraz "false" w przypadku podania nieprawidłowych danych.
3. Stwórz prosty formularz, zawierający pola "login" oraz "hasło", który wyświetli komunikat z informacją, czy udało się zalogować.

Prototyp

console.log(Piesek.prototype);

Własności w prototypach

Piesek.prototype.rasa = 'kundelek';
console.log(mojPiesek.rasa);

Dlaczego metody w prototypach?

Czym jest obiekt w JavaScript?

1. Stwórz nowy konstruktor "UserView", którego argumentem będzie instancja User
2. W konstruktorze UserView wygeneruj element li, zawierający obrazek z awatarem użytkownika, oraz jego adres e-mail umieszczony jako link z protokołem "mailto:" (nadaj tym elementom jakieś ładne style :) ). Przypisz element dom oraz obiekt User jako własności tworzonego obiektu.
3. W prototypie UserView utwórz metodę refresh odświeżającą dane użytkownika w elemencie dom.

Właśnie utworzyliśmy namiastkę wzorca MVVM :)