Scribd
Upload
6 views5 pages

Panduan Lengkap JavaScript Dasar

This document is a comprehensive cheat sheet for JavaScript covering fundamental concepts such as variables, data types, operators, control flow, functions, arrays, objects, DOM manipulation, events, JSON, modern features (ES6+), error handling, and browser storage. It provides code examples for each topic, including syntax for functions, loops, and event listeners. Additionally, it includes tips and tricks for effective JavaScript programming.

Uploaded by

thexclubs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views5 pages

Panduan Lengkap JavaScript Dasar

This document is a comprehensive cheat sheet for JavaScript covering fundamental concepts such as variables, data types, operators, control flow, functions, arrays, objects, DOM manipulation, events, JSON, modern features (ES6+), error handling, and browser storage. It provides code examples for each topic, including syntax for functions, loops, and event listeners. Additionally, it includes tips and tricks for effective JavaScript programming.

Uploaded by

thexclubs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Cheet Sheet Java Script

1. Dasar JavaScript

Variabel
let x = 10; // Dapat diubah
const y = 5; // Konstan
var z = 3; // Versi lama, tidak disarankan

Tipe Data
let nama = "Faisal"; // string
let umur = 25; // number
let aktif = true; // boolean
let kosong = null; // null
let tidakDidefinisi; // undefined

Operator
// Aritmatika
+, -, *, /, %

// Perbandingan
==, ===, !=, !==, >, <, >=, <=

// Logika
&&, ||, !

// Penugasan
=, +=, -=, *=, /=

// Ternary
let hasil = (nilai > 70) ? "Lulus" : "Gagal";

2. Kontrol Alur

If...Else
if (x > 10) {
[Link]("Besar");
} else {
[Link]("Kecil");
}

Switch
switch(hari) {
case "Senin":
[Link]("Kerja!");
break;
case "Sabtu":
[Link]("Libur!");
break;
default:
[Link]("Hari biasa");
}
Loop
for (let i = 0; i < 5; i++) {
[Link](i);
}

while (kondisi) {
// kode
}

do {
// kode
} while (kondisi);

3. Fungsi

Deklarasi
function tambah(a, b) {
return a + b;
}

Ekspresi

const kurang = function(a, b) {


return a - b;
};

Arrow Function
const kali = (a, b) => a * b;

4. Array & Objek

Array
let buah = ["apel", "mangga", "jeruk"];
[Link]("pisang");
buah[1]; // "mangga"

Array Methods
[Link](fn)
[Link](fn)
[Link](fn, nilaiAwal)
[Link](fn)
[Link](item)
[Link](item)
[Link](start, end)
[Link](index, count)
Object
let orang = {
nama: "Ali",
umur: 30,
salam: function() {
[Link]("Halo");
}
};

[Link];
orang["umur"];
[Link]();

5. DOM (Document Object Model)

Seleksi Elemen
[Link]("id")
[Link](".class")
[Link]("div")

Manipulasi
[Link] = "Teks baru";
[Link] = "<b>HTML</b>";
[Link] = "red";

Event Listener
[Link]("click", function() {
alert("Tombol diklik!");
});

6. Event JavaScript

onclick
onmouseover
onkeydown
onkeyup
onsubmit

Contoh:
[Link]("tombol").onclick = function() {
alert("Diklik!");
};

7. JSON

// Parse JSON ke JS Object


let obj = [Link]('{"nama":"Ani"}');

// Stringify JS ke JSON
let json = [Link]({nama: "Budi"});
8. Fitur Modern (ES6+)

Destructuring
let [a, b] = [10, 20];
let {nama, umur} = {nama: "Ali", umur: 25};

Template Literal
let nama = "Dina";
[Link](`Halo, nama saya ${nama}`);

Spread & Rest


let arr = [1, 2, 3];
let baru = [...arr, 4, 5];

function total(...angka) {
return [Link]((a, b) => a + b);
}

Default Parameter
function greet(name = "Guest") {
return `Hello ${name}`;
}

Promise
let janji = new Promise((resolve, reject) => {
setTimeout(() => resolve("Sukses!"), 1000);
});
[Link](res => [Link](res));

Async/Await
async function ambilData() {
let res = await fetch("[Link]
let data = await [Link]();
[Link](data);
}

9. Error Handling

try {
// kode mungkin error
} catch (err) {
[Link]([Link]);
} finally {
[Link]("Selesai");
}

10. Browser Storage

LocalStorage
[Link]("nama", "Andi");
let nama = [Link]("nama");
[Link]("nama");
BONUS: Trik & Tips

• typeof → Mengetahui tipe data


• [Link](obj) → Cek array
• [Link]() / [Link]() / [Link]()
• setTimeout(fn, ms) → Delay eksekusi
• setInterval(fn, ms) → Ulangi secara periodik

You might also like