Javascript
JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.
Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped dan berorientasi objek.
A. Fungsi JavaScript Dalam Pemograman Web
JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.
Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.
Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.
Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.
B. Struktur JavaScript
Struktur dari JavaScript adalah sbb :<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar Dasar-Dasar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo Sahabat Sampul Ilmu”)
Letak JavaScript dalam HTML
Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).
Contoh Dasar-Dasar JavaScript
Sebelum mencoba belajar JavaScript Terlebih dahulu buatlah halaman HTML di komputer anda.
atributya berikut ini:
<script language="JavaScript" type="text/javascript">
Script dapat diletakkan di tag <body> dan ataudi tag <head> pada bagian halaman HTML.
Script di tulis pada bagan <body>
Contoh :
<!DOCTYPE html>
<html>
<body>
...
<scriptlanguage=”JavaScript” type=”text/javascript”>document.write(“<h1> Belajar Javascript</h1>”);</script>
...
</body>
</html>
Penulisan Fungsi pada Javascript
Contoh :
<!DOCTYPE html>
<html>
<head>
<scriptlanguage=”JavaScript” type=”text/javascript”>
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, fungsijavascript diletakkan di tag <body> pada halaman HTML.Fungsiakan dipanggil ketika tombol diklik.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web</h1>
<p id="coba">A Paragraph</p>
<button type="button" onclick="cobafungsi()">Coba</button>
<scriptlanguage=”JavaScript” type=”text/javascript”>
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 memberikanpenjelasan 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.";
C. Variabel Dalam JavaScript
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 diawalai 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.
Contoh :
| var nama = ” Zaskia Mecca”
var X = 1998; var Y; |
Nama = ”Bunga Lestari”
X = 1990; Y = 08170223513 |
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 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
Operator pada JavaScript terbagi menjadi enam, yaitu :
- Aritmatika
- Pemberian nilai (Assign)
- Pemanipulasian bit (bitwise)
- Pembanding
- Logika
- String
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 |
+
|
Biner | Penjumlahan |
-
|
Biner | Pengurangan |
*
|
Biner | Perkalian |
/
|
Biner | Pembagian |
%
|
Biner | Modulus |
-
|
Tunggal | Negasi |
++
|
Tunggal | Penambahan dengan satu |
--
|
Tunggal | Pengurangan dengan satu |
b. Operator Pemberian Nilai
Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu operan.
| Operator | keterangan | Contoh | Ekuivalen |
=
|
Sama dengan | X=Y | |
+=
|
Ditambah dengan | X+=Y | X=X+Y |
-=
|
Dikurangi dengan | X-=Y | X=X-Y |
*=
|
Dikali dengan | X*=Y | X=X*Y |
/=
|
Dibagi dengan | X/=Y | X=X/Y |
%=
|
Modulus dengan | X%=Y | X=X%Y |
&=
|
Bit AND dengan | X&Y | X=X&Y |
|=
|
Bit OR | X|=Y | X=X|Y |
c. Operator Manipulasi Bit
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan bulat.
| Operator | Keterangan |
| & | Bit AND |
| | | Bit OR |
| ^ | Bit XOR |
| ~ | Bit NOT |
| << | Geser ke kiri |
| >> | Geser ke Kanan |
| >>> | Geser ke kanan dengan diisi nol |
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<< 2
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.
| Operator | Keterangan |
| == | Sama dengan |
| != | Tidak sama dengan |
| > | Lebih besar |
| < | Lebih kecil |
| >= | Lebih besar atau sama dengan |
| <= | Lebih kecil atau sama dengan |
e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
| Operator | Keterangan |
| && | Operator logika AND |
| || | Operator Logika OR |
| ! | Operator logika NOT |
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 |
<HTML> <HEAD><TITLE>Operasi Aritmatika</TITLE></HEAD> <BODY> <P><SCRIPT language="JavaScript"> <!-- document.writeln("<PRE>"); document.writeln("<H1>Operasi Aritmatik</H1>"); var A = "100"; var B = "200"; var C = 300; var D = 400; var E = A + B; document.writeln('"100" + "200" = ' + E); E = B + C; document.writeln('"200" + 300 = ' + E); E = C + D; document.writeln('300 + 400 = ' + E); document.writeln("<PRE>"); //--> </SCRIPT></P> </BODY> </HTML> |
Untuk memasukkan data dari keyboard dapat dilakukan dengan menggunakan perintah input.
| Contoh Program JavaScript |
<HTML> <HEAD><TITLE>Memasukkan Bilangan</TITLE></HEAD> <BODY> <P><SCRIPT language="JavaScript"> <!-- function jumlah() { var bil1 = parseFloat(document.fform.bilangan1.value); if (isNaN (bil1)) bil1=0.0; var bil2 = parseFloat(document.fform.bilangan2.value); if (isNaN (bil2)) bil2=0.0; var hasil = bil1 + bil2; alert ("Hasil Penjumlahan = " + hasil); } //--></SCRIPT></P> <FORM NAME ="fform"> <H1><BR>Memasukkan Data Lewat Keyboard</H1> <PRE> Bilangan Pertama :<input type="text" size="11" name="bilangan1"> Bilangan Kedua :<input type="text" size="11" name="bilangan2"> </PRE> <P> <INPUT TYPE="button" value="Jumlahkan" onclick="jumlah()"> <INPUT TYPE="reset" value="Ulang"> </FORM> </BODY> </HTML> |
D. Percabangan
Pada dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan yaitu if..else dan switchIf..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
}
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.
D.
Perulangan
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 |
<HTML> <HEAD><TITLE>Latihan Perulangan I</TITLE></HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script dan browser non-JS document.writeln("<H2>Latihan Perulangan For</H2>");
document.writeln("------------------------------------------------");
for (i=1; i<=10; i++) {
sq=i*i; document.writeln("<PRE>");
document.write("Angka:" + i + " -----> Kuadrat: " + sq + "<BR>");
document.writeln("</PRE>");
} document.writeln("------------------------------------------------");
// akhir dari penyembunyian --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> |
Perulangan While
Perulangan lain yang dapat digunakan adalah dengan menggunakan perintah While. Perintah while digunakan untuk perulangan yang tidak diketahui berapa kali proses perulangannya. Perintah while terus mengulangi loop selama kondisi memiliki nilai true. Syntax untuk perintah while adalah sebagai berikut :
while (kondisi)
{
ulang pernyataan ini;
}
| Contoh Program JavaScript
|
<HTML> <HEAD><TITLE>Latihan Perulangan II</TITLE></HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script dan browser non-JS var deret = prompt('Masukkan Jumlah Deret :','');
document.writeln("<H2>Latihan Perulangan While</H2>");
document.writeln("------------------------------------------------");
document.writeln("<BR>");
var jml = 0.0; var angka = 1; while (angka <= deret) {
jml= jml+angka; angka++ } document.writeln("<BR>");
document.writeln("Jumlah Deret dari 1 sampai "+deret+" adalah = “+jml);
document.writeln("<BR>");
document.writeln("------------------------------------------------");
// akhir dari penyembunyian --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> |
5.4 Perulangan Do While
Perulangan ini hampir sama seperti while, digunakan apabila kita belum tahu berapa kali perulangan harus dilakukan. Bedanya pernyataan do..while pengujiannya dilakukan di akhir pernyataan.
Do
{
//pernyataan1 dieksekusi
}
while (kondisi);
Anda Dapat melihat video di link di bawah ini untuk belajar mengenai javaScript
https://www.youtube.com/playlist?list=PLCZlgfAG0GXAiH1acKFPx8EtpJAq44gjP
