SIAP – Sistem Informasi Anak Pintar

Materi JavaScript 2
JavaScript Sederhana

oleh: Suryo Adhy Chandra, ST

Ilustrasi alert JavaScript

Sintaks adalah aturan penulisan dalam bahasa pemrograman. JavaScript memiliki aturan tertentu agar browser dapat membaca dan menjalankan perintah dengan benar.

1. Aturan dasar sintaks JavaScript

JavaScript dapat ditulis di dalam tag <script>.
Perintah JavaScript biasanya ditulis satu per satu dari atas ke bawah.
Tanda titik koma ; boleh dipakai di akhir perintah dan sangat disarankan untuk latihan.
JavaScript membedakan huruf besar dan huruf kecil, misalnya nama berbeda dengan Nama.
Teks ditulis menggunakan tanda petik satu ' ' atau petik dua " ".
Komentar satu baris ditulis dengan //.

2. Menulis teks dan angka

Dalam JavaScript, teks disebut string. String harus berada di dalam tanda petik. Angka dapat ditulis langsung tanpa tanda petik.

let nama = "Budi"; let umur = 13; console.log(nama); console.log(umur);

3. Membuat variabel

Variabel adalah tempat untuk menyimpan data. Dalam JavaScript modern, kita dapat memakai let untuk data yang bisa berubah dan const untuk data yang tetap.

let namaSiswa = "Sinta"; const namaSekolah = "Sekolah Masehi"; console.log(namaSiswa); console.log(namaSekolah);

Nama variabel sebaiknya jelas, tidak memakai spasi, tidak diawali angka, dan tidak memakai kata khusus JavaScript seperti let, const, atau function.

4. Membuat JavaScript sederhana untuk menampilkan alert

Alert adalah kotak pesan yang muncul di browser. Perintah yang digunakan adalah alert().

<!DOCTYPE html> <html> <head> <title>Alert JavaScript</title> </head> <body> <h1>Belajar JavaScript</h1> <script> alert("Halo, ini alert dari JavaScript!"); </script> </body> </html>

Demo alert:

5. Menampilkan alert dari tombol

Alert juga bisa dijalankan ketika tombol diklik. Kita dapat memakai atribut onclick pada tombol HTML.

6. Membuat pilihan Yes dan No

Selain alert(), JavaScript juga memiliki confirm(). Perintah ini menampilkan kotak pilihan dengan dua jawaban, yaitu OK dan Cancel. Dalam latihan, kita bisa menganggap OK sebagai pilihan Yes dan Cancel sebagai pilihan No.

Demo pilihan Yes/No:

7. Contoh pilihan makanan

Sekarang kita buat contoh sederhana: Saya ingin makan apa? Jika memilih Yes/OK, hasilnya adalah nasi goreng. Jika memilih No/Cancel, hasilnya adalah gudeg jogja.

<button onclick="pilihMakanan()">Pilih Makanan</button> <p id="hasilMakanan"></p> <script> function pilihMakanan() { let pilihan = confirm("Saya ingin makan apa? OK = nasi goreng, Cancel = gudeg jogja"); if (pilihan == true) { document.getElementById("hasilMakanan").innerHTML = "Saya ingin makan nasi goreng"; } else { document.getElementById("hasilMakanan").innerHTML = "Saya ingin makan gudeg jogja"; } } </script>

Demo pilihan makanan:

Latihan: buat file baru bernama alert.html, tulis contoh kode di atas, lalu buka file tersebut menggunakan browser.

← Kembali Ke Daftar Pelajaran JavaScript