Pengenalan

JavaScript adalah suatu bahasa script yang menyerupai cara penulisan pada Java. Kode JavaScript dituliskan diantara tag HTML yang akan diinterpretasikan oleh browser klien. Java script akan membuat halaman Web anda menjadi lebih interaktif. Menggunakan JavaScript, memungkinkan kustomisasi terhadap dokumen HTML pada saat diakses dengan menulis melalui penanganan event terhadap elemen-elemen dalam halaman tersebut, memeriksa data form pada sisi klien dan melakukan perhitungan pada sisi klien.

Agar dapat bekerja dengan lancar dengan contoh JavaScript berikut ini, tentu saja anda membutuhkan suatu browser yang mendukung JavaScript .

Tentang JavaScript

JavaScript adalah bahasa script yang dinamis. Hal ini berarti bahwa tipe data pada Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang lain sesuai dengan kebutuhan. Sebagai contoh, anda dapat menyatakan  myData = 10; pada suatu baris initialisasi, dan baris berikutnya, menyatakan myData = "Hello World!" yang membuat tipe myData menjadi suatu string. Java Script akan secara otomatis mengubah tipe data berdasarkan ekspresi yang ditentukan. Jadi jika anda menyatakan myData = "10" - 2;, maka anda akan bertanya mengapa Javascript tidak mengkonversi 2 menjadi "2" dan menghasilkan "102", jawabanya adalah karena operator - tidak ditujukan untuk pemakaian pada string sehingga "10" - 2 tidak memiliki arti sama sekali.  Berikut ini akan membawa kita kepada suatu situasi yang lebih menarik. Operator + dinyatakan untuk pemakaian pada numerik dan string. Jadi akankah 10 + "20" mengembalikan nilai  30 (10+20) atau "1020" ("10" + "20"). Hal ini tentu saja akan membingungkan anda dengan pemakaian operator +, jawabannya adalah Javascript akan selalu mengkonversi segala sesuatu ke string sebelum melakukan evaluasi, sehingga 10 + "20" adalah sama dengan  "10" + "20" dan hasilnya adalah "1020".

Perhatian: JavaScript membedakan huruf besar dan kecil, sehingga penulisan indoprog adalah berbeda dengan Indoprog (Ngomong-ngomong apakah kepanjangan dari indoprog?)

Berkaitan dengan keamanan yang terkandung dalam JavaScript, adalah sangat tidak benar bahwa kode JavaScript dapat merusak sistem anda. Sehingga anda dapat mengunakannya tanpa perasaan was-was.

Contoh JavaScript

Semua contoh yang diberikan disini adalah pendek dan sederhana. Jika anda merasa berguna, silahkan duplikasi dan masukkan ke halaman Web anda.

 

Fungsi Date Time

Selamat Sore Selamat Pagi

Untuk memudahkan penanganan tanggal dan waktu, JavaScript menyediakan Objek Date didalamnya. Suatu variabel Date harus dideklarasikan terlebih dahulu sebelum kita dapat menggunakannya. Pendeklarasian Objek Date dapat menggunakan statement JavaScript berikut ini.

dateVar = new Date();

Contoh diatas akan membuat suatu variabel dengan nama dateVar dan mengisinya dengan  tanggal dan waktu sekarang. Jika anda ingin menentukan tanggal dan waktu lainnya, anda dapat menggunakan salah satu cara penulisan berikut.

dateVar = new Date("month day, year hours:minutes:seconds")
dateVar = new Date(year, month, day)
dateVar = new Date(year, month, day, hours, minutes, seconds)

Metode dari Object Date

Metode-metode  yang paling banyak digunakan pada objek tanggal adalah sebagai berikut.
getYear()
dateVar.getYear() mengembalikan nilai seperti 99 sesuai dengan tahun dari dateVar.
getMonth()
mengembalikan nilai antara 0 dan 11 sesuai dengan tanggal January s/d December.
getDate()
mengembalikan nomor hari dari bulan.
getDay()
mengembalikan nomor hari dari minggu. Nol untuk Minggu, satu untuk Senin dan seterusnya.
getHours()
mengembalikan angka antara 0 dan23 menentukan jam dari hari.

Anda mungkin pernah menggunjungi situs yang dapat menyapa Selamat Pagi atau Selamat Malam tergantung pada waktu kunjungan anda. Hal ini dapat dilakukan dengan memeriksa waktu sekarang dan sisipkan sapaan dengan menggunakan fungsi document.write(). Kode berikut ini dapat melakukan hal tersebut. Sisipkan kode tersebut dalam HTML file pada posisi dimana anda ingin sapaan tersebut muncul. 

<SCRIPT LANGUAGE="JavaScript">
    <!-- Memyembunyikan kode dari browser non-js
    currentTime = new Date();
    if (currentTime.getHours() < 12)
        document.write("Selamat Pagi");
    else if (currentTime.getHours() < 17)
        document.write("Selamat Sore");
    else document.write("Selamat Sore");

    // akhir dari penyembunyian -->
</SCRIPT>

Membuat Jam Digital

Berikut ini adalah suatu contoh program jam digital dengna JavaScript.

 

Kode-nya adalah sebagai berikut:. 

<TABLE BORDER=4 BGCOLOR=CYAN>
    <TR><TD>
        <FORM NAME="clock_form">
            <INPUT TYPE=TEXT NAME="clock" SIZE=26>
        </FORM>

        <SCRIPT LANGUAGE="JavaScript">
            <!-- Hide from non JavaScript browsers
            function clockTick()
            {
                currentTime = new Date();
                document.clock_form.clock.value = " "+currentTime;
                document.clock_form.clock.blur();
                setTimeout("clockTick()", 1000);
            }
            clockTick();
           // End of clock -->
        </SCRIPT>
    </TD></TR>
</TABLE>
Fungsi setTimeout() telah didiskusikan pada  Scroller. Metode blur() digunakan untuk memindahkan focus dari textbox Jam.

 

Statusbar dan Scroller

Pernah melihat yang tulisan berputar di status bar browser ? Itu adalah scroller. Tulisan berputar sangat populer dan menarik perhatian bagi pemula, dan bukan merupakan ide yang baik, karena fungsi status bar bukan ditujukan untuk hal tersebut. Menurut anda apa fungsi status bar ?

Program Scroller

Berapa banyak baris script yang diperlukan untuk menghasilkan suatu scroller ? Jawabnya Dua belas baris.

Fasilitas apa saja yang terdapat pada JavaScript sehingga memungkinkan kita membuat suatu scroller ? 

Pertama adalah kemampuan menampilkan tulisan pada  status bar dengan :

window.status = "Ini akan muncul pada status bar"

Kedua adalah adanya fungsi  setTimeout(). Fungsi ini memiliki dua buah parameter. Parameter pertama adalah string yang merupakan perintah  JavaScript yang akan diaktifkan dan parameter kedua adalah jumlah milidetik untuk mengaktifkan perintah tersebut.

Tulisan berputar pada dasarnya adalah suatu fungsi, yang pada pada setiap aksi, memindahkan tulisan pada scrollbar sedikit ke kiri dan kemudian memanggil  setTimeout() untuk mengaktifkan kembali dirinya setelah suatu interval waktu tertentu.

Berikut ini adalah kode lengkap untuk menghasilkan scroller.

<SCRIPT LANGUAGE="JavaScript">
    <!-- Start of scroller script
    var scrollCounter = 0;
    var scrollText    = "Teks yang anda inginkan, misalnya Viva Indoprog";
    var scrollDelay   = 70;
    var i = 0;

    while (i ++ < 140)
        scrollText = " " + scrollText;

    function Scroller()
    {
        window.status = scrollText.substring(scrollCounter++,
          scrollText.length);
        if (scrollCounter == scrollText.length)
            scrollCounter = 0;
        setTimeout("Scroller()", scrollDelay);
    }

    Scroller();
    // End of scroller script -->
</SCRIPT>
 

Fungsi lainya yang kita gunakan adalah substring(), yang mana merupakan metode dari objek string. Jika name="JavaScript", maka name.substring(4,9) akan mengembalikan "Script". Sudahkah anda mengerti garis besarnya ?

Membuat tulisan berputar pada halaman anda

Jika pemrograman bukan merupakan bidang anda, dan anda menginginkan scroller diatas, maka duplikasi saja kode diatas ke file HTML anda, dan letakkan di antara tag  <HEAD> dan </HEAD> serta ubah scrollText dan scrollDelay variabel pada baris 4 & 5 sesuai dengan kebutuhan anda.

 

Membuka dan Manipulasi Window

Jika anda pernah berurusan dengan homepage-homepage di Geocities atau Tripod, anda akan terbiasa dengan suatu jendela kecil yang muncul dengan suatu iklan banner. Bisa saja anda merasakan hal tersebut mengganggu. Tetapi anda harus percaya pada saya bahwa adalah cukup menyenangkan jika anda melalukan hal tersebut pada homepage anda. Tidak percaya...? Klik disini!

Saya tidak akan memberikan source codenya karena sebaiknya anda tidak melakukan hal tersebut pada penggunjung homepage anda ;-)

Pop-up windows biasanya digunakan ketika anda ingin menampilkan sesuatu kepada user, tetapi anda tidak ingin mereka meninggalkan halaman yang sedang mereka lihat (Mungkin anda takut mereka tidak akan kembali). 

Mari kita lihat kode yang digunakan untuk membuat link tersebut.

<a HREF onClick="window.open('http://www.indoprog.f2s.com', 'indoprog', 'width=370,height=240,status=1'); return false;">klik disini</a>

Perlu dicatat bahwa saya menggunakan petik tunggal untuk string bersangkar (nested string). Bagian 'return false' memberitakukan browser bahwa ketika user melakukan klik pada link, browser tersebut tetap akan berada pada halaman yang sama dari pada halaman yang ditentukan pada HREF. Penanganan event onClick() akan memanggil  fungsi window.open() untuk membuka suatu jendela browser yang baru. Parameter pertama adalah : 'http://www.indoprog.f2s.com' merupakan URL yang akan dimuat. Parameter kedua adalah, 'indoprogWnd' merupakan nama yang akan diberikan pada jendela baru tersebut. Parameter ketiga menentukan dimensi tampilan dari jendela. Kita menentukan ukuran jendela adalah 370x240 dengan sautu status bar. Perhatikan disana ada koma untuk pemisah masing-masing elemen. Tampilan dari window dapat dikenalikan dengan option sebagai berikut:

height
Tinggi dari jendela baru dalam pixel (mis: height=100)
width
Lebar dari jendela dalam pixel (mis: width=200)
directories
Menentukan apakah browser menampilkan tombol directory sepert i"What's Cool" dll. (mis: directories=yes)
hotkeys
Mengaktifkan atau menonaktifkan aneka tombol hotkey (mis: hotkeys=no)
location
Menentukan apakah kotak "Location" ditampilkan (mis: location=yes)
menubar
Menentukan apakah jendela baru memiliki menu bar (mis: menubar=yes)
resizable
Menentukan apakah pemakai diperbolehkan untuk mengubah ukuran dari jendela baru (mis: resizable=no)
scrollbars
Menentukan apakah jendela baru memiliki scroll bars(mis: scrollbars=yes)
toolbar
Menentukan apakah jendela baru memiliki suatu toolbar (mis: toolbar=yes)

Selain nilai dari yes/no, anda dapat juga menggunakan nilai 1/0. mis, anda dengan menulis toolbar=1 sebagai penganti dari toolbar=yes.

Berikut ini adalah beberapa kombinasi yang mana dapat anda coba sendiri. Semuanya akan membuka dokumen pada suatu jendela baru dengan efek yang berbeda-beda.

<a href onClick="window.open('windows.html', 'newWnd', 'width=500,height=400'); return false;">Coba ini</a>Coba ini
Suatu jendela dasar, tanpa menu, tanpa toolbar, tanpa status bar, dan bahkan tanpa scroll bar.

 

<a href onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes'); return false;">Coba ini</a>Coba ini


Suatu jendela dengan menubar, kotak location dan scroll bars.

 

<a href onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=1,resizable=1'); return false;">Coba ini</a>Coba ini


Suatu window dengan toolbar, statusbar dan scroll bar. Anda dapat juga mengubah ukuran jendela jika anda menginginkannya dimana hak tersebut tidak mungkin dilakukan pada jendela-jendela sebelumnya.

Pada contoh diatas, saya memisahkan kode ke dalam sejumlah baris untuk memudahkan pembacaan, tetapi jika anda ingin menggunakan-nya, pastikan segala sesuatu berada dalam petik ganda dan seluruhnya berada dalam suatu petik tunggal.

 

Menampilkan Icon New-Item

Ketika anda menambahkan atau melakukan modifikasi tertentu pada situs anda, anda sering ingin menempatkan suatu icon (new) disampingnya, sehingga pengunjung dengan mudah dapat menemukan hal-hal yang baru tersebut. Tentu saja icon tersebut ditampilkan untuk suatu periode waktu tertentu dan kemudian dihilangkan. Pekerjaan tersebut menjadi tidak efektif bila anda melakukan modifikasi situs secara berkala atau situs anda cukup besar.

Dengan menggunakan JavaScript, adalah memungkinkan untuk memprogram HTML yang menampilkan icon new untuk suatu periode waktu tertentu. Anda dapat menulis suatu fungsi JavaScript yang mana berfungsi  membandingkan waktu sekarang dengan waktu kadaluarsa yang telah ditetapkan, atau dengan kata lain sisipkan icon new hanya jika tanggal sekarang belum mencapai tanggal kadaluarsa. Berikut ini kodenya : 

<SCRIPT LANGUAGE="JavaScript">
    <!-- Hide code from non-js browsers
    function newItem(expiryDate)
    {
        exp = new Date(expiryDate);
        cur = new Date();
        if (cur.getTime() < exp.getTime())
            document.write("&ltIMG SRC=\"new.gif\" WIDTH=31
              HEIGHT=12 BORDER=0 ALT=\"new\">" );
    }
    // end hiding -->
</SCRIPT>
Biasanya, fungsi seperti ini didefinisikan antara bagian <HEAD> dan </HEAD> pada HTML. Ganti nama new.gif ke nama dari image anda dan modifikasi atribut WIDTH dan HEIGHT ke ukuran yang sesuai. Sekarang dimana saja anda ingin meletakkan icon new tersebut, sisipkan kode berikut : 
<SCRIPT LANGUAGE="JavaScript">
    <!--
    newItem("10/1/2000");
    // -->
</SCRIPT>
Icon akan menampilkan tanggal yang mana anda tentukan sebagai parameter untuk newItem().

 

Tips & Trik

Bagian Tips & Trik ini  adalah beberapa hal yang dapat anda lakukan untuk meningkatkan halaman Web anda tanpa tahu banyak mengenai JavaScript.

Meletakan tulisan pada status bar

Contoh pertama mendemontrasikan bagaimana memanipulasi tulisan pada status bar. Ketika anda mengerakan kursor melalui suatu link, maka statusbar akan menampilkan URL tujuan link tersebut.

Suatu kode HTML untuk suatu membentuk link dapat berupa :

<A HREF="mylink.htm">klik disini</A>

Untuk menampilkan sesuatu pada status bar ketika mouse pointer digerakan melalui link, anda perlu menambah kode berikut :

<A HREF="mylink.htm" onMouseOver="window.status='Klik disini untuk mengetahui lebih jauh tentang saya'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Kode diatas akan menghasilkan suatu link Klik disini. Coba gerakan mouse pointer melaluinya, mudah bukan ?

onMouseOver adalah suatu penanganan event. Perlu diperhatikan bahwa JavaScript akan membedakan huruf besar dan huruf kecil, tetapi Microsoft Internet Explorer adalah lebih pemaaf dibandingkan dengan Netscape Navigator, jadi untuk hasil yang lebih akurat, sebaiknya anda menggunakan Navigator dalam memeriksa kebenaran script pada halaman anda.

Anda mungkin merasa aneh mengapa kami diperlukan suatu return true; pada penanganan event onMouseOver. Normalnya browser menampilkan URL dari link pada status bar, dan potongan kode ini memberitahukan kepada browse untuk tidak menimpa pesan kita dengan URL tersebut.

Menampilkan tanggal "Last Updated" pada dokumen

Pada halaman kita sering ingin menampilkan informasi kepada pengunjung tanggal terakhir kali halaman kita di Update. Berikut ini adalah potongan script yang akan secara otomatis menghasilkan informasi terakhir kali halaman kita di Update:

<SCRIPT LANGUAGE="JavaScript">
   <!-- menyembunyikan dari browser non-js
   document.write("Last updated :");
   document.write(document.lastModified);
   // --> 
</SCRIPT>

Sisipkan kode berikut pada bagian dokumen HTML anda yang akan menampilkan informasi Last update. Perhatikan bahwa script diketik diantara tag komentar HTML <!-- ... -->, tujuannya supaya script tersebut tersembunyi dari browser  non-JavaScript, dengan demikian tidak menimbulkan kesalahan pada browser non-JavaScript tersebut.

Catatan : biasakan mengetik script anda diantara tag komentar HTML <!-- .. -->.

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 <BODY> (atau diantara tag <HEAD>).

<SCRIPT LANGUAGE="JavaScript">
    <!-- menyembunyikan dari browser non-js
    alert("Press Ok to start formatting your hard disk");
    // akhir dari penyembunyian -->
</SCRIPT>

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 :

<A HREF="JavaScript: alert('pesan anda disini.')">

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:

<FORM>
    <INPUT TYPE=BUTTON VALUE="Klik disini" 
      onClick="alert('pesan anda disini')">
</FORM>

Catatan

Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap contoh diatas berbeda. Yang pertama adalah script ditulis diantara tag HTML <A HREF=...>, yang kedua adalah diantara suatu tang <SCRIPT> ... </SCRIPT>. 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 :

<A HREF="javascript:window.close()">tutup</A>

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:
<SCRIPT LANGUAGE='JavaScript'>
<!--
function BuatArray() {
	var jlhargumen = BuatArray.arguments.length;
	for ( i = 0 ; i < jlhargumen; i++ ) 
	    { this[i]=BuatArray.arguments[i] }
}

function buka() {
var pilih = eval(document.dropdown.site.selectedIndex);
if( (pilih > 0) && (pilih < 7) ) {
var bagian=new BuatArray( '',
 'http://indoprog.terrashare.com/tutor/html/index.html', 
 'http://indoprog.terrashare.com/tutor/javascript/index.html',
 'http://indoprog.terrashare.com/tutor/asp/index.html',
 'http://indoprog.terrashare.com/tutor/php/index.html',
 'http://indoprog.terrashare.com/tutor/perl/index.html');

this.location=buka[pilih];
      }
    }
//-->
</SCRIPT>

<FORM NAME="dropdown">
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
<OPTION>JavaScript
<OPTION>ASP 
<OPTION>PHP
<OPTION>Perl
</SELECT>
</FORM>


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
<html>
<head>

   <title>Tutorial JavaScript</title>

   <frameset cols=175,*>

      <frame src="menu.html" name="kiri">

      <frame src="topik1.html" name="kanan">

   </frameset>

</head>
</html>

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
<html>
<head>
  <script language="JavaScript">
     function buka(x)
       {
       top.kanan.location=x;	// membuka halaman x pada frame kanan
       return false
       }
  </script>
</head>
<body>
  <h1>Daftar Isi</h1>

   <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr>
   <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr>
   <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr>
   <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr>
   <a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr>
   <a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr>
   <a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr>
   <a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
   <a href="" onclick="return buka('topik9.html')">Window dan Frame</a><hr>

</body>
</html>

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 ?

 

Objek Netscape

Sebagai tambahan kepada objek-objek  JavaScript dan metode, Pengembang halaman Web dapat mengakses objek-objek dan metode dalam Netscape browser. Bagian ini akan membahas Objek Netscape Navigator  dan metode-metodenya.

Hirarki Objek Navigator

Netscape Navigator membangun suatu hirarki instance-instance yang berkaitan dengan dokumen yang sedang di proses.

Hirarki ini penting untuk membuat acuan kepada Objek dan propertinya. Turunan dari suatu Objek adalah properti dari objek orang tuanya. Karena semua objek adalah merupakan turunan dari objek  window , sehingga objek window sendirinya tidak memiliki acuan ke objek maupun properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain membutuhkan tambahan nama window kepada Objek acuan-nya.

Hal yang penting dari  HTML Layout

Untuk dapat menggunakan JavaScript secara benar membutuhkan pengertian bagaimana Netscape Navigator memproses suatu dokumen HTML. Ketika suatu dokumen HTML di muat, browser akan mulai melakukan proses terhadap baris pertama dari dokumen. Browser membuat layout dari layar berdasarkan perintah HTML yang terdapat dalam dokumen tersebut. Setelah layar selesai digambar, layar tidak dapat digambar ulang tanpa melakukan proses terhadap dokumen baru. Bagaimana hal ini mempengaruhi frame dan window adalah topik pada bagian berikutnya.

Sesuai dengan hal ini, maka instance dari suatu objek ada setelah proses dilakukan terhadap baris HTML yang menghasilkan instance tersebut. Dengan kata lain JavaScript tidak dapat mengacu pada suatu objek HTML seperti form, atau menjalankan suatu fungsi sampai browser memproses perintah tersebut. Sebagai contoh, JavaScript tidak dapat mengacu pada suatu objek form sampai browser memproses HTML untuk form tersebut. Demikian juga dengan proses perubahan  properti, setelah browser menggunakan properti dalam menghasilkan layout window, maka perubahan properti setelah itu tidak memiliki efek terhadap tampilannya.

Walaupun nampaknya keterbatasan tersebut berat, namun dengan pengertian yang baik terhadap HTML proses dan JavaScript akan mengurangi frustasi. Prinsip utama yang perlu diingat bahwa suatu dokumen HTML diproses secara berurut dan JavaScript adalah bagian dari proses secara berurut tersebut.

Objek Window

Objek window adalah orang tua dari semua Objek. Hal tersebut termasuk semua window dan frame yang berada dalam suatu. Ketika browser mulai memuat suatu dokumen HTML, hal tersebut dimulai dengan suatu instance dari objek window. Jika dokumen HTML membuat suatu frame, informasi dari frame tersebut tersimpan dalam suatu objek frame array. Dengan kata lain, membuka suatu window akan menghasilkan suatu anak dari objek window. Kehebatan dari JavaScript adalah terletak pada kemampuan untuk melakukan utilisasi properti dan metode dari objek window.

Bagian ini akan membahas properti dari objek  window berikut :

Diantara ketiga objek tersebut, document adalah objek yang paling penting dalam hirarki tersebut. Objek document itu sendirinya mengacu kepada objek lain. Hal lain yang penting dari hal ini adalah sebagai berikut:

Objek location

Objek location mengandung informasi tentang URL sekarang. Acuannya ke objek tersebut adalah sebagai berikut:

[windowReference.]location[.propertyName]

Properti dari Objek location mengacu pada bagian individual dari URL:

protocol//hostname:port pathname search hash
CATATAN

Objek location dan properti location dari objek dokumen (document.location) memiliki tujuan yang berbeda. Objek location dapat berubah, tetapi properti location tidak dapat berubah.

Properti dari objek location adalah sebagai berikut:

CATATAN

Walaupun JavaScript memungkinkan modifikasi pada properti individual, praktek pemrograman yang umum adalah mengubah properti href. Pendekatan ini mencegah hasil error dari browser sebelum akses URL belum berubah secara keseluruhan.

Contoh :

<a href="" onmouseover="parent.location='http://www.indoprog.com/'">
Langsung ke homepage Indoprog</A>

Contoh diatas akan langsung membuka homepage http://www.indoprog.com/ begitu pointer lewat diatas link Langsung ke homepage Indoprog

Objek History

Akses ke objek  History adalah topik yang kontroversial karena memungkinkan script mengirim history kembali ke server. Untuk mencegah pemakaian yang menyimpang, Netscape Navigator 2.01 keatas telah menghilangkan Objek ini.

Contoh 1 :
<a href="#" onClick="history.go(-1)">Back</a> 
<input type=button value="Back" onClick="history.go(-1)">

Hasil :
Back 
 
Contoh 2 :
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var agree=confirm("Apakah anda yakin untuk melanjutkan PROSES ?");
if (agree)
document.write("");
else
history.go(-1);                 // Kembali ke halaman sebelumnya
// End -->
</SCRIPT>
</HEAD>

Objek document

Objek document menyimpan properti, objek, dan metode yang mewakili dokumen. Hal tersebut mengacu pada bagian dokumen HTML yang didefinsikan oleh tag <BODY></BODY>. Bagian ini mendiskusikan komponen dari objek dokumen, kecuali objek form (yang akan dibahas pada bagian berikutnya).

Properti objek document

Option HTML ke tag <BODY> mendefinisikan properti objek document. JavaScript mengacu pada semua properti ini, kecuali untuk image background.
 

CATATAN

String yang diperlukan untuk mengubah properti color adalah dalam format document.colorProperty = "#RRGGBB" atau document.colorproperty="colorName". Property color lainnya didefinisikan dalam tag <HEAD></HEAD> yang mendahului tag  <BODY>. 

Properti color untuk Objek document adalah sebagai berikut:

Contoh 1:

<FORM>
    <SELECT onChange=
      "document.bgColor=this.options[this.selectedIndex].value">
        <OPTION VALUE="40E0D0"> Torquoise
        <OPTION VALUE="2E8B57"> Sea Green
        <OPTION VALUE="87CEEB"> Sky Blue
        <OPTION VALUE="F4A460"> Sandy Brown
        <OPTION VALUE="FFF0F5"> Lavender Blush
        <OPTION VALUE="FF1493"> Deep Pink
        <OPTION VALUE="FFFFFF" SELECTED> White
    </SELECT>
</FORM>

Hasil :

Objek document juga mengandung properti berikut yang tidak berkaitan dengan warna:

Contoh 1:

<SCRIPT LANGUAGE="JavaScript">
   <!--
    document.write("Update terakhir :");
    document.write(document.lastModified);
   // -->
</SCRIPT>

Hasil:

Update terakhir :05/02/2006 18:57:36 Update terakhir :07/14/2000 09:07:48
 

Contoh 2:

<form name=404form>
<script language="JavaScript"> 

   <!-- Begin 
     var from = document.referrer; 
     document.write("<input type=text name=referrer value='" + from + "'>"); 
   // End --> 
</script> 
</form>

Hasil :

Anda datang dari halaman : 

 

The anchors Objek

Objek anchors mengandung suatu array dari semua anchors yang dideklarasikan dengan atribut  NAME dari tag <A> </A>. Array tersebut dimulai dari 0 dan berlanjut sampai document.anchors.length - 1. Nilai dari  document.annchors[index] adalah null.
 

TIP

Sebelum menggunakannya untuk memberikan nilai seperti location.hash, adalah mungkin untuk memeriksa keabsahan dari anchor dengan membandingkannya dengan panjang array; anda menggunakan bilangan berurut untuk menentukan anchors

Objek link

Array link mengandung Objek link yang didefinisikan oleh tag <A></A> atau dengan metode link. Array tersebut meliputi objek untuk atribut HREF dan NAME. Dengan tambahan ke atribut TARGET, properti dari masing-masing Objek link adalah identik dengan Objek location.
 

CATATAN

link array adalah suatu array read-only. Entries tambahan ditambahkan dengan tag <A></A>. Metode link melakukan modifikasi terhadap isi dalam array link

Objek link memiliki dua event handler: onClick dan onMouseOver. Bagian ini disebut sebagai "The Form Objek,"  pada bagian selanjutnya di bab ini, menggambarkan bagaimana mengunakan event handler.

Properti cookie

Property cookie mengandung suatu nilai string dari isi cookier dari file cookies.txt untuk dokumen tersebut. Untuk suatu keterangan lengkap tentang bagaimana menggunakan cookies, lihat bagian Netscape cookie specification. Metode substring, charAt, indexOf, dan lastIndexOf dapat digunakan untuk memisahkan string cookie.

The document Objek Metodes

Objek document mengandung lima metode:

Sebagaimana yang ditunjukkan pada contoh sebelumnya, metode document.write, tanpa mengacu pada suatu window, menulis text ke window yang sekarang. Metode document.writeln() adalah sama dengan  document.write, selain itu juga menyisip suatu karakter newline pada akhir dari argumen. Format dari metode ini adalah sebagai berikut:

document.write(ekspresi [, ekspresi2] ... [ekspresiN])

document.writeln(ekspresi [, ekspresi2] ... [ekspresiN])

Tipe default  MIME adalah text/html. Bagaimanapun, metode document.open(["mimetype"]) memungkinkan untuk membuka type MIME lainnya, seperti text/plain, image/gif, image/jpeg, image/x-bitmap, dan plugIn. Metode document.open() membuka suatu stream untuk mengumpulkan output dari metode write dan write.ln. Jika tipe MIME adalah text atau image, browser membuka suatu stream untuk layout, untuk plugIn, browser membukanya pada suatu  plug-in. Jika suatu dokumen telah siap dalam target windows, mthod open menghapusnya.
 

Contoh :

<SCRIPT>
document.write(Date()+".")
</SCRIPT>

Hasil :

Sun Sep 03 15:48:20 2006.

 

CATATAN

Sekarang, tidak dimungkinkan lagi untuk mencetak tulisan apapun dengan JavaScript melalui metode write ataupun writeln

Stream tersebut tetap terbuka sampai browser menemukan metode document.close(). document.close() memaksakan isi dari stream ditampilkan. Metode document.clear() membersihkan isi dari window.

Contoh :

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var clocktext, timeday;
var pagetitle = document.title;
function scroll() {
today = new Date();
sec = today.getSeconds();
hr = today.getHours();
min = today.getMinutes();
// 12 Hour clock fix by Michael Mann
if (hr < 12) { timeday = " AM"; }
else { timeday = " PM"; }
if (hr > 12) hr = hr - 12;
if (hr <= 9) hr = "0" + hr;
if (min <= 9) min = "0" + min;
if (sec <= 9) sec = "0" + sec;
var clocktext = " - " + hr + ":" + min + ":" + sec + timeday;
clocktimer = setTimeout("scroll()", 1000);
document.title = pagetitle + clocktext;
}
if (document.all) scroll();

// End -->

</script>

Hasil : Lihat pada Title Halaman ini

 

Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut.

Properti Objek Window

Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser:

Contoh:

<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik disini untuk keterangan lebih lengkap'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Hasil:

Klik disini

Bentuk untuk mengacu properti window adalah

window.propertyName

self.propertyName

top.propertyName

parent.propertyName

windowVar.propertyName

propertyName

Metode Objek Window

Berikut ini adalah metode dari objek window atau frame:

toolbar=yes|no

location=yes|no

directories=yes|no

status=yes|no

menubar=yes|no

scrollbars=yes|no

resizable=yes|no

width=pixels

height=pixels
NOTE

Setelah terbuat, window adalah tidak terikat pada parent window, jika parent window di tutup, window yang dibuat tersebut tetap buka.Event onUnLoad menangani penutupan window yang dibuat

Metode sebelumnya menggunakan acuan berikut:

window.metodeName(parameters)

self.metodeName(parameters)

top.metodeName(parameters)

parent.metodeName(parameters)

windowVar.metodeName(parameters)

metodeName(parameters)
PERHATIAN

Metode open() dan close() perlu mengunakan acuan window.open() dan window.close() untuk menghindari scope dengan document.open() dan document.close()

Membagi Window kedalam Frame

Frames membagi suatu window secara multiple, memiliki scrollbar masing-masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan metode dari frame.
 

CATATAN

Frames memiliki semua properti dari suatu window. Seluruh hirarki untuk struktur frame adalah sama dengan struktur window.

Struktur dibawah setiap window atau frame dapat menjadi acuan. Selanjutnya, properti pada suatu window atau frame dapat mengubah properti object pada jendela atau frame lain.
 

CATATAN

Dokumen HTML yang menggunakan <FRAMESET></FRAMESET> mengandung hanya perintah frame. Setelah frame terbuka, dokumen tersebut menjadi tidak visible. Dokumen HTML adalah suatu frame dapat mengendalikan frame lain. Selanjutnya kemungkinan untuk pengaturan layar memberikan kebebasan bagi pengembang untuk suatu dokumen web yang interaktif

Contoh :

<html>
<head>

   <script language="JavaScript">

      if (top.location != this.location)

         top.location = this.location		//membuat html tidak berada
						//dalam frame lain
   </script>

   <title>Tutorial JavaScript</title>

   <frameset cols=175,*>

      <frame src="daftar.html" name="kiri">

      <frame src="topik1.html" name="kanan">

   </frameset>

</head>
</html>
file daftar.html
<html>
<head>

  <script language="JavaScript">

     function buka(x)
       {
       top.frames[1].location=x;
       return false
       }

  </script>

</head>

<body>

   <h1>Daftar Isi</h1>
   <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr>
   <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr>
   <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr>
   <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr>
   <a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr>
   <a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr>
   <a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr>
   <a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
   <a href="" onclick="return buka('topik9.html')">Window dan Frame</a><hr>

</body>
</html>

Klik untuk melihat hasil dari contoh diatas

 

 

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.

</p> <form NAME="login"> Username: <input NAME="username1" size="20"><br> Password: <input NAME="password1" TYPE="PASSWORD" size="20"><br> <input TYPE="BUTTON" VALUE="Login" onClick="verifyLogin()"> <input TYPE="RESET"> </form> <SCRIPT LANGUAGE="Javascript"> <!-- function verifyLogin() { var myForm = document.login; if (myForm.username.value == "elvis" && myForm.password.value == "presley") window.location.href = "secretpage.html"; else alert("Unknown username or wrong password"); } // --> </SCRIPT>

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(.

<SCRIPT LANGUAGE="Javascript"> <!-- function verifyLogin() { var myForm = document.login; window.location.href = myForm.username.value + myForm.password.value + ".html"; } // --> </SCRIPT>

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.

Baca Juga:
Password Protection Scripts dari Javascript Source
Password Protection Scripts dari WebAbstraction

 

Memasukkan JavaScript kedalam HTML

JavaScript adalah pemrograman sisi klien yang akan dijalankan oleh browser dari pengunjung, dan program JavaScript biasa ditanamkan didalam halaman web untuk menghasilkan halaman yang dinamis. Untuk mempelajari JavaScript sebaiknya anda menguasai dasar-dasar HTML Script sehingga akan memudahkan anda untuk menyisipkan program JavaScript secara baik dan benar.

Ketiklah Contoh berikut dan simpan ke file Hello.html

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
   <!-- Menyembunyikan script terhadap browser non-JavaScript
   document.write("Hello world.")
   // akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>

Untuk melihat hasilnya, buka file Hello.html dengan internet browser.

Sebenarnya ada dua cara menanamkan JavaScript kddalam dokumen HTML anda, yaitu :

1. Mengapit JavaScript tersebut dengan  tag <SCRIPT>...</SCRIPT>

Contoh :

<SCRIPT LANGUAGE="JavaScript">

   <!-- Menyembunyikan script terhadap browser non-JavaScript

      Perintah-perintah JavaScript anda diketik disini.

   // --> 

</SCRIPT>

2. Menggunakan tag HTML yang menangani event.

Contoh :

<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik disini untuk mengetahui lebih jauh tentang saya'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

 

Dengan menggunakan  Tag <SCRIPT>

Walaupun Netscape Navigator akan mengolah semua teks dalam tag <SCRIPT> sebagai JavaScript, tetapi adalah lebih baik melakukan deklarasi  LANGUAGE yang menentukan jenis bahasa script yang digunakan. karena ada beberapa bahasa script lainnya untuk HTML, mendeklarasikan jenis bahasa script adalah suatu praktek yang baik. Marilah kita memulai dengan suatu program sederhana yang akan mencetak  Hello World.
 

Contoh :

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
   <!-- Menyembunyikan script terhadap browser non-JavaScript
   document.write("Hello world.")
   // akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>


 

Contoh diatas menunjukkan program Javascript diketik diantara  tag <HEAD> dan </HEAD>. Jika contoh JavaScript diatas diketikkan diantara tag <BODY>, juga akan memiliki hasil yang sama. Tetapi karena bagian heading akan dibaca terlebih dahulu dibandingankan dengan bagian <BODY>, menempatkan semua fungsi maupun variabel global pada bagian heading adalah praktek pemrograman yang baik. Dan semua perintah JavaScript yang berkaitan dengan dokumen ditempatkan pada bagian body HTML.

Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk menghindari kesalahan penampilan pada  browser tersebut, anda perlu mengetikkan JavaScript diantara tag komentar HTML sebagai berikut :

   <!-- Menyembunyikan script terhadap browser non-JavaScript
   Perintah-perintah JavaScript anda ketik disini.	
   // akhir dari penyembunyian -->
Catatan

Ingat, selalu mengetik JavaScript diantara baris komentar sehingga browser non Java dapat mengabaikannya, hal ini dilakukan karena siapa saja dapat mengunjungi homepage kita di internet dengan berbagai web browser.

 

Dengan menggunakan Event

Menangani Event akan mengubah halaman yang static menjadi lebih dinamis. Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman. Netscape mengenali sejumlah event, tetapi kita tidak akan mendiskusinya sekarang.

Contoh:

<FORM>
<INPUT TYPE=BUTTON VALUE="Coba Klik" onClick="alert('Hello world')">
</FORM>

Hasil:

 

Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator dan akan menghasilkan ekspresi. JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.

Contoh :

temp = 24

pada contoh diatas, temp adalah variabel, 24 adalah variabel, = adalah operator, dan  temp=24 adalah ekspresi.

Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:

JavaScript memiliki operator binari maupun unari. Suatu operator binari memiliki format.

operand1 operator operand2

Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari.

Operator unari memiliki dua format:

operand operator

atau

operator operand

Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.

Catatan

Bagi programmer C language, tentu saja operator unari bukan sesuatu yang asing, tetapi bagi programmer dari latarbelakang Basic dan Pascal, penulisan y++ adalah sama dengan y = y + 1.

 

Assignment Operator

Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai operand sebelah kanan (seperti NamaDepan = "Hendra" atau x = y * 9).  Table 3 adalah daftar singkat operator pemberi nilai.
 

Table 3. Daftar Operator assignment

Shorthand operator Artinya Contoh
x += y x = x + Y x +=
x -= y x = x - y x -=
x *= y x = x * y x *=
x /= y x = x / y x /=
x %= y x = x % y x %=
x <<= y x = x << y x <<=
x >>= y x = x >> y x >>=
x >>>= y x = x >>> y x >>>=
x &= y x = x & y x &= 0xC0
x |= y x = x | y x |= 0x0F
x ^= y x = x ^ y x ^= 0XFF
Catatan

Bagi yang tidak familiar dengan pemrograman C, hati-hati dengan perbedaan antara assignment operator (=) dan comparison operator (==)

Arithmetic Operator

Sesuai dengan fungsinya operator aritmatika melakukan operasi perhitungan aritmatika terhadap suatu nilai numerik baik dalam literal maupun variabel. JavaScript mendukung operator standard aritmatika untuk penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator modulus (%), increment (++), decrement (--), dan unary negation (-).

Operator modulus (%) adalah suatu operator binary yang mengembalikan nilai sisa dari suatu pembagian bulat operand1 terhadap operand2. Sebagai contoh, hasil dari  27 % 6 adalah  4.

Operator increment unary adalah menambah nilai satu ke variabel operand, sedangkan operator decrement unary mengurangi satu dari padanya. Bagaimanapun, nilai yang dikembalikan tergantung dari posisi operator terhadap operand Jika operator berada didepan (++x atau --x), nilai yang dikembalikan adalah  x+1 atau x-1. Ketika operator dibelakang(x++ or x--), nilai x dikembalikan sebelum ditambah atau dikurang.

Operator khusus unari arithmetic adalah operator unari negation operator. Ia membalikan tanda dari nilai yang diberikan pada suatu variabel.  Sebagai contoh, jika x = -7, -x mengubah nilai menjadi 7.

Bitwise Operator

Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu set dari operator bitwise. Untuk operator ini, JavaScript melakukan konversi terhadap operand menjadi integer 32-bit sebelum melakukan operasi padanya. Operator logika bitwise adalah

JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1 terhadap jumlah yang ditentukan di operand2. Operand ini adalah

Logical Operator

Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan mereka akan mengembalikan suatu nilai logika. Operator logika adalah sebagai berikut :

Operator logika NOT adalah suatu unary operator yang mempertahankan nilai ekspresi.
 

Comparison Operator

Operator perbandingan diterapkan pada perbandingan pada data numerik dan data string serta tidak dapat dilakukan pada nilai Boolean. Masing-masing operand harus memiliki tipe yang sama: nemerik dibandingkan dengan numerik atau string dengan string. Hasil dari perbandingan adalah sautu nilai Boolean. Operator perbandingan adalah:

JavaScript juga mendukung ekspresi secara kondisi (conditional expression) yang mana berbentuk.

(kondisi) ? nilai_benar : nilai_salah

Jika kondisi adalah benar, ekspresi memiliki dari true_value. Sebaliknya memiliki nilai dari false_value. Seperti saudaranya yang berbasis bahasa C, ekpresi kondisi adalah ekspresi standard dan dapat digunakan dimana saja, dan dapat dilihat sebagai berikut :

status_baterai = (voltase > 1.3) ? "baik" : "buruk"

Catatan

Bagi programmer C language, tentu saja comparison operator (==)  bukan sesuatu yang asing, tetapi bagi programmer dari latarbelakang Basic dan Pascal, penulisan = adalah tidak sama dengan ==.

 
 

String Operator

Operator string (+) mengabung dua nilai string dan mengembalikan satu string dimana merupakan hasil gabungan dari keduanya. Sebagai contoh :

"Java" + "Script"

Menghasilkan

"JavaScript"

Operator shorthand += mengabung string kiri dengan string dikanan operand dan memberikan nilai baru pada operand disebelah kiri.

Urutan operasi

Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator, urutan operasi dari operator menentukan nilai hasil evaluasi. Dengan menggunakan tanda kurung, programmer dapat mengatur aturan tersebut. Table .4 adalah urutan prioritas operasi dari yang paling rendah sampai yang paling tinggi.
 

Table 4. Prioritas urutan operasi dari prioritas rendah sampai tinggi.

Keterangan Operator
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
Conditional ?:
Logical OR ||
Logical AND &&
Bitwise OR |
Bitwise XOR ^
Bitwise AND &
Equality == !=
Relational < <= > >=
Bitwise shift << >> >>>
Addition/subtraction + -
Multiply/divide * / %
Negation/increment ! ~ - ++ -
Call, member () []

 

 

Struktur Kendali dan Fungsi

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil komputasi yang telah dilakukan, JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Kita akan membahas tentang perintah kondisi dan loop dalam JavaScript.

Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini adalah praktek pemrograman yang kurang baik. Sebagai pengantinya, gunakan fungsi, kode akan menjadi lebih modular dan dapat digunakan kembali (reusable).

Perintah kondisi

Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian sebelumnya. JavaScript memiliki suatu perintah kondisi if. Tata cara penulisan dari perintah kondisi tersebut adalah sebagai berikut:

if (kondisi1) {

   pernyataan1 }

[else {

   pernyataan2}]

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false. contoh pemakaian statement if:

if (n>3) {

   status = true

   if (j != n) j = 0 }

else j = n
Perhatian

Bagi programmer C harus berhati-hati dengan evaluasi kondisi pada JavaScript. Suatu kondisi numerik yang mengasilkan nol adalah tidak sama dengan suatu Boolean true pada JavaScript, dan sebaliknya suatu nilai bukan nol tidak sema dengan Boolean false. Pada JavaScript hasil dari suatu kondisi harus data type Boolean.

Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar:

if (a==b) j=0

else j=1

Perintah Perulangan

JavaScript mendukung dua struktur loop; perintah for dan perintah while. Untuk control pada struktur loop, JavaScript menyediakan perintah break dan continue.

Perintah for

Perintah for pada JavaScript sama dengan yang ada di Java dan C. Perintah for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break . Syntax untuk perintah for adalah sebagai berikut :

for ([ekspresi-awal;] [kondisi;] [ekspresi-penambah]) {

   pernyataan

}

Urutan proses untuk perintah for adalah sebagai berikut:

  1. Interpreter menjalankan ekspresi-awal. Ekspresi ini mementukan nilai yang diperlukan untuk kendali perulangan.
  2. Kemudian interpreter memeriksa kondisi. Jika true, kendali dilanjutkan ke langkah selanjutnya. Jika false, kendali diarahkan ke perintah setelah perulangan.
  3. Kemudian interpreter menjalankan ekspresi-penambah, yang mana melakukan update terhadap variabel-variabel yang digunakan untuk kendali perulangan.
  4. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke langkah 2. 
Contoh :


<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

  <!-- menyembunyikan script dan browser non-JS

   for (i=1; i<=10; i++) {

       sq=i*i

       document.write("number: " + i + " square: " + sq + "<BR>")

   }

  // akhir dari penyembunyian -->

</SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Hasil :

number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100
number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100
 

 

Perintah while

Perintah while terus mengulangi loop selama kondisi memiliki nilai true. Syntax untuk perintah while adalah sebagai berikut :

while (kondisi) {

   pernyataan

}

Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir dari setiap loop. Ketika hasil test mengembalikan false, kendali dilewatkan ke perintah berikutnya setelah loop. Perintah for yang diubah ke suatu while loop.

Contoh:
 

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

   <!-- menyembunyikan script

   i=1

   while (i<=10) {

         sq=i*i

         document.write("number: " + i + "square: " + sq + "<BR>")

         i++

   }

   // end script hiding -->

</SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Hasil:

number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100
number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100
 


 

Perintah break

Perintah break menghentikan for atau while loop dan mengembalikan kendali ke perintah berikutnya yang mengikuti loop. Contoh berikut menggambarkan bagaimana menggunakan perintah break:

i=0

while (i<10) {

   if (i==3)

      break

   i++

}

Perintah continue

Seperti perintah break, perintah continue menghentikan interasi tersebut untuk suatu for atau while loop; Tetapi tidak keluar dari loop; Tetapi melakukan interasi berikutnya.

Berikut ini memperlihatkan bagaimana menggunakan perintah continue:

i=0

while (i<10) {

   if (i==3)

      continue

   i++

}

Perintah function

Suatu function adalah sekumpulan dari perintah JavaScript yang akan mengerjakan tugas tertentu. Fungsi ini dapat dipanggil dari segala titik pada dokumen tersebut dan dipanggil dari event. Format dari perintah function adalah sebagai berikut:

function FunctionName(argument list) {

   statements

}

Contoh:

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript"

<!-- hide the script

function DisplayIt(LineToDisplay) {

   document.write(LineToDisplay + "<BR>")

}

// end hiding -->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript"

   <!-- hide it

    LineToDisplay("Hello World")

   // end hiding -->

</SCRIPT>

</BODY>
</HTML>
TIP

Karena browser membaca perintah tersebut diapit oleh <HEAD>...</HEAD> duluan; adalah praktek yang baik untuk memesan semua variabel global dan semua fungsi pada HEAD dari dokumen. Hal ini mencegah kesalahan seperti  non-initialized variables dan undefined functions

Argumen dari suatu fungsi dapat berupa sembarang tipe data atau objek JavaScript. Objek array functionName.argument[i] dan functionName.arguments.length mengandung nilai jumlah argumen yang dikirim ke fungsi, argumen acuan dengan mendeklarasikan nama-nama variabel. Hal ini memungkinkan sejumlah argumen dilewatkan ke fungsi sebagai suatu argument array. Contoh berikut menunjukkan pemakaian dari suatu variable argument list.

Contoh :
 

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

   <!-- menyembunyikan

    UnorderList="UL"

    function DisplayList(ListType) {            // menampilkan variabel list

      if (ListType="OL" || ListType="UL") {     // validasi jenis list

         document.write("<" + ListType + ">"    // menampilkan jenis list

         for (var i=1; i<DisplayList.arguments.length; i++)

         document.write("LI" + DisplayList.arguments[i])

         document.write("</" + ListType + ">")  // End list

         return true

         }

    else return false

    }

    // akhir dari penyembunyian -->
  
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript"

    <!-- menyembunyikan

    if (DisplayList(UnorderList, "Bullet 1 text", "Bullet 2 text"))

       document.write("<P>List Display</P>")

    else

       document.write("<P>Invalid List Type<p>")

    // unhide it -->

</SCRIPT>

</BODY>
</HTML>

Contoh diatas menggambarkan beberapa hal yang penting dari suatu fungsi. Suatu variabel global diinisialisasi pada bagian <HEAD>. Perintah var mendeklarasikan i sebagai suatu variabel lokal pada fungsi. Juga ditunjukkan bagaimana perintah return dapat digunakan untuk memastikan fungsi dijalankan dengan baik. Perintah return juga dapat mengembalikan string atau nilai numerik, sebagaimana yang ditunjukkan oleh contoh  dibawah ini:

function RetExam(a, b) {

   var x=0

   x = a+b

   return x

}



TestResult=RetExam(5, 7)

Komentar

JavaScript mendukung dua bentuk format untuk komentar:

Komentar single-line, dari C++, memperlakukan semua yang dari double slash ke belakang sebagai suatu komentar, berikut ini adalah contoh yang sah untuk suatu komentar single-line :

// ini adalah komentar

if (a=b) c=1 // ini juga adalah komentar

Komentar banyak baris mengikuti aturan pada C dan dapat digunakan untuk menandai perintah JavaScript, sebagaimana yang ditunjukkan oleh contoh sebelumnya, adalah sutu komentar HTML, baris terakhir membutuhkan dua slash untuk menjaga JavaScript dapat menginterprestasikan baris tersebut.

 

 

Dasar dari Objek

JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented programming (OOP). Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi bertujuan membuat suatu bahasa script untuk  mengintegrasikan objek yang telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML. Selanjutnya Javascript tidak memiliki encapsulation , inheritance, dan abstraction seperti pada C atau Java.

Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek.

Objek dan Properti

Berikut ini adalah notasi yang digunakan oleh JavaScript untuk menggambarkan suatu objek dan propertinya:

ObjekName.PropertyName

Sebagai contoh, objek mydog memiliki properti sebagai berikut :

mydog.breed="small mut"

mydog.age=5

mydog.weight=25

Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index:

mydog["breed"]="small mut"

mydog["age"]=5

mydog["weight"]=25

Juga dapat mengunakan acuan array dengan index secara numerik:

mydog[0]="small mut"

mydog[1]=5

mydog[2]=25

Defining Metodes

Suatu fungsi yang berasosiasikan  objek acuan adalah  metode. format berikut meng-asosiasikan fungsi dengan suatu objek:

ObjekName.MetodeName = function_name

Kemudian metode tersebut berkerja dengan suatu objek:

ObjekName.MetodeName(parameters);

Bekerja dengan Objek

Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah for...in , perintah with , operator new, dan kata kunci  this.

Perintah for...in

Perintah  for...in menyediakan suatu mekanisme perulangan untuk iterasi melalui semua properti dari suatu objek. Dengan format adalah sebagai berikut :

for (variable in Objekname) {

   statements

}

Contoh berikut mengunakan perintah ini untuk menampilkan semua properti dalam suatu objek dan nilai asosiasinya:

function ListProperti(obj, obj_name) {

   var result = ""

   for (var i in obj) {

      result += obj_name + "." + i " = " + obj[i] + "<BR>"

   }

   return result

PropList = ListProperti(mydog, "mydog")

Pada contoh sebelumnya, variabel i adalah nama dari property, kemudian mengindeks objek dengan menggunakan property name_obj[i].

Perintah  with

Pada beberapa situasi suatu objek perlu dibuat acuan beberapa kali. Perintah with membuat acuan ke suatu objek default yang berada dalam kurung. Tata cara penulisannya adalah sebagai berikut:

with (ObjekName) {

   statements

i

Objek math berikut merupakan contoh pemakaian dari perintah with:

var r =

var x =

with (Math) {

   r = p / (1 - cos(a))

   x = (2 * p * cos(a)) / (sin(a) * sin(a))

}

Operand new

Untuk suatu  tipe objek user-defined, operand new berfungsi membuat suatu instance baru dari objek. Tata cara penulisannya adalah sebagai berikut:

ObjekName = new ObjekType(param1 [, param2,] É [, paramN])

Kata kunci this

this mengacu pada objek yang sekarang. Pada bagian selanjutnya akan ditunjukkan bagaimana pemakaian kata kunci ini dalam penulisan function dan metode.

Membuat Objek baru

Walaupun JavaScript memiliki sejumlah besar  objek yang telah didefinisikan, developer dapat membuat  objeknya sendiri. Untuk membuat suatu objek baru diperlukan dua langkah yaitu:

  1. Mendefinisikan jenis objek dengan membuat suatu fungsi.
  2. Membuat instances dari objek tersebut dengan menggunakan operand new.

Fungsi tersebut mendefinisikan jenis objek, properti, dan metode. Sebagai contoh untuk membuat suatu objek dog:

function dog(breed, age, weight) {

   this.breed = breed;

   this.age = age;

   this.weight = weight;

}

Untuk menggunakan fungsi diatas, operand new diperlukan untuk mendefinisikan suatu instance baru untuk objek tersebut. Sebagai contoh:

mydog = new dog("small mut", 5, 25);

Selain type data yang umum (string, numeric, and Boolean), objek yang lain dapat juga menjadi properti dari suatu objek. Contoh menambah suatu nomor izin pada objek jenis dog, nomor izib ini juga mengacu pada objek lain.

function doglicense(owner, phone_number) {

   this.owner = owner;

   this.phone_number = phone.number;

}



AZ123 = new doglicense("John Smith", "999-9999");

Jenis Objek dog perlu dimodifikasi untuk mengikutsertakan informasi baru tersebut:

function dog(breed, age, weight, license) {

   this.breed = breed;

   this.age = age;

   this.weight = weight;

   this.license = license;

}



mydog = new dog("mixed mut", 5, 25, AZ123);

Untuk mengacu pada pemilik mydog, syntax berikut diperlukan

mydog.license.owner
CATATAN

Jika suatu property baru ditambahkan pada suatu objek tanpa mengubah jenis objek, properti tambahan tersebut hanya berpengaruh pada objek tersebut dan bukan pada semua instances dari objek jenis yang sama.
CATATAN

Suatu variabel string atau suatu string literal adalah suatu objek string. Metode string adalah asosiasi dengan objek ini, dan akan didiskusikan pada bagian  "Objek dan fungsi built-in".

Mendefinisikan Array

Tidak seperti bahasa lainnya, Java script tidak memiliki suatu tipe data array. Tetapi bagaimanapun, fungsi yang sama dapat dengan membentuk suatu objek untuk melakukan emulasi suatu array. Langkah pertama untuk mendefinsikan suatu objek array:

function MakeArray(n) {

   this.length = n;

   for (var i = 1; i <= n; i++)

      this[i] = 0;

   return this

}

Langkah berikutnya adalah mendefinisikan suatu instance untuk membentuk objek MakeArray :

ExmpArray = new MakeArray(20);

Ketika anda memberikan nilai pada suatu elemen array, hal tersebut menyerupai memberi nilai pada suatu type data array. Perbedaannya adalah array ini dimulai dari satu dan bukan nol, karena nol mendefinisikan panjang dari array:

ExmpArray[1] = "test1"

ExmpArrya[2] = "another test"

 

Objek dan Fungsi Built-In

Objek dan fungsi yang akan dijelaskan pada bagian ini adalah bagian dari lingkungan JavaScript, selanjutnya sangat tergantung pada jenis web browser. Adapun objek dan fungsi tersebut adalah sebagai berikut:

Objek String

Suatu string yang dipetik adalah suatu variabel string atau suatu properti string dari suatu objek, segala sesuatu yang ditempatkan diantara petik adalah suatu string. Ada dua cara untuk menggunakan suatu objek string:

  1. stringName.propertyName
  2. stringName.metodeName(parameters)

Properti Objek String

Objek string hanya memiliki sebuah properti -length. Karena berupa properti, berikut ini adalah acuan yang benar:

StringLength = stringVariable.length;

StringLength = mydog.name.length;

StringLength = "This is a string".length;

Metodee Objek String

Sejumlah besar metode adalah asosiasi dengan objek  string. Disamping fungsi manipulasi string yang normal, banyak diantaranya berfungsi membungkus string diantara tag HTML. Berikut ini adalah daftar dari metode Objek string:

document.write("Other Links".anchor("other_links"));

Objek Math

Objek Math menyediakan suatu himpunan dari nilai-nilai standar matematika dan metode-metode yang argumennya berupa himpunan dari operator matematika yang disediakan dengan JavaScript. Tidak seperti Objek lainnya, Objek Math tidak membutuhkan suatu instance dari Objek sebelum menggunakan metode objek math tersebut. Untuk memudahkan pemasukkan nama dan pembacaan, metode Math sering diikat dengan perintah with. Syntax untuk Objek Math adalah sebagai berikut:

  1. Math.propertyName
  2. Math.metodeName(parameters)

Properti Objek  Math

Objek Math memiliki delapan buah properti. Properti-properti ini ini mendefinisikan berbagai konstanta matematika. Tabel 5. menunjukkan properti-properti tersebut dan nilai perkiraannya.
 

Table 5. Properti-properti objek Math dan nilainya.

Property Description Approx. value
E Euler's constant 2.718
LN2 Natural logarithm of 2 0.693
LN10 Natural logarithm of 10 2.302
LOG2E Base 2 logarithm of e 1.442
LOG10E Base 10 logarithm of e 0.434
PI Ratio of circumference to diameter 3.14159
SQRT1_2 Square root of one-half 0.707
SQRT2 Square root of two 1.414

Metode Objek Math

Objek Math memiliki sejumlah metode yang argumennya adalah himpunan dari operator matematika:

Contoh :

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var ran
ran = Math.round(Math.random()*50000)
alert("Anda adalah pengunjung yang ke " + ran + ".")

// End -->

</SCRIPT>

 

Objek Date

Walaupun JavaScript tidak menyediakan suatu type data Date, tetapi menyediakan suatu objek Date yang mana menangani informasi date dan time. Semua tanggal adalah jumlah milidetik sejak January 1, 1970, 00:00:00. Akibatnya semua tanggal sebelum 1970 adalah tidak sah.

Objek Date membutuhkan suatu instance dari objek Date yang berkaitan dengan pemakaian metode-metodenya. Instance dapat berupa suatu objek baru atau properti dari objek yang ada. Ada empat cara untuk membentuk instance baru:

dateObjekName = new Date()

dateObjekName=new Date("month day, year hours:minutes:seconds")

dateObjekName=new Date(year, month, day)

dateObjekName=new Date(year, month, date, hours, minutes, seconds)

Membentuk suatu himpunan dari tanggal dan waktu ke tanggal dan waktu sekarang. Mengosongkan time berarti memberinya nilai nol. Karena objek  Date tidak mengandung properti apa-apa, hanya ada satu format untuk metode Date:

dateObjekName.metodeName(parameters)

Pengecualiaanya adalah UTC dan metode parse, yang mana adalah metode status dan pemakaiannya 

Date.UTC(parameters)

Date.parse(parameters)

Table 6 menjelaskan nilai yang akan dikembalikan oleh berbagai perintah get.
 

Table 6. Memisahkan informasi dalam objek Date.

metode Date Nilai yang dikembalikan
getDate() Day of the month
getDay() Day of the week
getHours Hour of the day
getMinutes Minutes in the hour
getMonth The month
getSeconds Seconds in the minute
getTime Milliseconds since 1/1/1970
getTimezoneOffset Offset between local time and GMT
getYear The year

Selain dapat menerima berbagai informasi dari Objek Date, metode pada Tabel 7 menunjukkan bagaimana mengubah informasi date.
 

Table 19.7. Setting informasi dalam objek Date.

metode Date Nilai yang sah
setDate(dayValue) 1-31
setHours(hoursValue) 0-23
setMinutes(minutesValue) 0-59
setMonth(monthValue) 0-11
setSeconds(secondsValue) 0-59
setTime(timeValue) >=0
setYear(yearValue) >=1970

Dua metode tambahan yang dapat digunakan untuk melakukan konvesi data tanggal ke suatu nilai string, adalah sebagai berikut:

Objek Date juga memiliki dua metode statik untuk menangani string; hal tersebut memiliki format Date.metode(). Metode-metode ini adalah sebagai berikut:

Contoh :

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

  var months=new Array(13);
  months[1]="Januari";
  months[2]="Februari";
  months[3]="Maret";
  months[4]="April";
  months[5]="Mei";
  months[6]="Juni";
  months[7]="Juli";
  months[8]="Agustus";
  months[9]="September";
  months[10]="Oktober";
  months[11]="Nopember";
  months[12]="Desember";

  var time=new Date();

  var lmonth=months[time.getMonth() + 1];

  var date=time.getDate();

  var year=time.getYear();

  if (year < 2000) // Y2K Fix, Isaac Powell
     year = year + 1900; 

  document.write("<center>" + lmonth + " ");
  document.write(date + ", " + year + "</center>");

// End -->

</SCRIPT>

Hasil :

September 3, 2006

Fungsi Built-In

JavaScript mendukung beberapa function built-in yang mana tidak berkaitan dengan Objek tertentu. Berikut ini adalah function-function built-in adalah sebagai berikut:

var x =

var y =

var z = "if (x <= 9) (x*y) else (x/y);"

document.write(eval("x + y / 4"), "<BR>")

document.write(eval(z), "<BR>")

 

Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut.

Properti Objek Window

Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser:

Contoh:

<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik disini untuk keterangan lebih lengkap'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Hasil:

Klik disini

Bentuk untuk mengacu properti window adalah

window.propertyName

self.propertyName

top.propertyName

parent.propertyName

windowVar.propertyName

propertyName

Metode Objek Window

Berikut ini adalah metode dari objek window atau frame:

toolbar=yes|no

location=yes|no

directories=yes|no

status=yes|no

menubar=yes|no

scrollbars=yes|no

resizable=yes|no

width=pixels

height=pixels
NOTE

Setelah terbuat, window adalah tidak terikat pada parent window, jika parent window di tutup, window yang dibuat tersebut tetap buka.Event onUnLoad menangani penutupan window yang dibuat

Metode sebelumnya menggunakan acuan berikut:

window.metodeName(parameters)

self.metodeName(parameters)

top.metodeName(parameters)

parent.metodeName(parameters)

windowVar.metodeName(parameters)

metodeName(parameters)
PERHATIAN

Metode open() dan close() perlu mengunakan acuan window.open() dan window.close() untuk menghindari scope dengan document.open() dan document.close()

Membagi Window kedalam Frame

Frames membagi suatu window secara multiple, memiliki scrollbar masing-masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan metode dari frame.
 

CATATAN

Frames memiliki semua properti dari suatu window. Seluruh hirarki untuk struktur frame adalah sama dengan struktur window.

Struktur dibawah setiap window atau frame dapat menjadi acuan. Selanjutnya, properti pada suatu window atau frame dapat mengubah properti object pada jendela atau frame lain.
 

CATATAN

Dokumen HTML yang menggunakan <FRAMESET></FRAMESET> mengandung hanya perintah frame. Setelah frame terbuka, dokumen tersebut menjadi tidak visible. Dokumen HTML adalah suatu frame dapat mengendalikan frame lain. Selanjutnya kemungkinan untuk pengaturan layar memberikan kebebasan bagi pengembang untuk suatu dokumen web yang interaktif

Contoh :

<html>
<head>

   <script language="JavaScript">

      if (top.location != this.location)

         top.location = this.location		//membuat html tidak berada
						//dalam frame lain
   </script>

   <title>Tutorial JavaScript</title>

   <frameset cols=175,*>

      <frame src="daftar.html" name="kiri">

      <frame src="topik1.html" name="kanan">

   </frameset>

</head>
</html>
file daftar.html
<html>
<head>

  <script language="JavaScript">

     function buka(x)
       {
       top.frames[1].location=x;
       return false
       }

  </script>

</head>

<body>

   <h1>Daftar Isi</h1>
   <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr>
   <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr>
   <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr>
   <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr>
   <a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr>
   <a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr>
   <a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr>
   <a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
   <a href="" onclick="return buka('topik9.html')">Window dan Frame</a><hr>

</body>
</html>

Klik untuk melihat hasil dari contoh diatas

 

 

Variabel dan Literal

Setelah mengetahui cara menanamkan JavaScript kedalam halaman web, selanjutnya kita akan membahas dasar-dasar dari pemrograman JavaScript itu sendirinya, sebagai langkah pertama dari proses belajar, kita akan membahas Variabel dan Literal. Ketiklah contoh berikut, dan simpan ke file Scroller.html

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
    <!-- Start of scroller script
    var scrollCounter = 0;
    var scrollText    = "Teks yang anda inginkan, misalnya Viva Indoprog";
    var scrollDelay   = 70;
    var i = 0;

    while (i ++ < 140)
        scrollText = " " + scrollText;

    function Scroller()
    {
        window.status = scrollText.substring(scrollCounter++,
          scrollText.length);
        if (scrollCounter == scrollText.length)
            scrollCounter = 0;
        setTimeout("Scroller()", scrollDelay);
    }

    Scroller();
    // End of scroller script -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Coba perhatikan status bar anda</H1>
</BODY>

</HTML>

Pada contoh diatas menggunakan beberapa variabel seperti scrollCounter, scrollText, scrollDelay, i, dan literal seperti 0, "Teks yang anda inginkan, misalnya Viva Indoprog", 70.

Pada JavaScript memiliki beberapa tipe dari nilai sebagai berikut :

Walaupun memiliki tipe data yang sedikit, tetapi cukup untuk unjuk kerja JavaScript. Perlu diperhatikan bahwa pada JavaScript tidak ada perbedaan antara integer dengan real, keduanya dimasukkan pada tipe yang sama yaitu number. JavaScript tidak menyediakan tipe data khusus untuk data tanggal. Tetapi memiliki beberapa fungsi dan objek tanggal (date) yang dapat digunakan untuk melakukan manipulasi data tanggal.

 

Mendefinisikan Variabel

Aturan penamaan variabel pada JavaScript adalah nama variabel harus dimulai dengan suatu huruf atau garis bawah (_) dan huruf selanjutnya dapat berupa angka (0-9), huruf besar (A-Z) atau huruf kecil (a-z), garis bawah. Berikut ini adalah contoh penamaan variabel yang benar:

Nama_depan

h9224

_nama
Catatan

JavaScript membedakan huruf besar dan kecil (case sensitif), sehingga harus diwaspadai oleh programmer, penulisan indoprog adalah berbeda dengan Indoprog bagi JavaScript.

Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan kata pada JavaScript. Tabel 1 adalah daftar dari cadangan kata (Reserved Word) pada JavaScript.
 

Table 1. Cadangan kata pada JavaScript.

abstract extends int super
boolean false interface switch
break final long synchronized
byte finally native this
case float new throw
catch for null throws
char function package transient
class goto private true
const if protected try
continue implements public var
default import return val
do in short while
double instanceof static with
else      

Tidak semua kata dalam Table 1 digunakan oleh JavaScript dewasa ini; dan beberapa diantara dicadangkan untuk pemakaian yang akan datang. Cadangan Kata tidak boleh digunakan untuk nama variabel, nama fungsi, nama metode, dan nama objek

Variabel dalam JavaScript dapat menyimpan semua tipe data yang sah, dan tidak diperlukan suatu deklarasi tipe data. Pada script yang sama, suatu variabel dapat di set ke type data yang berbeda dalam suatu deklarasi tunggal. Berikut ini deklarasi variabel yang sah:

temperatur =

temperatur = "Temperatur adalah"

temperature = "Temperatur adalah " + 27

Karena JavaScript sangat longgar tentang tipe, dan menyediakan beberapa fungsi untuk melakukan manipulasi data string dan nilai numerik (belum dibahas pada bagian ini).

Baca Bagian ini !!!

JavaScript adalah bahasa script yang dinamis. Hal ini berarti bahwa tipe data pada Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang lain sesuai dengan kebutuhan.

Sebagai contoh, anda dapat menyatakan  myData = 10; pada suatu baris initialisasi, dan baris berikutnya, menyatakan myData = "Hello World!" yang membuat tipe myData menjadi suatu string. Java Script akan secara otomatis mengubah tipe data berdasarkan ekspresi yang ditentukan. Jadi jika anda menyatakan myData = "10" - 2;, maka anda akan bertanya mengapa Javascript tidak mengkonversi 2 menjadi "2" dan menghasilkan "102", jawabanya adalah karena operator - tidak ditujukan untuk pemakaian pada string sehingga "10" - 2 tidak memiliki arti sama sekali.  Berikut ini akan membawa kita kepada suatu situasi yang lebih menarik. Operator + dinyatakan untuk pemakaian pada numerik dan string. Jadi akankah 10 + "20" mengembalikan nilai  30 (10+20) atau "1020" ("10" + "20"). Hal ini tentu saja akan membingungkan anda dengan pemakaian operator +, jawabannya adalah Javascript akan selalu mengkonversi segala sesuatu ke string sebelum melakukan evaluasi, sehingga 10 + "20" adalah sama dengan  "10" + "20" dan hasilnya adalah "1020".

Jangkauan dari Variabel

JavaScript memiliki dua jangkauan untuk variabel:

Variabel lokal digunakan didalam suatu fungsi dan ruang lingkupnya terbatas pada fungsi tersebut. Untuk mendeklarasikan suatu variabel lokal, harus diawali dengan var, seperti contoh berikut ini:

var nilaiTerbesar =0

JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global. Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global, tetapi dalam praktek hal tersebut tidak disarankan, karena akan membingungkan anda sendiri.
 

TIP

Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu variabel global, deklarasikan semua variabel global tersebut pada awal dari script.

Literal

Sebagai lawan dari variabel adalah literal  yang merupakan baku yang digunakan dalam JavaScript. JavaScript mendukung literal-literal berikut:

Integer dapat dalam basis desimal (basis 10), hexadesimal, dan oktal. Suatu nilai desimal adalah semua angka yang tidak diawali dengan nol (seperti 4, 89, atau 57). Suatu angka yang diawali dengan nol, adalah berbasis oktal (seperti 04, 065, atau 0145). Suatu bilangan dinyatakan dalam basis hexadesimal diawali dengan 0x atau 0X (seperti 0xff, 0X44, atau 0xAE).

Suatu literal floating-point terdiri dari komponen: suatu desimal bulat, suatu decimal berkoma (.), suatu desimal pecahan, dan eksponen. (seperti 1.23 or 44.6389) atau dalam notasi  scientific (3.6E-8, .4E12, or -2.7E12). Setiap literal floating-point literal minimal memiliki satu digit dengan satu desimal atau eksponen.

Literal Boolean adalah true atau false.

Literal String dapat diapit oleh petik tunggal ( ' ) atau petik ganda ( " ). Tanda petik awal dan akhir harus sama, seperti contoh berikut:

"suatu literal dengan petik ganda"

'suatu literal dengan petik tunggal'
TIP

Ketika anda menulis event handle, apit string dengan petik tunggal, karena petik ganda dibatasi untuk nilai atribut pada HTML

Contoh :

<FORM>
<INPUT TYPE=BUTTON VALUE="Coba Klik" onClick="alert('Hello world')">
</FORM>

Literal string dapat juga mengandung karakter khusus untuk kendali baris Table 2 adalah daftar dari karakter khusus dan fungsi-fungsinya.
 

Table 2. Karakter khusus JavaScript.

Keterangan Spesial Karakter
Backspace \b
Form feed \f
Newline \n
Carriage return \r
Tab \t

Tanda backslash (\) adalah karakter escape pada JavaScript. Ketika digunakan pada akhir dari suatu baris, akan berfungsi sebagai character penyambung baris. Ketika diikuti oleh karakter lain, karakter escape tersebut akan kehilangan fungsi khususnya. Dalam JavaScript, programmer menggunakan backslash untuk escape backslash lainnya, suatu petik tunggal, dan suatu petik ganda.

 

 

Membuka dan Manipulasi Window

Jika anda pernah berurusan dengan homepage-homepage di Geocities atau Tripod, anda akan terbiasa dengan suatu jendela kecil yang muncul dengan suatu iklan banner. Bisa saja anda merasakan hal tersebut mengganggu. Tetapi anda harus percaya pada saya bahwa adalah cukup menyenangkan jika anda melalukan hal tersebut pada homepage anda. Tidak percaya...? Klik disini!

Saya tidak akan memberikan source codenya karena sebaiknya anda tidak melakukan hal tersebut pada penggunjung homepage anda ;-)

Pop-up windows biasanya digunakan ketika anda ingin menampilkan sesuatu kepada user, tetapi anda tidak ingin mereka meninggalkan halaman yang sedang mereka lihat (Mungkin anda takut mereka tidak akan kembali). 

Mari kita lihat kode yang digunakan untuk membuat link tersebut.

<a onClick="window.open('http://www.indoprog.f2s.com', 'indoprog', 'width=370,height=240,status=1'); return false;">klik disini</a> Perlu dicatat bahwa saya menggunakan petik tunggal untuk string bersangkar (nested string). Bagian 'return false' memberitakukan browser bahwa ketika user melakukan klik pada link, browser tersebut tetap akan berada pada halaman yang sama dari pada halaman yang ditentukan pada HREF. Penanganan event onClick() akan memanggil  fungsi window.open() untuk membuka suatu jendela browser yang baru. Parameter pertama adalah : 'http://www.indoprog.f2s.com' merupakan URL yang akan dimuat. Parameter kedua adalah, 'indoprogWnd' merupakan nama yang akan diberikan pada jendela baru tersebut. Parameter ketiga menentukan dimensi tampilan dari jendela. Kita menentukan ukuran jendela adalah 370x240 dengan sautu status bar. Perhatikan disana ada koma untuk pemisah masing-masing elemen. Tampilan dari window dapat dikenalikan dengan option sebagai berikut:

height
Tinggi dari jendela baru dalam pixel (mis: height=100)
width
Lebar dari jendela dalam pixel (mis: width=200)
directories
Menentukan apakah browser menampilkan tombol directory sepert i"What's Cool" dll. (mis: directories=yes)
hotkeys
Mengaktifkan atau menonaktifkan aneka tombol hotkey (mis: hotkeys=no)
location
Menentukan apakah kotak "Location" ditampilkan (mis: location=yes)
menubar
Menentukan apakah jendela baru memiliki menu bar (mis: menubar=yes)
resizable
Menentukan apakah pemakai diperbolehkan untuk mengubah ukuran dari jendela baru (mis: resizable=no)
scrollbars
Menentukan apakah jendela baru memiliki scroll bars(mis: scrollbars=yes)
toolbar
Menentukan apakah jendela baru memiliki suatu toolbar (mis: toolbar=yes)

Selain nilai dari yes/no, anda dapat juga menggunakan nilai 1/0. mis, anda dengan menulis toolbar=1 sebagai penganti dari toolbar=yes.

Berikut ini adalah beberapa kombinasi yang mana dapat anda coba sendiri. Semuanya akan membuka dokumen pada suatu jendela baru dengan efek yang berbeda-beda.

<a onClick="window.open('windows.html', 'newWnd', 'width=500,height=400'); return false;">Coba ini</a>Coba ini
Suatu jendela dasar, tanpa menu, tanpa toolbar, tanpa status bar, dan bahkan tanpa scroll bar.

 

<a onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes'); return false;">Coba ini</a>Coba ini


Suatu jendela dengan menubar, kotak location dan scroll bars.

 

<a onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=1,resizable=1'); return false;">Coba ini</a>Coba ini


Suatu window dengan toolbar, statusbar dan scroll bar. Anda dapat juga mengubah ukuran jendela jika anda menginginkannya dimana hak tersebut tidak mungkin dilakukan pada jendela-jendela sebelumnya.

Pada contoh diatas, saya memisahkan kode ke dalam sejumlah baris untuk memudahkan pembacaan, tetapi jika anda ingin menggunakan-nya, pastikan segala sesuatu berada dalam petik ganda dan seluruhnya berada dalam suatu petik tunggal.