Jika teman-teman ingin menjadi seorang web development profesional khusus untuk front-end developer maka kalian harus belajar javascript. Iya javascript merupakan bahasa pemrograman yang wajib kalian pelajari selain HTML dan CSS (Cascading Style Sheets). Ketiganya (walupun sebenarnya HTML dan CSS bukanlah suatu bahasa pemrograman)termasuk dalam Client-side scripting yang mana pemrosesan data terjadi di sisi klien (Saat ini telah berkembang Node.js yang pemrosesan data terjadi di sisi server). Sedangkan PHP atau ASP.NET merupakan server-side scripting yang setiap prosesnya dilakukan di sisi server.
Mulai saat ini jika kalian bertekad untuk menjadi seorang programmer, kalian bisa menentukan kira-kira sebaiknya saya menjadi seorang front-end developer atau back-end developer atau bisa jadi keduanya (full-stack developer). Pada saat saya menulis artikel ini saya sedikit melakukan riset di google trends dengan 4 kategori (Javascript, HTML, CSS, PHP) yang berhubungan dengan aplikasi berbasis web.
Dari ke empat kategori tersebut javascript (berwarna biru) menempati urutan teratas jika dibandingkan dengan lainnya. Posisi kedua ditempati HTML dan kemudian diikuti PHP dan CSS. Ini berarti pemrograman javascript masih sangat populer dan banyak digunakan saat ini di seluruh dunia. Apalagi saat ini sudah sangat populer Node.js yang merupakan platform untuk menjalankan kode-kode javascript. Namun untuk mempelajari node.js tentunya sangat wajib kalian perlu mengenal dan mempelajari javascript.
Pada kesempatan kali ini kita akan belajar apa itu javascript bagaimana memulainya dari dasar sangat di khususkan untuk kalian pemula.
Daftar Isi
Apa itu Javascript?
Javascript adalah bahasa pemrograman yang digunakan untuk memberikan fungsionalitas dalam suatu dokumen HTML agar dapat memberikan pengalaman lebih bagi pengguna. Karena pada masa awal perkembangan web, aplikasi hanya dapat menampilkan data atau informasi tanpa menunjang interaksi lebih dengan penggunanya. Javascript hadir untuk memberikan sebuah solusi web yang dinamik dan responsif terhadap pengguna.
Javascript (awalnya bernana livescript) pertama kali dikembangkan oleh Netspace, namun setelah itu Microsoft juga mengadopsi dengan membuat bahasa yang hampir sama dengan javascript yaitu Jscript yang di pasang di aplikasi browser internet explorer. Karena berbeda pengembang tentu saja Jscript dan javascript tidaklah cocok (kompatibel) itu sebabnya Netspace kemudian melakukan standarisasi secara internasional yang bermana ECMAScript oleh European Computer Manufacturers Association(ECMA). Dengan adanya standarisasi ini pengembang dapat mengacu sesuai standar, sehingga aplikasi yang di hasilkan dapat berjalan dan di dukung oleh browser yang ada saat ini.
Javascript bersifat open source sehingga kita dapat menggunakan secara gratis. Tidak seperti bahasa pemrograman lain javascript tidak membutuhkan kompilasi untuk menjalankan program, cukup dengan intrepeter yang telah di support oleh browser web seperti internet explorer versi 3 dan lebih baru, mozilla, opera dan chrome.
Apa yang dibutukan untuk belajar Javascript ?
- Web Browser
- Teks editor
Web browser bisa menggunakan mozzila dan chrome yang lain tidak begitu saya rekomendasikan. Untuk teks editor bisa menggunakan visual studio code, kalian bisa download secara gratis.
Seperti yang saya sebutkan diatas bahwa javascript adalah bahasa script di sisi klien sehingga tidak membutuhkan web server untuk dijalankan. Namun kedepannya kalian bisa mengkombinasikan dengan PHP sehingga diperlukan aplikasi web server seperti xampp.
Mulai Belajar Javascript Lewat Program Sederhana
Javascript dapat kita buat dalam dokumen HTML, oleh karena itu setidaknya kalian sudah memahami dasar-dasar html. Bentuk umum dari javascript sebagai berikut:
<script>
Blok program javascript
</script>Setiap perintah yang berada di antara tag <script>… </script> akan dianggap sebagai kode javascript yang akan dieksekusi oleh intrepeter.
Membuat Program Hello World!
Mari kita mulai belajar javascript pertama-tama buatlah sebuah file dengan nama hello.html melalui aplikasi teks editor yang kalian miliki bisa berupa notepad, notepad++ atau sesuai saran saya menggunakan visual studio code.
<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
kode javascript dapat disisipkan pada setiap bagian dalam dokumen HTML (Embed). karena bagian <body> adalah bagian yang di tampilkan untuk penguna maka sebaiknya kita menempatkan kode javascript di bagian <body>. Namun jika kita ingin menempatkan di bagian <head> kita perlu mengelompokan ke dalam sebuah fungsi, Perhatikan contoh berikut:
<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
<script>
function Hello(){
document.write("Hello Wordl")
}
</script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>Dapat kita lihat dari contoh di atas kita membuat sebuah fungsi dengan nama Hello() yang berada di dalam tag <head>, lalu kemudian kita panggil dari bagian <body> dengan memanggil fungsi Hello(). Hasil output sama dengan contoh pertama.
Kode Javascript Eksternal
Selain penempatan kode javascript di setiap bagian dokumen HTML, kita juga bisa membuat script eksternal yang nantinya kita tautkan ke dokumen html kita di bagian <head>.
Contoh:
Buat sebuah file dengan nama hello.js file tersebut memiliki ekstensi js yang merupakan ekstension dari javascript.
function Hello(){
document.write("Hello Wordl")
}Kemudian pada file hello.html pada bagian head kita tambahkan sintak javascript eksternal.
<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
<script src="hello.js"></script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>Saat kita menyertakan file js eksternal menggunakan atribut src yang nilainya berisi file js yang akan kita sertakan.
Ketika file hello.html dijalankan di browser maka fungsi Hello() akan di eksekusi yang sumbernya berasal dari file hello.js
Menemukan Kesalahan (Error) Javascript
Saat kita membuat sebuah kode javascript maka kode tersebut akan dijalankan di browser, ketika terdapat kesalahan penulisan kode program maka kebanyakan kasus browser tidak dapat menunjukan letak kesalahan (error) pada program. Oleh sebab itu kita perlu melakukan proses debuging.
Debug adalah proses untuk menemukan kesalahan (error) dari suatu program. untuk menemukan pesan kesalahan kita harus masuk ke mode console yang ada di browser.
Untuk browser Mozzila masuk pada menu pengembangan web – Konsole web atau dengan menekan tombol Ctrl+Shift+K.
Untuk di aplikasi chrome buka control pada bagian akanan atas kemudian pilih more tools – developer tools. atau dengan menekan tombol Ctril+Shift+L.
Contoh:
Perhatikan pada program berikut:
<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
</head>
<body>
<script>
documen.write("Hello")
</script>
</body>
</html>Saya sengaja menuliskan documen padahal seharusnya adalah document. Ketika dijalankan
Ketika kita buka menu console di browser maka akan di tampilkan pesan errornya “documen is not define” yang artinya javascript tidak mengenali documen. Pesan error pun di beri tahu dimana file yang error (hello.html) dan pada baris program ke 8.
Aturan Penulisan
Ada beberpa aturan penulisan sintak didalam javascript:
Case Sensitive
Penulisan kode program dalam javascript bersifat case sensitive artinya bahwa penggunaan huruf besar atau huruf kecil di bedakan. Sifat ini berlaku untuk penulisan sintak, fungsi built-in, variabel, tipe data yang semuanya sudah menjadi standar penulisan dalam intrepeter javascript.
Komentar
Suatu program akan sangat baik jika terdapat keterangan dari setiap kode program yang dibuat. Sehinga ketika kita atau orang lain melihat program yang dibuat dapat dengan mudah memahami karena dokumentasi yang baik. Salah satunya dengan penulisan komentar.
Dalam javascript komentar dinyatakan dengan tanda // setalah perintah program atau menggunakan /* … */ jika komentar lebih dari satu baris.
Komentar-komentar ini tidak akan di eksekusi oleh intrepeter saat program di jalankan.
Tipe Data
Javascript memiliki beberapa tipe data dasar yaitu
- Numerik
- String
- Boolean
- Tanggal
- Objek
- RegExp
- null dan undefined
Numerik
Tipe data numerik di peruntukan untuk data bilangan bulat (integer) maupun pecahan (float).
Contoh bilangan bulat:
5
30
100Contoh bilangan pecahan:
1.5
0.6
10.9Tanda titik untuk memisahkan antara bilangan desimal dengan pecahannya.
String
Tipe data string di peruntukan untuk nilai berupa sekumpulan karakter (huruf,tanda baca,angka) yang di apit menggunakan kutip atau tanda petik.
Contoh String:
"Kelas Programmer"
atau
'Kelas Programmer'
Penggunan kedua tanda petik baik single maupun double dianggap legal dalam javascript.
Boolean
Tipe boolean hanya memiliki dua nilai yaitu true dan false. Tipe ini biasanya digunakan pada operator logika.
Date
Date merupakan tipe data khusus untuk menatakan waktu baik itu tanggal maupun jam. Contoh misalnya 04/06/2020 atau 08:30:00.
Objek
Tipe data objek adalah tipe data yang mendefinisikan objek. Kita akan belajar secara khusus untuk tipe ini.
RegExp
Tipe data RegExp digunakan untuk mendefinisikan suatu pola atau reguler expression.
Null dan Undefined
Tipe data null digunakan untuk mendefinisikan data yang belum terisi (kosong), sedangkan untuk tipe undefined untuk mendefinisikan data yang belum didefinisikan.
Variabel
Variabel adalah sebuah wadah atau tempat untuk menampung suatu nilai. Setiap variabel yang digunakan perlu di deklarasikan terlebih dahulu. Bentuk umum deklarasi variabel di javascript seperti berikut:
var nama_variabelUntuk membuat variabel tuliskan kata kunci var sebelum nama variabel.
Aturan Penulisan Variabel
- Nama variabel bersifat case sensitive artinya huruf besar kecil di bedakan.
- nama variabel perlu di awali dengan huruf atau karakter underscore (_).
- Penulisan nama variabel tidak boleh menggunakan kata kunci yang ada di dalam javascript misalnya for, while, if, var dan lainnya.
- Variabel tidak boleh mengandung tanda baca seperti titik, koma dan lainnya atau tidak bisa juga menggunakan simbol operator seperti +,-,/,% dan lainnya.
Contoh Penulisan Variabel
//Penulisan variabel yang benar
var nama
var jurusan
var nilai
var jenis_kelamin
//Penulisan variabel yang salah
var nama+
var 8jurusan
var .nilai
var jenis kelaminJenis-jenis variabel
Variabel dapat dibedakan menjadi 2 yaitu:
Variabel tunggal
Variabel tunggal adalah variabel yang hanya dapat menyimpan atau menampung satu nilai saja dalam satu tempat. Contoh misalnya kita membuat variabel var nama maka variabel tersebut hanya mampu menipan sebuah nilai nama.
Variabel Jamak
Variabel jamak atau bisa di sebut array (larik) adalah variabel yang terdiri dari satu nama, namun dapat menyimpan banyak nilai, setiap nilai disebut elemen array dan memiliki indeks yang dimulai dari 0. Pembahasan detail tentang array akan kita bahas pada postingan lain.
Perintah Keluaran (Output)
Perintah output digunakan untuk memberikan pesan kepada pengguna berupa teks string atau disertai dengan informasi data dari suatu variabel.
document.write
Perintah document.write digunakan untuk menampilkan data/informasi di halaman website.
Bentuk umum:
document.write (variabel)atau kita bisa kombinasi dengan sebuah string
document.write ("teks" + variabel)Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama="Dimas"
usia=25
document.write("Nama : "+nama+"<br>"+"Usia : "+usia)
</script>
</body>
</html>Hasil output:
Nama : Dimas
Usia : 25 Pada contoh di atas saya membuat variabel nama dengan nilai Dimas dan usia dengan nilai 25. untuk menampilkan isi dari kedua variabel tersebut kita menggunakan perintah document.write() disertai dengan karakter string sebagai keterangan. Untuk menghubungkan teks string dengan variabel kita gunakan operator +. Dalam penggunaan perintah document.write() output yang dihasilkan berada dalam satu baris, untuk menangani ini kita bisa menyisipkan tag <br> untuk membuat baris baru.
alert
Perintah output berikutnya adalah alert yang mana berfungsi untuk menampilkan data/informasi dalam bentuk pop up.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama="Dimas"
usia=25
alert("Nama : "+nama+"\n"+"Usia : "+usia)
</script>
</body>
</html>
Penggunaan perintah alert lebih di khususkan untuk memberikan sebuah informasi pemberitahuan ke pengguna.
Perintah Masukan (Input)
Terdapat 2 perintah masukan (input) yaitu menggunakan prompt dan Confirm.
Prompt
Perintah yang digunakan di dalam javascript untuk menerima inputan dari keyboard adalah prompt. Bentuk umumnya seperti berikut:
variabel = prompt ("Pesan Masukan")Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama=prompt("Masukan nama :")
document.write(nama)
</script>
</body>
</html>
Ketika program di atas dijalankan di browser maka akan ada jendela dialog yang dapat menerima inputan dari keyboard. Pada contoh di atas saya memasukan nama dengan nilai Setiawan. Nilai ini akan di simpan atau di tampung pada variabel nama kemudian dengan perintah document.write kita menampilkan isi dari variabel nama. Sehingga ketika mengklik tombol Oke maka nilai nama di tampilkan di halaman browser.
Confirm
Perintah masukan selanjutnya di dalam javascript adalah confirm. Fungsinya untuk memberikan suatu informasi ke pengguna melalui jendela dialog dengan tombol Ok dan cancel.
Perintah ini akan menghasilkan tipe boolean, jika pengguna mengklik tombol Ok maka akan menghasilkan nilai benar (true) sementara jika memilih cancel maka menghasilkan nilai salah (false).
Bentuk umum:
confirm ("Pesan konfirmasi")Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
konfirmasi=confirm("Konfirmasi Pesanan")
document.writeln(konfirmasi)
</script>
</body>
</html>
Ketika tombol Oke di klik maka akan menghasilkan nilai true sementara jika memilih batal akan mengahsilkan nilai false.
Perintah confirm biasa digunakan saat pengguna ingin submit form, melakukan tindakan login/logout atau kegiatan lainnya yang memerlukan konfirmasi dari pengguna.
Untuk pembahasan kali ini mengenai belajar javascript, sampai disini (agar artikel tidak kepanjangan). masih banyak sekali yang harus kalian pelajari. Dibawah ini adalah materi-materinya:
