Javascript Dasar #1: Pengenalan Javascript

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #1: Pengenalan Javascript

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.

  1. 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
  1. 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pengenalan JavaScript</title>
</head>
<body>
  <h1>Masukkan Nama Anda</h1>
  <input type="text" id="namaInput" placeholder="Nama Anda">
  <button onclick="tampilkanNama()">Tampilkan Nama</button>
  <p id="hasil"></p>

  <script src="script.js"></script>
</body>
</html>

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 <p> menggunakan innerText.

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

Tutorial Terkait Lainnya

Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #9: Asynchronous JavaScript & Promises

Halo, teman-teman! Sekarang kita akan masuk ke topik yang sangat penting dalam JavaScript: Asynchron...

Baca Tutorial
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya

Halo, kembali lagi! Kali ini kita akan membahas tentang Objek di JavaScript. Objek adalah tipe data ...

Baca Tutorial
Javascript Dasar #10: Error Handling
Javascript Dasar #10: Error Handling

Halo, teman-teman! Di tutorial kali ini, kita akan membahas tentang Error Handling dan Debugging di ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Next
Tutorial Terkait
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program
Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python