1 / 32

Pertemuan 11 Pengenalan JavaScript

APLIKASI BERBASIS WEB. Pertemuan 11 Pengenalan JavaScript. STTI I-Tech Susana Dwi Yulianti , SKom. Sejarah dan Pengembangan Javascript. JavaScript adalah bahasa script yang dikembangkan Netscape Communications bekerja sama dengan Sun Microsystems.  

trang
Télécharger la présentation

Pertemuan 11 Pengenalan JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. APLIKASI BERBASIS WEB Pertemuan11Pengenalan JavaScript STTI I-Tech Susana DwiYulianti, SKom

  2. SejarahdanPengembanganJavascript JavaScript adalah bahasa script yang dikembangkan Netscape Communications bekerja sama dengan Sun Microsystems.   membuat halaman yang interaktif, HTML saja tidak cukup. Asal mula JavaScript adalah LiveScript, Dikembangkan pertama kali pada tahun 1995. Bahasa ini dikenali pada browser Netscape Navigator mulai versi 2.0 ke atas. Microsoft juga melengkapi Internet Explorer dengan JavaScript mulai versi 3.0 ke atas.   Pada akhir tahun 1996, Netscape menyerahkan proses standarisasi spesifikasi bahasa JavaScript ke badan independent, yaitu ECMA (European Computer Manufacturers Association).

  3. Javascript dengan HTML • Untukmempelajaripemrograman JavaScript, hanyaduapiranti yang diperlukan, yaitu :   • Editor Teks • Web Browser • Program JavaScript dituliskanpada file HTML (.html atau .htm) denganmenggunakan tag kontainer <SCRIPT>. • Tag kontainer <SCRIPT> mempunyaiatribut Language. Isikanatribut Language dengan JavaScript.

  4. Contoh <HTML> <HEAD> <TITLE> LatihanJavaScript </TITLE> </HEAD> <BODY> <!-- Belajarmembuat program JavaScript --> <SCRIPT LANGUAGE = "JavaScript"> document.write ("Selamat Siang <br>"); document.write ("UniversitasMercuBuana”); </SCRIPT> </BODY> </HTML>

  5. Pesan-Pesan Kesalahan • Kode JavaScript yang salah secara sintaks akan membuat browser menampilkan kotak dialog yang menyatakan pesan kesalahan. • Umumnya kesalahan yang sering terjadi pada kode JavaScript diakibatkan oleh hal-hal sebagai berikut : • Kesalahan karena penulisan huruf capital dan huruf kecil • Penggunaan tanda kutip yang tidak cocok • Kesalahan dalam tag <SCRIPT>

  6. Properti nama_objek.nama_properti Objek.properti = nilai Propertiadalahatributdarisebuahobjek. Untukmengaksessebuahproperti, perlupenulisandenganbentuksebagaiberikut : Tandatitikdigunakansebagaipemisahantaranamaobjekdannamaproperti.   Propertidapatdiberinilaimelaluibentukpenugasanberikut :  

  7. Contoh <HTML> <HEAD> <TITLE> propertidefaultStatus </TITLE> </HEAD> <BODY> TesdefaultStatus <SCRIPT LANGUAGE = "JavaScript"> <!-- window.defaultStatus = “coba” //--> </SCRIPT> </BODY> </HTML>

  8. Metode Nama_objek.nama_metode(parameter) • Metodeadalahsuatukumpulankode yang digunakanuntukmelakukansesuatutindakanterhadapobjek. • Sbgcontoh, write() padaobjek document adalahmetode yang digunakanuntukmenuliskantulisankejendela browser.   • dipanggildenganmenyebutkannamaobjek, tandatitik, dannamametodediikutidengandaftar parameter yang diletakkandidalamtandakurung.  

  9. Cara Penulisan Javascript <body> <script language=”javascript”> //Baris kode javascript ketik disini //Setiap perintah diakhiri dengan ; </script> </body> <head> <script language=”javascript”> function namafunction(parameterinput) { // Baris Kode fungsi di sini dan diakhiri oleh ‘;’ } </script> </head> • Script javascript dapat diletakkan pada : • Body dalam document HMTL • Header dalam bentuk function

  10. Cara PenulisanJavascript (cont.) <script language=”javascript” src=”path/namafile.js”></script> • Terpisahdalam document HTML / external javascript. perintahuntukmemanggil file tersebutadalahsebagaiberikut :

  11. PenangananKejadian(event handler) nama_kejadian=”kumpulankode” adalahsekumpulankode yang akandijalankanmanakalapemakaimelakukansuatutindakan (biasadisebutdengankejadian). Bentukpenanganankejadianadalahsepertiberikutini : ContohkejadianadalahonMouseOverdanonMouseOut.

  12. Contoh <html> <head> <SCRIPT language="Javascript"> function test () { varval1=document.kirim.T1.value if (val1%2==0) document.kirim.T2.value="bilangangenap" else document.kirim.T2.value="bilanganganjil" } </SCRIPT> </head> <body> <form method="POST" name="kirim"> <p>BIL <input type="text" name="T1" size="20"> MERUPAKAN BIL <input type="text" name="T2" size="20"> </p> <p><input type="button" value="TEBAK" name="B1" onclick=test()></p> </form> </body> </html>

  13. JendelaPemasukan Data JavaScript memilikimekanisme yang memungkinkanpemakaidisuguhijendelauntukmemasukkansederetanmasukandansetelahpemakaimengkilktombol OK makakodedalam JavaScript akanmelakukanserangkaianproses.   Contohtampilanjendela input :

  14. Script membuat pemasukan data <HTML> <HEAD> <TITLE>JendelaMemasukkan Data</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> varnama = prompt("NamaAnda : "); document.write("Hai, " + nama); </SCRIPT> </BODY> </HTML>

  15. Jendela Peringatan window.alert("JendelaPeringatan"); JikaAndainginmemberikansebuahpesankepada user, Andabisamenyajikannyadalambentukkotak dialog yang biasadisebutAlert Box. pernyataan yang diberikanadalah :  

  16. Tampilan Jendela Peringatan

  17. Script membuat jendela peringatan <HTML> <HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> window.alert("JendelaPeringatan"); </SCRIPT> </BODY> </HTML>

  18. Jendela Konfirmasi Javascriptmenyediakanjendelakonfirmasi. Hal inidapatdilakukandenganmenggunakanmetodeconfirm().

  19. Script membuat jendela konfirmasi <HTML> <HEAD> <TITLE>JendelaKonfirmasi</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> varjawab = window.confirm("Andasudahbelajar?"); document.write("JawabanAnda: " + jawab); </SCRIPT> </BODY> </HTML>

  20. Variable & Nilai Dalamsebuahbahasapemrograman, variabelsangatlahberperanpenting . Biasanyavariabeldigunakanuntukmenyimpan data. Variabeladalahsuatunama yang digunakanuntukmenyimpannilaidannilai yang adadidalamnyadapatdiubahsewaktu-waktu. Pada JavaScript, pendeklarasianvariabelbersifatopsional

  21. Deklarasi Variable varnama = “Budi”; varnilai = 8; varx,y,z = “7”; varalamat; Pendeklarasianvariabelpada JavaScript ditulisdenganmenggunakanpernyataan var. Contoh :

  22. Penamaan Variable • Penamaanvariabeldiawalidenganhurufatautandakaraktergarisbawah ( _ ). • Namavariabeltidakbolehmengandungkarakterspasi. Bila variable terdiridaribeberapakata, makavariabeldapatdipisahkandengankaraktergarisbawah. • Karakterkeduadanseterusnyadapatberupahuruf, angka, ataukaraktergarisbawah. • Penamaanvariabeltidakbolehmenggunakankatakunci JavaScript. • Beberapavariabel yang bernamasamatidakdapatdimilikidalamsebuahblok. Tetapidapatdigunakanasalkanvariabel-variabeltersebutterletakdalamblok yang berbeda. • Sebaiknyapenamaanvariabeldibuatsesuaidenganapa yang disimpannya. • Hurufkapitaldanhurufkecildibedakan (CASE-SENSITIF)

  23. Tipe data

  24. <HTML> <HEAD> <TITLE>BILANGAN DAN STRING </TITLE> </HEAD> <BODY> <H2> OPERASI BILANGAN DAN STRING </H2> <SCRIPT LANGUAGE = "JavaScript"> document.writeln("<PRE>"); var A = "40"; var B = "30"; var C = 80; var D = 60; var E = A + B; document.writeln ('"40" + "30" = ' + E); E = B + C; document.writeln ('"30" + 80 = ' + E); E = C + D; document.writeln ('80 + 60 = ' + E); E = D + A; document.writeln ('60 + "40"= ' + E); document.writeln("</PRE>"); </SCRIPT> </BODY> </HTML>

  25. Ekspresi 3–1*6 Ekspresi Ekspresimerupakansuatubentuk yang menghasilkansuatunilai. Dalambentuk yang sederhana, biasanyaekspresimerupakansebuahvariabel. Dan dalambentuk yang kompleksbiasanyasebuahekspresidisajikandenganmelibatkan operator & operand.   Contoh : Angka 3, 1, dan 6 adalahmerupakan operand, sedangkansimbol – dan* berperansebagai operator.

  26. Operator Padadasarnya, operator pada JavaScript dapatdibagimenjadienam, yaitu : Operator Aritmatik Operator Pemberiannilai Operator pemanipulasi bit (bitwise) Operator pembanding Operator Logika Operator String

  27. Operator aritmatik Operator aritmatikdigunakanpadaoperand bertipenumerik. Semua operator berlakuuntukbilanganbulatmaupunbilanganpecahan (floating-point).

  28. Operator PemberianNilai Operator pemberiannilaidigunakanbilainginmemberinilaikesuatuoperand ataumengubahnilaisuatuoperand.

  29. Operator Pembanding Operator pembandingdigunakanuntukmembandingkanduabuahoperand. Operand yang dikenai operator inidapatbertipe string, numerik, maupunekspresi lain. Hasildarioperasipembandinganadalah data bertipeboolean yang menunjukkanhasiloperasibenaratausalah.

  30. Operator Logika Operator logika digunakan untuk menentukan logika antara variabel atau nilai. Contoh: diberikannilai x=6 dan y=3

  31. Latihan JavaScript

More Related