Web Programlama. JavaScript (2)

Transkript

1 Web Programlama JavaScript (2)

2 Şu Anki Gün ve Zamanı Elde Etmek (1/4)

3 Ş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

4 Ş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

5 Şu Anki Gün ve Zamanı Elde Etmek (4/4)

6 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, :25:00") ;

7 Gün ve Zamanı Değiştirmek

8 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

9 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) ;

10 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) ;

11 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

12 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 < ) { ordertot = merchtot + 5; } else { ordertot = merchtot (. 03 * (merchtot - 50) ); } } return ordertot;

13 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; }

14 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! "); }

15 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! ") ;

16 While Döngüleri for (var i = 0; i <= 3; i++) { alert(i) ; } *************************************************************** var i = 0; while (i <= 3) { alert(i) ; i++; }

17 Do-while Döngüleri var i = 0; while (i <= 3) { alert(i) ; i++; } *************************************************************** var i = 0; do { alert(i) ; i++; } while (i <= 3) ;

18 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

19 JavaScript Kodunun HTML Sayfası İçerisine Yerleştirilmesi (2/2) <script> </script> function sayhi() { alert("hello world! ") ; } function saybye() { alert("buh-bye! ") ; }

20 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

21 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"; } }

22 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. */

23 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

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

25 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>

26 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>

27 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>

28 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!');">

29 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' ">

30 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>

31 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>

32 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>

33 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' ">

34 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

35 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 <br> <input type="text" size="30" onfocus="this.style.backgroundcolor='yellow';">

36 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 <br> <input type="text" size="30" onfocus="this.style.backgroundcolor='yellow';" onblur="this.style.backgroundcolor='white';">

37 Form Bileşenlerinin Değerlerinin Okunması (1/5) girişi için bir metin giriş kutusu olan aşağıdaki gibi bir formunuz olduğunu varsayın <form> </form> <input type="text"> <input type="submit" value="submit">

38 Form Bileşenlerinin Değerlerinin Okunması (2/5) 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 adresi girmemişse form bilgilerinin web sunucusuna göndermeyip, kullanıcıyı adresi girmesi için uyaralım

39 Form Bileşenlerinin Değerlerinin Okunması (3/5) Bunu gerçekleştirebilmek için öncelikle adresinin girileceği metin giriş kutusuna bir id vermeliyiz <form> </form> <input type="text" id=" "> <input type="submit" value="submit">

40 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(' ');"> </form> <input type="text" id=" "> <input type="submit" value="submit"> checkaddress fonksiyonuna parametre olarak metin giriş kutusunun id sinin gönderildiğine dikkat edin

41 Form Bileşenlerinin Değerlerinin Okunması (5/5) 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(" address required."); }

42 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> </form> ZIP: <br> <input type="text" id="zip" onblur="fillcity();"><br> City: <br> <input type="text" id="city">

43 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; }

44 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

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

46 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

47 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;

48 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

49 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;

50 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;

51 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"...

52 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";

53 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";

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

55 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

56 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

57 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;

58 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

59 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

60 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";

61 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

62 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;

63 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";

64 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");

65 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

66 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

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

68 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");

69 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?

70 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

71 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";