Tutorials Web Development Tips & Tricks

Konsep Dasar Pemrograman – JS (JavaScript)

RyukensDev

Admin

posted on 2 months ago — updated on 1 second ago

53
views

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. JavaScript memungkinkan pengembang untuk menambah interaktivitas pada halaman web seperti animasi, validasi formulir, manipulasi DOM, dan banyak lagi. JavaScript bekerja di sisi klien (browser), yang berarti kode JavaScript dijalankan langsung di browser pengguna tanpa perlu komunikasi dengan server.

JavaScript adalah bahasa yang sangat populer dan sering digunakan bersamaan dengan HTML dan CSS untuk mengembangkan aplikasi web yang dinamis.

Struktur Dasar JavaScript

JavaScript dapat ditulis di dalam file HTML atau di dalam file eksternal. Berikut adalah struktur dasar JavaScript dalam dokumen HTML:

Contoh Internal JavaScript:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>JavaScript Example</title>

</head>

<body>

<h1>Selamat datang di JavaScript!</h1>

<button onclick="greetUser()">Klik Saya</button>

<script>

function greetUser() {

alert('Halo, pengguna!');

}

</script>

</body>

</html>

Pada contoh di atas, JavaScript ditulis di dalam tag <script>. Fungsi greetUser() dipanggil saat pengguna mengklik tombol dan menampilkan pesan menggunakan fungsi alert().

Variabel dan Tipe Data

JavaScript mendukung beberapa tipe data seperti angka, string, dan boolean. Kita dapat menyimpan nilai dalam variabel menggunakan kata kunci let, const, atau var.

let: Digunakan untuk mendeklarasikan variabel yang nilainya bisa berubah.
const: Digunakan untuk mendeklarasikan variabel yang nilainya tidak bisa diubah setelah didefinisikan.
var: Digunakan untuk mendeklarasikan variabel (sekarang lebih jarang digunakan, karena let dan const lebih disarankan).

Contoh:

let name = "John"; // Tipe data String

const age = 25; // Tipe data Number

let isStudent = true; // Tipe data Boolean

Operator dalam JavaScript

JavaScript memiliki berbagai operator untuk melakukan operasi matematika, perbandingan, dan logika.

Operator Aritmatika: Digunakan untuk melakukan operasi matematika.

+, -, *, /, % (modulus)

Contoh:

let x = 10;

let y = 5;

let result = x + y; // 15

Operator Perbandingan: Digunakan untuk membandingkan dua nilai.

==, ===, !=, >, <, >=, <=

Contoh:

10 == 10 // true

10 === "10" // false

Operator Logika: Digunakan untuk membandingkan nilai boolean.

&& (AND), || (OR), ! (NOT)

Contoh:

true && false // false

true || false // true

!true // false

Fungsi (Function)

Fungsi di JavaScript adalah blok kode yang dapat dipanggil dan dieksekusi berulang kali. Fungsi digunakan untuk mengelompokkan kode yang dapat digunakan kembali.

Contoh Fungsi:

function greet() {

console.log("Hello, World!");

}

greet(); // Memanggil fungsi greet

Fungsi juga bisa menerima parameter dan mengembalikan nilai (return).

Contoh Fungsi dengan Parameter dan Return:

function add(a, b) {

return a + b;

}

let result = add(5, 3); // 8

Kontrol Alur (Conditional Statements)

JavaScript memiliki pernyataan kondisional yang memungkinkan kita untuk menjalankan kode berdasarkan kondisi tertentu, seperti if, else, dan switch.

Contoh If Statement:

let age = 18;

if (age >= 18) {

console.log("Anda dewasa");

} else {

console.log("Anda belum dewasa");

}

Looping (Perulangan)

Perulangan digunakan untuk menjalankan blok kode berulang kali. JavaScript mendukung beberapa jenis perulangan, seperti for, while, dan do-while.

Contoh Loop For:

for (let i = 0; i < 5; i++) {

console.log(i);

}

Contoh Loop While:

let i = 0;

while (i < 5) {

console.log(i);

i++;

}

Manipulasi DOM (Document Object Model)

JavaScript memungkinkan kita untuk berinteraksi dengan elemen-elemen HTML di halaman web melalui DOM. Dengan DOM, kita bisa mengubah konten, atribut, dan gaya elemen di halaman web secara dinamis.

Contoh Manipulasi DOM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>DOM Manipulation</title>

</head>

<body>

<h1 id="title">Halo, Dunia!</h1>

<button onclick="changeTitle()">Ubah Judul</button>

<script>

function changeTitle() {

document.getElementById("title").innerHTML = "Judul Telah Diubah!";

}

</script>

</body>

</html>

Pada contoh di atas, JavaScript digunakan untuk mengubah teks dari elemen dengan id="title" setelah pengguna mengklik tombol.

Event Handling

JavaScript memungkinkan kita untuk menangani berbagai jenis event di halaman web, seperti klik tombol, hover, dan perubahan input. Kita dapat menggunakan event listeners untuk menangani interaksi pengguna.

Contoh Event Listener:

<button id="btn">Klik Saya</button>

<script>

document.getElementById("btn").addEventListener("click", function() {

alert("Tombol diklik!");

});

</script>

Kesimpulan

JavaScript adalah bahasa pemrograman yang memungkinkan kita untuk menambahkan interaktivitas dan dinamika pada halaman web. Dengan JavaScript, kita bisa membuat halaman web yang lebih responsif dan interaktif, seperti memanipulasi elemen DOM, menangani event, dan membuat fungsi yang dapat digunakan kembali. Pemahaman dasar tentang variabel, fungsi, operator, kontrol alur, dan manipulasi DOM adalah hal yang penting bagi setiap pengembang web yang ingin menggunakan JavaScript secara efektif.

Dengan mempelajari JavaScript, kita dapat membuat aplikasi web yang lebih kaya dan memberikan pengalaman pengguna yang lebih baik.