Fungsi CDATA

    Anda para programmer pasti sudah tidak asing lagi dengan yang namanya CDATA. Terlebih anda seorang web designer, khususnya yang bersahabat baik dengan bahasa Cascading Style Sheet (CSS) dan JavaScript (JS).

    Bagi yang sudah tau, mohon maaf ya... Artikel ini hanya saya tujukan untuk yang belum tau...

    CDATA, merupakan sebuah perintah kepada browser komputer agar script tersebut tidak diparse atau diurai. Dengan kata lain, dengan pemberian XML ini pada suatu script, maka script tersebut tidak akan diurai oleh browser.

    CDATA sering kali kita jumpai pada saat mengotak-atik CSS dan JS, dan biasanya terletak di awal kode. Contohnya seperti kode JS berikut:

    <script type='text/javascript'>
    //<![CDATA[
    function myFunction() {
        var x = document.getElementById("drop");
        var y = document.getElementById("body");
        var z = document.getElementById("nav");
        if (x.checked) {
            y.style.overflow = "hidden";
            z.style.height = "100%";
        } else {
            y.style.overflow = "auto";
            z.style.height = "0px";
        }
    }
    //]]>
    </script>
    
    
    Diawali dengan //<![CDATA[ dan diakhiri dengan //]]>

    Tidak hanya Javascript, CSS juga sering dipakaikan. Salah satu contohnya di Blogger adalah tag <b:skin/> yang ada di template anda. Dengan menggunakan CDATA tersebut, kode tidak akan diparse, sehingga masih dalam keadaan bentuk aslinya.

    Kegunaan dari CDATA pada CSS dan Javascript


    Seperti yang sudah saya katakan pada pengertian umum diatas, CDATA membuat script menjadi tidak diparse oleh browser, sehingga script masih berbentuk seperti awalnya. Kode yang paling sering diparse adalah:

    • > menjadi &gt;
    • < menjadi &lt;
    • " menjadi &quot;
    • ' menjadi &apos;
    • dll...


    Berikut perbandingan kode yang belum diparse dan setelah diparse:

    Sebelum di parse
    (function printMsg() {
        var node = document.getElementById("copyright-kodejarwo");
        node.innerHTML = "<a href='https://blog.kodejarwo.com'>Blog Kode Jarwo</a>";
    })();

    Setelah di parse
    (function printMsg() {
        var node = document.getElementById(&quot;copyright-kodejarwo&quot;);
        node.innerHTML = &quot;<a href='https://blog.kodejarwo.com'>Blog Kode Jarwo</a>&quot;;
    })();


    Kedua kode diatas memiliki fungsi yang sama, walaupun yang satu sudah diparse dan yang satunya lagi tidak.

    Parse atau tidak itu sebenarnya tidak memiliki fungsi apa-apa terhadap script. Tapi, dalam beberapa kasus, beberapa script memang harus diparse agar template bisa di save, salah satu contohnya adalah saat menempatkan kode Adsense di dalam template.