Header Ads

  • Breaking News

    Mengenal dan Memahami Struktur Javascript

    Cerita Dosen - Javascript adalah bahasa pemrograman yang berjalan di sisi klien (klien web / browser, misal:   Internet   Explorer).   Teknologi   Javascript   dibuat   dengan   tujuan   agar   dapat memperingan kerja server serta menambah sifat dinamis dan interaktivitas dari sebuah situs HTML. Penggunaan Javascript terutama untuk hal-hal yang tidak bersifat penting atau kritis, seperti pemeriksaan format input, animasi teks, efek kursor mouse, dan aplikasi-aplikasi ringan seperti kalkulator maupun games.

    Teknologi Javascript pertama kali diperkenalkan oleh Netscape sejak Netscape 2.0 yang dapat menjalankan Javascript versi 1.0, kemudian Netscape 3.0 menggunakan Javascript versi 1.1 dan Netscape 4 ke atas menggunakan Javascript versi 1.2. Sedangkan untuk Internet Explorer melakukan implementasi script dengan menggunakan standar tersendiri yaitu VBscript serta Jscript yang kompatibel dengan Javascript, sehingga Javascript dapat berjalan pada IE tetapi VBscript tidak dapat berjalan di Netscape.

    Penulisan Javascript pada HTML menggunakan tag <SCRIPT>...</SCRIPT> yang dapat ditempatkan pada area <HEAD> ataupun <BODY>. Penempatan tag <SCRIPT> pada area HEAD> dimaksudkan agar Javascript dijalankan terlebih dahulu sebelum menampilkan halaman HTML, tetapi ada beberapa Javascript yang menggunakan elemen HTML justru harus ditulis pada area <BODY>.

    Penulisan tag <SCRIPT> untuk Javascript adalah sebagai berikut:

    <html>

    <head>

    <title>Belajar Javascript</title> 

    </head>

    <body>

    <script language="javascript">

    <!-- 

    //-->

    Script nya di sini 

    </script>

    </body>

    </html>

    Atribut "LANGUAGE" dipergunakan untuk memberitahukan bahwa bahasa script yang dipergunakan adalah Javascript dan bukanlah VBscript, sedangkan untuk menunjukkan versi  dari  Javascript  dapat  dipergunakan,  mis:  Javascript1.1  atau  Javascript1.2,  kalau Javascript saja diasumsikan menggunakan Javascript versi 1.0. Sedangkan tanda <!-- .... //--

    >  dipergunakan  untuk  mencegah  apabila  ada  browser  yang  tidak  support  tidak  akan menampilkan kode Javascript tersebut sebagai kesalahan / error.

    Perintah Javascript untuk menampilkan suatu teks atau tulisan pada layar browser dapat mempergunakan document.write atau document.writeln, seperti contoh di bawah ini:

    <html>

    <head>

    <title>Belajar Javascript</title> 

    </head>

    <body>

    <script language="javascript">

    <!-- 

    //-->

    document.write("Hallo Javascript!"); 

    </script>

    </body>

    </html>

    Maka akan dihasilkan seperti gambar di bawah ini


    Perintah document.write juga dapat menampilkan seluruh tag-tag HTML termasuk tag untuk efek tulisan, seperti kode program di bawah ini:
    <html>
    <head>
    <title>Belajar Javascript</title>
    </head>
    <body>
    <script language="javascript">
    <!-- 

    //-->

    document.writeln("<b>Hallo Javascript!</b><br>");
    document.writeln("<font color='blue'>Hallo</font>"); 
    </script>
    </body>
    </html>

    Akan tampak seperti gambar di bawah ini


    Bahkan dapat juga untuk membuat tabel seperti script di bawah ini:

     
    <html>
    <head>

    <title>Belajar Javascript</title> 
    </head>
    <body>
    <script language="javascript">
    <!-- 

    //-->
     
    document.writeln("<table border='1'>"); document.writeln("<tr>"); document.writeln("<td>1,1</td><td>1,2</td>"); document.writeln("</tr>"); document.writeln("<tr>"); document.writeln("<td>2,1</td><td>2,2</td>"); document.writeln("</tr>"); document.writeln("</table>"); 
    </script>
    </body>
    </html>

    Dengan tampilan seperti gambar di bawah ini


    Pada dunia pemrograman salah satu konsep terpenting adalah VARIABEL, sama halnya pada bahasa pemrograman yang lain Javascript juga memerlukan penggunaan VARIABEL. Yang dimaksud dengan VARIABEL adalah sebuah penampung data dimana sewaktu-waktu

    isinya dapat diubah, ditambah, dikurangi, dan sebagainya. Bayangkan sebuah VARIABEL seperti halnya sebuah keranjang dimana keranjang tersebut dapat diisi dengan segala hal, kemudian bisa juga keranjang tersebut sudah ada isinya dan kemudian ditambahkan isinya atau dikurangi isinya, bahkan dikosongkan kembali seperti semula.


    Isi VARIABEL pada Javascript dibedakan menjadi 2 yaitu angka atau kalimat. Isi variabel yang berupa angka seringkali disebut NUMERIK dan isi variabel yang berupa kalimat seringkali disebut STRING. Untuk membuat variabel dalam Javascript sangat mudah, yaitu hanya sebutkan saja nama variabel yang akan digunakan kemudian isi dengan nilai yang
    dikehendaki, dengan perintah "var", seperti tampak pada script di bawah ini:
     
    <html>
    <head>

    <title>Belajar Javascript</title> 
    </head>
    <body>
    <script language="javascript">
    <!--
    var Nilai;
    var Nama1, Nama2;
    var Jumlah = 100;
     
    //-->
     
    Nilai = 20;
    Nama1 = "Wawan";
    Nama2 = "Gunawan"; document.writeln(Nilai + "<br>"); document.writeln(Nama1 + "<br>"); document.writeln(Nama2 + "<br>"); document.writeln(Jumlah + "<br>"); 
    </script>
    </body>
    </html>

    Akan tampak seperti gambar di bawah ini


    Perhatikan bahwa pada setiap baris perintah diakhiri dengan tanda ";" sebaiknya tanda ";" diberikan  pada  setiap  akhir  baris  kode  program,  hal  ini  disebabkan  karena  standar Javascript yang berlaku sehingga lebih kompatibel dengan semua jenis browser yang ada.


    Dari contoh di atas dapat dilihat bahwa variabel Nilai dan Jumlah berisi data Numerik sedangkan variabel Nama1 dan Nama2 berisi data String.  Untuk  menampilkan isi dari masing-masing variabel dipergunakan perintah document.writeln dan diisi dengan nama variabel yang hendak ditampilkan.
    Nilai pada variabel dapat dikenai proses perhitungan matematis, seperti penambahan, pengurangan,  pembagian  maupun  perkalian.  Sehingga  dengan  kemampuan  seperti  itu maka dapat dibuat rumus-rumus matematis yang menggunakan variabel tersebut seperti
    tampak pada script di bawah ini:

    <html>
    <head>

    <title>Belajar Javascript</title> 
    </head>
    <body>
    <script language="javascript">
    <!--
    var Panjang, Lebar, Luas;

    Panjang = 20;
    Lebar = 50;

    Luas = Panjang * Lebar;
    document.writeln("Hasilnya " + Panjang +"*"+ Lebar +"="+ Luas);

    //-->
    </script>
    </body>
    </html>

    Dengan tampilan seperti di bawah ini

    Untuk penjelasan lebih lengkap bisa dibaca pada Buku Ajar Pemrogram Web

    Tidak ada komentar

    Post Bottom Ad