Ikuti kami di Blogger atau di Google News
...
Fungsi dan Penggunaan CDATA pada XML/Blogger

Fungsi dan Penggunaan CDATA pada XML/Blogger

Apa itu CDATA dan fungsinya dalam penulisan Javascript dan CSS pada XML/Blogger
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 &gt;
  • < menjadi &lt;
  • ' menjadi &quot;
  • ' menjadi &apos;
  • & menjadi &amp;
  • 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(&amp;quot;contextmenu&amp;quot;, function(e){
    if (e.target.nodeName === &amp;quot;IMG&amp;quot;) {
        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

Baca juga

Advertisement

Dare to be Different!

11 komentar

  1. Sangat bermanfaat, terima kasih
    1. Sama-sama kak, jangan lupa baca artikel yg lain ya..
  2. kenapa ganti template lagi kak???
    1. Masih sama kok kak.. belum ganti lagi, semoga ga ganti2 sih
  3. Bang buatin tutorial biar postingan di hompage dan label di template median UI vs 1.6 jadi grid 2 kolom dong bang .. please..
    1. Di dekstop ya Bang..
    2. Versi default bukanya sudah Grid 2 kolom ya kak? Pada tampilan dekstop?
    3. Default nya 3 kolom bang kalo homepage dan kalo label 4 kolom, jadinya kecil banget postingannya..
      Klo dibust 2 kolom kan gak terlalu kecil bang...
    4. Iya bang begitu permasalahannya..
      Minta tolong buatin tutorialnya ya bang untuk dekstop... Please
    5. Coba nanti saya buatkan ya kak..
    6. Iya terimakasih banyak...😊😊😊
      Ditunggu ya Bang 😊😊😊😊
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code