Konsep Dasar Javascript

20 Sep 2011

Haiii guys,, beberapa waktu lalu beberapa teman gw meminta gw untuk membuat postingan tentang Javascript, yup, sebenernya ini bukan postingan pertama gw tentang Javascript, tapi gini aja. postingan ini gw peruntukan untuk yang awam sekali dan belum pernah menggunakan Javascript. Tentu gw bukanlah yang ahlinya tapi gw coba untuk berbagi ilmu yang gw miliki, hehee,,, langsung aja kita ke materi.

Gw gak mau basa - basi mengenai sejarah Javascript, kalian bisa cari di blog lain, tapi mungkin hanya sekedar pengetahuan aja kalo Javascript di ciptakan dan dikembangkan SunMicrosystem sekitar tahun 1995an lah (cari lagi ya referensinya) hehe,, nahh kalo di Web, Javascript berjalan disisi client, browser sendiri lah kompiler si JS ini, sama kayak HTML, tapi Javascript adalah bahasa program,, Penggunaannya sendiri di Web adalah untuk mempercantik, membuat web menjadi interaktif dan penggunaan yang userfriendly. Javascript adalah OOP (Object Oriented Program). mungkin karena turunan si JAVA sendiri hahaha *sok tau gw*.. OOP tuh jadi, program yang bisa berinteraksi langsung dengan Objek - objek di dalamnya, setiap Objek memiliki karakteristik (Properties) dan sifat - sifat khusus (Behaviors)..

Yasudahlah,, mungkin buat kalian yang gak punya dasar pemrograman akan sulit mengerti penjelasan di atas,, suatu saat kalian akan paham dengan sendirinya hahahaha,, *serius ihh* haha,, okelah sekarang kita langsung ke penggunaannya aja,, hehe

Penulisan Program Javascript

Hmm,, Javascript itu kan bahasa Client yang di terjemahkan di Browser, jadi kalian gak butuh kompiler2 khusus seperti pemrograman yang lain, cukup ketik di notepad, simpan dengan format *HTML,, atau *JS, tapi kalo mau pake format *JS tetap harus di jalankan di format *HTML atau *PHP, kalo yang format *PHP nanti dulu dehh, sekarang kita belajar di format *HTML dulu yaa,, mudah kan.. Javascript di tulis di dalam tag ini…

<script language="javascript"> Program Javascript disini </script>

Javascript menganut sistem Sensitive Case, jadi penulisan kode sangat sensitif, getElementById berbeda dengan getelementbyid, Var berbeda dengan var.. Oh ya penulisan program bisa di katagorikan menjadi 3, tapi gw lupa istilahnya,, jadi gw pake istilah gw dulu ya (INGET : Ini istilah yang gw pake, nanti mohon di cari istilah yang benernya).. sbb : 1. On Document, 2 Different Document, dan 3. Event Handler, nahh apaan sihh itu.. let me explain you more..

On Document

Kalo ini udah jelas, javascript langsung di tulis di dokumen yang sama, Jadi HTML + JS di simpan di dokumen yang sama, contoh sebagai berikut..

<html>

<head>

<title>Contoh JS on document</title>

</head>

<body>

<p>Ini Teks HTML biasa…</p>

<script>

alert(’Ini teks dalam Javascript’);

</script>

</body>

Jadi kalo di jalanin di browser ya kayak gini munculnya,, oh ya kalo ada notifikasi di browsernya kalo ada script yang minta diajalanin di Allow aja ya, hehe

Different Document

Nahh kalo yang ini Javascriptnya di pisah di dokumen lain, terus di panggil ke dokumen utama untuk di jalankan,, Javascript di simpan di file dengan eksternsi *JS, gak perlu pake Tag buka atau tutup dan gak perlu pembuka HTML di file *JS, karena itu udah di baca javascript keseluruhannya,, untuk manggil si file JS menggunakan tag seperti memulai JS tadi,,, begini…

<script src="filejs.js" type="text/javascript"></script>

Okeehh kita coba dulu yaa, kayak gini ceritanya, kalian punya file JS namannya latihan.js, lalu di panggil ke latihan.html gimana.. oke kita buat kayak gini..

file latihan.js

alert(’Hallo ini adalah pesan dari file JS yang dipanggil’);

file latihan.html

<html>
<head>
<title>Contoh JS different document</title>

<script src="latihan.js" type="text/javascript"></script>

</head>

<body>

<p>ini Teks HTML biasa…</p>

</body>

</html>

Terus jalanin yang latihan.html dahh,, nanti akan muncul seperti ini…

Event Handler

Kalo yang diatas kan pas kalian buka langsung jalan JSnya, karena scriptnya gak di kasih event handler,, jadi Event handler itu, js di eksekusi ketika ada suatu event / momen tertentu, misalnya ketika di klik, field di isi atau lainnya,, gampang kok.. contohnya seperti berikut

<hrml>

<head>

<title>Contoh JS event Handler</title>

</head>

<body>

<a href="#" onclick="alert(’Hallo. ini pesan dari JS Event Handler’)">Klik Disini…</a>

</body>

</html>

Oke sekarang buka file HTMLnya, nahh ada link kan,, lo klik dahh terus muncul alert kan.. hahah, begitulah JS hahaa

Ada beberapa event handler,, yaitu : onBlur, onClick, ondblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp dst…

Mengambil dan Mengedit nilai Properties Objek

Nahh di pembahasan ini, kita akan mempelajari bagaimana Javascript mampu mengambil dan mengedit properties / karakter objek.. okehh kita analogi gini aja dehh,,,

Di dalam Rumah ada Kamar, di dalam Kamar ada Lemari, di dalam Lemari ada Laci, di dalam Laci ada Dompet.

okehh udah nangkep kalimat di atas,, nahh si Dompet punya properties / karakter kayak gini..

Properties
Nama
Dompet
Warna
Cokelat
Isi
Rp 100.000,-

Nahh,, sekarang gimana kalo mau ngambil nilai proprerties, misal mau ngambil warnanya.. jadi kayak gini

warnaObjek = Rumah.Kamar.Lemari.Laci.Dompet.Warna;

Jadi variabel warnaObjek bernilai Cokelat

Gimana kalo kita mau ngubah nilai properties si Dompet, contoh kita mau mengubah nilai isi. Jadi gini

Rumah.Kamar.Lemari.Laci.Dompet.Isi = "Rp 150.000,-"

Sekarang nilai Isi menjadi Rp 150.000,-

Gimana, paham gak ?, sekarang kita kembali ke Javascript lagi, Kalo tadi rumah, kamar, lemari, laci,, sekarang istilahnya kita ubah,, kalo jendela browser jadi Window, terus dokumen / laman yang terbuka menjadi document, yang lainnya tergantung objek apa yang kalian gunakan, jadi diurut sesuai hierarki dari yang paling global sampe yang spesifik.. misal pake form, nanti ada Forms[], kalo pake ID ya getElementById() kalo pake name ya getElementByName, kalo masuk lagi nanti ngubah properties CSS langsung masuk ke style.cssproperties=nilai. oke dehh paling kalian bingung,, nah gini dehh,,

<form name="test" method="post" action="kemana_gituh.php">

<input field="text" name="a" value="Amri" style="background-color:#faa000;" id="a">

</form>

Nahh kalo mau ngambil nilainya, di JS jadi kayak gini..

var isinya = document.forms["test"].a.value;
(note : a didapat dari name bukan ID) atau

var isinya = document.getElementById(’a').value;
(note : a di dapat dari ID)

Kalo sekarang kalian mau ngupdate properties CSS menjadi seperti ini..

document.getElementById(’a').style.backgroundColor = ‘#ffaa00′;

Okehh gimana, mengerti kan bagaimana cara ngotak - ngatik properties objek menggunakan Javascript…

Penulisan Variabel

Sebelum itu kita pahami dulu apa itu Variabel, sebenernya di postingan Dasar Pemrograman PHP gw udah menjelaskan apa itu Variabel.. Ya variabel itu adalah Peubah, nilai dari satu Variabel tidak tetap atau tidak absolute, nilainya akan di simpan di memori secara temporari, jadi kalo kompie mati atau browser mati atau ke refresh nilai akan te-reset.. yup begitu,, tidak seperti JAVA atau turunan C# lainnya, di Javascript tidak perlu melakukan deklarasi Variabel, mirip seperti PHP jadi kita bisa menggunakan Variabel dimanapun, kapanpun dan jenis apapun sesuka kita.. tapi biasanya untuk menciptakan variabel baru menggunakan var, tapi ini bukanlah keharusan, cuma mengidentifikasikan bahwa ini adalah variabel. haha,, ada yang pake ada yang enggak, tergantung kalian aja, tapi kalo gw make sih,, biar refaktoringnya rapih hahaha.. berikut adalah beberapa contoh penulisan variabel di javascript..

var a = 10; // Valid

var b; // Valid

b = 10; // Valid

var c = 10, d = 20; // Valid

var 2c2 = // Tidak valid, tidak boleh dimulai dengan angka

var amri mm // Tidak valid, tidak boleh menggunakan spasi

amri_mm // valid

gimana, ngerti bagaimana menuliskan variabel di Javascript.. oh ya, kalo kita mau cetak variabel gimana, kalo di PHP kan gampang tinggal echo lalu nama variabelnya.. tapi gimana kalo di masukan ke string ??, contoh di PHP kayak gini kan (baca : Dasar Pemrograman PHP) <? $nama = "Amri Hidayatulloh" echo "Hallo $nama" ; ?> tapi di Javascript gak bisa kayak gitu,, kalo di PHP kan setiap variabelnya di mulai dengan tanda $ / string, di Javascript kita perlu menggunakan tanda plus (+) dan juga di pisah menggunakan tanda kutip (’).. bingung? kita liat contoh,,,

var nama = "Amri Hidayatulloh" ;

document.write(’Halloo ‘+nama);

Gampangkan,, aturannya kayak gitu,, jadi tanda plus (+) digunakan untuk menggabungkan.., contoh lainnya : document.write(’hasil penjumlahan dari ‘+a+’ dan ‘+b+’ adalah ‘+c); ,, okehh paham kan bagaimana kita mencetak variabel dalam suatu string

Ekspresi

Ekspresi pasti selalu ada di setiap bahasa program, jadi ekspresi itu adalah segala bentuk komputasi yang memberikan hasil nilai (menurut panduan C++ yang dikasih dosen pemrograman gw) hehe, biasanya digambarkan dengan berbagai operator, ada operator Aritmatika, Operator Relasi, Operator Logika, Increment dan Dekrement dan Assignment. Jadi, kita lanjut ke pembahasan..

Operator Aritmatika

Operator Aritmatika menggunakan Ekspresi matematika untuk sistem komputasi, jadi hasil di peroleh dari proses matematika dasar, berikut beberapa operator Aritmatika

Aritmatika
+
Penjumlahan
*
-
Pengurangan
3 -2 = 1
*
Perkalian
2 * 2 = 4
/
Pembagian
6 / 2 = 3
%
Modulus
10 % 3 = 1

Jika kalian mencoba menggunakan Operator Aritmatika, mungkin akan mendapatkan kesulitan ketika melakukan penjumlahan. Mungkin kalo pengurangan sampe modulus gak ada masalah, dan pasti berkerja dengan normal. Khusus buat penjumlahan (+), pasti hasilnya membingungkan kalian.. contoh..

var a = 123;

var b = 456;

var c = a +b;

Nilai variabel c adalah 123456;

Sudah aturannya kalo tanda plus (+) di gunakan untuk menggabungkan, sudah di jelaskan di atas kan,, jadi gimana dong kalo kalian mau menjumlahkan nilai ?,, kalo itu karakter, tinggal di jumlahkan aja, misalnya, kalian mau menambahkan emotion di textarea, jadi ketika di klik ikon emotionnya, di textarea sudah di tambah emosi. Tapi kalo nilai angka, bisa di akalin pake eval(), begini jadinya…

var a = 10;

var b = 20;

var c = eval(a) + eval(b);

Nilai variabel c adalah 30

Gimana ? udah paham, nah selebihnya sama aja, kalo pengurangan sampe modulus bisa menggunakan eval() bisa juga gak,, okeh lah…

Operator Relasi

Operator ini digunakan untuk membandingkan nilai yang satu dengan yang lain, biasanya di gunakan dalam kondisi program, nanti kita bahas maslah kondisi itu.. sekarang kita lihat operatornya

Relasi
==
Sama dengan
5 == 5
!=
Tidak Sama dengan
5 != 6
>=
Lebih Besar sama dengan
6 >= 5
<=
Kurang Dari sama dengan
5 <= 6
>
Lebih Besar
3 > 2
<
Kurang dari
2 < 3

Operator Logika

Operator ini hanya menghasilkan nilai True dan False, jadi sistem komputasi akan memeriksa kondisi yang diberikan menggunakan ekspresi ini.. ini dia operatornya..

Logika
!
Not
Negasi
&&
And
Dan
||
Or
Atau

Agak bingung yaa,, jadi sebenernya, operator logika akan mengoreksi suatu kondisi dengan tabel kebenaran, pernah belajar Logika Matematika ? itu di terapkan disini, jadi gini tabel kebenerannya,, 1 = true dan 0 = false.. ingetin yaaa…

p
!p
1
0
0
1


P
Q
P && Q
1
1
True
1
0
False
0
1
False
0
0
False






P
Q
P || Q
1
1
True
1
0
True
0
1
True
0
0
False

Increment dan Decrement

Hampir di seluruh bahasa program ada kondisi ini ada, Increment adalah operator untuk menambah 1 dari nilai dan decrement mengurangi 1, ada 2 penggunaan operator ini Prefix, yaitu variabel di proses dulu jika ada proses lainnya baru di tambah/dikurang 1 nahh kalo Postfix ditambah/dikurang 1 baru variabel di proses, gimana ?, nah ini operatornya..





Increment dan Decrement
i++
Increment (Prefix)
++i
Increment (Postfix)
i–
Decrement (Prefix)
–i
Decrement (Postfix)


Assignment Operator

Operator ini digunakan untuk menyimpan nilai ke ruas kiri, sedangkan ruas kanan di proses dengan operator aritmatika dengan nilai di ruas kiri. gimana bingung kan ?? hahah,, jadi gini dehh






Assigment
+=
a += b <=> a = a + b
-=
a -= b <=> a = a + b
*=
a *= b <=> a = a * b
/=
a /= b <=> a = a / b
%=
a %= b <=> a = a % b

Method

Method itu, gimana yaa,, gini dehh,, method itu adalah aksi yang akan di lakukan terhadap suatu selector atau object tersebut,, kita liat contoh..

window.print();

Jadi objek / selectornya adalah window / browser nahh methodnya print(),, artinya window akan di print ke device printer, widow disini adalah keseluruhan laman yang sedang dibuka.. gimana ?,, nahh ada beberapa method lainnya,, contoh..

print(); // untuk mencetak ke device printer

write(); // untuk mencetak / menulis ke dokumen / laman web, ex : write(string)

writln(); // untuk mencetak dan menciptakan baris baru pada laman web, ex : writeln(string)

select(); // untuk memilih suatu selector

focus(); // untuk memokuskan ke suatu selector

alert(); // untuk popup notifikasi, ex : alert(notif)

confirm(); // untuk popup konfirmasi, ex : confirm(message) , hasilnya true / false

dst,,,

Okeh lah mengenai method,, kita lanjut lagi aja dehhh hehee :) nanti kalian cari cari lagi aja yaaa,,

Kondisi

Pada dasarnya semua bahasa pemrograman pasti memiliki logika kondisi,hal ini digunakan pada saat komputer di hadapkan terhadap 2 pilihan, namun konputer harus memilih dan menjalankan salah satu sesuai dengan kondisi yang terjadi.. hmmm.. disini Operator Relasi dan Operator Logika digunakan untuk mengoreksi kondisi tersebut dengan membandingkan kedua syarat atau nilai yang ditentukan.. kita coba lihat contoh dibawah ini,,

  1. 8 != 10 //True
  2. 10 >= 12 //False
  3. 5 == 5 && 6 > 5 // True
  4. 5 >= 6 && 5 != 6 //False
  5. 6 <= 5 || 6 >= 4 //True
  6. 5 != 5 || 5 >= 6 //False

Sebenernya kalo kalian udah paham pemrograman konsep ini memang sama digunakan di berbagai pemrograman, mungkin gw gak ngejelasin di dasar pemrograman php tapi gw ngejelasinnya di sini aja,, sepintas kalian ngerti gak kenapa contoh yang pertama bernilai True yang kedua False dan seterusnnya.. mungkin kalo nomor 1 jelas, 8 tidak sama dengan 10 adalah benar (true) dan yang kedua 10 lebih besar sama dengan 12 pasti salah (false),, kita liat yang laiinya… inget - inget tabel kebenaran untuk operator logika yaaa,, lets gooo….

  • 5 == 5 (true) AND 6>5(true) == True
  • 5 >= 6 (false) AND 5!=6(true) == False
  • 6 <= 5 (false) AND 6>=4(true) == True
  • 5 != 5 (false) AND 5>=6(false) == False

Okehh,, udah paham yang diatas,, kita aplikasikan ke script sekarang,, yang pertama kita akan mendapatkan nilai dari sebuah variabel menggunakan kondisi yang menggunakan lambang (?), gw gak tau istilahnya,, tapi kita liat contoh penulisannya…

var = (kondisi) ? nilai/instruksi jika kondisi benar : nilai/instruksi jika kondisi salah ;

Okehhh begini, jadi nilai dari si var akan di tentukan dari kondisi, jika kondisi benar makan nilai akan diberikan pada kondisi ketika syarat terpenuhi dan juga sebaliknya,, oke dehh kita liat contoh kasusnya aja…


var a = 10;

var b = 20;

var c = (b > a) ? eval(b) - eval(b) : eval(b) - eval(a);

Nilai variabel c adalah 10…

Udah paham dengan bentuk yang diatas,, ??? sekarang kita lanjut ke kondisi IF, ELSE IF, ELSE,, gampang lah, gw gak akan jelasin panjang masalah yang ini, karena gw udah ngejelasin di Dasar Pemrograman PHP, yup gak akan jauh beda,,, sampe Switch, Case.. bentuknya akan sama… hanya bentuk variabelnya yang berbeda,, hehe


If(kondisi)

   Instruksi;

else

   Instruksi;

Atau


If(kondisi) {

   Instruksi;

}

else {

   Instruksi;

}

Jika kondisi lebih dari 2, gunakan Else If


If(kondisi1) {

   Instruksi;

}

else If(kondisi2) {

   Instruksi;

}

else {

   Instruksi;

}

Okehh,, mungkin cukup sampe situ aja masalah kondisi,, selebihnya silahkan anda kembangkan sendiri.. hehe

Looping

Nahh, kalo masalah Looping, kalian lirik lagi ya Dasar Pemrograman PHP, gak jauh beda… kalo disini kita juga akan membahas menggunakan For dan While… gak usahh basa - basi mengenai penjelasannya.. kita liat kasusnya aja dehhh….

Menggunakan For…


for(var i = 0;i<=10;i++) {

   document.write(i+’<br>’);

}

Kalo While…


var i = 0;

while(i<=10) {

i++;

   document.write(i+’<br>’);

}

Hmmm,, udah dehhh.. cukup sampe sini dulu,, sekarang kita liat contoh program simpel menggunakan Javascript.. lets gooo….

<script>

function jumlah() {

    var nilai1 = document.getElementById("a").value;

    var nilai2 = document.getElementById("b").value;

    var c = eval(nilai1) + eval(nilai2);

    document.getElementById("result").innerHTML = c;

}

</script>

<h2>Program Penjumlahan menggunakan Javascript</h2>

<pre>

Nilai 1 <input type="text" id="a">

Nilai 2 <input type="text" id="b">

          <input type="submit" value="Jumlahkan !" onclick="jumlah()">

Hasilnya    <span id="result"></span>

</pre>

Referensi gw dari C++ Programming, hehe,, gak nyambung ya,, tapi untuk beberapa istilah dan penjelasan gw sedikit nyontek, hehe oke lahh keep on writting guys! :)


TAGS tutorial javascript Javascript dasar javascript OOP bahasa oop object oriented program bahasa program sisi client konsep dasar javascript expresi di javascript logika dan kondisi di javascript


-

Author

Follow Me