Makalah Tentang Javascript Pada HTML

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>

<title>Belajar JavaScript</title>

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>

<title>Belajar JavaScript</title>

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 :

<!-- Memyembunyikan kode dari browser non-js

function cobaarray()

{

nama = new Array("Dian","Andri","Irawan");

document.write(nama[2]);

}

// akhir dari penyembunyian -->

</SCRIPT>

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>

<!-- 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>

</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>

<h3 align="center">Latihan Objek Date/Tanggal</H3>

<!-- 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>

</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>

<!-- 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>

<H3>Latihan Objek String</H3>

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>

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>

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>

function konek1()

{

window.open("utsb.HTML");

}

function konek2()

{

window.location="kunci_jawaban UTS.HTML";

}

</SCRIPT>

</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>

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>

<B>MENU PILIHAN DENGAN TOMBOL</B>

<OPTION>Latihan Objek Radio</OPTION>

<OPTION>Latihan Objek Select</OPTION>

<OPTION>Latihan Objek Teks Area</OPTION>

</SELECT>

</P>

<P><BR>

</P>

<P>

</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>

<!--

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>

<H2><BR>Bilangan Negatif, Nol, Atau Positif ???</H2>

Masukkan Bilangan :<input type="text" size="11" name="bilangan">

<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>

<!--

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>

<tr>

<td width="100%" colspan="2"><H2 ALIGN="center">Travel Bintang Abadi</H2></td>

</tr>

<tr>

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>

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>

</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>

<!--

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>

<tr>

<td width="100%" colspan="4"><H2 ALIGN="center">Menghitung Indeks Prestasi</H2></td>

</tr>

<tr>

<td width="25%">Tugas (20%):<input type="text" size="10" name="itugas"> </td>

</tr>

<tr>

</tr>

<tr>

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>

<!--

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>

<H2>Penggunaan Percabangan Switch</H2><HR>

<PRE>

Masukkan Nomor Bulan [1-12] :<input type="text" size="2" name="ibulan">

</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>

Opah Ipin

Makalah Tentang Javascript Pada HTML

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.

Jangkauan Variabel (Variabel Scope) dalam JavaScript

Jenis dan Pengertian Tipe data dalam JavaScript

Konsep Objek pada Tipe Data Dasar JavaScript

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.

Pengulangan FOR

Pengulangan While

Pengulangan Do..While

wildan

Opah Ipin

Makalah Tentang Javascript Pada HTML

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.

Jangkauan Variabel (Variabel Scope) dalam JavaScript

Jenis dan Pengertian Tipe data dalam JavaScript

Konsep Objek pada Tipe Data Dasar JavaScript

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.

Pengulangan FOR

Pengulangan While

Pengulangan Do..While

Artikel Terkait

wildan