JavaScript ile İstediğimiz Link Yapılarını Bulma

Merhaba, Javascript ile tanımlayacağımız linkleri html sayfasında bulup kaç tane olduğunu alert komutu ile yazdıracağız. Bu fonksiyon bazılarımızın arayıp bulamadığı bir fonksiyon. Kolay görülse de aslında birçoğumuz bu fonksiyonu bilmiyoruz.

İlk önce her html sayfamızda olduğu gibi java komutlarını kullanmak için tagları arasına java dosyamızı çağırıyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Java fonksiyonları arasına yazıldığı için yukarıdaki gibi yine aynı yere yazıyoruz.
Aağıdaki kodumuzda say adında yeni bir fonksiyon oluşturduk ve jNesne adında yeni bir değişken oluşturup a href link yapıları içinde atknuludag . com adlı url yapısını aramak için böyle bir fonksiyon yazdık.

<script type="text/javascript">
function say(){
  var jNesne=$("a[ href$='.atknuludag.com']");
  alert("Toplam Seçilen Öğe Sayısı : " + jNesne.length);
  }
</script>

Body tagları arasına da aşağıdaki html kodlarımızı yazıyoruz 🙂

<a href="http://info.atknuludag.com">1. Link</a><br>
<a href="http://www.atknuludag.com">2. Link</a><br>
<a href="http://www.google.com">3. Link</a><br>
<input type="button" value="Say" onClick="say();"/>

Yukarıda gördüğünüz gibi atknuludag ve info.atknuludag adlı iki link yapısı var. Say butonuna bastığımızda bize rakamla iki değeri dönecektir. Yazdığımız bu fonksiyonunuz sub-domainin içindeki link yapısını da gördüğünü anlamış bulunmaktayız.

Aşağıda da html sayfasının kaynak kodları bulunmaktadır 🙂

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title></title>

<script type="text/javascript">
function say(){
  var jNesne=$("a[ href$='.javakulubu.com']");
  alert("Toplam Seçilen Öğe Sayısı : " + jNesne.length);
  }
</script>


</head>
<body>
<a href="http://info.javakulubu.com">1. Link</a><br>
<a href="http://www.javakulubu.com">2. Link</a><br>
<a href="http://www.pusula.com">3. Link</a><br>
<input type="button" value="Say" onClick="say();"/>

</body>
</html>

Umarım yararlı olmuştur 🙂 Bir daha ki dersimizde görüşmek üzere 🙂


1 Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.