Pengembangan WEB Java Script Evangs Mailoa
Apa itu Java Script? Java Script itu adalah bahasa pemrograman, yang sering digunakan untuk membangun halaman web, sehingga lebih interaktif. Seringkali digunakan untuk menampilkan beberapa hal, seperti: tanggal, validasi form, mengatur tampilan, proteksi web, dsb. Java Script adalah client side scripting. Artinya semua instruksi dalam coding akan dijalankan dalam komputer client, bukan server.
Apa itu Java Script? Java Script butuh interpreter (penerjemah). Komputer hanya memahami bahasa mesin (dalam bentuk binary; 1 dan 0), sedangkan Java Script mendekati bahasa manusia dan belum di-compile menjadi bahasa yang dipahami oleh komputer. Pada browser-browser terbaru, interpreter sebagai penerjemah Java Script sudah ada di dalamnya. Perlu diingat, tidak semua browser mengenali Java Script.
Membuat Java Script <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Java Script diawali tag <script> seperti di atas. Di tengahnya terdapat blok program yang apabila dijalankan akan mencetak tulisan “Hello World” ke halaman web.
Dua Tipe Java Script Java Script bukan Java! 1. JavaScript yang hanya akan berjalan jika dipanggil. 2. JavaScript yang akan berjalan begitu halaman di-load. Kita dapat membuat javascript sebanyak mungkin sesuai keinginan kita. Java Script bukan Java! Java Script mirip C dan Java tetapi JavaScript bukanlah keduanya. Karena mirip, banyak hal yang sama, seperti fungsi, perulangan, variabel, dan kondisi. Tentunya kita tidak akan kesulitan menggunakannya.
Contoh Variabel Javascript <script type="text/javascript"> var name = “Site Title“; document.write(name); document.write("<h1>"+name+"</h1>"); </script> Pada contoh di atas, ada cara mendeklarasikan variabel dan mengisinya (baris 2) Menampilkan variabel (baris 3 en 4) JavaScript akan menampilkan isi variabel “name”. Fungsi JavaScript “document.write” dapat digunakan untuk menuliskan tag-tag HTML sehingga kita dimungkinkan melakukan apapun dengan JavaScript.
Aturan pembuatan variabel Harus diawali huruf atau underscroe “_” Case sensitive, huruf besar dan kecil dibedakan. Penulisannya bebas, seperti contoh: var nama_variable; var nama_variable = isi_variable; nama_variable; (Boleh tidak menggunakan var) Siklus hidup variabel Variabel hanya dapat dijalankan satu kali (1 fungsi), apabila keluar dari fungsi tersebut atau proses selesai maka secara otomatis variabel tsb hilang.
Kondisi Sama seperti JAVA atau C. If if-else if dalam if Switch Perlu diingat, menulis kondisi jangan menggunakan huruf besar (contoh: IF).
Contoh if <script type="text/javascript"> //Apabila waktu menunjukkan kurang dari jam 10, akan ditulis “Good Morning” //Selain itu, akan ditulis “Good day!” var d = new Date(); //var d diisi nilai dari fungsi mengambil waktu saat ini var time = d.getHours(); //var time diisi nilai jam saat ini dari d if (time < 10) { document.write("Good morning!"); } else document.write("Good day!"); </script>
Contoh switch <script type="text/javascript"> //Tulisan yang muncul bakal beda2 tergantung hari var d=new Date(); // seperti sebelumnya, Date() adalah fungsi bawaan JavaScript. hari=d.getDay(); switch (hari) { case 5: document.write(“Hari Jumat") break case 6: document.write(“Hari Sabtu") case 0: document.write(“Hari Minggu") default: document.write(“Nunggu weekend nih!") } </script>
Operator Aritmatik
Operator untuk mengisi nilai
Operator Perbandingan
Operator logika
Pop up Boxes JavaScript menyediakan popup boxes alert, confirm dan prompt. Contoh: alert(“teks”); //akan muncul teks sesuai yang ditulis dan ada pilihan OK. confirm(“teks”); // sama, tapi selain OK ada Cancel. OK nilai kembaliannya true, Cancel nilai kembaliannya False. Prompt(“teks”,”nilai_kembalian”); //sama, tetapi apabila di OK, yang kembali adalah nilai kembalian yang dituliskan. Sedangkan apabila di Cancel nilai kembaliannya null.
Contoh Function (JavaScript yang dipanggil) <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!” onclick="displaymessage()" > </form> </body> </html>
Perulangan Sama seperti JAVA atau C. For While Do While Perlu diingat, menulis perulangan jangan menggunakan huruf besar (contoh: FOR).
Contoh for <html> <body> <script type="text/javascript"> var i=0; document.write(“<ul>”); for (i=0;i<=10;i++) { document.write(“<li>Nomor " + i + “</li>); } document.write(“</ul>”); </script> </body> </html>
Contoh While <html> <body> <script type="text/javascript"> var i=0 document.write(“<ul>”); while (i<=10) { document.write(“<li>Nomor " + i + “</li>); i=i+1; } document.write(“</ul>”); </script> </body> </html>
Contoh Do-While <html> <body> <script type="text/javascript"> var i=0 document.write(“<ul>”); do { document.write(“<li>Nomor " + i + “</li>); i=i+1 } while (i<0) document.write(“</ul>”); </script> </body> </html>
Break dan Continue Break: Keluar dari perulangan Continue: Dalam perulangan, lompat ke nilai perulangan selanjutnya.
Contoh Break dan Continue <html> <body> <script type="text/javascript"> var i=0; document.write(“<ul>”); for (i=0;i<=10;i++) { if (i==3){continue}//coba jg continue diganti break document.write(“<li>Nomor " + i + “</li>); } document.write(“</ul>”); </script> </body> </html>
Contoh JavaScript tanpa dipanggil <html> <head> </head> <body> <script type="text/javascript"> var tgl = new Date() var jam = tgl.getHours(); var menit = tgl.getMinutes(); var detik = tgl.getSeconds(); document.write(jam+":"+menit+":"+detik); </script> </body> </html>
Penjelasan Ciri JavaScript yang langsung jalan: Ada di dalam body. Biasanya selalu ada instruksi atau blok program di luar blok fungsi (tidak menggunakan fungsi tetapi langsung dituliskan). Contoh JavaScript sebelumnya akan menampilkan waktu saat ini di halaman web.
Contoh proteksi field kosong <html> <head> <script type="text/javascript"> function validate_required(field,alerttxt){ with (field){ if (value==null||value=="") {alert(alerttxt);return false} else {return true}}} function validate_form(thisform){ with (thisform){ if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false}}} </script> </head> <body> <form action="#" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
Contoh validasi email <html> <head> <script type="text/javascript"> function validate_email(field,alerttxt){ with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true}}} function validate_form(thisform){ with (thisform) {if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}} </script> </head> <body> <form action="#" onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
Mau bertanya..?
Tugas 4: Buatlah kalkulator sederhana menggunakan HTML dan Java Script seperti berikut ini: Ketentuan: Kerjakan secara individu dan kirimkan kodingnya ke evmailoa@gmail.com paling lambat 16 Februari 2015 pukul 18.00WIB File : NIM.doc Contoh: 672015001.doc Subject : TgsPWJS Contoh: TgsPWJS Tidak sesuai ketentuan tidak akan diperiksa!