LAPORAN PRAKTIKUMJAVASCRIPT

Dosen Pembimbing : Arifin Noor Asyikin,MT

Disusun Oleh

SEKOLAH TINGGI KEGURUAN DAN ILMU PENDIDIKANPERSATUAN GURU REPUBLIK INDONESIA

2015

Nama : Muhammad IndraNPM : 3061246006Mata Kuliah: Desain WebKelas : 02Jurusan : PTI

Praktikum 1

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

Hasil tampilan di web browser

Prompt

Gunakan fungsi prompt () untuk menanyakan user

Tampilkan kalimat hello <nama user> dengan fungsi alert()

Hasil tampilan di web browser

Muncul dialog box yang menyatakan “Please enter your name”

Masukan nama pada dialog box,lalu klik OK

Kemudian akan muncul kotak dialog berikut “Hello,Muhammad Indra!”

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 browserMuncul dialog box “masukan panjang jari-jari lingkaran”

Misal masukan angka 8 pada jari-jari lingkaran kemudian klik OK. Maka muncul hasil perhitungan seperti berikut.

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 web browser muncul dialog box “Do you want visiting vokasi website”,klik OK

Maka URL menuju ke web vokasi

SetTimeOut Ulangi latihan no 2 Berikan jeda waktu antara prompt dan alert selama 5 detik (5000ms)

Tampilan hasil di web browser

Muncul dialog box berikut, kemudian masukan nama klik OK.

Tunggu selama 5 detik

Maka muncul dialog box “Hello,Muhammad Indra”.

Selector Buat text field dengan id “name” dengan value anda masing-masing (menggunakan

atribut value) Pilih elemen tersebut dengan fungsi getElementById()

Dapatkan teks di elemen tersebut menggunakan property value

Tampilkan teks tersebut menggunakan fungsi alert

Tampilan Hasil di web browser

Event Ulangi latihan nomor 6 Tambahkan nomor dengan id tertentu Tampilkan nama user setelah user mengklik tombol tersebut

Hasil tampilan di web browser

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,muncul button “Click Here”.Klik!

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

Muncul dialog box “Good morning!”

Focus/Blur

Buat text field dengan id tertentu Tambahkan dua event handler pada element tersebut :

Saat user memberikan fokus pada element tersebut,ubah warna teks dari element tersebut menjadi merah

Saat user keluar dari fokus element tersebut, ubah warna teks menjadi kuning

Tampilan hasil di web browser

- Saat user memberikan focus pada element berwarna merah.

- Saat user keluar dari focus element berubah menjadi warna kuning.

Form Processing Buat form login (userame,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

Masukan username dan password, kemudian login.

Jika login sukses (username= “admin” dan password=”123456”), maka akan tampil pesan “Login Sukses”

Jika username atau password yang anda masukan salah maka gagal, maka akan tampil pesan “Login Gagal”