Pengantar Javascript Saat ini World Wide Web (WWW) merupakan salah satu layanan Internet yang paling populer. Pada awalnya, popularitas WWW ditopang oleh keberadaan bahasa HTML. Dengan format HTML, informasi yang kita miliki dapat ditampilkan pada berbagai jenis komputer (bebas platform), dan pengunjung diberi kemudahan untuk berpindah dari satu halaman web tertentu ke halaman-halaman web lainnya dengan alur non-linear (melalui hyperlink). Sayangnya halaman web yang dapat ditampilkan bersifat statis, artinya pengunjung hanya dapat melihat informasi yang disajikan, tetapi belum memungkinkan adanya proses interaksi (hanya satu arah). Setiap perubahan pada tampilan web hanya dimungkinkan jika kode sumber (source code) HTML-nya diubah terlebih dulu. 1
Perkembangan lebih lanjut menuntut adanya teknologi yang memungkinkan halaman web yang interaktif dan lebih hidup (dinamis). Beberapa contoh berikut ini tidak dapat diwujudkan dengan hanya mengandalkan bahasa HTML : Menampilkan animasi teks dan grafik. Melakukan proses perhitungan. Membuat aplikasi yang membutuhkan banyak interaksi dengan pengunjung (misalnya kalkulator atau permainan kartu). Maka lahirlah beberapa bahasa pemrograman untuk memenuhi kebutuhan pengembangan aplikasi web yang tidak mampu dilakukan oleh HTML, antara lain adalah Javascript. Kita dapat membuat halaman-halaman web yang interaktif / dinamis dengan bantuan Javascript. 2
1
Penulisan instruksi, function dan variabel dalam JavaScript : Case Sensitive (membedakan huruf kapital dan huruf kecil). Bagian program JavaScript dalam HTML ditandai dengan tag sbb : .. .. ..
3
o
Menambahkan komentar (= bagian program yang tidak diproses) : Komentar 1 baris : // komentar ditulis di sini Komentar lebih dari 1 baris : /* komentar baris pertama komentar baris kedua dst */
4
2
o
Perintah untuk menuliskan data document.write ( . ) menulis data tanpa penambahan carriage return document.writeln ( . ) menulis data dengan penambahan carriage return (harus diletakkan di dalam tag kontainer )
5
o
Aturan penulisan variabel Diawali dengan huruf atau tanda garis bawah ( _ ) Tidak boleh mengandung spasi Tidak boleh berupa reserved word JavaScript
6
3
o
Beberapa operator JavaScript Operator aritmatik : + - / * % ++ -Operator pemberian nilai : = Operator pembanding : == != > < >= . Menampilkan pesan dengan suatu kotak pesan
Kadang-kadang kita ingin menampilkan suatu pesan kepada pengunjung, jika suatu tombol atau link di klik. Pada JavaScript kita dapat menggunakan fungsi alert() yang mana akan menampilkan suatu kotak pesan. Misalnya kita ingin memberi kejutan kepada pengunjung, begitu halaman dibuka. Untuk melakukan hal ini, tambahkan saja kode berikut setelah tag (atau diantara tag ).
Hal ini tentu saja akan menjadi kejutan bagi pengunjung halaman anda :-). Bagaimana jika kita ingin menampilkan suatu kotak pesan ketika user melakukan klik pada suatu link Anda dapat mencoba klik disini. Untuk memahami apa sebenarnya yang terjadi, coba simak script berikut :
JavaScript: bagian ini akan memberitahukan kepada browser bahwa dia harus menjalankan perintah JavaScript yang tersebut ketika link di klik. Anda juga dapat membuat suatu pesan ditampilkan tombol ditekan. Coba yang berikut ini:
Catatan Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap contoh diatas berbeda. Yang pertama adalah script ditulis diantara tag HTML , yang kedua adalah diantara suatu tang ... . Perbedaan ini adalah bahwa, script pertama akan dijalankan pada event tertentu (MouseOver dalam hal ini), sedangkan untuk yang kedua, script langsung dijalankan ketika ditemukan pada dokumen HTML. Membuat suatu link yang dapat menutup jendela browser Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode close pada objek window. Contoh : tutup
Coba klik tutup untuk menutup jendela ini.
Membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih pemakai, dan membuka halaman yang diinginkan
Adapun kode untuk Contoh diatas: Pilih tutorial yang diinginkan HTML JavaScript ASP PHP Perl
Membagi Jendela Browser menjadi frame, dan klik link pada pilihan diframe kiri akan mengupdate isi frame kanan. Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh berikut : Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai berikut : Contohy.html Tutorial JavaScript
Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai berikut : menu.html function buka(x) { top.kanan.location=x; // membuka halaman x pada frame kanan
return false } Daftar Isi Dasar dari Objek buka('topik6.html')">Objek dan Fungsi built-in buka('topik7.html')">Objek netscape buka('topik8.html')">Objek form buka('topik9.html')">Window dan Frame
Pada menu.html diatas, kita menggunakan event onclick pada masing-masing link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti location untuk frame kanan membuka halaman bersangkutan. Catatan : kanan dalam hal ini adalah nama frame. Klik untuk melihat hasil dari contoh diatas Bagaimana, menarik bukan ? Dibuat oleh
[email protected] Medan - Sumatera Utara Indonesia
Latihan Java Script Proteksi Password
Kadang-kadang kita ingin memproteksi halaman untuk kalangan sendiri. Usaha yang dapat kita lakukan untuk melakukan proteksi tersebut adalaj dengan menanyakan username dan password. Ketika pengunjung melakukan klik pada tombol submit, kode JavaScript pada halaman akan memeriksa apakah username dan jika password benar, maka halaman yang sebenarnya akan ditampilkan. Kodenya adalah sebagai berikut.
Username: Password:
Yang ini form yang sebenarnya
Username: Password:
Dengan sedikit forward dan berhasil. Masalahnya adalah orang dapat melakukan suatu View|Source dan menemukan username serta password untuk halaman yang di proteksi password, tentu saja contoh ini kurang sempurna contoh ini kurang baik.
Yang kita butuhkan adalah suatu metode di mana pada HTML source-nya tidak akan kelihatan username dan password serta halaman target. Suatu metode yang umum digunakan adalah membuat nama halaman target berdasarkan username dan password yang dimasukkan oleh pemakai dan mengarahkan browser ke halaman tersebut. Perhatikan hasil modifikasi fungsi verifyLogin(.
Sekarang fungsi akan melakukan pengabungan terhadap username, pasword dan ".html" serta mengarahkan browser ke lokasi tersebut. Jadi jika pengunjung memasukkan secret sebagai username dan page sebagai password, dia akan mendapatkan secretpage.html. Atau dengan kata lain mereka tidak akan mengetahui username dan paswword yang benar dan memasukan foo sebagai username dan bar sebagai password, mereka akan diarahkan ke html yang tidak ada foobar.html dan mendapatkan kesalahan yang menyatakan halaman tersebut tidak ada.
1.
image_css.htm
body
{
background-image:url(‘file.jpg’);
background-repeat:no-repeat;
background-position:center center;
}
2.
Latihan1.htm
var username;
username=prompt("Siapa nama Anda??");
alert("Hello..." + username);
//Script tentang waktu
Sekarang = new Date();
document.write("Hari ini " + Sekarang.getDate() + "-" + (Sekarang.getMonth()+1)+ "-" + Sekarang.getFullYear() + ", jam: " + Sekarang.getHours() + ":" + Sekarang.getMinutes() + "." + Sekarang.getSeconds())
Seperti script sebelumnya, script di atas dibuka dengan dan ditutup dengan . Kemudian di baris kedua diperkenalkan tanda "// " yang berarti bahwa apapun yang berada di sebelah kanan tanda tersebut akan diabaikan dan hanya dianggap sebagai komentar. Kemudian baris berikutnya adalah perintah Sekarang = new Date(); Di sini kita membuat object baru yang diberi nama "Sekarang". Obyek ini kita isi dengan waktu saat halaman ini di-load, yaitu menggunakan perintah new Date(). Kemudian ditutup dengan tanda titik koma (;) untuk mengakhiri sebuah statemen. Pada baris berikutnya kita menuliskan apa yang ada di dalam kurung ke halaman html, menggunakan document.write seperti biasa. Semua yang berada di antara tanda petik ("), misalnya "Hari ini " atau ", jam: " akan ditampilkan apa adanya, dan yang tidak diberi tanda petik akan diproses. Di sini kita menemui beberapa hal baru, yaitu Sekarang.getDate(), juga Sekarang.getMonth() sampai terakhir Sekarang.getSeconds(). Semua get...() tersebut adalah "method" yang bekerja pada "object" yang bernama Sekarang, di mana getDate() akan akan memberikan nilai tanggal, getMonth() akan memberikan nilai bulan, dst. Khusus untuk bulan, kita menggunakan perintah Sekarang.getMonth()+1 karena java script selalu menghitung mulai dari 0. Sehingga bulan Januari akan berharga "0", bulan Februari akan berharga "1", dst.
3.
tombol_warna.htm
function warna(pilihan)
{
alert("Wah ternyata kamu suka " + pilihan + " toh.")
document.bgColor=pilihan
}
Pilih warna favorit anda.
Pada script di atas, kita menggunakan fungsi "warna(pilihan)". Variabel "pilihan" di sini berasal dari input yang diberikan pengunjung melalui form. Anda dapat melihat pada tag di bawah, kita menggunakan event handler onClick="warna(`pilihan'). Harga variabel pilihan akan tergantung pada tombol mana yang kita tekan. Kemudian pada fungsi "warna(pilihan)" di atas, pilihan kita ini ditampilkan dengan perintah alert(), juga digunakan untuk mengubah warna latar, menggunakan property "document.bgColor". Untuk jenis-jenis warna, selain menggunakan kode heksadesimal (seperti #ffffff), kita juga dapat menggunakan kata seperti di atas (lightblue, pink, burlywood, dll)
4.
buka_window.htm
window.open('hello.htm', 'latihan', config='height=300,width=300')
Dengan bentuk script seperti itu, otomatis saat halaman ini diload, akan muncul pop up seperti yang telah anda lihat. Anda juga dapat memunculkan window baru saat menggunakan link
5.
Buka_window2.htm
Klik ini kalau mau pop up-nya keluar lagi :D
Klik ini kalau mau pop up-nya keluar lagi :D (Di sini saya memanggil "javascript:void(0)", yang artinya sama saja dengan tidak memanggil apa-apa) Sekarang kita bahas satu-persatu perintah java script di atas. Perintah window.open() berguna untuk membuka window baru. Anda sudah melihat contohnya tadi. Sedang atribut (atau apapun namanya) yang berada dalam kurung terdiri dari: ('alamat url', 'nama window yang baru dibuka', config='parameter') Jadi script kita di atas memanggil file "contoh_java_5a.html" dan memberi nama window baru tersebut dengan nama "latihan". mmm ... kita bisa memberi nama apapun, persis dengan memberi nama hewan kesayangan kita. Tentu saat ingin memanggil, kita harus memanggilnya dengan nama yang sesuai. Sedang parameter yang dikonfigurasi bisa terdiri dari tinggi (height) dan lebar (width) window yang akan dibuka. Di atas kita menentukan tinggi 300 pixel dan lebar juga 300 pixel. Ada beberapa parameter lain yang dapat diatur, antara lain: toolbar="yes" atau "no", berguna untuk menentukan ada tidaknya toolbar (menu di atas, yang isinya BACK, FORWARD, STOP, RELOAD, dll).
menubar="yes" atau "no", berguna untuk menentukan ada tidaknya menubar (menu di atas juga, yang isinya FILE, EDIT, VIEW, GO, dll). scrollbars="yes" atau "no", menentukan ada tidaknya scrollbars. Scrollbars tuh yang bisa digeret untuk ngeliat bagian bawah atau atas dokumen, kayak di sebelah kanan ini. --> resizable="yes" atau "no", untuk menentukan apakah window yang dibuat bisa diubah ukurannya atau tidak, dengan cara menggeret pinggirannya. location="yes" atau "no", untuk menentukan ada tidaknya location bar di window yang baru dibuka. Location bar tuh ... tempat kita nulis alamat url di atas. directories="yes" atau "no", menentukan ada tidaknya directory bar. Directory ada di juga yang isinya bookmark, dll. status="yes" atau "no", untuk menentukan ada tidaknya status bar di bawah, pada window yang baru dibuat.
5.
for.htm
Kita cuman menghitung dari 1 sampai 7:
for (i=1; i
