Tutorial Coding JavaScript Dasar Panduan Lengkap

Tutorial Coding JavaScript Dasar ini akan memandu Anda dalam perjalanan menguasai dasar-dasar pemrograman JavaScript, bahasa pemrograman yang mendasari interaktivitas di sebagian besar situs web modern. Dari “Hello, World!” hingga manipulasi DOM, kita akan menjelajahi konsep kunci seperti variabel, tipe data, operator, struktur kontrol, fungsi, array, dan objek. Siap untuk memulai petualangan coding Anda?

Dengan penjelasan yang lugas dan contoh kode yang mudah dipahami, tutorial ini dirancang untuk pemula. Anda akan mempelajari perbedaan antara JavaScript, Java, dan jQuery, serta lima fitur utama JavaScript yang membuatnya unik. Setelah menyelesaikan tutorial ini, Anda akan memiliki pemahaman yang kuat tentang dasar-dasar JavaScript dan siap untuk mengembangkan proyek web interaktif Anda sendiri.

Pengantar JavaScript Dasar: Tutorial Coding JavaScript Dasar

JavaScript merupakan bahasa pemrograman yang sangat populer dan mendominasi dunia pengembangan web. Kehadirannya telah merevolusi cara kita berinteraksi dengan situs web, mengubahnya dari halaman statis menjadi aplikasi interaktif yang dinamis. Tutorial ini akan memberikan pengantar dasar tentang JavaScript, mencakup sejarah singkat, perbedaannya dengan bahasa pemrogragan lain, dan beberapa fitur utamanya.

Sejarah Singkat JavaScript dan Penggunaannya

JavaScript pertama kali diperkenalkan oleh Brendan Eich di Netscape pada tahun 1995. Awalnya bernama Mocha, kemudian berubah menjadi LiveScript, dan akhirnya dikenal sebagai JavaScript. Tujuan utamanya adalah untuk menambahkan interaktivitas ke halaman web, memungkinkan elemen-elemen halaman untuk bereaksi terhadap aksi pengguna. Seiring berjalannya waktu, JavaScript berkembang pesat dan kini digunakan tidak hanya untuk pengembangan web front-end (antarmuka pengguna yang terlihat oleh pengguna), tetapi juga untuk back-end (logika server) melalui Node.js, serta pengembangan aplikasi mobile dan desktop.

Perbedaan JavaScript, Java, dan jQuery

Meskipun namanya mirip, JavaScript dan Java adalah bahasa pemrograman yang berbeda. Java adalah bahasa pemrograman yang berorientasi objek dan umumnya digunakan untuk pengembangan aplikasi yang lebih kompleks, termasuk aplikasi desktop dan mobile. JavaScript, di sisi lain, lebih berfokus pada manipulasi dokumen HTML dan interaksi pengguna di dalam browser web. jQuery, bukanlah bahasa pemrograman, melainkan sebuah library JavaScript yang menyederhanakan penulisan kode JavaScript untuk manipulasi DOM (Document Object Model) dan efek animasi.

Contoh Program “Hello, World!” dalam JavaScript

Berikut contoh program sederhana “Hello, World!” dalam JavaScript:

<script>
  console.log("Hello, World!");
</script>

Kode ini akan menampilkan teks “Hello, World!” di konsol browser. Untuk melihatnya, buka tools developer di browser (biasanya dengan menekan F12).

Tabel Perbandingan Tipe Data JavaScript

JavaScript memiliki beberapa tipe data dasar. Berikut tabel perbandingan untuk tipe data Number, String, dan Boolean:

Nama Tipe Data	Deskripsi	Contoh	Metode Umum
Number	Representasi angka, baik bilangan bulat maupun desimal.	10, 3.14, -5	toString(), toFixed()
String	Representasi teks atau karakter.	“Hello”, ‘JavaScript’, `123`	length, toUpperCase(), toLowerCase(), substring()
Boolean	Nilai kebenaran, hanya memiliki dua nilai: true atau false.	true, false	Tidak ada metode khusus, digunakan dalam kondisi percabangan.

Lima Fitur Utama JavaScript

Beberapa fitur utama JavaScript yang membedakannya dari bahasa pemrograman lain meliputi:

• Dinamis dan bertipe lemah: Tidak perlu mendeklarasikan tipe data variabel secara eksplisit. Tipe data ditentukan secara otomatis saat runtime.
• Dukungan untuk pemrograman berorientasi objek (OOP): Memungkinkan pembuatan objek dan kelas, meskipun dengan pendekatan yang lebih fleksibel dibandingkan bahasa OOP murni seperti Java atau C++.
• Fungsi sebagai first-class citizen: Fungsi dapat ditangani seperti variabel, dilewatkan sebagai argumen ke fungsi lain, dan dikembalikan sebagai nilai dari fungsi.
• Manipulasi DOM: Kemampuan untuk memanipulasi struktur dan konten halaman web secara dinamis.
• Dukungan event handling: Memungkinkan respon terhadap aksi pengguna, seperti klik tombol atau perubahan nilai input.

Variabel dan Tipe Data

Dalam pemrograman JavaScript, variabel merupakan wadah untuk menyimpan data. Pemahaman yang baik tentang variabel dan tipe data merupakan fondasi penting untuk membangun program yang handal dan efisien. Bagian ini akan menjelaskan cara mendeklarasikan variabel, perbedaan antara metode deklarasi, serta berbagai tipe data yang tersedia di JavaScript beserta cara mengubahnya.

Deklarasi Variabel dengan var, let, dan const, Tutorial Coding JavaScript Dasar

JavaScript menyediakan tiga untuk mendeklarasikan variabel: var, let, dan const. Meskipun ketiganya digunakan untuk menyimpan data, terdapat perbedaan signifikan dalam hal scope dan hoisting.

• var: Deklarasi variabel menggunakan var memiliki scope fungsi. Artinya, variabel yang dideklarasikan dengan var dapat diakses dari mana saja di dalam fungsi tempat ia dideklarasikan, bahkan sebelum deklarasi tersebut. Contoh:
  
  var x = 10;
  function myFunc()
  var y = 20;
  console.log(x); // Output: 10 (akses dari luar fungsi)
  console.log(y); // Output: 20

  myFunc();
  console.log(y); // Error: y is not defined (tidak dapat diakses di luar fungsi)
  

• let: Variabel yang dideklarasikan dengan let memiliki scope blok. Artinya, variabel hanya dapat diakses di dalam blok kode (dibatasi oleh kurung kurawal ) tempat ia dideklarasikan. let tidak mengalami hoisting, sehingga variabel harus dideklarasikan sebelum digunakan. Contoh:
  
  let a = 5;
  if (true)
  let b = 15;
  console.log(a); // Output: 5
  console.log(b); // Output: 15

  console.log(b); // Error: b is not defined (tidak dapat diakses di luar blok)
  

• const: Variabel yang dideklarasikan dengan const bersifat konstan, artinya nilainya tidak dapat diubah setelah diinisialisasi. const juga memiliki scope blok dan tidak mengalami hoisting. Contoh:
  
const PI = 3.14159;
// PI = 3.14; // Error: Assignment to constant variable.


Perbedaan var, let, dan const: Scope dan Hoisting

Perbedaan utama antara var, let, dan const terletak pada scope dan hoisting. Scope menentukan di mana variabel dapat diakses dalam program. Hoisting adalah mekanisme JavaScript yang memindahkan deklarasi variabel ke bagian atas scope-nya sebelum kode dieksekusi. var mengalami hoisting, sedangkan let dan const tidak. Hal ini dapat menyebabkan perilaku yang tidak terduga jika tidak dipahami dengan baik.

Contoh Tipe Data: Number, String, Boolean, Null, dan Undefined

JavaScript memiliki beberapa tipe data bawaan. Berikut contoh masing-masing:

Tipe Data	Contoh	Penjelasan
Number	let angka = 10;	Representasi angka, baik bilangan bulat maupun desimal.
String	let teks = "Hello, world!";	Representasi teks, diapit oleh tanda petik tunggal (‘ ‘) atau ganda (” “).
Boolean	let benar = true; let salah = false;	Nilai kebenaran, hanya true atau false.
Null	let kosong = null;	Menunjukkan nilai yang sengaja dikosongkan.
Undefined	let tidakDiinisialisasi;	Menunjukkan variabel yang dideklarasikan tetapi belum diberi nilai.

Type Coercion dalam JavaScript

Type coercion adalah proses otomatis konversi tipe data dalam JavaScript. Misalnya, ketika Anda menambahkan sebuah string dan angka, JavaScript akan secara otomatis mengkonversi string tersebut menjadi angka sebelum melakukan penjumlahan. Namun, ini dapat menyebabkan hasil yang tidak terduga jika tidak hati-hati. Contoh:


let hasil = 10 + "5"; // Hasilnya 105 (string) karena "5" dikonversi menjadi string
let hasil2 = 10 + parseInt("5"); // Hasilnya 15 (number) karena parseInt mengubah string "5" menjadi angka 5


Konversi Tipe Data: String ke Number dan Sebaliknya

Kita dapat secara eksplisit mengubah tipe data String menjadi Number dan sebaliknya menggunakan fungsi-fungsi bawaan JavaScript.

• String ke Number: Gunakan parseInt() untuk mengubah string menjadi bilangan bulat, atau parseFloat() untuk mengubah string menjadi bilangan desimal. Contoh:
  
let angkaString = "123";
let angka = parseInt(angkaString); // angka = 123 (number)
let angkaDesimalString = "3.14";
let angkaDesimal = parseFloat(angkaDesimalString); // angkaDesimal = 3.14 (number)

• Number ke String: Gunakan metode toString(). Contoh:
  
let angka = 456;
let angkaString = angka.toString(); // angkaString = "456" (string)


Operator dan Ekspresi

Operator dan ekspresi merupakan elemen fundamental dalam pemrograman JavaScript. Pemahaman yang baik tentang bagaimana operator bekerja dan bagaimana ekspresi dievaluasi sangat penting untuk menulis kode yang benar dan efisien. Bagian ini akan membahas berbagai jenis operator dalam JavaScript, termasuk contoh penggunaannya.

Operator Aritmatika, Perbandingan, dan Logika

JavaScript menyediakan berbagai operator untuk melakukan operasi matematika, perbandingan, dan logika. Operator aritmatika digunakan untuk melakukan perhitungan numerik, operator perbandingan untuk membandingkan nilai, dan operator logika untuk menggabungkan atau memanipulasi nilai boolean (benar atau salah).

• Operator Aritmatika: + (penjumlahan), - (pengurangan), * (perkalian), / (pembagian), % (modulo – sisa bagi), (pangkat).
• Contoh: let hasil = 10 + 5; // hasil = 15
• Operator Perbandingan: == (sama dengan), != (tidak sama dengan), === (sama dengan secara ketat, termasuk tipe data), !== (tidak sama dengan secara ketat), > (lebih besar dari), < (lebih kecil dari), >= (lebih besar dari atau sama dengan), <= (lebih kecil dari atau sama dengan).
• Contoh: let hasilPerbandingan = (5 > 2); // hasilPerbandingan = true
• Operator Logika: && (AND - dan), || (OR - atau), ! (NOT - negasi).
• Contoh: let hasilLogika = (5 > 2 && 10 < 20); // hasilLogika = true

Operator Assignment, Increment, dan Decrement

Operator assignment digunakan untuk memberikan nilai ke variabel. Operator increment dan decrement digunakan untuk menambah atau mengurangi nilai variabel dengan 1.

• Operator Assignment: =, +=, -=, *=, /=, %=
• Contoh: let x = 10; x += 5; // x = 15
• Operator Increment: ++ (pre-increment dan post-increment)
• Contoh: let y = 5; let z = ++y; // y = 6, z = 6 (pre-increment)
• Operator Decrement: -- (pre-decrement dan post-decrement)
• Contoh: let a = 5; let b = a--; // a = 4, b = 5 (post-decrement)

Operator Conditional (Ternary Operator)

Operator ternary adalah operator yang singkat untuk pernyataan if-else. Sintaksnya adalah: kondisi ? nilaiJikaBenar : nilaiJikaSalah

• Contoh: let umur = 20; let status = (umur >= 18) ? "Dewasa" : "Anak-anak"; // status = "Dewasa"

Operator Bitwise

Operator bitwise melakukan operasi pada bit individual dari bilangan integer. Operator ini kurang umum digunakan dalam JavaScript modern, tetapi dapat berguna dalam situasi tertentu, misalnya untuk manipulasi data pada tingkat bit.

• Operator Bitwise: & (AND), | (OR), ^ (XOR), ~ (NOT), << (left shift), >> (right shift), >>> (unsigned right shift)
• Contoh: let a = 5; let b = 3; let hasilBitwise = a & b; // hasilBitwise = 1 (karena 5 = 101 dan 3 = 011, maka 101 & 011 = 001)

Operator Precedence dan Associativity

Operator precedence menentukan urutan operasi dalam ekspresi kompleks. Associativity menentukan bagaimana operator dengan precedence yang sama dievaluasi (dari kiri ke kanan atau dari kanan ke kiri).

• Contoh: let hasil = 10 + 5 * 2; // hasil = 20 (perkalian diprioritaskan)
• let hasil2 = 10 / 2 * 5; // hasil2 = 25 (pembagian dan perkalian memiliki precedence yang sama, dievaluasi dari kiri ke kanan)

Struktur Kontrol Percabangan

Struktur kontrol percabangan dalam JavaScript memungkinkan program untuk mengambil keputusan berdasarkan kondisi tertentu. Dengan percabangan, alur eksekusi kode dapat diubah secara dinamis, sehingga program dapat merespon berbagai situasi dengan cara yang berbeda. Penggunaan struktur percabangan sangat penting untuk membuat program yang fleksibel dan responsif.

JavaScript menyediakan beberapa cara untuk mengimplementasikan percabangan, antara lain pernyataan if, else if, else, dan switch-case. Penggunaan operator logika seperti AND (&&) dan OR (||) juga sering diintegrasikan dalam statement percabangan untuk menangani kondisi yang lebih kompleks.

Statement if, else if, dan else

Statement if mengeksekusi blok kode hanya jika kondisi yang ditentukan bernilai true. else if menyediakan kondisi alternatif yang diperiksa jika kondisi if sebelumnya bernilai false. else mengeksekusi blok kode jika semua kondisi if dan else if sebelumnya bernilai false.

let angka = 10;

if (angka > 20) 
  console.log("Angka lebih besar dari 20");
 else if (angka > 10) 
  console.log("Angka lebih besar dari 10");
 else 
  console.log("Angka kurang dari atau sama dengan 10");

Contoh di atas akan menampilkan "Angka kurang dari atau sama dengan 10" karena nilai angka adalah 10.

Operator Switch-Case

Statement switch-case menyediakan cara yang lebih ringkas untuk menangani beberapa kondisi yang mungkin terjadi. Ekspresi dalam switch dievaluasi, dan kemudian dibandingkan dengan setiap nilai case. Jika ada kecocokan, blok kode yang sesuai dieksekusi. default akan dieksekusi jika tidak ada case yang cocok.

Tutorial Coding JavaScript Dasar ini akan membantu Anda memahami dasar-dasar pemrograman web. Mempelajari coding, sama seperti hal lainnya, membutuhkan kesabaran dan ketekunan. Ingatlah pentingnya etika dan adab dalam setiap langkah, seperti yang dijelaskan dengan baik di Adab dalam Islam , karena prinsip-prinsip tersebut juga berlaku dalam dunia digital. Dengan mengembangkan etika kerja yang baik, Anda akan lebih mudah untuk berkolaborasi dan menciptakan kode yang berkualitas di Tutorial Coding JavaScript Dasar ini.

Selamat belajar!

let hari = "Senin";

switch (hari) 
  case "Senin":
    console.log("Hari Senin");
    break;
  case "Selasa":
    console.log("Hari Selasa");
    break;
  case "Rabu":
    console.log("Hari Rabu");
    break;
  default:
    console.log("Hari lain");

Kode di atas akan menampilkan "Hari Senin" karena nilai hari adalah "Senin". Pernyataan break penting untuk mencegah kode jatuh ke case berikutnya.

Nested if-else Statement

Pernyataan if-else dapat disarangkan (nested) untuk menangani kondisi yang lebih kompleks. Kondisi dalam if-else yang bersarang akan dievaluasi secara berurutan.

let nilai = 85;
let kehadiran = true;

if (nilai >= 75) 
  if (kehadiran) 
    console.log("Lulus");
   else 
    console.log("Tidak Lulus karena ketidakhadiran");
  
 else 
  console.log("Tidak Lulus karena nilai kurang");

Contoh ini menunjukkan bagaimana nested if-else digunakan untuk menentukan kelulusan siswa berdasarkan nilai dan kehadiran.

Operator Logical AND dan OR dalam Statement if

Operator logika AND (&&) dan OR (||) memungkinkan kita untuk menggabungkan beberapa kondisi dalam statement if. Kondisi dengan AND hanya bernilai true jika semua kondisi penyusunnya bernilai true. Kondisi dengan OR bernilai true jika setidaknya satu kondisi penyusunnya bernilai true.

let usia = 20;
let memilikiSIM = true;

if (usia >= 17 && memilikiSIM) 
  console.log("Anda diperbolehkan mengemudi");


if (usia < 17 || !memilikiSIM) 
  console.log("Anda tidak diperbolehkan mengemudi");

Contoh ini menunjukkan penggunaan operator AND dan OR untuk menentukan apakah seseorang diperbolehkan mengemudi.

Operator Short-Circuit Evaluation

Operator short-circuit evaluation adalah sebuah fitur di mana JavaScript menghentikan evaluasi ekspresi logika jika hasilnya sudah dapat ditentukan. Pada operator AND, jika kondisi pertama bernilai false, kondisi selanjutnya tidak akan dievaluasi. Pada operator OR, jika kondisi pertama bernilai true, kondisi selanjutnya tidak akan dievaluasi.

let a = 0;
let b = 10 / a; // Ini akan menghasilkan error jika a = 0

if (a !== 0 && b > 5) 
  console.log("Kondisi terpenuhi");
 else 
  console.log("Kondisi tidak terpenuhi");

Pada contoh ini, karena a bernilai 0, maka kondisi a !== 0 bernilai false. Oleh karena itu, JavaScript tidak akan mengevaluasi b > 5 dan menghindari error pembagian dengan nol. Ini adalah contoh sederhana, pada kasus yang lebih kompleks, short-circuit evaluation dapat meningkatkan efisiensi dan mencegah error.

Struktur Kontrol Perulangan

Struktur kontrol perulangan dalam JavaScript memungkinkan kita untuk menjalankan blok kode berulang kali selama kondisi tertentu terpenuhi. Hal ini sangat berguna untuk mengotomatiskan tugas-tugas repetitif dan memproses data secara efisien. Kita akan membahas tiga jenis perulangan utama: for, while, dan do-while, serta bagaimana memanfaatkan break dan continue untuk mengontrol alur perulangan, dan bagaimana membangun perulangan bersarang (nested loop).

Perulangan For

Perulangan for ideal untuk situasi di mana kita tahu jumlah iterasi yang dibutuhkan di awal. Sintaksnya terdiri dari tiga bagian: inisialisasi, kondisi, dan ekspresi increment/decrement. Perulangan akan terus berjalan selama kondisi bernilai true.

Contoh mencetak angka 1 sampai 10:

for (let i = 1; i <= 10; i++) 
  console.log(i);

Perulangan While

Perulangan while menjalankan blok kode selama kondisi tertentu bernilai true. Berbeda dengan for, kita tidak perlu menentukan jumlah iterasi di awal. Kondisi diperiksa sebelum setiap iterasi.

Contoh membaca input pengguna hingga angka 0 dimasukkan:

let angka;
do 
  angka = parseInt(prompt("Masukkan angka (0 untuk berhenti):"));
  if (!isNaN(angka)) 
    console.log("Angka yang dimasukkan: " + angka);
   else 
    console.log("Input tidak valid. Masukkan angka.");
  
 while (angka !== 0);

Perulangan Do-While

Perulangan do-while mirip dengan while, tetapi dengan perbedaan penting: blok kode dijalankan setidaknya sekali sebelum kondisi diperiksa. Kondisi diperiksa setelah setiap iterasi.

Tutorial Coding JavaScript Dasar akan membantu Anda memahami dasar-dasar pemrograman web. Setelah menguasai konsep dasar, Anda bisa mengembangkan aplikasi yang lebih kompleks, misalnya aplikasi untuk mengelola data bisnis. Bayangkan, Anda bisa membuat sistem pelaporan keuangan yang handal dengan Aplikasi Pengelola Keuangan Bisnis yang terintegrasi dengan baik. Dengan kemampuan JavaScript, Anda dapat menambahkan fitur interaktif dan dinamis ke aplikasi tersebut, sehingga pengelolaan keuangan bisnis menjadi lebih efisien dan mudah dipahami.

Jadi, pelajari Tutorial Coding JavaScript Dasar sekarang juga untuk membuka peluang pengembangan aplikasi yang lebih luas!

Contoh: Meskipun kurang umum dibandingkan while, do-while berguna saat kita ingin memastikan kode di dalam loop dieksekusi minimal satu kali, misalnya dalam konteks validasi input.

Penggunaan Break dan Continue

break dan continue digunakan untuk mengontrol alur perulangan. break menghentikan perulangan sepenuhnya, sedangkan continue melompat ke iterasi berikutnya.

for (let i = 1; i <= 10; i++) 
  if (i === 5) 
    break; // Menghentikan perulangan saat i = 5
  
  console.log(i);


for (let i = 1; i <= 10; i++) 
  if (i % 2 === 0) 
    continue; // Melewati iterasi jika i genap
  
  console.log(i);

Nested Loop (Perulangan Bersarang)

Nested loop adalah perulangan di dalam perulangan. Ini sering digunakan untuk memproses data multidimensi atau menghasilkan pola. Contoh mencetak pola bintang segitiga:

for (let i = 1; i <= 5; i++) 
  let bintang = '';
  for (let j = 1; j <= i; j++) 
    bintang += '*';
  
  console.log(bintang);

Kode di atas akan menghasilkan output berupa segitiga bintang seperti berikut:

*

*

*

Fungsi

Fungsi dalam JavaScript adalah blok kode yang dapat digunakan kembali untuk melakukan tugas tertentu. Penggunaan fungsi meningkatkan efisiensi dan keterbacaan kode program. Dengan fungsi, kita dapat memecah kode kompleks menjadi bagian-bagian yang lebih kecil dan terorganisir, sehingga lebih mudah untuk dipahami, diuji, dan dipelihara.

Mendefinisikan dan Memanggil Fungsi

Mendefinisikan fungsi dalam JavaScript diawali dengan kata kunci function, diikuti dengan nama fungsi, parameter (jika ada dalam kurung), dan blok kode yang diapit oleh kurung kurawal . Untuk memanggil fungsi, cukup tulis nama fungsi diikuti dengan kurung dan argumen (jika ada).

Berikut contoh sederhana:


function sapa(nama)
console.log("Halo, " + nama + "!");

sapa("Andi"); // Memanggil fungsi sapa dengan argumen "Andi"

Kode di atas mendefinisikan fungsi sapa yang menerima satu parameter, nama, dan menampilkan pesan salam ke konsol. Fungsi tersebut kemudian dipanggil dengan argumen "Andi", sehingga akan menampilkan "Halo, Andi!" di konsol.

Fungsi dengan Parameter dan Nilai Kembali

Fungsi dapat menerima parameter sebagai input dan mengembalikan nilai sebagai output. Kata kunci return digunakan untuk mengembalikan nilai dari fungsi.


function jumlahkan(a, b)
return a + b;

let hasil = jumlahkan(5, 3); // Memanggil fungsi dan menyimpan hasilnya ke variabel hasil
console.log(hasil); // Menampilkan 8

Fungsi jumlahkan menerima dua parameter, a dan b, dan mengembalikan jumlah keduanya. Hasil pemanggilan fungsi disimpan dalam variabel hasil dan kemudian ditampilkan.

Fungsi Anonymous dan Arrow Function

Fungsi anonymous adalah fungsi yang tidak memiliki nama. Fungsi ini sering digunakan sebagai argumen untuk fungsi lain atau sebagai nilai variabel. Arrow function adalah sintaksis yang lebih ringkas untuk mendefinisikan fungsi anonymous.


// Fungsi anonymous
let tambah = function(x, y)
return x + y;
;

// Arrow function
let kali = (x, y) => x * y;

console.log(tambah(2, 3)); // Menampilkan 5
console.log(kali(2, 3)); // Menampilkan 6

Contoh di atas menunjukkan fungsi anonymous tambah dan arrow function kali. Arrow function lebih ringkas karena menghilangkan kata kunci function dan kurung kurawal jika hanya terdiri dari satu baris kode.

Fungsi Rekursif

Fungsi rekursif adalah fungsi yang memanggil dirinya sendiri. Hal ini berguna untuk menyelesaikan masalah yang dapat dipecah menjadi sub-masalah yang lebih kecil dan serupa. Penting untuk memastikan adanya kondisi berhenti untuk mencegah rekursi tak terhingga.


function faktorial(n)
if (n === 0)
return 1;
else
return n * faktorial(n - 1);

console.log(faktorial(5)); // Menampilkan 120

Fungsi faktorial menghitung faktorial dari suatu bilangan. Fungsi ini memanggil dirinya sendiri hingga mencapai kondisi berhenti (n === 0).

Scope dan Closure dalam Fungsi

Scope menentukan aksesibilitas variabel. Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses di dalam fungsi tersebut (local scope). Closure terjadi ketika fungsi "mengingat" variabel dari scope luarnya, bahkan setelah fungsi luar tersebut selesai dieksekusi.


function luar()
let x = 10;
function dalam()
console.log(x);

return dalam;

let fungsiDalam = luar();
fungsiDalam(); // Menampilkan 10, meskipun fungsi luar sudah selesai dieksekusi.

Contoh ini menunjukkan closure. Fungsi dalam memiliki akses ke variabel x dari fungsi luar, meskipun luar sudah selesai dieksekusi. Ini karena dalam "menutup" atau "mengingat" variabel x.

Array

Array dalam JavaScript merupakan struktur data yang sangat penting. Ia memungkinkan kita untuk menyimpan koleksi data, baik itu angka, teks, objek, atau bahkan array lainnya, dalam satu variabel. Penggunaan array sangat umum dalam pemrograman, karena memungkinkan kita untuk mengelola dan memanipulasi data secara efisien.

Deklarasi dan Inisialisasi Array

Mendeklarasikan dan menginisialisasi array di JavaScript sangat mudah. Kita bisa menggunakan kurung siku [] untuk membuat array kosong, atau langsung mengisi nilai-nilai di dalamnya. Berikut beberapa contoh:

let arrayKosong = []; // Array kosong
let arrayAngka = [1, 2, 3, 4, 5]; // Array berisi angka
let arrayString = ["apel", "pisang", "jeruk"]; // Array berisi string
let arrayCampuran = [1, "dua", true, nama: "Budi"]; // Array berisi berbagai tipe data

Mengakses Elemen Array Menggunakan Index

Elemen-elemen dalam array diakses menggunakan indeksnya. Indeks dimulai dari 0 untuk elemen pertama, 1 untuk elemen kedua, dan seterusnya. Contoh berikut menunjukkan cara mengakses elemen array:

let angka = [10, 20, 30, 40, 50];
console.log(angka[0]); // Output: 10
console.log(angka[2]); // Output: 30
console.log(angka[angka.length - 1]); // Output: 50 (mengakses elemen terakhir)

Metode Array: `push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `slice()`

JavaScript menyediakan berbagai metode untuk memanipulasi array. Berikut beberapa contoh penggunaan metode yang umum digunakan:

• push(): Menambahkan elemen ke akhir array.
• pop(): Menghapus elemen terakhir dari array.
• shift(): Menghapus elemen pertama dari array.
• unshift(): Menambahkan elemen ke awal array.
• splice(): Menambahkan atau menghapus elemen di posisi tertentu dalam array. Sangat fleksibel.
• slice(): Membuat salinan bagian dari array.

let buah = ["apel", "pisang"];
buah.push("jeruk"); // buah sekarang ["apel", "pisang", "jeruk"]
buah.pop(); // buah sekarang ["apel", "pisang"]
buah.unshift("mangga"); // buah sekarang ["mangga", "apel", "pisang"]
buah.splice(1, 1, "durian"); // buah sekarang ["mangga", "durian", "pisang"]  (mengganti "apel" dengan "durian")
let beberapaBuah = buah.slice(1); // beberapaBuah sekarang ["durian", "pisang"]

Iterasi Array Menggunakan Perulangan `for` dan `forEach()`

Ada beberapa cara untuk melakukan iterasi (pengulangan) pada elemen-elemen array. Perulangan for dan metode forEach() merupakan dua cara yang umum digunakan.

let angka = [1, 2, 3, 4, 5];

// Menggunakan perulangan for
for (let i = 0; i < angka.length; i++) 
  console.log(angka[i]);


// Menggunakan forEach()
angka.forEach(function(angka) 
  console.log(angka);
);

Mencari Elemen dalam Array Menggunakan `indexOf()` dan `includes()`

Metode indexOf() dan includes() digunakan untuk mencari keberadaan suatu elemen dalam array. indexOf() mengembalikan indeks elemen pertama yang ditemukan, atau -1 jika tidak ditemukan. includes() mengembalikan true jika elemen ditemukan, dan false jika tidak.

let huruf = ["a", "b", "c", "d", "a"];
console.log(huruf.indexOf("c")); // Output: 2
console.log(huruf.indexOf("z")); // Output: -1
console.log(huruf.includes("a")); // Output: true
console.log(huruf.includes("e")); // Output: false

Objek

Objek dalam JavaScript merupakan struktur data yang digunakan untuk mengelompokkan data (properti) dan fungsi (method) yang berkaitan. Pemahaman tentang objek sangat penting karena merupakan konsep fundamental dalam pemrograman berorientasi objek dan banyak digunakan dalam pengembangan aplikasi JavaScript modern.

Deklarasi dan Inisialisasi Objek

Objek dapat dideklarasikan dan diinisialisasi dengan dua cara utama. Cara pertama menggunakan literal object notation, yang merupakan cara paling sederhana dan umum digunakan. Cara kedua adalah dengan menggunakan constructor function, yang lebih cocok untuk pembuatan objek yang lebih kompleks dan terstruktur.

Contoh deklarasi dan inisialisasi menggunakan literal object notation:


let mobil =
merk: "Toyota",
model: "Avanza",
tahun: 2023,
warna: "Silver",
start: function()
console.log("Mobil dinyalakan");

;

Contoh ini mendeklarasikan objek bernama `mobil` dengan beberapa properti (merk, model, tahun, warna) dan satu method (start).

Mengakses Properti dan Method Objek

Properti dan method objek dapat diakses menggunakan notasi titik (`.`) atau notasi bracket (`[]`).

Contoh mengakses properti dan method:


console.log(mobil.merk); // Menampilkan "Toyota"
console.log(mobil["model"]); // Menampilkan "Avanza"
mobil.start(); // Menampilkan "Mobil dinyalakan" di konsol


Constructor Function untuk Membuat Objek

Constructor function digunakan untuk membuat objek dengan struktur yang lebih terorganisir, khususnya jika kita ingin membuat banyak objek dengan tipe yang sama. Constructor function menggunakan kata kunci `new` untuk membuat instance baru dari objek.

Contoh penggunaan constructor function:


function Mobil(merk, model, tahun)
this.merk = merk;
this.model = model;
this.tahun = tahun;

let mobil1 = new Mobil("Honda", "Brio", 2022);
let mobil2 = new Mobil("Suzuki", "Ertiga", 2023);

console.log(mobil1.merk); // Menampilkan "Honda"
console.log(mobil2.model); // Menampilkan "Ertiga"

Penggunaan Prototype dalam Objek

Prototype memungkinkan kita untuk menambahkan properti dan method ke objek setelah objek tersebut dibuat. Ini sangat berguna untuk menambahkan fungsionalitas umum ke banyak objek tanpa harus mengulang kode yang sama di setiap objek.

Contoh penggunaan prototype:


Mobil.prototype.getInfo = function()
return "Merk: " + this.merk + ", Model: " + this.model + ", Tahun: " + this.tahun;
;

console.log(mobil1.getInfo()); // Menampilkan informasi mobil1

Mengkloning Objek

Mengkloning objek berarti membuat salinan dari objek yang sudah ada. Metode yang paling umum digunakan adalah dengan menggunakan operator spread (`...`) untuk membuat salinan dangkal (shallow copy).

Contoh mengkloning objek:


let mobil3 = ...mobil1;
mobil3.warna = "Biru"; // Mengubah warna mobil3 tanpa mempengaruhi mobil1

console.log(mobil1.warna); // Menampilkan undefined atau warna awal
console.log(mobil3.warna); // Menampilkan "Biru"

Perlu diingat bahwa operator spread hanya membuat salinan dangkal. Jika objek memiliki properti yang merupakan objek lain, maka objek tersebut akan tetap merujuk ke objek yang sama pada kedua objek yang dikloning.

Manipulasi DOM (Document Object Model)

Document Object Model atau DOM adalah representasi pemrograman dari halaman web HTML. Bayangkan DOM sebagai pohon yang cabang-cabangnya mewakili elemen HTML, atribut, dan teks di halaman tersebut. JavaScript memungkinkan kita untuk berinteraksi dengan "pohon" ini, mengubahnya secara dinamis sesuai kebutuhan. Dengan manipulasi DOM, kita bisa membuat website yang lebih interaktif dan responsif.

Kemampuan untuk memanipulasi DOM membuka pintu bagi berbagai fitur website yang dinamis. Kita bisa mengubah konten, menambahkan elemen baru, mengatur gaya, dan merespon aksi pengguna tanpa perlu me-reload halaman. Hal ini sangat penting untuk menciptakan pengalaman pengguna yang lebih baik dan efisien.

Mengubah Isi Elemen HTML

Mengubah isi elemen HTML sangatlah mudah dengan JavaScript. Kita bisa menggunakan properti innerHTML untuk mengubah konten teks di dalam elemen. Contohnya, jika kita ingin mengubah teks di dalam elemen dengan id "paragraf1", kita bisa menggunakan kode berikut:


document.getElementById("paragraf1").innerHTML = "Teks baru di dalam paragraf.";


Kode di atas akan mencari elemen dengan id "paragraf1" dan mengganti isi teksnya dengan "Teks baru di dalam paragraf".

Menambahkan Elemen HTML Baru

Untuk menambahkan elemen HTML baru, kita perlu terlebih dahulu membuat elemen tersebut menggunakan metode document.createElement(). Setelah elemen dibuat, kita bisa menambahkannya ke dalam DOM menggunakan metode appendChild().

Misalnya, untuk menambahkan sebuah paragraf baru dengan teks "Ini adalah paragraf baru" ke dalam elemen dengan id "container", kita bisa menggunakan kode berikut:


let newParagraph = document.createElement("p");
newParagraph.innerHTML = "Ini adalah paragraf baru";
document.getElementById("container").appendChild(newParagraph);


Kode ini akan membuat elemen paragraf baru, menambahkan teks, dan kemudian menambahkannya sebagai anak dari elemen dengan id "container".

Mengubah Atribut Elemen HTML

Selain isi teks, kita juga bisa memanipulasi atribut dari elemen HTML. Kita bisa mengakses dan mengubah atribut menggunakan properti getAttribute() dan setAttribute().

Sebagai contoh, untuk mengubah nilai atribut src dari sebuah gambar dengan id "gambar1" menjadi "gambar_baru.jpg", kita bisa menggunakan kode berikut:


document.getElementById("gambar1").setAttribute("src", "gambar_baru.jpg");


Kode ini akan menemukan elemen gambar dengan id "gambar1" dan mengubah atribut src-nya menjadi "gambar_baru.jpg".

Menangani Event Click pada Sebuah Button

Menangani event click pada button memungkinkan kita untuk menjalankan fungsi JavaScript ketika button diklik. Kita bisa menambahkan event listener menggunakan metode addEventListener().

Contohnya, untuk menjalankan fungsi tampilkanPesan() ketika button dengan id "tombol1" diklik, kita bisa menggunakan kode berikut:


document.getElementById("tombol1").addEventListener("click", tampilkanPesan);

function tampilkanPesan()
alert("Tombol diklik!");

Kode ini akan menambahkan event listener ke button dengan id "tombol1". Ketika button diklik, fungsi tampilkanPesan() akan dijalankan, menampilkan pesan alert "Tombol diklik!".

Simpulan Akhir

Selamat! Anda telah menyelesaikan Tutorial Coding JavaScript Dasar. Dengan pengetahuan yang Anda peroleh, Anda sekarang memiliki fondasi yang kuat untuk membangun aplikasi web yang dinamis dan interaktif. Ingatlah bahwa praktik adalah kunci; teruslah berlatih, bereksperimen, dan jangan takut untuk mencoba hal-hal baru. Dunia pengembangan web menanti Anda!