Web Programlama

Web Programlama
JavaScript (3)
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
Döküman Nesne Modeli (2/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
Döküman Nesne Modeli (4/4)
DOM: Üst ve Alt Nodlar
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
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?
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("email");
• 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");
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
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;
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;
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;
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;
Çöp Nodlar ve nodeType (1/4)
Çöp Nodlar ve nodeType (2/4)
Çö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;
Çö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
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:
http://www.w3schools.com/jsref/prop_node_nodetype.asp
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;
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;
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
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;
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)
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") {
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)
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>
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
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>
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;
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;
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";
}}
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++; }
}
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">
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
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">
Ö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;
Ö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;
Ö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;
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
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");
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");
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);
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
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);
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
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);
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);
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);
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
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
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
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
• http://www.alanim.com/products/page12.html#bottom
• "#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
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
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;
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;
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
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
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);
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
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
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);
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";
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") ;
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();
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");
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
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
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);
Form Doğrulama – Metin Alanları (1/6)
• Aşağıdaki gibi bir formumuz olduğunu varsayalım
<form onSubmit="return checkForLastName();">
Please enter your last name. <br>
<input type="text" id="lastNameField">
<input type="submit" value="Submit Form">
</form>
• Kullanıcı butonuna "submit" tıkladığında checkForLastName
fonksiyonu çağırılacaktır
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
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
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; }
}
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;
}}
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";
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>&nbsp; &nbsp;
<input type="submit" value="Submit Form">
</form>
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;
}
}
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
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');">
Form Doğrulama – Radio Button (1/2)
Aşağıdaki gibi bir formumuz olduğunu varsayalım
<form onSubmit="return validateRadios();">
<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">
</form>
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;
}
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
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;
}
}
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
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;
}
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;
}
}}
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">
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;
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;
Olayların İşlenmesi (4/4)
Bir formdaki email adresinin gönderilmeden önce kontrol edilmesi ve
email adresinin doğru formatta girilmemesi durumunda form bilgilerinin
sunucuya gönderilmemesi aşağıdaki şekilde gerçekleştirilebilir
var emailFrm = document. getElementById("form5") ;
emailFrm.onsubmit = valEmail;