JAVASCRIPT
Pemrograman Web
JavaScript
● Bahasa pemrograman berbasiskan client side scripting.
● Program akan dieksekusi disisi (browser) client.
● Client dapat melihat skrip dan mengetahui algoritma dari program yang ditulis.
● Tidak memerlukan compiler khusus untuk mengeksekusi programnya.
Embedded – Inserting Script
● Kode program JavScript ditanamkan langsung didalam halaman HTML. Kode program disisipkan diatara tag <script type="JavaScript"></script>.
<html>
<head>
<title>Embedded Script</title>
<head>
<body>
<p>Program JavaScript Pertama Saya!</p>
<script type="JavaScript">
Inline – Inserting Script
● JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut.
● Biasanya berkaitan dengan event, yaitu sebuah aksi yang dilakukan oleh seorang user.
<html>
<head>
<title>Inline Script</title>
<head>
<body>
<a href="#" onClick="alert('Terima Kasih.');">Klik Dong!</a>
</body>
</html>
External – Inserting Script
● Menempatkan kode program JavaScript secara terpisah.
● Terhubung dengan dokumen dengan meletakkanya pada elemen head.
● File JavaScript disimpan menggunakan ekstensi .js.
External – Inserting Script
function sayHello(){
alert("Hello Dab!");
}
<html>
<head>
<title>External Script</title>
<script language="JavaScript" src="08.latihan_03.js"></script>
<head>
<body>
<a href="#" onClick="sayHello();">Klik Dong!</a>
</body>
</html>
JavaScript Object
● JavaScript memperlakukan setiap element pada browser / navigator sebagai sebuah object.
● Memudahkan kita untuk mengakses dan memanipulasi sifat / properti dari object tersebut.
● Diklasifikasikan berdasarkan hirarki / tingkatan khusus dan dapat diasosiasikan dengan
Description – JavaScript Object
● Object yang terbesar adalah object window (jendela) dari browser.
● Didalam object window terdapat suatu object yang ditampilkan dalam bentuk halaman web yang disebut sebagai document.
● Object document memiliki banyak turunan.
Contohnya : form, text, image, link, dll.
Description – JavaScript Object
<html>
<head>
<title>Object Example</title>
<head>
<body>
<a href="#"
onClick="window.document.title='Sesuatu'">Klik Dong!
</a>
</body>
</html>
Direct Object Operation
● Mengakses suatu object dibawah object document secara langsung tanpa melalui hirarki yang ada.
● Mengakses dan mengubah properti dari sebuah object. JavaScript menggunakan fungsi
getElementById()
● Element harus mempunyai identifier unik yang didefinisikan melalui sebuah atribut element yang bernama id
Direct Object Operation
<html>
<head>
<title>Direct Object Operation</title>
<head>
<body>
<form action="" name="form1" method="post">
Nama : <input type="text" name="txtNama" id="txtNama_Depan" />
</form>
<a href="#"
onClick="window.document.forms['form1'].txtNama.value='Hierarchy'">
Hierarchy Way </a> -
<a href="#"
onClick="document.getElementById('txtNama_Depan').value='Direct'">
Direct Way </a>
</body>
</html>
Other Object
Object Keterangan
Array Object ini memungkinkan kita untuk membuat sebuah array. Memeiliki berbagai Met ode yang memungkinkan kita untuk menambah, menghapus dan mengurutkan element-element yang terdapat didalamnya.
Boolean Object ini memungkinkan kita untuk membuat nilai boolean.
Date Object yang memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu.
Function Memungkinkan kita untuk membuat fungsi yang dapat kita definisikan sendiri menurut kebutuhan yang diinginkan.
Math Object math memungkinkan kita untuk menggunakan fungsi-fungsi matematika. Contohnya : sqrt, round, max, dll.
Number Object ini memungkinkan kita untuk melakukan operasi dasar terhadap sebuah bilangan.
RegExp Memungkinkan kita untuk melakukan operasi pencarian string menggunakan teknik-teknik regular expression.
String Menyediakan metode untuk melakukan manipulasi terhadap sebuah string.
Variable
● Sebuah pengenal yang digunakan untuk menyimpan suatu nilai yang nilai tersebut dapat berubah-ubah selama dijalankannya program.
Explisit – Variable Declaration
● Menuliskan variabel dengan diawali dengan keyword var kemudian diikuti nama variabel dan nilai yang dikandungnya.
var test = "Sesuatu";
var bil_1, bil_2, total;
Implisit – Variable Declaration
● Menuliskan variabel secara langsung diikuti dengan nilai yang dikandungnya.
test = "Sesuatu";
bil_1 = 5;
bil_2 = 10;
Rule – Variable Declaration
● Terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasi antara ketiganya.
● Tidak boleh mengandung spasi dan terdiri dari minimal satu karakter.
● Dimulai dengan huruf atau garis bawah, tidak boleh diawali dengan angka.
● Bersifat case sensitive, yaitu huruf besar dan kecil dibedakan.
Variable Example
<html>
<head>
<title>JavaScript Variable</title>
<head>
<body>
<script language="JavaScript">
var bil_1, bil_2, total;
bil_1 = 5;
bil_2 = 10;
total = bil_1 * bil_2;
document.writeln(bil_1 + " * " + bil_2 + " = " + total);
</script>
</body>
</html>
Variable Type
● JavaScript tidak mengenakan tipe data tertentu pada sebuah variabel atau bersifat variant.
● Sebuah variabel dalam JavaScript dapat menampung jenis data yang berbeda-beda dalam satu siklus eksekusi program.
● JavaScript tetap menyediakan sebuah mekanisme untuk melihat tipe data dari sebuah variabel.
Variable Type
<html>
<head>
<title>JavaScript Variable</title>
<head>
<body>
<script language="JavaScript">
var sesuatu;
sesuatu = 14;
document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));
document.write("<br />");
sesuatu = "ada deh..";
document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));
</script>
</body>
</html>
Type Casting - Variable
● Mekanisme pengubahan / konversi sebuah variabel kepada tipe data tertentu.
Type Casting - Variable
<html>
<head>
<title>JavaScript Type Casting</title>
<head>
<body>
<script language="JavaScript">
var sesuatu;
sesuatu = 14;
document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));
document.write("<br />");
sesuatu = String(sesuatu);
document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));
document.write("<br />");
sesuatu = Boolean(sesuatu);
document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));
Constants
● Sebuah tetapan nilai dalam sebuah program.
● Nilai konstanta tidak dapat diubah selama program dijalankan.
● Deklarasi konstanta dapat dilakukan dengan cara menuliskan keyword const diikuti dengan nama konstanta dan nilai dari konstanta tersebut.
Constants Rule
● Hanya terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasinya.
● Nama konstanta harus dimulai dengan huruf atau garis bawah ( _ ).
● Konstanta tidak dapat dideklarasikan ulang dan nilainya tetap.
Event
● Aksi yang dilakukan oleh seorang user terhadap object-object pada halaman web yang dapat memicu berjalannya program JavaScript.
● Dituliskan sebagai atribut dari sebuah element HTML.
● Browser secara otomatis mengenali atribut- atribut tertentu sebagai sebuah event.
Event Example
<html>
<head>
<title>JavaScript Event</title>
<head>
<body>
<a href="#"
onMouseOver="alert('Kursor diatas link.');"
onMouseOut="alert('Kursor berpindah tempat.');">
Klik Donk!
</a>
</body>
</html>
Branching
● Disebut dengan istilah dicision-making.
● Memungkinkan aplikasi untuk memeriksa isi sebuah variabel atau hasil perhitungan dan ekspresi kemudian mengambil tindakan yang sesuai.
Branching Example
<html>
<head>
<title>Percabangan Pada JavaScript</title>
<head>
<body>
<script language="JavaScript">
var nilai, index;
nilai = 80;
if(nilai >= 85 && nilai <= 100){
index = "A";
} else if(nilai >= 70){
index = "B";
} else if(nilai >= 50){
index = "C";
} else if(nilai >= 30){
index = "D";
} else {
index = "E";
Function
● Sebuah blok program yang merupakan
sekumpulan statement yang bertujuan untuk menyelesaikan suatu tugas tertentu.
● Sebuah fungsi dibuat untuk membantu
mengerjakan tugas yang kompleks secara efektif dan efisien.
Function Rule
● Tidak boleh sama dengan fungsi yang sudah ada didalam JavaScript.
● Hanya terdiri dari huruf, angka dan garis bawah (underscore).
● Tidak boleh diawali dengan angka.
● Parameter bersifat optional. Namun tanda kurung harus tetap ditampilkan.
Function Example
<html>
<head>
<title> Fungsi JavaScript</title>
<script language="JavaScript">
function ckMarital(status){
document.getElementById('txtStatus').innerHTML = status;
}
</script>
<head>
<body>
<form action="" method="post">
Sudah Menikah? :
<input type="radio" name="rdMaritalStatus" value="Sudah"
onClick="ckMarital(this.value)" /> Sudah
<input type="radio" name="rdMaritalStatus" value="Belum"
onClick="ckMarital(this.value)" /> Belum <br />
Status : <span id="txtStatus">Tidak ditentukan</span>
</form>
</body>
</html>
Dialog Box
● Satu element window yang tampil pada layer paling depan.
● Kotak dialog memungkinkan program untuk berinteraksi dengan user dengan cara :
➢ Memberikan peringatan kepada user.
➢ Memberikan pilihan kepada user.
➢ Meminta user untuk melengkapi isian pada
Alert – Dialog Box
● Memungkinkan browser untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan (sebagai satu satu
parameter dari fungsi).
● Pada saat kotak dialog ini muncul, user tidak punya pilihan lain selain menekan tombol OK.
Alert Example – Dialog Box
<html>
<head>
<title>Alert - Kotak Dialog</title>
<head>
<body>
<script language="JavaScript">
alert("Perhatian!");
alert("Ini adalah contoh dari fungsi Alert.");
</script>
</body>
</html>
Confirm – Dialog Box
● Fungsi Confirm hampir sama seperti fungsi Alert, dengan tambahan kita bisa melakukan pilihan OK atau Cancel.
● Pada saat kita pilih OK maka fungsi ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel.
Confirm Example – Dialog Box
<html>
<head>
<title>Confirm - Kotak Dialog</title>
<head>
<body>
<script language="JavaScript">
function ckMarital(){
if(confirm("Apakah anda benar-benar sudah menikah?")){
document.getElementById("ckStatus").checked = true;
} else {
document.getElementById("ckStatus").checked = false;
} }
</script>
<form action="" method="post">
Sudah Menikah? :
<input type="checkbox" name="ckStatus" id="ckStatus"
onClick="ckMarital()" /> Ya
Prompt – Dialog Box
● Sedikit berbeda dibandingkan kedua fungsi sebelumnya. Karena dilengkapi dengan satu cara untuk mendapatkan informasi yang
diberikan oleh user.
● Terdiri dari 2 komponen: Pertama, teks untuk
pertanyaan dan yang kedua adalah teks default dari field informasi yang akan diisi oleh user.
Prompt Example – Dialog Box
<html>
<head>
<title>Prompt - Kotak Dialog</title>
<head>
<body>
<script language="JavaScript">
var nama;
nama = prompt("Siapakah nama kekasih anda?","");
document.write("Nama kekasih anda adalah : " + nama);
</script>
</body>
</html>
