Belajar Javascript Lebih Lanjut

Dalam pertemuan sebelumnya kita telah membahas tentang dasar-dasar pemrograman yang menggunakan javascript. Sekarang mari kita lebih perdalam lagi tentang apa itu javascript... yok cekidot...

Membuat form adalah hal biasa dalam sebuah pemograman web. Dan AJAX, sebagai metode yang baru-baru ini mencuat ke permukaan, menjadikan dunia web lebih beragam dan lebih dinamis. Perlu diingat, tutorial ini menggunakan bahasa pemrograman PHP.

AJAX, bukanlah sebuah bahasa sendiri. Dia hanya sebuah metode bagaimana mengirimkan data-data yang ada di sebuah form ke server tanpa melalui proses refresh. Prosesnya sendiri dikendalikan oleh browser lewat pintu belakang. Dan sebelum adanya JQuery, AJAX adalah hal yang cukup rumit diwujudkan. Ketika JQuery muncul, AJAX cuma seujung jari kelingking. Hehe? :D

HTML Form dengan CSS

Untuk mempersingkat waktu, saya tidak akan membahas HTML Form dan CSS. Karena fokus kita saat ini adalah di bagian Javascript, dan sedikit bagian server. Untuk itu, halaman HTML Form dan CSS bisa googling...hhe

Sebagai preview HTML Form-nya yang akan kita bahas di tutorial ini, bisa dilihat di kode di bawah ini:

Langkah pertama, tambahkan JQuery line

Buka file index.html yang sudah anda download, dan tempatkan kursor anda di antara tag , dan tambahkan baris yang sangat wajib jika ingin menggunakan JQuery seperti di bawah ini:

Langkah kedua, mulai berkreasi dengan JQuery

Setelah menambahkan baris wajib, sekarang kita butuh menambahkan baris ini. Ini juga hal yang wajib ketika menggunakan JQuery.

Bentuk umum JQuery sendiri adalah seperti ini: $(nama_objek).properti(); Nama objek, hampir sama ketika kita memperlakukan objek HTML di CSS.

$(document).ready(function() { ... }); adalah sebuah kode yang mengecek apakah sebuah halaman sudah siap untuk dikomandoi kode JQuery.

Langkah ketiga, Validasi Form

Sebelum mengirimkan dokumen, akan lebih baik jika kita memvalidasi masukan dari user terlebih dahulu. Hal ini untuk menghindari kesalahan ketika data akan diproses. Tapi tentu saja hal ini tidak akan berguna, ketika Javascript di browser user dimatikan. Dan saya sekarang ini tidak membahas tentang browser yang tanpa javascript.

Sebagai awalnya, kita akan memeriksa apakah tombol submit sudah di klik.

$("input[@name=cmdsubmit]") berarti, mencari sebuah tag input, yang mempunyai nama cmdsubmit. Ini tentunya bisa dimodifikasi menyesuaikan dengan form yang dibuat. Kata kunci click berarti menunggu sampai objek di klik. Penggunaan return false; dimaksudkan untuk tidak dulu mengirimkan data.

Validasi kosongnya inputbox

Penjelasan

Logika sederhananya, di form yang sudah saya sediakan terdapat 5 objek, yang terdiri dari 3 Input berupa teks, 1 Textarea, dan 1 tombol submit. Nah, untuk belajar memvalidasi awal, maka semua input berupa text wajib diisi.

Karena kita punya 3 input berupa teks, maka kita bisa menelusuri satu persatu objek tersebut dengan kata kunci each di JQuery seperti di bawah ini:

Karena objek yang bertipe teks ada 3, maka kita dimungkinkan mengakses 1 persatu objek dengan properti each. Setelah dapat mengakses objek masing-masing, kita sekaligus mengecek, apakah objek tersebut masih kosong dari isian user dengan baris kode di bawah ini:

Objek $(this) merujuk ke objek yang sedang di akses oleh JQuery. Properti val() berarti mengakses isi dari objek tersebut. Ketika kondisi di atas benar (yaitu, ketika isian objek teks kosong), maka kita bisa mengeluarkan peringatan dengan perintah alert. Dan perintah return false; berarti kita keluar dari peng-aksesan tiap objek teks. Ini demi meringankan beban kerja browser yang user pakai.

Sedangkan variabel i, adalah variabel penunjuk yang bisa memberitahukan kita, apakah semua form sudah di isi. Buktinya, di luar properti each, kita bisa mengecek, apakah variabel i sudah mengakses sebanyak 3 objek input teks.

Untuk sementara ini, segini dulu tutorialnya. Besok-besok di lanjut.

Saya sendiri gag tau, apakah yang baca ngerti apa ngga. Tapi saya sudah berusaha untuk menggunakan bahasa manusia yang sebenar-benarnya. Kalau memang masih ada yang ngga ngerti, berarti itu salah saya. Ternyata saya belum bisa menjadi seorang manusia? :p

Dasar-Dasar Pemrograman Javascript

Dalam catatan kali ini kita akan membahas tentang dasar-dasar dari java script. Mari kita bahas mulai awal..let's check it out..

Bagian 1. Pengenalan JavaScript

1.1 Apakah JavaScript?

JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Dengan
JavaScript kita dapat dengan mudah membuat halaman web yang interaktif.

1.2 Menjalankan JavaScript

Apa yang diperlukan untuk menjalankan script yang ditulis dengan JavaScript? Kita perlu
JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript ? misalnya
Netscape Navigator (versi 2.0 ke atas ) atau Microsoft Internet Explorer (MSIE - versi 3.0 ke
atas). Mengingat kedua browser di atas telah banyak beredar dan digunakan, pemilihan
JavaScript sebagai untuk meningkatkan kemampuan halaman web menjadi sangat baik. Untuk
menggunakan JavaScript kita harus telah mengenal baik HTML.

1.3 Mencantumkan JavaScript pada halaman HTML

Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita lihat contoh sederhana
berikut ini untuk mengerti bagaimana JavaScript bekerja:

Contoh sederhana di atas kelihatan seperti halaman HTML normal. Satu-satunya hal yang baru
adalah bagian:

Bagian di atas adalah contoh penggunaan JavaScript. Untuk melihat hasilnya simpan file di atas
sebagai file HTML normal dan buka dari JavaScript-enabled browser. Hasilnya akan terlihat
seperti berikut ini: (jika kita menggunakan JavaScript-enabled browser akan terlihat 3 baris):

Ini halaman HTML normal.

Yang ini akibat JavaScript!

Ini HTML lagi.

Sebenarnya script di atas tidaklah begitu berguna, namun bisa memberikan gambaran
bagaimana cara menggunakan tag di-interpretasi-kan sebagai kode JavaScript. Di situ kita bisa melihat
penggunaan document.write() ? salah satu perintah yang penting dalam pemrograman dengan
JavaScript. document.write() digunakan untuk menulis sesuatu pada dokumen (dalam hal ini
adalah dokumen HTML). Jadi program JavaScript sederhana kita di atas berfungsi untuk
menuliskan text ?Yang ini akibat JavaScript!? ke dokumen HTML.

1.4 Non-JavaScript browser

Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? Non-
JavaScript browser tidak mengenal tag

Tombol akan memanggil function calculation() jika di-click. Kita lihat bahwa function
melakukan perhitungan tertentu sehingga kita perlu menggunakan variabel x, y dan result.
Kita mendefinisikan variabel dengan keyword var. Variables dapat digunakan untuk menyimpan
harga-harga yang berbeda- seperti angka, text, strings dan lainnya. Baris var result= x + y;
memberitahu browser untuk membuat variabel result dan menyimpan harga x + y (5 + 12)
dalam variabel result. Setelah operasi ini isi variabel result adalah 17. Perintah
alert(result) artinya sama dengan alert(17), yaitu popup window akan muncul dengan isi
angka 17.