Laporan Praktikum Desain Web \"JavaScript\"

Laporan Praktikum 11/25/2014

UNIVERSITAS

BRAWIJAYA

OLEH: ARINDA DEWI L| 143140714111046| TI-C

Dosen Pembimbing | Randy Cahya Wihandika, S.ST., M.KOM.

Langkah-langkah

1. On-the-fly Element  Buat suatu paragraph di dalam dengan teks sembarang



Buat elemen secara on the fly dan tambahkan di atas paragraph tersebut -

Hasil tampilan di Web Browser

2. On-the-fly Element  Buat heading level 1 sampai dengan 6



Hapus tiga dari heading-heading tersebut secara on the fly



Disetiap penghapusan heading tersebut, tampilkan pesan di console:”Deleting heading x” -Hasil tampilan di Web Browser

-

Kemudian klik kanan, muncul kotak dialog klik console. Maka muncul tampilan pesan diconsole.

3. AJAX  Lakukan komunikasi via AJAX ke URL http://repo.ptiik.ub.ac.id/ajax/ajax.txt

 

Tampilkan respons dari server pada console Tampilkan waktu yang dibutuhkan untuk melakukan komunikasi AJAX tersebut pada console

-

Tampilan pesan waktu yang dibutuhkan untuk komunikasi AJAX

4. AJAX-JSON  Lakukan komunikasi via AJAX ke URL http://repo.ptiik.ub.ac.id/ajax/ajax.json  Tampilkan respons dari server pada console kemudian amati bentuk respons tersebut  Lakukan parsing terhadap teks JSON tersebut ke bentuk obyek JSON  Tampilkan elemen-elemen dari obyek JSON tersebut ke console  Tampilkan waktu yang dibutuhkan untuk melakukan komunikasi AJAX tersebut pada console

-

Tampilan pesan di console

5. Regular Expression  Buat form untuk registrasi dengan field username dan email  Tambahkan tombol “Submit”





Saat tombol submit diklik, lakukan validasi username dan email menggunakan regex dengan pattern: 1. Username : /^[a-Za-z0-9_]{1,12}$/ 2. Email : /^[a-Za-z0-9_]{1,12}$/@ub\.ac\.id$/ Tampilkan hasil validasi username dan email pada console

-

Hasil tampilan di Web Browser, kemudian coba masukkan Username dan Email

-

Kemudian klik submit, dan muncul kotak dialog berikut.

6. jQuery I  Dengan jQuery, tambahkan CSS style untuk mengubah warna teks yang ada di paragraph pada latihan 1 menjadi merah

-

Hasil tampilan di Web Browser

7. JQuery II  Ulangi latihan 3 dengan method yang ada di jQuery

-

Hasil tampilan di Web Browser, kemudian klik kanan inspect element klik console

-

Kemudian klik kanan inspect element klik console

8. JQuery III



Ulangi latihan 4 dengan method yang ada di jQuery

-

Hasil tampilan di Web Browser

-

Kemudian klik kanan, klik console