Belajar JavaScript

Sahid
Departemen Pendidikan Matematika, Universitas Negeri Yogyakarta
sahid@uny.ac.id, sahidyk@gmail.com

 

Mengapa JavaScript?

• JavaScript adalah bahasa pemrograman paling populer di dunia.

• JavaScript adalah bahasa pemrograman Web. JavaScript merupakan salah satu dari tiga bahasa pemrograman wajib untuk para pengembang Web: HTML (untuk menuliskan isi Web), CSS (untuk mengatur tampilan halaman Web), dan JavaScript (untuk memprogram isi dan interaksi).

• JavaScript mudah dipelajari.

Tulisan ini akan mengajk Anda belajar bahasa JavaScript dari dasar hingga lanjut. Ini adalah salah satu dari beberapa rangkaian artikel tentang bahasa javaScript. Artikel-artikel lain akan menyusul.

Belajar dari Contoh

Dalam belajar bahasa pemrograman apapun, termasuk JavaScript, setiap pembahasan pasti selalu disertai contoh kode JavaScript dan tampilan hasilnya di browser ketika file HTML dibuka dengan browser yang mendukung (diaktifkan) JavaScript-nya.

Contoh 1: Menampilkan tanggal dan waktu

xxxxxxxxxx
<button type="button"
onclick="document.getElementById('demo1').innerHTML = Date()">Klik untuk menampilkan tanggal dan waktu sekarang.</button>
<p style="color:blue; background-color:yellow;"><span id="demo1"></span> </p>

Klik untuk menampilkan tanggal dan waktu sekarang.

Contoh lebih baik dari 1000 kata. Contoh sering kali lebih mudah dipahami daripada penjelasan teks.

Jika Anda mencoba semua contoh, Anda akan belajar banyak tentang JavaScript dalam waktu yang sangat singkat!

Contoh 2: JavaScript Dapat Mengubah Konten HTML

Salah satu dari banyak metode JavaScript HTML adalah getElementById().

Contoh di bawah ini "menemukan" elemen HTML (dengan id="demo2"), dan mengubah konten elemen (innerHTML) menjadi "Inilah hasil JavaScript!":

document.getElementById("demo2").innerHTML = "Inilah hasil JavaScript!";

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id="demo2">Klik tombol di bawah ini untuk mengganti tulisan ini</span></p>
<button type="button" onclick='document.getElementById("demo2").innerHTML = "Inilah hasil JavaScript!"'>Klik aku!</button>

Klik tombol di bawah ini untuk mengganti tulisan ini.

Klik aku!

JavaScript menerima tanda kutip ganda dan tunggal:

document.getElementById('demo3').innerHTML = 'Inilah hasil JavaScript!';

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id='demo3'>Klik tombol di bawah ini untuk mengganti tulisan ini</span></p>
<button type="button" onclick="document.getElementById('demo3').innerHTML = 'Inilah hasil JavaScript!'">Klik aku!</button>

Klik tombol di bawah ini untuk mengganti tulisan ini

Klik aku!

---

Contoh 3: JavaScript Dapat Mengubah Nilai Atribut HTML

Dalam contoh ini JavaScript mengubah nilai atribut (sumber) src pada tag <img>:

Bola Lampu

xxxxxxxxxx
<center></center>
<img id="lampu" src="pic_bulboff.gif" style="width:100px"><p>
<button onclick="document.getElementById('lampu').src='pic_bulbon.gif'">Nyalakan lampu</button><button onclick="document.getElementById('lampu').src='pic_bulboff.gif'">Matikan lampu</button></p>
</center>

Nyalakan lampuMatikan lampu

---

Contoh 4: JavaScript Dapat Mengubah Gaya HTML (CSS)

Mengubah gaya elemen HTML adalah varian dari mengubah atribut HTML:

Contoh

document.getElementById("demo4").style.color = "red";

xxxxxxxxxx
<h1 style="color:blue; background-color:yellow;"><span id='demo4a'>Klik tombol di bawah ini untuk mengubah warna tulisan</span></h1>
<p style="color:blue; background-color:yellow;">
    <span id='demo4b'>Teks pertama.</span><br>
    <span id='demo4c'>Teks kedua.</span><br>
    <span id='demo4d'>Teks ke tiga.</span><br>
</p>
<button type="button" onclick="ubahWarna()">Ubah warna tulisan</button>
<script>
function ubahWarna() {
  document.getElementById("demo4a").style.color = "#ff0000";
  document.getElementById("demo4b").style.color = "magenta";
  document.getElementById("demo4c").style.color = "pink";
  document.getElementById("demo4d").style.color = "green";
}
</script>

Klik tombol di bawah ini untuk mengubah warna tulisan

Teks pertama.
Teks kedua.
Teks ke tiga.

Ubah warna tulisan

---

Contoh 5: JavaScript Dapat Menyembunyikan Elemen HTML

Menyembunyikan elemen HTML dapat dilakukan dengan mengubah gaya display:

document.getElementById("demo5").style.display = "block";

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id='demo5'>Inilah JavaScript!</span></p>
<button type="button" onclick="document.getElementById('demo5').style.display='none'">Sembunyikan!</button>

Inilah JavaScript!

Sembunyikan!

---

Contoh 6: JavaScript Dapat Menampilkan Elemen HTML

Menampilkan elemen HTML tersembunyi juga dapat dilakukan dengan mengubah gaya display:

Contoh 7: Menampilkan dan Menyembunyikan Tulisan

document.getElementById("demo6").style.display = "block";

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id='demo6'  style="display:none">Inilah JavaScript!</span></p>
<button type="button" onclick="document.getElementById('demo6').style.display='block'">Tampilkan!</button>

Inilah JavaScript!

Tampilkan!

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id='demo6a'>Inilah JavaScript!</span></p>

|<button type="button" onclick="document.getElementById('demo6a').style.display='none'">Sembunyikan!</button>|
<button type="button" onclick="document.getElementById('demo6a').style.display='block'">Tampilkan!</button>|

Inilah JavaScript!

|Sembunyikan!| Tampilkan!|

Tahukah Anda?

JavaScript dan Java adalah dua bahasa pemrograman yang sama sekali berbeda, baik dalam konsep maupun desain.

JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun 1997. ECMA-262 adalah nama resmi standar. ECMAScript adalah nama resmi bahasa tersebut.

Versi JavaScript

Versi ECMAScript telah disingkat menjadi ES1, ES2, ES3, ES5, dan ES6. Sejak 2016 versi baru diberi nama berdasarkan tahun (ECMAScript 2016/2017/2018/2019/2020).

Edisi ECMAScript

Memungkinkan tanda koma untuk parameter fungsi

Ver	Nama Resmi	Keterangan
ES1	ECMAScript 1 (1997)	Edisi pertama
ES2	ECMAScript 2 (1998)	Perubahan editorial
ES3	ECMAScript 3 (1999)	Menambahkan ekspresi reguler Menambahkan try/catch Menambahkan switch Menambahkan do-while
ES4	ECMAScript 4	Tidak pernah dirilis
ES5	ECMAScript 5 (2009)	Menambahkan "mode ketat" Menambahkan dukungan JSON Menambahkan String.trim() Menambahkan Array.isArray() Menambahkan metode iterasi Array Memungkinkan tanda koma untuk objek literal
ES6	ECMAScript 2015	Menambahkan let dan const Menambahkan nilai parameter default Menambahkan Array.find() Menambahkan Array.findIndex()
	Skrip ECMA 2016	Menambahkan operator eksponensial (**) Menambahkan Array.includes()
	ECMAScript 2017	Menambahkan padding string Menambahkan Object.entries() Menambahkan Object.values() Menambahkan fungsi async Menambahkan memori bersama
	Skrip ECMA 2018	Menambahkan properti rest /spread Menambahkan iterasi asinkron Menambahkan Promise.finally() Penambahan ke RegExp
	ECMAScript 2019	String.trimStart() String.trimEnd() Array.flat() Object.fromEntries Binding catch opsional
	ECMAScript 2020	Operator Penggabungan Nullish (??)

Nomor versi JavaScript asli adalah ES5 (2009) dan ES6 (2015). Sejak 2016, versi ini diberi nama berdasarkan tahun: ECMAScript 2016, 2017, 2018, 2019, 2020.

Fitur Baru di ECMAScript 2020

Berikut adalah fitur-fitur baru ini di ECMAScript 2020:

• BigInt,

• Operator Koalescing Nullish (??),

• Operator Chaining Opsional (?.),

• Promise.allSettled(),

• String.matchAll().

Peringatan

Fitur-fitur ini relatif baru. Browser lama mungkin memerlukan kode alternatif (Polifill)

JavaScript BigInt

Variabel JavaScript BigInt digunakan untuk menyimpan nilai bilangan bulat besar yang terlalu besar untuk diwakili oleh bilangan JavaScript normal Number. Bilangan bulat JavaScript hanya akurat hingga 15 digit.

Contoh 8: Bilangan Bulat

xxxxxxxxxx
<p id="demo7"></p>
<script>
let x = 1234567890123456;
let y = 12345678901234567; // terlalu besar
let z = 9999999999999999; // terlalu besar
let w = 9999999999999999n;
let u = 1234567890123456789012345n;
let v = BigInt(1234567890123456789012345)
document.getElementById("demo7").innerHTML = x + "<br>" + y+ "<br>" + z+ "<br>" + w+ "<br>" + u+ "<br>" + v;
</script>

 

Bilangan Pada JavaScript

Presisi Bilangan Bulat dan BigInt

Bilangan bulat (bilangan tanpa titik desimal atau notasi eksponen) akurat sampai 15 digit. Untuk membuat BigInt, tambahkan n di akhir bilangan bulat atau gunakan fungsi BigInt().

Jenis JavaScript typeof BigInt adalah "bigint". BigInt didukung di semua browser sejak September 2020:

Chrome 67	Edge 79	Firefox 68	Safari 14	Opera 54
May 2018	Jan 2020	Jul 2019	Sep 2020	Jun 2018

---

Operator Coalescing Nullish (??)

Operator ?? menghasilkan nilai argumen pertama jika nilainya null atau undefined. Jika tidak, operator ?? menghasilkan nilai argumen kedua.

Contoh 9

xxxxxxxxxx
let name = null;
let text = "missing";
let result = name ?? text;

Operator nullish didukung di semua browser sejak Maret 2020:

Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020

Operator Chaining Opsional (??)

Operator ?. menghasilkan undefined jika suatu objek bernilai undefined atau null (alih-alih menampilkan pesan kesalahan).

Contoh 10

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id="demo9"></span></p>
<script>
const mobil = {type: "Fiat", model: "500", color: "white"};
document.getElementById("demo9").innerHTML = mobil?.nama;
</script>

Operator chaining opsional didukung di semua browser sejak Maret 2020:

Chrome 80	Edge 80	Firefox 74	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Mar 2020	Mar 2020	Mar 2020

Dukungan Browser

ECMAScript 1 - 6 didukung penuh di semua browser modern.

---

Dukungan Browser untuk ES5 (2009)

Browser	Versi	Dari tanggal
Chrome	23	November 2012
Firefox	21	Mei 2013
IE	9*	Maret 2011
IE / Edge	10	Sep 2012
Safari	6	Juli 2012
Opera	15	Juli 2013

* Internet Explorer 9 tidak mendukung ECMAScript 5 use strict.

---

Dukungan Browser untuk ES6 (2015)

Browser	Versi	Tanggal
Chrome	51	Mei 2016
Firefox	52	Maret 2017
Edge	14	Agustus 2016
Safari	10	Sep 2016
Opera	38	Juni 2016

Internet Explorer tidak mendukung ECMAScript 2015.

---

Dukungan Browser untuk ECMAScript 2016

Browser	Versi	Tanggal
Chrome	52	Juli 2016
Firefox	54	Juni 2017
Edge	14	Agustus 2016
Safari	10.1	Maret 2017
Opera	39	Agustus 2016

---

Mengapa Belajar JavaScript?

JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari semua pengembang web:

1. HTML untuk mendefinisikan konten halaman web

2. CSS untuk menentukan tata letak halaman web

3. JavaScript untuk memprogram isi halaman web

---

Kecepatan Belajar

Dalam setiap belajar bahasa pemrograman, kecepatan belajar adalah pilihan Anda.

Semua terserah Anda. Jika Anda mengalami kesulitan, istirahatlah, atau baca kembali materinya. Selalu pastikan Anda memahami semua contoh yang diberikan.

Satu-satunya cara untuk menjadi programer yang pintar adalah dengan: Berlatih, Praktik, Praktik, Menulis Program, Menulis Program, Menulis Program!

---

Pertanyaan Umum

• Bagaimana cara mendapatkan JavaScript?

• Di mana saya dapat mengunduh JavaScript?

• Apakah JavaScript Gratis?

Anda tidak perlu mendapatkan atau mengunduh JavaScript. JavaScript sudah berjalan di browser Anda di komputer, di tablet, dan di ponsel pintar Anda. JavaScript gratis digunakan untuk semua orang.

Cara Menyisipkan Perintah/Program JavaScript

Perintah/Program JavaScript Ditulis di Dalam Tag <script>

Di dalam file HTML, perintah-perintah JavaScript disisipkan di antara tag <script> dan </script>.

Contoh 11

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id="demo10"></span></p>
<script> 
document.getElementById("demo10").innerHTML = "Tulisan ini ditampilkan oleh perintah JavaScript";  
</script>

Contoh JavaScript lama mungkin menggunakan atribut type: <script type="text/javascript">.

Atribut type sekarang tidak diperlukan. JavaScript adalah bahasa skrip asli dalam HTML.

---

Perintah/Program/Skrip JavaScript Dapat Ditulis Pada Bagian <head> atau <body>

Anda dapat menempatkan sejumlah skrip dalam satu dokumen HTML.

Skrip JavScript dapat ditempatkan pada bagian <body>, atau pada bagian <head>, atau di keduanya, di dalam file HTML.

---

JavaScript di Bagian <head>

Dalam contoh ini, fungsi JavaScript ubahParagraf ditempatkan/didefinisikan pada bagian <head> di dalam file HTML. Fungsi tersebut dipanggil (dijalankan) ketika tombol Klik untuk mengubah paragraf! diklik.

Contoh 12

xxxxxxxxxx
<!DOCTYPE html>  
<html>  
<head>  
<script>  
function ubahParagraf() {  
  document.getElementById("demo11").innerHTML = "Paragraf diubah.";  
}  
</script>  
</head>  
<body>
<h2>Contoh JavaScript Di Bagian Head</h2>
<p id="demo11">Ini adalah sebuah paragraf.</p>  
<button type="button" onclick="ubahParagraf()">Klik untuk mengubah paragraf!</button>
</body>  
</html>

Contoh JavaScript Di Bagian Head

Ini adalah sebuah paragraf.

Klik untuk mengubah paragraf!

 

JavaScript di Bagian <body>

Dalam contoh ini, fungsi JavaScript ubahParagraf1 ditempatkan/didefinisikan di bagian <body> di dalam file HTML. Fungsi tersebut dipanggil (dijalankan) ketika tombol Klik untuk mengubah paragraf! diklik.

Contoh 13

xxxxxxxxxx
<!DOCTYPE html>
<html>
<body>
<h2>Contoh JavaScript Di Bagian Body</h2>
<p id="demo12">Ini adalah sebuah paragraf.</p>
<button type="button" onclick="ubahParagraf1()">Klik untuk mengubah paragraf!</button>
<script>
function ubahParagraf1() {document.getElementById("demo12").innerHTML = "Paragraf diubah.";}
</script>
</body>
</html>

Contoh JavaScript Di Bagian Body

Ini adalah sebuah paragraf.

Klik untuk mengubah paragraf!

 

Menempatkan skrip di bagian bawah elemen HTML <body> meningkatkan kecepatan tampilan, karena interpretasi skrip memperlambat tampilan.

File Skrip JavaScript

Skrip JavaScript juga dapat ditulis di dalam sebuah file eksternal yang terpisah dengan file HTML. File yang berisi skrip JavaScript biasanya diberi ekstensi .js. Skrip eksternal praktis ketika kode/skrip yang sama digunakan di banyak halaman web (file HTML) yang berbeda. Berikut adalah contoh file skrips JavaScript dan cara menggunakannya di dalam file HTML.

Contoh file eksternal: ubahParagraf.js

xxxxxxxxxx
function ubahParagraf() {
  document.getElementById("demo").innerHTML = "Paragraf aslinya diubah dengan paragraf ini.";
}

Untuk menggunakan skrip eksternal, masukkan nama file skrip di atribut (sumber) src pada tag <script>.

xxxxxxxxxx
<p style="color:blue; background-color:yellow;"><span id="demo"></span></p>
<script src="ubahParagraf.js"> </script>

Anda dapat memanggil (menempatkan referensi) skrip eksternal di bagian <head> atau <body> sesuka Anda. Script akan berfungsi seolah-olah terletak persis di mana tag <script> berada. Skrip eksternal tidak boleh berisi/memuat tag <script>.

---

Keuntungan File JavaScript Eksternal

Menempatkan skrip di file eksternal memiliki beberapa keuntungan:

• Ini memisahkan HTML dan kode/program JavaScript.

• Cara ini membuat HTML dan JavaScript lebih mudah dibaca dan diperbaiki.

• File JavaScript yang dimuat di dalam memori dapat mempercepat pemuatan halaman.

Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip:

Contoh

xxxxxxxxxx
<script src="program1.js"></script> 
<script src="program2.js"></script>

Referensi Eksternal

File skrip JavaScript eksternal dapat dirujuk dalam 3 cara berbeda:

1. dengan URL (alamat web) lengkap,

2. dengan merujuk alamat/folder file (seperti /js/),

3. tanpa menuliskan alamat/folder file (dengan asumsi file JavaScript disimpan pada folder yang sama dengan tempat file HTML).

Contoh berikut ini menggunakan alamat URL lengkap untuk memanggil file JavaScript program1.js.

xxxxxxxxxx
<script src="https://www.w3schools.com/js/program1.js"></script>

Contoh berikut ini menggunakan jalur file (alamat folder) untuk menautkan ke file program1.js.

xxxxxxxxxx
<script src="/js/program1.js"></script>

Contoh ini tidak menggunakan jalur (alamat folder) untuk menautkan ke file program1.js.

xxxxxxxxxx
<script src="program1.js"></script>

---

Beberapa Cara Menampilkan Output JavaScript

JavaScript dapat "menampilkan" data dengan cara empat cara berbeda:

• menulis ke dalam elemen HTML, menggunakan innerHTML,

• menulis ke dalam output HTML menggunakan document.write(),

• menulis ke dalam kotak peringatan, menggunakan window.alert(), dan

• menulis ke konsol browser, menggunakan console.log().

Menggunakan innerHTML

Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById(id), dengan id adalah nama identitas unik yang didefinisikan pada elemen HTML (judul, paragraf, dan sebagainya). Properti innerHTML mendefinisikan konten/isi elemen HTML.

Contoh 14

xxxxxxxxxx
<p>Menampilkan hasil perhitungan</p>
<p style="color:blue; background-color:yellow;"> 5 + 6 = <span id="demo14"></span> </p>
<script> 
document.getElementById("demo14").innerHTML = 5 + 6; 
</script>

Menampilkan hasil perhitungan

5 + 6 =

Menampilkan data di dalam elemen HTML sering digunakan untuk mengubah properti innerHTML elemen HTML tersebut.

Menggunakan document.write()

Untuk tujuan pengujian, akan lebih mudah untuk digunakan document.write(). Jangan pernah menggunakan perintah document.write() setelah dokumen HTML selesai dimuat (perintah document.write() ditempatkan di bagian akhir file HTML), karena hal ini akan menghapus semua HTML yang ada :

Contoh 15

xxxxxxxxxx
<script>  
document.write(5 + 6);
</script>

Contoh 16

xxxxxxxxxx
<!DOCTYPE html>  
<html>  
<body>
<h1>Contoh Halaman Web</h1>  
<p>Ini adalah paragraf.</p>
<button type="button" onclick="document.write("5+6 = ", 5 + 6)">Klik saya untuk mengganti isi halaman ini dengan hasil perhitungan!</button>
</body>  
</html>

Contoh Halaman Web

Ini adalah paragraf.

Klik saya untuk mengganti isi halaman ini dengan hasil perhitungan!

Metode document.write() sebaiknya hanya digunakan untuk tujuan pengujian.

Menggunakan window.alert()

Anda dapat menggunakan kotak peringatan untuk menampilkan hasil JavaScript.

Contoh 17

Anda akan melihat jendela pesan dengan tulisan "This page says" beserta isi pesan ketika membuka file HTML ini.

xxxxxxxxxx
<script> 
window.alert("5+6 = ", 5 + 6); 
window.alert("Ingat, untuk menjadi seorang programer Anda harus selalu berlatih!"); 
alert("Tanpa menulis program, Anda tidak akan mampu membuat sendiri program komputer!");
</script>

Kata kunci windowboleh tidak ditulis, artinya, Anda boleh hanya menuliskan perintah alert().

Dalam JavaScript, objek jendela adalah objek yang memiliki lingkup global. Hal ini berarti bahwa variabel, properti, dan metode aslinya milik objek jendela. Karena lingkupnya global, kata kunci windowbersifat opsional.

Menggunakan console.log()

Untuk keperluan penelusuran kesalahan (debugging), Anda dapat memanggil metode console.log() di browser untuk menampilkan data.

Contoh 18

xxxxxxxxxx
<script>  
console.log(5 + 6);  
</script>

Kemampuan Mencetak JavaScript

JavaScript tidak memiliki objek atau metode cetak. JavaScript tidak memiliki kemampuan mengakses perangkat keluaran dalam bentuk cetak. Satu-satunya pengecualian adalah Anda dapat memanggil metode window.print() dalam browser untuk mencetak isi layar browser.

Contoh 19

xxxxxxxxxx
<button onclick="window.print()">Cetak halaman ini.</button>

Cetak halaman ini.