Pengembangan Web Java Script Ramos Somya.

Slides:



Advertisements
Presentasi serupa
Pertemuan 8. 2  JavaScript dikembangkan pertama kali pada tahun 1995 di Netscape Communications dgn nama LiveScript.  Hasil kolaborasi antara Netscape.
Advertisements

APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom.
Arif Dwi Laksito, S.Kom P EMPROGRAMAN W EB J AVA S CRIPT.
M.K. Pemrograman Web (AK )
APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom.
MATA KULIAH :DESAIN WEB
JavaScript Pemrograman Web 1 Genap Tim Dosen Pemrograman Web Teknik Informatika UNPAS Pengenalan JavaScript Apa itu JavaScript?
JavaScript Pemrograman Web 1 Genap Tim Dosen Pemrograman Web Teknik Informatika UNPAS Popup Box JavaScript memiliki tiga macam.
Desain web – pertemuan 13 Javascript (Part 2).
M.K. Pemrograman Web (AK )
Pengembangan Evangs Mailoa PHP WEB. Awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website.
PENGENALAN JAVA SCRIPT PEMROGRAMAN INTERNET1-6/LINDA SUVI RAHMAWATI STMIK PPKIA Pradnya STMIK PPKIA PRADNYA PARAMITA /LINDA SUVI RAHMAWATI.
Pengembangan WEB Java Script Evangs Mailoa.
Mengenal JavaScript A’ud Solehuddin::Januari2012.
Operator Logika dan Pernyataan If
Modul-6 : Java Script (1) Dasar javascript,variabel , manipulasi string, fungsi matematis, table dan menu option Modul -6 : Java Script (1)
Introduction to JavaScript A’ud Solehuddin::Januari 2012.
JAVASCRIPT.
Javascript Javascript Javascript Javascript Javascript Javascript
Pemrograman Web Dasar-dasar PHP:  Pengantar PHP sebuah file PHP, PHP workings, PHP feathers, menjalankan PHP.  Sintaks Dasar PHP variable, operator,
Pemprograman Terstruktur 1
Dasar-Dasar PHP.
Java Script Pengertian Javascript Aplikasi Javascript - Input Box
Praktikum Java Script.
PHP? PHP adalah server-side web programming
PHP.
JavaScript Pemrograman Web 1.
Pertemuan 9 JavaScript (FUNGSI).
JavaScript Pemrograman Web 1.
Pemrogaman Web PHP.
Pemrograman Basis Data Berbasis Web
MODUL 3 PERULANGAN PERCABANGAN ARRAY
PHP: Hypertext Preprocessor
FONDASI PEMROGRAMAN & STRUKTUR DATA #2
Pemrograman Web JavaScript
Pemrograman Berorientasi Objek IST AKPRIND Yogyakarta
Internet Programming PHP
Lutfi Budi Ilmawan Univ. Muslim Indonesia
DASAR PEMROGRAMAN BERORIENTASI OBJEK
PHP.
Pemrograman internet ABU SALAM, M.KOM.
Java script.
STRUKTUR KONTROL & FUNGSI
Dijalankan dengan interpreter
Tipe Data, Variabel, dan Operator
Minggu 5 Imam Fahrur Rozi
Pemrograman Berbasis WEB
Pengembangan Web PHP Ramos Somya.
Pemrograman Web HTML (7) PHP Andy Haryoko, ST
KOMPUTER APLIKASI TIK II
Pemrograman Web/TI/ AK /2 sks
DASAR PEMROGRAMAN KOMPUTER
Pengembangan Aplikasi Framework (IT657)
Pengembangan Web PHP.
Pemrograman Web/TI/ AK /2 sks
PEMROGRAMAN WEB Client Side XHTML, JAVASCRIPT.
Pemrograman Basis Data Berbasis Web
PHP.
Javascript (1).
Pemrograman Berorientasi Platform (IN315B)
Praktikum Pengambangan Web
PHP.
Pemrograman Berorientasi Objek IST AKPRIND Yogyakarta
PRAKTIKUM PEMROGRAMAN WEB Pertemuan 3
Pemrograman Web/TI/ AK /2 sks
Pengembangan Web PHP.
Tipe Data, Variabel, dan Operator
Pemrograman Basis Data Berbasis Web
PHP.
Teknik Komputer & Jaringan SMK Al-Muhtadin Sahadi, ST
Transcript presentasi:

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. Seringkali digunakan buat hal2 seperti nampilin tanggal, validasi form, ngatur tampilan, proteksi web, dll..

Masih tentang 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 geto..

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

Ayo bikin 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.

Dua Tipe 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.

Java Script bukan Java 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.

Variabel dalam JS 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.

Contoh variabel <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.

Aturan bikin variabel Harus diawali huruf atau underscroe “_” Variabelnya case sensitive, huruf besar sama kecil dibedain, jadi harus sama persis klo make variabel.

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

Deklarasi en Ngisi variable 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.

Kondisi Persis kayak C en Java, jadi liat2 lagi aja. Ada : if if-else if di dalem if switch Ingat, untuk nulis kondisi jangan pake hurup besar (ex : IF), ntar error.

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

Tjontoh Switch <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") break case 6: document.write(“Hari Sabtu") case 0: document.write(“Hari Minggu") default: document.write(“Nunggu weekend nih!") } </script>

Operator Aritmatik

Operator buat ngisi nilai

Operator Perbandingan

Operator logika

Pop up Boxes 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.

Fungsi di JS (Function) Ya kayak di C en Java, ada function di JS. Bikinnya juga mirip : function displaymessage() //nama fungsi {//kurung kurawal buka tanda awal blok alert("Hello World!"); //isi fungsi }//tutup

Java Script yang dipanggil 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

Contoh Function (JS yg 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>

Penjelasan dr slide sebelumnya 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”

Parameter n return statement 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 parameter product=prod(2,3)

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

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

Event JS Event yang bisa dikenakan ke elemen HTML tu ada banyak. Misal : onload, onclick, onchange, onsubmit, dll. Semua bisa digunakan untuk memicu pemanggilan fungsi JS.

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

Contoh JS 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 slide sebelumnya 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.

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>

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

See You Next Week