Senin, 21 Februari 2011

Pengenalan JS

JAVA SCRIPT


A.    Mengenal Program JavaScript
Jika anda sudah pernah belajar bahasa pemrograman seperti C, Pascal atau Visual Basic mungkin tidak akan terlalu sulit untuk mempelajari bahasa pemrograman Java Script.
Penulisan beberapa perintah dalam JavaScipt adalah case sensitive, jadi penulisan kode harus diperhatikan. Untuk latihan pertama kali buatlah kode JavaScript sederhana dibawah ini.

Pada navigator versi lama yang tidak mendukung JavaScript, penggunaan kode JavaScript akan merusak dokumen HTML yang sudah dibuat dengan bagusnya. Agar hal itu tidak terjadi, maka perlu kita tambahkan teg komentar <!-- … //--> agar kode tidak akan dieksekusi sebagai program akan tetapi hanya komentar.

js_teks.html
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("My First JavaScript !<br>");
  document.write("Selamat berjuang");
//-->
</script>
</body>
</html>

Hasil jadi :

My first JavaScript !
Selamat berjuang



Diposting oleh di Tidak ada komentar:

interaksi JS dgn komponen textarea.

·         Interaksi JavaScript dengan komponen textarea.

js_textarea.html
<html>
<head>
<title>Textarea</title>
<script language="JavaScript">
function cek()
{
  var str="Menu yang anda pilih : \n";
  for (var i=0;i<form_input.menu.options.length;i++)
  {
    if (document.form_input.menu.options[i].selected)
    {
      str=str+form_input.menu.options[i].value+"\n";
    }
  }
  form_input.pilihan.value=str;
}
</script>
</head>
<body>
<h2>Menu Makanan</h2>
<form name="form_input">
<pre>
Pilih menu yang anda sukai !
<select name="menu" multiple onChange="cek()">
  <option value="Ayam goreng">Ayam goreng</option>
  <option value="Sate Kambing">Sate Kambing</option>
  <option value="Soto Ayam">Soto Ayam</option>
  <option value="dan lain-lain">dll</option>
</select><br>
Keterangan :
<textarea name="pilihan" rows="4" cols="30" readonly="true"></textarea>
</pre>
</form>
</body>
</html>

      Hasil jadi:

Diposting oleh di Tidak ada komentar:

membuat jam dgn JS

        Fungsi script dibawah ini adalah untuk menampilkan waktu yang dapat berubah sesuai dengan waktu system komputer.

js_jam.html
<html>
<head>
<title>Time</title>
<script language="JavaScript">
function update()
{
  var jam = new Date();
  var h =jam.getHours();
  var m =jam.getMinutes();
  var s =jam.getSeconds();
 
  form.jam.value=h+":"+m+":"+s;

  setTimeout('update()',500);
}
</script>
</head>
<body onload="update()">
<center>
Waktu menunjukan pukul :
<form name="form">
<input type="text" name="jam" size="8">
</form>
</center>
</body>
</html>


Diposting oleh di Tidak ada komentar:

Minggu, 13 Februari 2011

Interaksi Js

·         Interaksi JavaScript dengan komponen radio button.

js_radio.html
<html>
<head>
<title>Radio Button</title>
<script language="JavaScript">
function cek()
{
  if(form_input.gender[0].checked)
  {
    form_input.keterangan.value=form_input.gender[0].value;
  }else
  {
    form_input.keterangan.value=form_input.gender[1].value;
  }
}
</script>
</head>
<body>
<h2>Input Data</h2>
<form name="form_input">
<pre>
Gender : <input type="radio" name="gender" value="Laki-Laki"                onClick="cek()">L <input
         type="radio" name="gender" value="Perempuan"               
         onClick="cek()">P <input
         type="teks" name="keterangan" readonly="true">
</pre>
</form>
</body>
</html>

      Hasil jadi:
    
Gender :        L            P  : 

·         Interaksi JavaScript dengan komponen input yang bertype password. Buatlah dua file berikut  yaitu file js_password yang berfungsi untuk melakukan validasi ganti password dan file js_info untuk informasi apabila ganti password berhasil.

js_info.html
<html>
<head><title>Informasi</title>
</head>
<body>
<h2>Password berhasil di rubah ...</h2>
</body>
</html>


Hasil Jadi :
Password berhasil berubah ...
Diposting oleh di Tidak ada komentar:

Js Event dan Fungsi

JAVASCRIPT



A.    Event dan Fungsi
Event adalah aksi dari user yang bisa menghasilkan interaktifitas, seperti ditekannya button oleh mouse sedangkan fungsi adalah suatu blok kode yang diberi nama.

Event
Keterangan
Abort (onAbort)
Terjadi pada saat user mengagalkan proses download image
Blur (onBlur)
Terjadi ketika elemen kehilangan focus, artinya user melakukan klik diluar elemen tersebut
Change (onChange)
Terjadi pada saat usermemodifikasi isi dari data dalam suatu field data
Click (onClick)
Terjadi pada saat user melakukan klik terhadap satu elemen yang berhubungan dengan event
Dblclik (onDblclik)
Terjadi pada saat user melakukan klik dua kali pada satu elemen yang berhubungan dengan event, elemen bisa berupa hyperkink atau elemen dari suatu form
Dragdrop (onDragdrop)
Terjadi pada saat user melakukan drag dan drop elemen di dalam navigator
Error (onError)
muncul ketika error pada saat loading halaman
Focus (onFocus)
Terjadi pada saat user memberikan focus pada satu elemen
Keydown (onKeydown)
Terjadi pada saat user menekan satu tombol pada keyboard
Keypress (onKeypress)
Terjadi pada saat user menekan dan menahan tombol keyboardnya
Keyup (onKeyup)
Terjadi pada saat user melepaskan tekanannya dari tombol keyboard
Load (onLoad)
Terjadi pada saat user memanggil suatu halaman
Mouseover (onMouseover)
Terjadi pada saat user meletakan kursor mouse diatas suatu elemen
Mouseout (onMouseout)
Terjadi pada saat kursor mouse meninggalkan posisi suatu elemen
Reset (onReset)
Terjadi pada saat user menghapus data pada suatu form dengan bantuan tombol reset
Resize (onResize)
Terjadi pada saat user merubah ukuran jendela browser
Select (onSelect)
Terjadi pada saat user melakukan proses select terhadap suatu teks di dalam suatu field berjenis teks atau teks area 
Submit (onSubmit)
Terjadi pada saat user melakukan klik terhadap tombol pengiriman suatu form
Unload (onUnload)
Terjadi pada saat user meninggalkan halaman yang sedang diproses

      Untuk lebih memahami mengenai penggunaan event cobalah script dibawah ini.

js_event.html
<html>
<head><title>Penanganan Kejadian</title>
<script language=”JavaScript”>
function pesan()
{
  alert(“Anda sudah menekan tombol !”);
}
</script>
</head>
<body>
<input type=”button” name=”clik_me” value=”Clik Me” onClick=”pesan()”>
</body>
</html>

      Hasil jadi :

clik me

     Hasil jadi setelah clik kalimat di atas :
Anda sudah clik diatas
 ok
Diposting oleh di Tidak ada komentar:

Rabu, 09 Februari 2011

java script II

A.    Mendeklarasikan Variabel
Variabel adalah suatu nilai yang isinya dapat berubah-rubah. Pendeklarasian variabel dengan menggunakan kata kunci var.

JavaScript dapat mendaklarasikan suatu variabel secara otomatis. Namun, kebiasaan mendeklarasikan suatu variabel akan sangat bermanfaat apabila kita akan melakukan pendefinisian fungsi.

js_variabel.html
<html>
<head>
<title>Pendeklarasian Variabel</title>
</head>
<body>
<script language="JavaScript">
  var string = "JavaScript";
  var bilangan = 101;
  var boolean = true;
  document.write(“<pre>”);
  document.write("Variabel string  berisi   : "+string+"<br>");
  document.write("Variabel bilangan  berisi : "+bilangan+"<br>");
  document.write("Variabel boolean  berisi  : "+boolean);
  document.write(“</pre>”);
</script>
</body>
</html>

Hasil jadi :
 Variable string berisi     : javascript
 Variable bilangan berisi : 101
 Variable boolean berisi  : true
Diposting oleh di Tidak ada komentar:

Java Script III

A.    Objek Date
Objek date membuat kita dapat mengunakan variabel yang berhubungan dengan penanggalan. Buat halaman dari script yang berhubungan dengan objek penanggalan dibawah ini.

js_date.html
<html>
<head>
<title>Penggunaan Objek Date</title>
</head>
<body>
<script language="JavaScript">
   var tanggal=new Date();
   var hari=tanggal.getDay();
   var tgl=tanggal.getDate();
   var bln=tanggal.getMonth();
   var thn=tanggal.getYear();
   var dtk=tanggal.getSeconds();
   var mnt=tanggal.getMinutes();
   var jam=tanggal.getHours();

   document.write("<pre>");
   document.write("Hari ini Hari ke : "+hari+" <br>");
   document.write("Hari ini Tanggal : "+tgl+" <br>");
   document.write("Hari ini Bulan   : "+bln+" <br>");
   document.write("Hari ini Tahun   :"+thn+" <br>");
   document.write("Sekarang Jam     :"+jam+":"+mnt+":"+dtk);
   document.write("</pre>");
</script>
</body>
</html>


Hasil Jadi :

Hari ini hari ke      :  3
Hari ini tanggal     :  11
Hari ini bulan       :  1
Hari ini tahun       :  2011
Sekarang jam      : 11:58
Diposting oleh di Tidak ada komentar:

java script prompt

·         Buatlah kode JavaScript untuk proses menampilkan tampilan dibawah ini, dimana pada saat halaman dibuka dialog masukan untuk nama akan langsung muncul.

JavaScript Prompt                                               ok
masukan nama anda                                           cancel

       
Setelah nama diisi dan di klik OK, kemudian nama tersebut ditampilkan di baris pertama pada halaman berikutnya, Juga tanggal dengan formatnya  pada baris kedua serta kegiatannya pada hari tersebut apakah saatnya Bekerja atau berlibur di baris ke tiga.
Hasil  jadi :
pesan
Hallo                                   : ..........
Hari ini adalah hari             : rabu,2 januari 2011
Waktunya untuk                  : Berkerja

      Simpan dengan nama file js_pesan.html.

Kode Js_pesan.html.

js_pesan.html
<html>
<head>
<title>Tugas Praktikum</title>
</head>
<body>
<h2>Pesan</h2>
<script language="JavaScript">
   var nama = window.prompt("Masukan nama anda","");

   var nama_hari = new Array("Minggu", "Senin", "Selasa", "Rabu",                "Kamis", "Jumat","Sabtu");
   var nama_bulan = new Array("January", "February", "Maret",               "April", "Mei", "Juni", "July", "Agustus", "September",               "Oktober", "November", "Desember");

   var tanggal=new Date();
   var hari=tanggal.getDay();
   var tgl=tanggal.getDate();
   var bln=tanggal.getMonth();
   var thn=tanggal.getYear();

   for(var i=0;i<=6;i++)
   {
      if (i==hari)
      {
         if ((i==0)||(i==6))
         {
           var kegiatan="Berlibur";
         }else
         {
           var kegiatan="Bekerja";
         }
         break;
      }
   }
   document.write("<pre>");
   document.write("Hallo                : "+nama+"<br>");
   document.write("Hari ini adalah hari :        "+nama_hari[hari]+","+tgl+" "+nama_bulan[bln]+"       "+thn+"<br>");
   document.write("Waktunya untuk       : "+kegiatan);
   document.write("</pre>");
</script>
</body>
</html>
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)

Total Tayangan Halaman