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>
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 Event
Event adalah kejadian yang terjadi pada suatu halaman web. Kejadian ini bisa bermacammacam,
ada kejadian
penekanan tombol, kejadian pengubahan nilai pada textbox, dan bermacammacam
kejadian lainnya.
Kejadiankejadian
tersebut bisa diarahkan untuk memicu pemanggilan suatu function tertentu. Konsep
pemrograman di mana suatu function dipanggil berdasarkan suatu event tertentu dikenal dengan istilah event
handling programming.
Event onClick
Event onClick merupakan kejadian penekanan tombol mouse (click) pada komponen form. Kejadian ini bisa
berupa penekanan tombol, pemilihan checkbox maupun radio button, dan pemilihan suatu link, serta
penekanan tombol submit ataupun reset.
Pengaturan terhadap event ini dilakukan dengan menuliskan atribut onClick pada tag HTML yang
bersangkutan. Atribut ini dapat diberi nilai berupa nama function yang akan dipicu oleh event tersebut.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function salam() {
window.alert("Selamat Datang\n" + formku.nama.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formku">
<TABLE>
<TR><TD>Nama:</TD><TD><INPUT TYPE="TEXT" NAME="nama"></TD></TR>
<TR><TD></TD><TD><INPUT TYPE="BUTTON" VALUE="Proses" onCLick="salam()"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Dalam dokument HTML untuk membuat suatu tombol bebas (selain tombol submit dan reset) dapat
menggunakan tag <INPUT> dengan menyertakan atribut TYPE yang diberi nilai BUTTON.
Label pada tombol bisa diatur menggunakan atribut VALUE.
Untuk mengakses nilai yang tertampung dalam suatu komponen, yang perlu dilakukan adalah menyebutkan
nama form tempat komponen tersebut berada, selanjutnya baru sebutkan nama komponennya dan diakhiri
dengan kata kunci value. Penyebutan itu dilakukan dengan menyertakan tanda “.” (titik) sebagai pemisah.
Hal ini berlaku juga ketika JavaScript ingin menempatkan nilai yang dihasilkan ke dalam suatu komponen
dalam form HTML.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan(a, b) {
return (a + b);
}f
unction pengurangan(a, b) {
return (ab);
}
function perkalian(a, b) {
return (a * b);
}f
unction pembagian(a, b) {
return (a / b);
}
function sisa_bagi(a, b) {
return (a % b);
}f
unction proses() {
var p, q;
p = parseInt(form_hitung.x.value);
q = parseInt(form_hitung.y.value);
form_hitung.jumlah.value = penjumlahan(p,q);
form_hitung.kurang.value = pengurangan(p,q);
form_hitung.kali.value = perkalian(p,q);
form_hitung.bagi.value = pembagian(p,q);
form_hitung.modulus.value = sisa_bagi(p,q);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Kalkulator Sederhana</H1>
<FORM NAME="form_hitung">
<TABLE>
<TR>
<TD>x = </TD>
<TD><INPUT TYPE="TEXT" NAME="x" SIZE="3"></TD>
</TR>
<TR>
<TD>y = </TD>
<TD><INPUT TYPE="TEXT" NAME="y" SIZE="3"></TD>
</TR>
<TR>
<TD>x + y =</TD>
<TD><INPUT TYPE="TEXT" NAME="jumlah" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x y
=</TD>
<TD><INPUT TYPE="TEXT" NAME="kurang" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x * y =</TD>
<TD><INPUT TYPE="TEXT" NAME="kali" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x / y =</TD>
<TD><INPUT TYPE="TEXT" NAME="bagi" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x % y =</TD>
<TD><INPUT TYPE="TEXT" NAME="modulus" SIZE="3" READONLY></TD>
</TR>
</TABLE>
<INPUT TYPE="BUTTON" VALUE="Hitung" onClick="proses()">
</FORM>
</BODY>
</HTML>
Atribut READONLY yang terdapat pada suatu textbox menjadikan nilai pada textbox tersebut tidak dapat
diubah lewat halaman web browser.
Selain atribut READONLY terdapat atribut lain yaitu atribut DISABLED yang berfungsi untuk menonaktifkan
suatu komponen form.
Tuesday, April 26, 2011
Tuesday, April 19, 2011
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:
operator keterangan contoh penggunaan
+ penjumlahan 3 + 7 menghasilkan nilai 10
2 + 5 menghasilkan nilai 7
pengurangan
9 – 3 menghasilkan nilai 6
6 – 2 menghasilkan nilai 4
* perkalian 2 * 3 menghasilkan nilai 6
4 * 5 menghasilkan nilai 20
/ pembagian 8 / 2 menghasilkan nilai 4
10 / 5 menghasilkan nilai 2
% modulus / sisa
pembagian
8 % 3 menghasilkan nilai 2
7 % 2 menghasilkan nilai 1
++ icrement / penaikan nilai
sebesar 1
x = 5
x ++
maka nilai variabel x saat ini adalah 6
decrement
/ penurunan
nilai sebesar 1
x = 8
x maka
nilai variabel x saat ini adalah 7
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:
operator keterangan contoh
= nilai yang berada di sisi kanan akan
dimasukkan ke variabel di sisi kiri
x = 3
maka nilai variabel x saat ini adalah 3
+= nilai dari variabel yang berada di sisi
kiri akan ditambahkan dengan nilai
yang berada di sisi kanan
x = 5
x += 2
maka nilai variabel x saat ini adalah 7
=
nilai dari variabel yang berada di sisi
kiri akan dikurangkan dengan nilai
yang berada di sisi kanan
x = 6
x =
4
mana nilai variabel x saat ini adalah 2
*= nilai dari variabel yang berada di sisi
kiri akan dikalikan dengan nilai yang
berada di sisi kanan
x = 2
x *= 7
maka nilai variabel x saat ini adalah 14
/= nilai dari variabel yang berada di sisi
kiri akan dibagi dengan nilai yang
berada di sisi kanan
x = 24
x /= 8
maka nilai variabel x saat ini adalah 3
%= nilai dari variabel yang berada di sisi
kiri akan dimoduluskan dengan nilai
yang berada di sisi kanan
x = 7
x %= 3
maka nilai variabel x saat ini adalah 1
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).
Berikut ini adalah daftar operator pembanding / comparison
operator keterangan contoh
== akan menghasilkan nilai true bila kedua nilai yang
dibandingkan memiliki bobot yang sama
x = (4 == 2)
maka nilai variabel x saat ini adalah false
!= akan menghasilkan nilai true bika kedua nilai yang
dibandingkan memiliki bobot berbeda / tidak sama
x = (4 != 2)
maka nilai variabel x saat ini adalah true
> akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
besar dibandingkan nilai kedua (nilai yang berada di
sisi kanan)
x = (4 > 2)
maka nilai variabel x saat ini adalah true
< akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
kecil dibandingkan nilai kedua (nilai yang berada di
sisi kanan)
x = (4 < 2)
maka nilai variabel x saat ini adalah false
>= akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
besar atau sama dengan nilai kedua (nilai yang
berada di sisi kanan)
x = (4 >= 4)
maka nilai variabel x saat ini adalah true
<= akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
kecil atau sama dengan nilai kedua (nilai yang
berada di sisi kanan)
x = (4 <= 8)
maka nilai variabel x saat ini adalah true
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
operator keterangan contoh
&& operator and, operator ini akan menghasilkan nilai
false bila di antara nilainilai
yang dioperasikan
terdapat nilai false
x = (3<7) && (4>7)
maka nilai variabel x saat ini adalah false
|| operator or, operator ini akan menghasilkan nilai true
bila di antara nilainilai
yang dioperasikan terdapat
nilai true
x = (3<7) || (4>7)
maka nilai variabel x saat ini adalah true
! operator not, operator ini akan menghasilkan nilai true
bila nilai yang dioperasikan bernilai false dan akan
menghasilkan nilai false bila nilai yang dioperasikan
bernilai true
x = !(3<7)
maka nilai variabel x saat ini adalah false
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
}
Statementstatement
yang berada di antara penanda kurung kurawal buka dan kurung kurawal tutup akan
diulang berkalikali
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>
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:
operator keterangan contoh penggunaan
+ penjumlahan 3 + 7 menghasilkan nilai 10
2 + 5 menghasilkan nilai 7
pengurangan
9 – 3 menghasilkan nilai 6
6 – 2 menghasilkan nilai 4
* perkalian 2 * 3 menghasilkan nilai 6
4 * 5 menghasilkan nilai 20
/ pembagian 8 / 2 menghasilkan nilai 4
10 / 5 menghasilkan nilai 2
% modulus / sisa
pembagian
8 % 3 menghasilkan nilai 2
7 % 2 menghasilkan nilai 1
++ icrement / penaikan nilai
sebesar 1
x = 5
x ++
maka nilai variabel x saat ini adalah 6
decrement
/ penurunan
nilai sebesar 1
x = 8
x maka
nilai variabel x saat ini adalah 7
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:
operator keterangan contoh
= nilai yang berada di sisi kanan akan
dimasukkan ke variabel di sisi kiri
x = 3
maka nilai variabel x saat ini adalah 3
+= nilai dari variabel yang berada di sisi
kiri akan ditambahkan dengan nilai
yang berada di sisi kanan
x = 5
x += 2
maka nilai variabel x saat ini adalah 7
=
nilai dari variabel yang berada di sisi
kiri akan dikurangkan dengan nilai
yang berada di sisi kanan
x = 6
x =
4
mana nilai variabel x saat ini adalah 2
*= nilai dari variabel yang berada di sisi
kiri akan dikalikan dengan nilai yang
berada di sisi kanan
x = 2
x *= 7
maka nilai variabel x saat ini adalah 14
/= nilai dari variabel yang berada di sisi
kiri akan dibagi dengan nilai yang
berada di sisi kanan
x = 24
x /= 8
maka nilai variabel x saat ini adalah 3
%= nilai dari variabel yang berada di sisi
kiri akan dimoduluskan dengan nilai
yang berada di sisi kanan
x = 7
x %= 3
maka nilai variabel x saat ini adalah 1
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).
Berikut ini adalah daftar operator pembanding / comparison
operator keterangan contoh
== akan menghasilkan nilai true bila kedua nilai yang
dibandingkan memiliki bobot yang sama
x = (4 == 2)
maka nilai variabel x saat ini adalah false
!= akan menghasilkan nilai true bika kedua nilai yang
dibandingkan memiliki bobot berbeda / tidak sama
x = (4 != 2)
maka nilai variabel x saat ini adalah true
> akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
besar dibandingkan nilai kedua (nilai yang berada di
sisi kanan)
x = (4 > 2)
maka nilai variabel x saat ini adalah true
< akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
kecil dibandingkan nilai kedua (nilai yang berada di
sisi kanan)
x = (4 < 2)
maka nilai variabel x saat ini adalah false
>= akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
besar atau sama dengan nilai kedua (nilai yang
berada di sisi kanan)
x = (4 >= 4)
maka nilai variabel x saat ini adalah true
<= akan menghasilkan nilai true apabila nilai pertama
(nilai yang berada di sisi kiri) memiliki bobot lebih
kecil atau sama dengan nilai kedua (nilai yang
berada di sisi kanan)
x = (4 <= 8)
maka nilai variabel x saat ini adalah true
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
operator keterangan contoh
&& operator and, operator ini akan menghasilkan nilai
false bila di antara nilainilai
yang dioperasikan
terdapat nilai false
x = (3<7) && (4>7)
maka nilai variabel x saat ini adalah false
|| operator or, operator ini akan menghasilkan nilai true
bila di antara nilainilai
yang dioperasikan terdapat
nilai true
x = (3<7) || (4>7)
maka nilai variabel x saat ini adalah true
! operator not, operator ini akan menghasilkan nilai true
bila nilai yang dioperasikan bernilai false dan akan
menghasilkan nilai false bila nilai yang dioperasikan
bernilai true
x = !(3<7)
maka nilai variabel x saat ini adalah false
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
}
Statementstatement
yang berada di antara penanda kurung kurawal buka dan kurung kurawal tutup akan
diulang berkalikali
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>
Saturday, March 26, 2011
CSS Part 2
Penggunaan ID dalam CSS
adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkan
akan berlaku untuk keseluruhan penggunaan satu tag tertentu.
enggunaan ID
pada CSS menjadikan implementasi style CSS pada tagtag
HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter “#” dan diikuti dengan ID nya.
contoh code html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:BLUE;
BACKGROUN-DCOLOR:
PINK;}
#dua {TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 Style satu</H1>
<H1 ID="dua">Header1 Style dua</H2>
<P ID="satu">
Paragraf ini menggunakan
style dua looo....
</P>
</BODY>
</HTML>
yang dikeluarkan adalah seperti berikut:
Penggunaan Class dalam CSS
Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara
bersamasama
dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter “.” (karakter titik) dan diikuti dengan nama CLASS
nya.
code htmlnya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:WHITE;
BACKGROUN-DCOLOR:
BLACK;}
.dua { TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 ID satu</H1>
<H1 CLASS="dua">Header1 CLASS dua</H2>
<P ID="satu" CLASS="dua">
Paragraf ini menggunakan
ID satu dan Class dua lhooo..
</P>
</BODY>
</HTML>
keluaran yang dihasilkan:
adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkan
akan berlaku untuk keseluruhan penggunaan satu tag tertentu.
enggunaan ID
pada CSS menjadikan implementasi style CSS pada tagtag
HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter “#” dan diikuti dengan ID nya.
contoh code html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:BLUE;
BACKGROUN-DCOLOR:
PINK;}
#dua {TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 Style satu</H1>
<H1 ID="dua">Header1 Style dua</H2>
<P ID="satu">
Paragraf ini menggunakan
style dua looo....
</P>
</BODY>
</HTML>
yang dikeluarkan adalah seperti berikut:
Penggunaan Class dalam CSS
Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara
bersamasama
dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter “.” (karakter titik) dan diikuti dengan nama CLASS
nya.
code htmlnya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:WHITE;
BACKGROUN-DCOLOR:
BLACK;}
.dua { TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 ID satu</H1>
<H1 CLASS="dua">Header1 CLASS dua</H2>
<P ID="satu" CLASS="dua">
Paragraf ini menggunakan
ID satu dan Class dua lhooo..
</P>
</BODY>
</HTML>
keluaran yang dihasilkan:
- Internal
- Eksternal
Model Pendefinisian Internal yaitu, Model pendefinisian secara internal dilakukan dengan menempatkan definisi style CSS di antara pasangan tag
<STYLE> dan </STYLE> yang ditempatkan di bagian HEAD dari suatu dokuken HTML yang akan
mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contohcontoh
sebelumnya.
contoh:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 STYLE="COLOR:WHITE; BACKGROUND-COLOR:
BLACK; TEXT-DECORATION:
LINE-THROUGH;">
Menggunakan Model Pendefinisian In Line
</H1>
</BODY>
</HTML>
Model Pendefinisian Eksternal, yaitu memungkinkan beberapa file dokumen HTML untuk
menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan
menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS
diberi tag <LINK>. Adapun format lengkap dari tag <LINK> yang digunakan adalah sebagai berikut
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css>
contoh yang disimpan dalam ekstensi .css :
H1.satu {COLOR:GREEN;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
BLUE;
FONT-SIZE:
12pt;}
H1.dua {COLOR:RED;
BACKGROUND-COLOR:
YELLOW;
BORDER-STYLE:
SOLID;
FONT-SIZE:
20pt;}
.html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul Halaman1</TITLE>
</HEAD>
<BODY>
<LINK REL="STYLE-SHEET" TYPE="TEXT/CSS" HREF="gaya.css">
<H1 CLASS="satu">Menggunakan Class satu secara eksternal dari file gaya.css</H1>
<H1 CLASS="dua">Menggunakan Class dua secara eksternal dari file gaya.css</H1>
</BODY>
</HTML>
keluarannya:
<STYLE> dan </STYLE> yang ditempatkan di bagian HEAD dari suatu dokuken HTML yang akan
mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contohcontoh
sebelumnya.
contoh:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 STYLE="COLOR:WHITE; BACKGROUND-COLOR:
BLACK; TEXT-DECORATION:
LINE-THROUGH;">
Menggunakan Model Pendefinisian In Line
</H1>
</BODY>
</HTML>
Model Pendefinisian Eksternal, yaitu memungkinkan beberapa file dokumen HTML untuk
menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan
menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS
diberi tag <LINK>. Adapun format lengkap dari tag <LINK> yang digunakan adalah sebagai berikut
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css>
contoh yang disimpan dalam ekstensi .css :
H1.satu {COLOR:GREEN;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
BLUE;
FONT-SIZE:
12pt;}
H1.dua {COLOR:RED;
BACKGROUND-COLOR:
YELLOW;
BORDER-STYLE:
SOLID;
FONT-SIZE:
20pt;}
.html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul Halaman1</TITLE>
</HEAD>
<BODY>
<LINK REL="STYLE-SHEET" TYPE="TEXT/CSS" HREF="gaya.css">
<H1 CLASS="satu">Menggunakan Class satu secara eksternal dari file gaya.css</H1>
<H1 CLASS="dua">Menggunakan Class dua secara eksternal dari file gaya.css</H1>
</BODY>
</HTML>
keluarannya:
Monday, March 21, 2011
CSS part 1
CSS
CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen
HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa.
syntax penulisan CSS:
<STYLE TYPE=�TEXT/CSS�> dan diakhiri oleh <STYLE>.
Mengatur Warna Latar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:
AQUA;}
H1 { BACKGROUND-COLOR:
RED; }
H2 { BACKGROUND-COLOR:
YELLOW;}
P { BACKGROUND-COLOR:
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>
Mengatur Warna Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 { COLOR:BLUE; }
P { COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1>Berwarna Biru</H1>
<H2>Kondisi Normal</H2>
<P>
Naiknaik
ke PUncak Gunung
Tinggitinggi
Sekali
</P>
</BODY>
</HTML>
Membuat Garis pada Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION:
OVERLINE;}
H2 {TEXT-DECORATION:
UNDERLINE;}
H3 {TEXT-DECORATION:
LINETHROUGH}
P {TEXT-DECORATION:
BLINK;}
</STYLE>
</HEAD>
<BODY>
<H1>Garis Atas</H1>
<H2>Garus Bawah</H2>
<H3>Coretan Tengah</H3>
<P>
CSS Menjadikan halaman web lebih menarik
karena banyak modifikasi yang bisa dilakukan
</P>
</BODY>
</HTML>
Mengatur Tipe Border
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur
tipenya. Hal ini dilakukan dengan mengatur atribut BORDERSTYLE.
Adapun nilai yang bisa diberikan pada
atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan
OUTSET di mana masingmasing
nilai akan menghasilkan border degan tipe yang berbeda.
codeHTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {BORDER-STYLE:
DOTTED;}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Warna Border
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P { BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED; }
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Implementasi CSS pada Margin
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {
BORDER-STYLE:
SOLID;
BORDER-COLOR:
BLUE;
MARGIN-LEFT:
2cm;
MARGIN-TOP:
2.5cm;
}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Tipe List dengan Gambar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
UL {LIST-STYLE-IMAGE:
URL('icon.gif')}
</STYLE>
</HEAD>
<BODY>
Penyanyi Jazz:
<UL>
<LI>Louis Amstrong</LI>
<LI>Diana Krall</LI>
<LI>Norah Jones</LI>
<LI>Dave Koz</LI>
</UL>
</BODY>
</HTML>
CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen
HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa.
syntax penulisan CSS:
<STYLE TYPE=�TEXT/CSS�> dan diakhiri oleh <STYLE>.
Mengatur Warna Latar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:
AQUA;}
H1 { BACKGROUND-COLOR:
RED; }
H2 { BACKGROUND-COLOR:
YELLOW;}
P { BACKGROUND-COLOR:
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>
Mengatur Warna Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 { COLOR:BLUE; }
P { COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1>Berwarna Biru</H1>
<H2>Kondisi Normal</H2>
<P>
Naiknaik
ke PUncak Gunung
Tinggitinggi
Sekali
</P>
</BODY>
</HTML>
Membuat Garis pada Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION:
OVERLINE;}
H2 {TEXT-DECORATION:
UNDERLINE;}
H3 {TEXT-DECORATION:
LINETHROUGH}
P {TEXT-DECORATION:
BLINK;}
</STYLE>
</HEAD>
<BODY>
<H1>Garis Atas</H1>
<H2>Garus Bawah</H2>
<H3>Coretan Tengah</H3>
<P>
CSS Menjadikan halaman web lebih menarik
karena banyak modifikasi yang bisa dilakukan
</P>
</BODY>
</HTML>
Mengatur Tipe Border
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur
tipenya. Hal ini dilakukan dengan mengatur atribut BORDERSTYLE.
Adapun nilai yang bisa diberikan pada
atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan
OUTSET di mana masingmasing
nilai akan menghasilkan border degan tipe yang berbeda.
codeHTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {BORDER-STYLE:
DOTTED;}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Warna Border
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P { BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED; }
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Implementasi CSS pada Margin
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {
BORDER-STYLE:
SOLID;
BORDER-COLOR:
BLUE;
MARGIN-LEFT:
2cm;
MARGIN-TOP:
2.5cm;
}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Tipe List dengan Gambar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
UL {LIST-STYLE-IMAGE:
URL('icon.gif')}
</STYLE>
</HEAD>
<BODY>
Penyanyi Jazz:
<UL>
<LI>Louis Amstrong</LI>
<LI>Diana Krall</LI>
<LI>Norah Jones</LI>
<LI>Dave Koz</LI>
</UL>
</BODY>
</HTML>
Monday, March 14, 2011
Membuat Form Dalam HTML
Dalam halaman web HTML kita juga dapat membuat tampilan form, Tampilan Form hampir sama dengan form yang ada di dalam windows. Contohnya seperti kita memilih properties suatu file atau direktori.
Untuk membuat form, kita harus menggunakan tag <form>
Di dalam form ada beberapa jenis input dalam form yang diawali dengan tag <input> dengan attribut-attribut sebagai berikut :
- Text, digunakan untuk memasukan suatu nilai untuk dikirimkan kepada server, nilai yang dimasukan dapat berupa angka ataupun teks (textbox)
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
NAMA DEPAN:
<INPUT TYPE="TEXT" NAME="FIRSTNAME">
<BR>
NAMA KELUARGA:
<INPUT TYPE="TEXT" NAME="FAMILY">
</FORM>
- Radio, menyediakan beberapa pilihan, hanya dapat memilih satu dari pilihan yang dipilih (Radiobutton)
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
JENIS KELAMIN:<BR>
<INPUT TYPE="RADIO" CHECKED NAME="KELAMIN">PRIA
<BR>
<INPUT TYPE="RADIO" NAME="KELAMIN">WANITA<BR>
- Check Box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih (Checkbox)
Untuk membuat form, kita harus menggunakan tag <form>
Di dalam form ada beberapa jenis input dalam form yang diawali dengan tag <input> dengan attribut-attribut sebagai berikut :
- Text, digunakan untuk memasukan suatu nilai untuk dikirimkan kepada server, nilai yang dimasukan dapat berupa angka ataupun teks (textbox)
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
NAMA DEPAN:
<INPUT TYPE="TEXT" NAME="FIRSTNAME">
<BR>
NAMA KELUARGA:
<INPUT TYPE="TEXT" NAME="FAMILY">
</FORM>
- Radio, menyediakan beberapa pilihan, hanya dapat memilih satu dari pilihan yang dipilih (Radiobutton)
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
JENIS KELAMIN:<BR>
<INPUT TYPE="RADIO" CHECKED NAME="KELAMIN">PRIA
<BR>
<INPUT TYPE="RADIO" NAME="KELAMIN">WANITA<BR>
- Check Box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih (Checkbox)
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
BAHASA YANG DIKUASAI
<INPUT TYPE="CHECKBOX" NAME="C#"C#
<BR>
<INPUT TYPE="CHECKBOX" NAME="java">Java
</FORM>
</BODY>
</HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
BAHASA YANG DIKUASAI
<INPUT TYPE="CHECKBOX" NAME="C#"C#
<BR>
<INPUT TYPE="CHECKBOX" NAME="java">Java
</FORM>
</BODY>
</HTML>
- List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu
syntax : <HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
<SELECT NAME="FOOTBALL"
<OPTION VALUE="MANCHESTER UNITED">MU
<OPTION VALUE="AC MILAN">AC MILAN
<OPTION VALUE="ARSENAL">ARSENAL
<OPTION VALUE="LAZIO">LAZIO
</SELECT>
</FORM>
</BODY>
</HTML>
<HEAD><TITLE>INPUT TEXT</TITLE></HEAD>
<BODY>
<FORM>
<SELECT NAME="FOOTBALL"
<OPTION VALUE="MANCHESTER UNITED">MU
<OPTION VALUE="AC MILAN">AC MILAN
<OPTION VALUE="ARSENAL">ARSENAL
<OPTION VALUE="LAZIO">LAZIO
</SELECT>
</FORM>
</BODY>
</HTML>
Catatan : Untuk membuat List, dibutuhkan tag tambahan yaitu tag <select> dan tag <option>. sedangkan attribut value digunakan untuk memberikan nama pada pilihan tersebut
- Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form, Ada bermacam-macam button
syntax : <HTML>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="KLICK">
</FORM>
</BODY>
</HTML>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="KLICK">
</FORM>
</BODY>
</HTML>
- Submit: digunakan untuk memanggil url, setelah input selesai dimasukan
syntax : <HTML>
<BODY>
<TABLE>
<FORM ACTION="KIRIM.HTML" METHOD="POST">
<H3>FORM INI AKAN MENGIRIM ISI INPUT KE FILE KIRIM.HTML</H3>
<TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
<TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
<TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
<INPUT TYPE="SUBMIT" VALUE="KIRIM">
<INPUT TYPE="RESET" VALUE="HAPUS">
</FORM>
</TABLE>
</BODY>
</HTML>
- Password, digunakan untuk membuat inputan text yang berupa password dengan tampilan password pula
<BODY>
<TABLE>
<FORM ACTION="KIRIM.HTML" METHOD="POST">
<H3>FORM INI AKAN MENGIRIM ISI INPUT KE FILE KIRIM.HTML</H3>
<TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
<TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
<TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
<INPUT TYPE="SUBMIT" VALUE="KIRIM">
<INPUT TYPE="RESET" VALUE="HAPUS">
</FORM>
</TABLE>
</BODY>
</HTML>
- Password, digunakan untuk membuat inputan text yang berupa password dengan tampilan password pula
syntax : <HTML>
<BODY>
<TABLE>
<FORM ACTION="KIRIM.HTML" METHOD="POST">
<H3>FORM INI AKAN MENGIRIM ISI<BR> INPUT KE FILE KIRIM.HTML</H3>
<TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
<TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
<TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
<TR><TD>PASSWORD</TD><TD>:</TD><TD><INPUT TYPE="PASSWORD" NAME="PASS"><BR>
<INPUT TYPE="SUBMIT" VALUE="KIRIM">
<INPUT TYPE="RESET" VALUE="HAPUS">
</FORM>
</TABLE>
</BODY>
</HTML>
<BODY>
<TABLE>
<FORM ACTION="KIRIM.HTML" METHOD="POST">
<H3>FORM INI AKAN MENGIRIM ISI<BR> INPUT KE FILE KIRIM.HTML</H3>
<TR><TD>NAMA</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="NAMA">
<TR><TD>ALAMAT</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="ADDRESS">
<TR><TD>EMAIL</TD><TD>:</TD><TD><INPUT TYPE="TEXT" NAME="EMAIL">
<TR><TD>PASSWORD</TD><TD>:</TD><TD><INPUT TYPE="PASSWORD" NAME="PASS"><BR>
<INPUT TYPE="SUBMIT" VALUE="KIRIM">
<INPUT TYPE="RESET" VALUE="HAPUS">
</FORM>
</TABLE>
</BODY>
</HTML>
Monday, March 7, 2011
Membuat Frame Dalam HTML
Frame merupakan salah satu tag dalam HTML yang berfungsi membagi satu halaman web menjadi beberapa halaman web yang dapat diatur sendiri baik pembagian baris maupun kolom. Frame dapat dibuat oleh tag <frameset> dan diimplementasikan pembagiannya dengan tag <frame>.
contoh syntaxnya : <FRAMESET BORDER=# {[ROWS | COLS]} = {#,[#[,...]]}>
<FRAMESET SRC="url" NAME="nameFrame">
</FRAMESET>
-Attribut src digunakan sebagai sumber halaman web dalam frame tersebut
-Attribut name digunakan untuk memberikan nama pada frame tersebut agar dapat ditunjuk atau ditarget oleh link dan sejenisnya.
-Attribut rows adalah sebagai tanda bahwa pembagian frame berdasarkan baris (vertikal)
-Attribut cols adalah sebagai tanda bahwa pembagian frame berdasarkan kolom (horizontal)
-Pembagian kolom atau baris dapat diimplementasikan berdasarkan persen (50%,65%,40%) atau pembagian rata(*)
Targeting Frame
Setelah kita membuat sebuah frame dan memberikannya nama, halaman dalam frame tersebut dapat ditunjuk oleh link dengan tag <a>.
coontoh : <HTML>
<HEAD>
<TITLE>HAL 1</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 1</H1>
<a href="HALAMAN3.HTML" target="pinggir">coba klick</a>
</BODY>
</HTML>
Koding ini berfungsi untuk menunjuk frame bernama Pinggir dengan halaman web halaman3.html yang telah dibuat sebelumnya.
Catatan : Dengan asumsi Frame bernama pinggir telah dibuat.
contoh syntaxnya : <FRAMESET BORDER=# {[ROWS | COLS]} = {#,[#[,...]]}>
<FRAMESET SRC="url" NAME="nameFrame">
</FRAMESET>
-Attribut src digunakan sebagai sumber halaman web dalam frame tersebut
-Attribut name digunakan untuk memberikan nama pada frame tersebut agar dapat ditunjuk atau ditarget oleh link dan sejenisnya.
-Attribut rows adalah sebagai tanda bahwa pembagian frame berdasarkan baris (vertikal)
-Attribut cols adalah sebagai tanda bahwa pembagian frame berdasarkan kolom (horizontal)
-Pembagian kolom atau baris dapat diimplementasikan berdasarkan persen (50%,65%,40%) atau pembagian rata(*)
Targeting Frame
Setelah kita membuat sebuah frame dan memberikannya nama, halaman dalam frame tersebut dapat ditunjuk oleh link dengan tag <a>.
coontoh : <HTML>
<HEAD>
<TITLE>HAL 1</TITLE>
</HEAD>
<BODY>
<H1>INI HALAMAN 1</H1>
<a href="HALAMAN3.HTML" target="pinggir">coba klick</a>
</BODY>
</HTML>
Koding ini berfungsi untuk menunjuk frame bernama Pinggir dengan halaman web halaman3.html yang telah dibuat sebelumnya.
Catatan : Dengan asumsi Frame bernama pinggir telah dibuat.
Sunday, February 27, 2011
Membuat Table dalam HMTL
Untuk membuat tabel dalam HTML, seperti sebelumnya dibutuhkan sebuah tag untuk menyusun sebuah tabel. Berikut merupakan tag-tag untuk membangun sebuah tabel.
<table> = tag utama untuk membuat sebuah tabel
<caption> = tag untuk membuat judul tabel
<tr> = tag untuk membuat baris dalam tabel
<th> = membuat heading dalam sebuah tabel
<td> = mengisi data dalam sebuah tabel sekaligus membuat kolom secara otomatis ketika data terisi
dalam tag <table> sendiri pun terdapat beberapa atribut pelengkap:
<bgcolor> = mengganti warna latar belakang tabel
<border> = mengatur ukuran bingkai pada tabel
<cellpadding> = mengatur ukuran kotak dimana data disimpan
<cellspacing> = mengatur jarak antar kotak data
<width> = mengatur ukuran lebar tabel
<height> = mengatur ukuran tinggi tabel
<align> dan <valign> = mengatur kerataan data(horizontal serta vertikal)
<rowspan> = menggabungkan 2 atau lebih baris menjadi satu
<colspan> = menggabungkan 2 atau lebih kolom menjadi satu
<table> = tag utama untuk membuat sebuah tabel
<caption> = tag untuk membuat judul tabel
<tr> = tag untuk membuat baris dalam tabel
<th> = membuat heading dalam sebuah tabel
<td> = mengisi data dalam sebuah tabel sekaligus membuat kolom secara otomatis ketika data terisi
dalam tag <table> sendiri pun terdapat beberapa atribut pelengkap:
<bgcolor> = mengganti warna latar belakang tabel
<border> = mengatur ukuran bingkai pada tabel
<cellpadding> = mengatur ukuran kotak dimana data disimpan
<cellspacing> = mengatur jarak antar kotak data
<width> = mengatur ukuran lebar tabel
<height> = mengatur ukuran tinggi tabel
<align> dan <valign> = mengatur kerataan data(horizontal serta vertikal)
<rowspan> = menggabungkan 2 atau lebih baris menjadi satu
<colspan> = menggabungkan 2 atau lebih kolom menjadi satu
Sunday, February 20, 2011
Dasar - Dasar Dalam Pemrograman HTML
HTML merupakan bahasa pemograman web yang paling dasar dan yang paling mudah untuk dipelajari.
HTML sendiri merupakan kepanjangan dari Hyper Text Markup Language. Web yang didesain dari bahasa HTML sendiri merupakan web yang bersifat statis. Berikut merupakan tag - tag dasar dalam HTML.
<HTML> = merupakan Tag utama dari HTML yang merupakan penampung dari tag -tag lainnya
<HEAD> = Tag yang berfungsi untuk membuat judul (dengan tag <TITLE>)dan memberikan keterangan lainnya
<BODY> = Tag yang berisikan coding utama dari web yang akan didesain.
contoh : <HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Bla Bla Bla
</BODY>
</HTML>
Mengubah Background Color
menggunakan attribut bgcolor dalam tag Body
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BGCOLOR="aqua">
Ini Isinya :)
</BODY>
</HTML>
Tag Tag dasar dalam HTML
<br> = berfungsi untuk membuat baris kosong / blank.
<p> dan <div> = berfungsi untuk membuat tampilan paragraf dalam suatu kumpulan teks.
<h> = merupakan tag heading yang akan membuat default font berubah berdasarkan heading tertentu
tag <h> dimulai dari yang terbesar (<h1>) sampai ukuran yang terkecil (<h6>)
<hr> = Tag yang berfungsi untuk membuat garis horizontal.
<sub> = memberikan efek subscript pada sebuah teks
<sup> = memberikan efek superscript pada sebuah teks
<tt> = memberikan efek mesin ketik pada sebuah teks. Tampilan mesin ketik
<del> = memberikan efek coretan pada sebuah teks. Efek strikethrought
<pre> = membuat tampilan teks sama seperti default tulisan dalam kode HTML nya
<acronym> = memberikan keterangan tambahan terhadap tulisan ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE
HTML sendiri merupakan kepanjangan dari Hyper Text Markup Language. Web yang didesain dari bahasa HTML sendiri merupakan web yang bersifat statis. Berikut merupakan tag - tag dasar dalam HTML.
<HTML> = merupakan Tag utama dari HTML yang merupakan penampung dari tag -tag lainnya
<HEAD> = Tag yang berfungsi untuk membuat judul (dengan tag <TITLE>)dan memberikan keterangan lainnya
<BODY> = Tag yang berisikan coding utama dari web yang akan didesain.
contoh : <HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Bla Bla Bla
</BODY>
</HTML>
Mengubah Background Color
menggunakan attribut bgcolor dalam tag Body
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BGCOLOR="aqua">
Ini Isinya :)
</BODY>
</HTML>
Tag Tag dasar dalam HTML
<br> = berfungsi untuk membuat baris kosong / blank.
<p> dan <div> = berfungsi untuk membuat tampilan paragraf dalam suatu kumpulan teks.
<h> = merupakan tag heading yang akan membuat default font berubah berdasarkan heading tertentu
tag <h> dimulai dari yang terbesar (<h1>) sampai ukuran yang terkecil (<h6>)
<hr> = Tag yang berfungsi untuk membuat garis horizontal.
<sub> = memberikan efek subscript pada sebuah teks
<sup> = memberikan efek superscript pada sebuah teks
<tt> = memberikan efek mesin ketik pada sebuah teks. Tampilan mesin ketik
<del> = memberikan efek coretan pada sebuah teks. Efek strikethrought
<pre> = membuat tampilan teks sama seperti default tulisan dalam kode HTML nya
<acronym> = memberikan keterangan tambahan terhadap tulisan ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE
Sunday, February 13, 2011
Mebuat Bullet Numbering dan menyisipkan gambar dalam HTML
1Dalam HTML, kita juga dapat membuat format bullet and numbering seperti halnya dalam MS Word. Membuatnya tidaklah sulit namun dibutuhkan ketelitian.
contoh :
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
maka hasil yang akan terbentuk di web page akan
1. a
2. b
3. c
4. d
Untuk Bullet hampir sama dengan numbering, hanya saja ada sedikit perbedaan dalam penulisan kode
contoh :
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
maka hasilnya akan terlihat
• ini bullet satu
• ini bullet lagi
• yang ini juga bullet
Selain bullet and numbering kita juga dapat menyisipkan gambar ke dalam web page kita dengan kode berikut :
<img src="cat.jpg">
img src merupakan kode untuk meyisipkan gambar. Sedangkan cat.jpg adalh nama file gambar yang akan dimasukan.
Jika gambar berada dal suatu folder, dapat ditulis
<img src="./image/cat.jpg">
kata image menunjukan alamat dari sebuah folder
contoh :
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
maka hasil yang akan terbentuk di web page akan
1. a
2. b
3. c
4. d
Untuk Bullet hampir sama dengan numbering, hanya saja ada sedikit perbedaan dalam penulisan kode
contoh :
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
maka hasilnya akan terlihat
• ini bullet satu
• ini bullet lagi
• yang ini juga bullet
Selain bullet and numbering kita juga dapat menyisipkan gambar ke dalam web page kita dengan kode berikut :
<img src="cat.jpg">
img src merupakan kode untuk meyisipkan gambar. Sedangkan cat.jpg adalh nama file gambar yang akan dimasukan.
Jika gambar berada dal suatu folder, dapat ditulis
<img src="./image/cat.jpg">
kata image menunjukan alamat dari sebuah folder
Subscribe to:
Posts (Atom)