Beberapa Hal Menarik Seputar Javascript

Saya cuma ingin berbagi pengalaman, mohon maaf kalau tulisan ini tidak penting.

1. Komentar HTML didalam tag script

Saya tahu maksudnya setelah membaca di w3schools.com :D, ternyata tujuan tanda komentar HTML diantara tag script adalah agar browser yang tidak mendukung script (javascript/vbscript) akan mengabaikan teks yang ada diantara tag script tersebut.

Kalau belum berikut ini contoh scriptnya

<script type="text/javascript">
<!--
alert('Hello world');
// -->
</script>

Pada script tersebut terlihat ada tanda komentar HTML didalam tag script yang diawali dengan <!– dan diakhiri dengan // –>.
Misal suatu browser membuka suatu halaman yang mengandung script tersebut dan browser tersebut tidak mendukung script, jika tidak diberi komentar HTML diantara tag script, maka seluruh kode script tersebut akan dianggap sebagai teks biasa dan ditampilkan apa adanya.
Lain halnya jika memasukkan komentar HTML, maka apapun yang ada diantara <!– dan // –> akan dianggap sebagai komentar dan tidak akan ditampilkan.
Sebagian besar browser modern tahu kalau komentar HTML diantara tag script bertujuan untuk mengantisipasi browser yang tidak mendukung script dan akan tetap mengeksekusi script tersebut sekalipun diantara komentar HTML.

2. Deklarasi Array
Pernah memakai script Google Analytics? ada yang unik lho 😀

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XXXXXXXXX']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Lihat potongan kode berikut

var _gaq = _gaq || [];

Kalau yang belum tahu memang sedikit membingungkan, ternyata maksud dari kode tersebut adalah untuk mendeklarasikan sebuah Array.
Saya sendiri juga belum pernah membaca tutorial Javascript tentang mendeklarasikan sebuah array dengan cara seperti itu, tapi setelah dicoba ternyata itu memang array.
Coba perlakukan variabel tersebut sebagai array seperti contoh dibawah ini dan hasilnya itu memang array.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XXXXXXXXX']);
_gaq.push(['_trackPageview']);

alert('Jumlah elemen array ada '+_gaq.length);
for (var i=0;i<_gaq.length;i++) {
    alert('Nilai dari elemen ke-'+(i+1)+' : '+_gaq[i]);
}
</script>

3. Deklarasi Objek
Saya melihat potongan script ini dari YouTube, (buka youtube.com kemudian lihat source codenya/Ctrl+U).
Perhatikan potongan kode dibawah ini

<script>
var yt = yt || {};yt.timing = yt.timing || {};yt.timing.tick = function(label, opt_time) {var timer = yt.timing['timer'] || {};if(opt_time) {timer[label] = opt_time;}else {timer[label] = new Date().getTime();}yt.timing['timer'] = timer;};yt.timing.info = function(label, value) {var info_args = yt.timing['info_args'] || {};info_args[label] = value;yt.timing['info_args'] = info_args;};yt.timing.tick('start');yt.timing.info('li','0');try {yt.timing['srt'] = window.gtbExternal && window.gtbExternal.pageT() ||window.external && window.external.pageT;} catch(e) {}if (window.chrome && window.chrome.csi) {yt.timing['srt'] = Math.floor(window.chrome.csi().pageT);}if (window.msPerformance && window.msPerformance.timing) {yt.timing['srt'] = window.msPerformance.timing.responseStart - window.msPerformance.timing.navigationStart;}
</script>

Kalau diperhatikan pada bagian var yt = yt || {} mirip dengan kode yang ada di Google Analytics.
Perbedaannya adalah kalau Google Analytics mendeklarasikan sebuah array, sedangkan yang ini mendeklarasikan objek.
Untuk membuktikannya, coba script dibawah ini.

<script type="text/javascript">
var yt = yt || {};
yt.nama = "YouTube"; //menambahkan properti pada objek yt
yt.sumber = function() { alert('http://www.youtube.com/'); } //menambahkan function pada objek yt

alert(typeof yt); //menjelaskan tipe dari yt
alert(yt.nama); //menampilkan nilai properti pada objek yt
yt.sumber(); //memanggil function yang ada pada objek yt
</script>

4. Immediately Invoked Function Expression
Rasa penasaran dimulai saat melihat script dari Facebook Like Button  seperti dibawah ini 😀

<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=000000000000000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Sebenarnya kode javascript diatas adalah sebuah anonymous function dengan beberapa parameter, untuk yang belum tahu tentang anonymous function silahkan baca disini.
Perbedaannya dengan contoh kode yang saya tulis pada artikel sebelumnya ada di bagian parameter.

Sebagai gambaran, kode yang saya tulis biasanya seperti ini

(function coba() {
...
}());

jika dengan parameter akan menjadi seperti ini

(function coba(a, b, c) {
...
}(a, b, c));

Kesimpulan dari script Facebook Like Button diatas adalah membuat sebuah anonymous function.
Kemudian function tersebut langsung dipanggil dengan memasukkan parameter d, s, id dengan nilai document, ‘script’, ‘facebook-jssdk’.

d = document (Object)
s = ‘script’ (String)
id = ‘facebook-jssdk’ (String)

Saya tahu teknik tersebut namanya “Immediately Invoked Function Expression” setelah membaca dokumentasi Plugins/Authoring dari jQuery.

Semoga bermanfaat 🙂

Referensi :
-W3Schools
–Google Analytics
–Facebook Like Button
–YouTube
–jQuery
-Otodidak 😀