Close Menu

Sintaks Dasar JavaScript

Table of Contents

Untuk mulai menulis dan memahami JavaScript, penting untuk mengenal sintaks dasarnya. Berikut adalah beberapa konsep dan sintaks dasar yang sering digunakan dalam JavaScript:

Variabel #

Variabel digunakan untuk menyimpan data yang dapat digunakan dan dimanipulasi dalam program. Ada tiga cara untuk mendeklarasikan variabel: var, let, dan const.

var: Deklarasi variabel yang bersifat global atau lokal dalam fungsi.

var x = 10;

let: Deklarasi variabel dengan cakupan blok (block scope).

let y = 20;

const: Deklarasi variabel yang nilainya tidak dapat diubah setelah dideklarasikan (konstan).

const z = 30;

Tipe Data #

JavaScript mendukung berbagai tipe data, termasuk:

String: Teks yang dikelilingi oleh tanda kutip (tunggal atau ganda).

let name = "John";

Number: Angka, termasuk integer dan floating point.

let age = 25;
let pi = 3.14;

Boolean: Nilai benar atau salah.

let isStudent = true;

Object: Koleksi pasangan kunci-nilai.

let person = { firstName: "John", lastName: "Doe" };

Array: Daftar terurut dari nilai.

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

Operator #

JavaScript mendukung berbagai operator untuk operasi aritmatika, perbandingan, logika, dan lainnya.

Operator Aritmatika:

let sum = 10 + 5; // Penjumlahan
let difference = 10 - 5; // Pengurangan
let product = 10 * 5; // Perkalian
let quotient = 10 / 5; // Pembagian
let remainder = 10 % 5; // Sisa bagi

Operator Perbandingan:

let isEqual = (10 == 10); // Sama dengan (true)
let isIdentical = (10 === 10); // Identik (true)
let isNotEqual = (10 != 5); // Tidak sama dengan (true)
let isGreater = (10 > 5); // Lebih besar (true)
let isLessOrEqual = (10 <= 10); // Kurang dari atau sama dengan (true)

Operator Logika:

let and = (true && false); // AND (false)
let or = (true || false); // OR (true)
let not = !true; // NOT (false)

Kondisi #

Pernyataan kondisi digunakan untuk membuat keputusan berdasarkan kondisi tertentu.

let x = 10;

if (x > 5) {
    console.log("x lebih besar dari 5");
} else if (x === 5) {
    console.log("x sama dengan 5");
} else {
    console.log("x kurang dari 5");
}

Looping #

Loop digunakan untuk menjalankan blok kode berulang kali.

For Loop:

for (let i = 0; i < 5; i++) {
    console.log(i);
}

While Loop:

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

Do-While Loop:

let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

Fungsi #

Fungsi adalah blok kode yang dapat digunakan kembali dan dieksekusi saat dipanggil.

Deklarasi Fungsi:

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("John")); // Memanggil fungsi greet

Fungsi Anonim (Anonymous Function):

let greet = function(name) {
    return "Hello, " + name;
};

console.log(greet("John"));

Arrow Function:

let greet = (name) => {
    return "Hello, " + name;
};

console.log(greet("John"));

Objek dan Array #

Membuat dan Mengakses Objek:

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 25
};

console.log(person.firstName); // Mengakses properti objek
console.log(person["lastName"]); // Mengakses properti objek dengan notasi array

Membuat dan Mengakses Array:

let colors = ["red", "green", "blue"];

console.log(colors[0]); // Mengakses elemen pertama dalam array
console.log(colors.length); // Mendapatkan panjang array

Iterasi Array dengan forEach:

colors.forEach((color) => {
    console.log(color);
});

Contoh Penggunaan Sintaks Dasar JavaScript #

Berikut adalah contoh sederhana yang menggabungkan beberapa konsep dasar JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Sintaks Dasar JavaScript</title>
    <script>
        // Fungsi untuk mengubah konten halaman
        function changeContent() {
            // Mengakses dan mengubah teks elemen
            document.getElementById("title").innerText = "JavaScript itu Keren!";
            document.getElementById("description").innerText = "Konten ini telah diubah menggunakan JavaScript.";

            // Mengubah warna latar belakang
            document.body.style.backgroundColor = "lightblue";

            // Menambahkan item baru ke dalam array dan menampilkannya
            let items = ["Item 1", "Item 2", "Item 3"];
            items.push("Item 4");

            // Mengakses elemen ul dan menambah item baru ke dalamnya
            let ul = document.getElementById("itemList");
            ul.innerHTML = "";
            items.forEach((item) => {
                let li = document.createElement("li");
                li.innerText = item;
                ul.appendChild(li);
            });
        }
    </script>
</head>
<body>
    <h1 id="title">Ini adalah contoh JavaScript</h1>
    <p id="description">Klik tombol di bawah untuk melihat keajaiban JavaScript.</p>
    <button onclick="changeContent()">Klik Saya</button>
    <ul id="itemList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Pada contoh di atas:

  • Fungsi changeContent mengubah teks dalam elemen <h1> dan <p>.
  • Fungsi tersebut juga mengubah warna latar belakang halaman.
  • Selain itu, fungsi tersebut menambahkan item baru ke dalam array dan menampilkan item-item tersebut di dalam elemen <ul>.

Dengan memahami sintaks dasar JavaScript ini, Anda dapat mulai menulis kode JavaScript untuk membuat halaman web yang lebih interaktif dan dinamis. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings