Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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

Benzer bir sunumlar


... konulu sunumlar: "IT504 ~~DOM~~ Belge Nesne Modeli II Yrd. Doç. Dr. Yuriy Mishchenko."— 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 2http://www.scinetcentral.com/~mishchenko/MIT504.html

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 3http://www.scinetcentral.com/~mishchenko/MIT504.html

4 DOM taranması • DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir 4http://www.scinetcentral.com/~mishchenko/MIT504.html

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 5http://www.scinetcentral.com/~mishchenko/MIT504.html

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 6http://www.scinetcentral.com/~mishchenko/MIT504.html

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ı 7http://www.scinetcentral.com/~mishchenko/MIT504.html

8 DOMda navigasyon DOM Tutorial DOM Lesson one Hello world!... parentNode previousSibling nextSibling firstChild, lastChild

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ı 9http://www.scinetcentral.com/~mishchenko/MIT504.html

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 10http://www.scinetcentral.com/~mishchenko/MIT504.html

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 11http://www.scinetcentral.com/~mishchenko/MIT504.html

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

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

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

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

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

17 DOM taranması • Örnek – javascript açılan menü 17http://www.scinetcentral.com/~mishchenko/MIT504.html

18 DOM taranması 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

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 19http://www.scinetcentral.com/~mishchenko/MIT504.html

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

21 DOM taranması 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 li ul

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 25http://www.scinetcentral.com/~mishchenko/MIT504.html

26 Enine tarama kodu 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); } (özyineleme)

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

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

29 DOM taranması • Javascript açılan menü elemanlarının ekranda yerleştirilmesi 29http://www.scinetcentral.com/~mishchenko/MIT504.html

30 DOM taranması 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

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 31http://www.scinetcentral.com/~mishchenko/MIT504.html

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 34http://www.scinetcentral.com/~mishchenko/MIT504.html

35 Enine taranma kodu Altmenüleri sakla: uller=document.getElementById("menu").getElementsByTagName('UL'); for(var i=0;i

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 36http://www.scinetcentral.com/~mishchenko/MIT504.html

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 37http://www.scinetcentral.com/~mishchenko/MIT504.html

38 DOM taranması • Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz 38http://www.scinetcentral.com/~mishchenko/MIT504.html

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 40http://www.scinetcentral.com/~mishchenko/MIT504.html

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

42 DOM taranması 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 Hiç saklama Hepsini sakla altmenüleri sakla altmenüleri ve kendisini sakla

43 Örnek 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)) { queuedHideDirection = 'down'; } else if(queuedHideNode.parentNode.parentNode.parentNode.isSameNode(target.parentNode)) { queuedHideNode = target.parentNode; queuedHideDirection = 'down'; } //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

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 48http://www.scinetcentral.com/~mishchenko/MIT504.html

49 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 50http://www.scinetcentral.com/~mishchenko/MIT504.html

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 54http://www.scinetcentral.com/~mishchenko/MIT504.html

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 55http://www.scinetcentral.com/~mishchenko/MIT504.html

56 Örnek Hello var btn=document.createElement("BUTTON"); var txt=document.createTextNode("CLICK ME"); btn.appendChild(txt); document.body.appendChild(btn);

57 Örnek var nod = document.createAttribute("src"); nod.nodeValue = "klematis2.jpg"; document.getElementById("rs1").attributes.setNamedItem(nod);

58 Örnek 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);

59 Örnek Coffee Tea Water Milk Try it function myFunction() { var itm=document.getElementById("myList2").lastChild; var cln=itm.cloneNode(true); document.getElementById("myList1").appendChild(cln); } • Coffee • Tea • Milk • Water • Milk

60 Örnek Coffee Tea Water Milk Try it function myFunction() { var node=document.getElementById("myList2").lastChild; var list=document.getElementById("myList1"); var targetNode=list.childNodes[0]; list.insertBefore(node,targetNode); } • Milk • Coffee • Tea • Water • Milk

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ı! 61http://www.scinetcentral.com/~mishchenko/MIT504.html

62 Örnek Coffee Tea Milk Try it function myFunction() { var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]); } • Coffee • Tea • Milk

63 Örnek Coffee Tea Milk Try it function myFunction() { var textnode=document.createTextNode("Water"); var item=document.getElementById("myList").childNodes[0]; item.replaceChild(textnode,item.childNodes[0]); } • Coffee -> Water • Tea • Milk

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 64http://www.scinetcentral.com/~mishchenko/MIT504.html

65 Egzersiz

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"]]]; 66http://www.scinetcentral.com/~mishchenko/MIT504.html

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) 67http://www.scinetcentral.com/~mishchenko/MIT504.html

68 Egzersiz-2 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"]]];...

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 AJAX • Temel AJAX süreci: Web sayfasının javascripti XMLHttpRequest nesnesi Sunucu Http İsteği Http Cevabı

79 AJAX 1.AJAX işlemleri, Javascript programında XMLHttpRequest nesnesi içinde yasıyor 2.Javascript programı, XMLHttpRequest nesnesine HTTP istek için gereken bilgi veriyor 3.XMLHttpRequest nesnesi ilgili http isteği kendi içerisinde, dış javascripti etkilemeden sunucuya iletiyor 4.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 function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } Let AJAX change this text Yeni metin indir

84 AJAX 1.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 function loadAJAX() { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","arabaozelligi.php?marka=ford&yil=2007",true); xmlhttp.send(); }

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

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... 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); }...

92 AJAX 2.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... function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); }...

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 function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } };...

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

98 Örnek 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 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 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(); }... Select a customer: Alfreds Futterkiste North/South Wolski Zajazd

102 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd AJAX

103 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd XMLHttpRequest nesnesi başlatılması

104 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Sunucu cevabı işletecek fonksiyonu

105 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd HTTP isteği GET olarak gönderilmesi, istenen kullanıcı bilgi URL metninin bir kısmı olarak gönderilir

106 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Sunucu adresi, w3schools.com/getcustomer.asp

107 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması

108 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Sunucu tarafından gönderilecek tablonun yeri

109 AJAX • Çalışma sırası

110 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd XMLHttpRequest nesnesi başlatılır

111 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd HTTP istek gönderilir

112 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Cevap bekleniyor

113 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır

114 Örnek 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(); } Select a customer: Alfreds Futterkiste North/South Wolski Zajazd Sunucu gönderdiği tablo div'e yazdırılır

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 Yrd. Doç. Dr. Yuriy Mishchenko." indir ppt

Benzer bir sunumlar


Google Reklamları