1 Muhammad Bagir., M.T.I2 Terakhir : Magister Teknologi Informasi, FASILKOM Universitas Indonesia 2006 Experience : Ccit FT UI , Pengajar SML Technolo...
• Terakhir : Magister Teknologi Informasi, FASILKOM Universitas Indonesia 2006 • Experience : • • • • • • •
Ccit FT UI 2007 – 2014, Pengajar SML Technology 2014 – 2015, Manajer IT Development Multimatic 2009-2011 Binus Center 2013 – Sekarang Trainer STTI I-TECH 2012 – Sekarang Free Lance Programmer, BBW 2016 Badiklat Kemhan, 2008 - Sekarang
• Product : • Web Application Development : Java & PHP Based • Mobile Application Development : Blackberry & Android
• Personal Data • Email : [email protected] • Phone : 08998152784 • Pin : 5C988A04
• Client Side Scripting Script yang diproses disisi client (browser) • Salah satu kegunaannya : • Meringankan kerja browser • Pengelolaan UI yang lebih dinamis dan cepat • Meningkatkan kinerja aplikasi
• Contoh Client Side Scripting • HTML • Java Script • VB Script
• JavaScript dikembangkan oleh Netscape Communication Corporation, bahasa pemrograman ini sebelumnya dikenal dengan nama LiveScript. Di kemudian Hari Netscape dan Sun Microsystem (produsen program Java) membuat kesepakatan dan mengubah nama program ini menjadi JavaScript. • JavaScript dapat berintegrasi dengan bahasa pemrograman web lainnya seperti HTML, CSS, PHP, JAVA, ASP. • JavaScript tidak menggunakan aturan syntax yang komplek seperti Java.
• Struktur JavaScript pada sebuah halaman HTML dapat diilustrasikan sebagai berikut: <TITLE> JUDUL HALAMAN <SCRIPT LANGUAGE=”JavaScript”> /* syntax yang digunakan untuk menampilkan teks Hello Dunia */ document.write(“Hello Dunia”);
• Inline Dituliskan dalam suatu tag : Click • Embed Diletakkan diantara tag script <script>document.writeln(“hello”); • Call from external file <script src=“tes.js”>
• Perbedaan JavaScript dan bahasa pemrograman lainnya adalah dapat mengelola input dan output pada satu display secara langsung tanpa berpindah halaman. • Syntax Output : • window.alert(‘message’); • window.status=‘message’; • document.writeln(‘teks’);
• Variabel, digunakan untuk menyimpan nilai ke dalam memori komputer yang dapat dijadikan referensi untuk diproses kemudian. • Variabel memiliki tipe data yang berbeda antara lain angka (number), string dan boolean. • Number, tipe data berupa angka, seperti 1, 2, 5,3 atau 500. • String, tipe data berupa karakter, contoh “Hello kitty”, ‘Apa Kabar’. • Boolean, nilai True atau False (biasa digunakan pada operasi kondisi dan looping(pengulangan)).
• Nama Variabel tidak boleh dimulai dengan angka, harus dengan huruf atau underscore(garis bawah), penamaan variabel dengan dua karakter menurut konvensi penamaan menggunakan huruf kapital pada kata kedua. Nama Variabel pada JavaScript bersifat case sensitive, artinya Nama variabel “hasil” dengan “HASIL” berbeda.
• Aturan –aturan pembuatan kode atau syntax pada JavaScript: • Penggunaan titik koma, JavaScript tidak mewajibkan penggunaan titik koma setelah selesai setiap baris kode program. Namun ditekankan setiap pengguna (user) JavaScript untuk menggunakan titik koma setelah selesai satu kode syntax lengkap. • Tanda petik. JavaScript juga membolehkan penggunaan sepasang tanda petik dua maupun tanda petik satu untuk tipe data string. • Case Sensitive, JavaScript adalah bahasa script yang case-sensitive artinya huruf a berbeda dengan huruf A.
• Contoh deklarasi variabel: var namaDepan; var namaBelakang; Sebuah variabel dapat diberikan nilai atau data ke dalamnya, contoh : var namaDepan = “Ali”; var uangSaya ; uangSaya = 10000000; document.write(“Nama depan saya adalah:“ + namaDepan); document.write(“uang saya adalah : ” + uangSaya);
• Operator adalah suatu operasi yang digunakan untuk melakukan proses perhitungan, seperti pengurangan, penambahan, pembagian dan pembandingan. Ada beberapa bentuk operator dalam JavaScript antara lain : • Operator Aritmetika digunakan untuk melakukan operasi perhitungan matematika. CONTOH : +, -, /, *, %, ++, -• Operator Logika digunakan untuk melakukan operasi Boolean, yakni operasi lagika benar atau salah. CONTOH : && (logika dan), ||(logika or), | (logika bukan) • Operator Perbandingan digunakan untuk membandingkan dua data bertipe data numerik atau angka. CONTOH: ==, >, <, >=, <= • Operator Assignment digunakan untuk memberikan nilai ke suatu variabel. +=, -=, *=, /=
<TITLE>Penggunaan Operator Matematika <SCRIPT> { var a = 10; var b = 2; var hasil; document.write("nilai a adalah : " + (a) +" "); document.write("nilai b adalah : " + (b) +" "); document.write("hasil penjumlahan adalah : " + (a + b) +" ");
document.write("hasil perkalian adalah : " + (a * b) +" "); document.write("hasil pengurangan adalah : " + (a - b) +" "); document.write("hasil pembagian adalah : " + (a / b) +" "); document.write("sisa hasil bagi a dan b adalah : " + (a % b)+" "); hasil = a++ document.write("nilai a setelah operasi a++ menjadi : " + a +" "); hasil = b-document.write("nilai b setelah operasi b-- : " + b +" "); document.write("hasil negasi a adalah : " + (a) +" "); }
<TITLE> penggunaan Operator Perbandingan <SCRIPT> { var a = 10; var b = 2; document.write("nilai a adalah : " + (a) +" "); document.write("nilai b adalah : " + (b) +" ");
document.write("nilai a = = b adalah : " + (a == b) +" "); document.write("nilai a > b adalah : " + (a > b) +" "); document.write("nilai a < b adalah : " + (a < b) +" "); document.write("nilai a <= b adalah : " + (a <= b) +" "); document.write("nilai a >= b adalah : " + (a >= b) +" "); }
<TITLE>Penggunaan Operator Logika <SCRIPT> { var a = 10; var b = 2; var c = a > b; var d = a < b; document.write("nilai a adalah : " + (a) +" "); document.write("nilai b adalah : " + (b) +" ");
document.write("nilai a > b adalah : " + (c) +" "); document.write("nilai a < b adalah : " + (d) +" "); document.write("hasil operasi operator logika a > b && a < b : " + (c && d) +" "); document.write("hasil operasi operator logika a > b || a < b: " + (c || d) +" "); document.write("hasil operasi operator logika a > b ! a < b: " + (c != d) +" "); }
<TITLE>Penggunaan Operator Assignment <SCRIPT> { var a = 10; var b = 2; document.write("nilai a adalah : " + (a) +" "); document.write("nilai b adalah : " + (b) +" ");
document.write("nilai a /= b adalah : " + (a /= b) +" "); document.write("nilai a += b adalah : " + (a += b) +" "); document.write("nilai a -= b adalah : " + (a -= b) +" "); document.write("nilai a *= b adalah : " + (a *=b) +" "); }
• Ada dua macam tipe konstruksi pemrograman dalam bahasa pemrograman yakni percabangan dan perulangan. • Percabangan • Percabangan memberikan fasilitas untuk mengeksekusi baris kode program satu kali, berdasarkan sebuah kondisi. Ada dua bentuk konstruksi percabangan (decision making) dalam JavaScript: • Konstruksi If...else • Konstruksi Switch...case
• Perulangan (Looping) • Perulangan memberikan fasilitas untuk mengeksekusi baris kode program lebih dari satu kali atau berulang-ulang. Ada tiga bentuk konstruksi perulangan (looping) dalam JavaScript yakni : • • • •
Konstruksi While Konstruksi do-While Konstruksi for Deskripsi Kode Continue dan Break
document.write("nilai a paling besar"); } Contoh Membandingkan dua nilai : <TITLE>Latihan konstruksi if...else bertingkat <SCRIPT> { var a = 8; var b = 6; if(a > b) {
else if(a < v) { document.write("nilai b paling besar"); } else { document.write("nilai a sama dengan b"); } }
Latihan konstruksi For <SCRIPT> { var hitungan hitungan =0; for(hitungan;hitungan<=10;hit ungan=hitungan+1)
{ alert(hitungan); } }
• Fungsi atau Function adalah seperangkat kode program yang dapat dipanggil dari bagian lain pada program sesering mungkin, selama fungsi tersebut dibutuhkan. Kata kode function harus ditulis dengan huruf kecil semua. Fungsi menjalankan blok kode program secara tunggal sebagai satu kesatuan dan memiliki keterkaitan atau hubungan. • Fungsi atau function ini ditulis pada bagian HEAD dari sebuah halaman HTML, sehingga ia akan dieksekusi atau dijalankan pertama kali halaman web • Secara umum, fungsi dapat dibagi dua bentuk • Built-in Function • User-Defined Function
• Built-in Function adalah fungsi yang disediakan oleh program untuk memudahkan programmer melakukan kegiatan pengkode-an (coding) bahasa pemrograman JavaScript. Beberapa Built-in Function yang didukung JavaScript adalah : • isNan(), adalah fungsi yang membantu menentukan apakah suatu data adalah “NaN” (not a number). • parseInt(), adalah fungsi yang digunakan untuk melakukan konversi tipe data menjadi Integer. • parseFloat(), adalah fungsi yang digunakan untuk melakukan konversi tipe data menjadi Float. • eval(), adalah fungsi yang digunakan untuk mengevaluasi atau mengecek sebuah ekspresi atau kode yang juga bisa dinyatakan sebagai string.
• User-defined function adalah Fungsi yang dibuat oleh programmer untuk meningkatkan efisiensi dan efektivitas pemrograman. Penggunaan function ini juga membuat program dapat diukur. • Deklarasi atau syntax user-defined function adalah : Function fnName(p1,p2,...pn) { Kode program }
Event
Deskripsi
click
• Event adalah tindakan yang terjadi sebagai hasil interaksi user (pengguna) dengan halaman web atau aktivitas terkait dengan browser. • Misalkan user (pengguna) meng-klik button atau memasukkan data ke dalam sebuah form, sebuah event akan dijalankan, dan hasilnya akan ditampilkan di browser sesuai dengan tindakan yang dilakukan user (pengguna).
Akan dijalankan jika pengguna (user) meng-klik sebuah form atau link atau lainnya yang diberikan event ini change Akan dijalankan jika pengguna (user) mengubah data dalam suatu text focus
Akan dijalankan jika pengguna (user) memberikan input atau memasukkan data ke sebuah form atau lainnya. load Akan dijalankan halaman web dibuka oleh browser mouse Akan dijalankan ketika user Over mendekatkan pointer mouse ke teks atau link yang memiliki event ini. mouse Akan dijalankan ketika user Out menjauhkan pointer mouse dari teks atau link yang memiliki event ini. select Dijalankan ketika user memiliki suatu data blur Dijalankan ketika input focus dipindahkan dari form yang memiliki event ini.
Latihan Function dengan event onClick <SCRIPT> function panggil(parameter) { alert(parameter); }
