Materi JavaScript

Bab 1: Pengenalan JavaScript

1.1 Apa Itu JavaScript?

Pada bab ini, anda diharapkan dapat :

 Memahami sejarah dan fungsi dasar JavaScript.

 Menjelaskan posisi JavaScript dalam pengembangan web.
 Menjalankan JavaScript sederhana di browser.

1.2 Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk memberikan interaktivitas
pada halaman web. Ini memungkinkan pengembang untuk membuat fungsi dinamis, seperti
tombol klik, animasi, dan banyak lagi.

1.3 Sejarah Singkat JavaScript

JavaScript pertama kali dikembangkan oleh Netscape pada tahun 1995. Sejak itu, JavaScript
telah menjadi salah satu bahasa utama untuk pengembangan web.

1.4 Sejarah Singkat JavaScript

JavaScript pertama kali diperkenalkan pada tahun 1995 oleh Brendan Eich di Netscape. Pada
saat itu, bahasa ini hanya digunakan untuk operasi sederhana. Namun, seiring perkembangan
teknologi web, JavaScript berkembang pesat dan kini menjadi bahasa yang esensial dalam
pengembangan web modern.

1.5 Mengapa JavaScript Penting.

JavaScript adalah salah satu dari tiga teknologi utama dalam pengembangan web, bersama
HTML dan CSS. HTML bertanggung jawab atas struktur, CSS untuk desain, dan JavaScript
untuk interaksi. Tanpa JavaScript, halaman web hanya berupa dokumen statis.

1.5 Menjalankan JavaScript.

Untuk memulai menulis kode JavaScript, Anda bisa langsung menggunakan console di
browser atau menyisipkan kode dalam file HTML. Berikut contoh sederhana untuk
mencoba JavaScript:
Penjelasan:

 console.log("Hello, world!"); adalah perintah untuk menampilkan teks di

konsol. Ini membantu pengembang memeriksa dan menguji kode.

1.6 Latihan

1. Coba ketik dan jalankan kode di atas pada editor HTML.

2. Gunakan console.log() untuk menampilkan nama Anda di konsol.

Bab 2: Tipe Data Dasar

2.1 Apa Itu Tipe Data?

Tipe data adalah klasifikasi nilai yang menentukan operasi apa yang dapat dilakukan pada
nilai tersebut. JavaScript mendukung berbagai tipe data.

2.2 Tipe Data Utama di JavaScript

- String: Representasi teks.
- Number: Representasi angka.
- Boolean: Nilai benar atau salah.
- Null: Tipe khusus yang menunjukkan tidak adanya nilai.
- Undefined: Menunjukkan variabel belum memiliki nilai.

2.3 Tipe Data Dasar dalam JavaScript

2.3.1 String
 String adalah tipe data yang berisi teks atau karakter. Di JavaScript, string ditulis dengan
tanda kutip tunggal atau ganda.

2.3.2 Number

Tipe data number digunakan untuk angka, baik bilangan bulat maupun desimal.

2.3.3 Boolean

Boolean memiliki dua nilai: true atau false. Tipe ini sering digunakan dalam kondisi
atau logika pemrograman.

2.3.4 Undefined

Undefined adalah tipe data yang diberikan secara otomatis kepada variabel yang
belum diisi dengan nilai apa pun.

2.3.5 Null

Null adalah tipe data yang mewakili tidak adanya nilai atau "kosong."

2.4 Perbedaan Undefined dan Null

Meskipun undefined dan null sering terlihat serupa, keduanya memiliki perbedaan
penting. Undefined adalah nilai default untuk variabel yang belum didefinisikan,
sedangkan null adalah nilai yang secara eksplisit menunjukkan ketiadaan.

2.5 Latihan

1. Buat variabel nama, umur, dan hobi, lalu isi dengan nilai yang sesuai.
2. Tampilkan nilai masing-masing variabel di konsol menggunakan console.log().

Bab 3: Variabel dan Deklarasi

3.1 Pengertian Variabel

Variabel adalah tempat penyimpanan nilai dalam memori yang dapat digunakan dan
dimanipulasi selama program berjalan. Di JavaScript, variabel dapat dideklarasikan
menggunakan var, let, atau const.

3.2 Perbedaan var, let, dan const

 var: Digunakan sebelum ES6, memiliki cakupan fungsi dan dapat dideklarasikan
ulang.
 let: Diperkenalkan pada ES6, memiliki cakupan blok dan lebih direkomendasikan
daripada var.
 const: Mirip dengan let, tetapi nilai variabel yang dideklarasikan dengan const
tidak dapat diubah setelah diinisialisasi.

Contoh:

3.4 Latihan

1. Deklarasikan tiga variabel: nama, umur, dan pekerjaan menggunakan let.

2. Coba ubah nilai nama dan pekerjaan, lalu tampilkan hasilnya di konsol.

Bab 4: Operasi Dasar dan Ekspresi

4.1 Pengertian Operator dan Ekspresi

Operator adalah simbol yang melakukan operasi terhadap satu atau lebih operand (nilai
atau variabel). Ekspresi adalah kombinasi dari nilai dan operator yang menghasilkan nilai
baru.

4.3 Jenis-Jenis Operator di JavaScript

4.3.1 Operator Aritmatika

Operator aritmatika digunakan untuk melakukan operasi matematika pada angka.

Contoh penggunaan:

4.3.2 Operator Perbandingan

Operator perbandingan digunakan untuk membandingkan dua nilai dan menghasilkan

nilai boolean (true atau false).
 Contoh penggunaan:

4.3.3 Operator Logika

Operator logika digunakan untuk operasi yang menghasilkan nilai boolean dan sering
dipakai dalam kondisi.

Contoh penggunaan:

4.4 Ekspresi di JavaScript

Ekspresi adalah kombinasi dari variabel, konstanta, operator, dan fungsi yang menghasilkan
nilai baru. Contohnya:
4.5 Latihan

1. Buat variabel nilaiUjian dan nilaiTugas, lalu cek apakah nilai ujian lebih dari 70
dan nilai tugas lebih dari 60.
2. Hitung total harga dari beberapa item dengan harga masing-masing dan tampilkan
hasilnya.

Bab 5: Kondisional

5.1 Pengertian Pernyataan Kondisional

Pernyataan kondisional digunakan untuk membuat keputusan dalam program berdasarkan

kondisi tertentu. Jika kondisi benar, satu blok kode akan dijalankan, jika tidak, blok lain
dapat dijalankan.

5.3 Struktur Dasar if, else if, dan else

Di JavaScript, pernyataan if digunakan untuk memeriksa kondisi. Struktur dasar:

Contoh:

5.4 Operator Ternary

Operator ternary adalah bentuk singkat dari if...else yang ditulis dalam satu baris:
5.5 Latihan

1. Buat variabel nilaiAkhir. Jika nilaiAkhir lebih dari 75, tampilkan "Lulus", jika
tidak tampilkan "Tidak Lulus".
2. Gunakan operator ternary untuk mengecek apakah sebuah angka adalah bilangan
positif atau negatif.

Bab 6: Fungsi

6.2 Apa Itu Fungsi?

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat
digunakan berulang kali. Fungsi membantu menyederhanakan kode dan meningkatkan
keterbacaan serta pemeliharaannya.

6.3 Cara Mendefinisikan Fungsi

Fungsi di JavaScript dapat didefinisikan dengan menggunakan kata kunci function:

Contoh sederhana:

6.4 Parameter dan Argumen

Fungsi dapat menerima masukan dalam bentuk parameter yang nilainya diberikan melalui
argumen saat fungsi dipanggil.
6.5 Mengembalikan Nilai dengan return

Fungsi dapat mengembalikan nilai dengan menggunakan perintah return. Setelah return
dipanggil, eksekusi fungsi akan berhenti.

6.6 Fungsi Ekspresi (Function Expression)

Selain cara deklaratif, fungsi juga bisa dibuat menggunakan ekspresi dan disimpan dalam
variabel.

6.7 Arrow Function (Fungsi Panah)

Arrow function adalah sintaks singkat untuk mendeklarasikan fungsi, yang diperkenalkan
pada ES6.

6.8 Latihan

1. Buat fungsi kelilingPersegi yang menerima satu parameter, sisi, dan

mengembalikan keliling persegi.
2. Buat fungsi kaliTiga menggunakan arrow function yang mengalikan sebuah angka
dengan tiga.

Bab 7: Looping (Pengulangan)

7.2 for Loop

for loop adalah cara untuk menjalankan blok kode dalam jumlah tertentu, biasanya
tergantung kondisi.
7.3 while Loop

while loop akan terus berjalan selama kondisinya true.

7.4 do...while Loop

do...while loop akan selalu menjalankan setidaknya sekali, bahkan jika kondisinya false
pada awalnya.

7.5 Latihan

1. Gunakan for loop untuk mencetak angka dari 1 hingga 10.

2. Buat while loop yang menghitung mundur dari 10 ke 1.

Bab 8: Array dan Penggunaan Dasarnya

8.2 Apa Itu Array?

Array adalah struktur data yang digunakan untuk menyimpan banyak nilai dalam satu
variabel. Nilai dalam array disusun berdasarkan indeks yang dimulai dari nol.

8.3 Membuat Array

Array dapat dideklarasikan menggunakan kurung siku [].

8.4 Mengakses dan Mengubah Elemen Array

Setiap elemen dalam array memiliki indeks. Untuk mengaksesnya, gunakan tanda kurung
siku [].

8.5 Metode Dasar Array

Beberapa metode dasar yang sering digunakan dalam array:

 push(): Menambah elemen di akhir array.

 pop(): Menghapus elemen terakhir dari array.
 shift(): Menghapus elemen pertama dari array.
 unshift(): Menambah elemen di awal array.

Contoh penggunaan:

8.6 Latihan

1. Buat array bernama angka dengan nilai 1 hingga 5. Tambahkan nilai 6 di akhir
array menggunakan push().
2. Gunakan pop() untuk menghapus elemen terakhir dari array angka.

Bab 9: Manipulasi String

9.2 Pengertian String

String adalah tipe data yang digunakan untuk merepresentasikan teks. Di JavaScript,
string dapat didefinisikan menggunakan tanda kutip tunggal ', kutip ganda ", atau
backticks ` untuk template literal.
9.3 Metode Dasar Manipulasi String

9.3.1 Menggabungkan String

Menggabungkan string dapat dilakukan dengan operator + atau dengan menggunakan

template literal.

9.3.2 Mengubah Ukuran Huruf

Metode toUpperCase() dan toLowerCase() digunakan untuk mengubah huruf menjadi

besar atau kecil.

9.3.3 Memotong String

Gunakan slice() untuk mengambil bagian tertentu dari string berdasarkan indeks.

9.3.4 Mengganti Teks

Metode replace() digunakan untuk mengganti teks dalam string. Hanya mengganti
yang pertama kali ditemukan, kecuali menggunakan RegEx.
9.4 Latihan

1. Buat variabel kata1 dan kata2, lalu gabungkan keduanya menjadi satu kalimat.
2. Ambil substring dari kalimat "Belajar JavaScript Menyenangkan" untuk
mendapatkan kata "JavaScript".

Bab 10: Objek dan Properti Dasar

10.2 Pengertian Objek

Objek adalah tipe data yang dapat menyimpan data dalam bentuk pasangan key-value.
Objek cocok untuk menyimpan data yang lebih kompleks.

10.3 Mengakses dan Mengubah Properti Objek

Properti dalam objek dapat diakses menggunakan notasi titik atau kurung siku.

10.4 Menambah dan Menghapus Properti

Anda bisa menambahkan atau menghapus properti dalam objek kapan saja.

10.5 Latihan

1. Buat objek mobil dengan properti merk, tahun, dan warna. Tampilkan merk
mobil.
 2. Tambahkan properti baru pemilik ke objek mobil dan isi dengan nama.

Bab 11: Event Handling (Pemicu Acara)

11.2 Apa Itu Event?

Event adalah peristiwa yang terjadi di browser, seperti klik tombol, perubahan input, atau
pengguliran halaman. JavaScript dapat mendeteksi dan merespons peristiwa ini.

11.3 Menambahkan Event Listener

Metode addEventListener() digunakan untuk menambahkan event listener pada

elemen HTML. Sintaks dasar:

Contoh penggunaan:

11.4 Event Handler Inline

Anda juga bisa menambahkan event handler langsung dalam HTML dengan atribut
seperti onclick.

11.5 Latihan

1. Buat tombol yang menampilkan pesan saat diklik.

2. Buat input teks yang mengubah nilai menjadi huruf besar saat ada perubahan.

Bab 12: Penggunaan Fungsi Callback

12.2 Apa Itu Callback?

Callback adalah fungsi yang dipanggil sebagai argumen fungsi lain. Callback sering
digunakan dalam pemrograman asinkron dan event handling.

12.3 Callback dalam Pemrosesan Array

Metode array seperti forEach(), map(), dan filter() menggunakan callback.

12.4 Latihan

1. Gunakan fungsi map() untuk menggandakan setiap elemen dalam array [1, 2,
3].
2. Buat fungsi operasi yang menerima dua angka dan callback untuk
menjumlahkan atau mengalikan angka tersebut.

Bab 13: Manipulasi DOM (Document Object Model)

13.2 Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktur halaman web yang dapat
dimanipulasi dengan JavaScript. Setiap elemen HTML dianggap sebagai objek yang bisa
diakses dan diubah.

13.3 Mengakses Elemen DOM

JavaScript menyediakan beberapa metode untuk mengakses elemen DOM:

 getElementById() - Mengakses elemen berdasarkan ID.

  getElementsByClassName() - Mengakses elemen berdasarkan nama kelas.
 getElementsByTagName() - Mengakses elemen berdasarkan tag.
 querySelector() - Mengakses elemen pertama yang cocok dengan selektor
CSS.
 querySelectorAll() - Mengakses semua elemen yang cocok dengan selektor
CSS.

Contoh:

13.4 Mengubah Konten dan Properti Elemen

Anda dapat mengubah konten elemen dengan innerHTML, textContent, atau style
untuk memodifikasi gaya CSS.

13.5 Menambahkan dan Menghapus Elemen

Gunakan metode createElement(), appendChild(), dan removeChild() untuk

menambah atau menghapus elemen dari DOM.
13.6 Latihan

1. Buat tombol yang ketika diklik, menambahkan paragraf baru di dalam sebuah div.
2. Buat elemen <ul> kosong, lalu tambahkan beberapa item <li> menggunakan
JavaScript.