Modul praktikum Javascript 1

Pendahuluan
1.1 Pengantar
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa
ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape
Navigator 2. 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 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) Java script ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang digunakan adalah
.
Perintah tersebut biasanya diletakkan diantara Tag …
Contoh Penulisan :





kode HTML disini


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

Diantara tag dan


Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan dipanggil melalui suatu
file HTML
File isi.js
document.writeln("");
document.writeln("

---

");
document.writeln("

UNIVERSITAS PURWAKARTA

");
document.writeln("

FAKULTAS TEKNIK dan ILMU KOMPUTER

");
document.writeln("

JURUSAN TEKNIK INFORMATIKA

");
document.writeln("

---

");
document.writeln("

");
File HTML


Contoh ini menggunakan Javascript yang diambil dari File lain..

Variabel Dalam JavaScript
2.1 Variabel Dalam JavaScript
Variabel adalah tempat dimana kita menyimpan nilai-nilai atau informasi-informasi pada JavaScript.
Variabel yang dideklarasikan dapat di isi dengan nilai apa saja. Dalam JavaScript pendeklarasian
sebuah variabel sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal tersebut tidak
menjadi masalah. Jika anda memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa
anda telah mendeklarasikan variabel tersebut. 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.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai
Contoh :
var nama;
var nama = ” Zaskia Mecca”
var X = 1998;
var Y;
Nama = ”Bunga Lestari”
X = 1990;
Y = 08170223513
2.2 Tipe Data
Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data secara explisit. Hal
ini dapat dilihat dari beberapa contoh variabel diatas. Anda mendeklarasikan variabel tapi tidak
menentukan tipenya. Meskipun JavaScript tidak memiliki tipe data secara explisit. JavaScript
Modul praktikum Javascript 3
mempunyai tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript
yaitu :
• Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb
• String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece Kirani” dsb
• Boolean, bernilai true atau false
• Null, variabel yang tidak diinisilisasi
2.3 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.
Contoh :
var A = 100;
var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi ilmiah (notasi E).
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;
2.4 Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda
petik tunggal (’) atau tanda petik ganda (”) Contoh :
var str =’Contoh deklarasi string’;
var str1 = ”cara ini juga bisa untuk menulis string”;
2.5 Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan untuk mengecek
suatu kondisi atau keadaan. Contoh :
var X = (Y > 90);
contoh diatas menunjukkan bahwa jika Y lebih besar dari 90 maka X akan bernilai True.
2.6 Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal (inisialisasi).
2.7 Operator
Operator pada JavaScript terbagi menjadi enam, yaitu :
• Aritmatika
• Pemberian nilai (Assign)
• Pemanipulasian bit (bitwise)
• Pembanding
• Logika
• String
a. Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik, yaitu operator numerik
tunggal dan operator aritmatik biner. Perbedaan kedua operator terletak pada jumlah operan yang
harus dioperasikan. Operator Tunggal/Biner Keterangan
Modul praktikum Javascript 4
b. Operator Pemberian Nilai
Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu
operan.
Operator keterangan Contoh Ekuivalen
c. Operator Manipulasi Bit
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan
bulat.
Contoh :
var A = 12; // A = 1100b
var B = 10; // B = 1010b
var C = A & B
maka akan dihasilkan bilangan seperti berikut :
1100b
1010b AND
1000b
var A = 12;
var C = A<<>
var D = A >> 1
maka variabel C akan bernilai 48(0011 0000b)
variabel D akan bernilai 6 (0110b)
d. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini
dapat bertipe string, numerik, maupun ekspresi lain.
e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
Modul praktikum Javascript 5
Contoh :
var A = true;
var B = false;
var C = A && B; //menghasilkan false
var D = A || B ; // false
var E = !A; //false
f. 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.
Contoh :
nama = ”Java” + ”Script”;
akan menghasilkan ”JavaScript” pada variabel nama
Contoh Program JavaScript

2. 8 Memasukkan Data
Untuk memasukkan data dari keyboard dapat dilakukan dengan menggunakan perintah input.
Contoh Program JavaScript

Memasukkan Data Lewat Keyboard

Bilangan Pertama :

Bilangan Kedua :

latihan :
• Modifikasi program sebelumnya agar dapat melakukan operasi pengurangan, perkalian dan
pembagian !!
Objek JavaScript
3.1 Objek Untuk memasukkan Data
Terdapat beberapa objek yang dapat digunakan untuk memeasukkan 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.
3.2 Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh penggunaannya
dapat kita lihat pada contoh berikut :
Contoh Program JavaScript

Memasukkan Data Dengan Objek Teks

---

Nama Anda : 

Alamat : 

Output

Jadi Nama Anda adalah :

Alamat Anda di :







Modul praktikum Javascript 7

3.3 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]. Disamping itu objek

radio juga mempunyai nili True jika dipilih dan False jika tidak. Untuk memilih suatu objek radio

menggunakan properti Checked.

Contoh Program JavaScript











 Memasukkan Data Dengan Objek Radio


Wanita













3.4 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya

hampir sama seperti objek radio.

Contoh Program JavaScript











 Memasukkan Data Dengan Objek Checkbox


Hobby anda :

Nonton Sepak Bola

Nonton televisi





onclick="radio_box(this.form)">









3.5 Objek TextArea

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

baris.

Contoh Program JavaScript











 Memasukkan Data Dengan Objek TextArea


Keterangan :













Output Keterangan :









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

Contoh Program JavaScript











 Penggunaan Objek Select


Masukan :


Jurusan Di UNPUR :

 Teknik

Informatika 

 Manajemen

Informatika 

 Teknik Komputer



 Teknik Industri



 Teknik Elektro



 Teknik Sipil 

 Teknik Arsitektur





Perencanaan Wil. Kota 







Output jurusan :









Percabangan

4.1 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

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

{

Modul praktikum Javascript 10

//pernyataan1 dieksekusi

//bila kondisi1 terpenuhi

}

else if (kondisi2)

{

//pernyataan2 dieksekusi

//bila kodisi1 tidak terpenuhi

}

else

{

//pernyataan3 dieksekusi

//bila kodisi2 tidak terpenuhi

}

Contoh Program JavaScript












Bilangan Negatif, Nol, Atau Positif ???

Masukkan Bilangan :





 







Hal.21

4.3 Contoh Kasus

Perusahaan Travel ”Bintang Abadi” mempunyai armada dengan tujuan :

Modul praktikum Javascript 11

Contoh Program JavaScript

























Travel Bintang

Abadi




Nama :

Tujuan :

Jakarta

Cirebon

Tasikmalaya



Jumlah Tiket :

Member :Ya


Harga Tiket :

Sub Total :

Diskon :

Total Bayar :



















4.5 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











Penggunaan Percabangan Switch




Masukkan Nomor Bulan [1-12] :

name="ibulan">



TYPE="reset" value="Ulang">









Perulangan

5.1 Perulangan

Untuk mengulang kejadian beberapa kali maka kita membutuhkan proses perulangan. Pada

JavaScript dikenal beberapa metode/cara perulangan.

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

Contoh :

for (nilai awal;kondisi;penambahan)

{

ulang pernyataan ini;

}

Contoh dalam program :

For(x=1;x<=10;x++)

{

document.writeln(”Belajar JavaScript Yuuuuu..”);

}

Contoh Program JavaScript







Modul praktikum Javascript 14









Kejadian (Event)

6.1 Kejadian (Event)

Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa bentuk

kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data, pengguna mengklik

tombol dan sebagainya. Hal-hal tersebut diatur oleh even. Semua kejadian pada Javascript dapat anda

tangani dengan menentukan kejadiannya. Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada

beberapa kasus, kita dapat menuliskan pernyataan-pernyataannya secara langsung. Berikut ini adalah

daftar kejadian(even) pada JavaScript :

6.2 Penanganan Kejadian (Event)

Berikut ini akan diberikan beberapa contoh program-program yang menggunakan kejadian-kejadian

dalam aplikasinya.

Contoh program yang menggunakan even OnClick :

Contoh Program JavaScript







Latihan Event OnClick



Pilih warna favorit anda.



























'fanoff.gif'">



'fanon.gif'">











Contoh program yang menggunakan even OnBlur dan onFocus :

Contoh Program JavaScript







Latihan Event OnFocus dan OnBlur





R E G I S T R A S I

























NIM
:


onFocus="window.status='Silahkan Mengisi NIM Anda';"

onBlur="masukannim()">


NAMA
:


onFocus="window.status='Silahkan Mengisi Nama Anda';"

onBlur="masukannama()">


ALAMAT
:


onFocus="window.status='Silahkan Mengisi Alamat Anda';"

onBlur="masukanalamat()">

















Contoh program yang menggunakan even onLoad dan onUnload

Contoh Program JavaScript







Latihan Event OnLoad dan OnUnLoad





SELAMAT DATANG





Sekarang Menunjukkan Jam















Contoh program yang menggunakan even onSubmit

Contoh Program JavaScript


























S e a r c h -

E n g i n e



Cari pakai




Modul praktikum Javascript 18

Value="Ulang">




>











Berikut diberikan contoh event submit yang terjadi pada form pengisian data guestbook yang

hasilnya akan dikirim ke suatu email.

Contoh Program JavaScript









action="mailto:irawan@unikom.ac.id?subject=Form">

























G u e s t B o o k


Nama Anda :




Email Anda :




Komentar Anda :







onClick="isiform(this.form)">






Terima Kasih Telah Mengisi

Guest Book 











Manipulasi Gambar

Contoh Program JavaScript











width="150">


Previous

Next







Marquee dan Frame

7.1 Membuat Marquee

Contoh Program JavaScript











Latihan Marquee Dengan

JavaScript















7.2 Membuat Frame

Halaman UTAMA.HTML

Contoh Program JavaScript

Modul praktikum Javascript 21



















Halaman MENU.HTML

Contoh Program JavaScript













Pilih latihan Dibawah Ini



Matematika

Objek teks

Objek Select

Objek Check









Halaman AWAL.HTML

Contoh Program JavaScript







Halaman ini dengan menggunakan

Frame

Design By Hartini

Email :

tienythea@gmail.com