IT 504 DOM Belge Nesne Modeli II Yrd
IT 504 ~~DOM~~ Belge Nesne Modeli II Yrd. Doç. Dr. Yuriy Mishchenko
DOM hierarşi ile çalışma nedir? • DOM, bir HTML sayfası ile ilgili işlemleri HTML kodundan tamamen ayırmak ve bu işlemleri DOM nesne hierarşisi üzerinde yapabilmek hedeflemektedir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 2
DOM hierarşi ile çalışma nedir? • En temel seviyede, web programcısının DOM ile çalışması sayfadaki HTML elemanlarının özellikleri güncelleştirme ve olay işlemeleri ile ilgilenmektedir • Bunun dışında, DOM hierarşisi ile çalışma da önemli olan kısmıdır; bunlar DOM hierarşisinde navigasyon ve DOM taranması ile DOM hierarşisi güncelleştirilmesidir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 3
DOM taranması • DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 4
DOM taranması • DOM hierarşisinde elemanlara erişmek için birkaç temel araç var: – document. get. Element. By. Id, belirli elemana erişmek için – document. get. Elements. By. Class, belirli eleman sınıfına erişmek için – document. get. Elements. By. Name, belirli "name" özelliğine sahip olan form elemanlarına erişmek için – document. get. Elements. By. Tag. Name, sayfadaki belirli taglara erişmek için http: //www. scinetcentral. com/~mishchenko/MIT 504. html 5
DOM taranması • Daha ileri durumlarda bu araçlar yeterli değil, aslında birçok durumda gereken sayfanın elemanları bu şekilde kesinleştirilemez • Bu durumda, DOM hierarşisinde gereken elemanları direkt olarak aranmasına ihtiyaç oluşabilir • Bu tip işlemlere DOM tarama işlemi diyoruz http: //www. scinetcentral. com/~mishchenko/MIT 504. html 6
DOMda navigasyon • DOM elemanlarının navigasyon metotları – element. child. Nodes – bir elamanın çocuk elemanlarının listesi, array dir – element. first. Child – bir elemanın ilk çocuğu – element. last. Child – bir elemanın son çocuğu – element. next. Sibling – sonraki kardeşi – element. previous. Sibling – önceki kardeşi – element. parent. Node – elemanın babası http: //www. scinetcentral. com/~mishchenko/MIT 504. html 7
DOMda navigasyon <html> <head> <title>DOM Tutorial</title> </head> parent. Node next. Sibling . . . <body> <h 1>DOM Lesson one</h 1> <p>Hello world!</p> </body> previous. Sibling first. Child, last. Child </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 8
DOMda navigasyon • DOM hierarşisi taranması gerekliliği var olduğu zaman, DOM hierarşisini geçmek ve gereken eleman alt kümesini elde etmek için DOM navigasyon metotları kullanılmalı http: //www. scinetcentral. com/~mishchenko/MIT 504. html 9
DOM taranması • DOM hierarşisi, yapısı olarak bir ağaç veya bir graftır; bu nedenle DOM hierarşisini incelemek için genel graf tarama çözümleri kullanılabilir • DOM hierarşisini taramak için enine ve derinlikle (derine) iki genel graf arama yöntemi kullanılabilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 10
DOM taranması • Enine arama, DOM hierarşisini katman inceler – Kökten itibaren, her adımda belirli bir katmandaki elemanları geçirip onların çocukları toplanır – Öbür adımda özyineleme anlamında bu çocukları gözden geçirilir, VB http: //www. scinetcentral. com/~mishchenko/MIT 504. html 11
DOM taranması DOM hierarşi enine taranması DOM kökü http: //www. scinetcentral. com/~mishchenko/MIT 504. html 12
DOM taranması 1 DOM hierarşi enine taranması DOM kökü http: //www. scinetcentral. com/~mishchenko/MIT 504. html 13
DOM taranması DOM hierarşi enine taranması DOM kökü 2 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 14
DOM taranması DOM hierarşi enine taranması DOM kökü 3 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 15
DOM taranması DOM hierarşi enine taranması DOM kökü 4 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 16
DOM taranması • Örnek – javascript açılan menü http: //www. scinetcentral. com/~mishchenko/MIT 504. html 17
DOM taranması <!DOCTYPE html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 18
DOM taranması • Neçin hierarşi taranması gerekebilir? – Javascript açılan menü, adım 1: listedeki elemanları ekranda yerleştirmek; • Javascript kullanarak ul ve li elemanlarının belirli pozisyonlara götürülmesi gerekiyor • Bu iş için enine tarama doğal –menünün elemanları katman yerleştirilmektedir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 19
DOM enine tarama kodu function eninetarama(root. Node, handle. Function) { level=0; var this. Level. Nodes = new Array(root. Node); while(this. Level. Nodes. length>0) { //handle. Function'in uygulanmasi for(var i=0; i<this. Level. Nodes. length; i++) { handle. Function(this. Level. Nodes[i], level); } //hierarşide ilerleme var next. Level. Nodes = new Array(); for(var i=0; i<this. Level. Nodes. length; i++) { if(this. Level. Nodes[i]. has. Child. Nodes()) { for(var k=0; k<this. Level. Nodes[i]. child. Nodes. length; k++) { next. Level. Nodes. push(this. Level. Nodes[i]. child. Nodes[k]); } } } this. Level. Nodes = next. Level. Nodes; level++; } } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 20
DOM taranması <!DOCTYPE html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </body> </html> ul li li ul http: //www. scinetcentral. com/~mishchenko/MIT 504. html li li ul li li 21
Menü elemanı yerleştirme fonksiyonu UL elemanları, ilgili babası LI elemanın tam sağda yerleştirilir; if(node. tag. Name == 'UL') { var top = 0; var left = menu. Width; node. style. position='absolute'; node. style. display='block'; node. style. top = top + 'px'; node. style. left = left + 'px'; node. style. list. Style. Type = 'none'; } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 22
Menü elemanı yerleştirme fonksiyonu li, menü tipine bağlı olarak sırayla yerleştirilir – burada dikey düzende if(node. tag. Name == 'LI') { left=0; if(node. previous. Sibling == null) top = 0; else top+=menu. Height; node. style. display='block'; node. style. position='absolute'; node. style. top = top + 'px'; node. style. left = left + 'px'; node. style. width = menu. Width + 'px'; node. style. border='solid black 1 px'; } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 23
http: //www. scinetcentral. com/~mishchenko/MIT 504. html 24
DOM taranması • Derinlikle (derine) arama, DOM hierarşi DOM kökü ile başlayınca, elemanın çocukları varken ilk çocuklarını takip eder http: //www. scinetcentral. com/~mishchenko/MIT 504. html 25
Enine tarama kodu (özyineleme) function derinetarama(current. Node, handle. Function, level) { handle. Function(current. Node, level); if(current. Node. has. Child. Nodes()) { derinetarama(current. Node. first. Child, handle. Function, level+1); } if(current. Node. next. Sibling!=null) { derinetarama(current. Node. next. Sibling, handle. Function, level); } } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 26
DOM taranması DOM hierarşi derine taranması DOM kökü http: //www. scinetcentral. com/~mishchenko/MIT 504. html 27
DOM taranması DOM hierarşi derine taranması 1 DOM kökü 2 3 4 5 6 8 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 7 28
DOM taranması • Javascript açılan menü elemanlarının ekranda yerleştirilmesi http: //www. scinetcentral. com/~mishchenko/MIT 504. html 29
DOM taranması <!DOCTYPE html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 30
DOM taranması • Derine taramada, menünün elemanlarının katman sırasında geçirilmesi ellerimizde yok, yerleştirme fonksiyon şu sıradan bağımsız olarak çalışmalı, yani yerleştirmeyi göreli olarak, baba/kardeş elemanına göre yapmamız gerekiyor http: //www. scinetcentral. com/~mishchenko/MIT 504. html 31
Menü elemanı yerleştirme fonksiyonu ul, baba li elemanına göre pozisyon alır, if(node. tag. Name == 'UL') { var top = 0; var left = 0; if(node. parent. Node. tag. Name == 'LI') { left = node. parent. Node. offset. Left + node. parent. Node. offset. Width; } node. style. display='block'; node. style. position='absolute'; node. style. top = top + 'px'; node. style. left = left + 'px'; node. style. list. Style. Type = 'none'; } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 32
Menü elemanı yerleştirme fonksiyonu li, sırayla menü tipine göre yerleştirilir – burada dikey düzende if(node. tag. Name == 'LI') { var top=-1; var left=0; var width=50; var find. Previous. Li. Node=node. previous. Sibling; while(find. Previous. Li. Node. tag. Name!='LI' && find. Previous. Li. Node. previous. Sibling!=null) { find. Previous. Li. Node=find. Previous. Li. Node. previous. Sibling; } if(find. Previous. Li. Node. tag. Name=='LI') { top=find. Previous. Li. Node. offset. Top + find. Previous. Li. Node. offset. Height; } node. style. display='block'; node. style. position='absolute'; node. style. top = top + 'px'; node. style. left = left + 'px'; node. style. width = width + 'px'; node. style. border='solid black 1 px'; } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 33
DOM taranması • Javascript açılan menünün diğer işlemleri: – adım 2: altmenünün ul elemanlarının saklanması – adım 3: li elemanlarına altmenü açıp kapatan olay işleyicilerinin atanması • document. get. Elements. By. Tag. Name kullanarak yapılabilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 34
Enine taranma kodu Altmenüleri sakla: uller=document. get. Element. By. Id("menu"). get. Elements. By. Tag. Name('UL'); for(var i=0; i<uller. length; i++) { uller[i]. style. display='none'; } Açıp kapatan olay işlemcileri: liler=document. get. Element. By. Id("menu"). get. Elements. By. Tag. Name('LI'); for(var i=0; i<liler. length; i++) { liler[i]. add. Event. Listener("mouseover", showhidelistener, false); liler[i]. add. Event. Listener("mouseout", showhidelistener, false); } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 35
DOM taranması • Javascript açılan menüde olay işleme – Javascript açılan menüde altmenüleri açıp kapatan onmouseover/onmouseout olay işleyicisi var olmalı – Ancak şu işleyicinin tasarımı basit değil http: //www. scinetcentral. com/~mishchenko/MIT 504. html 36
DOM taranması • Buraya Mevcut sorunlar: – Bir LI elemanından fare ayrıldığında fakat bağlı altmenüye girdiğinde, hem altmenünün onmouseover hemde bırakıldığı LI elemanının onmouseout olayları tetiklenir; sonuç olarak, fare altmenüye girdiğine rağmen, onmouseout olayından dolayı LI elemanının kapanması için altemenü de kapanır – Söz konusu olaylar yukarı doğru yayılır ve tüm LI elemanlarında işleyicileri tetikler, yani olayların yayılması durdurulması gerekiyor http: //www. scinetcentral. com/~mishchenko/MIT 504. html 37
DOM taranması • Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz http: //www. scinetcentral. com/~mishchenko/MIT 504. html 38
Örnek function hideshowlistener(event) { var target = event. target; alt. ULNode = target. first. Child; if(event. type == 'mouseover') { alt. ULNode. style. display = 'block'; } else if(event. type == 'mouseout') { alt. ULNode. style. display = 'none'; } } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 39
DOM taranması • İlgili fare olay işlemeleri zor; – Fare ayrıldığında bir saklanma talebi oluşturulmalı, bu talep daha sonra (örneğin 100 ms sonra) işletilmeli – Fare altmenüye girdiğinde, şu talep iptal edilip saklanma işlemi gerçekleşmez • Bu açıdan farenin hareketleri incelenmeli ve ayrı işletilmeli http: //www. scinetcentral. com/~mishchenko/MIT 504. html 40
Örnek function hidelistener(event) {. . . if(event. type == 'mouseout') { //ELEMANI SAKLAMA KUYRUGUNE EKLE queued. Hide. Node = target; queued. Hide. Direction = 'all'; set. Timeout(hidenode, 100); }. . . } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 41
DOM taranması <!DOCTYPE html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </body> </html> Hiç saklama altmenüleri sakla altmenüleri ve kendisini sakla http: //www. scinetcentral. com/~mishchenko/MIT 504. html Hepsini sakla 42
Örnek function hidelistener(event) {. . . if(event. type == 'mouseover') { //ONMOUSEOUT EMENANININ SAKLANMA IPTALI if(queued. Hide. Node != null) { //AYNI MENU ICINDE HAREKET if(queued. Hide. Node. parent. Node. is. Same. Node(target. parent. Node)) { queued. Hide. Direction = 'down'; } //UST MENUYE HAREKET if(queued. Hide. Node. parent. Node. is. Same. Node(target)) { queued. Hide. Direction = 'down'; } else if(queued. Hide. Node. parent. Node. is. Same. Node(target. parent. Node)) { queued. Hide. Node = target. parent. Node; queued. Hide. Direction = 'down'; } //ALT MENUYE HAREKET if(queued. Hide. Node. is. Same. Node(target. parent. Node)) { queued. Hide. Node = null; queued. Hide. Direction = 'none'; } }. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 43
Örnek function hidelistener(event) {. . . if(event. type == 'mouseover') {. . . //ALT-MENU GOSTER find. ULNode = target. first. Child; while(find. ULNode. tag. Name != 'UL' && find. ULNode. next. Sibling != null) { find. ULNode = find. ULNode. next. Sibling; } if(find. ULNode. tag. Name == 'UL') { find. ULNode. style. display = 'block'; } }. . . event. stop. Propagation(); } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 44
Örnek function hidenode() { if(queued. Hide. Node == null) return; hidenodesdown(); if(queued. Hide. Direction == 'down') return; hidenodesup(); queued. Hide. Node=null; queued. Hide. Direction=null; } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 45
Örnek function hidenodesdown() { //aşağıdakileri sakla uller = queued. Hide. Node. get. Elements. By. Tag. Name('UL'); for(var i = 0; i<uller. length; i++) { uller[i]. style. display='none'; } } function hidenodesup() { //yukarıdakileri sakla current. Node=queued. Hide. Node; while(current. Node. parent. Node != null) { if(current. Node. tag. Name == 'UL' && current. Node. parent. Node. tag. Name == 'LI') { current. Node. style. display='none'; } current. Node=current. Node. parent. Node; } } http: //www. scinetcentral. com/~mishchenko/MIT 504. html 46
http: //www. scinetcentral. com/~mishchenko/MIT 504. html 47
DOM taranması • DOM hierarşi içinde navigasyon (baba, çocuk, önceki, sonraki) • DOM hierarşi taranması (enine, derine, aşağı ve yukarı) • Javascript açılan menü örneğinde, DOM taranması teknikleri ve ilgili olay işleme http: //www. scinetcentral. com/~mishchenko/MIT 504. html 48
http: //www. scinetcentral. com/~mishchenko/MIT 504. html 49
DOM hierarşisi güncelleştirme • Javascript DOM'da, web sayfasını direkt olarak oluşturma ve değiştirmeye imkan var • Bu şekilde web sayfası ile çalışma, DOM hierarşisi içinde yeni elemanların eklenme, kaldırılma ve taşınması olarak düşünülmeli http: //www. scinetcentral. com/~mishchenko/MIT 504. html 50
DOM hierarşi güncelleştirme DOM kökü http: //www. scinetcentral. com/~mishchenko/MIT 504. html KALDIRMA 51
DOM hierarşi güncelleştirme DOM kökü EKLEME http: //www. scinetcentral. com/~mishchenko/MIT 504. html 52
DOM hierarşi güncelleştirme DOM kökü http: //www. scinetcentral. com/~mishchenko/MIT 504. html KALDIRMA+EKLEME=TAŞIMA 53
DOM hierarşi güncelleştirme • DOM hierarşisi ile işlemleri – document. create. Element, yeni elemanı oluştur – document. create. Attribute, elemanın özelliği yap – document. create. Text. Node, elemanın metni yap – document. normalize, hierarşiden boş nodlar çıkart – document. rename. Node, elemanı değiştir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 54
DOM hierarşi güncelleştirme • DOM hierarşisi güncelleştirme metotları – element. append. Child, yeni eleman ekle – element. clone. Node, elemanın kopyası – element. insert. Before, yeni elemanı ekle – element. remove. Child, elemanı kaldır – element. replace. Child, elemanı değiştir – element. normalize, DOM'dan boş nodları çıkart http: //www. scinetcentral. com/~mishchenko/MIT 504. html 55
Örnek <!DOCTYPE html> <body> <h 1>Hello</h 1> <script> var btn=document. create. Element("BUTTON"); var txt=document. create. Text. Node("CLICK ME"); btn. append. Child(txt); document. body. append. Child(btn); </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 56
Örnek <!DOCTYPE html> <body> <img src="klematis. jpg" width="150" height="113" id="rs 1"><br/> <script> var nod = document. create. Attribute("src"); node. Value = "klematis 2. jpg"; document. get. Element. By. Id("rs 1"). attributes. set. Named. Item(nod); </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 57
Örnek <!DOCTYPE html> <body> <script> var link=document. create. Element("A"); link. href="http: //google. com"; var txt=document. create. Text. Node("CLICK ME"); link. append. Child(txt); var title=document. create. Attribute("title"); title. node. Value="http: //yahoo. com"; link. attributes. set. Named. Item(title); document. body. append. Child(link); </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 58
Örnek <!DOCTYPE html> <body> <ul id="my. List 1"><li>Coffee</li><li>Tea</li></ul> <ul id="my. List 2"><li>Water</li><li>Milk</li></ul> • Coffee • Tea • Milk <button onclick="my. Function()">Try it</button> <script> function my. Function() { var itm=document. get. Element. By. Id("my. List 2"). last. Child; var cln=itm. clone. Node(true); document. get. Element. By. Id("my. List 1"). append. Child(cln); } </script> • Water • Milk </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 59
Örnek <!DOCTYPE html> <body> <ul id="my. List 1"><li>Coffee</li><li>Tea</li></ul> <ul id="my. List 2"><li>Water</li><li>Milk</li></ul> <button onclick="my. Function()">Try it</button> • Milk • Coffee • Tea <script> • function my. Function() { • var node=document. get. Element. By. Id("my. List 2"). last. Child; var list=document. get. Element. By. Id("my. List 1"); var target. Node=list. child. Nodes[0]; list. insert. Before(node, target. Node); } </script> Water Milk </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 60
DOM hierarşi güncelleştirme • NOT: DOM append. Child ve insert. Before metotları, aslı DOM hierarşinin nodunu yeni yere yerleştirir, yani eleman gerçekten taşınır; eğer elemanın kopyasının yerleştirilmesi gerekirse, clone. Node metodu kullanılmalı! http: //www. scinetcentral. com/~mishchenko/MIT 504. html 61
Örnek <!DOCTYPE html> <body> <ul id="my. List"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="my. Function()">Try it</button> <script> function my. Function() { var list=document. get. Element. By. Id("my. List"); list. remove. Child(list. child. Nodes[0]); } </script> • Coffee • Tea • Milk </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 62
Örnek <!DOCTYPE html> <body> <ul id="my. List"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="my. Function()">Try it</button> • Coffee -> Water • Tea • Milk <script> function my. Function() { var textnode=document. create. Text. Node("Water"); var item=document. get. Element. By. Id("my. List"). child. Nodes[0]; item. replace. Child(textnode, item. child. Nodes[0]); } </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 63
Egzersiz-1 • Sıralama oynu: – İki kutu var, sol kutuda rastgele sırada 1 dan 10 a kadar sayılar yazılır, sağ kutu ise boş – Sol kutudaki sayı tıklandığında, o sayı sol kutudan sağ kutunun altına eklenmiş oluyor – Amaç: tüm sayıları artış sırasında sağ kutuya yerleştirmek http: //www. scinetcentral. com/~mishchenko/MIT 504. html 64
Egzersiz-1 5 3 2 6 3 8 10 4 2 3 3 4 5 6 8 10 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 65
Egzersiz-2 • Son dersten javascript açılan menüyü düşünün, fakat şimdi açılan menü bir HTML kodu yerinde bir Javascript dizisi olarak belirtilmiş, var menu=[["Menu 1", ["Menu 1>1", "Menu 1>2"]], "Menu 2", ["Menu 3", [["Menu 3>1", ["Menu 3>1>1", "Menu 3>1>2"]], "Menu 3>2"]]]; http: //www. scinetcentral. com/~mishchenko/MIT 504. html 66
Egzersiz-2 • Bu diziyi okuyup Javascript DOM hierarşisi güncelleştirme fonksiyonları kullanarak, açılan menü bir "ul" liste şeklinde oluşturun ve onun üzerinde açılan menüyü tamamlayınız; programınız hiç HTML kodu içermemeli (yani temel html, head, body vb dışında) http: //www. scinetcentral. com/~mishchenko/MIT 504. html 67
Egzersiz-2 <!DOCTYPE html> <body> <script> var menu=[["Menu 1", ["Menu 1>1", "Menu 1>2"]], "Menu 2", ["Menu 3", [["Menu 3>1", ["Menu 3>1>1", "Menu 3>1>2"]], "Menu 3>2"]]]; . . . </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 68
http: //www. scinetcentral. com/~mishchenko/MIT 504. html 69
Javascript DOM araçları • Web sayfası, DOM hierarşi güncelleştirme metotlarını kullanarak Javascript'ten tamamen oluşturulabilir ve daha sonra nasıl gerekiyorsa güncelleştirilebilir • Web sayfasındaki elemanların DOM metotları kullanarak özellikleri tamamen ayarlanabilir • Web sayfasının fare hareketleri, tıkları, klavye girişi vb olaylar hakkında DOM metotları kullanarak bilgi elde edilebilir ve tepki verebilir • Web sayfasının düzeni ve davranışı ileri şekilde ayarlanabilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 70
Javascript DOM araçları • Bunlar, normal masaüstü uygulamalarının temel özellikleri • Bu şekilde Javascript DOM, web tarayıcıda direkt olarak ve Javascript ve DOM kullanarak, ileri uygulamaların oluşturulabilmesine yol açar http: //www. scinetcentral. com/~mishchenko/MIT 504. html 71
Zengin İnternet Uygulamaları • Tam özellikli, web tarayıcı tabanlı ve Javascript DOM veya benzer bir kullanıcı tarafı teknolojisi (yani Flash veya Java(FX)) kullanan uygulamalara Rich Internet Application, RIA veya Zengin İnternet Uygulamaları denir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 72
Zengin İnternet Uygulamaları http: //www. scinetcentral. com/~mishchenko/MIT 504. html 73
Zengin İnternet Uygulamaları • RIA uygulamaları için Javascript DOM yardımcı oluyor, fakat şu anda RIA'ler için bizde önemli bir araç eksiktir • Yani, eğer oluşturduğumuz RIA uygulaması herhangi bir amaçla sunucuyla iletişime girmek zorunda olursa, http isteği göndermek için RIA'nin yeniden indirilmesi gerekiyor – HTML/DOM'da sunucuya veri sadece bu şekilde gönderilebilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 74
Zengin İnternet Uygulamaları • Bu çok büyük bir sorun: – Büyük RIA için indirme süresi uzun olabilir – Bilgisayarın kaynakları fazla kullanılabilir – Kullanıcının normal çalışma düzeni baya bozulur http: //www. scinetcentral. com/~mishchenko/MIT 504. html 75
Zengin İnternet Uygulamaları • Bu sorunun üstüne gelmek için, AJAX teknolojisi sunulmuştur http: //www. scinetcentral. com/~mishchenko/MIT 504. html 76
AJAX nedir? • AJAX = Asynchronous Java. Script and XML • AJAX, web sayfası tekrar indirmeden sunucuya veri gönderip cevabı elde edebilen bir web teknolojisidir • AJAX bir standart değil, ancak yukarıdaki ihtiyaca cevaben Microsoft ve diğer ana tarayıcılar tarafından geliştirilmiş bir mekanizma http: //www. scinetcentral. com/~mishchenko/MIT 504. html 77
AJAX • Temel AJAX süreci: Web sayfasının javascripti Sunucu Http İsteği XMLHttp. Request nesnesi Http Cevabı http: //www. scinetcentral. com/~mishchenko/MIT 504. html 78
AJAX 1. AJAX işlemleri, Javascript programında XMLHttp. Request nesnesi içinde yasıyor 2. Javascript programı, XMLHttp. Request nesnesine HTTP istek için gereken bilgi veriyor 3. XMLHttp. Request nesnesi ilgili http isteği kendi içerisinde, dış javascripti etkilemeden sunucuya iletiyor 4. XMLHttp. Request nesnesi sunucunun cevabını bekliyor ve o cevabı Javascript programında kullanılabilir hale götürüyor http: //www. scinetcentral. com/~mishchenko/MIT 504. html 79
AJAX • NOT 1: sunucu iletişim Javascript'ten saklı olarak XMLHttp. Request nesnesi içinde dir; XMLHttp. Request tarayıcının bir nesnesidir, yani ne DOM nede Javascriptin aslı bir elemanı değil, ayrıca farklı tarayıcılarda farklı şekilde uygulanabilir (IE 6 ve IE 5) ~~XMLHttp. Request, Javascript dışında olan bir tarayıcının nesnesi dir~~ http: //www. scinetcentral. com/~mishchenko/MIT 504. html 80
AJAX • NOT 2: XMLHttp. Request sunucu ile normal şekilde haberleşiyor, XMLHttp. Request'in http isteği ve normal tarayıcının http isteği arasında hiç fark yok ~~ XMLHttp. Request tarayıcının özel bir HTTP işleyici modülüdür ~~ http: //www. scinetcentral. com/~mishchenko/MIT 504. html 81
AJAX • NOT 3: XMLHttp. Request'in sunucu iletişimi ASYNCHRONOUS, yani sunucuya isteği yaparken javascript programı normal olarak devam edebilir, javascript programı sunucudan cevabın geldiğini ek olarak ve daha sonra kontrol etmeli http: //www. scinetcentral. com/~mishchenko/MIT 504. html 82
Örnek <!DOCTYPE html> <head> <script> function load. XMLDoc() { var xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange=function() { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; }; xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); } </script> </head> <body> <div id="my. Div"><h 2>Let AJAX change this text</h 2></div> <button type="button" onclick="load. XMLDoc()">Yeni metin indir</button> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 83
AJAX 1. XMLHttp. Request HTTP isteği oluşturma: – AJAX haberleşmesinin ilk adımı, HTTP isteğin hazırlanması ve sunucya yollandırılmasıdır – Bunlar, XMLHttp. Request nesnesinin open ve send metotlarını kullanarak yapılır http: //www. scinetcentral. com/~mishchenko/MIT 504. html 84
AJAX • XMLHttp. Request. open metodu şu şekilde: – XMLHttp. Request. open(HTTP_isteği türü ("GET"/"POST"), sunucu_url, asynchronous? (true/false)) • XMLHttp. Request. send metodu şu şekilde: – XMLHttp. Request. send(string) http: //www. scinetcentral. com/~mishchenko/MIT 504. html 85
AJAX • HTTP GET isteklerinde, sunucuya bir parametre bilgileri gönderilirse, o bilgi url'nin içerisinde gönderilir xmlhttp. open("GET", "demo_get 2. asp? fname=Henry&lname=Ford", true); • GET istekleri daha kolay ve hızlı, aynı zamanda daha çok sinirli ve büyük veriler için kullanılamaz http: //www. scinetcentral. com/~mishchenko/MIT 504. html 86
Örnek <!DOCTYPE html> <body> <script> function load. AJAX() { var xmlhttp = new XMLHttp. Request(); xmlhttp. open("GET", "arabaozelligi. php? marka=ford&yil=2007", true); xmlhttp. send(); } </script> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 87
AJAX • HTTP POST isteklerinde, veriler istek paketinin ayrı bir kısmı olarak gönderilir, bu nedenle. . . – Sunucuya gönderildiği parametreler URL'de gösterilmez ve. . . – Daha büyük parametreler işletilebilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 88
Örnek: KÖTÜ FİKİR <!DOCTYPE html> <body> <form action="make_login. php" type="GET"> <input type="text" name="user" value=""/><br/> <input type="password" name="password" value=""/> </form> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 89
AJAX • POST isteğinde, istek parametreleri URL'den ayrı olarak gönderilir • Bu ek veriler AJAX'ta belirtmek için, POST verileri metin olarak XMLHttp. Request. send fonksiyonuna giriş olarak verilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 90
Örnek. . . <form> <input type="text" id="user" name="user" value=""/><br/> <input type="password" id="pass" name="password" value=""/> </form> <script> function load. AJAX() { var xmlhttp=new XMLHttp. Request(); xmlhttp. open("POST", "authorize. php", true); xmlhttp. set. Request. Header("Content-type", "application/x-www-formurlencoded"); xmlhttp. send("name="+user+"&pass="+pass); } </script>. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 91
AJAX 2. XMLHttp. Request'in cevabını elde etme: – AJAX istekleri genellikle asynchronous olarak yapılır, yani AJAX sunucuya bilgi gönderirken javascript programı çalışmaya devam ediyor – AJAX isteğin cevabını elde etmek için, XMLHttp. Request nesnesinin onreadystatechange olayı kullanılmalı, onreadystatechange olay işleyicisi diğer olay işleyicileri gibi ilgili XMLHttp. Request nesnesinin onreadystatechange olayına atanır http: //www. scinetcentral. com/~mishchenko/MIT 504. html 92
Örnek. . . <script> function load. XMLDoc() { var xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange=function() { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; }; xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); } </script>. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 93
AJAX • Onreadystatechange olayı, XMLHttp. Request nesnesinin hali değiştiğinde tetikleniyor ve şu olayı meydana getirdiği XMLHttp. Request nesnesinin hali ready. State özelliğinden kontrol edilebilir, XMLHttp. Request nesnesinin. . . – ready. State=0, istek başlatılmadı – ready. State=1, sunucuyla bağlantı kuruldu – ready. State=2, istek gönderildi – ready. State=3, cevap bekleniyor – ready. State=4, cevap elde edildi http: //www. scinetcentral. com/~mishchenko/MIT 504. html 94
AJAX – Ayrıca XMLHttp. Request nesnesinin status diye bir özelliği var, bu özellik sunucu tarafından gönderildiği HTTP statusunu içerir, örneğin • • • status=200, sayfa tamam status=400, yanlış istek status=403, sayfa için izin gereklidir status=404, sayfa bulunamadı status=500, sunucu hatalı durum http: //www. scinetcentral. com/~mishchenko/MIT 504. html 95
Örnek <!DOCTYPE html> <head> <script> function load. XMLDoc() { var xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } }; . . . </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 96
AJAX • Sunucudan cevap geldiğinde, sunucunun cevabı XMLHttp. Request nesnesinin metin olarak XMLHttp. Request'in response. Text, XML olarak response. XML özelliklerinde bulunmakta http: //www. scinetcentral. com/~mishchenko/MIT 504. html 97
Örnek <!DOCTYPE html> <head> <script> function load. XMLDoc() { var xmlhttp=new XMLHttp. Request(); xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } }. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 98
AJAX • NOT: daha eski IE tarayıcılarında (IE 5 ve IE 6), XMLHttp. Response nesnesi yerinde bir Active. X nesnesi kullanılıyordu • Bu nedenle, IE 5 ve IE 6 tarayıcılarında AJAX kullanmak için XMLHttp. Request farklı şekilde tanımlanmalı (ancak bundan sonra kullanımda fark yok) http: //www. scinetcentral. com/~mishchenko/MIT 504. html 99
Örnek <!DOCTYPE html> <head> <script> function cfunc() { //AJAX cevabı işleyicisi. . . function load. XMLDoc(url) { var xmlhttp; if(window. XMLHttp. Request) { // IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else { // IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=cfunc; xmlhttp. open("GET", url, true); xmlhttp. send(); } }. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 100
Tamamlanmış bir AJAX Örneği <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script>. . . <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 101
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> AJAX </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 102
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> XMLHttp. Request nesnesi başlatılması </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 103
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> Sunucu cevabı işletecek fonksiyonu <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 104
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> HTTP isteği GET olarak gönderilmesi, </html> istenen kullanıcı bilgi URL metninin bir kısmı olarak gönderilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 105
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> Sunucu adresi, w 3 schools. com/getcustomer. asp http: //www. scinetcentral. com/~mishchenko/MIT 504. html 106
Örnek Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 107
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> Sunucu tarafından gönderilecek tablonun yeri http: //www. scinetcentral. com/~mishchenko/MIT 504. html 108
AJAX • Çalışma sırası http: //www. scinetcentral. com/~mishchenko/MIT 504. html 109
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> XMLHttp. Request nesnesi başlatılır <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 110
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> HTTP istek gönderilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 111
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> Cevap bekleniyor </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 112
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 113
Örnek <!DOCTYPE html> <head> <script> function show. Customer(str) { var xmlhttp; if (window. XMLHttp. Request) {//IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function(){ if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("tablo"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "getcustomer. asp? q="+str, true); xmlhttp. send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="show. Customer(this. value)"> <option value="">Select a customer: </option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="tablo"></div> </body> </html> Sunucu gönderdiği tablo div'e yazdırılır http: //www. scinetcentral. com/~mishchenko/MIT 504. html 114
Zengin İnternet uygulamaları • Web sayfasının yapısı, DOM hierarşisi güncelleştirme metotlarını kullanarak nasıl gerekirse ayarlanabilir • Web sayfasındaki fare hareketleri, tıklar, klavye girişi gibi olaylar hakkında DOM kullanarak bilgi elde edilebilir ve tepki gösterilebilir • Web sayfasının düzeni ileri şekilde ayarlanabilir • Web uygulamaları, arka planında sayfayı yeni indirmeden sunucu ile haberleşebilir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 115
Zengin İnternet uygulamaları • Zengin İnternet Uygulamaları (Rich Internet Applications veya RIA), masaüstü yazılımlarının birçok tipik özelliğine sahip olan ancak web tarayıcı, plug-in, sandbox, Java sanal makine (JVM) veya Javascript kullanarak çalışan yazılımlardır • RIA platformlar bir çoğunda tarayıcı tabanlı bilgisayar oyunlarda kullanılmakta, ancak son zamanlarda diğer alanlarda hızlı gelişmeye başladı • RIA genellikle bir platform (çerçeve) üzerinde çalışmakta; bunlardan en yaygın olan Adobe Flash, Java FX ve Microsoft Silverlight platformlardır; Bu tip RIA'ler için, Flash, Java VM veya Silverlight gibi ilgili yazılımının kullanıcı tarafından indirilmesi gerekmektedir • Son zamanlarda, HTML 5+Javascript+AJAX tabanlı, özel plugin veya yazılım gerektirmeyen RIA'ler yayılmaya başladı http: //www. scinetcentral. com/~mishchenko/MIT 504. html 116
Zengin İnternet uygulamaları • Adobe Flash, RIA için kullanılan platformlardan en ünlü olan biridir • Flash, vektörsel ve raster grafiği üzerinde çalışmalar için web tarayıcı bir plugindir; ayrıca animasyon ve kullanıcı ile etkileşim için araçlar da sunmaktadır • Flash uygulamaları, özel Action. Script programlama dili kullanarak oluşturulmalı ve web tarayıcı içinde kullanılabilmesi için Flash plugin gerektirmektedir • İnternette yaygın şekilde kullanılmış olan Flash'ın önemi, HTML 5'te birçok benzer araç sunulduğu için ve Flash'in mobil cihazlarda genellikle desteklenmemesi için azalmaya başladı http: //www. scinetcentral. com/~mishchenko/MIT 504. html 117
Zengin İnternet uygulamaları • Java ve Java. FX, Java programlama dili ve Java appletlerine dayalı bir RIA teknolojisidir • Java appletler, tamamlanmış ve Java VM kullanarak tarayıcı içinde çalışan Java programlarıdır • Java FX, RIA geliştirme için ilgili bir Java platformdır • Java uygulamalarının web tarayıcıda kullanılabilmesi için Java Runtime Environment (JRE)'nin kullanıcı bilgisayarında kurulması gereklidir • Java uygulamaları bir zaman çök pöpüler olduğuna rağmen, bilgisayarlardan gereksinimleri fazla olduğu için ve diğer nedenlerle yaygın kullanımdan çıkmıştır, şu anda Java RIA'ler az kullanılmakta http: //www. scinetcentral. com/~mishchenko/MIT 504. html 118
Zengin İnternet uygulamaları • Silverlight, Microsoft tarafından geliştirilmiş RIA için özel (proprietary) bir platformdır. Bu teknoloji çok yaygın kullanımı göremedi ve birçok mobil cihazlarında da desteklenmez. Silverlight genellikle streaming video için kullanılır, örneğin Silverlight, 2008 ve 2010 Olimpiyat oyunları resmi örganizatörlerinin online video streaming hizmeti ve Netflix online film izleme hizmeti olarak çalışmıştır. http: //www. scinetcentral. com/~mishchenko/MIT 504. html 119
Zengin İnternet uygulamaları • HTML 5+Javascript+AJAX RIA'ler, tartıştığımız HTML 5/CSS 3, Javascript DOM ve AJAX araçlarını kullanan uygulamalardır • Bunlardan en ünlü örneklerden bazelar, gmail ve google docs uygulamalarıdır http: //www. scinetcentral. com/~mishchenko/MIT 504. html 120
Zengin İnternet uygulamaları • HTML 5+Javascript+AJAX RIA'ler, Javascript'te programlanmış tam özellikli ve dolayısıyla genellikle büyük yazılımlardır • Modern HTML 5/Javascript tabanlı RIA'ler, Javascript çerçeveleri kullanarak geliştirilmektedir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 121
Zengin İnternet uygulamaları • HTML 5/Javascript çerçeveleri hızlı geliştiği nedeniyle, sıralanması sürekli değiştiriyor olabilir • Erken HTML 5/Javascript çerçeveleri, Google Web Kit (GWK), Ext. JS, j. Query, Do. Jo, Moo. Tools, Prototype, vb. idi • Şimdi üç önde olan HTML 5/Javascript çerçevesi, Angular. JS, Ember ve Backbone'dir http: //www. scinetcentral. com/~mishchenko/MIT 504. html 122
http: //www. scinetcentral. com/~mishchenko/MIT 504. html 123
- Slides: 123