Kata
Pengantar
Assalamu’alaikum warahmatullahi wabarakatuh.
Segala puji dan syukur saya ucapkan karna saya telah
menyelesaikan tugas tepat waktu. Tuhan Semesta alam atas segala rahmat yang di
berikannya, serta hidayah yang tidak bisa terkira besarnya, sehingga saya dapat
menyelesaikan makalah tentang JAVASCRIPT.
Dalam menyusun
makalah ini, saya memperoleh banyak bantuan dari berbagai pihak beserta sumber,
karena itu saya berterima kasih atas bantuan yang telah di berikan sebesar-besarnya kepada:
teman-teman sekalian yang telah memberikan tenaga, ilmu, dan kepercayaan yang
telah diberikan. Dengan teman teman saya berharap mendapatkan kesuksesan dalam
mengerjakan makalah ini, semoga semua ini bisa memberikan kebahagiaan kepada saya dan menuntun saya
pada langkah yang lebih baik lagi.
Saya mengharapkan isi dari makalah ini bebas dari kekurangan
dan kesalahan, namun selalu ada yang kurang. Karena itu, saya berharap
teman-teman sekalian memberikan kritik dan saran yang membangun kepada saya
agar makalah ini dapat lebih baik lagi. Saya berharap makalah ini dapat
dipergunakan kembali dengan baik.
Variabel Dalam Java Script
Pengeritan Java script
Dalam bahasa pemograman, variabel
adalah ‘penampung’ sebuah nilai. Tergantung dengan ‘nilai’ dari variabel
tersebut, sebuah variabel di dalam JavaScript dapat bertipe Angka (Number),
String, Boolean, atau yang lainnya.
Tidak seperti bahasa pemograman desktop
seperti C++ dan Visual Basic, di dalam JavaScript
kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel
di dalam JavaScript dapat berisi nilai apapun (tipe data apapun), dan dapat
diubah menjadi tipe lain sepanjang program. Jenis pemograman seperti ini
dikenal juga dengan Typeless Programming Language.
Salah satu bahasa pemograman yang juga
berjenis Typeless Programming Language adalah PHP.
Aturan Penamaan Variabel JavaScript
- Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda
dollar ($)
- Karakter kedua dan seterusnya bisa ditambahkan dengan huruf, angka, underscore
(_) atau tanda dollar
($).
Cara
Membuat Variabel JavaScript
Walaupun
kita tidak perlu menyebutkan jenis tipe data dari suatu variabel, namun kita
tetap harus mendeklarasikan variabel di dalam
JavaScript. Cara membuat variabel di dalam JavaScript di
bedakan menjadi 2, yakni dengan menggunakan keyword var, dan tanpa var.
Jika menggunakan kata kunci
var, berikut adalah contoh
penulisannya:
<script>
var a;
var b, c, d;
var e; var f;
var g=12;
var h="Saya Sedang Belajar JavaScript di Duniailkom";
</script>
Pada 2 baris terakhir saya membuat variabel,
sekaligus memberikan nilai ke dalam variabel tersebut.
Cara kedua untuk membuat variabel adalah
tanpa menggunakan keyword var, seperti berikut ini:
<script>
a;
b=12;
c=" Saya Sedang Belajar JavaScript di Duniailkom";
</script>
Pembuatan variabel tanpa menggunakan keyword
var memang lebih cepat, akan tetapi tidak disarankan.
Walaupun variabel yang dideklarasikan tanpa keyword var akan
tetap berfungsi sebagaimana mestinya seperti variabel dengan var,
namun JavaScript ‘menyimpan’ variabel tersebut dengan cara
yang berbeda. Salah satu perbedaannya adalah tentang variabel scope
(yang akan kita bahas setelah ini). Sedapat mungkin kita selalu membuat
variabel menggunakan keyword var.
Jangkauan
Variabel (Variabel Scope) dalam JavaScript
Jangkauan Variabel (atau Variabel
Scope) adalah konsep tentang pembatasan akses dari sebuah variabel.
Yaitu pada bagian mana sebuah variabel masih bisa diakses.
Sebuah variabel jika dideklarasikan (baik
dengan keyword var ataupun tanpa var),
akan bersifat global, atau dikenal dengan istilah global
variable. Sebuah variabel akan menjadi global variabel sepanjang
variabel tersebut di deklarasikan di luar fungsi.
Jika sebuah variabel di deklarasikan di dalam
fungsi, maka variabel tersebut hanya akan bisa diakses di dalam fungsi
tersebut, atau bersifat lokal (dikenal juga dengan local variable).
Apabila kita membuat 2 variabel dengan nama
yang sama sebagai global variabel, dan juga local variable
di dalam sebuah fungsi, maka local variable akan memiliki prioritas
yang lebih tinggi dibandingkan global variabel.
Berikut adalah contoh efek konsep global variable dan local
variable dalam
JavaScript:
<!DOCTYPE
html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Belajar
JavaScript</title>
<script>
var
nilai = "global";
function
test() {
var nilai = "lokal";
var nilai_lokal = "belajarjavascript";
tanpa_var = "no_scope"; //akan
menjadi global variabel!!
console.log(nilai);
}
test();
// print: lokal
console.log(nilai);
// print: global
console.log(tanpa_var);
//print: no_scope (bisa diakses)
console.log(nilai_lokal);
//error, karena nilai_lokal adalah lokal variabel
</script>
</head>
<body>
<h1>Belajar
JavaScript</h1>
<p>
Saya sedang belajar JavaScript </p>
</body>
</html>
Jenis
dan Pengertian Tipe data dalam JavaScript
Tipe data dalam JavaScript dibedakan menjadi
2 kelompok, yakni tipe data dasar (primitif) dan tipe
data objek.
Tipe data dasar terdiri dari tipe data angka,
tipe data text (string), dan tipe data boolean.
Tipe data null dan undefined juga merupakan
tipe data dasar, namun memiliki jenis tersendiri.
Selain ke-5 tipe data dasar tersebut, tipe
data lain yang ada di dalam JavaScript adalah tipe data objek. Contoh tipe data objek
adalah tipe data tanggal (date), array, dan fungsi.
Saya akan membahas masing-masing jenis tipe data ini secara mendetail dalam
beberapa tutorial berikutnya.
Konsep
Objek pada Tipe Data Dasar JavaScript
Walaupun disebut tipe data dasar, tipe data angka,
text (string), dan boolean di dalam JavaScript
berprilaku ‘seolah-olah’ sebagai objek. Dimana setiap variabel
yang berisikan tipe data, akan memiliki method (atau fungsi) yang ‘melekat’
kepada variabel tersebut.
Dalam bahasa pemograman jenis prosedural, setiap tipe data dapat
disebut ‘berdiri’ sendiri. Untuk menjalankan beberapa perintah, kita
menggunakan fungsi yang menjadikan variabel tipe data sebagai inputan untuk
fungsi tersebut.
Contohnya, untuk mencari panjang
sebuah string di dalam PHP, kita menggunakan fungsi strlen. Jika $a
adalah sebuah variabel bertipe String,
maka untuk mencari panjang dari variabel $a adalah dengan strlen($a). Dan untuk membuat karakter
string menjadi huruf besar, kita menggunakan fungsi strtoupper ($a).
Berikut adalah contoh penulisan
fungsi strlen dan strtoupper dalam PHP:
|
<?php
$a =
"Saya Sedang Belajar JavaScript di duniailkom.com";
echo strlen($a);
//48
echo strtoupper($a);
//SAYA SEDANG BELAJAR JAVASCRIPT DI DUNIAILKOM.COM
?>
|
Contoh diatas adalah penggunaan
fungsi di dalam pemograman prosedural PHP. Tetapi karena JavaScript
berbasis objek, konsepnya akan sedikit berbeda.
Di dalam JavaScript, walaupun juga memiliki fungsi bawaan untuk membantu
kita dalam membuat kode program, namun kebanyakan fungsi dasar ‘melekat’
kedalam variabel, atau di dalam istilah pemograman objek: setiap variabel
akan memiliki ‘method’.
Cara pemanggilan method dari variabel di dalam JavaScript adalah dengan menambahkan tanda
‘titik’. Misalkan a variabel dengan tipe data string yang berisi sebuah kalimat. Untuk mencari panjang dari sting a, kita memanggil method dengan cara: a.
length. Dan untuk menampilkan karakter dalam variabel a menjadi
huruf besar, ditulis dengan a.toUpperCase()
Berikut adalah contoh penggunaan
method length dan toUpperCase dalam JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Belajar JavaScript</title>
<script>
a = "Saya Sedang Belajar JavaScript
";
console.log(a.length);
console.log(a.toUpperCase());
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript </p>
</body>
</html>
OBJEK JAVASCRIPT
Objek Array
(Array Object)
Array adalah
suatu variable yang dapat memuat beberapa nilai secara berurutan atau seri.
Artinya variable yang dideklarasikan sebagai array isinya tidak satu. Berikut
adalah pendeklarasian untuk array.
nama = new Array(3)
Pernyataan
diatas menunjukan bahwa variabel nama memiliki 3 elemen. Ketiga elemen tersebut
akan memiliki nilai masing-masing 0, 1, 2. Nilai pertama = 0. Untuk mengisikan
ketiga elemen tersebut kita dapat melakukan dengan cara :
nama[0] =”Dian”
nama[1]
=”Andri”
nama[2]=”Irawan”
Selain cara
diatas kita juga bisa mendeklarasikan array sekaligus dengan mengisikan
elemen-elemennya.
nama = new
Array(”Dian”,”Andri”,”Irawan”)
Maka hasilnya seperti dibawah ini :
nama yang ke 1 [0] isinya adalah
”Dian”
nama yang ke 2
[1] isinya adalah ”Andri”
nama yang ke 3
[2] isinya adalah ”Irawan”
Contoh
Program JavaScript
|
<HTML>
<HEAD>
<TITLE> LAtihan Objek Array</TITLE>
<BODY>
<h3>Latihan Objek Array I</H3>
Nama pada data ke 3 adalah :
<SCRIPT
LANGUAGE="JavaScript">
<!-- Memyembunyikan kode dari
browser non-js
function cobaarray()
{
nama = new
Array("Dian","Andri","Irawan");
document.write(nama[2]);
}
// akhir dari penyembunyian -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
cobaarray();
</SCRIPT>
</BODY>
</HTML>
|
Contoh
Program JavaScript
|
<HTML>
<HEAD>
<TITLE> LAtihan Objek Array</TITLE>
<BODY>
<h3>Latihan Objek Array II</H3>
Pemanggilan data Array dengan Perintah Perulangan
For<BR>
<SCRIPT LANGUAGE="JavaScript">
<!-- Memyembunyikan kode dari browser non-js
var nilai = new Array(3);
nilai[0]="A";
nilai[1]="B";
nilai[2]="C";
for (a=0;a<3;++a)
{
document.writeln("<B>Nilai ke "+ [a+1] +" :
"+nilai[a]+"<BR>");
}
// akhir dari penyembunyian -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</BODY>
</HTML>
|
|
|
Objek Tanggal ( Date Object)
Objek ini
digunakan untuk memanipulasi tanggal dan waktu pada JavaScript. Untuk
pendeklarasiannya adalah sebagi berikut :
lama = new
Date()
pernyataan
diatas menyatakan bahwa variabel lama mengandung unsur tanggal dan waktu.
Metode-metode
untuk Objek Date
Metode
|
Kegunaan
|
getDate()
|
Menghasilkan tanggal (integer) mulai 1 – 31.
|
getDay()
|
Menghasilkan hari(integer) mulai 0-6. Minggu = 0, Senin
= 1,...............
|
getMonth()
|
Menghasilkan
bulan(integer) mulai 0-11. Januari=0, Feb=1,......
|
getFullYear()
|
Menampilkan tahun menjadi 4 digit
|
getHours()
|
Menghasilkan jam mulai 0-23
|
getMinutes()
|
Menghasilkan menit mulai 0-59
|
getSeconds()
|
Menghasilkan detik mulai 0-59
|
Contoh
Program JavaScript
|
<HTML>
<HEAD>
<TITLE> LAtihan Objek Date</TITLE>
<BODY bgcolor="lightblue">
<h3 align="center">Latihan Objek
Date/Tanggal</H3>
<SCRIPT LANGUAGE="JavaScript">
<!-- Memyembunyikan kode dari browser non-js
var hari = new
Array("Senin","Selasa","Rabu","Kamis",
"Jumat","Sabtu","Minggu");
var bulan = new
Array("Januari","Februari","Maret","April",
"Mei","Juni","Juli","Agustus",
"September","Oktober","November","Desember");
var t = new Date();
var hari_ini=hari[t.getDay()-1];
var tanggal=t.getDate();
var bulan_ini=bulan[t.getMonth()];
var tahun=t.getYear();
var jam =t.getHours();
var menit =t.getMinutes();
var detik =t.getSeconds();
document.write("<font size=5
face=arial>");
document.write("<b><center>Sekarang
adalah hari :"+hari_ini+",tanggal : "+ tanggal +" "+
bulan_ini +" " +tahun);
document.write("<hr
width=700>");
document.write("</font>");
document.write("<font size=3
face=arial>");
document.write("<b><center>Jam
sekarang = "+ jam +":"+ menit+":"+detik);
document.write("</font>");
// akhir dari penyembunyian -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</BODY>
</HTML>
|
Objek Math
Math digunakan
untuk menangani perhitungan matematis yang rumit. Bentuk penulisan :
Math.metode(nilai)
Metode Untuk
Objek Math
Metode
|
Keterangan
|
abs(a)
|
Nilai absolut dari a
|
acos(a)
|
Nilai arc-kosinus dari a
|
asin(a)
|
Nilai arc-sinus dari a
|
atan(a)
|
Nilai arc-tan dari a
|
ceil(a)
|
Membulatkan nilai ke integer diatasnya
|
cos(a)
|
Nilai kosinus dari a
|
exp(a)
|
Nilai E pangkat a
|
log(a)
|
Nilai logaritma dari a
|
max(a,d)
|
Nilai terbesar dari a dan d
|
min(a,d)
|
Nilai terkecil dari a dan d
|
pow(a,d)
|
Nilai dari a pangkat d
|
random(a)
|
Nilai acak antara 0 dan 1
|
round(a)
|
Membulatkan nilai a ke integer terdekat
|
sqrt(a)
|
Nilai akar dari kuadrat a
|
sin(a)
|
Nilai sinus dari a
|
tan(a)
|
Nilai tangen dari a
|
Contoh
Program JavaScript
|
<HTML>
<HEAD>
<TITLE> LAtihan Objek Math></TITLE>
<BODY>
<h3>Latihan Dengan Objek Math</h3>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var a=10;
var b=5;
besar=Math.max(a,b);
document.write("antara " +
a + " dan "+ b +" lebih besar
"+besar+"<br>");
pangkat=Math.pow(b,a);
document.write(b+ " pangkat
"+ a +" adalah "+pangkat+"<br>");
var ran;
ran = Math.round(Math.random()*50000);
document.write("Anda adalah
pengunjung yang ke " + ran + ".<br>");
var akar;
akar =Math.sqrt(ran);
document.write ("Akar dari
" + ran + " adalah "+akar);
// End -->
</SCRIPT>
</BODY>
</HTML>
|
Objek String
String adalah
suatu objek yang merupakan kumpulan dari elemen karakter-karakter. Dalam Javascript
string atau karakter harus diapit dengan tanda petik ganda(“) atau tanda petik
tunggal(‘).
Contoh
pendeklarasian Objek String :
Nama = “Shafana
Vevica”
Panjang =
Nama,length; // Panjang akan berisi 14
Length adalah
property yang sering digunakan dalam objek string yang digunakan Untuk
mengetahui banyaknya karakter dalam suatu string.
Objek String
juga memiliki method yang dapat digunakan untuk memanipulasi string tersebut. Adapun
Method yang dapat digunakan meliputi :
Method
|
Fungsi
|
big()
|
Tercetak lebih besar
|
blink()
|
Efek berkedip aktif pada
browerNetscape
|
bold()
|
Tercetak tebal
|
charAt(n)
|
Mengambil karakter ke –n dari
string. Index string dimulai dari 0
|
fixed()
|
Tercetak fixed-pitch
|
fontcolor(‘warna’)
|
Tercetak sesuai warna yang didefinisikan
|
indexOf(‘char’)
|
Mengambil nilai indeks dari suatu
karakter
|
italic()
|
Tercetak miring
|
link(‘url’)
|
Menjadikan string hyperlink
|
small()
|
Tercetak lebih kecil
|
strike()
|
Tercetak dengan coretan
|
sub()
|
Tercetak subscript
|
substring(a,b)
|
Mengambil karakter dari posisi a sampai b-1
|
sup()
|
Tercetak superscript
|
toLowerCase()
|
Tercetak huruf kecil
|
toUpperCase()
|
Tercetak huruf besar
|
split(‘’)
|
Menjadikan string diuraikan/dipisahkan berdasarkan
tanda (‘’). Hasil dari split akan dihasilkan sebuah array dengan indeks 0
untuk string ke 1 dan seterusnya.
|
Contoh
Program JavaScript
|
<HTML>
<BODY BGCOLOR="lightblue">
<H3>Latihan Objek String</H3>
<SCRIPT LANGUAGE="Javascript">
nama ="Shafana Vevica";
panjang=nama.length;
n=nama.substring(1,4);
besar=nama.toUpperCase()
namakulink=nama.link('shafa.html');
document.writeln('Namaku adalah = '+
nama +'<BR>');
document.writeln('Panjang namaku
adalah '+ panjang + ' karakter <BR>');
document.writeln('method BIG = '+ nama.big()
+'<BR>');
document.writeln('method SMALL = '+ nama.small()
+'<BR>');
document.writeln('method SUB = '+ nama.sub()
+'<BR>');
document.writeln('method SUP = '+ nama.sup() +'<BR>');
document.writeln('method BOLD = '+ nama.bold()
+'<BR>');
document.writeln('method ITALIC = '+ nama.italics()
+'<BR>');
document.writeln('method FONTCOLOR = '+
nama.fontcolor('red') +'<BR>');
document.writeln('method LOWERCASE = '+nama.toLowerCase() +'<BR>');
document.writeln('method UPPERCASE = '+ besar
+'<BR>');
document.writeln('method SUBSTRING = '+ n +'<BR>');
document.writeln('method STRIKE = '+ nama.strike()
+'<BR>');
document.writeln('method CharAT = '+ nama.charAt(3)
+'<BR>');
document.writeln('method Link = '+ namakulink
+'<BR>');
document.writeln('Index Huruf c = '+
nama.indexOf("c") +'<BR>');
awal=nama.indexOf('V');
akhir=nama.length;
document.writeln('Kata Yang Tersisa = '+
nama.substring(awal,akhir) +'<BR>');
</SCRIPT>
</BODY>
</HTML>
|
Objek Document
Objek ini
digunakan untuk mengakses informasi mengenai dokumen HTML, tampilan output dan
memanipulasinya.
Property dari
objek document meliputi :
Property
|
Fungsi
|
bgColor
|
Memberikan warna latar belakang
|
fgColor
|
Memberikan warna foreground atau
warna huruf
|
link[]
|
Mengakses objek anchor/link(dapat
digunakan nama objek anchor/link)
|
linkColor=warna
|
Memberikan warna link
|
alinkColor=warna
|
Memberikan warna pada active link
|
vlinkColor=warna
|
Memberikan warna pada visited link
|
title=judul window
|
Memberikan judul/title window
|
image[]
|
Mengakses objek image(dapat
digunakan nama objek anchor/link)
|
forms[]
|
Mengakses objek form(dapat
digunakan nama objek form)
|
Method dari objek document meliputi
:
Method
|
Fungsi
|
open()
|
Menciptakan/membuka document HTML
|
close()
|
Mengakhiri document HTML
|
write(output)
|
Memberikan output ke browser
|
writeln(output)
|
Memberikan output ke browser
dengan menyertakan perpindahan baris
|
Khusus untuk output ke browser ada
beberapa hal yang perlu diperhatikan :
- Diisi dengan string(“) atau (‘)
- Dapat diberikan tag HTML
- Dapat
digunakan untuk menampilkan isi dari variable
- Terdapat karakter spesial :
\b = untuk backspace
\f
= untuk form feed
\n = untuk baris baru
\r = untuk carriage return
\t = untuk tab
Contoh
Program JavaScript
|
<HTML>
<BODY>
<H3>Latihan Objek Document</H3><hr>
Dengan perintah ini maka teks dalam
dokumen ini akan berwarna putih<BR>
<SCRIPT LANGUAGE="Javascript">
nama="w3";
document.bgColor="blue";
document.fgColor="white";
document.title="Belajar objek Document";
document.linkColor="red";
document.vlinkColor="green";
document.alinkColor="white";
namakulink=nama.link('w3.html');
document.writeln('Warna Link = '+ namakulink +'<BR>');
</SCRIPT>
</BODY>
</HTML>
|
Objek Window
Objek window merupakan objek
tertinggi dalam objek Javascript. Objek ini
digunakan untuk memanipulasi tampilan jendela dari document HTML.
Property pada
Objek window
Property
|
Fungsi
|
length
|
Mengetahui jumlah frame pada
window
|
location.href
|
Mengakses objek location untuk
melakukan redirect atau berpindah ke alamat tertentu.
|
Status=nilai_status
|
Memberikan nilai status window
|
Metode-metode untuk Objek window
Method
|
Fungsi
|
alert(pesan)
|
Memunculkan messagebox sebuah
pesan kesalahan
|
confirm(pesan)
|
Memunculkan pesan konfirmasi.
Method ini akan menghasilkan dua nilai kembalian yaitu true untuk Ok dan
false untuk Cancel
|
prompt(pesan,nilai default)
|
Memunculkan pesan yang menunggu
sebuah input
|
close()
|
Menutup jendela aktif
|
open(url|file,windowname ,feature)
|
Membuka jendela baru dengan feature meliputi :
toolbar=yes|no
mengaktifkan toolbar
status=yes|no
mengaktifkan window status
menubar=yes|no
mengaktifkan menubar
scrollbars=yes|no
mengaktifkan scrollbar
resizable=yes|no jendela resizeable
width = ukuran lebar jendela
height = ukuran tinggi jendela
|
print()
|
Membuka jendela dialog print
|
Contoh
Program JavaScript
|
<HTML>
<BODY>
<H3>Latihan Objek Window</H3><hr>
<SCRIPT LANGUAGE="Javascript">
window.status="Welcome";
window.alert=("Selamat Datang");
angka=window.prompt("Inputkan Angka ?",0);
document.write("Angka vaforit anda adalah
=<strong>" +angka+ "</strong><br>");
tampung=window.confirm("jenis kelamin anda Pria
?");
if(tampung)
{
document.write("Boleh Kenalan donk");
}
else
{
document.write("Ok dech");
}
window.close();
</SCRIPT>
</BODY>
</HTML>
|
Contoh
penggunaan perintah window.open dan window.location untuk membuka halaman web
lain.
Contoh
Program JavaScript
|
<HTML>
<BODY>
<CENTER><H3>Latihan Objek
Document</H3><hr>
Membuka Web Page dengan Perintah Window.Open dan
Window.Location
</CENTER>
<SCRIPT LANGUAGE="Javascript">
function konek1()
{
window.open("utsb.HTML");
}
function konek2()
{
window.location="kunci_jawaban UTS.HTML";
}
</SCRIPT>
<FORM METHOD="post">
<P><CENTER>
<INPUT TYPE="button" VALUE="Kunci
Jawaban UTS A" ONCLICK="konek1()">
<INPUT TYPE="button" VALUE="Kunci
Jawaban UTS B" ONCLICK="konek2()">
</FORM></CENTER>
</BODY>
</HTML>
|
Contoh penggunaan objek window.location.href untuk membuka halaman web yang
lain.
Contoh
Program JavaScript
|
<HTML>
<BODY>
<CENTER><H3>Latihan Objek
Document</H3><hr>
Membuka Web Page dengan Perintah Window.Location.href
</CENTER>
<SCRIPT LANGUAGE="Javascript">
function konek1()
{
if(document.pilihan.pilih.options[0].selected)
{
window.location.href="latobjekradio.HTML";
}
else if
(document.pilihan.pilih.options[1].selected)
{
window.location.href="latobjekselect.HTML";
}
else if
(document.pilihan.pilih.options[2].selected)
{
window.location.href="latobjekteksarea.HTML";
}
return true;
}
function konek2()
{
var pilihint;
var pilihstr;
pilihint=document.pilihan.pilih.selectedIndex;
pilihstr=document.pilihan.pilih.options[pilihint].text;
document.pilihan.pilihteks.value=" Go To " +
pilihstr + "!" ;
}
</SCRIPT>
<CENTER>
<FORM NAME="pilihan">
<B>MENU PILIHAN DENGAN TOMBOL</B>
<P><SELECT NAME="pilih" ONCHANGE="konek2()"
MULTIPLE SIZE="3">
<OPTION>Latihan
Objek Radio</OPTION>
<OPTION>Latihan
Objek Select</OPTION>
<OPTION>Latihan
Objek Teks Area</OPTION>
</SELECT>
</P>
<P><BR>
<INPUT TYPE="button"
name="pilihteks" value"" size="40"
maxlength="40">
</P>
<P>
<INPUT TYPE="button"
NAME="Gobutton" VALUE="Goo!!"
ONCLICK="konek1()">
</P>
</FORM></CENTER>
</BODY>
</HTML>
|
Percabangan pada Javascript
Percabangan
Untuk membuat
suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan
perintah-perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil
komputasi yang telah dilakukan, JavaScript akan membuat keputusan jalur mana
yang akan dieksekusi.
Pada dasarnya
dalam JavaScript terdapat dua macam pernyataan percabangan yaitu if..else dan
switch
If..Else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian
mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, dan
mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi.
if (kondisi)
{
//pernyataan1 dieksekusi
//bila kondisi terpenuhi
}
else
{
//pernyataan2 dieksekusi
//bila kodisi tidak terpenuhi
}
kondisi adalah
ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false
Untuk kasus yang melibatkan
lebih banyak kondisi, maka kita dapat meletakkan pernyataan if lain setelah
else
if (kondisi1) {
//pernyataan1 dieksekusi //bila
kondisi1 terpenuhi }else if
(kondisi2){ //pernyataan2
dieksekusi //bila kodisi1 tidak terpenuhi}else{ //pernyataan3 dieksekusi //bila kodisi2 tidak terpenuhi}
Contoh Program JavaScript
|
<HTML>
<HEAD><TITLE>Percabangan
IF-ELSE</TITLE></HEAD>
<BODY>
<SCRIPT
language="JavaScript">
<!--
function tanyabilangan()
{
var bil =
parseFloat(document.fform.bilangan.value);
var jenis = " ";
if(isNaN(bil))
{
alert("Anda Belum memasukkan Bilangan");
}
else
{
if (bil > 0)
{
jenis = " Adalah bilangan
Positif";
}
else if (bil < 0)
{
jenis = " Adalah bilangan
Negatif";
}
else
{
jenis =
" Adalah Nol";
}
alert
(bil+" "+jenis);
}
}
//--></SCRIPT>
<FORM NAME
="fform">
<H2><BR>Bilangan
Negatif, Nol, Atau Positif ???</H2>
Masukkan Bilangan :<input type="text"
size="11" name="bilangan">
<P>
<INPUT TYPE="button"
value="Tanya" onclick="tanyabilangan()">
<INPUT TYPE="reset"
value="Ulang"> </p>
</FORM>
</BODY>
</HTML>
|
Contoh Kasus
Perusahaan Travel ”Bintang
Abadi” mempunyai armada dengan tujuan :
Tujuan
|
Harga Tiket
|
Jakarta
|
100000
|
Cirebon
|
150000
|
Tasikmalaya
|
200000
|
Apabila seorang pemesan sudah
menjadi anggota/member Travel Bintang Abadi maka akan mendapatkan diskon 10 %.
Subtotal : Harga tiket X Jumlah tiket
Diskon : 0.10 X Subtotal
Total : Subtotal - Diskon
|
Buat Program dengan menggunakan
Javascript untuk menyelesaikan masalah tersebut. Dengan ketentuan sebagai
berikut :
Input : Nama pemesan
Tujuan
Jumlah Tiket
Member
|
Output : Harga Tiket
Sub Total
Diskon
Total Bayar
|
Contoh Program JavaScript
|
<HTML>
<HEAD><TITLE>Percabangan
IF-ELSE 2</TITLE></HEAD>
<BODY>
<SCRIPT
language="JavaScript">
<!--
function hitungtotal()
{
var nama = (document.fform.inama.value);
var tujuan = (document.fform.itujuan.value);
var jumlahtiket =
parseFloat(document.fform.ijumlah.value);
var ht =
0.0;
var sub = 0.0;
var diskon =0.0;
var total =0.0;
if (tujuan=="Jakarta")
{
ht =100000;
}
else if (tujuan=="Cirebon")
{
ht =150000;
}
else
{
ht =200000;
}
sub = jumlahtiket*ht;
if (document.fform.imember.checked==true)
{
diskon =0.10*sub;
}
else
{
diskon=0.0;
}
total = sub-diskon;
document.fform.otiket.value=eval(ht);
document.fform.osub.value=eval(sub);
document.fform.odiskon.value=eval(diskon);
document.fform.ototal.value=eval(total);
// gunakan untuk mengecek !!!
alert (total);
}
//--></SCRIPT>
<FORM NAME
="fform">
<table border="1"
align="center"width="70%">
<tr>
<td width="100%"
colspan="2"><H2 ALIGN="center">Travel Bintang
Abadi</H2></td>
</tr>
<tr>
<td
width="50%"><PRE>
Nama :<input type="text"
size="20" name="inama">
Tujuan :<select name="itujuan"
size=1>
<option
value="Jakarta">Jakarta</option>
<option
value="Cirebon">Cirebon</option>
<option
value="Tasikmalaya">Tasikmalaya</option>
</select>
Jumlah Tiket :<input
type="text" size="11" name="ijumlah">
Member :<input type="checkbox"
name="imember">Ya</td></pre>
<td
width="50%"><pre>
Harga Tiket :<input type="text"
size="10" name="otiket">
Sub Total :<input type="text"
size="10" name="osub">
Diskon :<input type="text"
size="10" name="odiskon">
Total Bayar :<input type="text"
size="10" name="ototal"></td><pre>
</tr>
<tr>
<td width="100%"
colspan="2">
<center>
<INPUT
TYPE="button" value="Hitung"
onclick="hitungtotal()">
<INPUT
TYPE="reset" value="Ulang">
</center></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
|
Percabangan Majemuk
Percabangan majemuk adalah
suatu percabangan yang dapat melibatkan lebih dari 1 kondisi di dalam
percabangannya. Biasanya percabangan sepert ini menggunakan operator tambahan
seperti AND, OR dan sebagainya.
Contoh Program JavaScript
|
<HTML>
<HEAD><TITLE>Percabangan IF-ELSE
3</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function hitungip()
{
var quis =
parseFloat(document.fform.iquis.value);
var tugas =
parseFloat(document.fform.itugas.value);
var uts =
parseFloat(document.fform.iuts.value);
var uas =
parseFloat(document.fform.iuas.value);
var ip =" ";
var ket=" ";
var na =
(0.10*quis)+(0.20*tugas)+(0.30*uts)+(0.40*uas);
if ((na > 80) && (na <=100))
{
ip ="A";
ket="Lulus dengan Sangat Baik";
}
else if ((na > 68)
&& (na <=80))
{
ip ="B";
ket="Lulus
dengan Baik";
}
else if ((na > 55)
&& (na <=68))
{
ip ="C";
ket="Lulus dengan
Cukup";
}
else if ((na > 38)
&& (na <=55))
{
ip ="D";
ket="Lulus dengan Kurang";
}
else
{
ip ="E";
ket="Tidak Lulus";
}
document.fform.oip.value=ip;
document.fform.oket.value=ket;
// gunakan untuk mengecek
alert (ip+""+na);
}
//--></SCRIPT>
<FORM NAME ="fform">
<table border="1"
width="100%" ALIGN="center" >
<tr>
<td
width="100%" colspan="4"><H2
ALIGN="center">Menghitung Indeks Prestasi</H2></td>
</tr>
<tr>
<td
width="25%">Quis (10%) :<input type="text"
size="10" name="iquis"> </td>
<td
width="25%">Tugas (20%):<input type="text"
size="10" name="itugas"> </td>
<td
width="25%">UTS
(30%):<input type="text" size="10"
name="iuts"> </td>
<td
width="25%">UAS (40%)
:<input type="text" size="10"
name="iuas"> </td>
</tr>
<tr>
<td
width="100%" colspan="4"><P
Align="center">
<INPUT TYPE="button" value="Hitung"
onclick="hitungip()">
<INPUT
TYPE="reset" value="Ulang"> </p></td>
</tr>
<tr>
<td
width="100%" colspan="4" align="center">
Indeks Prestasi :<input type="text" size="5"
name="oip">
Keterangan :<input type="text"
size="25" name="oket"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
|
Switch
Selain menggunakan if..else,
percabangan juga dapat ditangani dengan perintah switch. Dengn kata lain pernyataan
switch digunakan untuk menyederhanakan pernyataan if..else yang terlalu banyak.
Contoh Program JavaScript
|
<HTML>
<HEAD><TITLE>Percabangan
Switch</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function tanyabulan()
{
var bulan =
parseFloat(document.fform.ibulan.value);
var namabulan="
";
switch (bulan)
{
case 1 :
namabulan="Bulan ke 1 adalah = Januari";break;
case 2 :
namabulan="Bulan ke 2 adalah = Februari";break;
case 3 :
namabulan="Bulan ke 3 adalah = Maret";break;
case 4 :
namabulan="Bulan ke 4 adalah = April";break;
case 5 :
namabulan="Bulan ke 5 adalah = Mei";break;
case 6 :
namabulan="Bulan ke 6 adalah = Juni";break;
case 7 :
namabulan="Bulan ke 7 adalah = Juli";break;
case 8 :
namabulan="Bulan ke 8 adalah = Agustus";break;
case 9 :
namabulan="Bulan ke 9 adalah = September";break;
case 10 :
namabulan="Bulan ke 10 adalah = Oktober";break;
case 11 :
namabulan="Bulan ke 11 adalah = November";break;
case 12 :
namabulan="Bulan ke 12 adalah = Desember";break;
default :
namabulan="Anda salah mengisi";
}
alert(namabulan);
}
//--></SCRIPT>
<FORM NAME ="fform">
<H2>Penggunaan Percabangan Switch</H2><HR>
<PRE>
Masukkan Nomor Bulan [1-12] :<input type="text"
size="2" name="ibulan">
<INPUT TYPE="button" value="Hitung"
onclick="tanyabulan()"><INPUT TYPE="reset"
value="Ulang">
</PRE>
</FORM>
</BODY>
</HTML>
Perulangan JavaScirpt
Perintah pengulangan biasanya
digunakan apabila kalian ingin menampilkan satu atau beberapa baris perintah
secara berulang.
Pengulangan FOR
Pengulangan dengan FOR paling sering digunakan jika kalian
sudah tahu akhir dari perulangan tersebut.
Berikut sintak FOR :
for (nlai_awal; kondisi; penambahan;)
{
//pengulangan pernyataannya disini;
}
Berikut contoh programnya :
<html>
<head>
<title>Perulangan FOR</title>
</head>
<body>
<script language="JavaScript">
for(x=1; x<=5; x++)
{
document.writeln("Ini Adalah Pengulangan FOR<br>");
}
</script>
</body>
</html>
Pengulangan While
Pengulangan
ini digunakan apabila kalian belum tahu pasti berapa banyak pengulangan akan
dilakukan. Berakhirnya suatu perulangan dalan while ditentukan oleh kondisi,
Jika kondisi sudah terpenuhi maka pengulangan akan dihentikan.
Berikut sintak While :
while (kondisi)
{
//pengulangan pernyataan disini;
}
Berikut contoh programnya :
<html>
<head>
<title>Perulangan While</title>
</head>
<body>
<script language="JavaScript">
var x = 0;
while(x < 5)
{
document.writeln("Ini Adalah Pengulangan While<br>");
x++;
}
</script>
</body>
</html>
Pengulangan Do..While
Pengulangan ini hampir sama dengan while, pengulangan Do..While
digunakan apabila kalian belum tahu pasti berapa banyak pengulangan akan
dilakukan. Bedanya dengan while, pada pernyataan Do..While pengujian kondisi
dilakukan pada akhir perulangan.
Berikut sintak Do..While :
do
{
//pengulangan pernyataan disini;
}
while (kondisi)
<html>
<head>
<title>Perulangan Do..While</title>
</head>
<body>
<script language="JavaScript">
var x = 0;
do {
document.writeln("Ini Adalah Pengulangan Do..While<br>");
x++;
}
while (x < 5)
</script>
</body>
</html>
|
