Javascript Eğitim Dersleri #005

Object ( Nesne ) giriş...

Metodları, özellikleri olan çok yönlü bir tipdir. D.O.M’da pek çok şey object olarak bulunur.

1. var myObject = new Object();
2. myObject.UserNick = 'vigo';
3. console.dir( myObject ); // FireFox, FireBug Extension için

yada aynı işi yapan;

1. var myObject = new Object();
2. myObject[ 'UserNick' ] = "vigo";
3. window.alert( myObject.UserNick ); // vigo
4. window.alert( myObject[ 'UserNick' ] ); // vigo

yada;

1. var myObject = {
2.  'UserNick' : "vigo"
3. }
4. window.alert( myObject.UserNick ); // vigo
5. window.alert( myObject[ 'UserNick' ] ); // vigo

J.S.O.N - JSON ( JavaScript Object Notation ) giriş...

Nesne içinde herşey KEY : VALUE şeklinde durur. VALUE string / number / array / object yada function olabilir... RECURSIVE bir şekilde iç içe sonsuz derinlikte olabilir.

1. var objUsers = {
2.  'id_01' : {
3.   'user_name' : "vigo"
4.   , 'user_email' : "vigo@hede.com"
5.   , 'user_phones' : {
6.    'home' : "1234567890"
7.    , 'work' : "2224567890"
8.   }
9.  }
10. }

objUsers’ın ilk key’, id_01, id_01’in value’su ise bir object’dir. id_01 olan kayıt detaylarını almak için;

1. var objSelectedUser = objUsers[ 'id_01' ];
2. window.alert( objSelectedUser[ 'user_name' ] );
3. // yada
4. window.alert( objSelectedUser.user_name );

Yeni bir loop daha : for / in

Nesnelerin içinde dolaşmak için kullanırız.

1. var objUserPhones = {
2.  'Home' : "0216 123 45 67"
3.  , 'Office' : "0212 123 45 67"
4. }
5. for( var strPhoneType in objUserPhones )
6. // objUserPhones içindeki her key, yani Home ve Office benim için strPhoneType olsun!
7. {
8.  var strPhoneValue = objUserPhones[ strPhoneType ];
9.  window.alert( strPhoneType + ':' + strPhoneValue );
10. }

Eğer sadece Home telefonu gerekseydi;

1. window.alert( objUserPhones[ 'Home' ] ); // yada
2. window.alert( objUserPhones.Home );

D.O.M örneği

1. var myElement = document.getElementById( 'myDIV' );
2. console.dir( myElement );

İlk satırda, document objesinin getElementById metodunu çağırdık. ( Yani bu aslında bir fonksiyon ) Çağırırken de parametre olarak string tipinde myDIV diye bişi geçtik. myDIV, sayfa içindeki HTML’de duran id’si myDIV olan DIV.

1. <div id="myDIV"></div>

Console çıkışına baktığımızda, DIV nesnesinin içinde tonlarca metod / özellik bulunduğunu görebiliriz. Bunların bir kısmını RUN-TIME değiştirebiliriz. Bir kısmıda sadece bilgi almak için READ-ONLY’dir

1. var myElement = document.getElementById( 'myDIV' );
2. myElement.innerHTML = 'Merhaba <strong>dünya</strong>';

DOM’da bulunan objenin, innerHTML özelliğine değer atadık. Böylece, id’si myDIV olan DIV’in içine HTML metin yazmış olduk. Merhaba yazısı normal, dünya yazısı ise BOLD oldu.

html;

1. <p id="test" class="fix">Deneme paragrafı</p>
2. <button onclick="setClass( 'standart' );">Change</button>

css;

1. .fix
2. {
3.  font-size: 22px;
4.  font-weight: bold;
5. }
6.  
7. .standart
8. {
9.  font-size: 11px;
10.  font-weight: normal;
11. }

javascript;

1. function setClass( strCssClassName )
2. {
3.  var objPitem = document.getElementById( 'test' );
4.  // id’si test olan dom nesnesini yakala, ki bu bizim P
5.  objPitem.className = strCssClassName;
6.  /* P’nin ( aslında dom’un ) özelliklerinden className’i set ederek
7.  strCssClassName parametresinden gelen değeri ata. */
8. }

D.O.M içinde pek çok şey var, bunları dökümantasyonlardan öğrenebilirsiniz.