Selasa, 02 Oktober 2012

Javascript dalam HTML


Javascript

A. Sekilas tentang JavaScript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server.

Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

B. Struktur JavaScript

Struktur dari JavaScript adalah sbb :

<SCRIPT LANGUAGE = ”JavaScript”>

<!- -

Penulisan kode javascript

// – - >

</SCRIPT>

Keterangan :

Kode <!- – // – - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.



C. JavaScript sebagai bahasa berorientasi pada obyek

Properti

Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.

Penulisan :

Nama_objek.nama_properti = nilai

window.defaultStatus = ”Selamat Belajar JavaScript”;

Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.

Penulisan :

Nama_objek.nama_metode(parameter)

document.write (”Hallo”)



D. Letak JavaScript dalam HTML

Skrip Javascript dalam dokumen HTML dapat diletakkan pada :

1. Bagian Head

2. Bagian Body (jarang digunakan).

LISTING PROGRAM

<HTML>

<HEAD><TITLE>Memasukkan Bilangan</TITLE></HEAD>

<BODY>

<P><SCRIPT language=”JavaScript”>

<!–

function jumlah()

{

var bil1 = parseInt(document.fform.bilangan1.value);

var bil2 = parseInt(document.fform.bilangan2.value);

var hasil=bil1+bil2;

document.fform.hasil.value=hasil;

}

function kurang()

{

var bil1 = parseInt(document.fform.bilangan1.value);

var bil2 = parseInt(document.fform.bilangan2.value);

var hasil=bil1-bil2;

alert (“Hasil Pengurangan = ” + hasil);

}

function kali()

{

var bil1 = parseInt(document.fform.bilangan1.value);

var bil2 = parseInt(document.fform.bilangan2.value);

var hasil=bil1*bil2;

alert (“Hasil Perkalian = ” + hasil);

}

function mod()

{

var bil1 = parseInt(document.fform.bilangan1.value);

var bil2 = parseInt(document.fform.bilangan2.value);

var hasil=bil1%bil2;

alert (“Hasil Modulus = ” + hasil);

}

function bagi()

{

var bil1 = parseInt(document.fform.bilangan1.value);

var bil2 = parseInt(document.fform.bilangan2.value);

var hasil=bil1/bil2;

alert (“Hasil Pembagian = ” + hasil);

}

//–></SCRIPT></P>

<FORM NAME =”fform”>

<H1><BR>Masukkan Data Lewat Keyboard</H1>

<table>

<tr>

<td>Bilangan Pertama :</td>

<td><input type=”text” size=”11″ name=”bilangan1″></td>

</tr>

<tr>

<td>Bilangan Kedua :</td>

<td><input type=”text” size=”11″ name=”bilangan2″></td>

</tr>

<tr>

<td><input type=”text” size=”11″ name=”hasil”></td>

</tr>

<tr>

<INPUT TYPE=”button” value=”+” onclick=”jumlah()”>

<INPUT TYPE=”button” value=”-” onclick=”kurang()”>

<INPUT TYPE=”button” value=”*” onclick=”kali()”>

<INPUT TYPE=”button” value=”/” onclick=”bagi()”>

<INPUT TYPE=”button” value=”mod” onclick=”mod()”>

</table>

</FORM>

</BODY>

</HTMl>

LOGIKA PROGRAM

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Dibawah ini merukan contoh program membuat kalkulator.

Pendeklarasian  javascript pada HTML Kita dapat melakukan dengan memberi tag <SCRIPT language=”JavaScript”> pada bagian awal body. Hal berikutnya yang kita lakukan adalah membuat semua function untuk operasi yang akan dimasukkan. Contoh dari pembuatan function pertama adalah dengan perintah berikut ini:

Pada function tersebut, variabel bil1 akan menyimpan angka yang ada pada kolom bilangan1 yang nanti akan kita buat pada tampian. Demikian juga dengan variabel bil2, yang akan menyimpan nilai yang ada pada kolom bilangan2 pada form.

Setelah itu, variabel hasil akan menyimpan nilai dari penjumlahan bil1 dan bil2. Pembuatan function untuk operasi-operasi yang berikutnya hampir sama dengan pembuatan operasi di atas, hanya saja nilai dari variabel hasil  dibuat berbeda sesuai dengan sesuai dengan perhitungan pada operasi yang sedang dibuat pengurangan(-), perkalian(*), pembagian(/), dan modulus(%).

Setelah selesai membuat function dari operasi-operasi kalkulator, yang selanjutnya akan kita lakukan adalah membuat tampilannya. Tampilan akan kita buat dalam bentuk form menggunakan perintah <FORM NAME =”fform”>.  Pada tampilan tersebut, akan terdapat judul “Masukkan Data Lewat Keyboard”. Selanjutnya pada form akan tercetak “Bilangan Pertama :” dan sebuah kolom untuk menginput angka di sebelahnya. Tepat di bawahnya, akan tercetak  “Bilangan Kedua :” dan sebuah kolom di sebelahnya yang juga digunakan untuk menginput angka.

OUTPUT PROGRAM





Tidak ada komentar:

Posting Komentar