Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

IT504 ~~DOM~~ Belge Nesne Modeli II

Benzer bir sunumlar


... konulu sunumlar: "IT504 ~~DOM~~ Belge Nesne Modeli II"— Sunum transkripti:

1 IT504 ~~DOM~~ Belge Nesne Modeli II
Yrd. Doç. Dr. Yuriy Mishchenko

2 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

3 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

4 DOM taranması DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir

5 DOM taranması DOM hierarşisinde elemanlara erişmek için birkaç temel araç var: document.getElementById, belirli elemana erişmek için document.getElementsByClass, belirli eleman sınıfına erişmek için document.getElementsByName, belirli "name" özelliğine sahip olan form elemanlarına erişmek için document.getElementsByTagName, sayfadaki belirli taglara erişmek için

6 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

7 DOMda navigasyon DOM elemanlarının navigasyon metotları
element.childNodes – bir elamanın çocuk elemanlarının listesi, array dir element.firstChild – bir elemanın ilk çocuğu element.lastChild – bir elemanın son çocuğu element.nextSibling – sonraki kardeşi element.previousSibling – önceki kardeşi element.parentNode – elemanın babası

8 DOMda navigasyon <html>        <head>     <title>DOM Tutorial</title>   </head>      <body>     <h1>DOM Lesson one</h1>     <p>Hello world!</p>   </body> </html> previousSibling parentNode firstChild, lastChild ... nextSibling

9 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ı

10 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

11 DOM taranması Enine arama, DOM hierarşisini katman 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

12 DOM taranması DOM hierarşi enine taranması DOM kökü

13 DOM taranması 1 DOM hierarşi enine taranması DOM kökü

14 DOM taranması DOM hierarşi enine taranması DOM kökü 2

15 DOM taranması DOM hierarşi enine taranması DOM kökü 3

16 DOM taranması DOM hierarşi enine taranması DOM kökü 4

17 DOM taranması Örnek – javascript açılan menü

18 DOM taranması <!DOCTYPE html> <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 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html>

19 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 katman yerleştirilmektedir

20 DOM enine tarama kodu function eninetarama(rootNode,handleFunction) { level=0; var thisLevelNodes = new Array(rootNode); while(thisLevelNodes.length>0) { //handleFunction'in uygulanmasi for(var i=0;i<thisLevelNodes.length;i++) handleFunction(thisLevelNodes[i],level); } //hierarşide ilerleme var nextLevelNodes = new Array(); if(thisLevelNodes[i].hasChildNodes()) for(var k=0;k<thisLevelNodes[i].childNodes.length;k++) nextLevelNodes.push(thisLevelNodes[i].childNodes[k]); thisLevelNodes = nextLevelNodes; level++;

21 DOM taranması ul li ul li li li li ul li ul li li li
<!DOCTYPE html> <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 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> ul li ul li li li li ul li ul li li li

22 Menü elemanı yerleştirme fonksiyonu
UL elemanları, ilgili babası LI elemanın tam sağda yerleştirilir; if(node.tagName == 'UL') { var top = 0; var left = menuWidth; node.style.position='absolute'; node.style.display='block'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none'; }

23 Menü elemanı yerleştirme fonksiyonu
li, menü tipine bağlı olarak sırayla yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { left=0; if(node.previousSibling == null) top = 0; else top+=menuHeight; node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.width = menuWidth + 'px'; node.style.border='solid black 1px'; }

24

25 DOM taranması Derinlikle (derine) arama, DOM hierarşi DOM kökü ile başlayınca, elemanın çocukları varken ilk çocuklarını takip eder

26 Enine tarama kodu (özyineleme)
function derinetarama(currentNode,handleFunction,level) { handleFunction(currentNode,level); if(currentNode.hasChildNodes()) { derinetarama(currentNode.firstChild,handleFunction,level+1); } if(currentNode.nextSibling!=null) derinetarama(currentNode.nextSibling,handleFunction,level);

27 DOM taranması DOM hierarşi derine taranması DOM kökü

28 DOM taranması DOM hierarşi derine taranması 1 DOM kökü 2 3 4 5 6 7 8

29 DOM taranması Javascript açılan menü elemanlarının ekranda yerleştirilmesi

30 DOM taranması <!DOCTYPE html> <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 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html>

31 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

32 Menü elemanı yerleştirme fonksiyonu
ul, baba li elemanına göre pozisyon alır, if(node.tagName == 'UL') { var top = 0; var left = 0; if(node.parentNode.tagName == 'LI') left = node.parentNode.offsetLeft + node.parentNode.offsetWidth; } node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none';

33 Menü elemanı yerleştirme fonksiyonu
li, sırayla menü tipine göre yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { var top=-1; var left=0; var width=50; var findPreviousLiNode=node.previousSibling; while(findPreviousLiNode.tagName!='LI' && findPreviousLiNode.previousSibling!=null) findPreviousLiNode=findPreviousLiNode.previousSibling; } if(findPreviousLiNode.tagName=='LI') top=findPreviousLiNode.offsetTop + findPreviousLiNode.offsetHeight; 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 1px';

34 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.getElementsByTagName kullanarak yapılabilir

35 Enine taranma kodu Altmenüleri sakla:
uller=document.getElementById("menu").getElementsByTagName('UL'); for(var i=0;i<uller.length;i++) { uller[i].style.display='none'; } Açıp kapatan olay işlemcileri: liler=document.getElementById("menu").getElementsByTagName('LI'); for(var i=0;i<liler.length;i++) liler[i].addEventListener("mouseover",showhidelistener,false); liler[i].addEventListener("mouseout",showhidelistener,false);

36 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

37 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

38 DOM taranması Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz

39 Örnek function hideshowlistener(event) { var target = event.target; altULNode = target.firstChild; if(event.type == 'mouseover') { altULNode.style.display = 'block'; } else if(event.type == 'mouseout') altULNode.style.display = 'none';

40 DOM taranması İlgili fare olay işlemeleri zor;
Fare ayrıldığında bir saklanma talebi oluşturulmalı, bu talep daha sonra (örneğin 100ms 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ı ayrı işletilmeli

41 Örnek function hidelistener(event) { ... if(event.type == 'mouseout') { //ELEMANI SAKLAMA KUYRUGUNE EKLE queuedHideNode = target; queuedHideDirection = 'all'; setTimeout(hidenode,100); }

42 DOM taranması Hiç saklama altmenüleri sakla
<!DOCTYPE html> <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 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> Hiç saklama altmenüleri sakla altmenüleri ve kendisini sakla Hepsini sakla

43 Örnek http://www.scinetcentral.com/~mishchenko/MIT504.html
function hidelistener(event) { ... if(event.type == 'mouseover') { //ONMOUSEOUT EMENANININ SAKLANMA IPTALI if(queuedHideNode != null) //AYNI MENU ICINDE HAREKET if(queuedHideNode.parentNode.isSameNode(target.parentNode)) queuedHideDirection = 'down'; } //UST MENUYE HAREKET if(queuedHideNode.parentNode.parentNode.isSameNode(target)) else if(queuedHideNode.parentNode.parentNode.parentNode.isSameNode(target.parentNode)) queuedHideNode = target.parentNode; //ALT MENUYE HAREKET if(queuedHideNode.isSameNode(target.parentNode.parentNode)) queuedHideNode = null; queuedHideDirection = 'none';

44 Örnek function hidelistener(event) { ... if(event.type == 'mouseover') { //ALT-MENU GOSTER findULNode = target.firstChild; while(findULNode.tagName != 'UL' && findULNode.nextSibling != null) findULNode = findULNode.nextSibling; } if(findULNode.tagName == 'UL') findULNode.style.display = 'block'; event.stopPropagation();

45 Örnek function hidenode() { if(queuedHideNode == null) return; hidenodesdown(); if(queuedHideDirection == 'down') return; hidenodesup(); queuedHideNode=null; queuedHideDirection=null; }

46 Örnek function hidenodesdown() { //aşağıdakileri sakla uller = queuedHideNode.getElementsByTagName('UL'); for(var i = 0;i<uller.length;i++) { uller[i].style.display='none'; } function hidenodesup() { //yukarıdakileri sakla currentNode=queuedHideNode; while(currentNode.parentNode != null) if(currentNode.tagName == 'UL' && currentNode.parentNode.tagName == 'LI') currentNode.style.display='none'; currentNode=currentNode.parentNode;

47

48 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

49

50 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

51 DOM hierarşi güncelleştirme
DOM kökü KALDIRMA

52 DOM hierarşi güncelleştirme
DOM kökü EKLEME

53 DOM hierarşi güncelleştirme
DOM kökü KALDIRMA+EKLEME=TAŞIMA

54 DOM hierarşi güncelleştirme
DOM hierarşisi ile işlemleri document.createElement, yeni elemanı oluştur document.createAttribute, elemanın özelliği yap document.createTextNode, elemanın metni yap document.normalize, hierarşiden boş nodlar çıkart document.renameNode, elemanı değiştir

55 DOM hierarşi güncelleştirme
DOM hierarşisi güncelleştirme metotları element.appendChild, yeni eleman ekle element.cloneNode, elemanın kopyası element.insertBefore, yeni elemanı ekle element.removeChild, elemanı kaldır element.replaceChild, elemanı değiştir element.normalize, DOM'dan boş nodları çıkart

56 Örnek <!DOCTYPE html> <html> <body> <h1>Hello</h1> <script> var btn=document.createElement("BUTTON"); var txt=document.createTextNode("CLICK ME"); btn.appendChild(txt); document.body.appendChild(btn); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

57 Örnek <!DOCTYPE html> <html> <body> <img src="klematis.jpg" width="150" height="113" id="rs1"><br/> <script> var nod = document.createAttribute("src"); nod.nodeValue = "klematis2.jpg"; document.getElementById("rs1").attributes.setNamedItem(nod); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

58 Örnek <!DOCTYPE html> <html> <body> <script> var link=document.createElement("A"); link.href="http://google.com"; var txt=document.createTextNode("CLICK ME"); link.appendChild(txt); var title=document.createAttribute("title"); title.nodeValue="http://yahoo.com"; link.attributes.setNamedItem(title); document.body.appendChild(link); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

59 Örnek Coffee Tea Milk Water
<!DOCTYPE html> <html> <body> <ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var itm=document.getElementById("myList2").lastChild; var cln=itm.cloneNode(true); document.getElementById("myList1").appendChild(cln); } </script> </body> </html> Coffee Tea Milk Water Coffee. Tea. Milk. Water. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

60 Örnek Milk Coffee Tea Water
<!DOCTYPE html> <html> <body> <ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var node=document.getElementById("myList2").lastChild; var list=document.getElementById("myList1"); var targetNode=list.childNodes[0]; list.insertBefore(node,targetNode); } </script> </body> </html> Milk Coffee Tea Water Milk. Coffee. Tea. Water. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

61 DOM hierarşi güncelleştirme
NOT: DOM appendChild ve insertBefore 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, cloneNode metodu kullanılmalı!

62 Örnek <!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]); } </script> </body> </html> Coffee Tea Milk Coffee. Tea. Milk. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

63 Örnek Coffee -> Water Tea Milk
<!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var textnode=document.createTextNode("Water"); var item=document.getElementById("myList").childNodes[0]; item.replaceChild(textnode,item.childNodes[0]); } </script> </body> </html> Coffee -> Water Tea Milk Coffee -> Water. Tea. Milk. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

64 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

65 Egzersiz-1 5 2 3 3 2 3 6 4 3 5 8 6 10 8 4 10

66 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"]]];

67 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)

68 Egzersiz-2 <!DOCTYPE html> <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/MIT504.html.", "width": "800" }

69

70 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

71 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

72 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

73 Zengin İnternet Uygulamaları

74 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

75 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

76 Zengin İnternet Uygulamaları
Bu sorunun üstüne gelmek için, AJAX teknolojisi sunulmuştur

77 AJAX nedir? AJAX = Asynchronous JavaScript 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

78 XMLHttpRequest nesnesi
AJAX Temel AJAX süreci: Web sayfasının javascripti Sunucu Http İsteği XMLHttpRequest nesnesi Http Cevabı

79 AJAX AJAX işlemleri, Javascript programında XMLHttpRequest nesnesi içinde yasıyor Javascript programı, XMLHttpRequest nesnesine HTTP istek için gereken bilgi veriyor XMLHttpRequest nesnesi ilgili http isteği kendi içerisinde, dış javascripti etkilemeden sunucuya iletiyor XMLHttpRequest nesnesi sunucunun cevabını bekliyor ve o cevabı Javascript programında kullanılabilir hale götürüyor

80 AJAX NOT 1: sunucu ile iletişim Javascript'ten saklı olarak XMLHttpRequest nesnesi içinde dir; XMLHttpRequest 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 (IE6 ve IE5) ~~XMLHttpRequest, Javascript dışında olan bir tarayıcının nesnesi dir~~

81 AJAX NOT 2: XMLHttpRequest sunucu ile normal şekilde haberleşiyor, XMLHttpRequest'in http isteği ve normal tarayıcının http isteği arasında hiç fark yok ~~ XMLHttpRequest tarayıcının özel bir HTTP işleyici modülüdür ~~

82 AJAX NOT 3: XMLHttpRequest'in sunucu ile 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

83 Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Yeni metin indir</button> </body> </html>

Let AJAX change this text

http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

84 AJAX XMLHttpRequest HTTP isteği oluşturma:
AJAX haberleşmesinin ilk adımı, HTTP isteğin hazırlanması ve sunucya yollandırılmasıdır Bunlar, XMLHttpRequest nesnesinin open ve send metotlarını kullanarak yapılır

85 AJAX XMLHttpRequest.open metodu şu şekilde:
XMLHttpRequest.open(HTTP_isteği türü ("GET"/"POST"), sunucu_url, asynchronous? (true/false)) XMLHttpRequest.send metodu şu şekilde: XMLHttpRequest.send(string)

86 AJAX HTTP GET isteklerinde, sunucuya bir parametre bilgileri gönderilirse, o bilgi url'nin içerisinde gönderilir xmlhttp.open("GET","demo_get2.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

87 Örnek <!DOCTYPE html> <html> <body> <script> function loadAJAX() { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","arabaozelligi.php?marka=ford&yil=2007",true); xmlhttp.send(); } </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

88 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

89 Örnek: KÖTÜ FİKİR <!DOCTYPE html> <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>

90 AJAX POST isteğinde, istek parametreleri URL'den ayrı olarak gönderilir Bu ek veriler AJAX'ta belirtmek için, POST verileri metin olarak XMLHttpRequest.send fonksiyonuna giriş olarak verilir

91 Örnek ... <form> <input type="text" id="user" name="user" value=""/><br/> <input type="password" id="pass" name="password" value=""/> </form> <script> function loadAJAX() { var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","authorize.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name="+user+"&pass="+pass); } </script> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

92 AJAX XMLHttpRequest'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, XMLHttpRequest nesnesinin onreadystatechange olayı kullanılmalı, onreadystatechange olay işleyicisi diğer olay işleyicileri gibi ilgili XMLHttpRequest nesnesinin onreadystatechange olayına atanır

93 Örnek ... <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

94 AJAX Onreadystatechange olayı, XMLHttpRequest nesnesinin hali değiştiğinde tetikleniyor ve şu olayı meydana getirdiği XMLHttpRequest nesnesinin hali readyState özelliğinden kontrol edilebilir, XMLHttpRequest nesnesinin... readyState=0, istek başlatılmadı readyState=1, sunucuyla bağlantı kuruldu readyState=2, istek gönderildi readyState=3, cevap bekleniyor readyState=4, cevap elde edildi

95 AJAX Ayrıca XMLHttpRequest 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

96 Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; ... </body> </html>

97 AJAX Sunucudan cevap geldiğinde, sunucunun cevabı XMLHttpRequest nesnesinin metin olarak XMLHttpRequest'in responseText, XML olarak responseXML özelliklerinde bulunmakta

98 Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } ...

99 AJAX NOT: daha eski IE tarayıcılarında (IE5 ve IE6), XMLHttpResponse nesnesi yerinde bir ActiveX nesnesi kullanılıyordu Bu nedenle, IE5 ve IE6 tarayıcılarında AJAX kullanmak için XMLHttpRequest farklı şekilde tanımlanmalı (ancak bundan sonra kullanımda fark yok)

100 Örnek <!DOCTYPE html> <html> <head> <script> function cfunc() { //AJAX cevabı işleyicisi ... function loadXMLDoc(url) { var xmlhttp; if(window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); ...

101 Tamamlanmış bir AJAX Örneği
<!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> ... ... <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> ... ...


http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

102 Örnek AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
<body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> AJAX AJAX. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

103 XMLHttpRequest nesnesi başlatılması
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> XMLHttpRequest nesnesi başlatılması XMLHttpRequest nesnesi başlatılması. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

104 Sunucu cevabı işletecek fonksiyonu
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu cevabı işletecek fonksiyonu Sunucu cevabı işletecek fonksiyonu. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

105 Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> HTTP isteği GET olarak gönderilmesi, istenen kullanıcı bilgi URL metninin bir kısmı olarak gönderilir HTTP isteği GET olarak gönderilmesi, istenen kullanıcı bilgi URL metninin bir kısmı olarak gönderilir. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

106 Sunucu adresi, w3schools.com/getcustomer.asp
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu adresi, w3schools.com/getcustomer.asp Sunucu adresi, w3schools.com/getcustomer.asp. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

107 Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması
Örnek Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

108 Sunucu tarafından gönderilecek tablonun yeri
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu tarafından gönderilecek tablonun yeri Sunucu tarafından gönderilecek tablonun yeri. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

109 AJAX Çalışma sırası

110 XMLHttpRequest nesnesi başlatılır
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> XMLHttpRequest nesnesi başlatılır XMLHttpRequest nesnesi başlatılır. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

111 Örnek HTTP istek gönderilir
<body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> HTTP istek gönderilir HTTP istek gönderilir. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

112 Örnek Cevap bekleniyor
<body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Cevap bekleniyor Cevap bekleniyor. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

113 Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

114 Sunucu gönderdiği tablo div'e yazdırılır
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(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> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu gönderdiği tablo div'e yazdırılır Sunucu gönderdiği tablo div e yazdırılır. http://www.scinetcentral.com/~mishchenko/MIT504.html.", "width": "800" }

115 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

116 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, HTML5+Javascript+AJAX tabanlı, özel plugin veya yazılım gerektirmeyen RIA'ler yayılmaya başladı

117 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 ActionScript 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, HTML5'te birçok benzer araç sunulduğu için ve Flash'in mobil cihazlarda genellikle desteklenmemesi için azalmaya başladı

118 Zengin İnternet uygulamaları
Java ve JavaFX, 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

119 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.

120 Zengin İnternet uygulamaları
HTML5+Javascript+AJAX RIA'ler, tartıştığımız HTML5/CSS3, Javascript DOM ve AJAX araçlarını kullanan uygulamalardır Bunlardan en ünlü örneklerden bazelar, gmail ve google docs uygulamalarıdır

121 Zengin İnternet uygulamaları
HTML5+Javascript+AJAX RIA'ler, Javascript'te programlanmış tam özellikli ve dolayısıyla genellikle büyük yazılımlardır Modern HTML5/Javascript tabanlı RIA'ler, Javascript çerçeveleri kullanarak geliştirilmektedir

122 Zengin İnternet uygulamaları
HTML5/Javascript çerçeveleri hızlı geliştiği nedeniyle, sıralanması sürekli değiştiriyor olabilir Erken HTML5/Javascript çerçeveleri, Google Web Kit (GWK), ExtJS, jQuery, DoJo, MooTools, Prototype, vb. idi Şimdi üç önde olan HTML5/Javascript çerçevesi, AngularJS, Ember ve Backbone'dir

123


"IT504 ~~DOM~~ Belge Nesne Modeli II" indir ppt

Benzer bir sunumlar


Google Reklamları