Javascript dan Penggunaannya pada ASP.NET
Javascript dan Tutorial Penggunaanya pada ASP.NET
Javascript adalah salah satu bahasa pemrograman utama dalam Web Development selain HTML , CSS, bagi yang belum begitu mengetahui apa itu HTML dan CSS dapat dipelajari lewat artikel ini Pengertian HTML dan CSS bagi pemula.
Javascript merupakan salah satu bahasa tingkat tinggi, yang digunakan pada web programming.
Sesuai dengan Pengertian Javascript diatas, mari kita pelajari lebih dalam lagi.
Sesuai dengan Pengertian Javascript diatas, mari kita pelajari lebih dalam lagi.
Apakah sulit mempelajari Javascript? menurut saya pribadi jawabannya adalah TIDAK, bahkan menurut pengalaman pribadi saya sendiri Javascript merupakan bahasa yang paling menyenangkan untuk dipelajari pada pemrograman web.
Pada artikel kali ini kita akan fokus mengupas tuntas apa itu Javascript, mulai dari pengertian Javascript , komponen yang ada di dalam nya, tata cara penggunaan nya, pada artikel kali ini kita akan berfokus pada komponen apa saja yang ada pada Javascript, dan tata cara penerapan nya.
Pada artikel kali ini kita akan fokus mengupas tuntas apa itu Javascript, mulai dari pengertian Javascript , komponen yang ada di dalam nya, tata cara penggunaan nya, pada artikel kali ini kita akan berfokus pada komponen apa saja yang ada pada Javascript, dan tata cara penerapan nya.
Sebelum kita lanjutkan pembahasan, kita pastikan terlebih dahulu apakah semua tools yang kita butuhkan sudah dipenuhi oleh teman wawasanku sekalian. Untuk kelengkapan apa saja yang dibutuhkan dapat melihat artikel berikut Web Programming Starter Pack.
Kegunaan Javascript pada Website
Javascript merupakan script yang ditanamkan pada sebuah website , dimana script tersebut akan diletakan pada tag <head> pada HTML, untuk teman wawasanku yang belum tau apa sih tag HMTL itu bisa dilihat pada artikel ini Pengertian Tag HTML.
Saya akan menganalogikan Javascript pada pemrograman web ini dengan sebuah Mobil , dimana sebuah mobil pasti memiliki komponen - komponen yang berfungsi sesuai dengan kebutuhan nya masing - masing.
Contohnya agar mobil dapat berjalan maka kita membutuhkan sebuah Roda , Roda akan berfungsi sebagai penggerak mobil sehingga mobil dapat berjalan dari tempat yang satu ke tempat yang lainnya. Yang kedua , saya akan menganalogikan Javascript sebagai otak manusia.
Otak manusia berfungsi memberikan perintah ke organ - organ tubuh lain misalkan tangan , tangan akan bergerak sesuai dengan perintah yang diberikan dari otak manusia secara langsung .
Dari kedua analogi yang saya sebutkan tersebut, maka dapat disimpulkan Javascript itu sendiri berisi kumpulan instruksi yang bersifat fungsional , dimana instruksi yang bersifat fungsional tersebut akan diberikan ke komponen yang ada pada website yaitu ataupun Tag HTML agar dapat berfungsi sebagai mana instruksi yang diberikan oleh Javascript.
Contohnya agar mobil dapat berjalan maka kita membutuhkan sebuah Roda , Roda akan berfungsi sebagai penggerak mobil sehingga mobil dapat berjalan dari tempat yang satu ke tempat yang lainnya. Yang kedua , saya akan menganalogikan Javascript sebagai otak manusia.
Otak manusia berfungsi memberikan perintah ke organ - organ tubuh lain misalkan tangan , tangan akan bergerak sesuai dengan perintah yang diberikan dari otak manusia secara langsung .
Dari kedua analogi yang saya sebutkan tersebut, maka dapat disimpulkan Javascript itu sendiri berisi kumpulan instruksi yang bersifat fungsional , dimana instruksi yang bersifat fungsional tersebut akan diberikan ke komponen yang ada pada website yaitu ataupun Tag HTML agar dapat berfungsi sebagai mana instruksi yang diberikan oleh Javascript.
Pada Web Programming kita akan mengenal dua sisi pemrograman , yaitu Front End Development (Client Side Programming) dan Back End Development(Server Side Programming) , untuk teman - teman wawasanku yang belum begitu mengetahui apa sih kedua sisi pemrograman web tersebut dapat dibaca pada artikel saya sebelum nya ya Front End Development & Back End Development agar dapat mengikuti pembahasan kita selanjutnya.
Setelah mengetahui kedua hal tersebut maka kita dapat mengetahui kalau Javascript merupakan Client Side Programming. Kenapa Client Side Programming? Karena bahasa pemograman ini diproses langsung dari client, client disini adalah browser yang kita gunakan (Chrome, Firefox, dll) sehingga tiap proses yang dijalan kan Javascript akan dieksekusi langsung oleh browse. Untuk mudahnya Javascript ditulis langsung bersamaan dengan HTML dan CSS.
Karena Javascript merupakan high-level programming language sehingga untuk penulisan dan pengeditan script nya kita hanya membutuhkan text editor.
Seperti yang telah saya jelaskan pada artikel sebelum nya yang membahas tentang IDE, maka saat ini kita akan langsung menggunakan IDE tersebut untuk mulai menuliskan nya yaitu Visual Studio.
Seperti yang telah saya jelaskan pada artikel sebelum nya yang membahas tentang IDE, maka saat ini kita akan langsung menggunakan IDE tersebut untuk mulai menuliskan nya yaitu Visual Studio.
Komponen pada Javascript
Sesuai dengan bahasa pemograman tingkat tinggi lainnya , Javascript memiliki beberapa komponen yang digunakan dalam penulisannya. Pada artikel ini kita akan membahas nya secara singkat.
Variable Javascript
Variable dapat kita sebut sebagai Wadah yang dapat menyimpan / menampung sebuah nilai. Dimana Variable ini dideklarasikan sesuai dengan tipe datanya masing - masing, dimana 1 Variable hanya dapat menampung 1 buah tipe data.
Berikut beberapa List Tipe data yang ada pada Javascript :
Tipe Data
|
Keterangan
|
|
string
|
Berupa karakter kalimat ataupun kata yang diapit dengan tanda kutip (‘) ataupun (“), dan tipe data ini tidak dapat dioperasikan sebagaimana data numerik
|
“Nama Saya Budi”
‘Nama Saya Tono’
|
int
|
Berupa tipe data numeric yang bersifat bilangan bulat, mulai dari yang bersifat positif hingga yang bersifat negative. Tipe data ini dapat dioperasikan menggunakan operator numeric.
|
….-3, -2, -1, 0, 1, 2, 3,…..
|
float/double
|
Berupa tipe data numeric yang dapat berupa nilai pecahan. Tipe data ini dapat dioperasikan pula menggunakan operator numeric.
|
1.2 , 3.5 , 7.23, ……
|
Var
|
Tipe data ini adalah tipe data yang cukup special pada Javascript, dimana tipe data ini dapat menyimpan nilai yang bersifat karakter ataupun numeric.
|
1 , 2, 3, 4
“ABC”
|
Boolean
|
Tipe data ini adalah tipe data yang hanya memiliki 2 buah nilai, yaitu "True" ataupun "False" dimana biasanya tipe data ini digunakan untuk melakukan operasi perbandingan antara dua nilai, ataupun menentukan suatu nilai dari sebuah kondisi.
|
True , False
|
Array
|
Tipe data ini adalah tipe data yang dapat menyimpan beberapa nilai sekaligus, dimana nilai tersebut akan disimpan sesuai dengan index nya masing - masing. Sehingga dengan menggunakan tipe data ini kita dapat menyimpan banyak value hanya pada 1 variable.
|
[0],[32],[100],[50]
|
Disini saya hanya menyebutkan beberapa dari sekian banyak tipe data yang ada pada Javascript ataupun bahasa pemrograman tingkat tinggi lainnya, karena keempat tipe data inilah yang akan sering kita gunakan nantinya pada pembuatan sebuah web aplikasi.
Pengertian Javascript Logical Operators Pada Web Programming
Operator pada Javascript merupakan simbol yang digunakan untuk melakukan suatu operasi pada variable ataupun nilai yang dioperasikan nya.
Operator ini dibagi menjadi beberapa Jenis berdasarkan kegunaannya, antara lain :
Operator ini dibagi menjadi beberapa Jenis berdasarkan kegunaannya, antara lain :
Operator Aritmatika , Operator ini berfungsi untuk melakukan operasi aritmatika mulai dari penjumlahan , pengurangan, perkalian, perpangkatan, dan lainnya, seperti tabel yang ada dibawah ini:
Operator
|
Keterangan
|
Contoh Penggunaan
|
+
|
Operator Penjumlahan untuk bilangan Numerik,
Operator Penggabungan Teks untuk Teks
|
1 + 2 = 3
5 + 15 = 20
"Belajar" + "Web" = "BelajarWeb"
|
-
|
Operator Pengurangan
|
5 – 2 = 3
9 – 8 = 1
|
*
|
Operator Perkalian
|
3 * 2 = 6
4 * 7 = 28
|
**
|
Operator Pemangkatan
|
2**4 = 16
|
/
|
Operator Pembagian
|
9 / 3 = 3
10 /2 = 5
|
%
|
Operator modulus / sisa pembagian
|
5 % 2 = 1
14 % 2 = 0
|
Operator Assigment , Operator ini berfungsi untuk menjalankan fungsi khusus pada suatu bilangan atau variable Javascript.
Terdapat banyak operator assigment pada Javascript, tetapi saya hanya akan menjelaskan 3 yang paling sering digunakan saja, antara lain :
Terdapat banyak operator assigment pada Javascript, tetapi saya hanya akan menjelaskan 3 yang paling sering digunakan saja, antara lain :
1.) = Operator ini berfungsi untuk memberikan atau memasukan sebuah nilai kedalam sebuah variable, contoh :
var X = 10;
maka dapat disimpulkan bahwa variable X memiliki nilai 10.
2.) += Operator ini biasa disebut dengan Increment, dimana fungsi dari operator ini adalah menambahkan nilai pada variable sesuai dengan nilai yang di incrementkan, contoh :
var X = 10;
X += 5;
dapat disimpulkan nilai akhir dari X adalah 15, karena syntax diatas sama saja dengan 15 + 5 = 10
3.) -= Operator ini biasa disebut dengan Decrement, dimana fungsi dari operator ini adalah mengurai nilai pada variable sesuai dengan nilai yang di decrementkan , contoh :
var X = 10;
X -=5;
maka dapat disimpulkan nilai akhir dari X adalah 5, karena syntax diatas sama saja dengan 10 - 5 = 5
Operator Perbandingan , Operator ini berfungsi untuk membandingkan dua buah nilai yang memiliki tipe data yang sama. Operator ini akan hanya menghasilkan nilai boolean yaitu "True" ataupun "False", sesuai dengan nilai yang dibandingkan, contoh:
var X = 10;
var Y = 5;
X < Y , maka hasil dari perbandingan nilai X dan Y adalah "False" karena nilai X lebih besar daripada nilai Y.
Operator Logika , Operator yang berfungsi mengoperasikan dua buah nilai boolean, berikut beberapa operator Logika pada Javascript :
var X = 10;
var Y = 5;
X < Y , maka hasil dari perbandingan nilai X dan Y adalah "False" karena nilai X lebih besar daripada nilai Y.
Operator Logika , Operator yang berfungsi mengoperasikan dua buah nilai boolean, berikut beberapa operator Logika pada Javascript :
Operator
|
Keterangan
|
Contoh Penggunaan
|
&&
|
Operator Logika AND, akan bernilai True apabila kedua nilai boolean yang di Operasikan bernilai True
|
var X = True;
Var Y = True; X && Y maka hasil nya adalah "True" karena kedua nilai boolean yang dioperasikan adalah "True" |
||
|
Operator Logikan Or, dimana akan bernilai True apabila salah satu dari kedua nilai boolean pada variable yang dicompare bernilai "True"
|
var X = True;
Var Y = False; X || Y maka hasil nya adalah "True" karena salah satu nilai boolean yang dioperasikan adalah "True" |
!
|
Operator Logika Negasi, dimana variable yang diberikan operator ini akan bernilai sebaliknya
|
var X = True;
var Y = !X maka hasil atau nilai dari Y adalah "False", karena negasi dari "True" adalah "False" |
Pengertian Fungsi Percabangan pada Javascript
Komponen ini cukup penting dalam sebuah bahasa pemrograman tingkat tinggi termasuk Javascript, kenapa demikian ? karena seorang Web Developer akan sering berhadapan dengan kondisi percabangan ini untuk membangun sebuah algoritma program sesuai dengan logika yang dibuat nya.
Apa sih Percabangan pada Javascript itu sendiri ? Percabangan ini adalah sebuah kondisi dimana keputusan ataupun statement yang akan dieksekusi oleh script bergantung pada nilai ataupun kondisi percabangan yang telah ditentukan. Untuk lebih mudah memahami , mari kita lihat gambar dibawah.
Sesuai dengan gambar yang ada diatas, dapat dilihat kasus sederhana berupa percabangan dimana percabangan ini menggunakan 1 buah kondisi dan 2 buah keputusan. Flow sesuai gambar diatas menceritakan bahwa "Dodi Berangkat Kesekolah" , pada flow tersebut ada sebuah fungsi percabangan dengan 1 buah kondisi yaitu "Dodi Memiliki Uang > Rp 10.000" dimana hasil kondisi tersebut akan menuju keputusan "Dodi naik Ojek Online" dan "Dodi naik Bus Umum".
Kita asumsikan bahwa Dodi memiliki uang Rp 12.000 sehingga kita akan mendapatkan hasil proses percabangan "Dodi naik Ojek Online".
Terdapat beberapa jenis bentuk percabangan pada Javascript, antara lain :
1.) Percabangan IF
Percabangan ini hanya memiliki 1 buah kondisi dan 1 buah statement, dimana saat kondisi tersebut memenuhi maka Statement yang akan langsung dieksekusi.
Contoh :
var UangSaku = 12000
if(UangSaku > 10000){
alert('Dodi naik Ojek Online');
}
Kondisi percabangan diatas menjelaskan bahwa apabila kondisi Uang Saku > 12000 maka statement alert akan di eksekusi.
2.) Percabangan IF/ELSE
Percabangan ini memiliki 1 buah kondisi dan 2 buah statement, dimana saat kondisi tersebut memenuhi maka Statement akan di eksekusi, sedangkan apabila kondisi tidak terpenuhi maka Statement Else yang akan dieksekusi.
Contoh:
var UangSaku = 12000
if(UangSaku > 15000){
alert('Dodi naik Ojek Online');
} else {
alert('Dodi naik bus');
}
Kondisi percabangan diatas menjelaskan bahwa apabila kondisi Uang Saku >15000 maka statement yang akan di eksekusi adalah statement 'Dodi naik Ojek Online', sedangkan apabila kondisi tersebut tidak terpenuhi maka statement yang akan dieksekusi adalah statement 'Dodi naik bus'.
3.) Percabangan IF/ELSE IF/ELSE
Percabangan ini sebetulnya mirip dengan percabangan IF/ELSE, yang membedakan adalah percabangan ini memiliki banyak kondisi, dan banyak statement. Statement yang akan dieksekusi adalah statement yang kondisi nya memenuhi, sedangkan apabila dari seluruh kondisi yang ada tidak ada yang terpenuhi, maka statement yang akan di eksekusi adalah statement yang berada pada kondisi ELSE.
Contoh :
var UangSaku = 5000
if(UangSaku >10000){
alert('Dodi beli Roti');
} else if (UangSaku > 7500){
alert('Dodi beli Mie Instant');
} else if(UangSaku >3000){
alert('Dodi beli Kerupuk');
} else {
alert('Dodi tidak membeli apapun');
}
Kondisi percabangan ini menjelaskan bahwa variable UangSaku memiliki nilai 5000, dan terdapat 3 buah kondisi. Statement yang akan dieksekusi adalah statement 'Dodi beli Kerupuk', karena kondisi UangSaku>3000 memenuhi sehingga statement nya lah yang dieksekusi.
4.) Percabangan SWITCH/CASE
Percabangan Switch Case ini merupakan percabangan yang memiliki banyak kondisi dimana kondisi kita sebut sebagai Case, dan kondisi disesuaikan dengan nilai variable yang diletakan pada Switch.
Contoh :
var Buah = 'Anggur'
switch(Buah){
case 'Apel' :
alert('Ternyata buah nya adalah Apel');
break;
case 'Anggur' :
alert('Ternyata buah nya adalah Anggur');
break;
case 'Jeruk' :
alert('Ternyata buah nya adalah Jeruk');
break;
}
Dari kondisi percabangan diatas dapat kita lihat terdapat 3 buah kondisi , dimana kondisi tersebut mengabil dari nilai variable Buah. Pada contoh diatas variable Buah memiliki value atau nilai 'Anggur' sehingga statement yang akan dieksekusi adalah 'Ternyata buah nya adalah Anggur'.
Pengertian Fungsi Perulangan pada Javascript
Salah satu komponen yang tidak kalah penting adalah Perulangan. Komponen ini sangat penting dipelajari jika memang mulai serius mempelajari Javascript ataupun bahasa tingkat tinggi lainnya seperti C# , Java, VB.Net, dll.
Perulangan atau yang biasa disebut dengan Looping ini akan memudahkan penulisan fungsi yang bersifat berulang. Contoh nya apabila kita akan menuliskan 10 baris teks "Ini baris ke - 1" , "Ini baris ke - 2", "Ini baris ke - 3" hingga "Ini baris ke - 4". Apabila kita menggunakan fungsi looping, maka penulisan fungsi akan lebih sederhana.
Fungsi perulangan pada Javascript antara lain adalah perulangan "For" ataupun "While", mari kita bahas kedua perulangan ini :
1.) Perulangan For
Perulangan ini , banyak nya perulangan ditentukan dari awal atau bisa kita sebut dideklarasikan dari awal.
Contoh :
var n;
var baris;
var Teks = "";
for (n=0 ; n<10;n++ ){
baris = n+1;
Teks += "Ini baris ke -" +baris+"<br/>";
}
Perulangan diatas dilakukan sebanyak 10x , karena dimulai dari nilai variable n = 0, diloop terus menerus selama nilai n < 10, dan nilai n akan ditambahkan nilainya +1 ditiap loop nya.
2.) Perulangan While
Perulangan ini, perulangan akan dilakukan terus menerus selama kondisi While pada looping tersebut masih terpenuhi.
Contoh
var n;
var baris;
var Teks = "";
while(n<10)
baris = n+1;
Teks += "Ini baris ke -" +baris+"<br/>";
n+=1;
}
Perulangan diatas pun sama dengan perulangan For dilakukan sebanyak 10x. Perbedaan nya dengan perulangan For adalah pada perulangan While total banyak nya perulangan tidak ditentukan oleh nilai, akan tetapi ditentukan oleh kondisi While yang ada. Selama kondisi While masih memenuhi atau dapat dibilang bernilai "True", maka perulangan terus dilakukan.
Sekian untuk artikel kali ini, semoga penjelasan serta pengertian Javascript pada artikel ini dapat menambah wawasan kita semua. Untuk artikel selanjutnya kita akan segera memulai mencoba praktek membuat sebuah Web Apps menggunakan ASP.NET secara langsung , sehingga saya sarankan untuk mempelajari tiap point yang ada pada artikel ini dan artikel saya yang lainnya di wawasanku.com.
Semua gambar yang anda temukan di sini diyakini ada di dalam "domain publik".
Beberapa gambar yang ditampilkan tidak diketahui secara pasti sumber asalnya. Kami
tidak berniat untuk melanggar hak intelektual yang sah, hak artistik atau hak cipta. Jika
Anda adalah pemilik sah dari salah satu gambar yang diposting di situs ini, dan tidak
ingin ditampilkan atau jika Anda memerlukan kredit yang sesuai, maka silakan hubungi
kami dan kami akan segera melakukan apa saja yang diperlukan dengan menghapus
atau memberikan kredit pada konten yang ditampilkan.
Beberapa gambar yang ditampilkan tidak diketahui secara pasti sumber asalnya. Kami
tidak berniat untuk melanggar hak intelektual yang sah, hak artistik atau hak cipta. Jika
Anda adalah pemilik sah dari salah satu gambar yang diposting di situs ini, dan tidak
ingin ditampilkan atau jika Anda memerlukan kredit yang sesuai, maka silakan hubungi
kami dan kami akan segera melakukan apa saja yang diperlukan dengan menghapus
atau memberikan kredit pada konten yang ditampilkan.
Post a Comment for "Javascript dan Penggunaannya pada ASP.NET"