MODUL VII, WEB 2

PEMANFAATAN getElementById(), setTimeOut()
  1. TUJUAN
Mahasiswa mampu memanfaatkan fungsi getElementByIdserta mampu menggunakan fungsi setTimeOut pada javascript.
  1. PEMBAHASAN
getElementById() adalahsebuah fungsi javascript yang digunakan untuk mengakses property dan fungsisebuah tag dengan hanya menunjuk ID-nya saja.
setTimeOut() merupakan fungsi javascript yangberguna untuk memanggil suatu fungsi dengan delay waktu tertentu. Satuan yangdigunakan untuk waktu delay ini adalah millisecond (1 detik = 1000ms).
Pembahasan Script Coba1.php
©        merupakan bagian badan dalam dokumen HTML.
©       

Silakan MelakukanSesuatu Terhadap Tombol

tag

digunakan untuk membuat judul dalam badan dokumen dengannama Silahkan Melakukan Sesuatu Terhadap Tombol, dengan nama id yaitu idKlik.

©       

digunakanuntuk membuat garis batas horizontal

©        onMouseOver=”document.getElementById(‘idKlik’).innerHTML=’AndaDi atas Saya'”
Merupakan perintah untuk menentukan tipe masukanberupa tombol Button dengan value / nilai Saya Adalah Tombol, dan akanmenangani kejadian ketika user menggerakkan krusor pada suatu element untukmengakses property dan fungsi sebuah tag dengan menunjuk idKlik dan akanmenampilkan teks yang berasal dari server yaitu Anda Di atas Saya.
©       onMouseOut=”document.getElementById(‘idKlik’).innerHTML=’AndaMeninggalkan Saya'”
Digunakan untuk menangani kejadian ketika usermenggerakkan krusor menjauhi element untuk mengakses property dan fungsi sebuahtag dengan menunjuk idKlik dan akan menampilkan teks yang berasal dari serveryaitu Anda Meninggalkan Saya
©       onClick=”document.getElementById(‘idKlik’).innerHTML=’AndaMengklik Saya'”
Digunakan untuk menangani kejadian ketika usermengklik element untuk mengakses property dan fungsi sebuah tag dengan menunjukidKlik dan akan menampilkan teks yang berasal dari server yaitu Anda MengklikSaya
innerHTML : digunakanuntuk menampilkan teks yang berasal dari server.
Hasiloutput :
Pembahasanscript Coba2.php
©        merupakan bagian kepala. Dibagian ini kita bisamenentukan judul dokumen HTML.
©      merupakan kode untuk mengawalijavascript.

©     function cekSubmit(){digunakanuntuk membuat fungsi dengan nama cekSubmit tanpa parameter apapun.

©     var strNama =document.getElementById(‘idNama’).innerHTML; merupakan deklarasi variabel strNama yang berisisebuah fungsi javascript yang digunakan untuk mengakses property dan fungsisebuah tag dengan menunjuk ID-nya yaitu idNama dan akan menampilkan teks yangberasal dari server.

©     var strAlamat = document.getElementById(‘idAlamat’).innerHTML; merupakan deklarasi variabel strAlamat yang berisisebuah fungsi javascript yang digunakan untuk mengakses property dan fungsisebuah tag dengan menunjuk ID-nya yaitu idAlamat dan akan menampilkan teks yangberasal dari server.

©     if (strNama.length > 0 || strAlamat.length> 0){ merupakanperulangan untuk mengecek kondisi panjang variabel strNama lebih besar dari 0atau panjang variabel strAlamat lebih besar dari 0

©     alert(‘Masih Ada Kesalahan Pengisian’);digunakan untuk menampilkan masih Ada KesalahanPengisian

©     return false;digunakan untuk mengembalikan nilai dengan nilai false.

©        merupakan bagian badan dalam dokumen HTML.

©       

digunakan untukmembuat formulir dengannama f1 dan menentukan URL yang akan diproses atau dijalankanoleh dan menerima semua masukan dari formulir yaitu tujuan.html. Jika actiontidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Webitu sendiri danakan menangani kejadian ketika user mengklik tombol submit yaitu mengembalikanfungsi cekSubmit.

©       Nama : <input type="text"name="nama" onFocus+”document.getElementById(‘idName’).innerHTML= ‘Isi Nama'”

            onBlur=”if(this.value == ”)

document.getElementById(‘idNama’).innerHTML= ‘Nama Masih Kosong’;

    else

document.getElementById(‘idNama’).innerHTML= ””>

Digunakanuntuk membuat judul Nama dan  menentukan tipemasukan yaitu berupa teks, name=’namadigunakan untuk menentukan nama data yaitu nama,danakan menangani kejadian ketika element mengalami focus  yaitu dengan sebuah fungsi javascript yang digunakan untuk mengakses property danfungsi sebuah tag dengan menunjuk ID-nya yaitu idName dan akan menampilkan teksyang berasal dari server yaitu Isi Nama dan akan menangani kejadian ketikasebuah elemen kehilangan focus jika bernilai true yaitu jika bernilai kosongmaka akan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaituidNama dan akan menampilkan teks yang berasal dari server yaitu Nama MasihKosong, jika bernilai false maka akan mengakses property dan fungsi sebuah tagdengan menunjuk ID-nya yaitu idNama dan akan menampilkan teks yang berasal dariserver.

©       
spandigunakan untuk mendefinisikan inline content, dengan nama id yaitu idNama,dengan warna merah. .
digunakan untuk ganti baris / pindah baris.

©       Alamat : <textareaname="alamat"

    onFocus=”document.getElementByI(‘idAlamat’).innerHTML= ‘Isi Alamat'”

     onBlur=”if(this.value ==”||this.value.length < 10)

document.getElementById(‘idAlamat’).innerHTML=’Isi Alamat dengan Benar’;

    else

document.getElementById(‘idAlamat’).innerHTML= ””>

©     digunakan untuk membuatjudul Alamat dengan tipe textarea [pengisian karakteryang panjang] dengan nama yaitu alamat.

,danakan menangani kejadian ketika element mengalami focus  yaitu dengan sebuah fungsi javascript yang digunakan untuk mengakses property danfungsi sebuah tag dengan menunjuk ID-nya yaitu idAlamat dan akan menampilkanteks yang berasal dari server yaitu Isi Alamat dan akan menangani kejadianketika sebuah elemen kehilangan focus jika bernilai true yaitu jika bernilaikosong atau panjang kurang dari 10 maka akan mengakses property dan fungsisebuah tag dengan menunjuk ID-nya yaitu idAlamat dan akan menampilkan teks yangberasal dari server yaitu Isi Alamat dengan Benar, jika bernilai false makaakan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitu idAlamatdan akan menampilkan teks yang berasal dari server.

©       
spandigunakan untuk mendefinisikan inline content, dengan nama id yaitu idAlamat,dengan warna merah.
digunakan untuk ganti baris / pindah baris.

©      merupakan perintah untuk menentukan tipe masukanberupa tombol submit dengan nilai simpan.

 

Hasiloutput :

 

Pembahasan script Coba3.php

©        merupakan bagian kepala. Dibagian ini kita bisamenentukan judul dokumen HTML.

©      merupakan kode untuk mengawali javascript.

©     var timerID = null; merupakandeklarasi variable timerID yang bernilai null

©     var timerRunning = false;merupakan deklarasi variable timerRunning yang bernilai  false

©       var id,pause=0,position=0;merupakan deklarasi variabel id, pause [berhenti] dengan nilai 0, dan variabelposition dengan nilai 0

©       function stopclock(){digunakanuntuk membuat fungsi dengan nama stopclock tanpa parameter apapun

©       if(timerRunning)

 clearTimeout(timerID);

 timerRunning=false;

Digunakanuntuk menghentikan tick Clock.

©       function showtime(){digunakanuntuk membuat fungsi dengan nama showtime tanpa parameter apapun

©     var now = new Date();merupakan deklarasi variabel now untuk konversiTanggal.

©     var hours = now.getHours();merupakan deklarasi variabel hours yang isinya mengambiljam sekarang

©       var minutes = now.getMinutes();merupakan deklarasi variabel minutes yang isinya mengambilmenit sekarang

©       var seconds = now.getSeconds();merupakan deklarasi variabel seconds yang isinya mengambildetik sekarang

©       vartimeValue=””+((hours>12)?hours-12:hours)

timeValue+= ((minutes<10)?":0":":")+minutes

timeValue+= ((seconds<10)?":0":":")+seconds

timeValue+= (hours>=12)?”PM”:”AM”

document.getElementById(“date_div”).innerHTML=timeValue;

merupakan deklarasi variabel timeValue yang isinyavariabel hours lebih besar dari 12, variabel hours dikurangi 12, variabeltimeValue ditambah dengan variabel minutes lebih kecil dari 10, variabltimeValue ditambah dengan variabel seconds lebih kecil dari 10, variabeltimeValue ditambah dengan variabel hours lebih besar dari 12, dengan PM atau AMdan akan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitudate_div dan akan menampilkan teks yang berasal dari server yaitu isi darivariabel timeValue.

timerID = setTimeout(“showtime()”,1000);merupakan deklarasi variabel timerID untuk memanggilsuatu fungsi dengan delay waktu tertentu dengan fungsi showtime yaitu 1000

timerRunning=true;merupakan deklarasivariabel timerRunning yang bernilai true.

©     function startclock(){digunakanuntuk membuat fungsi dengan nama startclock tanpa parameter apapun

©       stopclock();merupakan deklarasi fungsi stopclock

©       showtime();merupakan deklarasi fungsi showtime

©       merupakan bagian badan dalam dokumen HTML dan akan menangani kejadian ketika halaman diloadpertama kali yang akan menuju fungsi startclock

©     

digunakan untuk membuat tabel dan mengatur ketebalan garis pemisah antartabel. Dalam program ini kita mengunakan border=’1’ artinya memberikanketebalan garis sebanyak 1 pada tabel. Dan lebar tabel 100%

©     

pasangan tag ini digunakan untukmembuat sebuah baris dalam table.

©       

pasangantag ini digunakan untukmembuat sebuah sel data.

©       

Tanggal :

digunakanuntuk membuat judul dalam badan dokumen dengan nama Tanggal :

©     var d= new Date();merupakan deklarasi variabel d untuk konversi Tanggal.

©       document.write(d.getDate()+”/”+d.getMonth()+1+”/”+d.getFullYear()); merupakan perintah untuk menampilkan tanggal yaitu antara 1 s/d 31, menampilkankode bulan dengan nilai antara 0 s/d 11 ditambah 1, jadi 1 s/d 12. 1 berartiJanuari dst dan untuk menampilkan tahun.

©     

digunakan untuk membuat sebuah sel datayang berada pada sebelah kanan

©       

Sekarang Jam :

digunakanuntuk membuat judul dalam badan dokumen dengan nama Sekarang Jam : tag div digunakanuntuk block-level content, dengan nama id yaitu date_div.

 

Hasiloutput :

 

Pembahasan script latihan.html

Pembahasan programsama denganscript coba2.html pada praktikum hanya ditambah kode program sebagai berikut :

©     var strJurusan =document.getElementById(‘idJurusan’).innerHTML; ; Merupakan deklarasi variabel strJurusan yang berisisebuah fungsi javascript yang digunakan untuk mengakses property dan fungsisebuah tag dengan menunjuk ID-nya yaitu idJurusan dan akan menampilkan teksyang berasal dari server.

©       Jurusan : <selectname="jurusan"

onFocus=”document.getElementById(‘idJurusan’).innerHTML=’Pilih Jurusan'”;

onBlur=”if(this.value==”)                             document.getElementById(‘idJurusan’).innerHTML=’Jurusan Belumdipilih’;

else                              document.getElementById(‘idJurusan’).innerHTML=””>

©      digunakan untuk membuat judul Jurusan dan  membuatkotak kombo (drop – down) atau daftar pilihan dengan nama jurusan.

,danakan menangani kejadian ketika element mengalami focus  yaitu dengan sebuah fungsi javascript yang digunakan untuk mengakses property danfungsi sebuah tag dengan menunjuk ID-nya yaitu idJurusan dan akan menampilkanteks yang berasal dari server yaitu Pilih Jurusan dan akan menangani kejadianketika sebuah elemen kehilangan focus jika bernilai true yaitu jika bernilaikosong maka akan mengakses property dan fungsi sebuah tag dengan menunjukID-nya yaitu idJurusan dan akan menampilkan teks yang berasal dari server yaituJurusan Belum dipilih,

jika bernilai false maka akan mengakses property danfungsi sebuah tag dengan menunjuk ID-nya yaitu idJurusan dan akan menampilkanteks yang berasal dari server.

©               –Pilih Jurusan–

        TeknikInformatika

        SistemInformasi

        ManajemenInformatika

        TeknikKomputer

        KomputerisasiAkuntansi

Digunakan untuk menampilkanpilihan-pilihan yang terdapat dalam daftar pilihan yang ditampilkan oleh tagSELECT yaitu –Pilih Jabatan-, Teknik Informatika dengan nilai TI, SistemInformasi dengan nilai SI, Manajemen Informatika dengan nilai MI, TeknikKomputer dengan nilai TK dan Komputerisasi Akuntansi dengan nilai KA

©       
spandigunakan untuk mendefinisikan inline content, dengan nama id yaitu idJurusan,dengan warna merah.
digunakan untuk ganti baris / pindah baris

 

Hasiloutput :

  1. TUGAS

     

      function cekSubmit(){

      var strNama =document.getElementById(‘idNama’).innerHTML;

      var strEmail =document.getElementById(‘idEmail’).innerHTML;

      var strGaji =document.getElementById(‘idGaji’).innerHTML;

      var vEmail=strEmail.search(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/);

      var isiEmail =strEmail.match(vEmail.value);

 

            if (strNama.length>0){

            alert(‘Nama Anda Masih Kosong’);

            return false;

            }

            if (strEmail.length>0){

            alert(‘Email Masih Kosong’);

            return false;

            }

            if(isiEmail== null){a

            alert(‘Format Pengisian Email MasihSalah’);

            return false;

            }

            if (strGaji.length>0){

            alert(‘Gaji Anda Masih Kosong’);

            return false;

            }

      }

     

     

       

       

         

         

        

       

         

       

         

         

        

     
NAMA

             onfocus=”document.getElementById(‘idNama’).innerHTML=’IsiNama'”
             onBlur=”if(this.value==”)document.getElementById(‘idNama’).innerHTML=’Nama Masih Kosong’;
             else
             document.getElementById(‘idNama’).innerHTML=””>
            
             
EMAIL

             onfocus=”document.getElementById(‘idEmail’).innerHTML=’Isi EmailAnda'”
             onBlur=”if(this.value==”)document.getElementById(‘idEmail’).innerHTML=’Email Masih Kosong’;
             else
             document.getElementById(‘idEmail’).innerHTML=””>
         
             
GAJI

             onfocus=”document.getElementById(‘idGaji’).innerHTML=’Isikan GajiAnda'”
             onBlur=”if(this.value==”)document.getElementById(‘idGaji’).innerHTML=’Gaji Masih Kosong’;
             else
             document.getElementById(‘idGaji’).innerHTML=””>
           
             

       
     

Hasiloutput :
  1. KESIMPULAN
Setelah melaksanakan praktikum modul 7 tentangPEMANFAATANgetElementById(), setTimeOut() maka mahasiswa mampu memanfaatkan fungsi getElementById serta mampumenggunakan fungsi setTimeOut pada javascript.
  1. LISTING [terlampir]
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s