Scribd
Unggah
131 tayangan16 halaman

Modul 5 - Javascript 1

Teks ringkasan dalam 3 kalimat: Dokumen tersebut merupakan materi pengenalan Javascript yang mencakup pengertian, cara penulisan, variabel, input-output, dan latihan soal tentang Javascript dasar seperti perhitungan dan pengkondisian. Materi selanjutnya meliputi penjelasan tentang percabangan dan perulangan dalam Javascript beserta contoh kode programnya. Mahasiswa diajak mempelajari Javascript dasar melalui materi, latihan, dan tugas pra

Diunggah oleh

Syams Fathur
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
131 tayangan16 halaman

Modul 5 - Javascript 1

Teks ringkasan dalam 3 kalimat: Dokumen tersebut merupakan materi pengenalan Javascript yang mencakup pengertian, cara penulisan, variabel, input-output, dan latihan soal tentang Javascript dasar seperti perhitungan dan pengkondisian. Materi selanjutnya meliputi penjelasan tentang percabangan dan perulangan dalam Javascript beserta contoh kode programnya. Mahasiswa diajak mempelajari Javascript dasar melalui materi, latihan, dan tugas pra

Diunggah oleh

Syams Fathur
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

Achmad Hamdan, M.

Pd – Javascript 1

MATERI I - PENGENALAN
TUJUAN:
Mahasiswa mengenal tentang Javascript serta dapat menuliskan kode-kode Javascript terutama
untuk membuat teks di layar dan mendapatkan nilai dari user.

MATERI:
- Pengenalan Javascript
- Cara penulisan Javascript
- Tag <SCRIPT>...</SCRIPT>
- pengenalan tentang variabel
- document.write dan document.writeln
- prompt dan alert

LATIHAN PRAKTIKUM
1. Javascript adalah bahasa pemrograman yang berjalan di sisi klien (klien web / browser).
Teknologi Javascript dibuat dengan tujuan agar dapat memperingan kerja server serta
menambah sifat dinamis dan interaktivitas dari sebuah situs HTML. Penggunaan Javascript
terutama untuk hal-hal yang tidak bersifat penting atau kritis, seperti pemeriksaan format input,
animasi teks, efek kursor mouse, dan aplikasi-aplikasi ringan seperti kalkulator maupun games.
2. Penulisan Javascript pada HTML menggunakan tag <SCRIPT>...</SCRIPT> yang dapat
ditempatkan pada area <HEAD> ataupun <BODY>. Penempatan tag <SCRIPT> pada area
<HEAD> dimaksudkan agar Javascript dijalankan terlebih dahulu sebelum menampilkan
halaman HTML, tetapi ada beberapa Javascript yang menggunakan elemen HTML justru harus
ditulis pada area <BODY>.
3. Penulisan tag <SCRIPT> untuk Javascript adalah sebagai berikut:

4. Perintah Javascript untuk menampilkan suatu teks atau tulisan pada layar browser dapat
mempergunakan document.write atau document.writeln, seperti contoh di bawah ini:
Nama File: docWrite.htm

hal 1 dari 16
Achmad Hamdan, M.Pd – Javascript 1

5. Perintah document.write juga dapat menampilkan seluruh tag-tag HTML termasuk tag untuk efek
tulisan <b></b>, bahkan dapat juga untuk membuat tabel seperti tampak di bawah ini:
Nama File: docWrite2.htm

6. Pada dunia pemrograman salah satu konsep terpenting adalah VARIABEL, sama halnya pada
bahasa pemrograman yang lain Javascript juga memerlukan penggunaan VARIABEL. Yang
dimaksud dengan VARIABEL adalah sebuah penampung data dimana sewaktu-waktu isinya
dapat diubah, ditambah, dikurangi, dan sebagainya.

7. Isi VARIABEL pada Javascript dibedakan menjadi 2 yaitu angka atau kalimat. Isi variabel yang
berupa angka seringkali disebut NUMERIK dan isi variabel yang berupa kalimat seringkali
disebut STRING. Untuk membuat variabel dalam Javascript sangat mudah, yaitu tinggal
disebutkan saja nama variabel yang akan digunakan kemudian isi dengan nilai yang
dikehendaki, dengan perintah "var", seperti tampak di bawah ini:
Nama File: variabel.htm

hal 2 dari 16
Achmad Hamdan, M.Pd – Javascript 1

8. Dari contoh di atas dapat dilihat bahwa variabel Nilai dan Jumlah berisi data Numerik
sedangkan variabel Nama1 dan Nama2 berisi data String. Untuk menampilkan isi dari masing-
masing variabel dipergunakan perintah document.write dan diisi dengan nama variabel yang
hendak ditampilkan.
9. Nilai pada variabel dapat dikenai proses perhitungan matematis, seperti penambahan,
pengurangan, pembagian dan perkalian. Sehingga dengan kemampuan seperti itu maka dapat
dibuat rumus-rumus matematis yang menggunakan variabel tsb seperti tampak di bawah ini:
Nama File: varNumerik.htm

10. Proses matematis hanya dapat berfungsi apabila isi data dari variabel tersebut adalah Numerik
sedangkan untuk jenis data String hanya dapat menggunakan proses penambahan saja,
seperti terlihat di bawah ini:
Nama File: varString.htm

hal 3 dari 16
Achmad Hamdan, M.Pd – Javascript 1

11. Nilai data yang bersifat String selalu ditandai dengan tanda petik pembuka dan penutup
seperti: "Jl. Jambu 20", sehingga apabila nilai data Numerik diberi tanda petik pembuka dan
penutup akan diperlakukan sebagai String, seperti tampak di bawah ini:
Nama File: varString2.htm

12. Selain dapat menampilkan pada halaman browser, Javascript dapat juga menampilkan pesan
pada kotak dialog tersendiri dengan mempergunakan perintah alert, seperti di bawah ini:

13. Apabila dijalankan di browser, maka akan tampil pesan pada kotak dialog seperti di bawah ini:

hal 4 dari 16
Achmad Hamdan, M.Pd – Javascript 1

14. Selain dapat menampilkan teks atau pesan dengan menggunakan kotak dialog, Javascript juga
dapat meminta input atau masukan dari user dengan menggunakan kotak dialog. Perintah
yang dipergunakan untuk meminta masukan dari user adalah prompt, seperti di bawah ini:

15. Pada saat script tersebut dijalankan di Browser maka akan tampil kotak dialog seperti:

16. Dan input atau masukan dari user tersebut disimpan dalam variabel "nama" dan kemudian
dicetak ke Browser dengan menggunakan perintah document.write.

hal 5 dari 16
Achmad Hamdan, M.Pd – Javascript 1

TUGAS PRAKTIKUM I

1. Ubahlah kode program Javascript untuk perhitungan Luas, dengan menggunakan kotak dialog
untuk memasukkan nilai Panjang dan Lebar, serta menggunakan kotak dialog untuk
menampilkan hasil perhitungan Luas.
2. Buatlah kode program Javascript yang pada saat dijalankan akan menanyakan Nama Barang,
Harga Barang, dan Jumlah Barang untuk 3 barang yang berbeda dan akan menampilkan hasil
penjumlahan dari total harga yang harus dibayar dari ke-3 barang tersebut, seperti tampak di
bawah ini:

Program akan menanyakan Nama Barang, Harga Barang dan Jumlah Barang:

Hasil perhitungan akan menampilkan tabel


seperti tampak di bawah ini:

-- selamat mengerjakan --

hal 6 dari 16
Achmad Hamdan, M.Pd – Javascript 1

MATERI II - PERCABANGAN
TUJUAN:
Mahasiswa mengerti dan dapat mempergunakan perintah untuk melakukan penyeleksian kondisi
yang terdapat pada Javascript.

MATERI:
- If...Else...
- If...Else If...
- Switch

LATIHAN PRAKTIKUM
1. Selain Variabel, komponen terpenting lainnya dari sebuah bahasa pemrograman, termasuk
Javascript adalah kemampuan untuk melakukan penyeleksian kondisi terhadap nilai yang
dimiliki oleh variabel. Dengan adanya kemampuan melakukan penyeleksian kondisi maka
sebuah script dapat menentukan perintah atau kode program yang harus dijalankan sesuai
dengan kondisi tertentu.
2. Perintah Javascript untuk melakukan penyeleksian kondisi bisa dengan menggunakan If-Else, If-
Else If, Nested If dan Switch-Case. Kesemua pengkondisian tersebut secara mendetail akan
dijelaskan kembali pada modul Pemrograman PHP pertemuan selanjutnya.
3. Untuk lebih jelasnya perhatikan contoh script di bawah ini yang melakukan pendeteksian nilai
dari variabel nilai, apakah bernilai positif atau tidak.

Nama File: seleksi.htm

4. Penjelasan kode program di atas adalah sebagai berikut:

hal 7 dari 16
Achmad Hamdan, M.Pd – Javascript 1

5. Selain dapat dipergunakan untuk melakukan pendeteksian terhadap variabel dengan nilai
Numerik, perintah penyeleksi kondisi juga dapat dipergunakan untuk melakukan pemeriksaan
terhadap nilai variabel dengan nilai String atau kalimat, seperti pada contoh script di bawah ini:
Nama File: seleksi2.htm

6. Kondisi yang diperiksa pada penyeleksi kondisi dapat lebih dari 1. Untuk melakukan
pemeriksaan kondisi yang lebih daripada 1 dipergunakan operator && (AND) dan || (OR).
Operator && dipergunakan apabila dikehendaki semua kondisi terpenuhi dan operator ||
dipergunakan apabila dikehendaki salah satu kondisi terpenuhi.

7. Untuk lebih jelas perhatikan contoh script di bawah ini, kode script ini bertujuan untuk
melakukan konversi atau pengubahan dari nilai menjadi grade, dengan ketentuan sebagai
berikut:
- nilai 80-100 : A
- nilai 60-79 : B
- nilai 40-59 : C
- nilai < 40 : D

hal 8 dari 16
Achmad Hamdan, M.Pd – Javascript 1

Nama File: seleksi2.htm

TUGAS PRAKTIKUM

Buatlah sebuah script yang mengambil input dari user berupa jam sekarang, misal: jam 9, jam
10 atau jam 13, kemudian berdasarkan jam tersebut script akan menampilkan salam yang sesuai
seperti contoh berikut ini:

Script meminta input berupa jam sekarang, masukkan nilai jam tanpa menit.

Maka script akan menampilkan salam yang sesuai untuk jam tersebut, seperti pada contoh di atas
jam 13.00 maka salam yang ditampilkan adalah "Selamat Siang".

- Jam 6 - 10 : Selamat Pagi


- Jam 11 - 14 : Selamat Siang
- Jam 15 - 17 : Selamat Sore
- Jam 18 - 24 : Selamat Malam
- Jam 1 - 5 : Selamat Tidur

hal 9 dari 16
Achmad Hamdan, M.Pd – Javascript 1

MATERI III - PERULANGAN

TUJUAN:
Mahasiswa mengerti cara menggunakan perintah perulangan pada Javascript.

MATERI:
- Menggunakan Perulangan Pasti / For...
- Menggunakan Perulangan Kondisi / While...
- Menggunakan Perulangan Kondisi / Do...While
- Menggunakan Break dan Continue.

LATIHAN PRAKTIKUM III


1. Fungsi pembuatan program komputer selain dapat menentukan suatu tindakan berdasarkan
suatu kondisi tertentu juga berfungsi untuk melakukan pekerjaan yang berulang-ulang. Hal ini
juga dapat dilakukan dengan script Javascript dengan menggunakan perintah-perintah
perulangan seperti For..., While..., atau Do...While.
2. Pada dunia pemrograman dikenal ada 2 jenis perulangan, yaitu perulangan pasti dan
perulangan kondisi, perulangan pasti dipergunakan untuk memecahkan masalah-masalah
perulangan yang sudah dapat diketahui dengan pasti berapa kali pekerjaan tersebut harus
diulangi. Sedangkan perulangan kondisi digunakan apabila tidak diketahui dengan pasti berapa
kali pekerjaan tersebut harus diulangi, tetapi yang diketahui adalah bahwa pekerjaan tersebut
harus diulangi terus sampai suatu kondisi tertentu terpenuhi.
3. Untuk perulangan pasti dapat dipergunakan perintah For... seperti contoh di bawah ini, yang
dipergunakan untuk melakukan pekerjaan penulisan kata-kata "Test" sebanyak 10 kali di
browser daripada harus menuliskan sebanyak 10 baris script.

4. Proses perulangan ini juga dapat dibuat menjadi bertingkat, sehingga terdapat beberapa
tingkatan perulangan atau sering juga disebut perulangan bersarang dimana di dalam sebuah
proses perulangan terdapat proses perulangan yang lainnya. Sebagai contoh perulangan pasti
bertingkat / bersarang seperti tampak di bawah ini:
Nama File: perulangan.htm

hal 10 dari 16
Achmad Hamdan, M.Pd – Javascript 1

5. Jumlah perulangan pasti dapat juga digantikan dengan nilai sebuah variabel yang lain, seperti
contoh di bawah ini, dimana jumlah perulangan akan disesuaikan dengan nilai masukan user.
Nama File: perulangan2.htm

6. Sedangkan untuk perulangan yang tidak diketahui dengan pasti berapa kali harus diulangi
dapat mempergunakan perulangan berdasarkan kondisi, dimana perulangan akan berhenti
apabila suatu kondisi atau keadaan tertentu terpenuhi. Perulangan kondisi mempergunakan
perintah While...
7. Contoh di bawah ini akan menampilkan tulisan "Positif" sampai nilai variabel "i" sama dengan 0.
Nama File: perulangan3.htm

hal 11 dari 16
Achmad Hamdan, M.Pd – Javascript 1

8. Pada perulangan kondisi yang harus diperhatikan adalah jangan lupa menyertakan perintah
untuk menambah variabel penghitung, seperti tampak di atas pada baris i--; (decrement)
apabila baris ini tidak ada atau kondisi yang diminta tidak pernah tercapai maka browser bisa
menjadi hang.
9. Untuk perulangan kondisi, selain mempergunakan perintah While... dapat juga dipergunakan
perintah Do...While. Hasil dari kedua script ini sama, baik yang mempergunakan perintah While
maupun yang mempergunakan perintah Do...While. Perbedaannya adalah apabila pada
perintah While, kondisi diperiksa terlebih dahulu baru perintah dijalankan, sedangkan pada
perintah Do...While perintah dijalankan terlebih dahulu baru kondisi diperiksa. Jadi apabila
mempergunakan perintah While maka ada kemungkinan perintah tidak dikerjakan sama sekali,
tetapi apabila mempergunakan perintah Do...While maka perintah pasti akan dikerjakan
minimal sekali.

TUGAS PRAKTIKUM
1. Buatlah script yang akan menanyakan password dan apabila password yang ditanyakan tidak
sesuai maka user akan ditanyai lagi, tetapi apabila password sesuai maka script akan
menampilkan salam selamat datang.

2. Buatlah script untuk menanyakan jumlah siswa yang masuk untuk hari Senin, Selasa, Rabu,
Kamis dan Jumat, setelah itu akan menggambarkan grafik berdasarkan nilai tersebut, seperti
tampak di bawah ini:

-- selamat mengerjakan--

hal 12 dari 16
Achmad Hamdan, M.Pd – Javascript 1

MATERI IV - FUNGSI

TUJUAN:
Mahasiswa mengerti mengenai penggunaan fungsi dan cara pembuatan fungsi di Javascript.

MATERI:
- Mengenal jenis-jenis fungsi Javascript
- Menggunakan fungsi built-in Javascript
- Membuat fungsi buatan sendiri
- Membuat fungsi dengan parameter
- Membuat fungsi yang menghasilkan nilai
- Variabel Global dan Variabel Lokal

LATIHAN PRAKTIKUM IV
1. Pada Javascript terdapat 2 jenis fungsi, yaitu fungsi built-in atau fungsi bawaan dari Javascript
dimana tinggal dipergunakan saja dan fungsi buatan sendiri. Fungsi buatan sendiri
dipergunakan untuk mempermudah pengerjaan perintah yang berulang-ulang, sehingga fungsi
buatan sendiri harus didefinisikan terlebih dahulu agar dapat dikenali oleh Javascript.
2. Salah satu contoh fungsi built-in Javascript adalah fungsi document.write yang telah banyak
dipergunakan sejak awal. Ada banyak fungsi-fungsi built-in Javascript lainnya, seperti fungsi
untuk jam dan tanggal, fungsi matematika, fungsi string, dan sebagainya.
3. Selain fungsi document.write, fungsi built-in Javascript yang penting adalah parseInt, fungsi
parseInt dipergunakan untuk melakukan konversi dari variabel string atau kata menjadi variabel
dengan nilai integer atau angka, seperti contoh di bawah ini. Perbandingkan antara hasil
penjumlahan tanpa menggunakan parseInt dengan yang menggunakan parseInt:
Nama File: fungsi.htm

hal 13 dari 16
Achmad Hamdan, M.Pd – Javascript 1

4. Untuk membuat fungsi sendiri dapat dipergunakan perintah function, seperti contoh di bawah
ini, dimana dibuat fungsi dengan nama tulis daripada berulangkali menuliskan document.write.

5. Dari contoh di atas dapat dilihat bahwa fungsi dibuat dengan nama "tulis" sehingga untuk
menulis ke layar tidak perlu menulis perintah document.write yang lebih panjang, kemudian
diperlukan sebuah parameter (nilai yang dimasukkan ke dalam fungsi) melalui variabel dengan
nama "kata", kemudian untuk menjalankan fungsi dapat dilakukan dengan menggunakan nama
fungsi tersebut diikuti dengan parameter yang diperlukan seperti: tulis("Selamat Datang");

6. Selain dapat mengerjakan banyak perintah sekaligus, sebuah fungsi juga berguna untuk
mengembalikan suatu nilai dari hasil perhitungan formula dalam fungsi tersebut. Fungsi built-in
Javascript yang merupakan fungsi yang mengembalikan nilai adalah fungsi prompt dan fungsi
parseInt, yang sudah sering dipergunakan. Sebagai contoh script buatan sendiri yang dapat
mengembalikan nilai maka dibuat 2 buah fungsi baru yaitu fungsi "tambah" dan fungsi
"kurang", yang akan melakukan perhitungan nilai parameter ke-1 ditambah atau dikurangi nilai
parameter ke-2.
Nama File: fungsi2.htm

7. Dari contoh di atas dapat dilihat bahwa untuk mengembalikan nilai dapat dipergunakan perintah
return (nilai yang akan dikembalikan), dan parameter yang dimasukkan dapat lebih dari 1
parameter, sesuai dengan kebutuhan dari fungsi tersebut, sedangkan untuk melakukan
pemanggilan terhadap fungsi yang mengembalikan nilai, diperlukan sebuah nilai variabel di
depannya seperti contoh: hasil = tambah (10,20); dimana variabel "hasil" akan menampung
nilai yang dikembalikan dari fungsi "tambah" yang merupakan hasil perhitungan angka 10
ditambah angka 20.

hal 14 dari 16
Achmad Hamdan, M.Pd – Javascript 1

8. Dengan adanya penggunaan fungsi maka akan dikenal 2 jenis variabel, yaitu variabel global dan
variabel lokal. Variabel global adalah variabel yang dikenal oleh seluruh fungsi-fungsi Javascript
yang ada, sedangkan variabel lokal adalah variabel yang hanya dikenal oleh fungsi itu sendiri,
perhatikan contoh di bawah ini:
Nama File: fungsi3.htm

9. Pada contoh di atas, karena function "fungsi1" memiliki variabel lokal dengan nama "a" maka
nilai "a" yang dipergunakan adalah nilai variabel lokal "a" yaitu 20, sedangkan pada function
"fungsi2" karena tidak memiliki variabel lokal dengan nama "a" maka nilai variabel yang
dipergunakan adalah nilai variabel global "a" yaitu 10. Sedangkan untuk perintah di luar fungsi
sudah pasti akan dipergunakan nilai variabel global "a" yaitu 10.

10. Untuk menanyakan sesuatu dapat dipergunakan perintah confirm seperti tampak di bawah ini:

hal 15 dari 16
Achmad Hamdan, M.Pd – Javascript 1

TUGAS PRAKTIKUM

1. Buatlah sebuah fungsi dengan kemampuan sebagai berikut:


- apabila parameter ("luas",10,20) maka akan mengembalikan nilai luas.
- apabila parameter ("keliling",10,20) maka akan mengembalikan nilai keliling.

2. Buatlah sebuah fungsi yang akan menggambar tabel sesuai dengan parameter baris x kolom.
contoh: tabel(2,2) maka akan menggambar tabel sebagai berikut:

-- selamat mengerjakan--

hal 16 dari 16

Anda mungkin juga menyukai