Fungsi dan Penggunaan CDATA pada XML/Blogger

Pada awalnya saya tidak terlalu memperhatikan penuilsan tag script terutama pada Blogger, beberapa kali saya mencoba melakukan kustomisasi template hanya mengikuti cara penulisan tag script yang lazim digunakan yaitu penggunaan CDATA.

Akhir-akhir ini baru muncul pertanyaan, kenapa dalam penulisan tag script ini berbeda?

Berikut ini sudah saya ringkas hasil penelusuran saya tentang CDATA pada website Stackoverflow.

Apa itu CDATA?

CDATA atau Character Data merupakan sebuah tag XMl yang menginformasikan 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 CSS dan Javascript, dan biasanya terletak di awal kode. Contohnya seperti kode Javascript berikut:

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('contextmenu', function(e){
    if (e.target.nodeName === 'IMG') {
        e.preventDefault();}
}, false);
//]]>
</script>

Jenis-jenis Penulisan CDATA

Jika Kalian pengguna Blogger, pasti akan sering menemukan perbedaan dalam menuliskan tag Javascript. Ada 2 jenis penulisan CDATA pada Blogger.

Pertama

Dibuka dengan //<![CDATA[
Ditutup dengan //]]>

<script type='text/javascript'>
//<![CDATA[
------script disini------
//]]>
</script>

Kedua

Dibuka dengan /*<![CDATA[*/
Ditutup dengan /*]]>*/

<script type='text/javascript'>
/*<![CDATA[*/
------script disini------
/*]]>*/
</script>

Lalu apakah ada perbedaan antara keduanya?

Jawabanya adalah Tidak!. Jika diperhatikan perbedaan penulisan CDATA diatas terletak pada // ( Single line comment ) dan /* ( Multi-line Comment ). Keduanya adalah Syntax Comment pada Javascript.

Perbedaan kedua syntax Comment diatas akan mempengaruhi cara penulisan script Kita.

Mana yang Lebih Baik Digunakan?

Keduanya memiliki fungsi yang sama. Seperti yang sudah saya singgung diatas, dua jenis syntax Comment tersebut memiliki perilaku yang berbeda, maka secara pribadi untuk mencari aman, maka saya lebih memilih menggunakan /*<![CDATA[*/.

Tidak hanya Javascript, CSS juga sering menggunakan CDATA. Salah satu contoh pada Blogger adalah tag <b:skin/> yang ada di template Kalian. 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 jelaskan diatas, CDATA membuat script menjadi tidak diparse oleh browser, sehingga script masih berbentuk seperti awalnya. Kode yang paling sering diparse adalah:

• > menjadi >
• < menjadi <
• ' menjadi "
• ' menjadi '
• & menjadi &
• dll...

Berikut perbandingan kode sebelum dan setelah diparse:

Sebelum di parse

document.addEventListener('contextmenu', function(e){
    if (e.target.nodeName === 'IMG') {
        e.preventDefault();}
}, false)

Setelah di parse

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();}
}, false)

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

Parse ataupun tidak sebenarnya tidak memiliki pengaruh terhadap fungsi 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 dan Kode yang ditulis pada Widget.

Pada Blogger sendiri, kode HTML dan Javascript akan otomatis diparse setelah perubahan template disimpan. Kecuali jika kode tersebut berada didalam tag CDATA.

Penutup

Sekian penjelasan singkat mengenai Fungsi dan Penggunaan CDATA pada XML/Blogger. Semoga bisa sedikit bermanfaat dan menambah pengetahuan Kita semua.

Referensi artikel :
https://blog.kodejarwo.com/2018/03/fungsi-sebenarnya-dari-cdata-pada-kode.html