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

chapter 1 – memulai belajar javascript

1
Degananda.com -

Perkembangan javascript pada tahun 2015 hingga saat ini sangat pesat. Banyak sekali framework yang lahir dan dibangun dengan javascript baik untuk frontend ataupun backend. Contoh paling populer saat ini adalah : react, angular dan vue. Namun, sebelum kita menggunakan framework-framework tersebut alangkah lebih baiknya untuk mempelajari dasar dari javascript itu sendiri agar lebih mendalami javascript sehingga kita dapat menggunakan framework apapun karena kita menguasai dasar dari javascript itu sendiri.

1. Selayang pandang

Javascript adalah salah satu komponen yang sangat penting dalam sebuah website disamping html  dan css. Interaksi antar komponen(html) ataupun antara komponen(html) dengan user dapat dikita handle menggunakan javascript misalkan saat user mengarahkan mousenya ke suatu element html maka elemen lainnya akan muncul layaknya pada suatu dropdown menu. Tanpa javascript, ux (user experience) tidak dapat dicapai secara maksimal sehingga penting untuk mempelajari javascript. Berbeda dengan php yang berjalan pada server(server side) , javascript berjalan pada browser dari user. Namun, user dapat menonaktifkkan javascript dibrowser mereka, jika itu terjadi maka javascript tidak dapat dijalankan. Tetapi jangan khawatir kita dapat “memaksa” user untuk mengkatifkan javascript mereka , jika javascript tidak aktif maka user tidak dapat melihat konten website yang kita miliki.

  1. HTML -> Markup langauge content -> untuk menuliskan konten
  2. CSS -> Style sheet language -> presentation / styling konten
  3. Javascript -> Bahasa pemrograman -> untuk behavior / interaksi

Karena javascript berjalan pada browser user maka javascript yang dijalankan antar browser menjadi berbeda. Layaknya css yang berbeda-beda perilakunnya di masing-masing browser. Contohnya internet explorer dan firefox menjalankan fungsi dari javascript berbeda-beda. Hal ini membuat kita sebagai developer javascript harus selalu up to date terhadap teknologi javascript pada browser saat ini agar kode javascript yang kita tulis dapat berjalan disemua browser

pada gambar diatas merupakan gambaran perbedaan fungsi javascript yang dapat dilakukan dimasing-masing browser. Contohnya IE 11 tidak dapat melakukan syntax for of loops, namun pada edge 14 dapat menjalankan for of loop meski tidak sempurna dengan Score (7/9).  Sangat tricky namun ini adalah kenyataan dari menjalankan javascript pada browser. Oleh karena itu, sebisa mungkin kita gunakan syntax javascript yang kompitabel dengan kebanyakan browser.

1.1 Javascript sebagai scripting language

javascript berjalan dalam browser. Sehingga , sebagai scripting langauge javascript memiliki keterbatasan jika dibandingkan dengan bahasa pemrograman lain seperti c / c++ yang bukan merupakan scripting language dan tidak berjalan dibrowser , keterbatasan itu diantarannya adalah :

  1. javascript tidak dapat mengakses localfile
  2. javascript tidak dapat secara langsung mengakses database (membutuhkan webservice yang akan diakses dengan menggunakan http).
  3. tidak dapat mengkases hardware (seperti usb, dan lain-lain)

2. Sejarah javascript dan ecmascript

Tahun Perkembangan
1985 brendan elch membuat javascript saat itu ia bekerja pada netscape yang pada saat itu(javascript) diberi nama mocha. Namun setelah empat bulan mocha(javascript) dibuat , mocha berganti nama menjadi livescript.
1995 Netscape mengakuisisi trademark dari “livescript” dan mengubah namannya menjadi “javascript”.
antara 1996 – 1997 netscape sebagai pemegang trademark dari javascript membawa javascript ke “ecma standart organisation” untuk menyesuaikan dengan standar dari Ecmascript. Ecmascript sendiri adalah scripting language spesification yang mengatur tentang standar yang harus ada pada suatu script seperti javascript(netspace), actionscript ataupun jscript(microsoft). Sehingga pada tahun ini javascript telah mengikuti standar dari ECMAscript.
1997 Javascript menjadi sangat populer dalam implementasi dari ECMAscript.
1997 ECMAscript versi pertama dirilis
June 1998 ECMAscript versi 2 di rilis, pada versi ini standar dilakukan berdasarkan pada ISO/IEC 16262
December 1999 ECMAscript versi 3 tilis, beberapa fitur yang ditambahkan diantarannya adalah :

  1. regular expression(regex)
  2. meingkatkan kemampuan string handling
  3. control statement
  4. try+catch+exception handling
Unknown date ECMAscript versi 4 tidak rilis dan langsung loncat menuju versi lima dengan alasan politik dan bisnis.
Desember 2009 ECMAscript versi 5 di rilis. Beberapa fitur yang ditambahkan pada versi ini diantarannya :

  1. Support JSON
  2. getter dan setter
  3. Reflection
Juni 2011 ECMAscript versi 5.1 di rilis. Merubah standar menjadi ISO/IEC 16262:2011 (awalnya : ISO/IEC 16262)
Juni 2015 ECMAscript versi 6 dirilis. Versi yang digunakan dikebanyakan browser saat ini. Beberapa fitur utamannya adalah :

  1. Class dan Module
  2. Iterator
  3. For/ of Loop
  4. Arrow function
  5. collections
  6. Promise

karena fitur diataslah yang menyebabkan banyak framework frontend seperti react , angular dan vue dapat digunakan untuk membuat aplikasi yang komplex.

Juni 2016 ECMAScript versi 7 dirilis

dan yang paling penting adalah :

Kebanyakan browser saat ini menggunakan ES6 atau ECMAScript versi 6
atau juga dapat disebut sebagai ECMAScript2015. dengan kata lain
bahwa ES6 = Javascript.

sehingga syntax javascript yang kita gunakan akan lebih banyak mengacu pada ES6.

3. Mulai koding

Sebelum memulai melakukan coding javascript terdapat beberapa tools atau komponen yang telah terinstall pada sistem operasi diantarannya yakni :

  1. Browser
    kami merekomendasikan untuk menggunakan firefox ataupun google chrome versi terbaru. Sangat tidak dianjurkan menggunakan internet explorer karena banyak sekali syntax yang tidak kompitable dan versi javascript yang out of date.
  2. Html Inspector
    Pada ulasan ini kami menggunakan firefox developer edition, didalamnya telah tersedia html inspector sehingga sangat mudah dalam proses debugging. Chrome juga telah memiliki html inspector bawaan, namun jika browser anda belum terdapat html inspector maka kami merekomendasikan firebug.
  3. Editor
    gunakan editor kesayangan anda. Pada ulasan ini kami menggunakan visual studio code dari microsoft.

selain tools diatas, pastikan anda telah sedikit familiar dengan html(hypertext markup langauge). Namun, jika belum familiar alangkah lebih baiknya untuk mempelajarinnya terlebih dahulu. Tidak perlu sampai mahir(html), pastikan telah mengenai syntax-syntax dasar html seperti : div, input, span, class, style, form dan cara memanggil resource external seperti js / css. Dalam ulasan ini akan mengkombinasikan html dan javascript untuk mempelajari javascript itu sendiri karena tanpa html maka kita tidak dapat memanfaatkan javascript secara maksimal. hakikat dari javascript sendiri adalah membuat website menjadi interaktif dengan cara membuat interaksi antara user, html elemen, dan browser.

4. Hello world

untuk memulai melakukan coding javascript, buatlah sebuah file html yang memanggil satu file javascript. Panggil file javascript ini pada sebelum </body> , alasannya sederhana untuk meningkatkan performa karena javascript diload paling ahir sehingga ui dapat muncul terlebih dahulu/DOM diload terlebih dahulu. Namun untuk beberapa kasus seperti angular , memanggil file javascript dilakukan sebelum <body> (biasannya di <head>), sehingga tergantung dari kasusnya.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script type="text/javascript" src="./app.js">
</body>
</html>

kemudian gunakan fungsi console.log

console.log('hello world');

buka pada browser dan inspect element lalu masuk pada tab “console” , kami menggunakan microsoft visual studio code, maka akan muncul hello world pada console.

done ~ , itulah intro mengenai javascript. Setelah ulasan ini akan dibahas mendalam mengenai javascript dengan standar ecmascript 2o15 atau dikenal sebagai ES6.