1 Modul 6 Java Scripts I 1.1 Tujuan a. Mahasiswa dapat mengoperasikan struktur java scripts b. Mahasiswa dapat memakai objeck dan form pada java scrip...
Modul 6 Java Scripts I 1.1 Tujuan a. Mahasiswa dapat mengoperasikan struktur java scripts b. Mahasiswa dapat memakai objeck dan form pada java scripts 1.2 Materi a. Java Scripts b. Pemrograman c. Form 1.3 Alat dan Bahan a. Macromedia Dreamweaver b. Page, Image 1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumny a b. Instruktur menerangkan dan menjelaskan teori dan cara kerja c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan 1.5 Teori Sekilas tentang JavaScript Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunak an JavaScript dimungkinkan unt uk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. avascript diint erpretasikan oleh klien (kodenya bis a dilihat pada sisi klien), edangkan kode java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien. Struktur JavaScript Struktur dari JavaSc ript adalah sbb : <SCRIP T LANGUA GE = ”JavaScri pt”> Keterangan : Kode < !- // – - > umumnya disertak an dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser ak an memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser. JavaScript sebagai bahasa berorientasi pada obyek Properti Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan : Nama_objek.nama_properti = nilai window. defaultStatus = ”Selamat Belajar JavaScript”; Metode Metode adalah suat u kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)
Letak JavaScript dalam HTML Skrip Javascript dalam dokumen HTM L dapat diletakkan pada : 1. Bagian Head 2. Bagian Body (jarang digunak an). Latihan : DASAR-DASAR JAVASCRIPT 1. Pemakaian alert sebagai property window 2. Pemakaian metode dalam objek. 3. Pemakaian prompt <TITLE>Alert Box <SCRIP T LANGUA GE = “JavaScript”> <TITLE>Skrip JavaScript Percobaan memakai JavaScript: <SCRIP T LANGUA GE = “JavaScript”> ”); document.write(“S emoga sukses!”); //–> <TITLE>Pemasukan Data <SCRIP T LANGUA GE = “JavaScript”> IIP Fisip Unair
Pemrograman di Java Scripts Operasi dasar aritmatika <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> function pesan(){
alert (“memanggil javascript lewat body onload”) } <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> function test (val1, val2) { document.write(“< br>”+”P erkalian : val1*val2 “+ ” ”) document.write(val1*val2) document.write(“< br>”+”P embagian : val1/ val2 “+” ”) document.write(val1/ val2) document.write(“< br>”+”P enjumlahan : val1+ val2 “+ ” ”) document.write(val1+ val2) document.write(“< br>”+”P engurangan : val1-val2 “+”< br>”) document.write(val1-val2) document.write(“< br>”+”Modulus : val1% val2 “+” ”) document.write(val1% val2) } IIP FIS IP-UNA IR Operasi relational Seleksi kondisi (if..else) <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> function test () { val1= window.prompt(“Nilai I :”) val2= window.prompt(“Nilai II :”) document.write(“< br>”+”val1== val2″+” ”) document.write(val1== val2) document.write(“< br>”+”val1!= val2″+” ”) document.write(val1!= val2) document.write(“< br>”+”val1> val2″+”< br>”) document.write(val1> val2) document.write(“< br>”+”val1< val2″+” ”) document.write(val1< val2) } <TITLE> Contoh if-else
<SCRIP T LANGUA GE = “JavaScript”> = 60) hasil = “Lulus”; else hasil = “Tidak Lulus”; document.write(“Hasil: ” + hasil); //–> IIP FIS IP-UNA IR Penggunaan operator switch untuk seleksi kondi si Pem akaian looping < for > <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> function test () { val1= window.prompt(“Input Nilai (1-5):”) switch (val1) { case “1″ : document.write(“bilangan satu”) break case “2″ : document.write(“bilangan dua”) break case “3″ : document.write(“bilangan tiga”) break case “4″ : document.write(“bilangan empat”) break case “5″ : document.write(“bilangan lima”) break default : document.write(“bilangan lainnya”) } } <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> ”)
// –> IIP FIS IP-UNA IR Pem akaian looping < do..while > Pem akaian looping < while > <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> ”) x++; } while (x<=10) // –> <TITLE> Contoh Program Javascript <SCRIP T language= ”Javascript”> ”) x++; } // –> IIP FIS IP-UNA IR Form 1. Form input : 2. Form button : <SCRIP T language= ”Javascript”> function test () { var val1=document.kirim. T1. value if (val1% 2==0) document.kirim.T2. value= ”bilangan genap” else document.kirim.T2. value= ”bilangan ganjil” } <TITLE>Objek document <SCRIP T LANGUA GE = “JavaScript”>
TES
IIP FIS IP-UNA IR 1.6 Latihan 1. Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan menggunakan javascript . Konversi : 0-40 =E 41-55= D 56-60= C 61-65=BC 66-70=B 71-80=AB 81-100=A 2. Buat halaman html untuk menampilkan aplikasi program kalkulat or sederhana dengan menggunakan javascript. Cont oh tampilan : Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic sesuai dengan tombol yang ditekan. <SCRIP T LANGUA GE = “JavaScript”>
