Hai, apa kabar? Semoga baik-baik aja ya! Pada tutorial pertama ini, kita bakal mulai mengenal apa itu JavaScript. JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif. Jadi, kalau kamu sering lihat animasi, tombol yang bisa diklik, atau konten yang berubah tanpa harus muat ulang halaman, itu semua berkat JavaScript!

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang bisa berjalan di dalam browser. Jadi, tanpa perlu install software tambahan, kamu bisa mulai menulis dan menjalankan kode JavaScript langsung di browser. JavaScript membantu mengubah halaman web yang statis jadi dinamis, dengan melakukan hal-hal seperti:

• Mengubah isi halaman web tanpa harus me-refresh (reload)
• Menambah interaktivitas, misalnya validasi form, pop-up, animasi, dan sebagainya
• Berinteraksi dengan server untuk mengambil data tanpa muat ulang halaman (ini yang disebut AJAX)

Sintaks Dasar JavaScript

Sebelum kita mulai praktek, kita perlu tahu beberapa dasar sintaks JavaScript. Tenang aja, semua sintaks ini bakal sering banget kamu pakai nanti!

1. Menulis Perintah dengan console.log()

console.log() digunakan untuk menampilkan output di browser's developer console. Ini sangat berguna untuk debug kode, atau sekedar ngecek nilai dari variabel. Berikut contohnya:

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

Jika kamu buka browser dan buka Developer Tools (biasanya tekan F12), kamu akan melihat tulisan Hello, World! muncul di tab Console.

2. Membuat Variabel

Untuk menyimpan data, kita menggunakan variabel. JavaScript memiliki beberapa cara untuk mendeklarasikan variabel, yaitu var, let, dan const. Kalau kamu baru mulai, disarankan pakai let dan const.

• let: digunakan untuk variabel yang bisa diubah nilainya.
• const: digunakan untuk variabel yang nilainya tetap dan tidak bisa diubah setelah ditentukan.

let nama = "John";
const umur = 25;

console.log(nama); // Output: John
console.log(umur); // Output: 25

3. Tipe Data di JavaScript

JavaScript punya beberapa tipe data yang sering kamu temui:

• String: Untuk teks. Contoh: "Halo Dunia!"
• Number: Untuk angka. Contoh: 10, 3.14
• Boolean: Untuk nilai true atau false.
• Array: Untuk menyimpan banyak data dalam satu variabel.
• Object: Untuk menyimpan data yang lebih kompleks.

let nama = "John"; // String
let umur = 25; // Number
let isActive = true; // Boolean

let arr = [1, 2, 3]; // Array
let orang = { nama: "John", umur: 25 }; // Object

Studi Kasus: Menampilkan Nama Pengguna

Sekarang, coba kita buat program kecil untuk menampilkan nama pengguna yang dimasukkan melalui input.

HTML-nya:

  
  
  


  
Masukkan Nama Anda
  
  Tampilkan Nama
  


  

JavaScript-nya (di file script.js):

function tampilkanNama() {
  let nama = document.getElementById("namaInput").value;
  document.getElementById("hasil").innerText = "Nama Anda adalah " + nama;
}

Penjelasan:

• Kita ambil nilai dari input dengan document.getElementById("namaInput").value.
• Setelah itu, kita tampilkan nama tersebut di elemen

  menggunakan innerText.

Nah, itu dulu ya untuk tutorial pertama kita! Semoga jelas, dan jangan lupa untuk coba praktekkan kode di atas di browser kamu.