aplikasi java script

images1


v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:”Cambria Math”; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:””; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; mso-layout-grid-align:none; punctuation-wrap:simple; text-autospace:none; font-size:10.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:”Times New Roman”;} h1 {mso-style-priority:99; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:”Heading 1 Char”; mso-style-next:Normal; margin-top:12.0pt; margin-right:0cm; margin-bottom:3.0pt; margin-left:0cm; mso-pagination:widow-orphan; page-break-after:avoid; mso-outline-level:1; mso-layout-grid-align:none; punctuation-wrap:simple; text-autospace:none; font-size:11.0pt; font-family:”Arial”,”sans-serif”; mso-font-kerning:14.0pt;} p.MsoFooter, li.MsoFooter, div.MsoFooter {mso-style-priority:99; mso-style-unhide:no; mso-style-link:”Footer Char”; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; tab-stops:center 216.0pt right 432.0pt; mso-layout-grid-align:none; punctuation-wrap:simple; text-autospace:none; font-size:10.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:”Times New Roman”;} p.MsoCaption, li.MsoCaption, div.MsoCaption {mso-style-priority:99; mso-style-unhide:no; mso-style-qformat:yes; mso-style-next:Normal; margin-top:6.0pt; margin-right:0cm; margin-bottom:6.0pt; margin-left:0cm; mso-pagination:widow-orphan; mso-layout-grid-align:none; punctuation-wrap:simple; text-autospace:none; font-size:10.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:”Times New Roman”; font-weight:bold;} span.Heading1Char {mso-style-name:”Heading 1 Char”; mso-style-priority:99; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:”Heading 1″; mso-ansi-font-size:11.0pt; mso-bidi-font-size:11.0pt; font-family:”Arial”,”sans-serif”; mso-ascii-font-family:Arial; mso-hansi-font-family:Arial; mso-bidi-font-family:Arial; mso-font-kerning:14.0pt; font-weight:bold;} span.FooterChar {mso-style-name:”Footer Char”; mso-style-priority:99; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:Footer; font-family:”Times New Roman”,”serif”; mso-ascii-font-family:”Times New Roman”; mso-hansi-font-family:”Times New Roman”;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; mso-ascii-font-family:Calibri; mso-hansi-font-family:Calibri;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:-2; mso-list-type:simple; mso-list-template-ids:-1484764570;} @list l0:level1 {mso-level-start-at:0; mso-level-text:*; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1 {mso-list-id:1388455647; mso-list-type:simple; mso-list-template-ids:-639332236;} @list l1:level1 {mso-level-text:”%1 “; mso-level-tab-stop:none; mso-level-number-position:left; mso-level-legacy:yes; mso-level-legacy-indent:18.0pt; mso-level-legacy-space:0cm; margin-left:18.0pt; text-indent:-18.0pt;} @list l0:level1 lfo1 {mso-level-start-at:1; mso-level-number-format:bullet; mso-level-numbering:continue; mso-level-text:; mso-level-tab-stop:none; mso-level-number-position:left; mso-level-legacy:yes; mso-level-legacy-indent:18.0pt; mso-level-legacy-space:0cm; margin-left:18.0pt; text-indent:-18.0pt; font-family:Symbol; mso-bidi-font-family:Symbol;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Calibri”,”sans-serif”;}

JavaScript

Membuat halaman web menjadi “hidup”

Pendahuluan

JavaScript merupakan sebuah bahasa scripting (scripting language) yang dikembangkan oleh Netscape Corp., dan ditujukan untuk meningkatkan features dari sebuah halaman web. Dengan adanya JavaScript sebuah halaman web akan menjadi lebih dinamis dan interaktif terhadap user, karena halaman web mampu berfungsi sebagai sebuah program aplikasi yang dapat memproses masukan yang diberikan user dan memberikan hasil sesuai dengan yang telah diprogramkan. Halaman web yang merupakan jawaban dari suatu permintaan user tidak harus di-download terlebih dahulu dari web server, melainkan dihasilkan sendiri oleh JavaScript yang berada pada browser.

Banyak sekali halaman web di Internet yang telah mengimplementasikan JavaScript, seperti Netscape (http://home.netscape.com), lihat aplikasi PowerStart yang memungkinkan kita berinteraksi pada salah satu halaman web-nya.

Perbedaan cara kerja halaman web biasa dengan halaman web dengan JavaScript dalam hal penjawaban terhadap masukan user dapat dilihat pada gambar di bawah ini:

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>1<!–[if supportFields]><![endif]–> Interaksi halaman-halaman web dengan servernya

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>2<!–[if supportFields]><![endif]–> Interaksi halaman-halaman web yang memiliki JavaScript dengan servernya. Halaman 2 merupakan halaman web yang memiliki JavaScript

Akibat dari proses kerja JavaScript di atas, maka beban server akan menjadi lebih ringan, dan halaman web akan jauh menjadi lebih cepat merespon bahkan pada hubungan internet yang paling rendah sekalipun.

Pada prakteknya, JavaScript disertakan dalam halaman web dan sewaktu halaman web tersebut dibuka oleh user, Netscape browser akan meninterpretasi (interpret) baris-baris script yang ada dan mengeksekusi script tersebut sesuai dengan perintah-perintah yang tercantum.

Secara sekilas JavaScript mirip dengan bahasa Java, namun keduanya memiliki perbedaan yang mendasar. Perbandingan keduanya adalah sebagai berikut:

JavaScript

Java

Diinterpretasi oleh browser

Di-compile dan diletakkan pada server, dijalankan pada browser

Dynamic binding

Static binding

Script dibatasi oleh kemampuan browser

Merupakan aplikasi stand-alone

Berjalan bersamaan dengan HTML

Bisa melebihi HTML, misalnya multimedia

Bisa mengakses object-object browser dan memfungsikannya

Tidak bisa mengakses object browser

Aplikasi JavaScript

Beberapa contoh aplikasi yang biasa diimplementasikan dengan JavaScript adalah:

· Calculator; dengan JavaScript dimungkinkan halaman web menampilkan sebuah kalkulator yang jika telah di-download dapat berkerja tanpa harus berinteraksi lagi dengan web server

· Display waktu; dengan JavaScript sebuah halaman web dapat menampilkan jam, tanggal, dan sebagainya

· Feedback status

· User dapat mengetahui status dari suatu proses

· Verifikasi form; sebelum form yang telah diisi oleh user dikirimkan ke server, JavaScript dapat terlebih dahulu memverifikasi kebenarannya, tanpa harus berkomunikasi dengan server.

· Entertainment; halaman web dapat dijadikan sarana permainan interaktif tanpa membebani traffic jaringan dan server

· Mengganti warna tampilan browser; karena JavaScript dapat mengakses seluruh object yang ada pada browser, maka komposisi warna dari suatu halaman web dapat diganti sesuai dengan selera secara real-time.

· Mengganti link;

· Memformat ulang halaman

· Alat analisis

· Dialog boxes untuk peringatan (alert), konfirmasi, dan prompt (menungu masukan dari user)

· Window yang disesuaikan dengan keinginan

· Window Navigasi

Struktur JavaScript dalam halaman web

Struktur bahasa JavaScript yang disertakan dalam suatu halaman web adalah sebagai berikut:

<HTML>

<HEAD>

.. bagian heading (judul, dll) ..

<SCRIPT LANGUAGE=JavaScript”>

<!–

..

deklarasi variabel, object, dan function JavaScript

..

<!– akhir dari script — >

</SCRIPT>

</HEAD>

<BODY>

..

bagian isi halaman web

..

</BODY>

</HTML>

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>3<!–[if supportFields]><![endif]–> Struktur penambahan JavaScript dalam HTML

Pada struktur di atas dapat kita lihat bahwa untuk menambahkan program JavaScript pada sebuah halaman web adalah dengan menambahkan tag <SCRIPT>, kemudian tag comment (<!– ), pendeklarasian variable dan seluruh function yang digunakan, diakhiri dengan tag comment lagi (<!– dan – -> ), dan ditutup dengan tag </SCRIPT>.

Bahasa JavaScript sendiri merupakan bahasa yang bersifat Object-Oriented, dimana kita dapat membuat turunan dari suatu object atau function, atau membuat object atau function baru dari object-obejct yang telah tersedia (built-in object).

function (arg1, arg2, …) {

/* deklarasi local variable */

var local_variable1 = 0;

var local_variable2 = arg2;

/* deklarasi program */

}

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>4<!–[if supportFields]><![endif]–> Struktur function / object JavaScript

JavaScript dan event web browser

JavaScript bekerja sama dengan halaman web dengan berdasarkan “mendengarkan” seluruh event yang terjadi antara user dengan web browser. Event adalah suatu “kejadian” yang diakibatkan oleh interaksi user dengan web browser. Beberapa di antaranya adalah:

· onClick: event yang terjadi pada suatu object jika user men-click object itu dengan tombol mouse

· onLoad: event yang terjadi jika user me-load suatu halaman web pada browser

· onSubmit: event yang terjadi jika user menekan tombol submit yang ada pada form dari suatu halaman web

· onMouseOver: event yang terjadi pada suatu object jika user menggerakkan mousenya melintasi object tersebut

· onBlur: event yang terjadi pada suatu object jika mouse user meniggalkan object tersebut

Berikut ini adalah ringkasan object-object halaman web dengan event-event yang ada:

Event à

Object

¯

onBlur

onClick

onChange

onFocus

onLoad

onMouseOver

onSelect

onSubmit

onUnload

Button

x

Checkbox

x

x

x

Document

x

Form

x

Link

x

Radio

x

Reset

x

Selection

x

x

x

Submit

x

Text

x

x

x

x

Textarea

x

x

x

x

Setiap event yang terjadi dapat dikaitkan pada suatu function JavaScript yang menyebabkan function itu bekerja dan menghasilkan output yang diinginkan. Sebagai contoh, jika kita ingin sebuah tombol submit dari sebuah form pada sebuah halaman web mengeluarkan suatu pesan jika di-click, maka script yang harus kita sertakan pada halaman web tersebut adalah:

1 <HTML>

2 <HEAD>

3 <TITLE>Percobaan JavaScript</TITLE>

4 <SCRIPT LANGUAGE=”JavaScript”>

5 <!–

6 function keluarkanPesan() {
alert(“Selamat, Anda telah berhasil membuat JavaScript”);

7 }

8 <!– akhir script –>

9 </SCRIPT>

10 </HEAD>

11 <BODY>

12 <FORM>

13 <INPUT TYPE=”submit” NAME=”tombol” VALUE=”tekanlah aku”
onClick=”keluarkanPesan()”>

14 </FORM>

15 </BODY>

16 </HTML>

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>5<!–[if supportFields]><![endif]–> Contoh listing program JavaScript sederhana

Pada listing di atas perhatikan baris 6 dan baris 13, dimana jika tombol pada baris 13 ditekan, tombol itu akan menghasilkan event onClick, yang didefinisikan harus mengeksekusi function keluarkanPesan().

Function keluarkanPesan() memerintahkan sistem untuk mengeluarkan window (alert pada baris 6) yang berisi pesan “Selamat, Anda telah berhasil membuat JavaScript”.

Hasil dari program JavaScript sederhana di atas adalah sebagai berikut:

Gambar <!–[if supportFields]> SEQ Gambar_ \* ARABIC <![endif]–>6<!–[if supportFields]><![endif]–> Hasil JavaScript dari script gambar 5

Untuk membuat sebuah script, tidak diperlukan development tools yang khusus, melainkan hanya sebuah editor teks seperti Notepad, Writepad, vi, pico, dan sebagainya. Setelah selesai membuat script, halaman web yang telah disertai script dapat langsung di jalankan pada Netscape Browser versi 2.0 ke atas.

4 responses to this post.

  1. Posted by bimo on 18 Maret 2009 at 12:58

    kaga ngarti gua..gimana sih mksudnya???
    kalo gua mau masukin aplikasi java buat fs apa mesti pake generator dulu???

    Balas

    • Posted by nenk on 19 Maret 2009 at 17:22

      ya iya lah pake generator. java scrif tu kan cuma bahan mentah, belum jadi HTML.
      naaaaaah generator itu bisa buat JS jadi HTMl.
      sekian terima kasih

      Balas

  2. Terimah kasih banyak atas artikelnya, ditunggu artikel berikutnya

    Balas

  3. makasih ya..
    kyknya ni artikel emang dibuat khusus aku..
    hee
    dasar begenk..

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: