Kursus IT Dasar JavaScript 036_Struktur Sintaks

Pernyataan

Pernyataan JavaScript (Statements) adalah sekelompok instruksi yang digunakan untuk melakukan tugas tertentu.

Contoh:

1
// Deklarasi variabel
2
let userName = 'Budi';
3
let age = 18;
4

5
// Pernyataan kondisional
6
if (age >= 18) {
7
  console.log(userName + ' adalah orang dewasa');
8
} else {
9
  console.log(userName + ' adalah orang di bawah umur');
10
}
11

12
// Perulangan
13
for (let i = 0; i < 5; i++) {
14
  console.log('Output perulangan ' + (i + 1));
15
}
16

17
// Definisi fungsi
18
function Hello(name) {
19
  return 'Halo, ' + name + '!';
20
}
21

22
// Pemanggilan fungsi
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Titik koma

Dalam JavaScript, titik koma (;) adalah simbol akhir pernyataan, yang digunakan untuk menandai akhir dari sebuah pernyataan. Titik koma bersifat opsional dalam sebagian besar kasus, karena interpreter JavaScript akan mencoba menyisipkan titik koma secara otomatis (Automatic Semicolon Insertion, ASI) agar kode diurai sebagai sintaks yang benar. Namun, ada beberapa kasus di mana ASI dapat menyebabkan perilaku yang tidak diharapkan, oleh karena itu disarankan untuk menambahkan titik koma secara eksplisit saat menulis kode JavaScript.

Ketika titik koma muncul, baik satu baris atau beberapa baris, pernyataan ini berakhir.

Contoh:

1
alert('Halo');alert('JavaScript!');

Ketika ada baris baru (line break), dalam sebagian besar kasus titik koma dapat dihilangkan.

Contoh:

1
alert('Halo')
2
alert('JavaScript!')

1
alert('Halo');
2
alert('JavaScript!')

1
alert('Halo')
2
alert('JavaScript!');

1
alert('Halo');alert('JavaScript!')

Ketika menemui blok pernyataan atau blok kode, baris baru tidak akan secara otomatis menambahkan titik koma. Dan spasi dan baris baru akan diabaikan.

Contoh:

1
alert
2
(
3
1+
4
   2
5
   +1);

Komentar

Dalam JavaScript, komentar digunakan untuk menambahkan penjelasan dan catatan dalam kode. Teks ini tidak memiliki dampak nyata pada eksekusi program. Komentar sangat berguna untuk meningkatkan keterbacaan kode, kolaborasi, dan debugging.

Komentar satu baris

Menggunakan simbol // dapat membuat komentar satu baris. Semua teks dari // hingga akhir baris akan diperlakukan sebagai komentar.

Contoh:

1
alert('Halo JavaScript!'); // Komentar satu baris setelah pernyataan
2
// Komentar satu baris di baris sendiri

Komentar beberapa baris

Dimulai dengan /* dan diakhiri dengan */ dapat membuat komentar beberapa baris. Semua teks di antara dua simbol ini akan diperlakukan sebagai komentar.

1
/*
2
  Ini adalah komentar beberapa baris
3
  dapat mencakup beberapa baris
4
*/
5
alert('Halo');
6
/*
7
Komentar beberapa baris juga dapat digunakan untuk mengomentari blok kode, kode berikut tidak akan dieksekusi
8
alert('JavaScript!');
9
*/

Kotak dialog

JavaScript menyediakan beberapa kotak dialog untuk interaksi sederhana dengan pengguna, termasuk alert, confirm, dan prompt. Kotak dialog ini memungkinkan Anda untuk menampilkan informasi kepada pengguna, mengajukan pertanyaan, atau menerima input. Ketika kotak dialog ditampilkan, eksekusi kode akan dijeda sampai pengguna menutup kotak dialog.

Kotak dialog alert

Kotak dialog alert digunakan untuk menampilkan pesan kepada pengguna dan menunggu pengguna mengklik tombol “OK”.

Contoh:

1
alert('Halo JavaScript internal!');

Efek:

Kotak dialog confirm

Kotak dialog confirm digunakan untuk menampilkan kotak dialog kepada pengguna dengan tombol konfirmasi dan batal, biasanya digunakan untuk menanyakan apakah pengguna ingin melakukan tindakan tertentu.

Contoh:

1
    let yesNo = confirm("Apakah Anda sedang belajar JavaScript?");
2
    alert(yesNo);

Efek:

Kotak dialog prompt

Kotak dialog prompt digunakan untuk menampilkan kotak dialog kepada pengguna dengan bidang input, biasanya digunakan untuk menerima input pengguna.

Contoh:

1
    let name = prompt("Silakan masukkan nama Anda:", '');
2
    alert(name);

Efek:

Alat pengembang

Alat pengembang JavaScript adalah serangkaian alat yang terintegrasi dalam browser yang membantu pengembang untuk debug, menganalisis, dan mengoptimalkan kode JavaScript. Browser yang berbeda menyediakan alat pengembang yang berbeda. Berikut adalah alat pengembang JavaScript dari browser umum:

Alat pengembang Chrome

Buka browser Chrome, tekan Ctrl + Shift + I (Windows/Linux) atau Cmd + Option + I (Mac) untuk membuka alat pengembang Chrome.

Klik kanan di browser, pilih “Inspect” di menu popup untuk membuka alat pengembang Chrome.

Seperti pada gambar:

Klik ikon “Setelan dan lainnya” di browser, pilih “Alat lainnya” — “Alat developer” untuk membuka alat pengembang Chrome.

Seperti pada gambar:

Fungsi utama dan panel:

• Console (Konsol): Digunakan untuk mengeksekusi dan debug kode JavaScript, melihat output, kesalahan, dan informasi peringatan.
• Sources (Sumber): Menyediakan editor kode, pengaturan breakpoint, ekspresi pengawasan, dan fungsi lain untuk debug kode sumber JavaScript.
• Network (Jaringan): Melihat permintaan jaringan yang dimulai oleh halaman, memeriksa detail permintaan dan respons.
• Performance (Kinerja): Menganalisis kinerja halaman, menampilkan waktu muat, penggunaan CPU, dll.
• Application (Aplikasi): Melihat dan debug penyimpanan lokal, Session Storage, Cookies, dll.
• Elements (Elemen): Melihat dan mengedit pohon DOM, memodifikasi gaya CSS.

Kata kunci

Kata kunci JavaScript adalah kata-kata yang dicadangkan dalam bahasa pemrograman JavaScript yang memiliki tujuan khusus. Mereka digunakan untuk mengidentifikasi variabel, fungsi, pernyataan, dll. Kata kunci ini tidak dapat digunakan sebagai identifier (misalnya, nama variabel, nama fungsi, dll.).

Berikut adalah beberapa kata kunci JavaScript:

1. Kata kunci dasar:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Kata kunci yang dicadangkan (memiliki penggunaan khusus dalam mode strict):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Kata kunci yang diperkenalkan dengan ECMAScript 6 (ES6):

• class
• const
• export
• extends
• import
• super