Java Script. Logika Java Script

(1)

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

(3)

Komponen Java Script

<html>

<head>

<title> xxxxxxxxxx </title>

</head>

<body>

<script language = “JavaScript”>

<!—

document.write (“XXXXXXXXXXXX”);

//-->

</Script>

</body>

</html>

(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

(5)

Karakter Java Script

Karakter Keterangan

\a Bel (suara speaker)

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

(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

window.defaultStatus

Nama Objek Nama Properti

Pemisah antara objek dan property

(8)

Contoh Property

<title> Belajar JavaScript </title> </head>

<body>

<h1>Tes Property</h1>

<!--window.defaultStatus = “Selamat Menggunakan JavaScript”;

//-->

(9)

Javascript Bahasa Berorientasi Object

Metode

adalah : suatu kumpulan kode yang digunakan

untuk melakukan suatu tindakan terhadap object

document.write(“Haloo”)

Nama Objek Nama Metode

Pemisah antara objek dan Metode

(10)

Contoh Metode

<body>

<!--document.write (“Selamat Menggunakan JavaScript”); document.write (“Selamat Mencoba !!!”);

//-->

(11)

Javascript Bahasa Berorientasi Object

Penanganan Kejadian (Event Handler)

adalah : suatu kumpulan kode yang akan

dijalankan manakala pemakai melakukan suatu

tindakan (kejadian)

Contoh kejadian :

(12)

Contoh EventHandler

<body>

Arahkan Mouse pada LINK

<a href =“ http://androits.blogspot.com “ onMouseOver = “window.status =

‘Anda Menyorot Link’; return true”

onMouseOut = “window.status = ‘ ’; return true”>MENUJU WEB </a>

(13)

Contoh Input data JavaScript

<title> Belajar Input data JavaScript </title> </head>

<body>

</Script> </body> </html>

(14)

Contoh Jendela Peringatan

JavaScript

<html> <head> <script type="text/javascript"> function pesan() {

alert(“Ini Pesan Dari Even Alert JavaScript!!!"); } </script> </head> <body onload=“pesan()"> </body> </html>

(15)

Contoh Jendela Peringatan

JavaScript

<html> <head> <title>Alert Box</title> </head> <body>

</script> </body> </html>

(16)

Contoh Jendela Konfirmasi

JavaScript

<html> <head> <title>Konfirmasi</title> </head> <body>

var jawaban = window.confirm(“Anda ingin Meneruskan ? ”);

document.write(“Jawaban Anda : “ + jawaban); //-->

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

2. String Misal “Selamat Belajar JavaScript”

3. Nilai Logika atau Boolean Nilai berupa True atau

(18)

Variabel dan Nilai

Tipe Bilangan

Bilangan Bulat Bilangan Real

Bilangan Oktal : -Menggunakan Digit 0 – 7 -Contoh : 012 Bilangan Desimal -Digit 0 – 9 -Tidak boleh di awali dengan 0 kecuali bilangan 0 itu sendiri Bilangan Hexadesimal -Menggunakan ang-ka 0 – 9 dan huruf A – F - Contoh : 0XFF

(19)

Penggunaan typeof

<html> <head> <title>Penggunaan typeof</tile> </head> <body>

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> </body> </html>

(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

(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

<html> <head> <title>Operasi Matematika</title> </head> <body>

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>”); 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

(24)

Operator Pembanding dan Logika

<html> <head> <title>Pembanding</title> </head> <body>

var nilai = prompt (“Nilai (0 – 100) : “, 0);

var hasil = (nilai >= 60) ? “Lulus” : “Tidak Lulus”; document.write (“Hasil Anda : “ + hasil);

(25)

Operator Pembanding dan Logika

If (kondisi) {

//Blok pernyataan yang dijalankan //jika kondisi bernilai benar

}

Atau menggunakan else If (kondisi)

{

} else {

(26)

Operator Pembanding dan Logika

var time = d.getHours(); if (time < 10) { document.write("<b>Selamat Pagi</b>"); } else { document.write("<b>Selamat Siang</b>"); } </script> </body>

(27)

Logika If Bersarang

<html>

<head> <title>If Bersarang</title> </head>

<body>

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 if (kode_hari == 4) nama_hari = “Kamis”; else if (kode_hari == 5) nama_hari = “Jumat”; Else nama_hari = “Sabtu”;

document.write(“Hari ini hari “ + nama_hari); document.write(“, tanggal “ + tanggal.getDate() + “/” + (tanggal.getMonth() + 1) + “/” + tanggal.getYear()); </script> </body> </html>

(28)

Logika Switch

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

(29)

Logika Switch

<html> <head> <title>Contoh Switch</title> </head> <body>

var kode_hari = tanggal.getDay(); var nama_hari = “”; Switch(kode_hari) { case 0: nama_hari = “Minggu”; break; case 1: nama_hari = “Senin”; break; case 2: nama_hari = “Selasa”; break; case 3: nama_hari = “Rabu”; break; case 4: nama_hari = “Kamis”; break; case 5: nama_hari = “Jumat”; break; case 6: nama_hari = “Sabtu”; }

document.write(“Hari ini hari “ + nama_hari); Document.write(“, tanggal “ + tanggal.getDate() + “/” + (tanggal.getMonth() + 1 ) + “/” + tanggal.getYear()); </script> </body> </html>

(30)

Perulangan

Proses perulangan : while do ... while for Contoh : <html> <head><title>Perulangan</title></head> <body>

while (bilangan < 5) {

document.write (“Bilangan “ + bilangan + “<br>”); bilangan++; }

(31)

Fungsi

function nama (daftar_parameter) { pernyataan_1; ... pernyataan_n; } Contoh : <html> <head><title>Contoh Fungsi</title></head> <body>

(32)

Fungsi Dalam Box Konfirmasi

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

(33)

Fungsi Dalam Box Konfirmasi

<html>

<head><title>validasi dalam form</title></head> <body>

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>

Nama : <input type = “text” name = “nama”><br>

</form> </body> </html>

(34)

Fungsi Array JavaScript

Array adalah : wadah yang dapat menyimpan sejumlah nilai skalar. Contoh :

<html>

<head><title>Array</title></head> <body>

mobil[0] = "Toyota Rush"; mobil[1] = "Toyota Yaris"; mobil[2] = "Honda Jazz";

for (i=0;i<mobil.length;i++) {

document.write(mobil[i] + "<br />"); }

(35)

Fungsi Array Concat

 Menggabungkan 2 buah elemen array Contoh :

<html>

<head><title>Array</title></head> <body>

document.write(ortu); </script>

</body> </html>

(36)

Fungsi Object

<html> <head><title>Membuat Objek</title></head> <body> <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();

(38)