Mengenal function
Penggunaan function memungkinkan penulisan suatu kode program secara modular atau yang sering kali
disebut sebagai modular programming. Penulisan function pada JavaScript umumnya diletakkan pada bagian
HEAD dalam dokumen HTML.
Bentuk umum dalam penulisan function adalah:
function nama_function() {
//statementstatement
yang akan dieksekusi oleh function
}
Ketika suatu function ingin digunakan yang perlu dilakukan adalah memanggil nama functionnya.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function salam() {
document.write("<H1>Hallo Apa Kabar?</H1>");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
salam();
document.write("Header tersebut dihasilkan dari pemanggilan function salam");
</SCRIPT>
</BODY>
</HTML>
Suatu function juga bisa melewatkan suatu parameter ketika function tersebut dipanggil.
Bentuk umum penulisannya adalah:
function nama_function(parameter1, parameter2, ...) {
//statementstatement
yang akan dieksekusi oleh function
}
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan(a, b) {
var c;
c = a + b;
document.write("hasil penjumlahannya = " + c);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x, y;
x = 4; y = 7;
document.write("nilai variabel x = " + x + "<BR>");
document.write("nilai variabel y = " + y + "<BR>");
penjumlahan(x, y);
</SCRIPT>
</BODY>
</HTML>
Suatu function juga bisa menghasilkan suatu nilai ketika function tersebut dipanggil. Untuk menjadikan
function yang dibuat dapat menghasilkan / mengembalikan suatu nilai ketika dipanggil, yang perlu dilakukan
adalah dengan menyertakan kata kunci return di depan nilai yang akan dikembalikan oleh function tersebut.
Berikut ini adalah bentuk umum penulisannya.
function nama_function() {
//statementstatement
yang akan dieksekusi oleh function
return nilai_kembali;
}
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function perkalian(a, b) {
var c;
c = a * b;
return c;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x, y, z;
x = 4; y = 7;
document.write("nilai variabel x = " + x + "<BR>");
document.write("nilai variabel y = " + y + "<BR>");
z = perkalian(x, y);
document.write("x * y = " + z);
</SCRIPT>
</BODY>
</HTML>
Mengenal Array
Bagi setiap orang yang pernah belajar suatu bahasa pemrograman tertetu pasti pernah mengenal konsep array.
Array sering kali digambarkan sebagai suatu variabel yang mampu menampung banyak nilai oleh kerenanya
sering kali juga dikenal dengan sebutan variabel array.
Deklarasi Array
Dalam JavaScript terdapat dua cara untuk mendeklarasikan suatu array.
Bentuk umum dari cara yang pertama adalah:
var nama_variabel_array = new Array(isi_array);
contoh:
var hobi = new Array(�memancing�,�membaca�,�melukis�,�menyanyi�);
Pada contoh tersebut dideklarasikan suatu variabel array bernama hobi. Varibel aray ini berisi nilainilai
bertipe data String, yaitu �memancing�,�membaca�,�melukis�,dan �menyanyi�.
Pada cara pendeklarasian seperti ini suatu variabel array akan langsung diberi nilai awal dan ukuran dari
variabel array yang terbentuk akan disesuaikan dengan banyaknya nilai awal yang diisikan.
Bentuk umum dari cara yang kedua adalah:
var nama_variabel_array = new Array(ukuran);
contoh:
var negara = new Array();
Pada cara pendeklarasian kedua seperti di atas akan menghasilkan suatu variabel array bernama negara.
Yang menarik dari array yang dimiliki oleh Java Script adalah ukurannya yang dinamis. Dalam Java Script
seseorang yang ingin membuat suatu array tidak perlu menentukan ukuran array yang akan dibuat. Ukuran
array dalam Java Script akan secara otomatis menyesuaikan dengan jumlah data yang ditampung di dalamnya.
Untuk menyimpan data pada suatu array ataupun untuk mengakses data yang tersimpan di dalam suatu array
dapat dilakukan dengan menyebutkan nama array dan diikuti dengan index tempat data tersebut berada dalam
array yang bersangkutan.
Misalnya pada array negara akan dimasukkan datadata
negara: �indonesia�, �jepang�, �belanda�, dan
�malaysia�, maka dapat dilakukan dengan:
negara[0] = �indonesia�;
negara[1] = �jepang�;
negara[2] = �belanda�;
negara[3] = �malaysia�;
var coba = negara[1];
Pada contoh di atas, array negara dengan index 0 akan berisi data string �indonesia�, dan pada index 2 akan
berisi data string �belanda�.
Variabel coba pada contoh di atas akan berisi data yang dicopykan dari array negara index 1. Dengan kata lain
variabel coba pada contoh di atas akan berisi data string �jepang�.
Minggu, 09 Mei 2010
Minggu, 25 April 2010
JavaScript
Pengenalan Java Script
Java Script merupakan bahasa pemrograman yang dieksekusi di sisi klien atau yang biasa dikenal dengan istilah client side programming di mana suatu kode program akan dikirimkan ke klien dan dieksekusi / dijalankan oleh web browser dan bukannya dieksekusi di web server.
Dalam implementasinya, suatu kode program Java Script akan disisipkan pada suatu dokumen HTML dengan
menggunakan pasangan tag <SCRIPT> dan </SCRIPT> di atribut LANGUAGE dari tag <SCRIPT> akan
diberi nilai JavaScript.
<SCRIPT LANGUAGE=�JavaScript�>
...
...
...
</SCRIPT>
Dalam menuliskan kode program Java Script ada beberapa hal yang perlu diperhatikan:
1. Java Script merupakan bahasa pemrograman yang bersifat case sensitive, artinya Java Script akan
membedakan penggunaan huruf besar dan huruf kecil. �DOCUMENT� akan lain artinya dengan
�document� ataupun �Document�.
2. Setiap statement / pernyataan dalam kode program Java Script selalu diakhiri dengan karakter �;� (titik
koma / semicolon).
Mencatak Teks
Dalam Java Script perintah yang digunakan untuk mencetak suatu teks pada dokumen HTML adalah
document.write(�pesannya�).
Untuk lebih jelasnya bisa melihat contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<H1>Aksara Jawa</H1>");
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>
Memberi Komentar
Dalam menuliskan kode program adakalanya dibutuhkan untuk menuliskan suatu komentar ataupun
keterangan berkenaan dengan kode program tersebut, oleh karenanya dibutuhkan suatu mekanisme penulisan
komentar. Komentar itu sendiri akan diabaikan dan tidak akan dieksekusi / dijalankan oleh web browser.
Terdapat dua cara untuk menyertakan komentar dalam Java Script:
1. Menggunakan penanda //
Penanda // digunakan untuk menuliskan komentar dalam satu baris
2. Mengunakan pasangan penanda /* dan */
Pasangan penanda /* dan */ digunakan untuk menuliskan komentar yang lebih dari satu baris
Untuk lebih jelasnya bisa melihat contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//ini adalah komentar dalam satu baris
document.write("<H1>Belajar Java Script itu menyenangkan</H1>");
/* ini adalah komentar
dengan jumlah baris
lebih dari satu
*/
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>
Tipe Data dan Deklarasi Variabel
Dalam Java Script terdapat tiga macam tipe data utama, yaitu tipe data String (kumpulan karakter), tipe data
bilangan / numerik, dan tipe data logika / boolean. Pada tipe data boolean akan mengenal dua buah nilai yaitu
true dan false.
Pendeklarasian variabel dalam Java Script ditandai dengan penggunaan kata kunci var dan diikuti dengan
nama variabel. Tipe data dari suatu variabel ditentukan oleh nilai yang diisikan ke dalam variabel tersebut dan
bukannya dideklarasikan secara eksplisit. Untuk lebih jelasnya perhatikan contoh berikut ini:
<SCRIPT LANGUAGE=�JavaScript��>
var kota = �bandung�; // deklarasi variabel bernama kota bertipe data string
var gaji = 0; // deklarasi variabel bernama gaji bertipe data integer
var ipk = 2.75; // deklarasi variabel bernama ipk bertipe data float
var status_cekal = false; // deklarasi variabel bernama status_cekal bertipe data boolean
</SCRIPT>
Operator Aritmatika
Operator aritmatika adalah operator yang digunakan untuk menangani /mengoperasikan suatu nilai bertipe
data numerik.
Berikut ini adalah daftar tipe data numerik:
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Aritmatika</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, c;
a = 7; b = 4; c = 0;
document.write("nilai variabel a = " + a +"<BR>");
document.write("nilai variabel b = " + b +"<BR>");
c = a + b;
document.write("a + b = " + c + "<BR>");
c = a b;
document.write("a b
= " + c + "<BR>");
c = a * b;
document.write("a * b = " + c + "<BR>");
c = a / b;
document.write("a / b = " + c + "<BR>");
c = a % b;
document.write("a % b = " + c + "<BR>");
a++;
document.write("a++ maka nilai a sekarang adalah " + a + "<BR>");
a;
document.write("bmaka
nilai a sekarang adalah " + b);
</SCRIPT>
</BODY>
</HTML>
Operator Pemberian Nilai / Assignment
Operator penugasan / assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke
dalam suatu variabel.
Berikut ini adalah daftar operator penugasan:
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pemberian Nilai / Assignment</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = 7;
document.write("a = 7 <BR>");
document.write("nilai variabel a = " + a + "<BR>");
a += 3;
document.write("a += 3<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a =
5;
document.write("a =
5<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a *= 4;
document.write("a *= 4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a /= 2;
document.write("a /= 2<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a %= 4;
document.write("a %= 4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
</SCRIPT>
</BODY>
</HTML>
Operator Pembanding / Comparison
Operator pembanding adalah operator yang digunakan untuk membandingkan dua buah nilai dan akan
menghasilkan nilai bertipe data boolean yaitu benar(true) atau salah (false).
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pembandingan Nilai / Comparison</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, x;
a = 7; b = 15;
document.write("nilai variabel a = " + a + "<BR>");
document.write("nilai variabel a = " + b + "<BR><BR>");
x = (a==b);
document.write("x = (a==b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>b);
document.write("x = (a > b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a<b);
document.write("x = (a < b)");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>=b);
document.write("x = (a > =b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a<=b);
document.write("x = (a < =b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
</SCRIPT>
</BODY>
</HTML>
Operator Logika
Operator logika adalah operator yang digunakan untuk mengoperasikan nilainilai
bertipe data boolean yang
bernilai true atau false.
Berikut ini adalah daftar operator logika
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Logika</H1>
<SCRIPT LANGUAGE="JavaScript">
var x;
x = (7>4) && (5<9);
document.write("x = (7 > 4) && (5 < 9)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (9>12) || (8<3);
document.write("x = (9 > 12) || (8 < 3)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = !(9<4);
document.write("x = !(9 < 4)<BR>");
document.write("nilai variabel x = " + x);
</SCRIPT>
</BODY>
</HTML>
Operasi Penggabungan String
Seperti pernah dijelaskan sebelumnya bahwa nilai bertipe data string merupakan nilai yang terdiri dari
sekumpulan karakter sehingga membentuk suatu nilai berupa kata ataupun kalimat tertentu. Untuk nilainilai
bertipe data string terdapat suatu operator yang berguna untuk menggabungkan nilai string. Operator ini
dikenal dengan nama operator penggabuungan string yang dituliskan dengan penanda +.
Apabila suatu nilai bertipe data string dijumlahkan dengan nilai bertipe data numerik maka secara otomatis
nilai bertipe data numerik tersebut akan dikonversi menjadi tipe data string sehingga pada akhirnya akan
dihasilkan suatu nilai bertipe data string.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Penggabungan String</H1>
<SCRIPT LANGUAGE="JavaScript">
var x;
x = "aksara" + "jawa";
document.write('x = "aksara" + "jawa"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x += "kuno";
document.write('x += "kuno"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x = "25" + "30";
document.write('x = "25" + "30"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x = "15" + 7;
document.write('x = "15" + 7<BR>');
document.write('nilai variabel x = "' + x + '"');
</SCRIPT>
</BODY>
</HTML>
Konversi Tipe Data
Dalam pemrograman java script dimungkinkan untuk melakukan konversi / pengubahan tipe data. Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik. Ada dua fungsi yang bisa digunakan untuk mengkonversi suatu nilai bertipe data string ke numerik, Fungsi yang pertama adalah fungsi parseInt() dan fungsi yang kedua adalah fungsi parseFloat().
Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk
bilangan bulat / integer.
Dan fungsi parseFloat() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik
berbentuk bilangan pecahan / floating point.
fungsi keterangan contoh
parseInt() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan bulat / integer
a = �2.5�
x = 3 + parseInt(a);
maka nilai variabel x saat ini adalah 5
parseFloat() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan pecahan / floating
point
a = �2.5�
x = 3 + parseFloat(a);
maka nilai variabel x saat ini adalah 5.5
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Konversi Tipe Data</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = 3 + "3.7";
document.write('a = 3 + "3.7"<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = 3 + parseInt("3.7");
document.write('a = 3 + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = 3 + parseFloat("3.7");
document.write('a = 3 + parseFloat("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseInt("2.5") + parseInt("3.7");
document.write('a = parseInt("2.5") + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseFloat("2.5") + parseInt("3.7");
document.write('a = parseFloat("2.5") + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseFloat("2.5") + parseFloat("3.7");
document.write('a = parseFloat("2.5") + parseFloat("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
</SCRIPT>
</BODY>
</HTML>
Mengenal Statemen if
Statemen if digunakan untuk melakukan percabangan dalam melakukan eksekusi sejumlah statement.
Bentuk umum dari statement if yang paling sederhana adalah:
if (kondisi) {
//statementstatement
yang akan dieksekusi bila kondisi benar
}
Statement if tersebut adalah bentuk statement if yang paling sederhana di mana statementstatement
yang
berada di antara penanda kurung kurawal akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true.
Apabila kondisi yang dicek ternyata menghasilkan nilai false, maka statementstatement
yang berada di antara
penanda kurung kurawal tersebut tidak akan dieksekusi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement if</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 8;
document.write("nilai variabel x = " + x + "<BR>");
if (x> 0) {
document.write("x adalah bilangan positif");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement if ... else ....
Statement if ... else ... merupakan pengembangan dari bentuk statement if. Bentuk umum dari statement ini
adalah:
if (kondisi) {
//statementstatement
yang dieksekusi bila kondisi benar
} else {
statementstatement
yang dieksekusi bila kondisi salah
}
Pada statement ini terdapat dua blok kurung kurawal, di mana blok kurung kurawal pertama akan berisi
statementstatement
yang hanya akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true,
sedangkan statemantstatement
pada blok kurung kurawal kedua akan diabaikan.
Apabila ternyata kondisi yang dicek menghasilkan nilai false maka statementstatement
pada blok kurung
kurawal pertama tidak akan dieksekusi melainkan statementstatement
pada kurung kurawal kedua lah yang
akan dieksekusi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement</H1>
<H1>if ... else ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 11;
document.write("nilai variabel x = " + x + "<BR>");
if (x> 0) {
document.write("x adalah bilangan positif");
} else {
document.write("x adalah bilangan negatif");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement if ... else if ...
Statement if ... else if ... memungkinkan terjadinya pengecekan kondisi secara berlapis. Berikut ini adalah
bentuk umum dari statement if ... else if ...
if (kondisi1) {
//statementstatement
bila kondisi 1 benar
} else if (kondisi2) {
//statementstatement
bila kondisi 2 benar
} else {
//statementstatement
bila tsemua kondisi salah
}
Bentuk ini juga dikenal sebagai if bertingkat di mana terdapat beberapa kondisi yang akan dicek. Kondisi
kedua hanya akan dicek apabila kondisi pertama bernilai salah, kondisi ketiga juga hanya akan dicek apabila
kondisi pertama dan kedua bernilai salah, demikian seterusnya proses pengecekan kondisi berlangsung sampai
ditemui suatu kondisi yang bernilai benar. Apabila tidak ditemui satu kondisi pun yang bernilai benar maka
yang akan dieksekusi adalah statementstatement
yang berada pada blok else.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement</H1>
<H1>if ... else if ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 11;
document.write("nilai variabel x = " + x + "<BR>");
if (x > 0) {
document.write("x adalah bilangan positif");
} else if (x < 0) {
document.write("x adalah bilangan negatif");
} else {
document.write("x adalah bilangan nol");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement switch ... case ...
Statement switch ... case ... merupakan suatu bentuk statement alternatif untuk melakukan percabangan.
Statement ini sebenarnya merupakan bentuk ringkas dari statement if ... else if ...
Bentuk umum dari statement switch ... case ... adalah:
switch (variabel) {
case nilai_penguji1: //stamentstatement
pilihan 1
break;
case nilai_penguji2: //stamentstatement
pilihan 2
break;
default : //statementstatement
default
};
Statementstatement
pilihan 1 hanya akan dieksekusi bila didapati nilai variabel yang diuji sama dengan nilai
penguji 1, dan statementstatement
pilihan 2 pun hanya akan dieksekusi bila nilai dari variabel yang diuji sama
dengan nilai penguji 2, demikian seterusnya. Yang perlu diperhatikan di sini adalah di akhir penulisan
statementstatement
pada tiap pilihan harus diakhiri oleh statement break.
Apabila nilai dari variabel yang diuji tidak memiliki kesamaan dengan salah satu sari nilainilai
penguji yang
ada, maka statementstatement
yang akan dieksekusi adalah statementstatement
pada blok default.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>switch ... case ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var hari = 5;
document.write("nilai variabel hari = " +
hari + "<BR>");
document.write("hari yang dipilih: ");
switch(hari) {
case 1: document.write("senin");
break;
case 2: document.write("selasa");
break;
case 3: document.write("rabu");
break;
case 4: document.write("kamis");
break;
case 5: document.write("jumat");
break;
case 6: document.write("sabtu");
break;
case 7: document.write("minggu");
break;
default: document.write("tidak terdaftar");
};
</SCRIPT>
</BODY>
</HTML>
Mengenal Operator ... ? ... : ...
Operator ... ? ... : ... digunakan untuk melakukan suatu proses percabangan sederhana. Operator ini biasa
digunakan untuk menyederhanakan statement if ... else ..., hanya saja pada operator ini hanya mampu
menangani satu statement untuk pengecekan kondisi yang menghasilkan nilai true dan satu statement untuk
pengecekan kondisi yang menghasilkan nilai false.
Bentuk umum dari penggunaan operator ... ? ... : ... adalah:
kondisi ? statement_kondisi_true : statement_kondisi_false;
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operator ... ? ... : ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x, hasil;
x = 2;
document.write("nilai variabel x = " + x + "<BR>");
hasil = (x>0) ? "positif" : �negatif";
document.write("x adalah bilangan " + hasil);
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement while
Statement while merupakan salah satu statement yang bisa digunakan untuk melakukan suatu proses
perulangan / looping. Bentuk umum dari statement while adalah:
while (kondisi) {
//statementstatement
yang diulang
}
Statement-statement yang berada di antara penanda kurung kurawal buka dan kurung kurawal tutup akan diulang berkali-kali
selama kondisi yang dicek menghasilkan nilai true. Proses perulangan akan berakhir ketika
didapati kondisi yang dicek menghasilkan nilai false.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement while ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var a=4;
while(a>1) {
document.write("hello<BR>");
a;
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement do ... while
Selain menggunakan statement while, proses perulangan / looping juga bisa dilakukan dengan menggunakan
statement do ... while. Bentuk umum dari statement do ... while adalah:
do {
//statementstatement
yang diulang
} while (kondisi);
Sedikit berbeda dengan statement while, pada statement do ... while pengecekan kondisi dilakukan di akhir
penanda kurung kurawal. Artinya statementstatement
yang berada di antara penanda kurung kurawal akan
dieksekusi terlebih dahulu baru kemudian dilakukan pengecekkan kondisi. Apabila kondisi yang dicek
menghasilkan nilai true maka statementstatement
tersebut akan dieksekusi kembali secara berulangulang
sampai ditemui hasil pengecekan kondisi yang menghasilkan nilai false.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement do ... while</H1>
<SCRIPT LANGUAGE="JavaScript">
var a=4;
do {
document.write("belajar<BR>");
a;
} while(a>1);
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement for
Statement for juga merupakan salah satu statement yang bisa digunakan untuk melakukan perulangan /
looping. Bentuk umum dari statement for adalah:
for (inisialisasi; kondisi; penaikan_penurunan) {
//statementstatement
yang diulang
}
Statement for banyak digunakan untuk melakukan perulangan di mana banyaknya jumlah perulangan sudah
diketahui dengan pasti sebelumnya. Ini sialisasi dalam konteks for merupakan proses pemberian nilai awal
pada variabel pencacah. Variabel inilah yang akan selalu diuji nilainya pada bagian pengecekan kondisi.
Apabila hasil pengecekan kondisi bernilai benar maka statementstatement
yang berada di antara kurung
kurawal buka dan kurung kurawal tutup akan dieksekusi. Diakhir aksekusi statementstatement
tersebut, nilai
dari variabel pencacah tersebut akan mengalami proses penaikan ataupun penurunan. Setelah itu variabel ini
akan kembali dicek nilainya di bagian kondisi. Dan apabila didapati hasil true dari proses pengecakan tersebut
maka statementstatement
pada blok kurung kurawal akan kembali diulang. Dan demikian seterusnya proses
perulangan ini berlangsung sampai didapati nilai false dari hasil pengecekan kondisi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement for</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
for(a=1;a<7;a++) {
document.write("semangat!!!<BR>");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Message Box
Dalam Java Script terdapat tiga macam message box standar, yaitu alert, confirm, dan prompt. Dalam
JavaScript ketiga message box ini merupakan bagian dari objek window.
Alert
Alert digunakan untuk menampilkan pesan / informasi yang sifatnya penting dan mendesak. Misalkan saja
informasi yang menyatakan bahwa suatu halaman web membutuhkan shcokwave player yang terinstal pada
web browser.
Bentuk umum dari message box alert adalah:
window.alert(pesan);
Untuk lebih jelasnya dapat mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>ALERT</H1>
<SCRIPT LANGUAGE="JavaScript">
window.alert("JavaScript memang hebat");
</SCRIPT>
</BODY>
</HTML>
Confirm
Confirm digunakan untuk meminta konfirmasi dari pengunjung web. Nilai yang mampu ditampung oleh
message box ini adalah nilai true atau false. Kedua nilai ini dihasilkan dari penekanan tombol Ok atau Cancel.
Penekanan tombol Ok akan menghasilkan nilai true sedangkan penekanan tombol Cancel akan menghasilkan
tombol false.
Bentuk umum dari message box confirm adalah:
window.confirm(pertanyaan);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>CONFIRM</H1>
<SCRIPT LANGUAGE="JavaScript">
var komentar;
komentar = window.confirm("Apakah Anda vegetarian?");
if (komentar) {
document.write("Anda seorang vegetarian");
} else {
document.write("Anda bukan seorang vegetarian");
}
</SCRIPT>
</BODY>
</HTML>
Prompt
Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh penunjung web.
Bentuk umum dari message box prompt adalah:
window.prompt(pesan, nilai_default);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>PROMPT</H1>
<SCRIPT LANGUAGE="JavaScript">
var nama;
nama = window.prompt("Masukkan nama Anda", "Mbah Boedy");
document.write("Selamat Datang " + nama);
</SCRIPT>
</BODY>
</HTML>
Java Script merupakan bahasa pemrograman yang dieksekusi di sisi klien atau yang biasa dikenal dengan istilah client side programming di mana suatu kode program akan dikirimkan ke klien dan dieksekusi / dijalankan oleh web browser dan bukannya dieksekusi di web server.
Dalam implementasinya, suatu kode program Java Script akan disisipkan pada suatu dokumen HTML dengan
menggunakan pasangan tag <SCRIPT> dan </SCRIPT> di atribut LANGUAGE dari tag <SCRIPT> akan
diberi nilai JavaScript.
<SCRIPT LANGUAGE=�JavaScript�>
...
...
...
</SCRIPT>
Dalam menuliskan kode program Java Script ada beberapa hal yang perlu diperhatikan:
1. Java Script merupakan bahasa pemrograman yang bersifat case sensitive, artinya Java Script akan
membedakan penggunaan huruf besar dan huruf kecil. �DOCUMENT� akan lain artinya dengan
�document� ataupun �Document�.
2. Setiap statement / pernyataan dalam kode program Java Script selalu diakhiri dengan karakter �;� (titik
koma / semicolon).
Mencatak Teks
Dalam Java Script perintah yang digunakan untuk mencetak suatu teks pada dokumen HTML adalah
document.write(�pesannya�).
Untuk lebih jelasnya bisa melihat contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<H1>Aksara Jawa</H1>");
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>
Memberi Komentar
Dalam menuliskan kode program adakalanya dibutuhkan untuk menuliskan suatu komentar ataupun
keterangan berkenaan dengan kode program tersebut, oleh karenanya dibutuhkan suatu mekanisme penulisan
komentar. Komentar itu sendiri akan diabaikan dan tidak akan dieksekusi / dijalankan oleh web browser.
Terdapat dua cara untuk menyertakan komentar dalam Java Script:
1. Menggunakan penanda //
Penanda // digunakan untuk menuliskan komentar dalam satu baris
2. Mengunakan pasangan penanda /* dan */
Pasangan penanda /* dan */ digunakan untuk menuliskan komentar yang lebih dari satu baris
Untuk lebih jelasnya bisa melihat contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//ini adalah komentar dalam satu baris
document.write("<H1>Belajar Java Script itu menyenangkan</H1>");
/* ini adalah komentar
dengan jumlah baris
lebih dari satu
*/
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>
Tipe Data dan Deklarasi Variabel
Dalam Java Script terdapat tiga macam tipe data utama, yaitu tipe data String (kumpulan karakter), tipe data
bilangan / numerik, dan tipe data logika / boolean. Pada tipe data boolean akan mengenal dua buah nilai yaitu
true dan false.
Pendeklarasian variabel dalam Java Script ditandai dengan penggunaan kata kunci var dan diikuti dengan
nama variabel. Tipe data dari suatu variabel ditentukan oleh nilai yang diisikan ke dalam variabel tersebut dan
bukannya dideklarasikan secara eksplisit. Untuk lebih jelasnya perhatikan contoh berikut ini:
<SCRIPT LANGUAGE=�JavaScript��>
var kota = �bandung�; // deklarasi variabel bernama kota bertipe data string
var gaji = 0; // deklarasi variabel bernama gaji bertipe data integer
var ipk = 2.75; // deklarasi variabel bernama ipk bertipe data float
var status_cekal = false; // deklarasi variabel bernama status_cekal bertipe data boolean
</SCRIPT>
Operator Aritmatika
Operator aritmatika adalah operator yang digunakan untuk menangani /mengoperasikan suatu nilai bertipe
data numerik.
Berikut ini adalah daftar tipe data numerik:
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Aritmatika</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, c;
a = 7; b = 4; c = 0;
document.write("nilai variabel a = " + a +"<BR>");
document.write("nilai variabel b = " + b +"<BR>");
c = a + b;
document.write("a + b = " + c + "<BR>");
c = a b;
document.write("a b
= " + c + "<BR>");
c = a * b;
document.write("a * b = " + c + "<BR>");
c = a / b;
document.write("a / b = " + c + "<BR>");
c = a % b;
document.write("a % b = " + c + "<BR>");
a++;
document.write("a++ maka nilai a sekarang adalah " + a + "<BR>");
a;
document.write("bmaka
nilai a sekarang adalah " + b);
</SCRIPT>
</BODY>
</HTML>
Operator Pemberian Nilai / Assignment
Operator penugasan / assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke
dalam suatu variabel.
Berikut ini adalah daftar operator penugasan:
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pemberian Nilai / Assignment</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = 7;
document.write("a = 7 <BR>");
document.write("nilai variabel a = " + a + "<BR>");
a += 3;
document.write("a += 3<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a =
5;
document.write("a =
5<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a *= 4;
document.write("a *= 4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a /= 2;
document.write("a /= 2<BR>");
document.write("nilai variabel a = " + a + "<BR>");
a %= 4;
document.write("a %= 4<BR>");
document.write("nilai variabel a = " + a + "<BR>");
</SCRIPT>
</BODY>
</HTML>
Operator Pembanding / Comparison
Operator pembanding adalah operator yang digunakan untuk membandingkan dua buah nilai dan akan
menghasilkan nilai bertipe data boolean yaitu benar(true) atau salah (false).
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Pembandingan Nilai / Comparison</H1>
<SCRIPT LANGUAGE="JavaScript">
var a, b, x;
a = 7; b = 15;
document.write("nilai variabel a = " + a + "<BR>");
document.write("nilai variabel a = " + b + "<BR><BR>");
x = (a==b);
document.write("x = (a==b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>b);
document.write("x = (a > b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a<b);
document.write("x = (a < b)");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a>=b);
document.write("x = (a > =b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (a<=b);
document.write("x = (a < =b)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
</SCRIPT>
</BODY>
</HTML>
Operator Logika
Operator logika adalah operator yang digunakan untuk mengoperasikan nilainilai
bertipe data boolean yang
bernilai true atau false.
Berikut ini adalah daftar operator logika
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Logika</H1>
<SCRIPT LANGUAGE="JavaScript">
var x;
x = (7>4) && (5<9);
document.write("x = (7 > 4) && (5 < 9)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = (9>12) || (8<3);
document.write("x = (9 > 12) || (8 < 3)<BR>");
document.write("nilai variabel x = " + x + "<BR><BR>");
x = !(9<4);
document.write("x = !(9 < 4)<BR>");
document.write("nilai variabel x = " + x);
</SCRIPT>
</BODY>
</HTML>
Operasi Penggabungan String
Seperti pernah dijelaskan sebelumnya bahwa nilai bertipe data string merupakan nilai yang terdiri dari
sekumpulan karakter sehingga membentuk suatu nilai berupa kata ataupun kalimat tertentu. Untuk nilainilai
bertipe data string terdapat suatu operator yang berguna untuk menggabungkan nilai string. Operator ini
dikenal dengan nama operator penggabuungan string yang dituliskan dengan penanda +.
Apabila suatu nilai bertipe data string dijumlahkan dengan nilai bertipe data numerik maka secara otomatis
nilai bertipe data numerik tersebut akan dikonversi menjadi tipe data string sehingga pada akhirnya akan
dihasilkan suatu nilai bertipe data string.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operasi Penggabungan String</H1>
<SCRIPT LANGUAGE="JavaScript">
var x;
x = "aksara" + "jawa";
document.write('x = "aksara" + "jawa"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x += "kuno";
document.write('x += "kuno"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x = "25" + "30";
document.write('x = "25" + "30"<BR>');
document.write('nilai variabel x = "' + x + '"<BR><BR>');
x = "15" + 7;
document.write('x = "15" + 7<BR>');
document.write('nilai variabel x = "' + x + '"');
</SCRIPT>
</BODY>
</HTML>
Konversi Tipe Data
Dalam pemrograman java script dimungkinkan untuk melakukan konversi / pengubahan tipe data. Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik. Ada dua fungsi yang bisa digunakan untuk mengkonversi suatu nilai bertipe data string ke numerik, Fungsi yang pertama adalah fungsi parseInt() dan fungsi yang kedua adalah fungsi parseFloat().
Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk
bilangan bulat / integer.
Dan fungsi parseFloat() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik
berbentuk bilangan pecahan / floating point.
fungsi keterangan contoh
parseInt() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan bulat / integer
a = �2.5�
x = 3 + parseInt(a);
maka nilai variabel x saat ini adalah 5
parseFloat() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan pecahan / floating
point
a = �2.5�
x = 3 + parseFloat(a);
maka nilai variabel x saat ini adalah 5.5
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Konversi Tipe Data</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = 3 + "3.7";
document.write('a = 3 + "3.7"<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = 3 + parseInt("3.7");
document.write('a = 3 + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = 3 + parseFloat("3.7");
document.write('a = 3 + parseFloat("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseInt("2.5") + parseInt("3.7");
document.write('a = parseInt("2.5") + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseFloat("2.5") + parseInt("3.7");
document.write('a = parseFloat("2.5") + parseInt("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
a = parseFloat("2.5") + parseFloat("3.7");
document.write('a = parseFloat("2.5") + parseFloat("3.7")<BR>');
document.write("nilai variabel a = " + a + "<BR><BR>");
</SCRIPT>
</BODY>
</HTML>
Mengenal Statemen if
Statemen if digunakan untuk melakukan percabangan dalam melakukan eksekusi sejumlah statement.
Bentuk umum dari statement if yang paling sederhana adalah:
if (kondisi) {
//statementstatement
yang akan dieksekusi bila kondisi benar
}
Statement if tersebut adalah bentuk statement if yang paling sederhana di mana statementstatement
yang
berada di antara penanda kurung kurawal akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true.
Apabila kondisi yang dicek ternyata menghasilkan nilai false, maka statementstatement
yang berada di antara
penanda kurung kurawal tersebut tidak akan dieksekusi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement if</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 8;
document.write("nilai variabel x = " + x + "<BR>");
if (x> 0) {
document.write("x adalah bilangan positif");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement if ... else ....
Statement if ... else ... merupakan pengembangan dari bentuk statement if. Bentuk umum dari statement ini
adalah:
if (kondisi) {
//statementstatement
yang dieksekusi bila kondisi benar
} else {
statementstatement
yang dieksekusi bila kondisi salah
}
Pada statement ini terdapat dua blok kurung kurawal, di mana blok kurung kurawal pertama akan berisi
statementstatement
yang hanya akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true,
sedangkan statemantstatement
pada blok kurung kurawal kedua akan diabaikan.
Apabila ternyata kondisi yang dicek menghasilkan nilai false maka statementstatement
pada blok kurung
kurawal pertama tidak akan dieksekusi melainkan statementstatement
pada kurung kurawal kedua lah yang
akan dieksekusi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement</H1>
<H1>if ... else ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 11;
document.write("nilai variabel x = " + x + "<BR>");
if (x> 0) {
document.write("x adalah bilangan positif");
} else {
document.write("x adalah bilangan negatif");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement if ... else if ...
Statement if ... else if ... memungkinkan terjadinya pengecekan kondisi secara berlapis. Berikut ini adalah
bentuk umum dari statement if ... else if ...
if (kondisi1) {
//statementstatement
bila kondisi 1 benar
} else if (kondisi2) {
//statementstatement
bila kondisi 2 benar
} else {
//statementstatement
bila tsemua kondisi salah
}
Bentuk ini juga dikenal sebagai if bertingkat di mana terdapat beberapa kondisi yang akan dicek. Kondisi
kedua hanya akan dicek apabila kondisi pertama bernilai salah, kondisi ketiga juga hanya akan dicek apabila
kondisi pertama dan kedua bernilai salah, demikian seterusnya proses pengecekan kondisi berlangsung sampai
ditemui suatu kondisi yang bernilai benar. Apabila tidak ditemui satu kondisi pun yang bernilai benar maka
yang akan dieksekusi adalah statementstatement
yang berada pada blok else.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement</H1>
<H1>if ... else if ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x = 11;
document.write("nilai variabel x = " + x + "<BR>");
if (x > 0) {
document.write("x adalah bilangan positif");
} else if (x < 0) {
document.write("x adalah bilangan negatif");
} else {
document.write("x adalah bilangan nol");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement switch ... case ...
Statement switch ... case ... merupakan suatu bentuk statement alternatif untuk melakukan percabangan.
Statement ini sebenarnya merupakan bentuk ringkas dari statement if ... else if ...
Bentuk umum dari statement switch ... case ... adalah:
switch (variabel) {
case nilai_penguji1: //stamentstatement
pilihan 1
break;
case nilai_penguji2: //stamentstatement
pilihan 2
break;
default : //statementstatement
default
};
Statementstatement
pilihan 1 hanya akan dieksekusi bila didapati nilai variabel yang diuji sama dengan nilai
penguji 1, dan statementstatement
pilihan 2 pun hanya akan dieksekusi bila nilai dari variabel yang diuji sama
dengan nilai penguji 2, demikian seterusnya. Yang perlu diperhatikan di sini adalah di akhir penulisan
statementstatement
pada tiap pilihan harus diakhiri oleh statement break.
Apabila nilai dari variabel yang diuji tidak memiliki kesamaan dengan salah satu sari nilainilai
penguji yang
ada, maka statementstatement
yang akan dieksekusi adalah statementstatement
pada blok default.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>switch ... case ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var hari = 5;
document.write("nilai variabel hari = " +
hari + "<BR>");
document.write("hari yang dipilih: ");
switch(hari) {
case 1: document.write("senin");
break;
case 2: document.write("selasa");
break;
case 3: document.write("rabu");
break;
case 4: document.write("kamis");
break;
case 5: document.write("jumat");
break;
case 6: document.write("sabtu");
break;
case 7: document.write("minggu");
break;
default: document.write("tidak terdaftar");
};
</SCRIPT>
</BODY>
</HTML>
Mengenal Operator ... ? ... : ...
Operator ... ? ... : ... digunakan untuk melakukan suatu proses percabangan sederhana. Operator ini biasa
digunakan untuk menyederhanakan statement if ... else ..., hanya saja pada operator ini hanya mampu
menangani satu statement untuk pengecekan kondisi yang menghasilkan nilai true dan satu statement untuk
pengecekan kondisi yang menghasilkan nilai false.
Bentuk umum dari penggunaan operator ... ? ... : ... adalah:
kondisi ? statement_kondisi_true : statement_kondisi_false;
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Operator ... ? ... : ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var x, hasil;
x = 2;
document.write("nilai variabel x = " + x + "<BR>");
hasil = (x>0) ? "positif" : �negatif";
document.write("x adalah bilangan " + hasil);
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement while
Statement while merupakan salah satu statement yang bisa digunakan untuk melakukan suatu proses
perulangan / looping. Bentuk umum dari statement while adalah:
while (kondisi) {
//statementstatement
yang diulang
}
Statement-statement yang berada di antara penanda kurung kurawal buka dan kurung kurawal tutup akan diulang berkali-kali
selama kondisi yang dicek menghasilkan nilai true. Proses perulangan akan berakhir ketika
didapati kondisi yang dicek menghasilkan nilai false.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement while ...</H1>
<SCRIPT LANGUAGE="JavaScript">
var a=4;
while(a>1) {
document.write("hello<BR>");
a;
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement do ... while
Selain menggunakan statement while, proses perulangan / looping juga bisa dilakukan dengan menggunakan
statement do ... while. Bentuk umum dari statement do ... while adalah:
do {
//statementstatement
yang diulang
} while (kondisi);
Sedikit berbeda dengan statement while, pada statement do ... while pengecekan kondisi dilakukan di akhir
penanda kurung kurawal. Artinya statementstatement
yang berada di antara penanda kurung kurawal akan
dieksekusi terlebih dahulu baru kemudian dilakukan pengecekkan kondisi. Apabila kondisi yang dicek
menghasilkan nilai true maka statementstatement
tersebut akan dieksekusi kembali secara berulangulang
sampai ditemui hasil pengecekan kondisi yang menghasilkan nilai false.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement do ... while</H1>
<SCRIPT LANGUAGE="JavaScript">
var a=4;
do {
document.write("belajar<BR>");
a;
} while(a>1);
</SCRIPT>
</BODY>
</HTML>
Mengenal Statement for
Statement for juga merupakan salah satu statement yang bisa digunakan untuk melakukan perulangan /
looping. Bentuk umum dari statement for adalah:
for (inisialisasi; kondisi; penaikan_penurunan) {
//statementstatement
yang diulang
}
Statement for banyak digunakan untuk melakukan perulangan di mana banyaknya jumlah perulangan sudah
diketahui dengan pasti sebelumnya. Ini sialisasi dalam konteks for merupakan proses pemberian nilai awal
pada variabel pencacah. Variabel inilah yang akan selalu diuji nilainya pada bagian pengecekan kondisi.
Apabila hasil pengecekan kondisi bernilai benar maka statementstatement
yang berada di antara kurung
kurawal buka dan kurung kurawal tutup akan dieksekusi. Diakhir aksekusi statementstatement
tersebut, nilai
dari variabel pencacah tersebut akan mengalami proses penaikan ataupun penurunan. Setelah itu variabel ini
akan kembali dicek nilainya di bagian kondisi. Dan apabila didapati hasil true dari proses pengecakan tersebut
maka statementstatement
pada blok kurung kurawal akan kembali diulang. Dan demikian seterusnya proses
perulangan ini berlangsung sampai didapati nilai false dari hasil pengecekan kondisi.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>Statement for</H1>
<SCRIPT LANGUAGE="JavaScript">
var a;
for(a=1;a<7;a++) {
document.write("semangat!!!<BR>");
}
</SCRIPT>
</BODY>
</HTML>
Mengenal Message Box
Dalam Java Script terdapat tiga macam message box standar, yaitu alert, confirm, dan prompt. Dalam
JavaScript ketiga message box ini merupakan bagian dari objek window.
Alert
Alert digunakan untuk menampilkan pesan / informasi yang sifatnya penting dan mendesak. Misalkan saja
informasi yang menyatakan bahwa suatu halaman web membutuhkan shcokwave player yang terinstal pada
web browser.
Bentuk umum dari message box alert adalah:
window.alert(pesan);
Untuk lebih jelasnya dapat mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>ALERT</H1>
<SCRIPT LANGUAGE="JavaScript">
window.alert("JavaScript memang hebat");
</SCRIPT>
</BODY>
</HTML>
Confirm
Confirm digunakan untuk meminta konfirmasi dari pengunjung web. Nilai yang mampu ditampung oleh
message box ini adalah nilai true atau false. Kedua nilai ini dihasilkan dari penekanan tombol Ok atau Cancel.
Penekanan tombol Ok akan menghasilkan nilai true sedangkan penekanan tombol Cancel akan menghasilkan
tombol false.
Bentuk umum dari message box confirm adalah:
window.confirm(pertanyaan);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>CONFIRM</H1>
<SCRIPT LANGUAGE="JavaScript">
var komentar;
komentar = window.confirm("Apakah Anda vegetarian?");
if (komentar) {
document.write("Anda seorang vegetarian");
} else {
document.write("Anda bukan seorang vegetarian");
}
</SCRIPT>
</BODY>
</HTML>
Prompt
Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh penunjung web.
Bentuk umum dari message box prompt adalah:
window.prompt(pesan, nilai_default);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>PROMPT</H1>
<SCRIPT LANGUAGE="JavaScript">
var nama;
nama = window.prompt("Masukkan nama Anda", "Mbah Boedy");
document.write("Selamat Datang " + nama);
</SCRIPT>
</BODY>
</HTML>
Minggu, 28 Maret 2010
CSS
Implementasi CSS pada Background
Mengatur Warna Latar
Untuk mengatur warna latar pada suatu dokumen HTML, selain menggunakan atribut BGCOLOR pada tag <BODY>, ternyata dapat juga diatur dengan menggunakan atribut BACKGROUNDCOLOR milik CSS. Selain itu, atribut BACKGROUNDCOLOR juga bisa digunakan untuk mengatur warna latar pada suatu header ataupun paragraf.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUNDCOLOR:
AQUA;}
H1 { BACKGROUNDCOLOR:
RED; }
H2 { BACKGROUNDCOLOR:
YELLOW;}
P { BACKGROUNDCOLOR:
pink; }
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 warna merah</H1>
<H2>Header 2 warna kuning</H2>
<P>
BIntang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
</P>
</BODY>
</HTML>
Menggunakan Gambar sebagai Background
Selain menggunakan atribut BACKGROUND pada tag <BODY>, pengaturan gambar sebagai latar belakang / background juga bisa dilakukan dengan memanfaatkan CSS yaitu dengan menggunakan atribut BACKGROUNDMAGE.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
}
</STYLE>
</HEAD>
<HTML>
Posisi gambar pada background juga bisa diatur dengan menggunakan atribut BACKGROUNDPOSITION. Adapun nilai yang bisa diberikan pada atribut BACKGROUNDPOSISITION adalah top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
NOREPEAT;
BACKGROUNDPOSITION:
TOP RIGHT;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"><H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS pada posisi kanan atas
</H1> </FONT>
</BODY>
</HTML>
<BODY>
<FONT COLOR="AQUA"> <H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS</H1> </FONT>
</BODY>
</HTML>
CSS juga mampu menjadikan suatu gambar yang dijadikan background untuk ditampilkan secara berulang dalam posisi vertikal maupun horisontal. Hal ini dimungkinkan dengan memberi nilai REPEATX ataupun REPEATY pada atribut BACKGROUNDREPEAT. Nilai REPEATX
akan menjadikan penempatan suatu gambar background berulang secara horisontal, dan nilai REPEATY akan menjadikan penempatan suatu gambar background berulang secara vertikal.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
REPEATY;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"> <H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal</H1> </FONT>
</BODY>
</HTML>
Mengatur Warna Latar
Untuk mengatur warna latar pada suatu dokumen HTML, selain menggunakan atribut BGCOLOR pada tag <BODY>, ternyata dapat juga diatur dengan menggunakan atribut BACKGROUNDCOLOR milik CSS. Selain itu, atribut BACKGROUNDCOLOR juga bisa digunakan untuk mengatur warna latar pada suatu header ataupun paragraf.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUNDCOLOR:
AQUA;}
H1 { BACKGROUNDCOLOR:
RED; }
H2 { BACKGROUNDCOLOR:
YELLOW;}
P { BACKGROUNDCOLOR:
pink; }
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 warna merah</H1>
<H2>Header 2 warna kuning</H2>
<P>
BIntang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
</P>
</BODY>
</HTML>
Menggunakan Gambar sebagai Background
Selain menggunakan atribut BACKGROUND pada tag <BODY>, pengaturan gambar sebagai latar belakang / background juga bisa dilakukan dengan memanfaatkan CSS yaitu dengan menggunakan atribut BACKGROUNDMAGE.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
}
</STYLE>
</HEAD>
<HTML>
Posisi gambar pada background juga bisa diatur dengan menggunakan atribut BACKGROUNDPOSITION. Adapun nilai yang bisa diberikan pada atribut BACKGROUNDPOSISITION adalah top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
NOREPEAT;
BACKGROUNDPOSITION:
TOP RIGHT;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"><H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS pada posisi kanan atas
</H1> </FONT>
</BODY>
</HTML>
<BODY>
<FONT COLOR="AQUA"> <H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS</H1> </FONT>
</BODY>
</HTML>
CSS juga mampu menjadikan suatu gambar yang dijadikan background untuk ditampilkan secara berulang dalam posisi vertikal maupun horisontal. Hal ini dimungkinkan dengan memberi nilai REPEATX ataupun REPEATY pada atribut BACKGROUNDREPEAT. Nilai REPEATX
akan menjadikan penempatan suatu gambar background berulang secara horisontal, dan nilai REPEATY akan menjadikan penempatan suatu gambar background berulang secara vertikal.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
REPEATY;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"> <H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal</H1> </FONT>
</BODY>
</HTML>
Jumat, 05 Maret 2010
FRAME
Frame digunakan untuk membagi jendela web browser menjadi beberapa bagian yang lebih kecil. Untuk membuat frame pada dokumen HTML menggunakan tag <FRAMESET> dan <FRAME>. Frame nantinya berperan sebagai bingkai yang akan diisi dengan dokumendokumen
HTML yang lain. Untuk membagi jendela browser dalam beberapa kolom dapat diatur melalui atribut COLS pada tag <FRAMESET>. Untuk menampilkan dokumen HTML pada suatu frame dapat diatur melalui atribut SRC pada tag <FRAMESET>.
nama file: halaman_a.html
<HTML>
<HEAD>
<TITLE>Halaman A</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman A</H1>
</BODY>
</HTML>
nama file: halaman_b.html
<HTML>
<HEAD>
<TITLE>Halaman B</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman B</H1>
</BODY>
</HTML>
nama file: frameku.html
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
<FRAME SRC="halaman_a.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</HTML>
Selain membagi jendela web browser dalam beberapa kolom, frame juga dapat membagi jendela web browser dalam beberapa baris dan gabungan keduanya (baris dan kolom). Untuk membagi jendela web browser dalam beberapa baris dapat diatur dengan menggunakan atibut ROWS pada tag<FRAMESET>.
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SRC="halaman_a.html">
<FRAMESET COLS="40%,*">
<FRAME SRC="halaman_b.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</FRAMESET>
</HTML>
Secara default frame akan memiliki bingkai pembatas, untuk menghilangkan bingkai pembatas
tersebut dapat diatur dengan memberikan nilai 0 pada atribut BORDER dari tag <FRAMESET>.
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*" BORDER="0">
<FRAME SRC="halaman_a.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</HTML
Suatu frame juga bisa diberi nama dengan mengatur atribut NAME pada tag <FRAME>. Pemberian nama pada frame ditujukan untuk melakukan link antar frame yang berbeda.
nama file: halaman_a.html
<HTML>
<HEAD>
<TITLE>Halaman A</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman A</H1>
<A HREF="halaman_b.html"
TARGET="kanan">halaman b</A>
<BR>
<A HREF="halaman_c.html"
TARGET="kanan">halaman c</A>
</BODY>
</HTML>
nama file: halaman_b.html
<HTML>
<HEAD>
<TITLE>Halaman B</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman B</H1>
</BODY>
</HTML>
nama file: halaman_c.html
<HTML>
<HEAD>
<TITLE>Halaman C</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman C</H1>
</BODY>
</HTML>
nama file: frameku.html
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
<FRAME NAME="kiri" SRC="halaman_b.html">
<FRAME NAME="kanan" SRC="halaman_c.html">
</FRAMESET>
</HTML>
HTML yang lain. Untuk membagi jendela browser dalam beberapa kolom dapat diatur melalui atribut COLS pada tag <FRAMESET>. Untuk menampilkan dokumen HTML pada suatu frame dapat diatur melalui atribut SRC pada tag <FRAMESET>.
nama file: halaman_a.html
<HTML>
<HEAD>
<TITLE>Halaman A</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman A</H1>
</BODY>
</HTML>
nama file: halaman_b.html
<HTML>
<HEAD>
<TITLE>Halaman B</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman B</H1>
</BODY>
</HTML>
nama file: frameku.html
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
<FRAME SRC="halaman_a.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</HTML>
Selain membagi jendela web browser dalam beberapa kolom, frame juga dapat membagi jendela web browser dalam beberapa baris dan gabungan keduanya (baris dan kolom). Untuk membagi jendela web browser dalam beberapa baris dapat diatur dengan menggunakan atibut ROWS pada tag<FRAMESET>.
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SRC="halaman_a.html">
<FRAMESET COLS="40%,*">
<FRAME SRC="halaman_b.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</FRAMESET>
</HTML>
Secara default frame akan memiliki bingkai pembatas, untuk menghilangkan bingkai pembatas
tersebut dapat diatur dengan memberikan nilai 0 pada atribut BORDER dari tag <FRAMESET>.
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*" BORDER="0">
<FRAME SRC="halaman_a.html">
<FRAME SRC="halaman_b.html">
</FRAMESET>
</HTML
Suatu frame juga bisa diberi nama dengan mengatur atribut NAME pada tag <FRAME>. Pemberian nama pada frame ditujukan untuk melakukan link antar frame yang berbeda.
nama file: halaman_a.html
<HTML>
<HEAD>
<TITLE>Halaman A</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman A</H1>
<A HREF="halaman_b.html"
TARGET="kanan">halaman b</A>
<BR>
<A HREF="halaman_c.html"
TARGET="kanan">halaman c</A>
</BODY>
</HTML>
nama file: halaman_b.html
<HTML>
<HEAD>
<TITLE>Halaman B</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman B</H1>
</BODY>
</HTML>
nama file: halaman_c.html
<HTML>
<HEAD>
<TITLE>Halaman C</TITLE>
</HEAD>
<BODY>
<H1>Ini Halaman C</H1>
</BODY>
</HTML>
nama file: frameku.html
<HTML>
<HEAD>
<TITLE>Latihan Frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
<FRAME NAME="kiri" SRC="halaman_b.html">
<FRAME NAME="kanan" SRC="halaman_c.html">
</FRAMESET>
</HTML>
Minggu, 21 Februari 2010
HTML_2
Mengenal Tag <PRE>
Tag <PRE> pada dokumen HTML digunakan untuk melakukan preformat terhadap dokumen HTML. Artinya teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode HTML nya.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<PRE>
Mbah Boedy melakukan pengembaraan
ke Bumi Parahyangan
untuk menambah wawasan dan kesaktian
</PRE>
</BODY>
</HTML>
Mengenal Tag <ACRONYM>
Tag <ACRONYM> pada dokumen HTML digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Mbah Boedy sangat mendukung<BR>
upaya pemberantasan<BR>
<ACRONYM TITLE="Korupsi, Kolusi, dan Nepotisme">KKN</ACRONYM>
</BODY>
</HTML>
Mengenal Tag <FONT>
Pada dokumen HTML, tag <FONT> digunakan untuk mengubah jenis huruf, ukuran huruf, dan mengganti warna huruf. Untuk mengubah jenis huruf diatur dengan menggunakan atribut FACE, untuk mengubah ukuran huruf diatur dengan menggunakan atribut SIZE, dan untuk mengubah warna huruf diatur dengan menggunakan atribut COLOR.
Ukuran huruf terkecil adalah 1 dan ukuran terbesar adalah 7.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Ini tanpa efek FONT<BR>
<FONT FACE="ARIAL" SIZE="5" COLOR="RED">
Ini dengan efek FONT
</FONT>
</BODY>
</HTML>
Menampilkan Karakter Khusus
Beberapa karakter khusus pada dokumen HTML tidak dapat ditampilkan secara langsung pada web browser, contohnya karakter < atau > tidak dapat ditampilkan secara langsung karena karakter tersebut termasuk dalam karakter khusus dalam tag HTML. Untuk itu dibutuhkan cara penulisan yang khusus pula.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6">
©
®
&
×
÷
<
>
½
</FONT>
</BODY>
</HTML>
Mengenal List
Pada dokumen HTML terdapat dua jenis list, yaitu unordered list dan ordered list.
Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran. Untuk membuat suatu unordered list menggunakan tag <UL> sedangkan untuk membuat ordered list menggunakan tag <OL>. Dan untuk mengisikan item pada list menggunakan tag <LI>
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Menu Makanan dengan UL
<UL>
<LI>Bakso</LI>
<LI>Sate</LI>
<LI>Siomay</LI>
</UL><BR>
Menu Minuman dengan OL
<OL>
<LI>ES Jeruk</LI>
<LI>Es Teler</LI>
<LI>Es Campur</LI>
</OL>
</BODY>
</HTML>
Untuk unordered list terdapat beberapa pilihan tipe yang bisa diatur dengan mengubah atribut TYPE pada tag <UL>. Pilihan tipe yang tersedia adalah CIRCLE, DISC, dan SQUARE.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Klasifikasi Hewan
<UL TYPE="CIRCLE">
<LI>Mamalia</LI>
<LI>Reptil</LI>
<LI>Amfibi</LI>
<LI>Aves</LI>
<LI>Insecta</LI>
</UL>
</BODY>
</HTML>
Selain tipe, pada ordered list juga dapat diatur penomoran awalannya yaitu dengan mengatur nilai dari atribut START pada tag <OL>.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Klasifikasi Hewan
<OL TYPE="a" START="3">
<LI>Mamalia</LI>
<LI>Reptil</LI>
<LI>Amfibi</LI>
<LI>Aves</LI>
<LI>Insecta</LI>
</OL>
</BODY>
</HTML>
Mengenal Tag <MARQUEE>
Tag <MARQUEE> digunakan untuk menjadikan suatu teks bergerak berputar. Atribut yang terdapat pada tag <MARQUEE> adalah DIRECTION yang akan mengatur arah gerak text. Nilai yang memungkinkan untuk atribut DIRECTION adalah LEFT, RIGHT, UP, dan DOWN.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7" COLOR="BLUE">
<MARQUEE DIRECTION=�RIGHT�>
Mbah Boedy
</MARQUEE>
</FONT>
</BODY>
</HTML>
Menambahkan Gambar Sebagai Background
Pada dokumen HTML untuk menambahkan gambar pada latar belakang / background dapat dilakukan dengan mengubah nilai dari atribut BACKGROUND pada tag <BODY> sesuai dengan nama file yang ingin dijadikan latar belakang.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BACKGROUND="merapi.jpg">
<FONT COLOR="RED" SIZE="5">
Tempat Bertapa Mbah Marijan
</FONT>
</BODY>
</HTML>
Mengenal Tag <IMG>
Tag <IMG> pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Gambar 1
<IMG SRC="pic1.jpg">
Bunga Matahari
</BODY>
</HTML>
Mengenal Link / Hyperlink
Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halam ke halaman lainnya. Tag yang berperan dalam membuat link adalah tag <A> atau yang biasa dikenal sebagai tag anchor / jangkar. Tag <A> akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang digunakan untuk menentukan halaman tujuan dari suatu link.
<HTML>
<HEAD>
<TITLE>Halaman Pertama</TITLE>
</HEAD>
<BODY>
<H1>Ini adalah halaman pertama</H1>
<A HREF="halaman2.html">Ke Halaman 2</A>
</BODY>
</HTML>
Tag <PRE> pada dokumen HTML digunakan untuk melakukan preformat terhadap dokumen HTML. Artinya teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode HTML nya.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<PRE>
Mbah Boedy melakukan pengembaraan
ke Bumi Parahyangan
untuk menambah wawasan dan kesaktian
</PRE>
</BODY>
</HTML>
Mengenal Tag <ACRONYM>
Tag <ACRONYM> pada dokumen HTML digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Mbah Boedy sangat mendukung<BR>
upaya pemberantasan<BR>
<ACRONYM TITLE="Korupsi, Kolusi, dan Nepotisme">KKN</ACRONYM>
</BODY>
</HTML>
Mengenal Tag <FONT>
Pada dokumen HTML, tag <FONT> digunakan untuk mengubah jenis huruf, ukuran huruf, dan mengganti warna huruf. Untuk mengubah jenis huruf diatur dengan menggunakan atribut FACE, untuk mengubah ukuran huruf diatur dengan menggunakan atribut SIZE, dan untuk mengubah warna huruf diatur dengan menggunakan atribut COLOR.
Ukuran huruf terkecil adalah 1 dan ukuran terbesar adalah 7.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Ini tanpa efek FONT<BR>
<FONT FACE="ARIAL" SIZE="5" COLOR="RED">
Ini dengan efek FONT
</FONT>
</BODY>
</HTML>
Menampilkan Karakter Khusus
Beberapa karakter khusus pada dokumen HTML tidak dapat ditampilkan secara langsung pada web browser, contohnya karakter < atau > tidak dapat ditampilkan secara langsung karena karakter tersebut termasuk dalam karakter khusus dalam tag HTML. Untuk itu dibutuhkan cara penulisan yang khusus pula.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6">
©
®
&
×
÷
<
>
½
</FONT>
</BODY>
</HTML>
Mengenal List
Pada dokumen HTML terdapat dua jenis list, yaitu unordered list dan ordered list.
Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran. Untuk membuat suatu unordered list menggunakan tag <UL> sedangkan untuk membuat ordered list menggunakan tag <OL>. Dan untuk mengisikan item pada list menggunakan tag <LI>
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Menu Makanan dengan UL
<UL>
<LI>Bakso</LI>
<LI>Sate</LI>
<LI>Siomay</LI>
</UL><BR>
Menu Minuman dengan OL
<OL>
<LI>ES Jeruk</LI>
<LI>Es Teler</LI>
<LI>Es Campur</LI>
</OL>
</BODY>
</HTML>
Untuk unordered list terdapat beberapa pilihan tipe yang bisa diatur dengan mengubah atribut TYPE pada tag <UL>. Pilihan tipe yang tersedia adalah CIRCLE, DISC, dan SQUARE.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Klasifikasi Hewan
<UL TYPE="CIRCLE">
<LI>Mamalia</LI>
<LI>Reptil</LI>
<LI>Amfibi</LI>
<LI>Aves</LI>
<LI>Insecta</LI>
</UL>
</BODY>
</HTML>
Selain tipe, pada ordered list juga dapat diatur penomoran awalannya yaitu dengan mengatur nilai dari atribut START pada tag <OL>.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Klasifikasi Hewan
<OL TYPE="a" START="3">
<LI>Mamalia</LI>
<LI>Reptil</LI>
<LI>Amfibi</LI>
<LI>Aves</LI>
<LI>Insecta</LI>
</OL>
</BODY>
</HTML>
Mengenal Tag <MARQUEE>
Tag <MARQUEE> digunakan untuk menjadikan suatu teks bergerak berputar. Atribut yang terdapat pada tag <MARQUEE> adalah DIRECTION yang akan mengatur arah gerak text. Nilai yang memungkinkan untuk atribut DIRECTION adalah LEFT, RIGHT, UP, dan DOWN.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7" COLOR="BLUE">
<MARQUEE DIRECTION=�RIGHT�>
Mbah Boedy
</MARQUEE>
</FONT>
</BODY>
</HTML>
Menambahkan Gambar Sebagai Background
Pada dokumen HTML untuk menambahkan gambar pada latar belakang / background dapat dilakukan dengan mengubah nilai dari atribut BACKGROUND pada tag <BODY> sesuai dengan nama file yang ingin dijadikan latar belakang.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BACKGROUND="merapi.jpg">
<FONT COLOR="RED" SIZE="5">
Tempat Bertapa Mbah Marijan
</FONT>
</BODY>
</HTML>
Mengenal Tag <IMG>
Tag <IMG> pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Gambar 1
<IMG SRC="pic1.jpg">
Bunga Matahari
</BODY>
</HTML>
Mengenal Link / Hyperlink
Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halam ke halaman lainnya. Tag yang berperan dalam membuat link adalah tag <A> atau yang biasa dikenal sebagai tag anchor / jangkar. Tag <A> akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang digunakan untuk menentukan halaman tujuan dari suatu link.
<HTML>
<HEAD>
<TITLE>Halaman Pertama</TITLE>
</HEAD>
<BODY>
<H1>Ini adalah halaman pertama</H1>
<A HREF="halaman2.html">Ke Halaman 2</A>
</BODY>
</HTML>
Minggu, 14 Februari 2010
HTML
langkah awal untuk membuat HTMl
dan digunakan sebagai judul dari browser kita.
Buka notepad kemudian ketikkan seperti di bawah ini.
Ini halaman wb saya yang pertama
· Setiap dokumen HTML harus diawali dengan dan diakhiri dengan
· dan digunakan sebagai informasi tentang dokumen kita.
·
· dan digunakan sebagai isi dari halaman WEB kita.
Membuat garis, paragaf, heading, format text dan bentuknya.
1. Membuat Paragraf
ketik di notepad seperti dibawah ini:
Ini baris pertama
Dan ini baris ke tiga
Kalau ini baris ke empat
·
artinya pindah paragraf atau pindah dua baris
·
artinya pindah baris
2. Membuat Heading
Ketik diantara dan seperti dibawah ini:
Heading Pertama
Heading Kedua
Heading Ketiga
Heading Keempat
Heading Kelima
Heading Keenam
· Terlihat bahwa besarnya tulisan tiap heading berbeda-beda.
3. Format Text dan Bentuknya
Silahkan ketik diantara dan seperti dibawah ini:
Ini halaman web saya
· adalah bentuk, ukuran dan warna text.
· dan adalah text yang ditebalkan.
· dan adalah text yang dimiringkan.
· dan adalah text yang digaris bawahi.
4. Membuat Garis
Ketik diantara dan seperti di bawah ini :
untuk mewarnai tambahkan "color", seperti ini :
Untuk menentukan lebarnya dengan tambahan "width", misalnya ingin warna ungu dengan lebar 500, maka kodenya seperti ini :
Langganan:
Postingan (Atom)
