Hendri Portofolio

Daftar Materi

📌 Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Contoh penggunaannya:

Validasi form (misalnya cek apakah input kosong)
Menampilkan pesan ketika tombol diklik
Membuat slideshow, animasi, game, dll.

⚙️ Cara Menjalankan JavaScript

JavaScript biasanya disisipkan di file HTML menggunakan tag < script>. Bisa diletakkan di:

Dalam <head>
Dalam <body>
Atau di file .js terpisah

Contoh HTML + JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Halo JavaScript</title>
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <button onclick="halo()">Klik Aku</button>

  <script>
    function halo() {
      alert("Halo Dunia!");
    }
  </script>

</body>
</html>

🔹 Apa itu Variabel?

Variabel adalah "wadah" untuk menyimpan nilai/data. Di JavaScript, kamu bisa membuat variabel dengan:

let → biasa digunakan
const → untuk nilai yang tidak boleh diubah
var → cara lama (tidak disarankan lagi)

📄 Contoh:

let nama = "Adit";
const tahunLahir = 2000;
var kota = "Bandung"; // cara lama

No	Tipe Data	Contoh
1	String	"Halo" atau 'Belajar'
2	Number	25, 3.14, -100
3	Boolean	true, false
4	Array	["apel", "jeruk", "pisang"]
5	Object	{nama: "Adit", umur: 20}
No	Kategori	Tag

📄 Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Variabel dan Tipe Data</title>
</head>
<body>
  <h1>Contoh Variabel di JavaScript</h1>
  <button onclick="tampilkanInfo()">Tampilkan Info</button>

  <script>
    function tampilkanInfo() {
      let nama = "Adit";
      let umur = 23;
      let belajarJS = true;

      alert("Nama: " + nama + "\nUmur: " + umur + "\nBelajar JS? " + belajarJS);
    }
  </script>
</body>
</html>

🔹 Apa itu Operator?

Operator digunakan untuk mengolah nilai di dalam variabel atau ekspresi.

1. Operator Aritmatika

Digunakan untuk perhitungan angka.

Operator	Nama	Contoh
+	Tambah	5 + 2
-	Kurang	5 - 2
*	Kali	5 * 2
/	Bagi	5 / 2
%	Sisa bagi	5 % 2
Operator	Nama	Contoh

2. Operator Perbandingan

Digunakan untuk membandingkan dua nilai. Hasilnya true atau false.

Operator	Arti	Contoh
==	Sama dengan	5 == 5 → true
===	Sama & tipe sama	5 === "5" → false
!=	Tidak sama	5 != 3 → true
<, >	Lebih kecil/besar	5 > 2 → true
<=, >=	Lebih kecil/besar	5 >= $a → true
Operator	Arti	Contoh

3. Operator Logika

Digunakan untuk pengkondisian.

Operator	Nama	Contoh
&&	DAN (AND)	true && false → false
!	TIDAK (NOT)	!true → false
Operator	Nama	Contoh

📄 Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Operator dan Ekspresi</title>
</head>
<body>
  <h1>Belajar Operator di JavaScript</h1>
  <button onclick="proses()">Hitung dan Bandingkan</button>

  <script>
    function proses() {
      let angka1 = 15;
      let angka2 = 4;

      // Operator Aritmatika
      let jumlah = angka1 + angka2;
      let kurang = angka1 - angka2;
      let kali = angka1 * angka2;
      let bagi = angka1 / angka2;
      let sisa = angka1 % angka2;

      // Operator Perbandingan
      let lebihBesar = angka1 > angka2;

      // Tampilkan hasil
      alert(
        "Angka 1: " + angka1 + "\n" +
        "Angka 2: " + angka2 + "\n\n" +
        "Penjumlahan: " + jumlah + "\n" +
        "Pengurangan: " + kurang + "\n" +
        "Perkalian: " + kali + "\n" +
        "Pembagian: " + bagi + "\n" +
        "Sisa Bagi: " + sisa + "\n\n" +
        "Apakah angka1 > angka2? " + lebihBesar
      );
    }
  </script>
  
</body>
</html>

🔹 Apa itu Struktur Kondisi?

Struktur kondisi digunakan untuk mengambil keputusan berdasarkan kondisi tertentu. Contohnya:

Kalau nilai ≥ 75, maka lulus. Kalau tidak, maka tidak lulus.
Dan kondisi lainnya

Sintaks Dasar

if (kondisi) {
  // kode jika kondisi benar (true)
} else {
  // kode jika kondisi salah (false)
}

🔸 Bisa juga pakai else if untuk beberapa pilihan:

if (nilai >= 90) {
  // A
} else if (nilai >= 80) {
  // B
} else {
  // C
}

💡 Contoh Program Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Struktur Kondisi</title>
</head>
<body>
  <h1>Cek Kelulusan (if else)</h1>
  <button onclick="cekKelulusan()">Cek</button>

  <script>
    function cekKelulusan() {
      let nilai = 70;

      if (nilai >= 75) {
        alert("Selamat, kamu lulus!");
      } else {
        alert("Maaf, kamu belum lulus.");
      }
    }
  </script>

  <hr />

  <h1>Cek Kelulusan (if else if)</h1>

  <button type="button" onclick="show()">Klik Saya</button>

  <script>
    function show(){
      let nilai = 98;
      let grade ="";

      if (nilai >= 90)
      {
        grade = "A";
      } 
      else if (nilai >= 80)
      {
        grade = "B";
      } 
      else if (nilai >= 70)
      {
        grade = "C";
      } 
      else 
      {
        grade = "D";
      }

      alert ("Nilai kamu adalah :" + nilai + "\nGrade kamu adalah :" + grade);

    }
  </script>


</body>
</html>

🔹 Apa itu Perulangan?

Perulangan digunakan untuk mengulang kode secara otomatis selama kondisi tertentu masih terpenuhi. Sangat berguna kalau kamu ingin melakukan sesuatu berulang kali tanpa menulis kode berkali-kali.

1. Perulangan for

for (let i = 1; i <= 5; i++) {
  console.log("Baris ke-" + i);
}

Artinya:

Mulai dari i = 1
Selama i <= 5, jalankan kode
Setelah itu i++ (tambah 1)

2. Perulangan while

let i = 1;
while (i <= 5) {
  console.log("Baris ke-" + i);
  i++;
}

Artinya:

Mulai dari i = 1
Selama i <= 5, jalankan kode
Setelah itu i++ (tambah 1)

💡 Contoh Program Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Perulangan For</title>
</head>
<body>
  <h2>JavaScript For Loop</h2>
  <button onclick="tampilkanPerulangan()">Mulai</button>

  <script>
    function tampilkanPerulangan() {
      let pesan = "";

      for (let i = 1; i <= 5; i++) {
        pesan += "Baris ke-" + i + "\n";
      }

      alert(pesan);
    }
  </script>

  <hr />

<h2>JavaScript While Loop</h2>

  <button type="button" onclick="show()">Klik Saya</button>

  <script>
    function show (){
     let text = "";
     let i = 0;
     while (i < 5){
        text += "Urutan ke : " + i + "\n";
        i++;
      }
      alert (text);
  }
  </script>

  <br />

    <p id="demo"></p>

  <script>
  let text = "";
  let i = 0;
  while (i < 10) {
    text += "<br>The number is " + i;
    i++;
  }
  document.getElementById("demo").innerHTML = text;
  </script>


</body>
</html>

🔹 Apa itu Fungsi?

Fungsi adalah blok kode yang bisa dipanggil berulang kali. Ini berguna supaya kamu tidak menulis kode yang sama berkali-kali.

1. Cara Membuat Fungsi

function sapa() {
  alert("Halo! Selamat belajar JavaScript!");
}

2. Cara Memanggil Fungsi

sapa(); // memanggil fungsi

Fungsi dengan Parameter

function sapa(nama) {
    alert("Halo, " + nama + "!");
}

sapa("Hendri"); // output: Halo, Hendri!

Fungsi dengan Nilai Balik (return)

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

let hasil = tambah(5, 3); // hasil = 8
alert("Hasil penjumlahan: " + hasil);

💡 Contoh Program Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar Fungsi</title>
</head>
<body>
  <h1>Contoh Fungsi di JavaScript</h1>
  <button onclick="sapaPengguna()">Sapa</button>
  
  <hr />
  
  <button onclick="tampilkanPenjumlahan()">Hitung 10 + 5</button>

  <script>
    // Fungsi tanpa parameter
    function sapaPengguna() {
      alert("Halo! Semoga harimu menyenangkan.");
    }

    // Fungsi dengan parameter dan return
    function tambah(a, b) {
      return a + b;
    }

    function tampilkanPenjumlahan() {
      let hasil = tambah(10, 5);
      alert("Hasil dari 10 + 5 adalah: " + hasil);
    }
  </script>
</body>
</html>

🔹 Apa itu Array?

Array adalah struktur data di JavaScript yang digunakan untuk menyimpan banyak nilai dalam satu variabel.

Contoh Array:

let buah = ["apel", "jeruk", "mangga"];

Artinya:

buah[0] = "apel"
buah[1] = "jeruk"
buah[2] = "mangga"

Contoh Program Lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar Array</title>
</head>
<body>
  <h2>Contoh Array</h2>

  <button onclick="tampilkanBuah()">Tampilkan Buah</button>
  <button onclick="jumlahBuah()">Jumlah Buah</button>
  <button onclick="tampilkanSemua()">Semua Buah</button>

  <script>
    let buah = ["apel", "jeruk", "mangga", "pisang"];

    function tampilkanBuah() {
      alert("Buah pertama: " + buah[0]);
    }

    function jumlahBuah() {
      alert("Jumlah buah: " + buah.length);
    }

    function tampilkanSemua() {
      let daftar = "";
      for (let i = 0; i < buah.length; i++) {
        daftar += "- " + buah[i] + "\n";
      }
      alert("Daftar buah:\n" + daftar);
    }
  </script>
</body>
</html>

Penjelasan:

buah[0] = ambil elemen pertama dari array.
.length = menghitung jumlah elemen.
for = menampilkan semua isi array satu per satu.

🔹 Apa itu Array?

Objek digunakan untuk menyimpan data kompleks, seperti gabungan nama, umur, pekerjaan, dll dalam satu variabel.

Contoh Objek:

let siswa = {
  nama: "Hendri",
  umur: 17,
  jurusan: "RPL"
};

Artinya:

nama → "Hendri"
umur → 17
jurusan → "RPL"

Contoh Program Lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar Objek</title>
</head>
<body>
  <h2>Contoh Objek</h2>

  <button onclick="tampilkanData()">Tampilkan Data Siswa</button>

  <script>
    let siswa = {
      nama: "Hendri",
      umur: 17,
      jurusan: "RPL"
    };

    function tampilkanData() {
      let info = "Nama: " + siswa.nama + "\n";
      info += "Umur: " + siswa.umur + "\n";
      info += "Jurusan: " + siswa.jurusan;
      alert(info);
    }
  </script>
</body>
</html>

Penjelasan:

Objek siswa menyimpan data lengkap tentang satu siswa.
.length = menghitung jumlah elemen.
Mengakses data objek pakai . seperti siswa.nama.

Kondisi Lanjutan

Di sini kita belajar bagaimana program bisa mengambil keputusan berdasarkan suatu kondisi, misalnya:

if (nilai >= 80) {
  alert("Lulus");
} else {
  alert("Tidak Lulus");
}

Contoh Program Lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Latihan Kondisi Lanjutan</title>
</head>
<body>

  <h2>Cek Status Ujian</h2>

  <button onclick="cekUjian()">Cek Syarat</button>

  <script>
    let peserta = {
      nama: "Hendri",
      umur: 17,
      status: "siswa",
      sudahDaftar: true
    };

    function cekUjian() {
      if (peserta.umur >= 17 && peserta.status === "siswa" && peserta.sudahDaftar) {
        alert("✅ " + peserta.nama + " boleh ikut ujian.");
      } else {
        alert("❌ Maaf, " + peserta.nama + " belum memenuhi syarat.");
      }
    }
  </script>
  
</body>
</html>

Penjelasan:

Objek siswa menyimpan data lengkap tentang satu siswa.
.length = menghitung jumlah elemen.
Mengakses data objek pakai . seperti siswa.nama.

Materi

Apa itu event
Cara menangani event (onclick, onchange, dll)
Mengambil input dari user lewat prompt() dan input HTML

Contoh : prompt() - onclick dan <input> - Event

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Event dan Interaksi</title>
</head>
<body>

  <h2>Masukkan Nama Anda</h2>
  <button onclick="sapaUser()">Klik Saya</button>

  <script>
    function sapaUser() {
      let nama = prompt("Siapa nama kamu?");
      if (nama) {
        alert("Halo, " + nama + "!");
      } else {
        alert("Kamu belum mengisi nama.");
      }
    }
  </script>

  <hr />

   <h2>Cek Umur</h2>
  <input type="number" id="umur" placeholder="Masukkan umur">
  <button onclick="cekUmur()">Cek</button>
  
 <ul> 
    <li>>= 17 = Kamu Sudah Dewasa </li>
    <li>< 17 = Kamu masih anak-anak. </li>
 </ul>

  <script>
    function cekUmur() {
      let umur = document.getElementById("umur").value;
      if (umur >= 17) {
        alert("Kamu sudah dewasa.");
      } else {
        alert("Kamu masih anak-anak.");
      }
    }
  </script>

</body>
</html>

Apa Itu DOM?

DOM adalah struktur halaman web yang bisa diakses dan diubah lewat JavaScript.

Misalnya: kamu bisa mengubah teks, mengganti warna, menyembunyikan elemen, dan banyak lagi — semua dari JavaScript!

Materi Utama:

Mengambil elemen HTML: document.getElementById("id")
Mengubah teks: element.innerText = "Teks baru"
Mengubah isi HTML: element.innerHTML = " <b>Berani!</b>"
Mengubah gaya CSS: element.style.color = "red"

Contoh Sederhana - Bagian 1:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>DOM: Tampilkan Pesan</title>
</head>
<body>

  <h2>DOM: Tampilkan Pesan</h2>

  <input type="text" id="nama" placeholder="Masukkan nama kamu">
  <button onclick="tampilkanPesan()">Tampilkan</button>

  <p id="pesan"></p>

  <script>
    function tampilkanPesan() {
      let nama = document.getElementById("nama").value.trim();

      if (nama === "") {
        document.getElementById("pesan").innerText = "? Nama tidak boleh kosong.";
      } else {
        document.getElementById("pesan").innerText = "Selamat Belajar JavaScript, " + nama + "!";
      }
    }
  </script>

</body>
</html>

Contoh Sederhana - Bagian 2:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Manipulasi DOM</title>
</head>
<body>

  <h2 id="judul">Selamat Datang!</h2>
  <button onclick="ubahTeks()">Ubah Teks</button>
  <button onclick="ubahWarna()">Ubah Warna</button>

  <script>
    function ubahTeks() {
      document.getElementById("judul").innerText = "Halo, Hendri!";
    }

    function ubahWarna() {
      document.getElementById("judul").style.color = "blue";
    }
  </script>

</body>
</html>

Contoh Sederhana - Bagian 3:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tambah Daftar Nama</title>
</head>
<body>

  <h2>Tambah Daftar Nama</h2>

  <input type="text" id="inputNama" placeholder="Masukkan nama">
  <button onclick="tambahNama()">Tambah</button>

  <ul id="daftarNama">
    <!-- Daftar nama akan muncul di sini -->
  </ul>

  <script>
    function tambahNama() {
      let nama = document.getElementById("inputNama").value.trim();

      if (nama === "") {
        alert("❗ Nama tidak boleh kosong.");
        return;
      }

      // Buat elemen <li> baru
      let itemBaru = document.createElement("li");
      itemBaru.innerText = nama;

      // Tambahkan ke <ul> daftarNama
      document.getElementById("daftarNama").appendChild(itemBaru);

      // Kosongkan input setelah ditambahkan
      document.getElementById("inputNama").value = "";
    }
  </script>

</body>
</html>