JavaScript adalah bahasa pemrograman yang umum digunakan di web untuk membuat halaman interaktif. Ini menjadi bagian dari standar World Wide Web Consortium (W3C) dan dikembangkan oleh Netscape Communications Corporation sebagai bahasa skrip dasar untuk Navigator web browser. Dalam tutorial ini, kita akan belajar JavaScript dari nol hingga tingkat ekspert.

JavaScript adalah bahasa scripting dinamis yang berjalan di client-side atau server-side. Browser modern mendukung JavaScript dalam beberapa versi, termasuk ECMAScript 2015+. Selain itu, JavaScript juga bisa diproses di backend menggunakan Node.js.

JavaScript diciptakan oleh Brendan Eich saat dia bekerja di Netscape Communications Corporation pada tahun 1995. Versi pertama JavaScript disebut Mocha, kemudian dirubah namanya menjadi LiveScript, dan akhirnya menjadi JavaScript setelah perusahaannya melakukan kerjasama dengan Sun Microsystems.

Sebagaimana yang telah disebutkan sebelumnya, JavaScript tidak terkait dengan Java. Namun, mereka saling berhubungan karena JavaScript awalnya dicetak sebagai "LiveScript" oleh Netscape, tapi dipindahkan ke "JavaScript" sesaat sebelum rilisnya, supaya lebih mudah ditandai sebagai produk baru yang trendy.

Variabel adalah wadah tempat Anda menyimpan data. Di JavaScript, variabel dapat dibuat dengan keyword let, const atau var. Contoh penggunaan variable:

let name = 'John Doe';
console.log(name); // Output: John Doe

JavaScript memiliki beberapa jenis tipe data, yaitu:

• String: representasi teks.
• Number: bilangan bulat atau pecahan.
• Boolean: nilai benar atau salah.
• Object: struktur data kompleks.
• Null: nilai null.
• Undefined: nilai undefined.

Contoh penggunaan tipe data:

let stringVar = 'Hello, world!';
let numberVar = 42;
let booleanVar = true;
let objectVar = { name: 'John', age: 30 };
let nullVar = null;
let undefinedVar;

JavaScript memiliki beberapa operator aritmatika, logika, dan perbandingan. Contoh penggunaan operator:

let num1 = 10;
let num2 = 5;

// Aritmatika
console.log(num1 + num2); // Output: 15
console.log(num1 - num2); // Output: 5
console.log(num1 * num2); // Output: 50
console.log(num1 / num2); // Output: 2
console.log(num1 % num2); // Output: 0
console.log(++num1); // Output: 11

// Logika
console.log(true && false); // Output: false
console.log(true || false); // Output: true
console.log(!true); // Output: false

// Perbandingan
console.log(num1 > num2); // Output: true
console.log(num1 < num2); // Output: false
console.log(num1 == num2); // Output: false
console.log(num1 != num2); // Output: true
console.log(num1 === num2); // Output: false
console.log(num1 !== num2); // Output: true

JavaScript memiliki kontrol structure yang familiar seperti if else, for loop, while loop, dan switch case. Contoh penggunaan kontrol structure:

// If Else
let x = 10;
if (x > 5) {
    console.log('Nilai x lebih besar dari 5');
} else {
    console.log('Nilai x kurang dari atau sama dengan 5');
}

// For Loop
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// While Loop
let j = 0;
while (j < 10) {
    console.log(j);
    j++;
}

// Switch Case
let day = 'senin';
switch (day) {
    case 'minggu':
        console.log('Hari libur');
        break;
    case 'senin':
        console.log('Hari kerja');
        break;
    default:
        console.log('Hari biasa');
}

Fungsi adalah blok kode yang dapat dipanggil kapanpun di program. Di JavaScript, fungsi dapat didefinisikan dengan keyword function. Contoh penggunaan fungsi:

function greet() {
    console.log('Hello, world!');
}

greet(); // Output: Hello, world!

Objek adalah struktur data yang memiliki properti dan metode. Properti adalah informasi tentang objek, sedangkan metode adalah operasi yang dapat dilakukan pada objek. Contoh penggunaan objek:

let person = {
    name: 'John Doe',
    age: 30,
    sayName: function () {
        console.log(`My name is ${this.name}`);
    }
};

console.log(person.name); // Output: John Doe
console.log(person.age); // Output: 30
person.sayName(); // Output: My name is John Doe

Di JavaScript, klas dapat didefinisikan dengan keyword class. Konsep class mirip dengan konsep objek, kecuali class dapat digunakan untuk membuat beberapa objek yang memiliki properti dan metode yang sama. Contoh penggunaan klas:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    sayName() {
        console.log(`My name is ${this.name}`);
    }
}

let person1 = new Person('John Doe', 30);
let person2 = new Person('Jane Doe', 28);

console.log(person1.name); // Output: John Doe
console.log(person1.age); // Output: 30
person1.sayName(); // Output: My name is John Doe

console.log(person2.name); // Output: Jane Doe
console.log(person2.age); // Output: 28
person2.sayName(); // Output: My name is Jane Doe

DOM (Document Object Model) adalah representasi hierarkis dari dokumen HTML. Di JavaScript, kita dapat manipulasi elemen HTML dengan mengambil referensi elemen tersebut dan mengubah atribut, style, dan konten elemen tersebut. Contoh penggunaan DOM manipulation:

<html>
<body>
    <div id="myDiv">Hello, world!</div>
    <script>
        let divEl = document.getElementById('myDiv');
        divEl.style.color = 'red';
        divEl.innerHTML = 'Halo dunia!';
    </script>
</body>
</html>

Event handling adalah cara untuk merespon acara yang terjadi di website, misalnya saat tombol ditekan atau saat mouse di hover. Di JavaScript, event handler dapat didefinisikan dengan cara mendefinisikan fungsi yang akan dieksekusi saat suatu acara terjadi. Contoh penggunaan event handling:

<button onclick="clickHandler()">Klik Saya</button>
<script>
    function clickHandler() {
        alert('Anda telah mengklik tombol');
    }
</script>

Promise adalah mekanisme untuk mengontrol asynchronous operation di JavaScript. Promises memungkinkan kita untuk menunda eksekusi sampai suatu operasi asynchronous selesai. Contoh penggunaan promise:

new Promise((resolve, reject) => {
    setTimeout(() => resolve('Berhasil'), 1000);
}).then((value) => {
    console.log(value); // Output: Berhasil
});

Async/await adalah fitur JavaScript yang mempermudah penulisan code asynchronous. Async/await memungkinkan kita untuk menuliskan code asynchronous seperti synchronous. Contoh penggunaan async/await:

async function getData() {
    try {
        let response = await fetch('data.json');
        let json = await response.json();
        console.log(json);
    } catch (error) {
        console.error(error);
    }
}

getData();

Modul adalah cara untuk memecah kode JavaScript menjadi beberapa file yang dapat dimuat secara terpisah. Modul mempermudah manajemen dependensi dan mencegah kolisi global namespace. Contoh penggunaan modul:

// module.js
export function sum(a, b) {
    return a + b;
}

// app.js
import { sum } from './module.js';
console.log(sum(5, 7)); // Output: 12

Regular expression adalah alat untuk mencocokan pola teks. Di JavaScript, regular expression dapat digunakan untuk mencocokan teks, validasi input, dan ganti teks. Contoh penggunaan regular expression:

let regex = /\d{3}-\d{3}-\d{4}/;
let str = '123-456-7890';
console.log(regex.test(str)); // Output: true

let str2 = 'abc-def-ghijk';
console.log(regex.test(str2)); // Output: false

let str3 = '123-456-7890';
console.log(str3.replace(regex, '$1-$2-$3')); // Output: $1-$2-$3

• MDN Web Docs
• ECMA Script Specification
• You Don't Know JS