Modul

Pemrograman Berorientasi Objek

(Object Oriented Programming)
Menggunakan Javascript

Disusun Oleh Firmansyah Arsyad, ST., M.Sc

 Modul 1. Pengantar Javascript

Pada awal 1990-an, internet mulai berkembang pesat, dan halaman-halaman web

awalnya dibuat menggunakan HTML (HyperText Markup Language) untuk menampilkan

konten statis. Namun, kebutuhan untuk membuat halaman web yang interaktif mulai

muncul, seperti memvalidasi form tanpa harus me-reload halaman atau membuat konten
dinamis berdasarkan interaksi pengguna.

Brendan Eich, seorang programmer di Netscape Communications Corporation,

mengembangkan bahasa scripting yang dapat dijalankan di browser untuk memenuhi

kebutuhan tersebut. Bahasa ini awalnya dibuat dalam waktu sepuluh hari pada bulan Mei

1995 dan disebut Mocha, kemudian diubah namanya menjadi LiveScript, dan akhirnya
diluncurkan sebagai JavaScript.

*Javascript" pada awalnya diciptakan untuk “membuat halaman web menjadi hidup”.

Program yang ada dalam bahasa ini disebut script. Script ini bisa ditulis langsung ke dalam

kode HTML dari sebuah web dan berjalan otomatis saat halaman dimuat.

Script tersedia dan dieksekusi sebagai sebuah teks biasa. Script tidak membutuhkan

persiapan khusus atau kompilasi untuk dijalankan.

Dalam hal ini, JavaScript sangat berbeda dari bahasa lain yang disebut Java.
 Modul 2. Dasar-Dasar JavaScript

Tag “script”
Program JavaScript bisa disisipkan ke dalam bagian mana saja dari dokumen HTML
dengan bantuan tag <script>.

Contoh :

Struktur kode
Hal pertama yang kita akan pelajari ialah membangun blok kode.

Pernyataan
Pernyataan ialah konsep dan perintah syntax yang mejalankan aksi. Kita sudah melihat
satu pernyataan, alert('Hello, world!'), yang menampilkan pesan “Hello, world!”.
Kita bisa memiliki sebanyak apapun pernyataan dalam kode kita. Pernyataan bisa dipisah
menggunakan titik koma.

Misalnya, di sini kita memecah “Hello World” menjadi dua alert:

Titik koma
Titik koma bisa dibuang dalam banyak kasus jika ada jeda baris. Contoh :

Di sini, JavaScript menginterpretasi jeda baris sebagai titik koma “implisit”. Ini

disebut penyisipan titik koma otomatis.

Dalam banyak kasus, sebuah baris baru mengimplikasikan titik koma. Tapi “dalam

banyak kasus” tak “selalu” begitu!

Ada kasus ketika baris baru tidak berarti titik koma. Misalnya:

Output dari kode itu adalah 6 karena JavaScript tak menyisipkan titik koma di sini.
Sudah jelas sekali bahwa barisnya selesai dengan tanda plus "+", sehingga itu menjadi

“expresi tak lengkap”, jadi tak butuh titik koma. Dan dalam hal ini memang seperti itu.

Tapi ada situasi di mana JavaScript “gagal” mengasumsi titik koma di mana itu
benar-benar dibutuhkan.

Contoh Kasus
Jika kamu penasaran untuk melihat contoh konkrit dari galat ini, cek kode ini:

Untuk sekarang tidak usah memikirkan makna kurung siku [] dan forEach. Kita akan

mempelajarinya nanti. Untuk sekarang, ingat hasil kode tersebut: yaitu 1 lalu 2. Sekarang,
ayo kita tambahkan alert sebelum kodenya tanpa diikuti titik koma:

Sekarang jika kita menjalankan kodenya, hanya alert pertama yang tampil dan kemudian
gagal!. Tapi semua akan baik-baik saja jika kita menambahkan titik koma setelah alert.

Sebaiknya selalu gunakan titik koma di antara pernyataan meskipun pernyataan itu
dipisahkan oleh baris baru.

Ini aturan yang diterima secara luas oleh komunitas. Harap diingat sekali lagi bahwa bisa
saja menanggalkan titik koma di banyak kesempatan. Tapi akan lebih aman, terutama

untuk pemula.

Komentar

Seiring berjalannya waktu, program menjadi lebih rumit dan semakin banyak baris-baris
kodenya, sehingga dibutuhkan komen yang menjelaskan kode apa itu dan kenapa.
Komen bisa ditaruh di mana saja dari script. Dan tidak berpengaruh ke eksekusi karena

engine mengabaikan komentar. Satu-baris komentar dapat ditulis dengan dua karakter
slash //.

Sisa barisnya adalah komen. Ia bisa memenuhi satu baris sendiri atau mengikuti

pernyataan.

Contoh Seperti di sini:

Komen multiline bermula dengan garis miring dan bintang /* dan berakhir dengan

bintang dan garis miring */. Seperti ini:

Konten komen diabaikan, jadi jika menaruh kode di dalam /* … */, ia tidak akan dieksekusi.

Kadang sangat berguna jika kita bisa menonaktifkan sementara sebagian kode:

Gunakan hotkey!
Di banyak Text editor, kode bisa diberikan komentar dengan menekan
hotkey Ctrl+/ untuk komentar baris-tunggal dan Ctrl+Shift+/ – untuk komentar
multibaris. Untuk Mac, bisa menggunakan hotkey Cmd .
Variabel
Variabel ialah “kontainer” yang digunakan untuk menyimpan data. Kita bisa memakainya

untuk menyimpan data tanaman, barang, pengunjung, mahasiswa, nilai, pembayaran dan
data lain.

Untuk membuat variabel di JavaScript, bisa menggunakan keyword let, const dan var.

Kode atau Pernyataan di bawah ini membuat (dengan kata lain: declares or defines)

variabel dengan nama “message”:

Kini, kita bisa menaruh beberapa data ke dalam variabel dengan menggunakan operator
samadengan “=”

String “Hello” disimpan ke memori yang terasosiasi dengan variabel. Kita bisa mengakses
string tersebut menggunakan nama variabel:

Supaya ringkas, kita bisa mengkombinasi deklarasi variabel dan penetapan ke baris

tunggal:
Kita juga bisa mendeklarasi variabel ganda dalam satu baris:

Kelihatannya pendek, tapi itu tidak disarankan. Demi kemudahan dibaca, tolong gunakan
bari tunggal per variabel.

Varian multibaris agak panjang, tapi lebih mudah dibaca:

Kita juga bisa mendefinisikan variabel ganda dalam gaya multibaris. Contohnya:

Analogy kehidupan nyata

Kita bisa dengan mudah memahami konsep “variabel” jika kita membayangkannya
sebagai “box” untuk menyimpan data, dengan stiker nama yang unik.

Misalnya, variabel message bisa dibayangkan sebagai box berlabel "message" dengan
nilai "Hello!" di dalamnya:

Kita bisa menaruh nilai apapun di dalam box.

Kita juga bisa mengubahnya sebanyak yang kita mau:

Ketika nilainya berubah, data lama dihapus dari variable, ilustrasinya seperti berikut:

Kita juga bisa mendeklarasi dua variabel dan mengkopi data dari satu ke yang lainnya.

!!!Mendeklarasikan variabel dua kali akan menciptakan error. Sebuah variabel seharusnya

di deklarasikan hanya sekali. Mendeklarasikan variabel berkali kali akan menciptakan

error:
 Penamaan variabel
Berikut ini adalah ketentuan Penamaan variabel di JavaScript:

1. Nama hanya boleh mengandung huruf, digit, atau simbol seperti $ and _.

2. Karakter pertama tidak boleh digit.

3. Tidak boleh ada Spasi dalam nama variable, misal : let nama mahasiswa, penamaan
tersebut akan menimbulkan error, penamaan yang benar adalah let nama_mahasiswa

atau let namaMahasiswa

4. Nama Variabel bersifat Sensitif, jadi nama variable apple berbeda dengan Apple

5. Tidak boleh menggunakan nama variable yang digunakan oleh javascript, contohnya let,
var, class, function, return, for, while,dll.

Contoh nama valid: Contoh nama tidak valid:

let UserName let %UserName

let nama123 let 123nama

const warnaMerah const warna Merah

const warna_kuning const warnakuning#

var kelas var class

Kesimpulan
Kita bisa mendeklarasi variabel untuk menyimpan data menggunakan katakunci var, let,
atau const.

 let – adalah deklarasi variabel modern yang menyimpan nilai atau data yang dinamis.
 var – adalah deklarasi variabel jadul. Normalnya kita tak menggunakannya sama sekali,

tapi kita akan mengcover perbedaan halus dari let di bab Si Tua "var", hanya jika kamu
membutuhkannya.

 const – seperti let, tapi nilai variabelnya tak bisa diubah.

Variabel sebaiknya diberi nama yang memudahkan kita untuk memahami apa isinya.

Tugas

Bekerja dengan variabel

1. Deklarasikan dua variabel: admin and name.
2. Assign nilai "John" ke name.
3. Copy atau salin nilai dari name ke admin.
4. Tampilkan nilai admin menggunakan alert (harus beroutput “John”).

Tipe data
Dalam Javascript terdapat beberapa tipe data yang dapat digunakan, sebuah string atau
sebuah number. Terdapat delapan tipe data dasar dalam Javascript. Disini, kita akan

mempelajarinya dan di bagian selanjutnya kita akan mempelajarinya secara detail.

Kita bisa menggunakan tipe apa saja didalam sebuah variabel. Contoh, Untuk sesaat

sebuah variabel bisa saja memiliki tipe data string dan selanjutnya variabel tersebut
menyimpan number:

Bahasa pemrograman yang mendukung hal semacam ini, seperti Javascript, disebut

dengan “dynamically typed”, berarti terdapat tipe data, akan tetapi variabel tidak terikat
pada tipe data apapun.
 Tipe number merepresentasikan angka baik integer maupun floating point.

Ada banyak operasi untuk angka, misal perkalian *, pembagian /, penambahan +,

pengurangan -, dan lainnya.

Selain angka reguler, ada yang disebut “nilai numerik spesial” yang juga bagian dari tipe
data ini: Infinity, -Infinity dan NaN.

 Infinity mewakili Infinity matematis ∞. Ia merupakan nilai spesial yang lebih besar dari
angka apapun.

Kita bisa mendapatkannya sebagai hasil dari pembagian oleh nol:

Contoh :

NaN mewakili error komputasional. Ia merupakan hasil operasi matematis yang salah atau
tak-terdefinisi, misalnya:

Interaksi: alert, prompt, confirm

sebagaimana kita akan menggunakan peramban sebagai lingkungan percobaan kode,
ayo kita lihat beberapa fungsi untuk berinteraksi dengan pengguna: alert, prompt dan
confirm.