Pertemuan 11 - Susana Dwi Yulianti

Download Report

Transcript Pertemuan 11 - Susana Dwi Yulianti

APLIKASI BERBASIS WEB
STTI I-Tech
Susana DwiYulianti, SKom
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).


Untuk mempelajari pemrograman JavaScript,
hanya dua piranti yang diperlukan, yaitu :
 Editor Teks
 Web Browser


Program JavaScript dituliskan pada file HTML
(.html atau .htm) dengan menggunakan tag
kontainer <SCRIPT>.
Tag kontainer <SCRIPT> mempunyai atribut
Language. Isikan atribut Language dengan
JavaScript.
<HTML>
<HEAD>
<TITLE> Latihan JavaScript </TITLE>
</HEAD>
<BODY>
<!-Belajar membuat program JavaScript
-->
<SCRIPT LANGUAGE = "JavaScript">
document.write ("Selamat Siang <br>");
document.write ("Universitas Mercu Buana”);
</SCRIPT>
</BODY>
</HTML>


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 halhal sebagai berikut :
1) Kesalahan karena penulisan huruf capital dan
huruf kecil
2) Penggunaan tanda kutip yang tidak cocok
3) Kesalahan dalam tag <SCRIPT>


Properti adalah atribut dari sebuah objek.
Untuk mengakses sebuah properti, perlu
penulisan dengan bentuk sebagai berikut :
nama_objek.nama_properti


Tanda titik digunakan sebagai pemisah
antara nama objek dan nama properti.
Properti dapat diberi nilai melalui bentuk
penugasan berikut :
Objek.properti = nilai
<HTML>
<HEAD>
<TITLE> properti defaultStatus </TITLE>
</HEAD>
<BODY>
Tes defaultStatus
<SCRIPT LANGUAGE = "JavaScript">
<!-window.defaultStatus = “coba”
//-->
</SCRIPT>
</BODY>
</HTML>
 Metode adalah suatu kumpulan kode yang
digunakan untuk melakukan sesuatu tindakan
terhadap objek.
 Sbg contoh, write() pada objek document
adalah metode yang digunakan untuk
menuliskan tulisan ke jendela browser.
 dipanggil dengan menyebutkan nama objek,
tanda titik, dan nama metode diikuti dengan
daftar parameter yang diletakkan di dalam
tanda kurung.
Nama_objek.nama_metode(parameter)

Script javascript dapat diletakkan pada :
1.
Body dalam document HMTL
<body>
<script language=”javascript”>
//Baris kode javascript ketik disini
//Setiap perintah diakhiri dengan ;
</script>
</body>
2.
Header dalam bentuk function
<head>
<script language=”javascript”>
function namafunction(parameterinput)
{
// Baris Kode fungsi di sini dan diakhiri oleh ‘;’
}
</script>
</head>
3.
Terpisah dalam document HTML / external
javascript.
perintah untuk memanggil file tersebut adalah
sebagai berikut :
<script language=”javascript” src=”path/namafile.js”></script>


adalah sekumpulan kode yang akan dijalankan
manakala pemakai melakukan suatu tindakan
(biasa disebut dengan kejadian).
Bentuk penanganan kejadian adalah seperti
berikut ini :
nama_kejadian=”kumpulan kode”

Contoh kejadian adalah onMouseOver dan
onMouseOut.
<html>
<head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</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>
JavaScript
memiliki
mekanisme
yang
memungkinkan pemakai disuguhi jendela untuk
memasukkan sederetan masukan dan setelah
pemakai mengkilk tombol OK maka kode dalam
JavaScript akan melakukan serangkaian proses.
 Contoh tampilan jendela input :

<HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
</SCRIPT>
</BODY>
</HTML>


Jika Anda ingin memberikan sebuah pesan
kepada user, Anda bisa menyajikannya
dalam bentuk kotak dialog yang biasa
disebut Alert Box.
pernyataan yang diberikan adalah :
window.alert("Jendela Peringatan");
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
window.alert("Jendela Peringatan");
</SCRIPT>
</BODY>
</HTML>

Javascript menyediakan jendela konfirmasi.
Hal ini dapat dilakukan dengan menggunakan
metode confirm().
<HTML>
<HEAD>
<TITLE>Jendela Konfirmasi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var jawab = window.confirm("Anda sudah belajar?");
document.write("Jawaban Anda: " + jawab);
</SCRIPT>
</BODY>
</HTML>
Dalam sebuah bahasa pemrograman, variabel
sangatlah berperan penting .
 Biasanya variabel digunakan untuk menyimpan
data.
 Variabel adalah suatu nama yang digunakan untuk
menyimpan nilai dan nilai yang ada di dalamnya
dapat diubah sewaktu-waktu.
 Pada JavaScript, pendeklarasian variabel bersifat
opsional



Pendeklarasian variabel pada JavaScript
ditulis dengan menggunakan pernyataan var.
Contoh :
var nama = “Budi”;
var nilai = 8;
var x,y,z = “7”;
var alamat;
1.
2.
3.
4.
5.
6.
7.
Penamaan variabel diawali dengan huruf atau tanda karakter garis
bawah ( _ ).
Nama variabel tidak boleh mengandung karakter spasi. Bila variable
terdiri dari beberapa kata, maka variabel dapat dipisahkan dengan
karakter garis bawah.
Karakter kedua dan seterusnya dapat berupa huruf, angka, atau
karakter garis bawah.
Penamaan variabel tidak boleh menggunakan kata kunci JavaScript.
Beberapa variabel yang bernama sama tidak dapat dimiliki dalam
sebuah blok. Tetapi dapat digunakan asalkan variabel-variabel
tersebut terletak dalam blok yang berbeda.
Sebaiknya penamaan variabel dibuat sesuai dengan apa yang
disimpannya.
Huruf kapital dan huruf kecil dibedakan (CASE-SENSITIF)
Nama
Keterangan
Contoh Nilai
Bilangan /
Numerik
dibedakan menjadi tipe bilangan bulat dan 496, -90
bilangan real
String
adalah deretan karakter-karakter. Pada
JavaScript string dapat dituliskan diantara
tanda petik tunggal (‘) atau tanda (“).
“Pemrograman
Web”
Nilai Logika / bernilai true atau false
Boolean
True atau false
Null
var total ;
digunakan untuk merepresentasikan
variabel yang tidak diinisialisasi
<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>




Ekspresi merupakan suatu bentuk yang menghasilkan
suatu nilai.
Dalam bentuk yang sederhana, biasanya ekspresi
merupakan sebuah variabel.
Dan dalam bentuk yang kompleks biasanya sebuah
ekspresi disajikan dengan melibatkan operator &
operand.
Contoh :
3–1*6

Ekspresi
Angka 3, 1, dan 6 adalah merupakan operand,
sedangkan simbol – dan* berperan sebagai operator.
Pada dasarnya, operator pada JavaScript
dapat dibagi menjadi enam, yaitu :
1. Operator Aritmatik
2. Operator Pemberian nilai
3. Operator pemanipulasi bit (bitwise)
4. Operator pembanding
5. Operator Logika
6. Operator String

Operator aritmatik digunakan pada operand bertipe
numerik. Semua operator berlaku untuk bilangan bulat
maupun bilangan pecahan (floating-point).
Operator
Tunggal/Biner
Fungsi
+
Biner
Penjumlahan
-
Biner
Pengurangan
*
Biner
Perkalian
/
Biner
Pembagian
%
Biner
Modulus (Sissa Pembagian)
++
Tunggal
Penambahan dengan satu
(Increment)
--
Tunggal
Pengurangan dengan satu
(decrement)

Operator pemberian nilai digunakan bila ingin
memberi nilai ke suatu operand atau mengubah
nilai suatu operand.
Operator
Keterangan
Contoh
Ekuivalen
=
Sama dengan
a=b
-
+=
Ditambah dengan
a+=b
a=a+b
-=
Dikurang dengan
a-=b
a=a-b
*=
Dikalikan dengan
a*=b
a=a*b
/=
Dibagi dengan
a/=b
a=a/b
%=
Dikenai operasi modulus dengan
a%=b
a=a%b



Operator pembanding digunakan untuk membandingkan dua
buah operand.
Operand yang dikenai operator ini dapat bertipe string,
numerik, maupun ekspresi lain.
Hasil dari operasi pembandingan adalah data bertipe boolean
yang menunjukkan hasil operasi benar atau salah.
Operator
Fungsi
==
Kesamaan
!=
Ketidaksamaan
>
Lebih besar daripada
<
Lebih kecil daripada
>=
Lebih besar atau sama dengan
<=
Lebih kecil atau sama dengan

Operator logika digunakan untuk menentukan
logika antara variabel atau nilai.

Contoh:
diberikan nilai x=6 dan y=3
Operator
&&
Keterangan
Contoh
And
(x<10 && y>1) hasilnya true
||
Or
(x==5 || y==5) hasilnya false
!
Not
!(x==y) hasilnya true
Latihan JavaScript