lifelong learner — urip iku urup, currently working on accenture.

chapter 2 – javascript basic structure

0
Degananda.com -

Javascript sebagai scripting langauge yang berjalan pada browser memiliki struktur yang berbeda dengan bahasa pemrograman yang lain. Pada ulasan ini akan dibahas mengenai struktur dari javascript. Sebelum anda mengikuti ulasan ini lebih baik melihat ulasan sebelumnya mengenai pengenalan  dan sejarah javascript di : https://degananda.com/2017/06/01/chapter-1-memulai-belajar-javascript/ goal dari ulasan ini adalah :

  1. Membedakan antara interpreted dengan compiled / kompiler dan interpreter
  2. Basic structure dari javascript.
  3. Memahami aturan penulisan dari javascript.

1.interpreted vs compiled

1.1 Compiled

Compiler ini berfungsi untuk mengkompilasi seluruh source secara penuh. Contoh bahasa pemrograman yang dilakukan kompilasi adalah C dan C++. Proses kompilasi ini akan mengubah kode dari programmer ke bahasa mesin. Proses kompilasi akan memakan waktu yang lama dalam proses analisa kode dan error hanya akan muncul ketika proses kompilasi telah selesai. Hal ini menyebabkan bahasa pemrograman yang dilakukan kompilasi jauh lebih susah untuk didebug jika dibandingkan dengan bahasa yang dilakukan interpretasi seperti phyton, javascript, dan lain-lain.

ilustrasi diatas menunjukan bahwa kode C akan di compile menjadi biner dan kemudian baru bisa dijalankan oleh sistem operasi. Bahasa C ini memiliki performa yang sangat cepat karena mendekati bahasa mesin. Sedangkan bahasa yang tidak perlu di compile / melalui proses interpretasi(interpretter) memiliki performa yang kurang baik jika dibandingkan dengan bahasa C yang memiliki low level language pada high level language.

1.2 interpretted

interpreter akan mengkonversi baris demi baris dari sebuah kode (contohnya javascript). Sistem operasi tidak dapat menjalankan program yang ditulis dengan high level langauge karena sistem operasi hanya mengerti nol dan satu.  Kode yang ditulis programming ini akan dilakukan interpretasi oleh perangkat lunak. Karena proses perubahan dari kode menjadi bahasa mesin (0/1) dilakukan oleh perangkat lunak/software performannya tidak secepat bahasa pemrograman yang melalui proses kompilasi. Karena proses tersebut melalui perantara. Contoh bahasa pemrograman yang dijalankan melalui proses interpretasi adalah : php, phyton , javascript dan lain-lain

Pada javascript interpreter terletak pada browser. Sehingga kode javascript yang kita tuliskan akan secara langsung diterjemahkan dan dijalankan pada browser. Berikut ini adalah ilustrasi bagaimana javascript berjalan pada browser

javascript terletak didalam browser (client side) sehingga user tidak perlu melakukan kontak dengan server seperti php dan phyton. Sehingga secara performa javascript lebih cepat dibandingkan dengan phyton dan php. Oleh karena itu saat ini banyak sekali SPA(single page application) yang dibangun dengan menggunakan javascript karena performannya yang cepat.  Contoh diatas ketika kita menuliskan kode alert(‘hello world’) maka line tersebut akan di interpretasikan menjadi bahasa mesin oleh browser(karena interpreter berada dibrowser itu sendiri) dan secara langsung akan ditampilkan di browser. Intinnya javascript akan langsung di eksekusi oleh browser tanpa dilakukan proses kompilasi.

1.3 Perbedaan

Perbedaan antara compiler dan interpretter adalah

Interpretter Compiler
Transalasi / konversi dilakukan line by line atau baris demi baris translasi / konversi dilakukan secara keseluruhan source code
proses analisa kode sebelum translasi memakan waktu yang cepat , namun waktu execution timenya lebih lambat proses execution time sangat cepat namun, analisa source code sangat lama.
debugging mudah. karena error akan muncul saat menemukan line yg error debugging susah karena error akan muncul setelah seluruh source code dilakukan translasi.
Contohnya : php, phyton, javascript contohnya : C / C++
tidak mengenerate object code, tidak memakan memori saat melakukan translasi. Tidak membutuhkan linking dari object. membutuhkan memori yang besar karena mengenerate object code. Oleh karena itu android studio membutuhkan memory yang sangat besar karena java dilakukan kompilasi.

2. penulisan javascript

2.1 javascript : case sensitive

perbedaan antara huruf “A” dan “a” adalah sangat berbeda!!. Contohnya pada source dibawah ini.

alert('halo nama saya dega'); // benar
Alert('halo nama saya dega'); // salah

alert dan Alert dimata interpretter javascript adalah berbeda. oleh karena itu berhati-hati dalam menuliskan fungsi karena case sensitive. Gunakan Intellij untuk mengurangi potensi kesalahan penulisan nama fungsi. Berbeda dengan html yang memiliki penulisan case insensitive. <p> dan <P> di nilai sama dimata browser. Saran kami adalah selalu gunakan huruf kecil dalam menuliskan kode html. sementara untuk javascript gunakan intellij karena itu akan sangat membantu dalam menuliskan fungsi dari javascript ataupun object tertentu.

<p> text ini akan tetap muncul 😀 </p

2.2 Statement

javascript setiap linanya akan dipisahkan dengan menggunakan semi colon(“;”) sehingga kita dapat menuliskan kode javascript kita secara horizontal.

    
    <div class="main">

     Tulisan ini akan tetap muncul dibrowser / DOM karena tag html adalah case insensitive. </P>

    </div>

namun penulisan seperti ini sangat tidak direkomendasikan karena akan menjadikan sangat susah untuk dibaca. Jangan memberikan semicolon (“;”) pada ahir dari statement atau line.

2.3 Javascript : white space insensitive pada statement

saat menuliskan statement javascript kita tidak perlu takut akan kesalahan terlalu banyak whitespace. Karena satu atau dua atau bahkan tanpa karakter whitespace akan dianggap sama.

alert('nama saya dega');
alert    ('nama saya dega')    ;

kedua statement tersebut akan tetap dieksekusi meski perbedaan pada penggunaan karakter whitespacenya. NAMUN! whitespace akan sangat berpengaruh pada suatu expression atau pada double quotes(“”). Contohnya adalah seperti dibawah ini :

alert('nama saya dega');
alert('nama saya dega');

pada browser ketika menjalankan kode diatas akan menghasilkan dua alert yang berbeda.

2.4 Memberikan komentar

terkadang kita membutuhkan menuliskan komen untuk menandai sesuatu atau untuk menuliskan cara kerja statement/kode kita. Pada javascript untuk menuliskan komen dimulai dengan tanda “//”. Kita bisa menggunakannya diatas kode ataupun disamping kode itu. Komentar ini tidak akan ditranslasi oleh interpreter javascript sehingga kita bebas menuliskan apapun disitu tanpa takut untuk menimbulkan error.

alert('nama saya dega'); // ini komentar disamping statement /kode
// ini juga komentar diatas statment 
alert('nama saya  dega');

2.4.1 Multiple komentar

ketika menuliskan komentar yang panjang (lebih dari satu line) sangat direkomendasikan dengan menggunakan syntax dibawah ini :

alert('nama saya dega'); // ini komentar disamping statement /kode
// ini juga komentar diatas statment 
alert('nama      saya       dega');
/*
ini
komentar
yang
sangat
panjang....
*/

komentar tersebut diawali dengan “/*” (tanpa tanda petik) dan di ahiri oleh “*/” (tanpa tanda petik).

3. Execution order

javascript akan dieksekusi dari line paling atas kemudian menuju line dibawahnya sampai ahir dari source code. contohnya adalah :

console.log('satu');
console.log('dua');
console.log('tiga');
console.log('empat');
console.log('lima');

hasil pada brwoser(console) adalah :

kode akan dieksekusi secara berurutan dari atas paling bawah.