POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

Transkripsi

1 WEB DESAIN Pengenalan JavaScript Alfira Rizky Ayuputri D3 Multimedia Broadcasting B Dwi Susanto, S.ST, MT. D3 Teknologi Multimedia Broadcasting Departemen Multimedia Kreatif POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

2 Dasar Teori Javascript merupakan bahasa pemrograman berbasis client-side yang berfungsi untuk menjadikan halaman web menjadi interaktif. Client-side berarti bahasa ini akan berjalan pada client dan tidak membutuhkan server tersendiri layaknya PHP. Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Layaknya CSS, javascript bisa langsung ditambahkan pada dokumen html atau bisa juga menyimpannya sebagai file yang terpisah dan kemudian memanggilnya melalui link. Kedua metode tersebut sama-sama membutuhkan elemen <script>. Bisa juga menggunakan metode yang lain, yaitu menggunakan atribut src yang diarahkan ke file javascript yang disimpan dengan format ekstensi.js. Keuntungan menggunakan file javascript yang terpisah, adalah bisa menggunakan file yang sama pada halaman-halaman web yang lain, sama halnya dengan file css yang terpisah. Kekurangannya adalah saat pemanggilan file javascript tersebut membutuhkan penambahan permintaan ke server berbasis HTTP yang tentunya juga memperlambat performanya. JavaScript menggunakan sistem case sensitive yang artinya membedakan nama variabel dengan huruf besar dan huruf kecil.

3 Analisa 1. Menulis ke halaman web melalui javascript Pada percobaan pertama ini, script document.write digunakan untuk menambahkan serta menampilkan text dalam web browser. 2. Merespon event Percobaan kedua, javascript bisa merubah isi elemen html. Teks awal dengan script x=document.getelementbyid("demo"), dimana teks ("demo") adalah Javascript dapat merubah isi elemen html lalu dirubah menjadi teks baru dengan menekan tombol Click Me. Menggunakan script x.innerhtml="ini isi terbaru!";, dapat mengubah isi teks sebelumnya. Script tersebut dimasukkan ke dalam function, lalu dipanggil oleh tombol saat di klik dengan script button ditambahkan onclick= variabel fungsi().

4 3. Merubah Style Elemen HTML melalui javascript Percobaan ketiga, merubah style teks HTML melalui javascript. Tidak berbeda jauh dengan sebelumnya, namun tetap terdapat perbedaan karena pada bagian ini hanya elemen warna teksnya saja yang berubah. Dengan menggunakan script x.style.color="#ff0000"; maka warna teks akan berubah dengan hanya menekan tombol Click Me. Sedangkan untuk memanggil script function, pada script button ditambahkan onclick= variabel fungsi().

5 4. Pengenalan Variabel dan Aritmatika Sederhana Percobaan keempat, menghitung aritmatika sederhana. Pertama, kita mendeklarasikan variabel aritmatika terlebih dahulu sebagai variable angka, var x=5;. Lalu dengan ditambahkan script document-write dan rumus perhitungan untuk menampilkan hasilnya, maka hasil akan Nampak sesuai dengan rumus yang sudah dituliskan. 5. Tipe Data Percobaan kelima, menampilkan tipe data dalam javascript. Seperti halnya dengan percobaan pertama, terdapat script document.write pada percobaan ini. Namun perbedaannya, kita harus mendeklarasikan suatu variable terlebih dahulu lalu menampilkannya dengan script document.write.

6 6. Merespon Event dan memberikan informasi berupa alert Percobaan keenam, merespon event lalu menampilkan alert nya. Menggunakan script <button type="button" onclick="alert('selamat Datang!\n untuk anda')">click Me!</button>, dimana yang dimaksukan pada script ini adalah Onclick sebagai action tombol pada saat di klik dan Alert untuk menampilkan kotak dialog.

7 7. Memanggil Fungsi Percobaan ketujuh, tidak jauh berbeda dengan percobaan ke enam jika di lihat melalui browser, dimana onclick lalu muncul kotak dialog. Namun ketika dilihat script nya Nampak berbeda, dimana script function ditempatkan terpisah. 8. Menampilkan Kotak Konfirmasi Percobaan delapan ini serupa dengan percobaan sebelum-sebelumnya, dimana sama-sama menampilkan kotak dialog namun perbedaannya terdapat tambahan konfirmasi. Dengan ditambahkannya scripct var x,y sebelumnya.

8

9 9. Menampilkan prompt box Percobaan ke Sembilan, adanya kotak prompt yang ditampilkan lalu inputkan nama, kemudian akan muncul teks Selamat datang (nama)! bagaimana kabar anda hari ini?. Pada scipt function, kita mendeklarasikan var terlebih dahulu, lalu menambahkan rumus if untuk menambahkan teks selamat datang.

10 10. Mengatur Interval Percobaan ke sepuluh. Dalam percobaan ini, ketika tombol Tampilkan Alert diklik, maka setiap 3 detik kotak peringatan akan muncul. Untuk menampilkan kotak peringatannya menggunakan script fungsi setinterval(function(){alert( Selamat Datang )},3000), dimana 3000 yang dimaksud adalah waktu dalam satuan milisecond.

11 11. Validasi Input Percobaan terakhir yaitu Validasi input yang mana biasanya digunakan untuk mengecek apa teks yang diiputkan benar atau salah. Seperti pada percobaan ini, hanya input angka yang bisa diinputkan, jika form tidak di isi angka maka akan keluar peringatan bukan angka. Peringatan tersebut menggunakan fungsi if(x== ){alert( Bukan angka )}. Untuk menampilkan peringatan tersebut, tombol Cek Angka harus diklik terlebih dahulu dan akan diarahkan ke script function.

12 Tugas 1. Buatlah sebuah form registrasi yang mencatat nama, username, , password, no telepon, jenis kelamin, dan alamat website. Kemudian lengkapi form tersebut dengan validasi menggunakan javascript pada nama, username, dan .

13 %201.html 2. Buatlah sebuah kotak dengan elemen div, kemudian dengan menggunakan set interval, secara periodik, setiap 4 detik, rubahlah background gambar kotak tersebut, bergantian sebanyak 5 gambar

14

15 ugas%202.html