Diktat Javascript 34

Modul 3 Javascript

POPUP BOXES & FUNGSI PADA JAVASCRIPT

Javascript memiliki 3 jenis kotak dialog popup:

ALERT

Kotak dialog alert sering digunakan untuk menyampaikan informasi kepada user. Kotak dialog
memiliki sebuah tombol, yaitu OK.

Sintaks:

alert(“teks”);

Contoh:

CONFIRM

Kotak dialog confirm biasanya digunakan jika kita menghendaki user memverifikasi atau menerima
sesuatu. Kotak dialog memiliki 2 tombol, yaitu OK dan Cancel. Jika user mengklik tombol OK, maka
kotak dialog akan mengembalikan nilai true, dan jika tombol Cancel yang diklik, maka nilai yang
dikembalikan false.

Sintaks:
confirm(“teks”);

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 35

Contoh:

PROMPT

Kotak dialog digunakan untuk meminta user memasukkan sebuah nilai sebelum masuk ke sebuah
halaman. Kotak dialog memiliki 2 tombol, yaitu OK dan Cancel. Jika tombol OK diklik, maka nilai yang
diinputkan akan dikembalikan oleh kotak dialog. Jika user mengklik tombol Cancel, maka niai null akan
dikembalikan.

Sintaks:

prompt(“teks”,”nilai_default”);

Contoh:

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 36

FUNGSI ( Function() )
Kode javascript pada suatu halaman secara normal akan dieksekusi segera setelah halaman tersebut
dimuat ke browser. Untuk mencegah hal ini, kode dapat dimasukkan kedalam sebuah fungsi. Fungsi
adalah sekelompok kode yang dapat dieksekusi dengan pemanggilan fungsi atau even tertentu.
Pemanggila fungsi dapat dilakukan darimana saja didalam halaman. Bahkan fungsi dapat dipanggil
oleh halaman lain jika fungsi tersebut ditempatkan dalam suatu file eksternal .js.

Fungsi dapat diletakkan pada bagian head maupun body. Tetapi, untuk memastikan bahwa fungsi
sudah siap atau sudah dimuat oleh browser saat akan dipanggil, sebaiknya fungsi diletakkan pada
bagian head.

Untuk mendefinisikan sebuah fungsi, sintaks yang digunakan:

function functionname(var1,var2,...,varX)

pernyataan-pernyataan fungsi;

Parameter var1, var2, adalah variabel atau nilai yang dilewatkan kedalam fungsi. Simbol kurung
kurawal buka dan tutup menandakan awal dan akhir dari fungsi.

Cara Membuat Fungsi di Javascript

Ada 4 cara yang bisa kita lakukan untuk membuat fungsi di Javascript:

1. Menggunakan cara biasa;

2. Menggunakan ekspresi;

Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya adalah fungsi
anonim (anonymous function) atau fungsi tanpa nama.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 37

3. Menggunakan tanda panah (=>);

Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita

menggunakan tanda panah (=>) sebagai ganti function.

Pembuatan fungsi dengan cara ini disebut arrow function.

Contoh fungsi 1:

Contoh fungsi 2:

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 38

Fungsi dengan Parameter

Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi. Parameter
adalah data-data yang sifatnya tidak tetap (bisa berubah-ubah) yang dimasukkan dan diolah
dalam sebuah fungsi Javascript.

Contoh:

PENTING!

Sebuah fungsi dengan tanpa parameter tetap harus menyertakan kurung buka dan tutup setelah nama
fungsi. Dan seperti seharusnya, tulisan function menggunakan huruf kecil serta saat pemanggilan
fungsi perhatikan penulisan nama fungsi harus sama dengan nama fungsi saat didefinisikan.

PERNYATAAN RETURN / FUNCTION MENGEMBALIKAN NILAI

Sebuah fungsi jika dikehendaki dapat dibuat agar mengembalikan sebuah nilai. Untuk membuat fungsi
seperti ini, maka pernyataan return dapat digunakan didalam tubuh fungsi. Sebagai contoh, fungsi
dibawah ini akan mengembalikan nilai berupa pembagian nilai parameter-parameternya:
Contoh 1

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 39

Contoh 2

VARIABEL LOKAL & GLOBAL

Ada dua Variable Scope in JavaScript yaitu local scope dan global scope. Jika suatu variabel
dideklarasikan dengan menggunakan pernyataan var didalam sebuah fungsi, variabel tersebut hanya
dapat diakses didalam fungsi. Jika keluar dari fungsi, variabel tersebut akan dihapus. Variabel ini
disebut variabel lokal. Variabel lokal dengan nama yang sama dapat dibuat pada dua fungsi yang
berbeda, sebab variabel-variabel tersebut hanya dikenali didalam fungsi dimana mereka
dideklarasikan.
Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek
 Diktat Javascript 40

Jika suatu variabel dideklarasikan diluar fungsi, semua fungsi pada halaman dapat mengaksesnya.
Variabel ini akan ada mulai saat mereka dideklarasikan sampai dengan saat halaman ditutup.

Pada contoh di atas, dapat dilihat muncul sebuah error ketika kita mencoba mengakses
local variabel y di luar fungsi test(). Jadi variabel lok al, tidak bisa diakses di luar dari
scopenya.
Jika kita membuat sebuah variabel lokal yang memiliki nama yang sama dengan variabel
global, maka kedua variabel tersebut tidak akan bertabrakan satu sama lain. Contohnya:

Variabel yang dideklarasikan dalam global scope biasa disebut variabel global.
Variabel global dapat diakses dan dimodifikasi hampir dimana saja di dalam kode
program yang kita buat.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 41

Terdapat kasus unik dan penting untuk diingat di dalam javascript, yaitu saat kita
mendeklarasikan variabel tanpa menggunakan keyword var, let atau const, maka
variabel tersebut akan secara otomatis menjadi variabel global. Contohnya:

Praktikum Sederhana
Membuat program untuk menghitung luas segitiga.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 42

Kesimpulan dapat ditulis pada LKPD

Tugas Praktikum
1. Buatlah program sederhana untuk menghitung luas dan keliling segiempat. Gunakan form
untuk menampung nilai inputan. Form bisa menggunakan HTML+CSS atau bisa
menggunakan HTML+Bootstrap. Desainlah form sebagus mungkin, buatlah program
sekreatif mungkin.

SELAMAT BELAJAR

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek