pembelajaran: makalah javascript dasar

KATA PENGANTAR

Puji syukur kita panjatkan kepada tuhan yang maha esa karena dengan rahmat, karunia, serta taufik dan hidayahnya saya dapat menyelesaikan makalah tentang javascript dasar meskipun banyak kekurangan di dalamnya dan juga saya berterima kasih kepada ibu murni tambunan selaku guru pendidikan pemograman web yang telah memberikan tugas ini kepada kami.

Saya sangat berharap makalah ini dapat berguna dalam hal menambah wawasan pengetahuan kita semua . saya juga menyadari sepenuhnya bahwa didalam makalah ini terdapat kekurangan dan jauh dari kata sempurna oleh sebab itu saya berharap adanya kritik , saran dan usulan demi perbaikan makalah ini , mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun.

Semoga makalah sederhana ini dapat di pahami bagi siapapun yang membacanya. Sekiranya makalah ini dapat berguna bagi saya sendiri maupun yang membacanya. Sebelumnya saya mohon maaf apabila terdapat kesalah kata-kata yang kurang berkenan dan kami memohon kritik dan saran yang membangun dari anda demi perbaikan makalah ini di waktu yang akan datang.

Pematangsiantar, maret 2016

NOVIYANI SYAH PUTRI

daftar isi

HALAMAN JUDUL........................................................................................................................................................ 1

KATA PENGANTAR.................................................................................................................................................... 2

daftar isi...................................................................................................................................................................... 3

BAB 1.PENDAHULUAN......................................................................................................................................... 4

1.1.Latar Belakang....................................................................................................................................... 4

1.2.Penulisan Pada JavaScript............................................................................................................... 4

1.3.Variabel Pada JavaScript.................................................................................................................. 5

1.4.Operator Pada JavaScript....................................................................................................5&6

1.5.Objek Pada JavaScript........................................................................................................................ 6

1.6.Percabangan Dan Perungalan Pada JavaScript................................................................. 7

BAB 2.PEMBAHASAN............................................................................................................................................. 8

BAB 3 KESIMPULAN..............................................................................................................................20

BAB 1

PENDAHULUAN

1.1. Latar Belakang

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995.

Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser NetscapeNavigator2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web.

Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

1.2 Penulisan Pada Java Script

Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan

kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

A).JavaScript Ditulis Pada File Yang Sama

Untuk penulisan dengan cara ini, perintah yang digunakan adalah

<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>.

Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>

B). JavaScript Ditulis Pada File Terpisah

Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT SRC=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file terpisah. File yang mengandung kode Javascript berekstensi .js

1.3 Variabel Pada JavaScript

Variabel adalah tempat dimana kita menyimpan nilai-nilai atau informasi-informasi pada JavaScript. Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah.

Aturan penamaan variabel :

- Harus diawali dengan karakter (huruf atau baris bawah)

- Tidak boleh menggunakan spasi

- Huruf Kapital dan kecil memiliki arti yang berbeda

- Tidak boleh menggunakan kata-kata yang merupakan perintah dalam JavaScript.

A. Tipe Data

JavaScript tidak memiliki tipe data secara explisit. Meskipun JavaScript tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit.

Terdapat 4 macam tipe data implisit yang dimiliki oleh JavaScript

yaitu :

1.Numerik : 0222532531, 1000, 45, 3.146789

2.String : “Hallo”, “April”, “Jl. Setiabudi No 17A

3.Boolean : bernilai true atau false

4.Null : variabel yang tidak diinisilisasi

1. Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan

bulat (integer) dan bilangan pecahan(real/float). Untuk bilangan bulat, kita dapat merepresentasikan dengan basis desimal, oktal atau heksadesimal.

2. Tipe String

Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string

diantara tanda petik tunggal (’) atau tanda petik ganda (”) Contoh :

3. Tipe Boolean

Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan

4. Tipe Null

Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal (inisialisasi).

1.4. Operator Pada JavaScript

Operator pada JavaScript terbagi menjadi enam, yaitu :

1.Operator Aritmatika

Digunakan untuk operan bertipe numerik. Ada 2 macam operator aritmatik, yaitu operator numerik tunggal dan operator aritmatik biner. Perbedaan kedua operator terletak pada jumlah operan yang harus dioperasikan.

2. Operator Pemberian Nilai

Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu

operator.

3. Operator Manipulasi Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan

bulat.

4. Operator Pembanding

Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini dapat bertipe string, numerik, maupun ekspresi lain.

5. Operator Logika

Digunakan untuk mengoperasikan operan yang bertipe boolean.

6. Operator String

Selain operator pembanding, operator string pada JavaScript juga mengenal satu

operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk menggabungkan beberapa string menjadi sebuah string yang lebih panjang.

1.5. Objek Pada JavaScript

1. Objek Untuk Memasukkan Data

Terdapat beberapa objek yang dapat digunakan untuk memasukkan data. Objek -

objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.

A. Objek Text

Untuk menginputkan data kita dapat menggunakan komponen/objek text.

B. Objek Radio

Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan radio[indeks].

C. Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya hampir sama seperti objek radio.

D.Objek TextArea

Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks dengan banyak baris.

E. Objek Select

Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar. Objek select berguna apabila di dalam form terdapat banyak pilihan yang telah mempunyai nilai tertentu.

1.6. Percabangan Dan Perungalan Pada JavaScript

1. Percabangan

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi. Pada dasarnya, JavaScript terdapat dua macam pernyataan percabangan yaitu if..else dan switch

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

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

2.Perulangan

Untuk mengulang kejadian beberapa kali maka kita membutuhkan proses perulangan. Pada JavaScript dikenal metode/cara perulangan.

A. Perulangan For

Digunakan untuk mengeksekusi pernyataan-pernyataan beberapa kali. Perulangan For paling sering dipakai, jika anda sudah tahu akhir dari perulangan tersebut. Perintah for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break.

B.Perulangan Do While

Perulangan Do While merupakan perulangan yang hampir mirip dengan perulangan while namun perbedaanya, pada perulangan Do While, maka minimal instruksi dijalankan sekali saja.

BAB 2

PEMBAHASAN

Pada tag <script> perlulah ditambahkan atribut berikut ini: <script language="JavaScript" type="text/javascript"src=”alamat.js”></script>

Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman HTML.

Contoh :

h 1 <script language=”JavaScript” type=”text/javascript”>alert(“Belajar Javascript”); </script>

script di tulis pada bagan <body>

Contoh 2

<!DOCTYPE html>

<html>

<body>

...

</script>

...

</body>

</html>

Penulisan Fungsi pada Javascript

Penulisan javascript di dalam tag <head>Dalam contoh berikut, script jaca diletakkan di tag <head> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.

Contoh 3

<!DOCTYPE html>

<html>

<head>

function cobafungsi( )

{document.getElementById("coba").innerHTML="Belajar membuat fungsi";}

</script>

</head>

<body>

<h1>Halaman WEB</h1>

<p id="coba">A Paragraph</p>

<button type="button" onclick="cobafungsi( )">CobaFungsi</button>

</body>

</html>

Penulisan javascript di dalam tag <body>Dalam contoh berikut, fungsi javascript diletakkan di tag <body> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.

Contoh 4

<!DOCTYPE html>

<html>

<body>

<h1>Halaman Web</h1>

<p id="coba">A Paragraph</p>

Function cobafungsi( )

{document.getElementById("coba").innerHTML="Belajar Fungsi Javascript";}

</script></body></html>

Memberi Komentar pada Javascript.

Komentar pada suatu script tidak akan dieksekusi oleh Javascript. Komentar ditambahkan pada script untuk memberikan penjelasan script atau membuat skrip tidak dieksekusi. Untuk memberikan komentar yang hanya satu baris gunakan //.

Berikut contoh bagaimana memberi komentar single.

Contoh 5

// Write to a heading:

document.getElementById("myH1").innerHTML="Selamat datang di Homepage Saya";

// Write to a paragraph:

document.getElementById("myP").innerHTML="Ini adalah paragraph saya.";

Contoh 6

var x=5; // mendeklarasikan x dan memasangkannya dengan 5

var y=x+2; // mendeklarasikan y dan memasangkannya dengan x+2

Untuk memberikan komentar lebih dari satu baris, gunakan /* dan */. Jadi script yang terletak di antara /* dan */ akan dianggap sebagai komentar. Berikut contoh memberi komentar yang lebih dari satu baris.

Contoh 7

Kode berikut akan ditulis ke heading dan paragraph.Dan akan menampilkan halaman homepage

document.getElementById("myH1").innerHTML="Selamat datang di Homepage Saya";

document.getElementById("myP").innerHTML="Ini adalah paragraph saya.";

Fungsi Pada Javascript

Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan nama fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter dalam suatu fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai berikut :

Contoh 1

<html>

<head>

</head>

<body>

function diskon(hargaAwal)

{ var diskon; diskon = 0.5* hargaAwal; hargaDiskon = hargaAwal -diskon; return hargaDiskon; }

var harga = prompt("Masukkan harga mula-mula (Rp) : "); document.write("Harga stlh diskon 50%: Rp. " + diskon(harga));

</script>

</body>

</html>

Proses pada script di atas adalah sebagai berikut:

Mula-mula user diminta memasukkan harga mula-mula, harga ini diassign ke dalam variabel harga, misalnya 1000. Selanjutnya script mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil function diskon(harga) atau diskon(1000). Karena function diskon memiliki parameter harga Awal maka nilai dari hargaAwal ini sama dengan nilai dari variabel harga, pada contoh ini adalah bernilai 1000. Selanjutnya akan dihitung nilai diskon yaitu 0.5* 1000= 500, dan hargaDiskon yaitu 1000–500=500.

Perintah return harga Diskon, artinya akan mengembalikan nilai hargaDiskon (500) ke function yang memanggilnya, yaitu diskon(harga), lihat tanda panah pada script di atas. Sehingga akan tercetak ‘Harga stlh diskon 50%: Rp. 500’.

Suatu function tidak harus terdapat return value.

Perhatikan contoh berikut ini.

Contoh 2

<html>

<head>

function cetakTeks(teks)

{ document.write(teks + "<br>"); }

</script>

</head>

<body>

var kata = "Hallo";

var i;

for(i=0; i<=5; i++)

{ cetakTeks(kata); }

</script>

</body>

</html>

Pernyataan Bersyarat

Pernyataan bersyarat digunakan untuk menampilkan aksi yang berbeda berdasarkan kondisi yang berbeda. Pernyataan bersyarat dalam Javascript antara lain :

1. Pernyataan if

2. Pernyataan if ... else

3.Pernyataan if ... else if ...

4.Pernyataan Switch

Pernyataan if

Pernyataan if digunakan untuk mengeksekusi code apabila syarat yang ditentukan di penuhi (bernilai benar). Pernyataan if memiliki syntax sebagai berikut :

if (syarat)

{Kode yang dieksekusi apabila syarat dipenuhi }

Contoh 1

<html>

<body>

var bil;

var status;

bil = prompt("Masukkan sebarang bilangan : ");

if (bil > 10)

{ status = "Anda telah memasukkan bilangan lebih besar dari 10"; }

document.write(status);

</script>

</body>

</html>

Pernyataan if ... else ...

Pernyataan if ... else digunakan untuk mengeksekusi beberapa kode apabila syarat yang dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if ... else ... sebagai berikut

if (syarat)

{Kode yang dieksekusi apabila syarat dipenuhi }

Else

{Kode yang dieksekusi apabila syarat tidak dipenuhi}

Contoh 2

<html>

<body>

var tanggal;

var status;

tanggal = prompt("Masukkan tanggal hari ini : ");

if (tanggal > 15)

{ status = "Tanggal " + tanggal + " adalah tanggal tua"; }

else

{status = "Tanggal " + tanggal + " adalah tanggal muda";}

document.write(status);

</script>

</body>

</html>

Pernyataan if ... else if ... else ...

Pernyataan if ... else if ... else ... digunakan untuk mengeksekusi satu dari beberapa kode apabila syarat yang dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if ...

else ... sebagai berikut

if (syarat)

{Kode yang dieksekusi apabila syarat dipenuhi }

Else

{Kode yang dieksekusi apabila syarat tidak dipenuhi}

if (syarat 1)

{Kode yang dieksekusi apabila syarat 1

dipenuhi }

else if (syarat 2)

{Kode yang dieksekusi apabila syarat 2 dipenuhi}

else

{Kode yang dieksekusi apabila syarat 1 dan syarat 2 tidak dipenuhi }

Contoh 3

<html>

<body>

var bil;

var status;

bil = prompt("Masukkan sebarang bilangan : ");

if (bil > 10)

{ status = "Anda telah memasukkan bilangan lebih besar dari 10"; }

else if (bil < 10)

{ status = "Anda telah memasukkan bilangan lebih kecil dari 10"; }

else

{ status = "Anda telah memasukkan bilangan sama dengan 10"; }

document.write(status);

</script>

</body>

</html>

Pernyataan Switch

Pernyataan switch memiliki fungsi yang sama dengan pernyataan if ... else if ... else ...

Syntax dari

pernyataan ini adalah sebagai berikut :

Switch(variabel)

{

case option1 : statement 1

break;

case option2: statement 2

break;

case option3: statement 3

break;

...

default :statement x

break;

}

Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila valuenya sama dengan option1 maka statement yang dilakukan adalah statement1. Apabila valuenya sama dengan option2 maka statement2 yang dijalankan, begitu seterusnya. Namun apabila tidak ada value yang sama, maka statement x lah yang dijalankan.

Tipe data dari variabel yang akan dicek haruslah ordinal, misalnya integer. Dalam hal ini tipe data riil tidak dapat digunakan. Untuk memastikan bahwa nilai yang akan dicek pada variabel adalah bertipe integer, sebaiknya gunakan perintah parseInt().

Contoh 4

<html>

<body>

var nilaiAngka;

var nilaiHuruf;

nilaiAngka = parseInt(prompt("Masukkan sebuah bil bulat 1s/d 5: "));

switch(nilaiAngka)

{

case 1: document.write("Anda memasukkan bilangan 1");

break;

case 2: document.write("Anda memasukkan bilangan 2");

break;

case 3 : document.write("Anda memasukkan bilangan 3");

break;

case 4: document.write("Anda memasukkan bilangan 4");

break;

case 5: document.write("Anda memasukkan bilangan 5");

break;

default : document.write("Bilangan yang Anda masukkan tidak 1s/d 5");

break;

}

</script>

</body>

</html>

Contoh 5

<!DOCTYPE html>

<html>

<body>

<p>Klik Tombol untuk mengetahui hari ini.</p>

function fungsihari( )

{

var x;

var d=new Date( ).getDay( );

switch (d)

{

case 0:x="Hari ini adalah hari Minggu";

break;

case 1:x="Hari ini adalah hari Senin";

break;

case 2:x="Hari ini adalah hari Selasa";

break;

case 3:x="Hari ini adalah hari Rabu";

break;

case 4:x="Hari ini adalah hari Kamis";

break;

case 5:x="Hari ini adalah hari Jumat";

break;

case 6:x="Hari ini adalah hari Sabtu";

break;

}

document.getElementById("hari").innerHTML=x;

}

</script>

</body>

</html>

STRUKTUR PERULANGAN

Perulangan adalah suatu blok perintah atau kode yang diulang selama syarat bernilai True. Dalam javascript, perulangan ini dapat dinyatakan dalam 2 bentuk, yaitu dengan For dan While. Pada bagian ini akan dijelaskan penggunaan For untuk perluangan terlebih dahulu.

Perulangan FOR

Perulangan For sering digunakan untuk mebuat perulangan dengan jumlah perulangan telah diketahui secara pasti.Syntax dari perulangan for adalah sebagai berikut :

For (statement 1; statement 2; statement 3)

{

Kode yang dieksekusi apabila syarat dipenuhi

}

Keterangan :

Statement 1akan dieksekusi sebelum perulangan dimulai

Statement 2 mendefinisikan kondisi untuk menjalankan perulangan

Statement 3dieksekusi setiap kali kode blok selesai dieksekusi.

Contoh 1

<html>

<body>

var counter;

for(counter=1; counter<=5; counter++)

{

document.write("<font size='" + counter + "'>

Ini adalah font berukuran " + counter +

"</font><br>");

}

</script>

</body>

</html>

Contoh 2

<html>

<body>

var counter;

for(counter=5; counter>=1; counter--)

{

document.write("<font size='" + counter + "'>Ini adalah font

berukuran " + counter + "</font><br>");

}

</script>

</body>

</html>

Dari contoh 1 dan contoh 2 di atas, dapat disimpulkan bahwa perulangan tidak selalu dalam bentuk increment, akan tetapi juga dapat dalam bentuk decrement. Selain itu kenaikan atau penurunannya tidak selalu naik 1atau turun 1. Perhatikan contoh berikut ini :

Contoh 3

<html>

<body>

vascript">

var counter;

for(counter=1; counter<=5; counter+=2)

{

document.write("<font size='" + counter + "'>

Ini adalah font berukuran " + counter + "</font><br>");

}

</script>

</body>

</html>

Perulangan While

Pada prinsipnya bentuk perulangan While adalah mirip dengan perulangan For. Secara umum sintaks dari perulangan While adalah

For (statement 1; statement 2; statement 3)

{

Kode yang dieksekusi apabila syarat dipenuhi

}

Dalam sintaks di atas, bagian statement akan terus diulang selama syarat bernilai True.

Sebagai contoh, perhatikan statement dalam For dan While berikut ini. Kedua statement adalah ekuivalen atau sama (perhatikan dengan warna sama)

for(counter=1;counter<=5; counter++)

{

document.write("Hello World <br>");

}

--------------------------------------------------

counter = 1;

while(counter<=5)

{

document.write("Hello World <br>");

counter++;

}

Meskipun semua statement For dapat juga dinyatakan sebagai While, namun tidak berlaku sebaliknya. Tidam semua statement While dapat dinyatakan dalam For. Inilah kelebihan perulangan While.Kelebihan While dibandingkan For adalah bahwa ehile dapat digunakan apabila jumlah perulangan tidak diketahui. Sedangkan untuk For harus diketahui jumlah perulangannya.Sebagai contoh perumpamaan, misalkan ada statement begini: “ Saya akan terus makan selama saya masih lapar”. Statement tersebut adalah juga termasuk konsep perulangan dalam kehidupan sehari-hari. Dalam

hal ini, jumlah berapa kali harus makan tidak diketahui. Melainkan hanya syarat makannya saja yang diketahui, yaitu selama masih lapar.

Perhatikan contoh berikut ini. Script ini akan terus meminta user untuk mengisikan suatu angka selama angka yang dimasukkan bukan angka 5.

Contoh 4

<html>

<body>

var angka;

while(angka != 5)

{

angka = prompt("Masukkan sebuah angka : ");

}

document.write("Anda telah memasukkan angka 5");

</script>

</body>

</html>

Perhatikan syarat (yang dicetak biru) pada script di atas. Syarat tersebut bermakna, selama nilai angka tidak sama dengan 5, maka user akan selalu diminta memasukkan angka. Sehingga dalam kasus ini tidak diketahui berapa jumlah perulangan yang harus dilakukan, namun perulangannya tergantung dari syarat. Untuk kasus seperti ini, kita tidak bisa membuatnya dengan FOR.

PEMROSESAN FORM

Pada bagian ini akan dipaparkan bagaimana memproses suatu input data yang berasal dari komponen form, seperti textbox, textarea, combo box, radio, button, dan lain lain. Pada dasarnya untuk semua tag komponen form, disisipkan dalam tag form. Form

Tag form dalam HTML memiliki syntax sebagai berikut :

...

</form>

Contoh 1

...

</form>

Untuk membaca value yangdiinputkan melalui komponen dalam form menggunakan javascript menggunkan obyek document dengan syntax sebagai berikut :

document.namaform.namakomponen.value;

Sebagai contoh, script berikut ini adalah script untuk membaca nilai yang diinputkan user melalui komponen text lalu menampilkan sebagai alert.

Contoh 1

<html>

<head>

function baca( )

{

var nilai = document.formku.input.value;

alert("Anda telah memasukkan input : " + nilai);

}

</script>

</head>

<body>

<h1>Baca Input</h1>

Masukkan sebuah input <input type="text" name="input">

</form>

</body>

</html>

Apabila script di atas dijalankan, maka akan muncul tampilan seperti berikut :

Contoh 2

<html>

<head>

function hitung()

{

var bilangan1= parseFloat(document.formku.bil1.value);

var bilangan2 = parseFloat(document.formku.bil2.value);

var op = document.formku.operasi.value;

var hasil;

if (op == "jumlah") hasil = bilangan1+ bilangan2;

else if (op == "kurang") hasil = bilangan1-bilangan2;

else if (op == "kali") hasil = bilangan1* bilangan2;

else if (op == "bagi") hasil = bilangan1 / bilangan2;

document.formku.hasil.value = hasil;

}

</script>

</head>

<body>

<h1>Kalkulator Sederhana</h1>

Bil Pertama <input type="text" name="bil1">

<option value="jumlah">Dijumlahkan</option>

<option value="kurang">Dikurangkan</option>

<option value="kali">Dikalikan</option>

<option value="bagi">Dibagi</option>

</select>

Bil Kedua <input type="text" name="bil2"> =

</form>

</body>

</html>

EVENT HANDLER

Pada pembahasan sebelumnya telah diberikan beberapa contoh script yang telah menggunakan even handler onclick() yaitu apabila suatu elemen diklik maka akan terjadi suatu efek/action tertentu. Apakah

ada event yang

selain onclick()? Jawabannya jelas ada, berikut beberapa event yang dapat kita gunakan.

MOUSE EVENTS

Event	Description
Onclick	Muncul ketika user mengklik elemen/komponen
ondblclick	Muncul ketika usermengklik ganda pada elemen/komponen
onmousedown	Muncul ketika user menekan pada mouse
onmousemove	Muncul ketika user menggerakkan pointer mouse
onmouseout	Muncul ketika user menggerakkan pointer mouse keluar dari elemen/komponen control
onmouseover	Muncul ketika user menggerakkan pointer mouse melalui/melewati elemen
onmouseup	Muncul ketika user melepas tombol mouse

keyboard Events

Event	Description
onkeydown	Muncul ketika user menekan suatu tombol pada keyboard
onkeypress	Muncul ketika user menekan suatu tombol keyboard dan akan terus muncul sampai user melepas tombol
onkeyup	Muncul ketika user melepas tombol yang telah ditekan

HTML CONTROL EVENTS

Event	Description
Onblur	Muncul ketika HTML control kehilangan focus
onchange	Muncul ketika HTML control kehilangan focusdan nilainya berubah
onfocus	Muncul ketika HTML control sedang focus
onreset	Muncul ketika user menekan tombol reset dalam form
Onselec	Muncul ketika user memilih teks pada HTML control
onsubmit	Muncul ketika user melakukan submit form

WINDOW EVENTS

Event	Description
Onload	Muncul ketika window telah selesai loading
Onresize	Muncul ketika user mengubah ukuran window
Onunload	Muncul ketika user keluar dari halaman/dokumen web

Contoh 1

<html>

<head>

function dekati()

{

document.formku.status.value = "Anda mendekati obyek link";

}

function jauhi()

{

document.formku.status.value = "Anda menjauhi obyek link";

}

</script>

</head>

<body>

<h1><a href="" onmouseover="dekati( )" onmouseout="jauhi( )">Obyek Link</a> </h1>

</form>

</body>

</html>

BAB 3

KESIMPULAN

Dari Makalah diatas dapat disimpulkan bahwa Script-script di dalam JAVASCRIPT adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

pembelajaran

Sabtu, 26 Maret 2016

makalah javascript dasar

1 komentar: