Web Programlama

Web Programlama
JavaScript (2)
Şu Anki Gün ve Zamanı Elde Etmek (1/4)
Şu Anki Gün ve Zamanı Elde Etmek (2/4)
• Şu anki tarih ve zaman yeni bir Date nesnesi oluşturularak aşağıdaki
gibi elde edilebilir
var rightNow = new Date();
• Date nesnesinden haftanın gününü (Pzt, Salı, Çrş gibi) elde etmek için
getDay metodu kullanılır
var theDay = rightNow. getDay() ;
• Metodddan dönen değer 0 (Pazar) ile 6 (Cmt) arasındadır
Şu Anki Gün ve Zamanı Elde Etmek (3/4)
• Dönen değeri işleyerek haftanın gününü aşağıdaki gibi yazdırabilirsiniz
var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var now = new Date() ;
var theDay = now. getDay() ;
var nameOfToday = dayNames[theDay] ;
• Date nesnesinden elde edilebilecek diğer bilgiler ve bu bilgileri elde
etmek için kullanılması gereken metodlar bir sonraki slayttaki tabloda
verilmiştir
Şu Anki Gün ve Zamanı Elde Etmek (4/4)
Belirli Bir Gün ve Zamanı Belirlemek
• İstenilen bir gün için Date nesnesi oluşturmak aşağıdaki şekilde
mümkündür
var doomsday = new Date("June 30, 2035") ;
• Eğer zaman da önemliyse, gün ve zaman birlikte aşağıdaki gibi
belirtilebilir
var d = new Date("July 21, 1983 13:25:00") ;
Gün ve Zamanı Değiştirmek
Fonksiyonlar
• JavaScript’te fonksiyon kullanımını, o anki zamanı kullanıcıya gösteren
bir fonksiyon yazarak görelim
function tellTime() {
var now = new Date();
var theHr = now. getHours();
var theMin = now. getMinutes();
alert("Current time: "+ theHr + ": " + theMin);
}
• Bu fonksiyonu çağırmak için fonksiyonun adını yazmak yeterlidir
Fonksiyonlara Parametre Gönderme (1/2)
• Kullanıcıya özel hoş geldin mesajı gösterebilen bir fonksiyon yazalım
function greetUser(greeting) {
alert(greeting);
}
• Bu fonksiyon aşağıdaki gibi çağırılır
var greeting = "Hello, there. "
greetUser(greeting) ;
Fonksiyonlara Parametre Gönderme (2/2)
• Fonksiyonlar aşağıdaki gibi birden fazla parametre alacak şekilde
tanımlanabilir
function showMessage(m, string, num) ;
alert(m + string + num) ;
}
• Bu fonksiyon aşağıdaki gibi çağırılır
var month = "March";
showMessage(month, "'s winner number is ", 23) ;
Fonksiyonlardan Değer Döndürmek (1/2)
• Bir e-ticaret sitesinde seçilen ürünlere göre kargo ve vergi dahil fatura
hesaplama özelliği eklemek istediğimizi varsayalım
• Fatura hesabında kriterlerimiz
• $50 ve $100 arası tutan ürünlerde fiyat üzerinden %3 kar ekleniyor
• Kargolama için normalde $5 alınıyor
• Ancak $100 ve üzeri alış verişlerde kargo masrafı alınmıyor
• Buna göre
• $150 tutan ürünlerin faturası $150,
• $15 tutan ürünlerin faturası $20 ve
• $70 tutan ürünlerin faturası $75.60 olur
Fonksiyonlardan Değer Döndürmek (2/2)
Ürün toplam tutarına göre faturayı hesaplayıp geri döndüren JavaScript
fonksiyonu aşağıdaki gibi olacaktır
function calcTot(merchTot) {
var orderTot;
if (merchTot >= 100) { orderTot = merchTot; }
else if (merchTot < 50. 01) { orderTot = merchTot + 5; }
else { orderTot = merchTot + 5 + (. 03 * (merchTot - 50) ); }
return orderTot;
}
Yerel ve Global Değişkenler
• Yerel değişkenler, bir fonksiyon içerisinde tanımlanan değişkenlerdir
• Sadece fonksiyon içerisinde kullanılabilirler
• Global değişkenler, ana kod içerisinde (fonksiyonlar dışında)
tanımlanmış değişkenlerdir
• Heryerde tanımlıdırlar ve kullanılabilirler
var theSum
addNumbers() ;
function addNumbers() { theSum = 2 + 2; }
Switch Yapıları (1/2)
• Pek çok koşuun olduğu if yapılarının yerine kullanılabilirler
• Aşağıdaki if yapısını ele alalım
if (dayOfWk ==="Sat" | | dayOfWk === "Sun") { alert("Whoopee!"); }
else if (dayOfWk === "Fri") { alert("TGIF! "); }
else { alert("Shoot me now! "); }
Switch Yapıları (2/2)
switch(dayOfWk) {
case "Sat": alert("Whoopee"); break;
case "Sun": alert("Whoopee"); break;
case "Fri": alert("TGIF! ") ; break;
default: alert("Shoot me now! ") ;
}
While Döngüleri
for (var i = 0; i <= 3; i++) {
alert(i) ;
}
***************************************************************
var i = 0;
while (i <= 3) {
alert(i) ;
i++;
}
Do-while Döngüleri
var i = 0;
while (i <= 3) {
alert(i) ;
i++;
}
***************************************************************
var i = 0;
do {
alert(i) ;
i++;
} while (i <= 3) ;
JavaScript Kodunun HTML Sayfası İçerisine
Yerleştirilmesi (1/2)
• Normal şartlarda JavaScript kodlarının farklı bir dosyaya
konulduktan sonra HTML sayfasından referans verilmesi daha
uygundur
• Ancak JavaScript kodları web sayfasının herhangi bir yerine veya
parça parça farklı yerlerine de yerleştirilebilir
• JavaScript kodlarını web sayfasının içerisine yerleştirmek için
<script> etiketi kullanılır
JavaScript Kodunun HTML Sayfası İçerisine
Yerleştirilmesi (2/2)
<script>
function sayHi() {
alert("Hello world! ") ;
}
function sayBye() {
alert("Buh-bye! ") ;
}
</script>
JavaScript Dosyalarına HTML Dosyasından
Referans Vermek
• JavaScript kodu, uzantısı .js olan bir dosyanın içerisine yazılarak web
sunucusuna kaydedilir (örn: whatever.js)
• Kod dosya içerisine yazılırken, <script> etiketi içerisine yazılmaz
• Ardından bu JavaScript dosyasına HTML dosyası içerisinden aşağıdaki
gibi referans verilmelidir
<script src="whatever. js"></script>
• <script> etiketinin "src" özelliğinin değeri JavaScript dosyasının
sunucudaki bağıl ya da tüm adresidir
Yorum Satırları (1/2)
// This is a comment, ignored by the browser
for (var i = 0; i<10; i++)
if (animals[i] === "bat") {
animals[i] = "cat";
}
}
Yorum Satırları (2/2)
/*
When a comment requires more than one line,
a block comment like this, with its opening
and closing tags, is the way to go.
*/
Olaylar
• İyi web sitelerinin kullanıcıya hızlıca yanıt verebilmesi (responsive)
gerekir
• Kullanıcı web sitesiyle pek çok şekilde etkileşime girebilir
•
•
•
•
•
Butona tıklayabilir
Bağlantıya tıklayabilir
Başka bir seçeneği seçebilir
Pencereyi kapatabilir
Sayfadaki belli bir öğenin üzerine gelebilir ...
• JavaScript kullanıcının isteklerine (oluşturduğu olaylara) çeşitli
şekillerde cevap verebilmektedir
Olay Denetimcisi (Event Handler)
• Kullanıcının oluşturduğu olaylara karşı br cevap oluşturan kod
parçalarına olay denetimcisi denir
• Hangi olaya nasıl cevap verileceği, olaylara atanan olay denetimcileri
ile belirlenir
• JavaScript’te olayların denetlenmesi için iki farklı yöntem vardır
• Satıriçi olay denetimi (Inline event handling)
• Komut dizisi dosyası yazımı (Scripting)
Satıriçi Olay Denetimi (1/3)
• Satıriçi olay denetiminde, olaya cevap veren JavaScript kodu HTML
kodu içine yazılmaktadır
• Aşağıdaki kod parçasında
(1) "Click" açıklaması olan bir bağlantı gösterilmekte ve
(2) bağlantıya tıklandığında kullanıcıya "Hi" mesajı gösterilmektedir
<a href="#" onClick="alert('Hi' );">Click</a>
Satıriçi Olay Denetimi (2/3)
• Uzun bir sayfada, tıklama sonrası, sayfanın başına dönmemesi için
aşağıdaki yöntem kullanılabilir
<a href="JavaScript: void(0)" onClick="alert('Hi' );">Click</a>
• onClick özelliğinin değeri olarak birden fazla komut satırı yazılabilir
<a href="JavaScript: void(0)" onClick="var greet='hi';
alert(greet);">Click</a>
Satıriçi Olay Denetimi (3/3)
• onClick özelliğinin değeri olarak kendi yazdığımız bir JavaScript
fonksiyonunu da çağırabiliriz
• Aşağıda kendi yazdığımız popup fonksiyonu gösterilmektedir
function popup(message) {
alert(message) ;
}
• Altta ise bu fonksiyon satıriçi olarak çağırılmaktadır
<a href="JavaScript: void(0)" onClick="popup('Hi' );">Click</a>
Buton ve Resim için Tıklama Olayları
• Kullanıcının HTML butonlarına tıklamasını da JavaScript kodu ile
yakalayıp işleyebiliriz
• Aşağıda, bir HTML butonu tanımlanmış ve kullanıcının bu butona
basması durumunda kullanıcıya "Hello World" mesajı gösterilmiştir
<input type="button" value="Click" onClick="alert('Hello world!');">
• Benzer şekilde, kullanıcının HTML resmine tıklaması olayı da
yakalanabilir
<img src="button-greet. png" onClick="alert('Hello world!');">
Fare Olayları (1/5)
• Fare imgesinin, sayfa üzerindeki herhangi bir HTML elemanının (örn:
resim, buton, başlık vs.) üzerine gelmesi veya bir elemanın sınırının
dışına çıkması da JavaScript tarafından yakalanabilen olaylardandır
• Bir resmin üzerine gelindiğinde, resmin başka bir resme dönüşmesi
CSS ile yapılabilir
• JavaScript ile ise, onMouseOver özelliği kullanılarak aşağıdaki gibi
yapılabilir
<img src="before-pic.jpg" onMouseover="src='after-pic.jpg' ">
Fare Olayları (2/5)
• onMouseOver olay denetimi resim dışında öğelere de uygulanabilir
• Aşağıda bir H1 başlığının üzerine gelindiğinde kullanıcıya bir mesaj
gösteren kod parçası gösterilmektedir
<h1 onMouseover="alert('Basligik ustunde');">Bir Baslik</h1>
Fare Olayları (3/5)
• CSS ile bir HTML elemanının üzerine gelindiğinde, elemanın renk
değiştirmesi sağlanabilir
• Aynı işlemin JavaScript ile gerçekleştirimi de mümkündür
<a href="index.html" onMouseover="this.style.color='green';">
Home Page</a>
Fare Olayları (4/5)
• Takip eden örnekte fare imleci paragrafın üzerine geldiğinde, expand()
fonksiyonu çağırılacak ve paragraf genişleyecektir
• Paragrafın genişlemesinin bu fonksiyonla nasıl sağlanacağı ileride
açıklanacaktır
<p id="loris" onMouseover="expand();">Mouse over for more</p>
Fare Olayları (5/5)
• Fare imgesinin bir HTML elemanının sınırından dışarı çıkması da
onMouseout özelliği ile takip edilebilir
• Aşağıdaki resim etiketiyle ilişkili resmin kapladığı alana girildiğinde
resim değişmektedir (onMouseover)
• Resim alanın dışına çıkıldığında ise, resim eski haline dönmektedir
(onMouseout)
<img src="before-pic.jpg" onMouseover="src='after-pic.jpg' "
onMouseout="src='before-pic.jpg' ">
Odak Olma ve Odaklıktan Çıkma Olayları
• HTML sayfasındaki elemanlardan bazıları odaklanılabilirdir
• Örneğin formlarda kullanılan metin giriş kutuları odaklanılabilir
bileşenlerdir
• Böyle bileşenlere tıklanıldığında, bu bileşen sayfanın odağı olur ve
kullanıcıdan bilgi girişine hazır duruma gelir
• JavaScript ile odak olma ve odaklıktan çıkma olayları takip edilebilir
Odak Olma Olayı
• Aşağıdaki kod parçası ile bir metin giriş kutusu oluşturulmaktadır
• Bu metin kutusu odak olduğunda onFocus özelliği ile bu durum tespt
edilecek ve metin giriş kutusunun arka plan rengi sarıya dönüşecektir
Email: <br> <input type="text" size="30"
onFocus="this.style.backgroundColor='yellow';">
Odaklıktan Çıkma Olayı
• Benzer şekilde onBlur özelliği kullanılarak, bir HTML öğesinin odak
olmaktan çıkması da takip edilebilir
• Biraz önce oluşturulan metin kutusunun odaklıktan çıkması
durumunda arka plan renginin yeniden beyaz olmasını sağlayan kod
parçası aşağıda verilmiştir
Email: <br> <input type="text" size="30"
onFocus="this.style.backgroundColor='yellow';"
onBlur="this.style.backgroundColor='white';">
Form Bileşenlerinin Değerlerinin Okunması
(1/5)
• Email girişi için bir metin giriş kutusu olan aşağıdaki gibi bir formunuz
olduğunu varsayın
<form>
Email: <input type="text">
<input type="submit" value="Submit">
</form>
Form Bileşenlerinin Değerlerinin Okunması
(2/5)
• Email adresinin girilmesinin zorunlu olduğunu varsayın
• Bunu sağlamak için form bilgisi web sunucusuna gönderilmeden
önce, gönderilecek değerleri JavaScript ile kontrol etmek
isteyelim
• Ve kullanıcı herhangi bir email adresi girmemişse form
bilgilerinin web sunucusuna göndermeyip, kullanıcıyı email
adresi girmesi için uyaralım
Form Bileşenlerinin Değerlerinin Okunması
(3/5)
• Bunu gerçekleştirebilmek için öncelikle email adresinin girileceği
metin giriş kutusuna bir id vermeliyiz
<form>
Email: <input type="text" id="email">
<input type="submit" value="Submit">
</form>
Form Bileşenlerinin Değerlerinin Okunması
(4/5)
• Ardından form etiketine onSubmit özelliğini ekleyerek, formun gönder
butonuna basıldığında, yazacağımız JavaScript fonksiyonuna
(checkAddress) yönlendirilmesini sağlıyoruz
<form onSubmit="checkAddress('email');">
Email: <input type="text" id="email">
<input type="submit" value="Submit">
</form>
• checkAddress fonksiyonuna parametre olarak email metin giriş
kutusunun id’sinin gönderildiğine dikkat edin
Form Bileşenlerinin Değerlerinin Okunması
(5/5)
Email adresinin girilip girilmediğini kontrol eden checkAddress
fonksiyonu aşağıda verilmiştir
function checkAddress(fieldId) {
var val = document.getElementById(fieldId).value;
if val === "") { alert("Email address required."); }
}
Sayfa Bileşenlerinin Değerinin Değiştirilmesi
(1/2)
• JavaScript ile sadece sayfa bileşenlerinin değerleri okunmamakta, aynı
zamanda bu bileşenlerin değerleri de değiştirilebilmektedir
• Aşağıda posta kodu ve şehir bilgilerinin girildiği basit bir form oluşturan
kod parçası bulunmaktadır
<form>
ZIP: <br> <input type="text" id="zip" onBlur="fillCity();"><br>
City: <br> <input type="text" id="city">
</form>
Sayfa Bileşenlerinin Değerinin Değiştirilmesi
(2/2)
Zip kodu alanı odaklıktan çıkar çıkmaz, posta koduna bakarak şehir giriş
metin kutusunu otomatik olarak dolduran fonksiyon aşağıda verilmiştir
function fillCity() {
var cityName;
var zipEntered = document.getElementById("zip").value;
switch (zipEntered) {
case "60608": cityName = "Chicago"; break;
case "68114": cityName = "Omaha"; break; }
document.getElementById("city").value = cityName; }
Paragrafın Değiştirilmesi (1/4)
• Aşağıdaki paragraf yavaş lemur (slow loris)
adlı hayvan hakkında kısa bir bilgi vermekte
Slow lorises are a group of several species
of strepsirrhine primates which make up the
genus Nycticebus. Click for more.
• "Click for more" bağlantısına tıklanıldığında
ise paragrafı genişletip hayvan hakkında daha
faza bilgi vermek istediğimizi varsayalım
Paragrafın Değiştirilmesi (2/4)
Bağlantıya tıklandığında paragrafın aşağıdaki şekle dönmesi isteniyor
Slow lorises are a group of several species of strepsirrhine
primates which make up the genus Nycticebus. They have a round
head, narrow snout, large eyes, and a variety of distinctive
coloration patterns that are species-dependent. The hands and feet
of slow lorises have several adaptations that give them a pincer-like
grip and enable them to grasp branches for long periods of time.
Slow lorises have a toxic bite, a rare trait among mammals.
Paragrafın Değiştirilmesi (3/4)
• Bu amacı gerçekleştiren kod parçası aşağıda verilmiştir
<p id="slowLoris"> Slow lorises are a group of several species of
strepsirrhine primates which make up the genus Nycticebus.
<a href="javascript:void(0);" onClick="expandLoris();">
<em>Click for more. </em></a></p>
• expandLoris() fonksiyonu slowLoris id’sine sahip paragrafı değiştiren
fonksiyondur ve bir sonraki slaytta gösterilecektir
Paragrafın Değiştirilmesi (4/4)
function expandLoris() {
var expandedParagraph = "Slow lorises are a group of several
species of trepsirrhine primates which make up the genus
Nycticebus. They have a round head, narrow snout, large eyes,
and a variety of distinctive coloration patterns that are speciesdependent...";
document.getElementById("slowLoris").innerHTML =
expandedParagraph;
}
Div İçerisine Liste Ekleme (1/2)
• Hemen herşey, HTML etiketleri dahil, bu şekilde web sayfasına eklenebilir
• Sayfanızda "lorisList" id’li, içi boş bir <div> etiketi olduğunu varsayalım
<div id="lorisList"> </div>
• Bir sonraki slaytta verilen fonksiyon bu <div> etiketinin içerisine basit bir
liste ekleyecek
• Böylece sayfaya yeni bir liste dinamik olarak eklenmiş olur
Div İçerisine Liste Ekleme (2/2)
function placeAList() {
var listToPlace = "<ol><li>Slow loris</li><li>Fast loris</li>
<li>Just-right loris</li></ol>";
document.getElementById("lorisList").innerHTML = listToPlace;
}
getElementById(element id).innerHTML
• document.getElementById(element id).innerHTML metodu HTML
sayfasında bulunan bilgileri okumak ve değiştirmek için de kullanılabilir
• Örneğin sayfada "content" id’li herhangi bir etiketiniz varsa, bu etiket
içinde olanları bir JavaScript fonksiyonu aşağıdaki gibi elde edebilirsiniz
• Bu eleman bir paragrafsa ve "<em>Hello, Sailor!</em> değerini
içeriyorsa, bu değer whatsThere değişkenine atanacaktır
function peekAtContent() {
var whatsThere =
document.getElementById("content"). innerHTML;
}
Resimleri Gizlemek (1/2)
• Bir web sayfasında çeşitli resimler gösterildiğini varsayın
• Sayfa ziyaretçilerinin bazı resimleri beğenmemesi durumunda onları
gizleyebilmesi isteniyor olsun
• Bir resmi gizlemek için kullanıcının resme tıklaması gereksin
• Problemi basitleştirmek için tek bir resim olduğunu varsayalım
• Öncelikle resme aşağıdaki gibi bir id vermek gerekir
<img src="Blobfish.jpg" id="ugly"...
Resimleri Gizlemek (2/2)
• Ardından resme bir olay denetimcisi atamalıyız
<img src="blobfish.jpg" id="ugly" onClick="makeInvisible();">
• Resmi görünmez yapmak için bir CSS sınıfı tanımlamalıyız
.hidden { display: none; }
• Son olarak makeInvisible() fonksiyoumuzu yazmalıyız
function makeInvisible() {
document.getElementById("ugly").className = "hidden";
}
Yeni CSS Sınıfı Eklemek
• Önceki örnekte bir HTML sayfası elemanın (resim) CSS sınıfını
değiştirerek bu elemanı gizledik
• Bazen HTML elemanının CSS sınfını tamamen değiştirmek yerine, ona
yeni bir sınıf daha eklemek gerekebilir
• Bunu da aşağıdaki JavaScript kodunu temel alarak kolayca
yapabilirsiniz
function makeBig() {
document.getElementById("p1").className += " big";
}
Resimleri Parametrik Olarak Değiştirmek (1/3)
• Daha önceki slaytlarda bir resmin üzerine gelindiğinde, satıriçi
olay denetleyicisi kullanarak, başka bir resimle nasıl değiştirildiği
gösterilmişti
• Şimdi ise, resim değişikliği bir fonksiyon kullanılarak
gerçekleştirilecek
• Fonksiyonumuz orijinal resmin id’sini ve yeni resmin adını
parametre olarak alacak
function swapPic(eId, newPic)
Resimleri Parametrik Olarak Değiştirmek (2/3)
• Bu işlem için gereken HTML kod parçası aşağıdadır
<img src="before-pic.jpg" id="before"
onMouseover="swapPic(id, 'after-pic.jpg' ); ">
• Resmin id’sini direk yazmamıza gerek kalmadığını, onun yerine
"id" özelliğini değişken gibi kullandığımıza dikkat edin
Resimleri Parametrik Olarak Değiştirmek (3/3)
• swapPic JavaScript fonksiyonu ise aşağıda gösterilmektedir
function swapPic(eId, newPic) {
document.getElementById(eId).src = newPic;
}
• "img" etiketinin "src" özelliğine JavaScript’ten erişebildiğimize
dikkat edin
Bir Bağlantıya Ait URL’in Elde Edilmesi
• document.getElementById(element id) metodu başka HTML
elemanlarının özelliklerine de erişmeyi sağlayabilir
• Aşağıdaki JavaScript fonksiyonunda, bir bağlantı etiketine ait URL,
"href" özelliği kullanılarak elde edilmekte ve bir değişkeninin içerisine
atılmaktadır
function getAddress() {
var link = document.getElementById("link1") ;
var address = link.href;
}
Stil Değişiklikleri Yapmak (1/5)
• Daha önceki slaytlarda, bir HTML elemanının stilini, elemana ait stil
sınıfını değiştirerek aşağıdaki şekilde değiştirebildiğimiz gösterilmişti
document.getElementById("p1").className += " big";
• Şimdi ise JavaScript ile stil özelliklerini ayrı ayrı değiştirmenin yolu
gösterilecektir
Stil Değişiklikleri Yapmak (2/5)
• Aşağıda bir paragrafın font boyutunu değiştiren JavaScript kodu
verilmiştir
document.getElementById("p1").style.fontSize = "2em";
• Bu kodun var olan stili tamamen silmediğine, sadece font boyutu
özelliğini değiştirdiğine dikkat edin
Stil Değişiklikleri Yapmak (3/5)
• JavaScript ile başka stil özelliklerine erişim örnekleri aşağıda verilmiştir
• Bir resmi sola dayamak için:
document.getElementById("pic99").style.cssFloat = "left";
• Bir HTML elemanını görünmez yapmak için:
document.getElementById("div9").style.visibility = "hidden";
Stil Değişiklikleri Yapmak (4/5)
• Bir HTML elemanının sol ve sağ marjinlerini 10 piksel yapmak için:
document.getElementById("pic99").style.margin =
"0 10px 0 10px;";
• Daha önce bahsedildiği gibi, aynı erişim şekilleri özelliklerin
değerlerini almak için de kullanılabilir
• Ancak dikkat edilmesi gereken bazı noktalar bulunmaktadır
Stil Değişiklikleri Yapmak (5/5)
• Aşağıdaki satır bir resmin marjin değerlerini almakta kullanılabilir:
var m = document.getElementById("mainPic").style.margin;
• Ancak bu yöntem, sadece satıriçi değer olarak atanmış marjinleri alabilir
• CSS yoluyla atanmış değerleri almak için aşağıdaki yöntem kullanılabilir
var m = document.getComputedStyle("mainPic").margin;
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(1/6)
• Bir sayfadaki tüm paragraflardaki metnin yazı tipi boyutunu JavaScript
kullanarak iki katına çıkarmak istediğinizi varsayın
• Şu ana kadar öğrendiklerinizle bunu yapmak isterseniz
1. tüm paragraflara birer id vermeniz,
2. bu id’leri program içerisinde bir dizide tutmanız ve
3. bir döngü ile id’leri kullanarak her bir paragrafın özelliğini aşağıdaki gibi
değiştirmeniz gerekir
getElementById(the id).style.fontSize = "2em";
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(2/6)
• Ancak, JavaScript ile belirli bir tipteki elemanlarının tümünü dinamik
bir şekilde elde etmek mümkündür
• Aşağıdaki kod satırı sayfadaki tüm paragrafları bulup par dizisinin içine
atmaktadır
var par = document.getElementsByTagName("p");
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(3/6)
• Sayfada sırasıyla aşağıdaki paragrafların olduğunu varsayalım:
<p>This bed is too small. </p>
<p>This bed is too big. </p>
<p>This bed is just right. </p>
• Bu durumda par[0] içerisinde "<p>This bed is too small. </p>" değeri
olacaktır
• par[1] ve par[2] içerisinde de sırasıyla diğer paragraflar (paragraf
etiketleri ile birlikte) olacaktır
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(4/6)
• Paragraf etiketinin (<p>) içindeki metne erişmek için innerHTML
özelliği aşağıdaki gibi kullanılabilir
var textInMiddleParagraph = par[1].innerHTML;
• Bu satır textInMiddleParagraph değişkeninin içerisine "This bed is too
small. " değerini atayacaktır
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(5/6)
• Tüm paragraflara bir font tipi atayan kod parçası aşağıda verilmiştir
for (var i = 0; i < par.length; i++) {
par[i].style. fontFamily = "Verdana, Geneva, sans-serif";
}
• Diğer tiplerdeki HTML elemanları da benzer şekilde elde edilebilir
• Sayfadaki tüm resimleri bir dizi içerisinde almak için:
var pics = document.getElementsByTagName("img");
Sayfa İçinde Belirli Tipteki Elemanları Bulmak
(6/6)
• Sayfadaki tüm div elemanlarını bir dizi içerisinde almak için:
var pics = document.getElementsByTagName("div");
• Sayfadaki tüm sırasız listeleri bir dizi içerisinde almak için:
var ulists = document.getElementsByTagName("ul");
Sayfanın Alt Elemanlarında Arama Yapmak
(1/3)
• Bir önceki konuda sayfada bulunan belli bir tipteki (örn: <p>)
elemanları bir dizi olarak elde etmeyi öğrendiniz
• Peki aynı tipteki tüm elemanları değilde sadece belli bir alt
kümesindeki elemanlara ihtiyaç duyarsanız?
• Örneğin sadece belli bir "div" elemanın altında olan
paragrafları elde etmek istersek?
Sayfanın Alt Elemanlarında Arama Yapmak
(2/3)
• Bu div elemanının id’sinin "rules" olduğunu varsayarsak, bu işlemi
aşağıdaki şekilde geröekleştirebiliriz
var e = document.getElementByID("rules") ;
var paragraphs = e.getElementsByTagName("p") ;
• getElementsByTagName metodunun "document" üzerinde değilde
"e" üzerinden çağırıldığına dikkat edin
Sayfanın Alt Elemanlarında Arama Yapmak
(3/3)
• Bir web sayfasında, beyaz arka planlı bir tablonuz olduğunu varsayın
• Kullanıcı sayfada bulunan bir butona tıkladığında tablodaki hücrelerin
arka plan rengini pembe yapan kod parçası aşağıda verilmiştir
var t = document. getElementById("table9") ;
var cells = t. getElementsByTagName("td") ;
for (var i = 0; i < cells. length; i++) {
cells[i] . style. backgroundColor = "pink";
}