Java Script. Logika Java Script

Transkripsi

1 Java Script Logika Java Script

2 Java Script Asal mula Java Script bernama LiveScript pada tahun 1995 di Netscape Communications Akhir tahun 1995 Netscape Communications dan Sun Microsystems berkolaborasi, nama LiveScript di ubah menjadi JavaScript JavaScript Adalah : Pemrogramman yang berbasis prototype yang berjalan di sisi client.

3 Komponen Java Script <head> <title> xxxxxxxxxx </title> </head> <script language = JavaScript > <! document.write ( XXXXXXXXXXXX ); //--> </Script>

4 Komponen Java Script <script> dan </script> Merupakan TAG awal untuk pembuatan java script, tag ini diikuti oleh LANGUAGE = JavaScript ini dibuat untuk browser mengenali bahwa memulai penggunaan JavaScript  Merupakan tanda komentar yang tidak akan ditampilkan pada browser document.write ( XXXXXXXXXXXXXXX"); Mencetak atau menampilkan apa yang ingin kita tampilkan, pernyataan yang ditampilkan berupa string. Saat menampilkan karakter di akhiri dengan tanda titik koma (;)

5 Karakter Java Script Karakter \a Bel (suara speaker) Keterangan \b Backspace (Menggeser kursor ke kiri) \f Form feed (Halaman baru untuk printer) \n Karakter Baris baru (memindahkan kursor kebaris berikutnya) \r Carriage Return (memindah kursor ke awal baris) \t Tab (Memindah kursor ke tab berikutnya)

6 Kesalahan Java Script Kesalahan Penggunaan huruf kapital JavaScirpt bersifat Case Sensitive Tanda Kutip yang tidak cocok Penggunaan tanda kutip yang tidak sesuai seperti dapat dicontohkan yaitu tes Kutip harus sesuai misal : halo atau halo Kesalahan dalam TAG SCRIPT Dalam Script kekurangan kutip ganda dalam tulisan JavaScript

7 Javascript Bahasa Berorientasi Object Object Tersusun atas : Properti, Metode dan penanganan kejadian Properti Atribut dari sebuah object Contoh Penggunaan Property : nama_object.nama_property Nama Objek Nama Properti window.defaultstatus Pemisah antara objek dan property

8 Contoh Property <head> <title> Belajar JavaScript </title> </head> <h1>tes Property</h1> <script language = JavaScript >  window.defaultstatus = Selamat Menggunakan JavaScript ; </Script>

9 Javascript Bahasa Berorientasi Object Metode adalah : suatu kumpulan kode yang digunakan untuk melakukan suatu tindakan terhadap object Nama Objek Nama Metode document.write( Haloo ) Pemisah antara objek dan Metode Parameter

10 Contoh Metode <head> <title> Belajar JavaScript </title> </head> <script language = JavaScript >  </Script>

11 Javascript Bahasa Berorientasi Object Penanganan Kejadian (Event Handler) adalah : suatu kumpulan kode yang akan dijalankan manakala pemakai melakukan suatu tindakan (kejadian) Contoh kejadian : onmouseover dan onmouseout

12 Contoh EventHandler <head> <title> Belajar JavaScript </title> </head> Arahkan Mouse pada LINK <a href = onmouseover = window.status = Anda Menyorot Link ; return true onmouseout = window.status = ; return true >MENUJU WEB </a>

13 Contoh Input data JavaScript <head> <title> Belajar Input data JavaScript </title> </head> <script language = JavaScript >  </Script>

14 Contoh Jendela Peringatan JavaScript <head> <script type="text/javascript"> function pesan() { alert( Ini Pesan Dari Even Alert JavaScript!!!"); } </script> </head> <body onload= pesan()">

15 Contoh Jendela Peringatan JavaScript <head> <title>alert Box</title> </head> <script languange = JavaScript >  window.alert( Ini Pesan dari Event Alert JavaScript ); </script>

16 Contoh Jendela Konfirmasi JavaScript <head> <title>konfirmasi</title> </head> <script languange = JavaScript > <! //--> var jawaban = window.confirm( Anda ingin Meneruskan? ); document.write( Jawaban Anda : + jawaban); </script>

17 Variabel dan Nilai Variabel Adalah : suatu nama yang dapat digunakan untuk menyimpan nilai dan nilai yang ada di dalamnya bisa diubah sewaktu-waktu. Contoh Pendeklarasian Variabel : var nama = andi ; Diisikan dengan String var nilai = 100; Diisikan dengan Bilangan var x,y,z = 7 ; Diisikan dengan String var alamat; Diisikan dengan Null Tipe Data : 1. Bilangan Misal : -27,3 dan String Misal Selamat Belajar JavaScript 3. Nilai Logika atau Boolean Nilai berupa True atau False

18 Variabel dan Nilai Tipe Bilangan Bilangan Bulat Bilangan Real Bilangan Desimal -Digit 0 9 -Tidak boleh di awali dengan 0 kecuali bilangan 0 itu sendiri Bilangan Oktal : -Menggunakan Digit 0 7 -Contoh : 012 Bilangan Hexadesimal -Menggunakan angka 0 9 dan huruf A F - Contoh : 0XFF

19 Penggunaan typeof <head> <title>penggunaan typeof</tile> </head> <script language = Javascript > document.write( 1. + typeof(true) + <br> ); document.write( 2. + typeof(false) + <br> ); document.write( 3. + typeof( 523 ) + <br> ); document.write( 4. + typeof(523) + <br> ); document.write( 5. + typeof(null) + <br> ); document.write( 6. + typeof(window) + <br> ); document.write( 7. + typeof(document.write) + <br> ); </script>

20 Operator JavaScript Operator Matematika Operator Perbandingan (Relasional) Operator Logika Operator berbasis bit Operator Penugasan Operator lain OPERATOR MATEMATIKA Operator Kegunaan Prioritas + Penjumlahan 3 - Pengurangan 3 * Perkalian 2 / Pembagian 2 % Sisa bagi 2 ++ Penaikkan 1 (jika terletak di depan variabel) -- Penurunan 1 (Jika terletak di depan variabel)

21 Operator JavaScript OPERATOR PENUGASAN : Misal X = 10 dan Y = 5 : Operator Contoh Sama dengan Hasil = X = y X = 5 += X += y X = x + y X = 15 -= X -= y X = x y X = 5 *= X *= y X = x * y X = 50 /= X /= y X = x / y X = 2 %= X %= y X = x % y X = 0

22 Operator Matematika JavaScript <head> <title>operasi Matematika</title> </head> <script language = JavaScript > document.write ( = + (20 + 3)); document.write ( <br> ); document.write ( 20-3 = + (20-3)); document.write ( <br> ); document.write ( 20 * 3 = + (20 * 3)); document.write ( <br> ); document.write ( 20 / 3 = + (20 / 3)); document.write ( <br> ); document.write ( 20 % 3 = + (20 % 3)); document.write ( <br> ); </script>

23 Operator Pembanding dan Logika Operator Keterangan Kategori == Sama dengan Pembanding!= Tidak Sama Dengan Pembanding < Kurang Dari Pembanding <= Kurang dari atau sama dengan Pembanding > Lebih dari Pembanding >= Lebih dari atau sama dengan Pembanding! Not Logika && And Logika Or Logika

24 Operator Pembanding dan Logika <head> <title>pembanding</title> </head> <script language = JavaScript > var nilai = prompt ( Nilai (0 100) :, 0); var hasil = (nilai >= 60)? Lulus : Tidak Lulus ; document.write ( Hasil Anda : + hasil); </script>

25 Operator Pembanding dan Logika If (kondisi) { //Blok pernyataan yang dijalankan //jika kondisi bernilai benar } Atau menggunakan else If (kondisi) { //Blok pernyataan yang dijalankan //jika kondisi bernilai benar } else { //Blok pernyataan yang dijalankan //jika kondisi bernilai benar }

26 Operator Pembanding dan Logika <script type="text/javascript"> var d = new Date(); var time = d.gethours(); if (time < 10) { document.write("<b>selamat Pagi</b>"); } else { document.write("<b>selamat Siang</b>"); } </script>

27 Logika If Bersarang <head> <title>if Bersarang</title> </head> <script language = Javascript > var tanggal = new Date(); var kode_hari = tanggal.getday(); var nama_hari = ; if (kode_hari == 0) nama_hari = Minggu ; else if (kode_hari == 1) nama_hari = Senin ; else if (kode_hari == 2) nama_hari = Selasa ; else if (kode_hari == 3) nama_hari = Rabu ; else else Else if (kode_hari == 4) nama_hari = Kamis ; if (kode_hari == 5) nama_hari = Jumat ; nama_hari = Sabtu ; document.write( Hari ini hari + nama_hari); document.write(, tanggal + tanggal.getdate() + / + (tanggal.getmonth() + 1) + / + tanggal.getyear()); </script>

28 Switch (variabel1) { case nilai_1 : perintah_1; break; case nilai_2 : perintah_2; break;... case nilai_m : perintah_m; break; default: perintah_n; break; } Logika Switch

29 <head> <title>contoh Switch</title> </head> <script language = Javascript > var tanggal = new Date(); var kode_hari = tanggal.getday(); var nama_hari = ; Switch(kode_hari) { case 0: case 1: case 2: case 3: nama_hari = Minggu ; break; nama_hari = Senin ; break; nama_hari = Selasa ; break; Logika Switch } case 4: case 5: case 6: nama_hari = Rabu ; break; nama_hari = Kamis ; break; nama_hari = Jumat ; break; nama_hari = Sabtu ; document.write( Hari ini hari + nama_hari); Document.write(, tanggal + tanggal.getdate() + / + (tanggal.getmonth() + 1 ) + / + tanggal.getyear()); </script>

30 Perulangan Proses perulangan : while do... while for Contoh : <head><title>perulangan</title></head> <script language = JavaScript > var bilangan = 0; while (bilangan < 5) { document.write ( Bilangan + bilangan + <br> ); bilangan++; } </script>

31 Fungsi function nama (daftar_parameter) { pernyataan_1;... pernyataan_n; } Contoh : <head><title>contoh Fungsi</title></head> <script language = JavaScript > function jumlah(x,y) { var hasil = x + y; return (hasil); } document.write (jumlah (4,5)); Document.write ( <br> ); document.write (jumlah (5,6)); </script>

32 Fungsi Dalam Box Konfirmasi <head> <script type="text/javascript"> function tampil() { var r=confirm("silakan tekan Tombol"); if (r==true) { alert("anda Menekan Tombol OK!!!"); } else { alert("anda Menekan Tombol Cancel!!!"); } } </script> </head> <input type="button" onclick="tampil()" value="tombol Konfirmasi" />

33 Fungsi Dalam Box Konfirmasi <head><title>validasi dalam form</title></head> <script language = JavaScript > function ceknama (form) { if (form.elements*0+.value == ), alert( Nama harus dimasukkan ); form.nama.focus(); form.nama.select(); return(false); } alert( Terima Kasih, + form.elements*0+.value); return (true); } </script> <form name = Form Aplikasi > <pre> Nama : <input type = text name = nama ><br> <input type = button value = Kirim onclick = ceknama(this.form) ><br> </pre> </form>

34 Fungsi Array JavaScript Array adalah : wadah yang dapat menyimpan sejumlah nilai skalar. Contoh : <head><title>array</title></head> <script type="text/javascript"> var mobil= new Array(); mobil[0] = "Toyota Rush"; mobil[1] = "Toyota Yaris"; mobil[2] = "Honda Jazz"; for (i=0;i<mobil.length;i++) { document.write(mobil[i] + "<br />"); } </script>

35 Fungsi Array Concat Menggabungkan 2 buah elemen array Contoh : <head><title>array</title></head> <script type="text/javascript"> var ortu = ["Jani", "Tove"]; var anak = ["Cecilie", "Lone"]; var keluarga = ortu.concat(anak); document.write(ortu); </script>

36 Fungsi Object <head><title>membuat Objek</title></head> <script language="javascript > function perolehwarna() { return (this.warna);} function ubahwarna(warna) { this.warna = warna;} function tampilkaninfomobil() { document.write("tipe : " + this.tipe + "<br>"); document.write("merk : " + this.merk + "<br>"); document.write("cc : " + this.cc + "<br>"); document.write("warna : " + this.warna + "<br>"); }

37 Fungsi Object function Mobil(tipe, merk, cc, warna) { //Property this.tipe = tipe; this.merk = merk; this.cc = cc; this.warna = warna; //Metode this.perolehwarna = perolehwarna; this.ubahwarna = ubahwarna; this.tampilkaninfomobil = tampilkaninfomobil; } var mobilku = new Mobil("SideKick","Suzuki",1600,"Merah"); mobilku.tampilkaninfomobil(); document.write ("<hr>"); mobilku.ubahwarna ("Merah Metalik"); mobilku.tampilkaninfomobil(); </script>

38