Laporan

Praktikum 8 “JAVASCRIPT” UNIVERSITAS BRAWIJAYA Dosen Pembimbing: Randy Cahya W. S.ST, M. Kom

Oleh:

Arinda Dewi Listikowati

143140714111046

TIK C

Langkah-langkah

1. Hello, world!

Tampilkan kalimat “Hello, world!” menggunakan fungsi alert()

-Hasil tampilan di Web Browser

2. Prompt

Gunakan fungsi prompt() untuk menanyakan nama user

Kemudian tampilkan kalimat “Hello, <nama user>!” dengan fungsi alert()

-Hasil tampilan di Web Browser

a. Muncul dialog box yang menyatakan “Please enter your name”.

b. Masukkan nama pada diaolog box, lalu klik OK.

a. Kemudian muncul kotak dialog berikut yang menyatakan “Hello,

Arinda Dewi Listikowati!”

3. Math

Gunakan fungsi prompt() untuk menerima informasi dari user

berupa angka panjang jari-jari lingkaran

Kemudian gunakan property Math.PI dan fungsi Math.pow()

untuk menghitung luas lingkaran tersebut

Tampilkan hasil perhitungan dengan fungsi alert()

- Hasil tampilan di Web Browser

a. Muncul dialog box “Masukkan panjang jari-jari lingkaran”.

b. Misal masukkan angka 7 pada panjang jari-jari lingkaran kemudian

klik OK. Maka muncul hasil perhitungan seperti berikut.

4. Confirm

Dengan fungsi confirm(), tanyakan kepada user apakah ingin

mengunjungi website vokasi

Jika user memilih OK, arahkan URL ke http://vokasi.ub.ac.id

- Hasil tampilan di Web Browser

a. Muncul dialog box “Do you want to visiting vokasi website?”, klik

OK.

b. Maka URL menuju website Vokasi.

5. setTimeout

Ulangi latihan nomor 2

Berikan jeda waktu antara prompt dan alert selama 5 detik(5000

ms)

- Hasil tampilan di Web Browser

a. Muncul diaolog box berikut, kemudian masukkan nama klik OK.

b. Tunggu selama 5 detik.

c. Maka muncul dialog box “Hello, Arinda Dewi Listikowati”.

6. Selector

Buat text field dengan id “name” dengan value nama anda masing-

masing (menggunakan atribut value)

Pilih elemen tersebut dengan fungsi getElemntById()

Dapatkah teks dielemen tersebut menggunakan properti value

Tampilkan teks tersebut menggunakan fungsi alert

-Hasil tampilan di Web Browser

7. Events

Ulangi latihan nomor 6

Tambahkan tombol dengan id tertentu

Tampilkan nama user setelah user mengklik tombol tersebut

- Hasil tampilan di Web Browser.

8. addEventListener

Buat sebuah tombol dengan id tertentu

Tambahkan dua event listener yang masing-masing:

-Menampilkan kalimat “Hello, world!”

-Menampilkan kalimat “Good morning!”

- Hasil tampilan di Web Browser.

a. Muncul button “Click Here”. Klik!

b. Maka muncul dialog box “Hello, world!”. Klik OK lagi

c. Muncul dialog box “Good Morning!”

9. Focus/Blur

Buat text field dengan id tertentu

Tambahkan dua event handler pada elemen tersebut:

- Saat user memberikan focus pada elemen tersebut, ubah warna

teks dari elemen tersebut menjadi merah

- Saat keluar dari focus element tersebut, ubah warna teks

menjadi kuning

- Hasil tampilan di Web Browser.

a. Saat user memberikan focus pada elemen berwarna merah.

b. Saat user keluar dari focus elemen berubah menjadi warna

kuning

10. Form Processing

Buat form login (username, password, dan tombol login)

User mengisikan username dan password kemudian menekan tombol

login

Jika login sukses (username=”admin” dan password=”123456”),

tampilkan pesan “Login sukses”

Jika gagal, tampilkan pesan “Login gagal”

-Hasil tampilan di Web Browser.

a. Masukkan username dan password, kemudian login.

b. Jika login sukses (username=”admin” dan password=”123456”),

maka akan tampil pesan “Login sukses”

c. Jika username atau password yang anda masukkan salah maka

gagal, maka akan tampil pesan “Login gagal”