MODUL VII, WEB 2

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

Silakan Melakukan Sesuatu Terhadap Tombol

tag

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

©       

digunakan untuk membuat garis batas horizontal

©        onMouseOver=”document.getElementById(‘idKlik’).innerHTML=’Anda Di atas Saya'”
Merupakan perintah untuk menentukan tipe masukan berupa tombol Button dengan value / nilai Saya Adalah Tombol, dan akan menangani kejadian ketika user menggerakkan krusor pada suatu element untuk mengakses property dan fungsi sebuah tag dengan menunjuk idKlik dan akan menampilkan teks yang berasal dari server yaitu Anda Di atas Saya.
©        onMouseOut=”document.getElementById(‘idKlik’).innerHTML=’Anda Meninggalkan Saya'”
Digunakan untuk menangani kejadian ketika user menggerakkan krusor menjauhi element untuk mengakses property dan fungsi sebuah tag dengan menunjuk idKlik dan akan menampilkan teks yang berasal dari server yaitu Anda Meninggalkan Saya
©        onClick=”document.getElementById(‘idKlik’).innerHTML=’Anda Mengklik Saya'”
Digunakan untuk menangani kejadian ketika user mengklik element untuk mengakses property dan fungsi sebuah tag dengan menunjuk idKlik dan akan menampilkan teks yang berasal dari server yaitu Anda Mengklik Saya
innerHTML : digunakan untuk menampilkan teks yang berasal dari server.
Hasil output :
Pembahasan script Coba2.php
©        merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.
©      merupakan kode untuk mengawali javascript.

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

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

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

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

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

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

©        merupakan bagian badan dalam dokumen HTML.

©       

digunakan untuk membuat formulir dengan nama f1 dan menentukan URL yang akan diproses atau dijalankan oleh dan menerima semua masukan dari formulir yaitu tujuan.html. Jika action tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Web itu sendiri dan akan menangani kejadian ketika user mengklik tombol submit yaitu mengembalikan fungsi 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 = ””>

Digunakan untuk membuat judul Nama dan  menentukan tipe masukan yaitu berupa teks, name=’namadigunakan untuk menentukan nama data yaitu nama,dan akan menangani kejadian ketika element mengalami focus  yaitu dengan sebuah fungsi javascript yang digunakan untuk mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitu idName dan akan menampilkan teks yang berasal dari server yaitu Isi Nama dan akan menangani kejadian ketika sebuah elemen kehilangan focus jika bernilai true yaitu jika bernilai kosong maka akan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitu idNama dan akan menampilkan teks yang berasal dari server yaitu Nama Masih Kosong, jika bernilai false maka akan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitu idNama dan akan menampilkan teks yang berasal dari server.

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

©        Alamat : <textarea name="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 membuat judul Alamat dengan tipe textarea [pengisian karakter yang panjang] dengan nama yaitu alamat.

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

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

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

 

Hasil output :

 

Pembahasan script Coba3.php

©        merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.

©      merupakan kode untuk mengawali javascript.

©      var timerID = null; merupakan deklarasi 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 variabel position dengan nilai 0

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

©        if(timerRunning)

 clearTimeout(timerID);

 timerRunning=false;

Digunakan untuk menghentikan tick Clock.

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

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

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

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

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

©        var timeValue=””+((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 isinya variabel hours lebih besar dari 12, variabel hours dikurangi 12, variabel timeValue ditambah dengan variabel minutes lebih kecil dari 10, variabl timeValue ditambah dengan variabel seconds lebih kecil dari 10, variabel timeValue ditambah dengan variabel hours lebih besar dari 12, dengan PM atau AM dan akan mengakses property dan fungsi sebuah tag dengan menunjuk ID-nya yaitu date_div dan akan menampilkan teks yang berasal dari server yaitu isi dari variabel timeValue.

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

timerRunning=true;merupakan deklarasi variabel timerRunning yang bernilai true.

©      function startclock(){digunakan untuk 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 diload pertama kali yang akan menuju fungsi startclock

©     

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

©     

pasangan tag ini digunakan untuk membuat sebuah baris dalam table.

©       

pasangan tag ini digunakan untuk membuat sebuah sel data.

©       

Tanggal :

digunakan untuk 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, menampilkan kode bulan dengan nilai antara 0 s/d 11 ditambah 1, jadi 1 s/d 12. 1 berarti Januari dst dan untuk menampilkan tahun.

©     

digunakan untuk membuat sebuah sel data yang berada pada sebelah kanan

©       

Sekarang Jam :

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

 

Hasil output :

 

Pembahasan script latihan.html

Pembahasan program sama dengan script coba2.html pada praktikum hanya ditambah kode program sebagai berikut :

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

©        Jurusan : <select name="jurusan"

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

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

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

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

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

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

©                –Pilih Jurusan–

        Teknik Informatika

        Sistem Informasi

        Manajemen Informatika

        Teknik Komputer

        Komputerisasi Akuntansi

Digunakan untuk menampilkan pilihan-pilihan yang terdapat dalam daftar pilihan yang ditampilkan oleh tag SELECT yaitu –Pilih Jabatan-, Teknik Informatika dengan nilai TI, Sistem Informasi dengan nilai SI, Manajemen Informatika dengan nilai MI, Teknik Komputer dengan nilai TK dan Komputerisasi Akuntansi dengan nilai KA

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

 

Hasil output :

  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 Masih Salah’);

            return false;

            }

            if (strGaji.length>0){

            alert(‘Gaji Anda Masih Kosong’);

            return false;

            }

      }

     

     

       

       

         

         

        

       

         

       

         

         

        

     
NAMA

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

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

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

       
     

Hasil output :
  1. KESIMPULAN
Setelah melaksanakan praktikum modul 7 tentang PEMANFAATANgetElementById(), setTimeOut() maka mahasiswa mampu memanfaatkan fungsi getElementById serta mampu menggunakan 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