JavaScript/DHTML
DHTML (Dynamic HTML) ialah gabungan JavaScript, CSS dan HTML.
Pesanan alert
[sunting]<script type="text/javascript">
alert('Helo Dunia!');
</script>
Kod ini akan menampilkan pesanan alert.
<script type="text/javascript">
prompt('Apa nama anda?');
</script>
Ini menampilkan pesanan prom.
<script type="text/javascript">
confirm('Adakah anda pasti?');
</script>
Ini menampilkan pesanan pengesahan.
Contoh Butang dan Pesanan alert JavaScript
[sunting]Ada kalanya lebih baik jika kita terus membuat kod. Ini contoh kod pendek:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>"BUTANG" - Javascript</title>
<script type="text/javascript">
x = 'Anda belum menekan "BUTANG" '
function bom() {
alert('TOLONG!!!, KITA AKAN MUSNAH!!');
alert('10');
alert('9');
alert('8');
alert('7');
alert('6');
alert('5');
alert('4');
alert('3');
alert('2');
alert('1');
alert('!BOOM!');
alert('Selamat sejahtera. :-)');
x = 'Anda menekan "BUTANG"!';
}
</script>
<style type="text/css">
body {
background-color:#00aac5;
color:#000
}
</style>
</head>
<body>
<div>
<input type="button" value="BUTANG - Jangan Petik" onclick="bom()"><br />
<input type="button" value="Petik di sini dan Lihat sama ada anda memetik ''BUTANG''" onclick="alert(x)">
</div>
<p>
Skrip ini dilesenkan di bawah kedua-dua lesen
<a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a>
dan <a href="GNU General Public License">GPL</a>.
Lihat <a href="http://ms.wikibooks.org/wiki/JavaScript">Wikibuku</a>
</p>
</body>
</html>
Apa yang dilakukan kod? Sebenarnya kod memberitahu nilai apa yang harus dimiliki pemboleh ubah "x" semasa laman dimuatkan. Cebisan kod seterusnya merupakan fungsi bernama "bom". Badan fungsi ini menyebabkan beberapa pesanan alert dipaparkan dan mengubah nilai "x".
Bahagian seterusnya terdiri daripada HTML dengan sediki JavaScript yang dikepilkan bersama-sama tag INPUT. Sifat onclick memberitahu induknya apa yang perlu dibuat apabila dipetik. Fungsi bom ditugaskan kepada butang pertama; butang kedua hanya memaparkan pesanan alert yang mengandungi nilai pemboleh ubah "x".
Contoh if() – else JavaScript
[sunting]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Pesanan Selamat Datang - Javascript</title>
<script type="text/javascript">
function wlcmmsg() {
nama = prompt('Apa nama anda?', '');
betul = confirm('Anda pasti nama anda ialah ' + nama + ' ?');
if (betul == true) {
alert('Selamat datang ' + nama);
} else {
wlcmmsg();
}
}
</script>
<style type="text/css">
body {
background-color:#00aac5;
color:#000
}
</style>
</head>
<body onload="wlcmmsg()" onunload="alert('Selamat tinggal ' + nama)">
<p>
Skrip ini dilesenkan di bawah lesen-lesen <a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a>
dan <a href="GNU General Public License">GPL</a>.
Lihat <a href="http://textbook.wikipedia.org/wiki/Programming:Javascript">Wikibuku</a>
</p>
</body>
</html>
Dua Skrip
[sunting]Kita akan melihat contoh pertama tadi, akan tetapi kita akan menambah bahan pada skrip. Kali ini kita akan meminta pengguna memasukkan namanya. Pengguna juga akan ditanya sama ada mahu melawat tapak. Sediki CSS juga ditambah pada butang.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>"BUTANG" - JavaScript</title>
<script type="text/javascript">
// pemboleh ubah global x
x = 'Anda tidak menekan "BUTANG" '
function bom() {
alert('ALAMAK! KITA AKAN MUSNAH!!');
alert('10');
alert('9');
alert('8');
alert('7');
alert('6');
alert('5');
alert('4');
alert('3');
alert('2');
alert('1');
alert('!BOOM!');
alert('Selamat sejahtera :-)');
x = 'Anda telah menekan "BUTANG"';
}
</script>
<style type="text/css">
body {
background-color:#00aac5;
color:#000
}
</style>
</head>
<body onload="selamat_datang()">
<script type="text/javascript">
function selamat_datang() {
var nama = prompt('Siapa nama anda?', '');
if (nama == "" || nama == "null") {
alert('Anda belum memasukkan nama');
selamat_datang();
return false;
}
var lawat = confirm('Anda mahu melawat tapak web ini?')
if (lawat == true) {
alert('Selamat datang ' + nama);
} else {
window.location=history.go(-1);
}
}
</script>
<div>
<input type="button" value="BUTANG - Jangan Klik" onclick="bom()" STYLE="color: #ffdd00; background-color: #ff0000"><br>
<input type="button" value="Klik di sini dan lihat sama ada anda telah memetik ''BUTANG''"Click Here onclick="alert(x)">
</div>
<p>
Skrip ini dilesenkan di bawah lesen-lesen <a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a>
dan <a href="GNU General Public License">GPL</a>.
Lihat <a href="http://textbook.wikipedia.org/wiki/Programming:Javascript">Wikibuku</a>,
</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Kalkulator</title>
<script type="text/javascript">
function multi() {
var a = document.Kalkulator.no1.value;
var b = document.Kalkulator.no2.value;
var p = (a*b);
document.Kalkulator.hasil.value = p;
}
function divi() {
var d = document.Kalkulator.dividend.value;
var e = document.Kalkulator.divisor.value;
var q = (d/e);
document.Kalkulator.quotient.value = q;
}
function circarea() {
var r = document.Kalkulator.jejari.value;
pi = 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756
48233786783165;
var a = pi*(r*r);
document.Kalkulator.luas.value = a;
var c = 2*pi*r;
document.Kalkulator.lilitan.value = c;
}
</script>
<style type="text/css">
body {
background-color:#00aac5;
color:#000
}
label {
float:left;
width:7em
}
</style>
</head>
<body>
<h1>Kalkulator</h1>
<form name="Kalkulator" action="">
<fieldset>
<legend>Darab</legend>
<input type="text" name="no1"> × <input type="text" name="no2">
<input type="button" value="=" onclick="multi()">
<input type="text" name="hasil">
</fieldset>
<fieldset>
<legend>Bahagi</legend>
<input type="text" name="dividend"> ÷ <input type="text" name="divisor">
<input type="button" value="=" onclick="divi()">
<input type="text" name="quotient">
</fieldset>
<fieldset>
<legend>Luas dan Lilitan Bulatan </legend>
<p>(Mengguna pi sehingga 240 d.p)</p>
<div>
<label for="radius">Taipkan jejari</label> <input type="text" name="jejari" id="jejari" value="">
</div>
<div>
<input type="button" value="=" onclick="circarea()">
</div>
<div>
<label for="area">Luas</label> <input type="text" name="luas" id="luas" value="">
</div>
<div>
<label for="lilitan">Lilitan</label> <input type="text" name="lilitan" id="lilitan" value="">
</div>
</fieldset>
</form>
<p>Kod dilesenkan di bawah <a href="http://www.gnu.org/licenses/gpl.html">GNU GPL</a>.</p>
</body>
</html>
 |
Nota penterjemah: |