About us Contact
JAVASCRIPT
Instructor : Abdul Karim
About us Contact
Apa itu
Javascript?
Bahasa pemrograman yang digunakan untuk
membuat halaman web menjadi interaktif.
Bahasa ini bekerja di sisi klien (browser) untuk
memanipulasi konten, merespons aksi pengguna,
dan memuat data secara dinamis tanpa perlu me-
refresh halaman
About us Contact
Perbedaan
Javascript dan
Java
Tipe Bahasa Penggunaan Lingkungan Sintaks
Eksekusi
JavaScript : bahasa interpreted JavaScript : pengembangan JavaScript berjalan di dalam Sintaks JavaScript lebih
(diterjemahkan saat dijalankan) web frontend (di browser), web browser (menggunakan fleksibel dan dinamis,
dan single-threaded meskipun kini juga populer JavaScript engine seperti V8 dengan penulisan yang
(menjalankan satu tugas pada di backend (dengan di Chrome) atau di server lebih longgar.
satu waktu). [Link]). (dengan [Link]). Sintaks Java lebih kaku dan
Java : bahasa compiled Java : aplikasi desktop, Java berjalan di atas Java strongly-typed, yang berarti
(dikompilasi menjadi bytecode aplikasi mobile (Android), Virtual Machine (JVM). Anda harus secara eksplisit
sebelum dijalankan) dan multi- dan sistem enterprise skala mendefinisikan tipe data
threaded (menjalankan banyak besar. untuk setiap variabel.
tugas secara bersamaan).
About us Contact
Silabus Javascript
JavaScript Operators, Methods, and
Keywords
Complete and debug code that uses assignment and arithmetic Operators, Apply JavaScript best practices,
01
Evaluate the use of internal and external scripts, Implement exception handling, and Complete and debug code
that interacts with the Browser Object Model (BOM)
Variables, Data Types, and Functions
02 Declare and use variables of primitive data types, Declare and use arrays, Complete and debug code that uses
objects, Complete and debug code that uses built-in Math functions, and Complete and debug functions that
accept parameters and return values
Decisions and Loops
03 Evaluate expressions that use logical and comparison operators, Complete and debug decision statements, and
Complete and debug loops
Document Object
Model
04 Identify and construct the Document Object Model (DOM) tree, Identify and handle document, form, keyboard,
and mouse events, Complete and debug code that outputs to an HTML document, Complete and debug code that
locates, modifies, and adds HTML elements and attributes to documents, and Create events using event handlers
HTML Forms
and listeners
05 Complete and debug code that retrieves form input and sets form field values, Complete and debug code that
performs input validation, and Describe the form submission process
About us Contact
. JavaScript Operators, Methods, and Keywords
1.1. Complete and debug code that uses assignment and arithmetic Operators
Operator digunakan untuk melakukan operasi pada nilai.
Operator penugasan (=) menetapkan nilai, sementara operator aritmatika (+, -, *, /)
melakukan perhitungan matematis. Ada juga operator gabungan seperti += (contoh: x += 5
sama dengan x = x + 5).
• Aritmatika: + (penjumlahan), - (pengurangan), * (perkalian), / (pembagian), % (modulus
atau sisa bagi), ++ (increment), -- (decrement).
• Penugasan Gabungan: +=, -=, *=, /=, %=.
About us Contact
avaScript Operators, Methods, and Keywords
1.1. Complete and debug code that uses assignment and arithmetic Operators
1. Soal: Apa output dari kode berikut: let x = 10; x /= 2; [Link](x);?
o Jawaban: 5
2. Soal: Tulis kode yang mengurangi nilai variabel y sebesar 5 dan menyimpan
hasilnya kembali ke y dengan satu operator.
o Jawaban: y -= 5;
3. Soal: Apa yang dilakukan oleh operator modulus (%)?
o Jawaban: Mengembalikan sisa dari operasi pembagian.
About us Contact
avaScript Operators, Methods, and Keywords
1.2. Apply JavaScript best practices
Menerapkan praktik terbaik membuat kode lebih mudah dibaca, dikelola, dan di-debug.
• Komentar: Gunakan // untuk komentar satu baris dan /* ... */ untuk komentar multi-baris. Komentar
yang baik menjelaskan mengapa kode ditulis, bukan hanya apa yang dilakukannya.
• Indentasi: Gunakan spasi atau tab secara konsisten untuk membuat struktur kode jelas.
• Konvensi Penamaan: Gunakan camelCase untuk nama variabel dan fungsi (contoh: firstName,
calculateTotalPrice).
• noscript: Tag HTML ini menampilkan pesan kepada pengguna jika JavaScript dinonaktifkan di
peramban mereka.
• debugger dan [Link]: Gunakan debugger untuk menghentikan eksekusi kode dan memeriksa
nilai-nilai pada titik tertentu. [Link] adalah alat yang sangat berguna untuk mencetak nilai
variabel ke konsol peramban saat Anda melakukan debugging.
• Kata Kunci Cadangan: JavaScript memiliki kata-kata yang tidak bisa digunakan sebagai nama variabel,
seperti if, for, dan function.
About us Contact
avaScript Operators, Methods, and Keywords
1.2. Apply JavaScript best practices
4. Soal: Manakah cara yang direkomendasikan untuk menulis komentar satu baris?
Jawaban: //
5. Soal: Mengapa menggunakan [Link]() penting dalam debugging?
Jawaban: Untuk mencetak nilai variabel atau status eksekusi kode ke konsol browser untuk
pemeriksaan.
6. Soal: Apa yang dimaksud dengan "reserved keyword" (kata kunci cadangan)? Berikan satu
contoh.
Jawaban: Kata-kata yang memiliki arti khusus di JavaScript dan tidak dapat digunakan
sebagai nama variabel. Contoh: function, let, if.
7. Soal: Apa konvensi penamaan yang direkomendasikan untuk variabel dan fungsi di
JavaScript?
o Jawaban: camelCase (misalnya, namaDepan, hitungTotal).
About us Contact
avaScript Operators, Methods, and Keywords
1.3. Evaluate the use of internal and external scripts
JavaScript dapat ditambahkan ke halaman web secara internal atau eksternal.
• Internal: Kode diletakkan di dalam tag <script> langsung di file HTML. Cocok untuk skrip
kecil yang hanya digunakan di satu halaman.
• Eksternal: Kode ditulis dalam file terpisah (misalnya [Link]) dan dihubungkan ke HTML
menggunakan tag <script src="[Link]">. Ini adalah praktik terbaik untuk kode yang besar
dan dapat digunakan kembali, karena membuat kode lebih terorganisir, mempercepat
pemuatan halaman (karena file dapat di-cache), dan memisahkan logika dari struktur
HTML.
About us Contact
avaScript Operators, Methods, and Keywords
1.3. Evaluate the use of internal and external scripts
8. Soal: Kapan sebaiknya Anda menggunakan skrip eksternal?
o Jawaban: Ketika skrip berukuran besar, akan digunakan di banyak
halaman, dan untuk menjaga kode tetap terorganisir.
9. Soal: Apa tag HTML yang digunakan untuk menghubungkan file
JavaScript eksternal?
o Jawaban: <script src="[Link]"></script>
About us Contact
avaScript Operators, Methods, and Keywords
1.4. Implement exception handling
Digunakan untuk mengelola kesalahan yang mungkin terjadi selama eksekusi kode tanpa
menghentikan program.
• try: Blok kode yang akan diuji untuk kesalahan.
• catch: Blok kode yang akan dieksekusi jika terjadi kesalahan di blok try. Ini menerima
objek kesalahan (error object) yang berisi detail tentang kesalahan tersebut.
• finally: Blok kode yang selalu dieksekusi, terlepas dari apakah ada kesalahan atau tidak. Ini
sering digunakan untuk membersihkan sumber daya.
About us Contact
avaScript Operators, Methods, and Keywords
1.4. Implement exception handling
10. Soal: Tulis struktur dasar untuk penanganan pengecualian.
Jawaban:
JavaScript
try {
// kode yang mungkin bermasalah
} catch (error) {
// kode untuk menangani kesalahan
}
11. Soal: Apa fungsi dari blok finally?
Jawaban: Kode di dalam blok finally akan selalu dieksekusi, terlepas dari apakah ada
kesalahan atau tidak.
About us Contact
avaScript Operators, Methods, and Keywords
1.5. Complete and debug code that interacts with the Browser Object Model (BOM)
BOM adalah representasi peramban (browser) yang memungkinkan JavaScript berinteraksi
dengannya.
• Dialogs: Gunakan alert(), prompt(), dan confirm() untuk menampilkan kotak dialog
kepada pengguna.
• Ukuran Layar: Properti seperti [Link] dan [Link] dapat
digunakan untuk mendapatkan dimensi jendela peramban.
About us Contact
avaScript Operators, Methods, and Keywords
1.5. Complete and debug code that interacts with the Browser Object Model (BOM)
12. Soal: Tulis kode untuk menampilkan kotak dialog peringatan dengan pesan
"Hello World!".
Jawaban: alert("Hello World!");
13. Soal: Bagaimana cara mendapatkan lebar jendela browser saat ini?
Jawaban: [Link]
About us Contact
2. Variables, Data Types, and Functions
Bagian ini membahas cara menyimpan dan mengelola data menggunakan variabel
dan tipe data, serta cara membuat fungsi yang dapat digunakan kembali.
2.1. Declare and use variables of primitive data types
Variabel adalah "wadah" untuk menyimpan data.
• Tipe Data Primitif:
• Number: Untuk bilangan (integer, float). Contoh: let age = 30;
• String: Untuk teks. Bisa menggunakan petik tunggal (') atau petik ganda ("). Contoh: let name = "Budi";
• Boolean: Hanya bisa true atau false. Contoh: let isRaining = true;
• null: Menunjukkan nilai yang sengaja kosong.
• undefined: Nilai default dari variabel yang belum diberi nilai.
• Konversi Tipe: Fungsi seperti parseInt() dan parseFloat() digunakan untuk mengubah string menjadi angka.
• Operator typeof: Berguna untuk memeriksa tipe data dari sebuah variabel. Contoh: typeof "Hello" akan menghasilkan
"string".
• 'use strict': Menempatkan JavaScript dalam mode "ketat", yang mencegah beberapa "kesalahan diam" dan memaksa
praktik pengkodean yang lebih baik.
About us Contact
2. Variables, Data Types, and Functions
2.1. Declare and use variables of primitive data types
14. Soal: Sebutkan empat tipe data primitif di JavaScript.
o Jawaban: Number, String, Boolean, null, undefined.
15. Soal: Apa perbedaan antara == dan ===?
o Jawaban: == membandingkan nilai saja (dengan konversi tipe), sedangkan === membandingkan nilai
dan tipe data.
16. Soal: Apa output dari typeof null?
o Jawaban: object (Ini adalah bug bersejarah di JavaScript, tetapi penting untuk diketahui).
17. Soal: Tulis kode untuk mengubah string "25" menjadi number.
o Jawaban: parseInt("25") atau Number("25")
About us Contact
2. Variables, Data Types, and Functions
2.2. Declare and use arrays
Array adalah daftar terurut dari nilai-nilai.
• Array Satu Dimensi: let fruits = ["Apel", "Jeruk", "Mangga"];
• Array Multi-Dimensi: Array di dalam array. Contoh: let matrix = [[1, 2], [3, 4]];
• Metode Array Penting:
o push(): Menambahkan elemen ke akhir array.
o pop(): Menghapus elemen terakhir.
o shift(): Menghapus elemen pertama.
o unshift(): Menambahkan elemen ke awal.
o length: Properti untuk mengetahui jumlah elemen.
• Mengakses Elemen: Gunakan indeks berbasis nol. Contoh: fruits[0] akan
menghasilkan "Apel".
About us Contact
2. Variables, Data Types, and Functions
2.2. Declare and use arrays
18. Soal: Buat array bernama buah dengan elemen 'Apel', 'Pisang', dan 'Jeruk'.
o Jawaban: const buah = ['Apel', 'Pisang', 'Jeruk'];
19. Soal: Bagaimana cara menambahkan elemen 'Mangga' ke akhir array buah?
o Jawaban: [Link]('Mangga');
20. Soal: Bagaimana cara mengakses elemen pertama dari array buah?
o Jawaban: buah[0]
21. Soal: Tulis kode untuk menghapus elemen terakhir dari array buah.
o Jawaban: [Link]();
22. Soal: Apa properti yang digunakan untuk mendapatkan jumlah elemen dalam
array?
o Jawaban: .length
About us Contact
2. Variables, Data Types, and Functions
2.3. Complete and debug code that uses objects
Objek adalah kumpulan properti dan metode.
• Properti: Pasangan kunci-nilai. Contoh: [Link] = "Budi";
• Metode: Fungsi yang terkait dengan objek.
• Objek Bawaan Date: Digunakan untuk bekerja dengan tanggal dan waktu. Anda
bisa mengambil bagian-bagian tanggal (tahun, bulan, hari) dan melakukan
operasi matematika pada tanggal.
About us Contact
2. Variables, Data Types, and Functions
2.3. Complete and debug code that uses objects
23. Soal: Buat objek bernama siswa dengan properti nama (isi "Budi") dan kelas (isi
"10A").
o Jawaban: const siswa = { nama: 'Budi', kelas: '10A' };
24. Soal: Bagaimana cara mengakses nilai properti nama dari objek siswa?
o Jawaban: [Link] atau siswa['nama']
25. Soal: Tulis kode untuk mendapatkan tahun saat ini menggunakan objek Date.
o Jawaban: const sekarang = new Date(); [Link]();
About us Contact
2. Variables, Data Types, and Functions
2.4. Complete and debug code that uses built-in Math functions
JavaScript memiliki objek Math untuk melakukan operasi matematika.
• [Link](): Menghasilkan angka acak antara 0 (inklusif) dan 1 (eksklusif).
• [Link](): Membulatkan angka ke bilangan bulat terdekat.
• [Link](): Membulatkan angka ke bawah.
• [Link](): Membulatkan angka ke atas.
• [Link]() dan [Link](): Menemukan nilai minimum atau maksimum dari
serangkaian angka.
About us Contact
2. Variables, Data Types, and Functions
2.4. Complete and debug code that uses built-in Math functions
26. Soal: Apa fungsi yang digunakan untuk membulatkan angka 4.7 ke bilangan
bulat terdekat?
o Jawaban: [Link](4.7)
27. Soal: Tulis kode untuk mendapatkan angka acak antara 0 dan 1.
o Jawaban: [Link]();
28. Soal: Bagaimana cara menghitung akar kuadrat dari 81?
o Jawaban: [Link](81);
About us Contact
2. Variables, Data Types, and Functions
2.5. Complete and debug functions that accept parameters and return
values
Fungsi adalah blok kode yang dapat digunakan kembali.
• Parameter: Nilai yang diteruskan ke fungsi saat dipanggil.
• Nilai Kembali (Return Value): Nilai yang dihasilkan fungsi.
• Cakupan (Scope):
• Lokal: Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses di
dalam fungsi tersebut.
• Global: Variabel yang dideklarasikan di luar fungsi dapat diakses dari mana
saja.
About us Contact
2. Variables, Data Types, and Functions
2.5. Complete and debug functions that accept parameters and return
values
29. Soal: Buat fungsi bernama sapa yang menerima satu parameter nama dan mencetak "Halo,
[nama]!" ke konsol.
o Jawaban:
JavaScript
function sapa(nama) {
[Link]("Halo, " + nama + "!");
}
30. Soal: Apa perbedaan antara scope lokal dan global?
o Jawaban: Variabel global dapat diakses dari mana saja, sementara variabel lokal hanya dapat
diakses di dalam fungsi di mana ia dideklarasikan.
31. Soal: Tulis fungsi yang mengembalikan (return) hasil perkalian dua angka.
o Jawaban: function kali(a, b) { return a * b; }
About us Contact
3. Decisions and Loops
Bagian ini membahas cara mengontrol alur eksekusi kode berdasarkan kondisi
tertentu.
3.1. Evaluate expressions that use logical and comparison operators
• Perbandingan: == (sama dengan), != (tidak sama dengan), < (lebih kecil), > (lebih besar), <=
(lebih kecil atau sama), >= (lebih besar atau sama).
• Logika: && (AND), || (OR), ! (NOT).
About us Contact
3. Decisions and Loops
3.2. Complete and debug decision statements
• if: Mengeksekusi blok kode jika suatu kondisi benar.
• if...else: Mengeksekusi satu blok kode jika kondisi benar dan blok kode lain jika kondisi
salah.
• switch: Digunakan untuk memeriksa beberapa kondisi yang berbeda dengan lebih ringkas
daripada menggunakan banyak if...else if.
About us Contact
3. Decisions and Loops
3.3. Complete and debug loops
Digunakan untuk mengulang blok kode berulang kali.
• for: Digunakan ketika Anda tahu berapa kali perulangan harus dijalankan.
• while: Berlanjut selama kondisi tertentu true.
• do...while: Mirip dengan while, tetapi blok kode dieksekusi setidaknya sekali sebelum
kondisi diperiksa.
• for...in: Berulang di atas properti-properti sebuah objek.
• break: Menghentikan perulangan.
• continue: Melompati satu iterasi perulangan dan melanjutkan ke iterasi berikutnya.
About us Contact
4. Document Object Model
DOM adalah representasi struktur halaman web sebagai pohon (tree). JavaScript
dapat memanipulasi DOM untuk mengubah isi, gaya, dan struktur halaman secara
dinamis.
4.1. Identify and construct the Document Object Model (DOM) tree
window: Objek global yang mewakili jendela peramban.
document: Objek utama yang mewakili seluruh halaman web.
body: Tag <body> dari HTML.
About us Contact
4. Document Object Model
4.2. Identify and handle document,
form, keyboard, and mouse events
Events adalah tindakan atau kejadian yang
terjadi pada halaman web, seperti klik
mouse atau penekanan tombol.
About us Contact
4. Document Object Model
4.3. Complete and debug code that outputs to an HTML document
• [Link](): Menulis langsung ke dokumen. Penggunaannya terbatas dan bisa
menimpa seluruh halaman jika digunakan setelah halaman dimuat.
• innerHTML: Mengubah konten HTML di dalam sebuah elemen.
• textContent: Mengubah konten teks di dalam sebuah elemen, tanpa memproses tag HTML.
About us Contact
4. Document Object Model
4.4. Complete and debug code that locates, modifies, and adds HTML
elements and attributes to documents
• getElementById(): Mengambil satu elemen
berdasarkan ID-nya. Ini adalah cara yang paling
umum dan efisien.
• getElementsByTagName(): Mengambil semua
elemen dengan nama tag tertentu (misalnya p,
h1).
• getElementsByClassName(): Mengambil semua
elemen dengan nama kelas tertentu.
• createElement(): Membuat elemen HTML baru.
• setAttribute(): Menambah atau mengubah
atribut sebuah elemen.
About us Contact
4. Document Object Model
4.5. Create events using event handlers and listeners
• addEventListener(): Metode modern dan direkomendasikan untuk mendaftarkan penangan
event ke sebuah elemen. Ini memungkinkan beberapa fungsi event untuk terikat pada
event yang sama.
const tombol =
[Link]('myButton');
// Menambahkan event listener untuk
event 'click'
[Link]('click', function() {
[Link]('Tombol telah diklik!');
});
About us Contact
4. Document Object Model
4.1. Identify and construct the Document Object Model (DOM) tree
41. Soal: Objek DOM apa yang mewakili seluruh halaman HTML?
Jawaban: document
42. Soal: Objek DOM apa yang mewakili jendela browser?
Jawaban: window
4.2. Identify and handle document, form, keyboard, and mouse events
43. Soal: Apa event yang paling umum untuk menangani klik mouse?
Jawaban: onclick
44. Soal: Sebutkan dua event yang terkait dengan input keyboard.
Jawaban: onkeydown, onkeyup, atau onkeypress.
About us Contact
4. Document Object Model
4.3. Complete and debug code that outputs to an HTML document
45. Soal: Tulis kode untuk mengubah konten teks dari elemen dengan id judul menjadi "Halo Dunia".
Jawaban: [Link]('judul').textContent = 'Halo Dunia';
46. Soal: Apa perbedaan antara innerHTML dan textContent?
Jawaban: innerHTML memproses tag HTML, sementara textContent hanya memperlakukan konten
sebagai teks murni.
4.4. Complete and debug code that locates, modifies, and adds HTML
elements and attributes to documents
47. Soal: Tulis kode untuk mendapatkan elemen pertama dengan id item-list.
Jawaban: [Link]('item-list');
48. Soal: Bagaimana cara mendapatkan semua elemen dengan nama tag p?
Jawaban: [Link]('p');
49. Soal: Tulis kode untuk membuat elemen <div> baru.
Jawaban: [Link]('div');
About us Contact
4. Document Object Model
4.5. Create events using event handlers and listeners
50. Soal: Apa metode modern yang direkomendasikan untuk mendaftarkan event handler?
Jawaban: addEventListener()
51. Soal: Tulis kode yang menambahkan event listener click ke sebuah tombol dengan id myButton.
Jawaban:
JavaScript
const myButton = [Link]('myButton');
[Link]('click', function() {
// kode yang akan dijalankan
});
About us Contact
5. HTML Forms
Bagian ini berfokus pada cara JavaScript berinteraksi dengan formulir HTML untuk
mengambil input, memvalidasi data, dan mengelola proses pengiriman.
5.1. Complete and debug code that retrieves form input and sets form field values
• Anda bisa mengakses nilai dari elemen formulir (seperti <input>, <textarea>, <select>)
dengan mengidentifikasi elemen tersebut menggunakan DOM dan kemudian mengakses
properti .value.
• Praktik Umum: Mengambil nilai dari sebuah <input> dengan
[Link]('inputId').value.
About us Contact
5. HTML Forms
5.2. Complete and debug code that performs input validation
Validasi input sangat penting untuk memastikan data yang dikirimkan valid.
Contoh Validasi:
• Memastikan bidang tidak kosong (value !== "").
• Memeriksa apakah input adalah angka (isNaN(value)).
• Membandingkan string (misalnya, untuk memastikan kata sandi cocok).
About us Contact
5. HTML Forms
5.3. Complete and debug code that performs input validation
• onsubmit: Event yang terjadi ketika formulir dikirim. Anda dapat menggunakan
[Link]() di dalam penangan event ini untuk menghentikan pengiriman
formulir dan melakukan validasi terlebih dahulu.
• POST vs. GET:
• GET: Mengirim data formulir sebagai bagian dari URL. Cocok untuk data non-sensitif
(misalnya, pencarian).
• POST: Mengirim data formulir di dalam badan (body) permintaan HTTP. Lebih aman dan
cocok untuk data sensitif seperti kata sandi atau informasi pribadi.
About us Contact
5. HTML Forms
5.1 Mengambil Nilai Formulir
52. Soal: Diberikan input HTML <input type="text" id="namaPengguna">, bagaimana cara
mendapatkan nilai yang diketikkan pengguna?
Jawaban: [Link]('namaPengguna').value
5.2 Mengambil Nilai Formulir
53. Soal: Tulis kondisi if untuk memeriksa apakah nilai variabel inputNama kosong.
Jawaban: if (inputNama === '')
54. Soal: Apa yang dilakukan oleh fungsi isNaN()?
Jawaban: Mengembalikan true jika nilai bukan angka (Not a Number), dan false jika itu
angka.
About us Contact
5. HTML Forms
5.3 Proses Pengiriman Formulir
55. Soal: Bagaimana cara mencegah formulir melakukan pengiriman default (yaitu, memuat
ulang halaman)?
o Jawaban: Menggunakan [Link]() dalam event handler submit.
About us Contact
Thank You
See You Next Time...