V. Objektumok

Az objektumok létjogosultsága

NévAzonosítóTelefonszámEmail
Ügyfél1111106-555-111valami1@valami.com
Ügyfél2222206-555-222valami2@valami.com
Ügyfél3333306-555-333valami3@valami.com
Ezen adatok eltárolására alapvetően két lehetőség van: 

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

// Ügyfél1
var ugyfel1nev = "Ügyfél1";
var ugyfel1azon = "111";
var ugyfel1telefon = "06-555-111";
var ugyfel1email = "valami1@valami.com";

// Ügyfél2
var ugyfel2nev = "Ügyfél2";
var ugyfel2azon = "222";
var ugyfel2telefon = "06-555-222";
var ugyfel2email = "valami2@valami.com";

// Ügyfél3
var ugyfel3nev = "Ügyfél3";
var ugyfel3azon = "333";
var ugyfel3telefon = "06-555-333";
var ugyfel3email = "valami3@valami.com";

 </script>
</body>
</html>

Baj: a) 200 ügyfélnél sok változó, b) nem kereshető

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">


var ugyfelnev = ["Ügyfél1", "Ügyfél2", "Ügyfél3"];
var ugyfelazon = ["111", "222", "333"];
var ugyfeltelefon = ["06-555-111", "06-555-222", "06-555-333"];
var ugyfelemail = ["valami1@valami.com", "valami2@valami.com", "valami3@valami.com"];

// Ügyfél2 adatai

for(var i = 0; i < ugyfelnev.length; i++)
{
	if(ugyfelnev[i] == "Ügyfél2")
		document.write("ugyfelnev: "+ugyfelnev[i]+" azonosito: "+ugyfelazon[i]+" telefon: "+ugyfeltelefon[i]+" email: "+ugyfelemail[i]+"<br>");
}


 </script>
</body>
</html>

Függvények, mint objektumok

Első példa az objektumra: téglalap objektum.

<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function teglalap(a, b) {
   this.a = a;
   this.b = b;
   
    this.terulet = function() {
        var t = this.a*this.b;
        document.write("terület = "+t+"<br>");
    }
	
	this.kerulet = function() {
        var k = (this.a+this.b)*2;
        document.write("kerület = "+k+"<br>");
    }
   
};

var teglalap1 = new teglalap(5,7);
var teglalap2 = new teglalap(2,3);

teglalap1.terulet();
teglalap2.kerulet();

 </script>
</body>
</html>

Második példa az objektumra: alkalmazottak listaja.

<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function alkalmazott(nev, telefon, szobaszam) {
   this.nev = nev;
   this.telefon = telefon;
   this.szobaszam = szobaszam;
   
    this.kiir = function() {
        document.write(this.nev+" telefonszama: "+this.telefon+" szobaszama: "+this.szobaszam+"<br>");
    }
   
};

var emberek = [];

emberek.push(new alkalmazott("Nagy Sandor","555-222", 111));
emberek.push(new alkalmazott("Kis Sandor","555-333", 222));
emberek.push(new alkalmazott("Nagy Zoltan","555-444", 333));
emberek.push(new alkalmazott("Kis Zoltan","555-555", 444));
document.write("a for ciklus eredmenye:<br>");
for(var i = 0; i < emberek.length; i++)
	emberek[i].kiir();

document.write("<br>a for/in ciklus eredmenye:<br>");
for (var key in emberek) {
    document.write(key+". alkalmazott: "); emberek[key].kiir();
}
 </script>
</body>
</html>

Harmadik példa az objektumra: háziállatok map-je. Mi a map? A map egy (key, value) értékpár. Egy adott key-hez egy adott érték tartozik és jobbára a key alapján keresünk értéket. 

<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function haziallat(faj, eletkor, gazda) {
   this.faj = faj;
   this.eletkor = eletkor;
   this.gazda = gazda;
   
    this.kiir = function() {
        document.write(this.faj+" eletkora: "+this.eletkor+" gazdja: "+this.gazda+"<br>");
    }
   
};

var allatok = {};

allatok["Bodri"] = new haziallat("kutya",3, "Kis Sandor");
allatok["Buksi"] = new haziallat("kutya",8, "Nagy Sandor");
allatok["Cica"] = new haziallat("macska",7, "Kovacs Sandor");
allatok["Foltos"] = new haziallat("macska",12, "Molnar Judit");
allatok["Bujszi"] = new haziallat("kutya",6, "Nagy Edit");

if ("Cica" in allatok) {
	allatok["Cica"].kiir();
}

if ("Hattyu" in allatok) {
	allatok["Hattyu"].kiir();
} else {
  document.write("Az allat nem talalhato <br>");
} 

var names ="";
for (var nevek in allatok) {
    names += nevek+",";
}

document.write(names);
 </script>
</body>
</html>

Általános objektumok

Az előző fejezetben láttuk, hogy a függvények viselkedhetnek objektumként a new parancs segítségével. A javascript-ben általános objektumok is definiálhtaók, akár előre definiálva, akár dinamikusan létrehozva. Példa a dinamikusan létrehozott objektumokra: 

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

var auto = new Object();
auto.marka = "Audi";
auto.szin = "Szürke";
auto.ev = "2014";

var auto2 = new Object();
auto2.marka = "Opel";
auto2.szin = "Piros";
auto2.ev = "2011";
auto2.tulajdonos = "Nagy Geza";

document.write(auto.marka+" "+auto.szin+" "+auto.ev+"<br>");
document.write(auto2.marka+" "+auto2.szin+" "+auto2.ev+" "+auto2.tulajdonos+"<br>");

 </script>
</body>
</html>

Az objektumokhoz nem csak tulajdonságokat, hanem az objektumon kívül megírt függvényeket is rendelhetünk:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

var auto = new Object();
auto.marka = "Audi";
auto.szin = "Szürke";
auto.ev = "2014";
auto.kiir = kiiroFuggveny;

function kiiroFuggveny() {
	document.write(auto.marka+" "+auto.szin+" "+auto.ev+"<br>");
}

auto.kiir();

 </script>
</body>
</html>

Persze definiálhatunk szép sturkturákat objektumkét:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

var fonok = {
	nev:"Boos Geza",
	beosztas:"A Fonok",
	telefonszam:"555-666",
	alkamazottakSzama: 32,
	kiir : function(){
		document.write(fonok.nev+" "+fonok.beosztas+" telefonja: "+fonok.telefonszam+"<br>");
	},
	plusz1alkalmazott: function() {
	   fonok.alkamazottakSzama++;
	}
};

document.write(fonok.alkamazottakSzama+"<br>");
fonok.kiir();
fonok.plusz1alkalmazott();
document.write(fonok.alkamazottakSzama+"<br>");

 </script>
</body>
</html>

Objektumknak lehet objektum is a tagja:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

var cica = {
	nev:"Cirmi",
	eletkor:6,
	suly:4,
	gazda :{
		nev:"Kis Geza",
		telefon:"555-777",
		cim:{
		  varos:"Budapest",
		  utca:"valahol utca",
		  hazszam:15
		}
	},
	kiirCica : function(){
		document.write(cica.nev+" "+cica.eletkor+" eves es "+cica.suly+"kg <br>");
	},
	kiirGazdi: function() {
	   document.write("Gazdaja: "+cica.gazda.nev+" "+cica.gazda.telefon+"<br>");
	},
	kiirCim: function() {
	   document.write("Cime: "+cica.gazda.cim.varos+" "+cica.gazda.cim.utca+" "+cica.gazda.cim.hazszam+"<br>");
	}
};

cica.kiirCica();
cica.kiirGazdi();
cica.kiirCim();

 </script>
</body>
</html>

Objektumk létrehozásának egyik célja az általánosítása, és a hierarchia kiépítése. Általánosításra példa:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

function kiir(szin)
{
	document.write("A(z) "+this.tipus+" autonak "+szin+" a szine <br>");
}

var opel = {tipus: "Opel", display:kiir};
var audi = {tipus: "Audi", display: kiir};
var merci = {tipus: "Mercedes", display: kiir};

opel.display("piros");
audi.display("fekete");
merci.display("feher");

 </script>
</body>
</html>

A with parancs

Láttuk, hogy az objektum tulajdonságok általános elérese a következő: objektumnev.tulajdonsag. Ez sokszor rengeteg gépelést igényel, ezért vezették be a with parancsot, ami után már nem kell az objektumnevet kiirni:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

function arEsMennyisegModositas(ujar, ujmennyiseg){
	 with(this){
		ar = ujar;
		mennyiseg = ujmennyiseg;
	 }
}

function kiir() {
	with(this){
	 document.write(szerzo+" : "+cim+" ara: "+ar+ " ("+mennyiseg+" darab van) <br>");
	}
}

function konyv(cim, szerzo, ar, mennyiseg){
 this.cim = cim;
 this.szerzo = szerzo;
 this.ar = ar;
 this.mennyiseg = mennyiseg;
 this.modosit = arEsMennyisegModositas;
 this.display = kiir;
}

var myBook = new konyv("Tuskervar", "Fekete Istvan", 3200, 1500);
myBook.display();
myBook.modosit(3500, 1600);
myBook.display();

 </script>
</body>
</html>

Egy életszerűbb példa:

<html>
<head>
<title>objektumok</title>
</head>
<body>
<script type="text/javascript">

function Atom(nev, vegyjel, tomeg)
{
	this.nev = nev;
	this.vegyjel = vegyjel;
	this.tomeg = tomeg;
}

var atomok = {};

atomok["H"] = new Atom("hidrogén", "H", 1.00794);
atomok["C"] = new Atom("szén","C",12.0107);
atomok["O"] = new Atom("oxigén", "O", 15.9994);

function Molekula(nev, keplet)
{
	this.nev = nev;
	this.keplet = keplet;
	this.atomok = [];
	
	this.AddAtoms = function(atom, nb) {
        for(var i = 0; i < nb; i++)
			this.atomok.push(atomok[atom]);
    }
	
	this.molTomeg = function() {
	     var tomeg = 0.0;
		for(var i = 0; i < this.atomok.length; i++)
			tomeg += this.atomok[i].tomeg;
			
		return tomeg;
	}
}

var alkohol = new Molekula("etilalkohol", "C2H6O");

alkohol.AddAtoms("C",2);
alkohol.AddAtoms("H",6);
alkohol.AddAtoms("O",1);

document.write(alkohol.molTomeg()+"<br>");

var oxigenmol = new Molekula("oxigén", "O2");
oxigenmol.AddAtoms("O",2);

var szendioxid = new Molekula("széndioxid", "CO2");
szendioxid.AddAtoms("C",1);
szendioxid.AddAtoms("O",2);

var viz = new Molekula("víz", "H2O");
viz.AddAtoms("H",2);
viz.AddAtoms("O",1);

function Reakcio(egyenlet)
{
	this.egyenlet = egyenlet;
	this.reaktansok = [];
	this.termekek = [];
	
	this.AddReactant = function(molekula, nb) {
        for(var i = 0; i < nb; i++)
			this.reaktansok.push(molekula);
    }
	
	this.AddProduct = function(molekula, nb) {
        for(var i = 0; i < nb; i++)
			this.termekek.push(molekula);
    }
	
	this.checkMass = function(){
		var rmass = 0.0;
		var pmass = 0.0;
		 
		for(var i = 0; i < this.reaktansok.length; i++)
			rmass += this.reaktansok[i].molTomeg();
		
		for(var i = 0; i < this.termekek.length; i++)
			pmass += this.termekek[i].molTomeg();
			
		var diff = rmass - pmass;
		document.write("Reaktánsok tömege: "+rmass+", a termékek tömege: "+pmass+" es a különbségük: "+diff+"<br>");
	
	}
}

var eges = new Reakcio("C2H5OH + 3O2 = 2 CO2 + 3 H2O");
eges.AddReactant(alkohol, 1);
eges.AddReactant(oxigenmol, 3);
eges.AddProduct(szendioxid,2);
eges.AddProduct(viz,3);

eges.checkMass();

 </script>
</body>
</html>