Javascript

3,613 views
3,427 views

Published on

Review Javascript

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,613
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
201
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. Fahrizal Nuansa – 113040246 Yosua Bachtiar – 113040250Getha Azam Ceterio - 113040158
  2. 2. Javascript adalah bahasa Scripting, bukan bahasa pemrograman.Javascript biasanya embedded secara langsung pada HTML pages.Javascript adalah interpreted language (artinya bahwa scriptsdijalankan tanpa di kompile terlebih dahulu).Apakah Java dan Javascript sama?, Tidak, Java dan JavaScriptadalah dua bahasa yang berbeda baik dari sisi konsep maupundari sisi desain.JavaScript bersifat Case Sensitive, artinya huruf besar dan kecildibedakan.
  3. 3. Nama resmi JavaScript : ECMAScript.ECMAScript dikembangkan oleh ECMA Organization.Diciptakan oleh Brendan Eich. Muncul pertama kali disemua browser Netscape dan Microsoft pada tahun1996.Disetujui sebagai standar internasional pada tahun 1998.
  4. 4. JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untukmenjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggilatau saat seorang user meng-klik pada HTML element.JavaScript dapat membaca dan menulis HTML elements - JavaScript dapatmembaca dan mengubah isi dari HTML elementJavaScript dapat digunakan untuk mem-validasi data - JavaScript dapatdigunakan untuk mem-validasi form data sebelum di-submitted ke server.JavaScript dapat digunakan untuk mendeteksi browser pengunjung -JavaScript dapat digunakan untuk mendeteksi browser pengunjung.JavaScript dapat digunakan untuk membuat cookies - JavaScript dapatdigunakan untuk menyimpan dan memanggil informasi di komputerpengunjung
  5. 5. Script tidak terenkripsi - Karena javascript bersifat client side,maka script yang kita buat di text editor dan telah dijadikan webdi server, ketika user merequest web dari server tersebut makasintak javascript akan langsung ditampilkan di browser. User bisamelihat dan menirunya dari sourcenya.Kemampuan terbatas - Walaupun javascript mampu membuatbentuk web menjadi interaktif dan dinamis, namun javascripttidak mampu membuat program aplikasi sendiri seperti java.
  6. 6. Program JavaScript dituliskan pada file HTML (.html atau .htm)menggunakan tag <SCRIPT> Contoh : <script type=“text/javascript”> //kode Javascript </script>
  7. 7. Ditempatkan pada tag <head>Ditempatkan pada tag <body>Sebagai file external.
  8. 8. Dengan menempatkan sintax JavaScript pada tag head, tidak akanmengganggu isi dari halaman web karena semua script disatukanpada satu tempat. Contoh : <html> <head> <script type="teks/javascript"> //kode Javascript </script> </head> </html>
  9. 9. Script ini dieksekusi ketika halaman di-load sampai di bagian<body>. Ketika menempatkan script pada bagian <body> berartiantara isi dan JavaScript dijadikan satu bagian. Contoh : <html> <head> </head> <body> <script type="teks/javascript"> //kode Javascript </script> </body> </html>
  10. 10. Terkadang ada yang menginginkan menjalankan JavaScriptyang sama dalam beberapa kali pada halaman yang berbeda,tetapi tidak mau disibukkan jika harus menulis ulang script yangdiinginkan di setiap halaman. Maka JavaScript dapat ditulis difile secara eksternal. Jadi, antara dokumen HTML danJavaScript dipisahkan, kemudian berkas tersebut dipanggil daridokument HTML. Berkas JavaScript tersebut disimpan denganekstensi .js.
  11. 11. . Contoh namaFile.js : document.write("pesan ini tampil ketika halaman diload");Untuk menggunakan eksternal JavaScript (.js) dipakaiatribut "src" pada tag <script> pada halaman HTML-nya. Contoh cobaExternal.html : Hasil : <html> <head></head> <body> <script src="namaFile.js"></script> <p>Script di atas berada di berkas “namaFile.js" (eksternal) >/p> </body> </html>
  12. 12. Mendeklarasikan variabel pada javascript dengan menggunakan katakunci var. Var userName; userName = “RedWhite”;Aturan penamaan variabel : - Nama variabel bersifat Case Sensitive var Kota; //berbeda dengan.. var kota; - Harus dimulai dengan huruf atau karakter underscore. Penulisan Var yang salah Penulisan Var yang benar var @Kota; var Kota; var 1993kota; var _kota; - Nama variabel tidak boleh mengandung spasi. Penulisan Var yang salah Penulisan Var yang benar var Nama_Mahasiswa; var Nama Mahasiswa; //atau var NamaMahasiswa;
  13. 13. Contoh : Hasil : <body> <script language="Javascript"> var x = 100; document.writeln(variabel x bernilai = + x + <br>); var user = fahrizal nuansa; document.writeln(Selamat datang +user+<br>); </script> </body>
  14. 14. Macam-macam Operator Aritmatika pada JavaScript :
  15. 15. Contoh : Hasil : <body> <script language="Javascript"> var x = 100; var y = 200; var hasil = x + y; document.writeln(Hasil penjumlahan dari + x + + + y + = +hasil); </script> </body>
  16. 16. Digunakan untuk memberikan nilai operan yang terletak di sebelahkanan ke operan di sebelah kiri dan disimbolkan dengan tanda =‘.Macam-macam operator Assigment pada JavaScript :
  17. 17. Contoh :Hasil :
  18. 18. Digunakan untuk membandingkan dua buah operan. Operan yangdikenal operator ini dapat bertipe string, numeric, maupun ekspresi lain.Hasil perbandinga berupa keadan true dan falseMacam - macam operator pembanding :
  19. 19. Contoh :Hasil :
  20. 20. Digunakan untuk menghubungkan ungkapan pembanding (relasi).Operator logika membandingkan operan-operannya danmengembalikan nilai logik yang nilainya bergantung pada hasilperbandingan tersebut.Macam - macam operator logika :
  21. 21. Contoh :Hasil :
  22. 22. Pada Javascript terdapat beberapa macam pengkondisian : if (kondisi) Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai true. if (kondisi1) else (kondisi2) Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai true, dan kondisi lain bernilai false. if (kondisi1) else if (kondisi2) else (kondisi3) Gunakan statement ini untuk memilih satu dari banyak kondisi. switch Gunakan statement ini untuk memilih satu dari banyak kondisi.
  23. 23. Sintaks : Hasil if (kondisi) { aksi }Contoh :
  24. 24. Sintaks : Contoh : if (kondisi) { aksi } else { aksi }Hasil :
  25. 25. Sintaks : if (kondisi1) { dieksekusi jika kondisi1 bernilai true } else if (kondisi2) { dieksekusi jika kondisi1 false dan kondisi2 true } else { dieksekusi jika kondisi1 dan kondisi2 false }
  26. 26. Contoh :Hasil :
  27. 27. Sintaks : - a adalah variabel. - break berfungsi untuk mencegah case berikutnya tereksekusi .. otomatis. switch (a) { case 1 : { aksi 1 } break; case 2 : { aksi 2 } break; case 3 : { aksi 2 } break; case 4 : { aksi 2 } break; ………………………………………………………………… default : { aksi default } }
  28. 28. Contoh :Hasil :
  29. 29. Prinsip kerja operator ternary adalah menyederhanakan bentuk "if..else"dimana setiap blok dari "if..else" hanya mempunyai 1 perintah, dan melakukanevaluasi ekspresi tersebut.Bentuk operator Ternary -> "?"Sintaks : namaVariabel = (kondisi)? Nilai1 : Nilai2;Contoh :Hasil :
  30. 30. Pada Javascript terdapat beberapa macam pengulangan : for pengulangan sebanyak jumlah yang ditentukan. while pengulangan sampai bertemu kondisi “true”.
  31. 31. Sintaks : for (var=startValue; var<=endValue; var=var+increment) { source code }Contoh : Hasil
  32. 32. Sintaks For...In melakukan pengulangan sebanyak elemen array atausebanyak properti dari suatu objek.Contoh : Hasil
  33. 33. Perintah break akan menghentikan pengulangan dan akanmengeksekusi sintaks berikutnya setelah pengulangan.Contoh : Hasil
  34. 34. Perintah continue akan melewati value pengulangan yang ditentukan,kemudian melanjutkan ke value berikutnya.Contoh : Hasil
  35. 35. Sintaks : var=startValue; while (var<=endValue) { source code }Contoh : Hasil
  36. 36. Pada Javascript terdapat beberapa macam PopUp Box : Alert Box Biasanya digunakan untuk memberikan informasi ke pengguna. Confirm Box Biasanya digunakan apabila aplikasi membutuhkan verifikasi atau persetujuan dari pengguna. Prompt Box Biasanya digunakan apabila aplikasi ingin pengguna memasukkan dahulu suatu nilai sebelum memasuki suatu halaman.
  37. 37. Contoh : Hasil
  38. 38. Penjelasan : var r = confirm(); Jika tombol “OK” yang ditekan, maka confirm akan mengisikan nilai “true” ke variabel konfirmasi, sebaliknya “false” jika tombol “Cancel” yang ditekan.Contoh : Hasil
  39. 39. Sintaks : prompt(“msg”,”nilaiDefault”);Contoh : Hasil
  40. 40. Sebuah fungsi berisi source code yang akan dieksekusiketika dipanggil.Sebuah fungsi akan dieksekusi jika dipanggil namafungsinya atau dieksekusi oleh suatu event.Sisipkan source code ke dalam fungsi untuk mencegahsuatu source code langsung tereksekusi saat halamanterbuka.Fungsi dapat dipanggil dari mana saja di suatu halamanbahkan dari file JavaScript yang berbeda (externaljavascript), jika pada halaman tersebut file-file javascriptsudah disisipkan.Fungsi bisa mengembalikan nilai ke pemanggilnya.
  41. 41. Sintaks : function namaFungsi(parameter1, parameter2, ... parameterN) { ...... }Contoh : Hasil
  42. 42. Contoh : Hasil
  43. 43. Event adalah aksi yang dilakukan user terhadapelemen HTML yang dapat dideteksi olehJavaScript.Setiap elemen di halaman web memiliki eventtertentu yang dapat memicu JavaScript.Event didefinisikan dalam atribut tag HTML.Event digunakan dalam kombinasi dengan fungsi,dan fungsi tersebut tidak akan tereksekusi sebelumevent tersebut terjadi.
  44. 44. onLoad : - Event yang terjadi saat memasuki suatu halaman.Contoh : Hasil : <body onLoad=“alert(‘Coba onLoad’)”> </body>onUnload - Event yang terjadi saat keluar dari suatu halaman.Contoh : Hasil : <body onUnload="alert(Coba onUnLoad)"> </body>
  45. 45. Contoh : Hasil
  46. 46. JavaScript dapat digunakan untuk memvalidasi data dari form sebelumdikirimkan ke server.Contoh valid.js :
  47. 47. Contoh FormValidation.html:Hasil :
  48. 48. Pada bahasa pemrograman Javascript, terdapat object yang dapat digunakanuntuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk‘menghidupkan’ sebuah instance date sintaks yang digunakan adalah sebagaiberikut: var waktu = new Date();Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagaiberikut :
  49. 49. Contoh jam.js :
  50. 50. Contoh jam.html : Hasil :Penjelasan Script : setTimout(“namaFungsi()”, delay); Fungsi setTimeout akan memanggil namaFungsi() bila waktu delay sudah terpenuhi. Satuan waktu delay : milisecond. 1000ms = 1s document.getElementById(jam).innerHTML="Hari "+x+", Pukul "+h+":"+m+":"+s; Berfungsi untuk mengakses element dengan Id = jam, dan menuliskan hari, jam, menit, detik kedalam element yang ber Id = jam.
  51. 51. Selesai

×