Pengenalan
JavaScript
Pengenalan JavaScript
Apa itu JavaScript?
• JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
• JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.
• JavaScript biasanya disisipkan langsung pada halaman HTML.
• Client Side scripting.
• Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu
dari bahasa maupun dari konsep dan disainnya.
• JavaScript bersifat Case Sensitive.
Pengenalan JavaScript
• Nama resmi JavaScript : ECMAScript.
• ECMAScript dikembangkan oleh ECMA Organization.
• ECMA-262 adalah standar resmi JavaScript.
• Diciptakan oleh Brendan Eich. Muncul pertama kali di semua browser
Netscape dan Microsoft pada tahun 1996.
• Disetujui sebagai standar internasional pada tahun 1998.
Keunggulan JavaScript
• JavaScript dapat menempatkan text secara dinamis pada halaman HTML.
• JavaScript dapat dieksekusi berdasarkan event tertentu.
• JavaScript dapat membaca dan menuliskan elemen-elemen HTML.
• JavaScript dapat digunakan untuk memvalidasi data dari form, sebelum
dikirimkan ke server.
• JavaScript dapat digunakan untuk mendeteksi browser pengunjung website.
• JavaScript dapat digunakan untuk menyimpan dan mengambil informasi
dari komputer pengunjung website.
Penggunaan JavaScript
• Menggunakan tag HTML <script>
Contoh
<script type=“text/javascript”>
...
...
</script>
Penempatan JavaScript
• Ditempatkan pada tag <head>
• Ditempatkan pada tag <body>
• Ditempatkan pada tag <head> dan <body>
• Sebagai file external.
JavaScript pada Tag <head>
• Dengan menempatkan sintax JavaScript pada tag head, tidak akan
mengganggu isi dari halaman web karena semua script disatukan pada
satu tempat.
Contoh :
JavaScript pada Tag <body>
Contoh :
JavaScript Sebagai File External
• Jika ingin menjalankan script JavaScript yang sama di banyak halaman,
gunakan JavaScript sebagai file independen.
• Simpan file tersebut dengan ekstensi .js
Contoh :
Penggunaan JavaScript External
File Contoh1.js
File html
Hasil
Variabel
• Aturan penulisan Variabel :
• Nama variabel bersifat Case Sensitive
• Harus dimulai dengan huruf atau karakter underscore.
• Deklarasi Variabel dengan statement var
• var nama;
• var nama=“Iklima”;
• Variabel yang tidak dideklarasikan, tapi langsung dengan struktur nama
variabel dan nilai :
• nama=“Iklima”;
• x=y+5;
Variabel
• Hasil :
• Contoh :
Operator Aritmatika
• Macam-macam Operator Aritmatika pada JavaScript
Operator Deskripsi Contoh Hasil
+ Penjumlahan x = 5 + 2; x=7
- Pengurangan x = 10 – 2; x=8
* Perkalian x = 5 * 4; x = 20
/ Pembagian x = 10 / 2; x=5
% Modulus x = 5 % 2; x=1
++ Increment x++; x = x+1
-- Decrement x--; x = x-1
Contoh
• Penggunaan operator + pada string.
Contoh : Hasil :
Contoh
x=5+5;
10
document.write(x);
Jika menggabungkan
x="5"+"5"; 55 angka dengan string,
document.write(x); maka hasilnya akan
string.
x=5+"5";
55
document.write(x);
x="5"+5; 55
document.write(x);
Operator Assigment
• Macam-macam operator Assigment pada JavaScript.
Operator Contoh Sama Dengan Hasil
= x = “Belajar JS”; x = Belajar JS
+= x += 6; x = x + 6; x=8
-= x -= 2; x = x - 2; x=6
*= x *= y; x = x * y; x = 20
/= x /= 2; x = x / 2; x=5
%= x %= y; x = x % y; x=1
Contoh
• Penggunaan operator Assigment
Contoh : Hasil :
Komentar
• Digunakan untuk menerangkan script JavaScript yang dibuat.
• Mencegah script tersebut dieksekusi oleh browser.
Macam-macam komentar.
• Single Line
• Dimulai dengan karakter : //
• Multi Line
• Dimulai dengan karakter : /*
• Diakhiri dengan karakter : */
• Contoh :
/*
document.write(“Script ini tidak akan dieksekusi”);
*/
Operator Pembanding
• Macam - macam operator pembanding
• Misal nilai x = 5.
Operator Deskripsi Contoh
== Sama dengan x == 8 salah
=== Sama persis dengan ( tipe data dan nilai ) x === 5 benar
x === “5” salah
!= Tidak sama dengan x != 8 benar
> Lebih besar dari x > 8 salah
< Lebih kecil dari x < 8 benar
>= Lebih besar sama dengan dari x >= 8 salah
<= Lebih kecil sama dengan dari x <= 8 benar
Operator Logika
• Macam – macam operator logika
• Misal nilai x = 6, dan y = 3.
Operator Deskripsi Contoh
&& Dan (and) (x < 10 && y > 1) benar
|| Atau (or) (x == 5 || y == 3) benar
! Tidak (not) !(x==y) benar
Pengkondisian
• Pada JavaScript terdapat beberapa macam pengkondisian
• if (kondisi)
• Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai
true.
• if (kondisi1) else (kondisi2)
• Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai true,
dan kondisi lain bernilai false.
• if (kondisi1) else if (kondisi2) else (kondisi3)
• Gunakan statement ini untuk memilih satu dari banyak kondisi.
• switch
• Gunakan statement ini untuk memilih satu dari banyak kondisi.
Pengkondisian
• if statement Sintaks
if (kondisi)
{
aksi
}
Contoh : Hasil :
Pengkondisian
• if (kondisi1) else (kondisi2)
Sintaks
if (kondisi)
{
aksi
}
else
{
aksi
}
Pengkondisian
• if (kondisi) else
Contoh Hasil
Pengkondisian
• if (kondisi1) else if (kondisi2) else (kondisi3)
Sintaks
if (kondisi1)
{
dieksekusi jika kondisi1 bernilai true
}
else if (kondisi2)
{
dieksekusi jika kondisi1 false dan kondisi2 true
}
else
{
dieksekusi jika kondisi1 dan kondisi2 false
}
Pengkondisian
• if (kondisi1) else if (kondisi2) else (kondisi3)
Contoh Hasil
Pengkondisian
• Switch
Sintaks
switch (n)
{
case 1 : { aksi 1 } break;
case 2 : { aksi 2 } break;
default : { aksi default }
}
• n adalah variabel
• Gunakan break untuk mencegah case berikutnya tereksekusi otomatis.
Pengkondisian
• Switch
Contoh Hasil
Ternary
• Menggunakan tanda “?”
• Merupakan model penyederhanaan dari if...else
•Sintaks
Cocok untuk melakukan proses pengisian variabel suatu hasil pengujian.
namaVariabel = (kondisi)? Nilai1 : Nilai2;
Contoh Hasil
Pengulangan
• Pada JavaScript, ada dua macam pengulangan :
• FOR, pengulangan sebanyak jumlahyang ditentukan,
• WHILE, pengulangan sampai bertemu kondisi “true”.
Pengulangan - for
• Sintaks
for (var=startValue; var<=endValue; var=var+increment)
{
source code
}
• Contoh Hasil
Pengulangan - while
var=startValue;
• Sintaks
while (var<=endValue)
{
source code
}
• Contoh Hasil
Pengulangan For...In
• Sintaks For...In melakukan pengulangan sebanyak elemen array atau sebanyak properti dari
suatu objek.
• Contoh Hasil
Break Statement
• Perintah break akan menghentikan pengulangan dan akan mengeksekusi sintaks berikutnya
setelah pengulangan.
• Contoh Hasil
Continue Statement
• Perintah continue akan melewati value pengulangan yang ditentukan, kemudian
melanjutkan ke value berikutnya.
• Contoh Hasil
Fungsi
• Sintaks
function namaFungsi(parameter1, parameter2, ... parameterN)
{
......
}
• Contoh
Fungsi – Return value
• Contoh fungsi dengan return value Hasil
Event Handler
• Event adalah aksi yang dilakukan user terhadap elemen HTML yang dapat dideteksi
oleh JavaScript.
• Setiap elemen di halaman web memiliki event tertentu yang dapat memicu
JavaScript.
• Event didefinisikan dalam atribut tag HTML.
• Event digunakan dalam kombinasi dengan fungsi, dan fungsi tersebut tidak akan
tereksekusi sebelum event tersebut terjadi.
• Syntaknya : nama_event = “kode javascript”
• Contoh :
Jenis-jenis event
• onblur • onmousemove
• onchange • onmouseout
• onclick • onmouseover
• ondblclick • onmouseup
• onreset
• onerror
• onresize
• onfocus • onselect
• onkeydown • onsubmit
• onkeypress • onunload
• onkeyup
• onload
• onmousedown
Event onclick
Contoh berikut, tombol jika dklik akan muncul window alert
Contoh berikut, jika diklik radio button akan mengubah warna latar belakang jhalaman web
Event – onLoad onUnload
• onLoad
• Event yang terjadi saat memasuki suatu halaman.
• Biasanya dipakai untuk mendeteksi browser yang dipakai.
<body onLoad=“alert(‘Halaman ini telah selesai di
loading.’)”>
Ini halaman web.
</body>
• onUnload
• Event yang terjadi saat keluar dari suatu halaman.
• Biasanya dipakai untuk menghapus cookie atau session.
<body onUnload=“alert(‘Terima Kasih telah berkunjung.’)”>
</body>
Event - onChange
• Event yang terjadi bila nilai suatu elemen berubah.
• Contoh
Event – onMouseOver dan
onMouseOut
• OnMouseOver : Event yang terjadi ketika kursor berada di atas suatu elemen/
objek.
• OnMouseOut : Event untuk mendeteksi ketika kursor keluar dari objek/elemen
Hasil
• Contoh
Popup Box
• JavaScript memiliki tiga macam Popup Box, yaitu :
• Alert box
• Biasanya digunakan untuk memberikan informasi ke pengguna.
• Confirm box
• Biasanya digunakan apabila aplikasi membutuhkan verifikasi atau persetujuan dari
pengguna.
• Prompt box.
• Biasanya digunakan apabila aplikasi ingin pengguna memasukkan dahulu suatu nilai
sebelum memasuki suatu halaman.
Popup Box - Alert
• Contoh Hasil
Popup Box - Confirm
• Contoh
• Hasil document.location.href
Sintaks JavaScript untuk mengalihkan browser ke
halaman yang dituju (redirect).
var konfirmasi = confirm();
Jika tombol “OK” yang ditekan, maka confirm akan
mengisikan nilai “true” ke variabel konfirmasi,
sebaliknya “false” jika tombol “Cancel” yang
ditekan.
Popup Box - Prompt
• Sintaks
prompt(“text”,”nilaiDefault”);
• Contoh Hasil
Popup Box - Prompt
bil1 = prompt(“Bilangan 1”,”0”);
• Penjelasan
Fungsi prompt akan mengisikan nilai yang diinput oleh pengguna ke variabel bil1. Tipe data yang
dikeluarkan oleh prompt bertipe string.
jml = bil1 + bil2;
jml berisi nilai “00” karena bil1 dan bil2 bertipe string. Tanda plus “+” jika digunakan pada tipe string,
maka akan menempelkan isi dari dua variabel tersebut (concat).
• Konversi tipe data
jml = parseInt(bil1) + parseInt(bil2);
jml berisi nilai “0” karena tipe data bil1 dan bil2 dikonversi menjadi integer.
Tugas
Buatlah sebuah halaman web yang menampilkan pilihan objek berupa
Bola, Lingkaran dan Balok.
Jika dipilih salah satu objek diatas, maka akan muncul field isian ukuran
awal, misal : Bola dan lingkaran, maka akan muncul pilihan ukuran jari-
jari/diameter.
Silahkan explore tampilan semenarik dan interaktif mungkin
menggunakan javascript.
TERIMA KASIH
