webattack.pl - JavaScript

JavaScript - obiekty

Obiekty

Obiekt to zgrupowany zbiór zmiennych i funkcji, przeznaczony do utworzenia modelu lub czegokolwiek innego, co jest znane w świecie rzeczywistym.
W obiekcie zmienne i funkcje przybierają nowe nazwy

Zmienne w obiekcie stają się właściwościami.
Właściwości dostarczają informacji o obiekcie np. nazwa hotelu, liczba dostępnych w nim pokoi.

Funkcje w obiekcie stają się metodami.
Metody przedstawiają zadania powiązane z danym obiektem.
Na przykład liczbę wolnych pokoi można sprawdzić przez odjęcie liczby zarezerwowanych pokoi od liczby wszystkich pokoi.
wolne pokoje = wszystkie pokoje - zarezerwowane pokoje

Utworzenie obiektu i jego wywołanie


<script type="text/javascript">

const person = {

	    firstName: 'Adam',

	    lastName: 'Adamowicz',

	    age: 5

};

document.write(person + '<br />');

document.write(person.firstName + '<br />');

document.write(person.lastName + '<br />');

document.write(person.age + '<br />');

</script>

wynik skryptu

Obiekt w obiekcie


<script type="text/javascript">

const personX = {

	    firstName: 'Krystian',

	    lastName: 'Krystianowski',

	    age: 105,

	    address: {

		        city: 'Katowice',

		        street: 'Katowicka',

		        streetNumber: '77/88'

	    }

};

document.write(personX.firstName + '<br />');

document.write(personX.lastName + '<br />');

document.write(personX.age + '<br />');

document.write(personX.address.city + '<br />');

document.write(personX.address.street + '<br />');

document.write(personX.address.streetNumber + '<br />');

</script>

wynik skryptu

Wywołanie obiektu za pomocą funkcji


<script type="text/javascript">

const person1 = {

	    firstName: 'Anastazja',

	    lastName: 'Anastowska',

	    age: 15

};

const person2 = {

	    firstName: 'Basia',

	    lastName: 'Basińska',

	    age: 25

};



const showPersonalDetails = person => {

	    document.write(`imię: ${person.firstName} <br />`);

	    document.write(`nazwisko: ${person.lastName} <br />`);

	    document.write(`wiek: ${person.age} <br />`);

};

showPersonalDetails(person2);

</script>

wynik skryptu

Przekierowanie z jednego obiektu na drugi obiekt


<script type="text/javascript">

const person3 = {

	    firstName: 'Czesław',

	    lastName: 'Czesławski',

	    age: 35

};

const person4 = {

	    firstName: 'Dariusz',

	    lastName: 'Dariuszowski',

	    age: 45,

	    person3: person3

};



document.write('imię: ' + person4.person3.firstName + '<br />');

document.write('nazwisko: ' + person4.person3.lastName + '<br />');

document.write('wiek: ' + person4.person3.age + '<br />');

</script>

wynik skryptu

Nadpisywanie pola w obiekcie


<script type="text/javascript">

const person5 = {

	    firstName: 'Emilia',

	    lastName: 'Emilewska',

	    age: 55

};



document.write('imię: ' + person5.firstName + '<br />');

document.write('nazwisko: ' + person5.lastName + '<br />');

document.write('wiek: ' + person5.age + '<br /><br />');



person5.firstName = 'Flora';

person5.lastName = 'Floriańska';

person5.age = 65;



document.write('imię: ' + person5.firstName + '<br />');

document.write('nazwisko: ' + person5.lastName + '<br />');

document.write('wiek: ' + person5.age + '<br /><br />');

</script>

wynik skryptu

obiekt - notacja literału

Obiekt to nawias klamrowy i jego zawartość.
W poniższym przykładzie obiekt jest przechowywany w zmiennej o nazwie hotel, a więc odwołujemy się do niego jako do obiektu hotel.

W metodzie chcekAvailability() mamy słowo kluczowe this, które wskazuje, że rooms i booked to właściwości danego obiektu.

notacja z użyciem kropki - dostęp do właściwości obiektu oraz dostęp do metody obiektu
dostęp do właściwości obiektu (nazwa obiektu, kropka, nazwa właściwości)
dostęp do metody obiektu (nazwa obiektu, kropka, nazwa metody)


<script type="text/javascript">

var hotel = {

	    name: 'Mariot',

	    rooms: 100,

	    booked: 75,

	    gym: true,

	    roomTypes: ['twin', 'double', 'suite'],

	    checkAvailability: function() {

		        return this.rooms - this.booked;

	    }

};



var hotelName = hotel.name;

var hotelRooms = hotel.rooms;

var hotelBooked = hotel.booked;

var hotelGym = hotel.gym;



var hotelRoomTypes00 = hotel.roomTypes[0];

var hotelRoomTypes01 = hotel.roomTypes[1];

var hotelRoomTypes02 = hotel.roomTypes[2];



var freeRooms = hotel.checkAvailability();



document.write("name: " + hotelName + "<br />");

document.write("rooms: " + hotelRooms + "<br />");

document.write("booked: " + hotelBooked + "<br />");

document.write("gym: " + hotelGym + "<br />");

document.write("room types: " + hotelRoomTypes00 + ", " + hotelRoomTypes01 + ", " + hotelRoomTypes02);

document.write("<br />free rooms: " + freeRooms);

</script>

wynik skryptu

obiekt - notacja literału II


<script type="text/javascript">

var hotel = {

	    name: 'Hotel Hrabiego',

	    rooms: 200,

	    booked: 150,

	    gym: true,

	    roomTypes: ['twin', 'double', 'suite'],

	    checkAvailability: function() {

		        return this.rooms - this.booked;

	    }

};



document.write("name: " + hotel.name + "<br />rooms: " + hotel.rooms + "<br />");

document.write("booked: " + hotel.booked + "<br />gym: " + hotel.gym + "<br />");

document.write("room types: " + hotel.roomTypes[0] + ", " + hotel.roomTypes[1] + ", " + hotel.roomTypes[2]);

document.write("<br />free rooms: " + hotel.checkAvailability());

</script>

wynik skryptu

obiekt - notacja literału III


<table>

  <tr>

    <td>name:</td>

    <td id="hotelName"></td>

  </tr>

  <tr>

    <td>rooms:</td>

    <td id="hotelRooms"></td>

  </tr>

  <tr>

    <td>booked:</td>

    <td id="hotelBooked"></td>

  </tr>

  <tr>

    <td>gym:</td>

    <td id="hotelGym"></td>

  </tr>

  <tr>

    <td>room types:</td>

    <td id="hotelRoomTypes00"></td>

  </tr>

  <tr>

    <td>room types:</td>

    <td id="hotelRoomTypes01"></td>

  </tr>

  <tr>

    <td>room types:</td>

    <td id="hotelRoomTypes02"></td>

  </tr>

  <tr>

    <td>free rooms:</td>

    <td id="freeRooms"></td>

  </tr>

</table>



<script type="text/javascript">

var hotel = {

	    name: 'Królewski Dwór',

	    rooms: 220,

	    booked: 175,

	    gym: false,

	    roomTypes: ['pojedynczy', 'podwójny', 'potrójny'],

	    checkAvailability: function() {

		        return this.rooms - this.booked;

	    }

};



var elName = document.getElementById('hotelName');

elName.textContent = hotel.name;



var elRooms = document.getElementById('hotelRooms');

elRooms.textContent = hotel.rooms;



var elBooked = document.getElementById('hotelBooked');

elBooked.textContent = hotel.booked;



var elGym = document.getElementById('hotelGym');

elGym.textContent = hotel.gym;



var elRoomTypes = document.getElementById('hotelRoomTypes00');

elRoomTypes.textContent = hotel.roomTypes[0];



var elRoomTypes = document.getElementById('hotelRoomTypes01');

elRoomTypes.textContent = hotel.roomTypes[1];



var elRoomTypes = document.getElementById('hotelRoomTypes02');

elRoomTypes.textContent = hotel.roomTypes[2];



var elFreeRooms = document.getElementById('freeRooms');

elFreeRooms.textContent = hotel.checkAvailability();

</script>

wynik skryptu

name:	Królewski Dwór
rooms:	220
booked:	175
gym:	false
room types:	pojedynczy
room types:	podwójny
room types:	potrójny
free rooms:	45

obiekt - notacja konstruktora new Object()


<script type="text/javascript">

var hotel = new Object();

hotel.name = 'Hotel Krwawego Barona';

hotel.rooms = 50;

hotel.booked = 41;

hotel.checkAvailability = function() {

	    return this.rooms - this.booked;

};



document.write("nazwa hotelu: " + hotel.name + "<br />");

document.write("ilość pokoi: " + hotel.rooms + "<br />");

document.write("pokoje zarezerwowane: " + hotel.booked + "<br />");

document.write("wolne pokoje: " + hotel.checkAvailability());

</script>

wynik skryptu

obiekt - notacja konstruktora new Object() II


<table>

  <tr>

    <td>nazwa hotelu: </td>

    <td id="hotelName_02"></td>	

  </tr>

  <tr>

    <td>ilość pokoi: </td>

    <td id="hotelRooms_02"></td> 

  </tr>

  <tr>

    <td>pokoje zarezerwowane: </td>

    <td id="hotelBooked_02"></td>	

  </tr>

  <tr>

    <td>wolne pokoje: </td>

    <td id="hotelFreeRooms_02"></td> 

  </tr>

</table>




<script type="text/javascript">

var hotel = new Object();

hotel.name = 'Hotel Krwawego Barona II';

hotel.rooms = 100;

hotel.booked = 88;

hotel.checkAvailability = function() {

	    return this.rooms - this.booked;

};



var elName = document.getElementById('hotelName_02');

elName.textContent = hotel.name;



var elRooms = document.getElementById('hotelRooms_02');

elRooms.textContent = hotel.rooms;



var elBooked = document.getElementById('hotelBooked_02');

elBooked.textContent = hotel.booked;



var elFreeRooms = document.getElementById('hotelFreeRooms_02');

elFreeRooms.textContent = hotel.checkAvailability();



</script>

wynik skryptu

nazwa hotelu:	Hotel Krwawego Barona II
ilość pokoi:	100
pokoje zarezerwowane:	88
wolne pokoje:	12

obiekt - notacja konstruktora III


<table>

  <tr>

    <td id="hotelA">wolne pokoje w hotelu Aligator:</td>

  </tr>

  <tr>

    <td id="hotelB">wolne pokoje w hotelu Bocian:</td>

  </tr>

</table>



<script type="text/javascript">

function Hotel(name, rooms, booked) {

        this.name = name;

        this.rooms = rooms;

        this.booked = booked;

        this.checkAvailability = function() {

                return this.rooms - this.booked;

        };

}



var hotelAligator = new Hotel('Aligator', 30, 25);

var hotelBocian = new Hotel('Bocian', 60, 50);



var detailsA = 'wolne pokoje w hotelu ' + hotelAligator.name + ': ';

          detailsA += hotelAligator.checkAvailability();

var elHotelA = document.getElementById('hotelA');

elHotelA.textContent = detailsA;



var detailsB = 'wolne pokoje w hotelu ' + hotelBocian.name + ': ';

          detailsB += hotelBocian.checkAvailability();

var elHotelB = document.getElementById('hotelB');

elHotelB.textContent = detailsB;

</script>

wynik skryptu

wolne pokoje w hotelu Aligator:

wolne pokoje w hotelu Bocian:

delete nazwaObiektu.nazwaWłaściwości - usunięcie właściwości


<script type="text/javascript">

var hotel = new Object();

hotel.name = 'Hotel Krwawego Barona';

hotel.rooms = 50;

hotel.booked = 41;

hotel.checkAvailability = function() {

	return this.rooms - this.booked;

};




delete hotel.name;

delete hotel.rooms;




document.write("nazwa hotelu: " + hotel.name + "<br />");

document.write("ilość pokoi: " + hotel.rooms + "<br />");

document.write("pokoje zarezerwowane: " + hotel.booked + "<br />");

document.write("wolne pokoje: " + hotel.checkAvailability());

</script>

wynik skryptu

dodawanie i usuwanie właściwości


<table>

  <tr>

    <td>nazwa hotelu: </td>

    <td id="nazwa_hotelu"></td>

  </tr>

  <tr>

    <td>wszystkie pokoje: </td>

    <td id="wszystkie_pokoje"></td>

  </tr>

  <tr>

    <td>zarezerwowane pokoje: </td>

    <td id="zarezerwowane_pokoje"></td>

  </tr>

  <tr>

    <td>basen: </td>

    <td id="basen"></td>	

  </tr>

  <tr>

    <td>siłownia: </td>

    <td id="silownia"></td> 

  </tr>

</table>



<script type="text/javascript">

var hotel = {

	      name: 'Hotel Sowa',

	      rooms: 40,

	      booked: 33

};



hotel.basen = true;

hotel.silownia = false

delete hotel.booked;



var elName = document.getElementById('nazwa_hotelu');

elName.textContent = hotel.name;



var elWszystkiePokoje = document.getElementById('wszystkie_pokoje');

elWszystkiePokoje.textContent = hotel.rooms;



var elZarezerwowanePokoje = document.getElementById('zarezerwowane_pokoje');

elZarezerwowanePokoje.textContent = hotel.booked;



var elBasen = document.getElementById('basen');

elBasen.textContent = hotel.basen;



var elSilownia = document.getElementById('silownia')

elSilownia.textContent = hotel.silownia;



</script>

wynik skryptu

nazwa hotelu:	Hotel Sowa
wszystkie pokoje:	40
zarezerwowane pokoje:
basen:	true
siłownia:	false

słowo kluczowe this

funkcja w zakresie globalnym


function = windowSize() {

	    var width = this.innerWidth;

	    var height = this.innerHeight;

	    return [height, width];

}

zmienne globalne



var width = 600;

var shape = [width: 300];



var showWidth = function() {

	    document.write(this.width);

}



showWidth();

metoda obiektu



var shape = {

	    width: 600,

	    height: 400,

	    getArea: function() {

		        return this.width * this.height;

	    }

};

ponieważ słowo this odwołuje się do obiektu shape, odpowiada to poniższemu poleceniu:


return shape.width * shape.height;

funkcja wyrażenia jako metoda



var width = 600;

var shape = {width: 300};



var showWidth = function() {

	    document.write(this.width);

};



shape.getWidth = showWidth;

shape.getWidth();

sposoby przechowywania danych

zmienne


<script type="text/javascript">

var hotel = "Mariot";

document.write('hotel');

</script>

wynik skryptu


<script type="text/javascript">

var wiadomosc = '<b>tytuł strony: </b>' + document.title + '<br />';

	    wiadomosc += '<b>adres strony: </b>' + document.URL + '<br />';

document.write(wiadomosc);

</script>

wynik skryptu

tablice


<script type="text/javascript">

var hotels = ['Hotel Katowice', 'Hotel Kraków', 'Hotel Wrocław', 'Hotel Warszawa'];

document.write(hotels[0] + '<br />');

document.write(hotels[1] + '<br />');

document.write(hotels[2] + '<br />');

document.write(hotels[3] + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

var hiphop = ['Kaliber 44', 'Molesta Ewenement', 'Paktofonika', 'Warszafski Deszcz'];

document.write(hiphop[0] + '<br />');

document.write(hiphop[1] + '<br />');

document.write(hiphop[2] + '<br />');

document.write(hiphop[3] + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

var rock = ['Dżem', 'Hey', 'Lady Pank', 'Varius Manx'];

document.write(rock[0] + '<br />');

document.write(rock[1] + '<br />');

document.write(rock[2] + '<br />');

document.write(rock[3] + '<br />');

document.write(rock[4] + '<br />');

</script>

wynik skryptu

obiekty


<script type="text/javascript">

var hotel = {

	    nazwa: 'Hotel Barona Kamila',

	    pokoje: 30,

	    silownia: true,

	    basen: false

};

document.write(hotel.nazwa + '<br />');

document.write(hotel.pokoje + '<br />');

document.write(hotel.silownia + '<br />');

document.write(hotel.basen + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

var kaliber44 = {

	    nazwa: 'Kaliber 44',

	    sklad: 'Abradab, Joka, Magik, DJ Feel-X',

	    album01: 'Usłysz nasze demo',

	    album02: 'Księga Tajemnicza. Prolog',

	    album03: 'W 63 minuty dookoła świata',

	    album04: '3:44',

	    album05: 'Ułamek tarcia'

};

document.write(kaliber44.nazwa + '<br />');

document.write(kaliber44.sklad + '<br />');

document.write(kaliber44.album01 + '<br />');

document.write(kaliber44.album02 + '<br />');

document.write(kaliber44.album03 + '<br />');

document.write(kaliber44.album04 + '<br />');

document.write(kaliber44.album05 + '<br />');

</script>

wynik skryptu

wiele obiektów


<script type="text/javascript">

function Hotel(nazwa, pokoje) {

	    this.nazwa = nazwa;

	    this.pokoje = pokoje;

}

var hotel01 = new Hotel('Hotel Królewski', 200);

var hotel02 = new Hotel('Hotel Cesarski', 300);



document.write(hotel01.nazwa + '<br />');

document.write(hotel01.pokoje + '<br />');

document.write(hotel02.nazwa + '<br />');

document.write(hotel02.pokoje + '<br />');

</script>

wynik skryptu

Tablica

numer indeksu	wartość
0	50
1	100
2	200
3	300


<script type="text/javascript">

var costs = [50, 100, 200, 300];

document.write(costs[0] + '<br />');

document.write(costs[1] + '<br />');

document.write(costs[2] + '<br />');

document.write(costs[3] + '<br />');

</script>

wynik skryptu

Obiekt

właściwość / klucz	wartość
room1	50
room2	100
room3	200
room4	300


<script type="text/javascript">

var costs = {

	    room1: 50,

	    room2: 100,

	    room3: 200,

	    room4: 300

}

document.write(costs.room1 + '<br />');

document.write(costs.room2 + '<br />');

document.write(costs.room3 + '<br />');

document.write(costs.room4 + '<br />');

</script>

wynik skryptu

Tablica obiektów (obiekt w tablicy)

numer indeksu	wartość
0	{accom: 50, food: 5, phone: 5}
1	{accom: 100, food: 10, phone: 10}
2	{accom: 200, food: 20, phone: 20}
3	{accom: 300, food: 30, phone: 30}


<script type="text/javascript">

var costs = [

	    {accom: 50, food: 5, phone: 5},

	    {accom: 100, food: 10, phone: 10},

	    {accom: 200, food: 20, phone: 20},

	    {accom: 300, food: 30, phone: 30}

]

document.write(costs[0].accom + '<br />');

document.write(costs[0].food + '<br />');

document.write(costs[0].phone + '<br />');

document.write(costs[1].accom + '<br />');

document.write(costs[1].food + '<br />');

document.write(costs[1].phone + '<br />');

document.write(costs[2].accom + '<br />');

document.write(costs[2].food + '<br />');

document.write(costs[2].phone + '<br />');

document.write(costs[3].accom + '<br />');

document.write(costs[3].food + '<br />');

document.write(costs[3].phone + '<br />');

</script>

wynik skryptu

Tablica obiektów (obiekt w tablicy) II

numer indeksu	wartość
0	{name: 'Czesław', rate: 50, active: true}
1	{name: 'Grzegorz', rate: 70, active: true}
2	{name: 'Marta', rate: 90, active: false}
3	{name: 'Natalia', rate: 110, active: false}


<script type="text/javascript">

var people = [

	    {name: 'Czesław', rate: 50, active: true},

	    {name: 'Grzegorz', rate: 70, active: true},

	    {name: 'Marta', rate: 90, active: false},

	    {name: 'Natalia', rate: 110, active: false}

]

document.write(people[0].name + '<br />');

document.write(people[0].rate + '<br />');

document.write(people[0].active + '<br />');

document.write(people[1].name + '<br />');

document.write(people[1].rate + '<br />');

document.write(people[1].active + '<br />');

document.write(people[2].name + '<br />');

document.write(people[2].rate + '<br />');

document.write(people[2].active + '<br />');

document.write(people[3].name + '<br />');

document.write(people[3].rate + '<br />');

document.write(people[3].active + '<br />');

</script>

wynik skryptu

Tablice w Obiekcie

właściwość / klucz	wartość
room1	items[50, 5, 5]
room2	items[100, 10, 10]
room3	items[200, 20, 20]
room4	items[300, 30, 30]

Obiekty jako Właściwości

właściwość / klucz	wartość
Czesław	{rate: 50, active: true}
Grzegorz	{rate: 70, active: true}
Marta	{rate: 90, active: false}
Natalia	{rate: 110, active: false}