Web Programlama. JavaScript (3)

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "Web Programlama. JavaScript (3)"

Transkript

1 Web Programlama JavaScript (3)

2 Döküman Nesne Modeli (1/4) Document Object Model (DOM) DOM web tarayıcı tarafından, web sayfası yüklendiğinde otomatik oluşturulan bir organizasyon şemasıdır Web sayfasında bulunan her eleman (etiketler, metin, resim, tablo, CSS özellikleri vs.) bu organizasyon şemasında bir pozisyona sahiptir getelementbyid ve getelementsbytagname, DOM üzerinde değişiklik yapmak için kullanılan iki metotur İlerleyen slaytlarda DOM a yeni eleman ekleme ve DOM üzerindeki elemanların taşınması işlemlerinin nasıl yapılacağı gösterilecek

3 Döküman Nesne Modeli (2/4)

4 Döküman Nesne Modeli (3/4) Web sayfasındaki herşey DOM a dahil edilir İlk iki seviye tüm web sayfalarında aynıdır: "document" ve "html" Bir alt seviyede "head" ve "body" yer alır "head" ve "body" aynı seviyedeki elemanlardır Sayfanın asıl içeriği "body" seviyesinin altındaki elemanlardır Önceki sayfaya bir "div" ve paragraf daha ekleyerek DOM daki değişiklikleri inceleyelim

5 Döküman Nesne Modeli (4/4)

6 DOM: Üst ve Alt Nodlar

7 DOM: Üst ve Alt Nodlar (1/2) DOM ağacı üst ve alt nodlardan oluşur "document" nodu hariç tüm nodların bir üst nodu vardır "div" nodu "body" üst nodu içerisinde "p" nodları "div" üst nodu içerisinde metin nodları ilişkili "p" nodları içerisinde "html" nodu, "head" ve "body" nodlarının üst nodudur "body" nodu, "html" nodunun alt nodudur

8 DOM: Üst ve Alt Nodlar (2/2) Aşağıdaki paragraf için DOM ağacı nasıl olur gözünüzde canlandırın: <p>this is <em>important</em>!</p> Gözünüzde canlandırdığınız DOM ağacı aşağıdaki ile örtüşüyor mu?

9 DOM Ağacında Nod Aramak (1/6) Daha önce, getelementbyid metodunu kullanarak, nodların id lerini kullanarak arama yapmayı öğrenmiştik var efield = document.getelementbyid(" "); Belirli bir tipteki nodun (örnek: <p>) sayfadaki tüm örneklerini, getelementsbytagname metodu ile, bir kolleksiyon halinde almayı da görmüştük var efield = document.getelementsbytagname("p");

10 DOM Ağacında Nod Aramak (2/6) Bu kolleksiyondaki paragraflardan bir tanesinin içeriğini ise aşağıdaki gibi değiştirebiliyor veya okuyabiliyorduk var contents = p[2].innerhtml; Örneğin, yukarıdaki cümle sayfadaki 3. paragrafın içeriğini contents değişkeninin içerisine aktarmakta

11 DOM Ağacında Nod Aramak (3/6) Önceki slayttaki cümlelerde arama tüm DOM dökümanı üzerinde yapılmaktaydı Aramayı, belirli bir nodun alt nodları arasında yaparak arama alanını sınırlandırabiliriz Aşağıdaki örnekte "div3" id li nod altındaki "p" etiketi aranmakta ve içeriği contents değişkeni içerisine atılmakta var d = document.getelementbyid("div3"); var p = d.getelementsbytagname("p"); var contents = p[2].innerhtml;

12 DOM Ağacında Nod Aramak (4/6) Yandaki HTML sayfasnda "ny" id li "div" nodunun altındaki ikinci paragrafı elde etmek için aşağıdaki kod parçası çalıştırılabilir: var div = document.getelementbyid("ny"); var p = div.getelementsbytagname("p"); var contents = p[1].innerhtml;

13 DOM Ağacında Nod Aramak (5/6) Aynı elemana erişmenin yeni bir yolu (childnodes kullanılarak) yukarıda gösterilmiştir var p = document.childnodes[0].childnodes[1].childnodes[1].childnodes[1]; var contents = p.innerhtml;

14 DOM Ağacında Nod Aramak (6/6) Önceki örnekte, hedef noda erişim document nodundan başlayarak gerçekleştirilmiştir Pratikte ise hedef noda erişim daha alt seviyedeki bir noddan başlanarak daha kolay gerçekleştirilebilir var d = document.getelementbyid("ny"); var p = d.childnodes[1]; var contents = p.innerhtml;

15 Çöp Nodlar ve nodetype (1/4)

16 Çöp Nodlar ve nodetype (2/4)

17 Çöp Nodlar ve nodetype (3/4) Boşluk karakterleri için eklenen bu ekstra nodlar, farklı web tarayıcılarında aynı hedef nodu bulmayı zorlaştırabilir Bu durumu çözmek için aradığımız noda id vererek aramayı bu id üzerinden yapabiliriz document.getelementbyid("p2").innerhtml = "All his men."; Veya nodetype özelliğini kullanarak aradığımız nodu daha emin bir şekilde bulabiliriz var ntype = targetnode.nodetype;

18 Çöp Nodlar ve nodetype (4/4) Aşağıda nodetype özelliğini ilgili paragrafı bulup değiştiren JavaScript kod parçası bulunmaktadır Kod parçası "div" nodu altındaki nodları incelemekte, nod tipi 1 olan paragraflardan ikincisini, sayaç kullanarak bulmaktadır

19 Nod Tipleri nodetype özelliği sadece okunabilirdir, değeri değiştirilemez nodetype özelliği ilgili nodun tipini bir sayı olarak geri döndürür Element (element) nodlar için 1 (örnek: <p>, <ul>...) Özellik (attribute) nodlar için 2 (örnek: href) Metin (text) nodlar için 3 Yorum (comment) nodlar için 8 Diğer nod tipleri için:

20 firstchild ve lastchild Özellikleri childnodes kolleksiyonunu kullanarak alt nodlara erişim gösterilmişti var targetnode0 = parentnode.childnodes[0]; var targetnode1 = parentnode.childnodes[1]; İlk ve son alt nodlara firstchild ve lastchild özellikleri kullanılarak da erişilebilir var targetnode = parentnode.firstchild; var targetnode = parentnode.lastchild;

21 parentnode Özelliği DOM ağacında yukarı doğru giderek, bir alt nodun üst noduna da parentnode özelliğini kullanarak erişebiliriz DOM kullanarak yan tarafta gösterilen div nodunun üst noduna nasıl erişilebilir? var kidnode = document.getelementbyid("div2"); var pnode = kidnode.parentnode;

22 nextsibling ve previoussibling Özellikleri Bir çocuk nod ile aynı seviyedeki diğer nodları elde etmek için, çocuk nodun nextsibling ve previoussibling özellikleri kullanılabilir Aşağıdaki "div1" id li nod ile aynı üst noda sahip bir sonraki nodu elde etmek için kullanılabilir var firstel = document.getelementbyid("div1"); secondel = firstel.nextsibling; previoussibling ise aynı seviyede bulunan bir önceki nodu elde etmek için kullanılabilir

23 nodename Özelliği (1/3) Bir nodun adını nodename özelliği ile alabiliriz Nod adları "P" ve "DIV" gibi string değerlerdir Aşağıdaki örnekte, hedef noda ait nod adı nname değişkenine aktarılmaktadır var parent = document.getelementbyid("div1"); var target = parent.firstchild; nname = target.nodename;

24 nodename Özelliği (2/3) Eğer nod bir metin nodu (text node) ise nod adı "#text" olur (çift tırnaksız ve küçük harfle)

25 nodename Özelliği (3/3) nodename özelliği zaman zaman "P" yerine "p" veya "IMG" yerine "img" geri döndürebileceğinden, aşağıdaki şekilde küçük harfe çevrilerek kontrol edilmesi daha uygun olacaktır if (targetnode.nodename.tolowercase === "img") {

26 nodevalue Özelliği (1/2) Bir metin nodunun (text node) değeri nodevalue özelliği ile elde edilebilir Aşağıdaki HTML kod parçası verilmiş olsun <h2>do <em>not</em> hit!</h2> Burada H2 elemanının ilk çocuğu bir metin nodudur ve nod değeri "Do" değeridir (çift tırnaksız)

27 nodevalue Özelliği (2/2) P ve IMG gibi element nodların (element node) değerleri yoktur Bir element nodun değerini değişken içerisine atmaya çalışırsanız, değişkenin değeri null olacaktır Örneğin aşağıdaki HTML kod parçasında, em bir element nodudur ve nod değeri bir değişkene atanacak olursa, değişken null değere sahip olacaktır <h2>do <em>not</em> hit!</h2>

28 nodevalue ve innerhtml Özellikleri (1/2) Metin nodların nodevalue özelliği ile innerhtml özelliği karıştırılmamalıdır innerhtml element nodlarının bir özelliğidir. innerhtml özelliği ile dönen değer tüm alt nodları da içerir (alt elemanlar dahil). nodevalue özelliği ise tek bir metin noduna ait karakterleri döndürür

29 nodevalue ve innerhtml Özellikleri (2/2) Aşağıdaki örnekte H2 elementinin innerhtml özelliğine karşılık gelen kısım kırmızı olarak gösterilmiştir <h2>do <em>not</em> hit!</h2> Aşağıda ise H2 elementinin ilk çocuğuna ait nod değeri (nodevalue) gösterilmektedir <h2>do <em>not</em> hit!</h2>

30 Elementlerin Sayılması (1/4) Daha önce getelementsbytagname ve childnodes kullanarak bir element listesi/kolleksiyonu oluşturmayı gördünüz length özelliğini kullanarak bu kolleksiyonun boyutunu yani kolleksiyon içerisindeki elementlerin sayısını elde edebilirsiniz getelementsbytagname kullanarak elde edilen kolleksiyonun boyutunu elde etmek için: var lielements = getelementsbytagname("li"); var howmanyli = lielements.length;

31 Elementlerin Sayılması (2/4) childnodes kullanarak elde edilen kolleksiyonun boyutunu elde etmek için: var parentnode = document.getelementbyid("d1"); var nodelist = parentnode.childnodes; var howmanykids = nodelist.length;

32 Elementlerin Sayılması (3/4) Bu kolleksiyonların boyutu kullanılarak pek çok önemli işlem gerçekleştirilebilir Örneğin, bir sayfadaki tüm <li> elementlerinin üzerinde gezerek içi boş olanların içine geçici bir metin atayan JavaScript kodu aşağıda verilmiştir for (var i = 0; i < howmanyli; i++) { if (lielements[i].innerhtml === "") { } } lielements[i].innerhtml = "coming soon";

33 Elementlerin Sayılması (4/4) Aşağıdaki JavaScript kodu ise <div> etiketi altında olan resimlerin sayısını hesaplamaktadır var numberpics = 0; for (var i = 0; i < howmanykids; i++) { } if (nodelist[i].nodename.tolowercase() === "img") { numberpics++; }

34 Nod Özellikleri (1/3) HTML elemanlarının özelliklerini hatırlayınız <a href="http://www.amazon.com">shop</a> <div id="p1"> <p class="special"> <img src="images/slow-loris.png"> <img src="dan.gif" alt="dan" height="42" width="42">

35 Nod Özellikleri (2/3) Belirli bir elementin, belirli bir özelliğe sahip olup olmadığını hasattribute ile tespit edebiliriz var target = document.getelementbyid("p1"); var hasclass = target.hasattribute("class"); Eğer parametre olarak gönderilen özellik bu element için kullanılmış ise, metoddan true dönecektir. Aksi halde ise false dönecektir

36 Nod Özellikleri (3/3) Belirli bir elementin, özelliğinin değerini getattribute ile elde edebiliriz var target = document.getelementbyid("div1"); var attval = target.getattribute("class"); Bir özelliğin değerini ise setattribute ile atayabiliriz var target = document.getelementbyid("div1"); target.setattribute("class, "special"); <div id="div1" class="special">

37 Özellik Adları ve Değerleri (1/3) Bir elementin sahip olduğu özellikleri kolleksiyon halinde elde etmek için attributes özelliği kullanılır var list = document.getelementbyid("p1").attributes; Bu kolleksiyonda kaç özellik olduğunu tespit etmek içinse, daha önceki kullanımlarda olduğu gibi, lenght özelliği kullanılır var numofitems = list.length;

38 Özellik Adları ve Değerleri (2/3) Veya bu iki özelliğin kullanımı aşağıdaki gibi birleştirilebilir var numofitems = document.getitembyid("p1").attributes.length; Dizi notasyonu kullanarak, herhangi bir özelliğin adı, nodename özelliği kullanarak bir değişkenin içine atılabilir var nname = list[2].nodename;

39 Özellik Adları ve Değerleri (3/3) Örneğin aşağıdaki HTML kod parçası için nname değişkenine "onmou seover" değeri atanır <p id="p1" class="c1" onmouseover="chgcolor();"> Özelliğin değerini almak içinse nodevalue özelliği kullanılır Aynı HTML kod parçası için, aşağıdaki kod parçası nvalue değişkenine "chgcolor();" değerini atayacaktır var nvalue = list[2].nodevalue;

40 Nod Eklemek (1/9) DOM hiyerarşisini kullanarak, bir HTML dökümanın HEAD veya BODY bölümlerinin herhangi bir yerine element, özellik veya metin nodu (text node) eklenebilir İlerleyen slaytlarda, öncelikle (1) yeni bir paragraf oluşturma, bu paragrafa özellik ekleme ve metin ekleme, ardından (2) bu paragrafı sayfaya ekleme gösterilecektir Yeni bir nod oluşturmak için document nesnesinin createelement metodu kullanılır

41 Nod Eklemek (2/9) Aşağıda çeşitli elemanlar oluşturmak için örnekler bulunmaktadır var nodetoadd = document.createelement("p"); var anodetoadd = document.createelement("a"); var imgnodetoadd = document.createelement("img");

42 Nod Eklemek (3/9) Oluşturulan noda özellik eklemek için ise daha önce gösterilen setattribute metodu kullanılabilir nodetoadd.setattribute("class", "regular"); imgnodetoadd.setattribute("border", "1");

43 Nod Eklemek (4/9) Yeni bir metin nodu (text node) oluşturmak içinse document nesnesinin createtextnode metodu kullanılır var newtxt = document.createtextnode("hello!"); Oluşturulan bir metin nodunu, bir elemanla ilişkilendirmek için (örneğin paragraf) ilgili elementin appendchild metodu kullanılır Bu metod metin nodunu, elemente alt nod olarak ekler nodetoadd.appendchild(newtxt);

44 Nod Eklemek (5/9) Şu ana kadar bir paragraf, bu paragrafın özelliği ve içeriği oluşturuldu Ancak bu paragraf sayfaya henüz eklenmedi Paragrafı sayfaya eklemek için hedef bir <div> elementi bulunabilir ve appendchild metodu kullanılarak, paragraf bu <div> etiketine alt nod olarak eklenebilir Bir sonraki slaytta bu kullanım gösterilmektedir

45 Nod Eklemek (6/9) var parentdiv = document.getelementbyid("div1"); var newparagraph = document.createelement("p"); var t = document.createtextnode("hello world!"); newparagraph.appendchild(t); parentdiv.appendchild(newparagraph);

46 Nod Eklemek (7/9) Hedef <div> elementinin altında halihazırda 3 paragrafın olduğunu ve yeni paragrafı bu paragrafların üstüne eklemek istediğinizi varsayın Bu durumda appendchild metodu işe yaramayacaktır insertbefore metodunun kullanılması gerekir insertbefore metodu, yeni eklenecek elementi belirtilen elementin önüne yerleştirecektir İstenen işlemin insertbefore metodu ile gerçekleştirimi bir sonraki slaytta verilmiştir

47 Nod Eklemek (8/9) var parentdiv = document.getelementbyid("div1"); var newparagraph = document.createelement("p"); var t = document.createtextnode("hello world!"); newparagraph.appendchild(t); paragraph1 = parentdiv.firstchild; parentdiv.insertbefore(newparagraph, paragraph1);

48 Nod Eklemek (9/9) Benzer şekilde, yeni nodu, belirli bir elementin ardından yerleştirmek gerekebilir Bu amaçla insertafter metodu bulunmamaktadır Bu işlem nextsibling özelliğini kullanarak bir sonraki elementin önüne insertbefore kullanarak aşağıdaki gibi gerçekleştirilebilir var target = parentdiv.childnodes[1]; parentdiv.insertbefore(newe, target.nextsibling);

49 Nod Silmek Bir nodun alt nodu, removechild metodu kullanılarak aşağıdaki gibi silinebilir var parentdiv = document.getelementbyid("div1"); var nodetoremove = parentdiv.childnodes[2]; parentdiv.removechild(nodetoremove);

50 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (1/8) JavaScript web tarayıcısının kontrolünde de kullanılabilir O an zıyaret edilen sayfayı elde etmek için window nesnesinin ilgili özellikleri aşağıdaki gibi kullanılabilir var whereweat = window.location.href; Eğer şu anda ziyaret edilen sayfa "http://www.alanim.com/products/page12.html#bottom" ise whereweat değişkenin içerisine bu değer atanacaktır

51 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (2/8) Aynı zamanda bu bilginin parçaları da elde edilebilir Sadece alan adını almak için aşağıdaki satır kullanılabilir var thedomain = window.location.hostname; Bu durumda thedomain değişkenin içine "www.alanim.com" değeri atanacaktır Baştaki "http://" kısmının alınmadığına dikkat edin

52 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (3/8) Veya alan adından sonraki yol (path) alınmak istenirse aşağıdaki satır kullanılabilir var thepath = window.location.pathname; Bu durumda thepath değişkenin içine "/products/page12.html" değeri atanacaktır Baştaki "/" işaretine dikkat edin

53 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (4/8) Örnek URL de web tarayıcısı ilgili sayfanın "#bottom" ile işaretlenmiş bölümüne yönlendiriliyordu "#bottom" parçasını almak için aşağıdaki satır kullanılabilir var theanchor = window.location.hash; Bu durumda theanchor değişkenin içine "#bottom" değeri atanacaktır

54 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (5/8) window.location nesnesini kullanarak, benzer şekilde, web tarayıcısına hangi sayfaya gitmesi gerektiğini de söyleyebilirsiniz window.location.href = "http://www.alanim.com/about.html"; Bu satır web tarayıcısını "http://www.alanim.com/about.html" web sayfasına yönlendirecektir

55 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (6/8) Aşağıdaki kod parçası web tarayıcısını aynı web sitesinde başka bir web sayfasına yönlendirmektedir var currentsite = window.location.hostname; var destination = "http: //" + currentsite + "/deneme. html"; window.location.href = destination;

56 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (7/8) Aşağıdaki kod parçası web tarayıcısını aynı sayfada başka bir bölüme yönlendirmektedir var currentsite = window. location. hostname; var currentpath = window. location. pathname; var destination = "http: //" + currentsite + currentpath + "#middle"; window. location. href = destination;

57 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (8/8) Web tarayıcısını yeni bir sayfaya yönlendirmek için, alternatif olarak, window.location nesnesinin assign ve replace metodları kullanılabilir window.location.assign("http://www.alanim.com/about.html"); window.location.replace("http://www.alanim.com/about.html"); İki metod arasındaki fark: assign metodu web tarayıcısı geçmişinde (web browser history) yönlendirilmeden önceki sayfayı korurken, replace metodu bu sayfayı tarihçeden siler Assign metodu kullanıldığında web tarayıcısının geri (back) butonunu kullanarak bir önceki sayfaya gidebilirsiniz

58 Web Tarayıcısı Kontrolü - Web Sayfasının Yeniden Yüklenmesi O anki sayfayı yeniden yüklemek için aşağıdaki yöntemlerden biri kullanılabilir window.location.reload(true) ; window.location.reload(false) ; window.location.reload() ; Eğer true parametresi gönderilirse, JavaScript sayfanın sunucudan alınmasını sağlar Parametre false olursa veya belirtilmezse, web tarayıcısı sayfayı öncelikle ön belleğinden yüklemeye çalışacaktır

59 Web Tarayıcısı Kontrolü İleri veya Geri Gitmek history nesnesinin forward ve back metotlarını kullanarak web tarayıcında, önceki ve sonraki sayfalara geöilebilir history.forward() ; history.back() ; Daha sonraki veya daha önceki sayfalara geçmek için go metodu da kullanılabilir history.go(2); history.go(-4);

60 Web Tarayıcısı Kontrolü Referrer Eğer kullanıcı o anki safaya bir bağlantıyı tıklayarak gelmişse, geldiği sayfanın URL sini document nesnesinin referrer özelliğini kullanarak elde edebilirsiniz var whereusercamefrom = document.referrer; Bu durumda whereusercamefrom değişkeni bir önceki sayfanın URL sini içerecektir

61 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (1/4) Web tarayıcısnda yeni bir pencere açmak için window nesnesinin open metodu kullanılır var monkeywindow = window.open(); Bu metod, herhangi bir parametre kullanılmazsa maksimum boyutta boş bir pencere açar Metoddan geri dönen değer, bu pencereyi daha sonra kullanabilmemiz için gereken pencere nesnesidir (window handle) Web tarayıcısına bağlı olarak pencere, yeni bir web tarayıcı olarak, yeni bir tab olarak veya varolan pencerenin üzerine açılabilir

62 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (2/4) Bir pencereyi doldurmak için üç farklı yol vardır Bunlardan biri write metodunu kullanmaktır Aşağıdaki kod parçası yeni bir pencere açmakta ve bu pencerenin içini windowcontent değişkeni içerisinde tutulan HTML kodu ile doldurmaktadır var monkeywindow = window. open() ; var windowcontent = "<h1>capuchin monkey</h1> <img src= 'monkey.jpg'><p>the capuchin derives from... </p>"; monkeywindow.document.write(windowcontent);

63 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (3/4) Bir pencereyi doldurmak için ikinci yol, ilgili pencereye yeni bir web sayfası adresi atamaktır Bunu gerçekleştirmenin iki yolu aşağıda gösterilmiştir: monkeywindow.location.assign("http://www.animals.com"); monkeywindow.location.href = "http://www.animals.com";

64 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (4/4) Bir pencereyi doldurmanın en çok kullanılan yolu ise open metodunu kullanmaktır var monkeywindow = window.open("http://www. animals.com"); Açılacak sayfa, o anki sayfa ile aynı alan adına sahipse, kısaca aşağıdaki gibi yazılabilir var monkeywindow = window.open("capuchin.html") ;

65 Web Tarayıcısı Kontrolü Açılan Pencerenin Kapatılması Açılan bir pencereyi kapatmak için close metodu aşağıdaki gibi kullanılır: monkeywindow.close();

66 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (1/4) Yeni bir pencere açmak için kullanılan open metodunu farklı parametrelerle de kullanmak mümkündür Eklenebilecek ikinci bir parametre pencere adıdır var monkeywindow = window.open("monk. html", "win1"); URL parametresi boş olarak gönderilebilir var monkeywindow = window.open("", "win1");

67 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (2/4) Üçüncü bir parametre ile pencere boyutu da belirlenebilir var monkeywindow = window.open("monk.html", "win1", "width=420,height=380"); Üçüncü paramtre belirtilirken, çift tırnaklar içerisinde boşluk bırakılmaması zorunludur Sayılar piksel olarak belirtilmektedir width ve height in hangi sırada yazıldığı önemli değildir

68 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (3/4) Ekrandan daha küçük boyutta pencereler, ekranın sol üst köşesinde gösterilirler Bu tür pencerlerin, ekranın neresinde gösterileceğini aşağıdaki şekilde belirtebilirsiniz var w = window. open("", "", "width=420,height=380,left=200,top=100"); Son ikiparametre sırasıyla ekranın solundan ve üstünden kaç piksel öteye pencerenin konumlanacağını belirtmektedir

69 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (4/4) Alternatif olarak, tüm bu parametreler tek bir değişken aracılığıyla aşağıdaki gibi belirtilebilir var windowspecs = "'faq.html', 'faq', 'width=420,height=380,left=200,top=100'"; var faqpage = window.open(windowspecs);

70 Form Doğrulama Metin Alanları (1/6) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return checkforlastname();"> </form> Please enter your last name. <br> <input type="text" id="lastnamefield"> <input type="submit" value="submit Form"> Kullanıcı butonuna "submit" tıkladığında checkforlastname fonksiyonu çağırılacaktır

71 Form Doğrulama Metin Alanları (2/6) checkforlastname fonksiyonu aşağıdaki gibi tanımlanmıştır function checkforlastname() { } if (document.getelementbyid("lastnamefield").value.length === 0) { alert("please enter your last name") ; return false; } Fonksiyon lastnamefield alanına yazılan değerin uzunluğunu kontrol etmekte ve uzunluk sıfırsa kullanıcıyı uyarmakta ve false döndürmekte

72 Form Doğrulama Metin Alanları (3/6) Aşağıdaki kod parçasında tekrar return yazıldığına dikkat edin <form onsubmit="return checkforlastname();"> Buraya return yazılması sayesinde fonksiyondan false döndüğünde form bilgilerinin sunucuya gönderilmesine engel olunur Buraya return yazılmayacak olursa, kullanıcıya mesaj gösterilecektir ancak form bilgileri buna rağmen sunucuya gönderilecektir

73 Form Doğrulama Metin Alanları (4/6) Daha kullanıcı dostu bir web sayfası oluşturabilmek için, focus metodu kullanılarak imleç doldurulması gereken alana götürülebilir function checkforlastname() { if (document.getelementbyid("lastnamefield").value.length === 0) { } alert("please enter your last name"); document.getelementbyid("lastnamefield").focus(); return false; }

74 Form Doğrulama Metin Alanları (5/6) document.getelementid metodunun birden fazla kullanımı kodu gereksiz yere uzattığından bu metotu sadece bir kere çalıştırmak ve elde edilen elemanı bir değişkene atıp kullanmak mümkün function checkforlastname() { var targetfield = document.getelementbyid("lastnamefield"); if (targetfield.value.length === 0) { alert("please enter your last name"); targetfield.focus(); return false; } }

75 Form Doğrulama Metin Alanları (6/6) Kullanıcı dostu sayfa oluşturmak için, doldurulması gereken alanın arka plan rengini sarı yapmak da mümkün var targetfield = document.getelementbyid("lastnamefield"); if (targetfield.value.length === 0) { } alert("please enter your last name"); targetfield.focus(); targetfield.style.background = "yellow"; return false; targetfield.style.background = "white";

76 Form Doğrulama Drop-down (1/4) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return checkforselection();"> <select id="states"> <option value="" selected="selected">select A STATE</option> <option value="al">alabama</option> <option value="ak">alaska</option> </select> <input type="submit" value="submit Form"> </form>

77 Form Doğrulama Drop-down (2/4) Daha önceki örneğe benzer şekilde, formun submit butonuna tıklandığında aşağıdaki checkforselection metodu çağırılacaktır function checkforselection() { if (document.getelementbyid("states").selectedindex === 0) { } } alert("please select a state. ") ; return false;

78 Form Doğrulama Drop-down (3/4) selectedindex in sıfır olması, kullanıcının herhangi bir seçim yapmadığını göstermektedir Bu durumda kullanıcıdan bir seçim yapması istenmekte ve form bilgilerinin sunucuya gönderilmesi önlenmektedir Bir sonraki slaytta fonksiyon iki şekilde değiştirilmektedir: 1. Kontrol edilecek form elemanın ID si parametre olarak gönderilmektedir. Bu sayede fonksiyon farklı formlar üzerinde de çalışabilecektir 2. İlgili form elemanı bir değişkene atanmakta ve bu değişken üzerinden kullanılmaktadır

79 Form Doğrulama Drop-down (4/4) function checkforselection(selecid) { var target = document.getelementbyid(selecid); if (target.selectedindex === 0) { } } alert("please select a state. ") ; return false; Bu durumda fonksiyon, form içerisinden aşağıdaki gibi çağırılmalıdır <form onsubmit="return checkforselection('states');">

80 Form Doğrulama Radio Button (1/2) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return validateradios();"> </form> <input type="radio" name="r1" value="cat"> Cat<br> <input type="radio" name="r1" value="bat"> Bat<br> <input type="radio" name="r1" value="hat"> Hat<br> <input type="submit" value="submit Form">

81 Form Doğrulama Radio Button (2/2) Daha önceki örneğe benzer şekilde, formun submit butonuna tıklandığında aşağıdaki validateradios metodu çağırılacaktır function validateradios() { var radios = document.getelementsbyname("r1"); for (var i = 0; i < radios.length; i++) if (radios[i].checked) return true; } alert("please check one. ") ; return false;

82 Form Doğrulama Posta Kodları (1/5) Posta kodları 5 rakamdan oluşmaktadır HTML ile kullanıcının maksimum 5 karakter girmesi zorlanabilir Ancak, 5 karakterden az girmesi veya rakam yerine karakter girmesi durumları JavaScirpt ile kontrol edilmelidir Bir sonraki slayttaki validatezip metodunda kullanıcının posta kodu alanına 5 karakterden az girmesi kontrol edilmekte ve az girilmesi durumunda kullanıcı uyarılmakta ve form bilgisinin sunucuya gönderilmesi engellenmektedir

83 Form Doğrulama Posta Kodları (2/5) function validatezip() { } var numchars = document.getelementbyid("zip").value.length; if (numchars < 5) { } alert("please enter a 5-digit code."); return false;

84 Form Doğrulama Posta Kodları (3/5) Kullanıcının sadece rakam girmesini sağlamak için ise validatezip metodunu güncellemeliyiz Sonraki iki slaytta validatezip metodunun göncellenmiş hali bulunmakta Eklenen kod parçası, girilen her bir karakterin sayı olup olmadığını kontrol etmekte Bu amaçla her bir karakter sayıya çevirilmeye çalışılmakta ve herhangi bir karakterin sayıya çevrilememesi durumunda metot false döndürmekte

85 Form Doğrulama Posta Kodları (4/5) function validatezip() { var valueentered = document.getelementbyid("zip").value; var numchars = valueentered.length; if (numchars < 5) { } alert("please enter a 5-digit code. ") ; return false;

86 Form Doğrulama Posta Kodları (5/5) for (var i = 0; i <= 4; i++) { } } var thischar = parseint(valueentered[i]) ; if (isnan(thischar)) { } alert("please enter only numbers. ") ; return false;

87 Olayların İşlenmesi (1/4) Önceki slaytlarda, satıriçi olay işleyicilerini kullanarak olayları nasıl işleyebileceğinizi gördünüz Ancak JavaScript HTML içerikten olabildiğince ayrı tutulmalıdır Satır içi olay işleyicisi aşağıdaki şekilde kullanılıyordu <input type="button" value="click" onclick="sayhello();"> Bu kullanımı bırakmak için öncelikle kırmızı ile gösterilen kod parçası aşağıdaki gibi ID ile değiştirilmelidir <input type="button" value="click" id="button1">

88 Olayların İşlenmesi (2/4) Bu durumda, olayı işleyecek JavaScript kodu aşağıdaki gibi olacaktır var b1 = document.getelementbyid("button1"); b1.onclick = sayhello; onclick özelliğinin küçük harfle yazıldığına dikkat edin Fonksiyon adından sonra parantezler kullanılmadığına dikkat edin İstenirse bu iki satır tek satır olarak ifade edilebilir document.getelementbyid("button1").onclick = sayhello;

89 Olayların İşlenmesi (3/4) İlgili JavaScript fonksiyonun yazımında bir değişiklik olmamaktadır function sayhello() { } alert("hi there. "); Kullanıcı bir resmin üzerine geldiğinde resmin başka bir resimle değiştirilmesi aşağıdaki şekilde gerçekleştirilebilir var targetimg = document.getelementbyid("i12"); targetimg.onmouseover = swappic;

90 Olayların İşlenmesi (4/4) Bir formdaki adresinin gönderilmeden önce kontrol edilmesi ve adresinin doğru formatta girilmemesi durumunda form bilgilerinin sunucuya gönderilmemesi aşağıdaki şekilde gerçekleştirilebilir var frm = document. getelementbyid("form5") ; frm.onsubmit = val ;

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1 Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

JAVASCRIPT JAVASCRIPT DİLİ

JAVASCRIPT JAVASCRIPT DİLİ JAVASCRIPT JAVASCRIPT DİLİ Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim

Detaylı

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM

Detaylı

MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ

MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ Versiyon: 1.0.4 URL Adresi http://merchant.mobilepax.com/services/product.aspx Gönderilen XML Yapısı MobilePaxProduct fonksiyonu buton bilgisi oluşturulacak ürünün

Detaylı

DIV KAVRAMI