java script

39
Pengembangan Web Ramos Somya

Upload: anevay

Post on 13-Jan-2016

117 views

Category:

Documents


1 download

DESCRIPTION

Pengembangan Web. Java Script. Ramos Somya. Apa itu Java Script?. Java Script itu adalah bahasa pemrograman, yang sering digunakan untuk membangun halaman web, sehingga lebih interaktif. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Java Script

Pengembangan Web

Ramos Somya

Page 2: Java Script

Java Script itu adalah bahasa pemrograman, yang sering digunakan untuk membangun halaman web, sehingga lebih interaktif.

Seringkali digunakan buat hal2 seperti nampilin tanggal, validasi form, ngatur tampilan, proteksi web, dll..

Page 3: Java Script

Java Script adalah client side scripting.. Artinya semua instruksi dalam coding akan dijalankan dalam komputer client, bukan server.

Java Script butuh interpreter (penerjemah). Maksudnya gini, komputer kita tu taunya bahasa mesin, kode binary gitu. Padahal Java Script itu mendekati bahasa manusia dan belum dicompile jadi bahasa yang dingertiin komputer kita. Nah, interpreter sebagai penerjemah Java Script ini udah tergabung dalam browser yang baru2.. Jadi nggak semua browser kenal Java Script..

Page 4: Java Script

Banyak sekali hal yang bisa dilakukan dengan Java Script.. Contohnya sudah disebutkan sebelumnya.

Menjadi tool pembuatan web Menambah interaksi Dsb Jutaan web menggunakan Java Script

di dalamnya..

Page 5: Java Script

<html><body><script type="text/javascript"> document.write("Hello World!");</script></body></html>

Java Script diawali tag <script> seperti di atas.

Di tengah2nya ada blok program yg kalo dijalankan akan mencetak tulisan “Hello World” ke halaman web.

Page 6: Java Script

Ada Java Script yang hanya akan berjalan jika dipanggil.

Ada juga yang akan berjalan begitu halaman di-load.

Kita bisa bikin java script sebanyak mungkin terserah kita mau berapa.

Page 7: Java Script

Java Script itu emang mirip2 C, en Java.. Tapi JS bukan keduanya.

Karena mirip, tentunya kita nggak akan kesulitan waktu menggunakannya.

Banyak hal yang sama, seperti fungsi, perulangan, variabel, dan kondisi.

Page 8: Java Script

Kayak bahasa permograman laen, variabel jelas ada di JS.

Tau kan, variabel?? Itu suatu obyek yang menampung nilai.

Bedanya, di JS nggak ada tipenya (kayak String, char, int, float), tipenya tergantung isi yang kita inputkan.

Page 9: Java Script

<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 (baris 2) Mengisi variabel (baris 2 juga) Dan menampilkannya (baris 3 en 4) Gampang kan? JS di atas akan menampilkan isi

variabel “name” Fungsi JS “document.write” dapat digunakan

untuk menuliskan tag-tag HTML loh, jadi kita bisa bikin macem2 lewat JS.

Page 10: Java Script

Harus diawali huruf atau underscroe “_”

Variabelnya case sensitive, huruf besar sama kecil dibedain, jadi harus sama persis klo make variabel.

Page 11: Java Script

Variabel hanya bisa digunakan dalam sekali jalan (1 fungsi), begitu keluar dari fungsi itu / proses selesai, variabel itu dah hilang…

Page 12: Java Script

Bebas, bisa macem2, kayak gini : var nama_variable; var nama_variable = isi_variable; nama_variable; (nggak pake var

nggak papa) Ngisinya juga sama kok. Nggak usah

pake var.

Page 13: Java Script

Persis kayak C en Java, jadi liat2 lagi aja. Ada :

if if-else if di dalem ifswitch Ingat, untuk nulis kondisi jangan

pake hurup besar (ex : IF), ntar error.

Page 14: Java Script

<script type="text/javascript">//Kalo waktu menunjukkan kurang dari jam 10, akan

ditulis “Good Morning”//Kalo nggak, 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 (d kan waktu)

if (time < 10) {document.write("Good morning!");}else{document.write("Good day!");}</script>

Page 15: Java Script

<script type="text/javascript">//Tulisan yang muncul bakal beda2 tergantung hari

var d=new Date(); // kayak sebelumnya, Date() itu fungsi bawaan JS.hari=d.getDay();switch (hari){case 5: document.write(“Hari Jumat") breakcase 6: document.write(“Hari Sabtu") breakcase 0: document.write(“Hari Minggu") breakdefault: document.write(“Nunggu weekend nih!")}</script>

Page 16: Java Script
Page 17: Java Script
Page 18: Java Script
Page 19: Java Script
Page 20: Java Script

JS nyediain popup boxes alert, confirm en prompt. Contohnya gini, coba aja :

alert(“teks”); //akan muncul teks sesuai yang ditulis dan kita disuruh nekan “OK”.

confirm(“teks”); // sama, tapi selain OK ada Cancel. OK returnnya true, Cancel returnnya False

Prompt(“teks”,”nilai_kembalian”); //sama, tapi klo di OK, yang kembali tu nilai kembalian yang dituliskan.. Klo di Cancel returnnya null.

Page 21: Java Script

Ya kayak di C en Java, ada function di JS. Bikinnya juga mirip :

function displaymessage() //nama fungsi{//kurung kurawal buka tanda awal blokalert("Hello World!"); //isi fungsi

}//tutup

Page 22: Java Script

Kayak yg disinggung di awal, ada JS yang hanya akan berjalan ketika dipanggil.

Maksudnya dipanggil adalah, ketika elemen HTML dikenai event. Event itu misalnya : ketika tombol ditekan, ketika text diisi, ketika link disorot, dsb. Ngerti kan?

Nah, contohnya ada di slide berikut

Page 23: Java Script

<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>

Page 24: Java Script

JS yang dipanggil itu ciri khasnya : Ditulis di dalem head Bentuknya fungsi-fungsi

Di slide sebelumnya, fungsi “displaymessage” akan dipanggil ketika tombol “Click me” ditekan.

Penggunaan event dilakukan dengan atribut “onclik” pada tag tombol “Click me”

Page 25: Java Script

Contoh fungsi dengan nilai kembalian (a and b): function prod(a,b){ x=a*b return x}

Klo mo manggil fungsi di atas, harus pake parameterproduct=prod(2,3)

Page 26: Java Script

And again.. Sama kayak C n Java.. Ada : For While Do While

Page 27: Java Script

<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>

Page 28: Java Script

<html><body><script type="text/javascript">var i=0document.write(“<ul>”);while (i<=10){document.write(“<li>Nomor " + i + “</li>); i=i+1;}document.write(“</ul>”);</script></body></html>

Page 29: Java Script

<html><body><script type="text/javascript">var i=0document.write(“<ul>”);do {document.write(“<li>Nomor " + i + “</li>);i=i+1}while (i<0)document.write(“</ul>”);</script></body></html>

Page 30: Java Script

Break : Keluar dari perulanganContinue : Dalam perulangan,

lompat ke nilai perulangan selanjutnya.

Page 31: Java Script

<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 breakdocument.write(“<li>Nomor " + i + “</li>);}document.write(“</ul>”);</script></body></html>

Page 32: Java Script

Event yang bisa dikenakan ke elemen HTML tu ada banyak.

Misal : onload, onclick, onchange, onsubmit, dll.

Semua bisa digunakan untuk memicu pemanggilan fungsi JS.

Page 33: Java Script

Nah, sekarang kita akan lihat JS yang langsung jalan begitu halaman ngeload (mbuka), tanpa dipanggil.

(Next slide..)

Page 34: Java Script

<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>

Page 35: Java Script

Ciri JS ygn langsung jalan : Ada di dalem body Biasanya selalu ada instruksi / blok

program di luar blok fungsi (nggak pake fungsi, langsung ketik)

JS sebelumnya akan menampilkan jam sekarang di halaman web.

Page 36: Java Script

<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>

Page 37: Java Script

<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>

Page 38: Java Script

Buatlah kalkulator sederhana menggunakan HTML dan Java Script seperti berikut ini:

Page 39: Java Script