Tagjs

Javascript DOM Element İşlemleri

Bir önceki yazımda bahsetmiş olduğum Javascript DOM Fonksiyonları yazısının devamı niteliğinde Javascript DOM Element İşlemleri yazısını yazmaya karar verdim.

Bu yazımda bahsedeceğim fonksiyonlardan bahsetmek gerekirse

  • ID’ye göre element bulma
  • Etiket adına göre element bulma
  • Class özelliğine göre element bulma
  • CSS Selector ile element bulma

ID’ye göre Element Bulma

ID’ye göre element bulma işleminden aslında Javascript ile DOM İşlemleri konusunda bahsetmiştim ama hine de bahsetmek gerekiyor.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p id=”demo”>Aydın Can Altun</p>

<script>

var demo = document.getElementById(“demo”);

</script>

</body>

</html>


Bu örnekte kullandığımız getElementById fonksiyonunun girilen değere sahip elementi geri döndürür. Bu fonksiyonunun genel bir kullanımından bahsetmek gerekirse.

var myElement = document.getElementById(id);

Etiket Adına göre Element Bulma

Etiket adına göre element bulma işleminde kullanacağımız fonksiyon getElementsByTagName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p>Etiket Adına göre Element Bulma</p>

<p>Aydın Can Altun</p>

<p>getElementsByTagName</p>

<script>

var pElements = document.getElementsByTagName(“p”);

</script>

</body>

</html>

Bu örnekte de gördüğünüz gibi getElementsByTagName() fonksiyonunu kullanarak etiket adına göre elementleri çekebiliriz. Bu fonksiyon bize bir dizi döndürür ve o sayfadaki tüm elementleri belirtilen etikete göre yukarıdan aşağıya doğru sıralar. Bu fonksiyonun basit kullanımından bahsetmek gerekirse

var elements = document.getElementsByTagName(tagName);

Class Özelliğine göre Element Bulma

Class özelliğine göre element bulma işleminde kullanıcağımız fonksiyon getElementsByClassName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<div id=”demo”>

<h5 class=”aydin”>Class Özelliğine göre Element Bulma</h5>

<p class=”aydin”>Aydın Can Altun</p>

</div>

<script>

var demo = document.getElementById(“demo”);

var className = demo.getElementsByClassName(“aydin”);

</script>

</body>

</html>

Bu örnekte iki adet fonksiyon kullandık. Önce getElementById fonksiyonu ile id değeri demo olan elemente ulaşıyoruz daha sonra getElementByClassName fonksiyonu ile id değeri ile ulaştığımızdan elementin içinde class özelliği aydin olan elementleri bir dizi halinde geri döndürmesini sağlıyoruz.

var className = document.getElementsByClassName(className);

CSS Selector ile Element Bulma

Eğer bazı CSS özelliklerine göre kısıtlayacak şekilde element bulma işlemi yapmak istiyorsak CSS Selector kullanmamız gerekiyor. Burada querySelectorAll fonksiyonunu kullanacağız.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p class=”demo”>CSS Selector ile Element Bulma</p>

<p class=”demo”>Aydın Can Altun</p>

<p>Deneme</p>

<script>

var selector = document.querySelectorAll(“p.demo”);

</script>

</body>

</html>

Yukarıda ki örnekte 3 adet p elementimiz mevcut ve querySelectorAll fonksiyonu ile class özelliği demo olan tüm p elementlerini seçmesini sağladık. querySelectorAll fonksiyonu bize class özelliği demo olan tüm p elementlerini bize bir dizi olarak göndericek yani

console.log(selector[0]);

console.log(selector[1]);

Bu kodları yazarsak önce CSS Selector ile Element Bulma yazısını içinde barındıran p elementini bize döndürürken daha sonra Aydın Can Altun yazanı döndürecektir ama eğer bu dizinin içinde başka bir eleman var mı diye bakarsak hata ile karşılaşırız. Çünkü class özelliği demo olan 2 adet p elementimiz bulunmaktadır yaptığımız sorguda içinde Deneme yazan p elementi dahil olmayacaktır.

Bu yazımda bir önceki Javascript yazım olan Javascript DOM Fonksiyonlarının ilk kısmı olan HTML Elementleri Bulma kısmını anlatmış oldum. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayınız.

Javascript Akordiyon Uygulaması Yapma

Bu yazımda Javascript öğrenirken yapmış olduğum bir uygulama olan Akordiyon Uygulamasının nasıl yapıldığını anlatacağım.

Öncelikle ihtiyacımız olan şeyler bir kaç adet Başlık(Heading) headinglerin altında birer div ve o divin içinde ise p elementi olduğunu varsayalım.

Örnek HTML Kodumuz

<!doctype html>

<html lang=”tr”>

<head>…</head>

<body>

<style>

#section1, #section2, #section3{

display: none;

}

</style>

<div id=”accordion”>

<h2>Başlık 1</h2>

<div id=”section1″>

<p>…</p>

</div>

<h2>Başlık 2</h2>

<div id=”section2″>

<p>…</p>

</div>

</div>

</body>

şeklinde olmalıdır ve Javascript kodlarımız ise

var id = document.querySelector(“#accordion“);

var basliklar = id.getElementsByTagName(“h2“);

for(var i = 0; i < titles.length; i++){

basliklar[i].addEventListener(‘click’,function(){

var icerik = this.nextSibling.nextSibling;

if(icerik.style.display != “block”){

content.style.display = “block”;

}else{

content.style.display = “none”;

}

});

şeklinde olmalıdır şimdi bu Javascript kodlarını açıklamak gerekirse.

var id = document.querySelector(“#accordion”);

var basliklar = id.getElementsByTagName(“h2”);

kodu sitemizdeki id özelliği “accordion” olan html elementini seçiyoruz.

kodu ise daha demin seçtiğimiz html elementinin içindeki “h2” elemanlarını seçiyor. 

Misal bizim yazmış olduğumuz HTML Kodlarında 2 adet “h2” başlığı olduğu için 2 adet eleman seçicektir.

for(var i = 0; i < basliklar.length; i++)

kısmında ise i adından bir değişken tanımlayıp basliklar dizisinin uzunluğundan düşük olduğu sürece i artmasını sağlıyor.

basliklar[i].addEventListener(“click”,fonksiyon);

kodunda ise basliklar dizisinin elemanlarına “click” event’ini bekliyor eğer tıklarsak fonksiyon’u uygulamaya sokuyor.

function(){

var icerik = this.nextSibling.nextSibling();

if(icerik.style.display != “block”){

icerik.style.display = “block”;

}else{

icerik.style.display = “none”;

}

bu fonksiyonda ise öncelikle icerik adında bir değişken tanımladık ve h2 elementinden 2 element geçti yani “div id=section” dan p elementine ulaştı

Daha sonra ise bu icerik değişkeninin display stil’inin değerini inceledi ve buna göre koşul belirleyerek tıklandığında

  • Yazı gözükmüyorsa yazıyı gösterir
  • Yazı gözüküyorsa yazıyı gizler

Yukarıdaki yazımda basit bir Akordiyon uygulaması yazdık.

Web’in Temel Öğeleri

Bu yazımızda Web’in Temel Öğelerinin neler olduğunu, bunların ne işe yaradıklarını ve birbirleri arasındaki ilişkiden bahsedeceğim.

Web’in Temel Öğelerini listeleyecek olursak,

  • HTML
  • CSS
  • Javascript

olmak üzere 3 adet temel öğe olduğundan bahsedebiliriz.

HTML Nedir ?

HTML, web sitelerinin tasarlanmasında kullanılan bir işaretleme dilidir. Bir programlama dili değildir. Kullandığımız tarayıcılar HTML kodlarını işleyerek bize Web sayfalarını sunar.

CSS Nedir ?

CSS, aslında bizim HTML ile hazırladığımız Web Sayfalarını görsel ve renklendirme gibi işlemleri yapmamızı sağlar. Yani HTML ile hazırladığımız siteyi görselleştirir ve daha anlaşılır bir hale getirir.

Javascript Nedir ?

Bir internet adresinin tarayıcınızda girip “ENTER” tuşuna bastığınız anda o sayfanın kaynak kodları, web server ve yorumlayıcılardan milisaniyeler içerisinde gelir ve bize sabit bir görüntü olarak çıktı verir. İşte Javascript burada devreye girer ve bir ikonun bir anda küçülmesi bir butonun bir anda yok olması ve ya 1 link’e tıkladığımızda yeni bir sayfanın açılması yerine aynı sayfada o işlemleri yapabilmemizi bir elementi başka bir yere anlık taşıyabilmemizi sağlar.

HTML, CSS ve Javascript’in Birbirleri Arasındaki İlişki

  • HTML’i bir web sayfasındaki içerik olarak düşünebiliriz.
  • CSS ise bize bir sunum verir yani yazmış olduğunuz HTML kodlarının sunuma hazır hale gelmesinden CSS sorumludur.
  • Javascript ile de Web Sayfasını etkileşimle hale getirmiş oluruz.

Şimdi bunları biraz detaylandırırsak HTML ile işte başlıklar, paragraflar, fotoğraflar’ı Web sayfasına ekledik ama böyle bırakırsak ne sizin gözünüze hoş gelir ne de başka birinin hoşuna gider. İşte CSS ile bu başlığın rengi Kırmızı olsun puntosu şu olsun, paragrafın rengi gri olsun puntosu şu olsun, fotoğrafın boyutu axa piksel olsun bir sarı renk çerçevesi olsun diyebiliyoruz ama böyle bırakır isek her şey sürekli olarak yerinde sabit olarak durur herhangi bir farklılık yapmak isterse kullanıcı yapamaz işte Javascript’de bunu sağlıyor yani bir yandanda kullanıcıyıda Web Sayfasıyla bir etkileşime sokuyor ve böylece mükemmel diyebileceğimiz bir Web Sayfasını ortaya çıkartabiliyoruz.

 

Kısacası bu 3.lüyü 3 Silahşöhler olarak tanımlayabiliriz.