Dasar Pemrograman Javascript

MODUL WEB DESAIN 3
DASAR PEMROGRAMAN JAVASCRIPT

PEMBIMBING :
DEKA M WILDAN

SMK BHAKTI NUSANTARA BOJA
Website : www.smkbhinus.net
Email : bhinus_boja@smkbhinus.net

DASAR PEMROGRAMAN JAVASCRIPT

1.1 Apakah JavaScript itu?
JavaScript merupakan sebuah bahasa scripting yang dinamis yang berarti tipe data pada
Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang lain sesuai dengan
kebutuhan. JavaScript dikembangkan oleh Netscape. Dengan JavaScript kita dapat dengan
mudah membuat halaman web yang interaktif.  Pemrograman javascript tidak sama dengan
pemrograman java, karena javascript tidak membutuhkan compiler khusus dan langsung bisa
dieksekusi melalui web browser seperti mozilla firefox, internet explorer dan browser lainnya.
Untuk menjalankan javascript diperlukan javascript‐enabled pada web browser yang support
javascript.

1.2 Mencantumkan JavaScript pada halaman HTML
Dibawah ini contoh penulisan kode javascript yang ditulis langsung pada halaman html
yang dibuat dari aplikasi notepad:

<html>

<body>

<br>

Ini halaman HTML normal.

<br>

  <script language="JavaScript">

    document.write("Hallo Saya bersama Javascript !")

  </script>

<br>

Ini HTML lagi.

</body>

</html>

Keterangan :
Perintah “document.write(“Hallo Saya bersama Javascript!”)” adalah untuk menulis sebuah
dokumen yang berkarakter “Hallo Saya bersama Javascript!” dan langsung ditampilkan pada
halaman web.
Isi script pada javascript harus terletak dibawah kode <script language=”javascript”>
dan diatas kode </script>. Contoh pilihan lainnya untuk membuat tag pembuka untuk pengisian
kode javascript adalah <script type=”text/javascript” src=”file_javascript.js”> ISI KODE
JAVASCRIPT</script>. Kemudian Simpan dengan nama misal “javascript.html” tanpa tanda
kutip save as type: all files. Kemudian pilih lokasi penyimpanan, direkomendasikan di simpan
dalam satu folder website agar file lebih mudah dicari, lalu klik save. Jika kode javascript
dimasukkan ke dalam tag html harus berformat atau berekstensi *.html

Dan hasilnya akan terlihat seperti gambar dibawah ini :

Tulisan yang terblok warna biru dengan kata “Hallo Saya bersama Javascript!” adalah contoh
dokumen karakter yang dibuat dengan perintah dari kode javascript. Segala sesuatu yang
berada di antara tag <script> dan </script> di‐interpretasi‐kan sebagai kode JavaScript.

1.3 Non‐JavaScript browser
Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? Non‐
JavaScript browser tidak mengenal tag <script>. Dia akan mengabaikan tag itu dan
mengeluarkan seluruh kode selayaknya text biasa . Ini berarti bahwa user akan melihat kode
JavaScript program kita yang ada di dokumen HTML. Ini tentunya bukan hal yang kita harapkan.
Ada cara untuk menyembunyikan baris kode dari browser yang seperti itu, yaitu dengan
menggunakan HTML‐comments <!‐‐ ‐‐>. Contoh penggunaan javascript  untuk web browser
yang tidak mengenal tag javascript adalah sebagai berikut:
Buka notepad, lalu ketikkan kode seperti dibawah ini.

<html>

<body>

<br>

Ini dokumen HTML normal

<br>


  <!‐‐ hide from old browsers

     document.write("Yang ini akibat JavaScript!")

   // ‐‐>

  </script>

<br>

Ini HTML lagi.

</body>

</html>

Kemudian save dengan nama misal “hidejavascript.html” tanpa tanda kutip, save as type=”ALL
FILES”, lalu buka file tersebut di web browser. Dan hasilnya akan terlihat seperti di bawah ini :

Tanpa HTML‐comment tampilan pada non‐JavaScript browser akan seperti:

Ini HTML lagi

Tampilan pada non‐JavaScript browser yang menggunakan HTML‐comment akan terlihat
seperti ini:

Yang Ini akibat JavaScript!
Ini HTML lagi

1.4 Event
Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript.
Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men‐click tombol
mouse terjadilah event Click. Jika mousepointer bergerak melewati sebuah link terjadilah
event MouseOver. Ada banyak event yang terdapat dalam JavaScript yang selengkapnya bisa di
lihat pada JavaScript Reference.

Tentunya kita ingin program JavaScript kita bereaksi jika terjadi suatu event tertentu. Ini
bisa dilakukan dengan bantuan event‐handlers. Sebagai contoh kita memiliki sebuah tombol
yang akan mengeluarkan sebuah popup window jika di‐tekan. Ini berarti bahwa sebuah window
popup harus muncul sebagai reaksi dari event Click. Event‐handler yang harus kita gunakan
adalah onClick, yang memberitahukan apa yang harus dikerjakan oleh komputer jika event ini
terjadi. Contoh di bawah ini menunjukkan bagaimana mudahnya menggunakan event‐handler
onClick:

<form method=”post” action=””>
<input type="button" value="Click me" onClick="alert('Ya')">
</form>

Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat
form dan sebuah tombol (ini merupakan bahasa HTML standard) . Bagian yang baru adalah
onClick="alert('Ya')" yang berada di dalam tag <input>. Inilah yang mendefinisikan apa
yang akan terjadi jika tombol ditekan. Jadi jika terjadi event Click, komputer akan mengeksekusi
alert('Ya'), yang merupakan kode JavaScript (perhatikan bahwa kita tidak
menggunakan tag <script> pada kasus ini). alert() berfungsi untuk menampilkan window popup.
Di dalam tanda kurung kita tentukan
string yang akan muncul pada window yang dimaksud. Jadi script kita di atas menampilkan
window dengan tulisan 'Ya' saat user men‐click tombol.

Satu hal yang mungkin membingungkan: pada perintah document.write() kita menggunakan
double quotes (") dan pada alert() kita menggunakan juga single quotes  ('), mengapa? Pada
contoh ini kita menuliskan onClick="alert('Yo')" – kita gunakan keduanya (double dan
single quote) . Jika kita tulis onClick="alert("Yo")" maka komputer akan bingung mana
yang menjadi bagian event‐handler onClick dan mana yang bukan. Urutan penggunaannya
tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Yo")'.

Ada banyak event‐handler lain yang bisa kita gunakan. Selengkapnya lihat pada referensi
JavaScript.

1.5 Function
Pada dasarnya function merupakan cara untuk menyatukan beberapa perintah. Contoh cara
menampilkan teks sebanyak tiga kali, berikut baris kodenya :

<html>


<!‐‐ hide



function myFunction() {

document.write("Selamat datang pada homepage

saya!<br>");

document.write("Ini menggunakan JavaScript!<br>");

}



myFunction();

myFunction();

myFunction();



// ‐‐>

</script>

</html>

Dan hasilnya akan terlihat seperti gambar dibawah ini :

Penggunaan Function, Variabel, Event, dan Operator
Penggunaan function, variabel, event dan operator bisa digabungkan menjadi satu.
Perintah fungsi/function bisa dipasang di event dan digabung dengan kode “document.write.
Dengan melakukan perintah “OnClick” atau “OnMouseOver” atau perintah event yang lainnya.
Contoh yang menggunakan penggabungan, bukalah notepad kemudian tuliskan berikut baris
kodenya :
<form name="calculasi" method="post" action="java.html">
<p>Nilai X= <input name="x" type="text" size="20"></p>
<p>Nilai y= <input name="y" type="text" size="20"></p>
<p><input type="submit" name="submit" value="Hitung" onclick="hitung()">
</form>
function hitung() {
var x = document.calculasi.x.value;
var y = document.calculasi.y.value;
var hasil = x * y;
document.write("Hasilnya adalah=" + hasil)
}
</script>
<p> </p>
<form name="komen" method="post" action="java.html">
<p>Nama : <input name="nama" type="text" size="35"></p>
<p>Email : <input name="email" type="email" size="35"></p>
<p><input type="submit" name="submit" value="Cetak" onclick="cetak()"></p>
</form>
function cetak() {
var n = document.komen.nama.value;
var e = document.komen.email.value;
document.write("Nama anda :" + n )
document.write("Email anda :" + e )
}
</script>

Keterangan :
Font yang bergaris tebal saling berhubungan dengan object yang lain.
Var adalah pemberian nilai variabel bebas
Function hitung() (maksudnya memberikan fungsi dari suatu perintah hitung pada element
button pada form).
Var x dan Var y (maksudnya memberikan nilai variabel bebas dan x adalah nilai masukkan).
Var hasil=x*y (maksudnya hasil perhitungan dari kedua nilai variabel tersebut dan hasil adalah
nilai hitung).
Document.write (maksudnya mencetak sebuah karakter huruf atau angka).

Daftar Operator assignment

TUGAS !
1. Buatlah sebuah halaman web dengan isi content JavaScript “mencetak hasil
penjumlahan dan perkalian dari 3 bilangan”. Dengan Rumus NA=X+Y*A, dengan variabel
1 adalah X, variabel 2 adalah Y, variabel 3 adalah A dan NA adalah variabel hasil !
2. Buatlah sebuah halaman web dengan isi content JavaScript “Mencetak Komentar”
apabila form belum terisi terdapat peringatan autentikasi bahwa form tersebut belum
terisi !

BIODATA PENULIS

Penulis yang bernama asli Deka Mukhamad Wildan ini menamatkan dirinya dari SMK Bhakti
Nusantara Boja Kendal tahun 2011 jurusan Teknik Komputer dan Jaringan (TKJ), yang beralamat
di Boja juga. Sekarang ini penulis bekerja di SMK Bhakti Nusantara sebagai staff Tata Usaha
sekaligus admin dari website www.smkbhinus.net sejak bulan Agustus 2011, sambil mengajar
juga di kelas 1 program keahlian Rekayasa Perangkat Lunak (RPL) tentang pemrograman web.
Penulis juga masih aktif sebagai mahasiswa STEKOM Semarang angkatan 2012, mengambil
Program studi D3 jurusan Teknik Komputer. Hobi penulis yaitu belajar ilmu komputer apa aja
yang penting tentang komputer, lalu Bermain bola Voly, Nonton TV, Facebookan, dan surfing di
internet.

Dasar Pemrograman Javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Dasar Pemrograman Javascript

Similar to Dasar Pemrograman Javascript (20)

More from Deka M Wildan

More from Deka M Wildan (20)

Dasar Pemrograman Javascript