Javascript'te Az bilinenler - 1

Bu derste JavaScript'te az bilinen bazı hususlara değineceğim.

Bu derste JavaScript'te az bilinen bazı hususlara değineceğim.

Webmasterlar'ın JavaScript kütüphanelerinin çoğunu ezberlemek zorunda olduğu hepimizin bildiği bir gerçek.

Ancak bilinmeyen, daha doğrusu az bilinen şey şu ki; bazen yeni bir bakış açısı sağlayabilecek, bazen kod satırlarını kısaltabilecek ve bazen de yeni şeyler oluşturmamızı sağlayabilecek kütüphaneler sayesinde JavaScript'i çok daha verimli bir şekilde kullanabiliriz.

Nedir bu kütüphaneler?

[*] "Document" kütüphanesi altında "createElement()" fonksiyonu: Bunu biliyor olma olasılığınız yüksek ancak yinede anlatayım: Create Element Fonksiyonu, Türkçeleştirirseniz zaten anlayabileceğiniz üzere document, yani dosya üzerinde bir element yaratmanızı sağlar. Bir argümanı vardır:


document.createElement("tag ismi") // "tag ismi" kısmına yazılan string değerimize karşılık gelen tag oluşturulacaktır.



var element  = document.createElement("a"); // değişkenimize atadık

element.href = "index.aspx";

element.text = "Anasayfa";

element.style = "color:white;text-decoration:none;"; // gördüğünüz gibi elementi bir  değişkene atadıktan sonra  elementin özelliklerini o değişkenin birer nesnesiymiş gibi yazdık ve yazdıklarımız hepsi normalde "<a></a>" tagına ait olan özellikler. (Sadece text a tagı içersinde bulunmaz text içersinde yazı bulunduran bir tagın yazısını belirlemek için kullanılır)



İyi güzel oluşturduk elementimizi de, bu element sayfada neden gözükmedi?

Cevap: Element'in sayfada gözükebilir olması için sayfa içerisine ekli olması gerekir. Şu an sadece JavaScript'in geçici belleğinde oluşturulmuş bir element olan "element" nesnemizi sayfamıza ekliyoruz. Bunun için document.body kütüphanesi altında "appendChild()" fonksiyonumuzu kullanacağız. (Body altında olmasının sebebi gayet açık, çünkü sayfada görünür olması için sayfanın beden dediğimiz body kısmına eklenmelidir. Tabi aşağıda göstereceğim üzere daha önceden Body'e eklenmiş bir tag üzerine de entegre edilebilir).

[*] document.body.appendChild(element); Gördüğümüz gibi argümana bir değişken ismi yazdık. Bunun sebebi o değişkenimizin artık bizim için bir HTML Control dediğimiz html kontrolü, bir node olmasıdır. Bu sayede tüm özellikleriyle birlikte o node sayfaya eklenir.

appendChild'i anlamanın en kolay yolu şudur :


<html> - Parent ( Ebeveyn )

    <head> - Child ( Çocuk ) ( HTML Tagına Aittir )

        <title> - Child ( HEAD tagının çocuğudur )(Parent'i HEAD değerini verir)

        </title>

    </head>

    <body> - Child (  HTML tagına aittir ) ( Parent : HTML değerini verir)

        <a href=""></a> -- Child ( Body Tagına Aittir ) (Parent BODY değerini verir)

    </body>

</html>




Bizim normal olarak yazdığımız tüm html tagları JavaScript'te bu ilişkilendirme içersinde görülürler. Yani ilk yazdığımız tag ebeven altına yazdığımız her tag child(çocuk) olarak algılanır. Append'in anlamı da iliştirmek demektir. Yani Türkçesiyle, komutun ismi Çocukİliştir() olur.

Yukarıda da bahsettiğim üzre appendChild komutu sadece body tagının direkt olarak üzerine eklenmek zorunda değildir. Daha önceden body üzerine eklenmiş bir tag üzerine de eklenebilir. Örneğin:

document.getElementById("eklenenElement").appendChild(element);

Ancak üzerine eklenecek olan element child barındarabilen bir tür element olmalıdır. Örneğin:


<div>

        <a></a> >> Child

    </div>



    <table> 

        <tr> >> Child (Table'ın çocuğu)

            <td> >> Child (Tr'nin Çocuğu)

                <a></a> >> Child ( Td'nin Çocuğu )

            </td>

        </tr>

    </table>



Not: Çocuğu nereye eklerseniz ekleyin her zaman ebeveyninin diğer çocuklarının en altına yerleşir.

Şimdi bir örnek yapalım:

Mesela bir anket sitesi yapıyorsunuz varsayalım. Kullanıcılarınız anket oluşturabilme yetkisine sahipler. Bir tane soru input'unuz var. Oraya anketin sorusu yazılıyor. Ancak siz 5 tane cevap hakkı koymuşsunuz, ama kullanıcıya 10 tane lazım. O zaman yaşasın JavaScript! !


<script language="javascript">

    //10 taneden fazlada ekleyemesin istiyorsunuz diyelim



    var cevapsayisi  = 5 ; // 5 olmasının sebebi zaten siz önceden 5 tane koymuşsunuz ona ek olarak saymaya başlayacağız.



    function ekle()

{

    if(cevapsayisi < 10)

    {

        var el = document.createElement("input");

        el.type = "text";

        el.id = "cevap" + cevapsayisi;



document.getElementById("cevaplar").appendChild(el);

cevapsayisi += 1; // bir ekledik    

    }

        

}    



</script>





<div id="cevaplar">

    <input type="text" id="cevap1" /><br />

<input type="text" id="cevap2" /><br />

<input type="text" id="cevap3" /><br />

<input type="text" id="cevap4" /><br />

<input type="text" id="cevap5" /><br />



</div>

<input type="button" onclick="ekle()" value="Ekle"/>



Bu dersimiz de bu kadar yeter. Yoruldum yazı yazmaktan. :)

Gelecek dersimizde removeChild() fonksiyonu ve attributes nesnesini inceleyeceğiz.

Kolay gelsin.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Burda DOM ile ilgili bilgiler aktarmışsınız bize.DOM bilen birisi bunları rahatlıkla bilir.Tabi bilmeyenler mutlaka vardır.Teşekkürler.

Yukarı Git