MODUL IX, WEB 2

PEMROGRAMAN ANIMASI DALAM WEB
A.TUJUAN
Mahasiswa mampu membuat animasi sederhana baik untuk teks, gambar, link dan animasi – animasi lain dengan menggunakan javascript.
B.PEMBAHASAN
Pada halaman web, seringkali kita menemukan animasi – animasi untuk memperindah halaman web tersebut. Selain menggunakan flash, kita juga dapat membuat animasi dengan memanfaatkan javascript, karena javascript lebih mudah dipelajari. Ada banyak cara untuk membuat efek animasi dengan JavaScript, misalnya animasi teks sederhana, animasi gambar, animasi – animasi ini adalah contoh yang paling mudah, tetapi kita juga dapat membuat efek animasi yang lebih kompleks.
Pembahasan praktikum :
coba1.html:
a. merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.
b. merupakan kode untuk mengawali javascript.

c. function zoom(id,isOver)digunakan untuk membuat fungsi dengan nama zoom dengan parameter id dan isOver.

d. obj=document.getElementById(id) merupakan deklarasi variabel obj untuk mengakses property dan fungsi sebuah tag dengan menunjuk id.

e. if(isOver) obj.fontsize=’18pt’;akan mengecek kondisi isOver, jika bernilai true maka ukuran hurufnya = 18pt

f. else obj.fontsize=14;perintah ini akan dikerjakan jika kondisinya bernilai false, maka ukuran hurufnya = 14.

g. merupakan bagian badan dalam dokumen HTML.

h. STMIK AKAKOM
digunakan untuk membuat link dengan nama STMIK AKAKOM, dengan nama id link1, dan akan menangani kejadian ketika user menggerakkan krusor kelink STMIK AKAKOM maka link tersebut akan menjadi besar tulisannya, ketika user menggerakkan krusor menjauhi link STMIK AKAKOM maka link / tulisan tersebut akan menjadi kecil seperti semula.
digunakan untuk ganti baris / pindah baris.

i. <a href="" id="link2"onMouseOver="zoom('link2',true)"

onMouseOut=”zoom(‘link2’,false)”>UNIVERSITAS GADJAH MADA digunakan untuk membuat link dengan nama UNIVERSITAS GADJAH MADA, dengan nama id link2, dan akan menangani kejadian ketika user menggerakkan krusor kelink UNIVERSITAS GADJAH MADA maka link tersebut akan menjadi besar tulisannya, ketika user menggerakkan krusor menjauhi link UNIVERSITAS GADJAH MADA maka link / tulisan tersebut akan menjadi kecil seperti semula.

 

coba2.html:

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

b. merupakan kode untuk mengawali javascript.

c. function scroll(id,direct) digunakan untuk membuat fungsi dengan nama scroll dengan parameter id dan direct

d. document.getElementById(id).innerHTML=’ untuk mengakses property dan fungsi sebuah tag dengan menunjuk id dan akan menampilkan teks yang berasal dari server <marquee id="marquee" digunakan untuk membuat teks bergerak / berjalan behaviour=”scroll” digunakan untuk mengatur arah gerakan teks yaitu scroll / teks bergerak berputar

direction=”‘+direct+'” digunakan untuk mengatur arah gerakan teks onmouseover=”this.stop()”digunakan untuk memberhentikan efek ketika disorot(hover)mouse onmouseOut=”this.start()”digunakan untuk melanjutkan efek bila mouse sudah tidak menyorot(hover)text scrollAmount=”4″>digunakan untuk mengatur kecepatan gerakan dalam pixel yaitu 4, semakin besar angka semakin cepat gerakannya.

e. Scrolling Text dengan Marqueedigunakan untuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu teks Scrolling Text dengan Marqueeakan berputar keatas.

f.


digunakan untuk membuat garis batas horizontal

g.

Aku Seorang Kapiten

Mempunyai Pedang Panjang

kalau berjalan prok,,prok,,

Aku Seorang Kapiten

digunakan untuk mengatur alignment satu blok text, yaitu Aku Seorang Kapiten , Mempunyai Pedang Panjang , kalau berjalan prok,,prok,, Aku Seorang Kapiten dengan lebar 100.
digunakan untuk ganti baris / pindah baris

h. Link ke Lokasi lain digunakan untuk membuat link dengan nama Link ke Lokasi lain yang akan menuju ketes.html

 

Coba3.html :

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

b. merupakan kode untuk mengawali javascript.

c. var img=new Array();

  img[0]=”c.jpg”;

  img[1]=”b.jpg”;

  img[2]=”a.jpg”;

merupakan deklarasi variable img untuk membuat array yaitu, img 0 yang berisi c.jpg, 1 yang berisi b.jpg, dan 2 yang berisi a.jpg

d. var banyakGambar=img.length-1;merupakan deklarasi variabel banyak Gambar yang berisi variabel img panjang dikurangi 1.

e. var no=0; merupakan deklarasi variabel no yang berisi 0

f. function scroll()digunakan untuk membuat fungsi dengan nama scroll tanpa parameter apapun

g. if(no<= banyakGambar)

document.getElementById(“gbr”).innerHTML=”“;

  timer=setTimeOut(“scroll()”,3000);

  no++;

digunakan untuk mengecek kondisi variabel no lebih kecil dari variabel banyak Gambar,jika bernilai true maka akan mengerjakan mengakses property dan fungsi sebuah tag dengan menunjuk gbr dan akan menampilkan gambar yang berasal dari server dengan lebar gambar 100%, tinggi gambar 150, dengan waktu berputar 3000, dan hasilnya variabel no akan ditambah dengan 1.

h. else

no=0;

            timer=setTimeOut(“scroll()”,10);jika kondisi bernilai false maka variabel no =0 dan waktu berputar adalah 10

i. digunakan untuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu gambar akan berputar.

j.

digunakan untuk membuat table dengan lebar 100% dan mengatur ketebalan garis pemisah antar tabel mengunakan border=’1’ artinya memberikan ketebalan garis sebanyak 1 pada tabel.

k.

digunakan untuk membuat sebuah baris dalam tabledengan tinggi 150.

l.

digunakan untuk membuat sebuah sel data dengan lebar 25%.

m.

digunakan untuk membuat sebuah sel data dengan lebar 50%.

n.

digunakan untuk mengatur alignment satu blok text dengan nama id yaitu gbr.

o.

Gambar di atas akan berganti tiap 3 detik

digunakan untuk membuat sebuah sel data dan mengatur penggabungan kolom yaitu 3, dengan posisi teks Gambar di atas akan berganti tiap 3 detik berada diposisi tengah.

 

coba4.html :

a. menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.

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

c. merupakan kode untuk mengawali javascript.

d. var berita = new Array();

   berita[0]=”Cuaca Yogyakarta Hari ini Berawan”;

   berita[1]=”Terjadi kecelakaan Pesawat di Papua”;

   berita[2]=”STMIK AKAKOM tetap menjadi yang pertama dan utama”;

merupakan deklarasi variable berita untuk membuat array yaitu, berita 0 yang berisi Cuaca Yogyakarta Hari ini Berawan, 1 yang berisi Terjadi kecelakaan Pesawat di Papua, dan 2 yang berisi STMIK AKAKOM tetap menjadi yang pertama dan utama.

e. pos=0; merupakan deklarasi varaibel pos dengan nilai 0.

f. nKe=0; merupakan deklarasi varaibel nKe dengan nilai 0.

g. maxlength=berita[nKe].length+1; merupakan deklarasi variabel maxlength yaitu variabel berita panjang ditambah 1

h. function tulis() digunakan untuk membuat fungsi dengan nama tulis tanpa parameter apapun

i. if(pos<maxlength)

    txt=berita[nKe].substring(pos,0);

    document.getElementById(“tulisan”).innerHTML=txt+”|”;

    pos++;

    timer=setTimeout(“tulis()”,100);

digunakan untuk mengecek kondisi variabel pos lebih kecil dari variabel maxlength, jika bernilai true maka akan mengerjakan variabel txt dan untuk memperoleh karakter dalam sebuah variable pos yaitu 0, maka akan mengakses property dan fungsi sebuah tag dengan menunjuk tulisan dan akan menampilkan teks dari variabel txt, maka variabel pos akan ditambah 1, dengan waktu 100

j. else

    pos=0;

    nKe++;

    if(nKe>(berita.length-1))

     nKe=0;

    maxlength=berita[nKe].length+1;

    timer=setTimeout(“tulis()”,1000);

jika kondisi diatas bernilai false maka variabel pos bernilai 0, variabel nKe ditambah dengan 1.Jika variabel nKe lebih  kecil dari variabel berita pajang dikurangi 1 maka veriabel nKe bernilai 0, variabel maxlength bernilai variabel berita panjang ditambah 1 dengan waktu 1000.

k. function stoptimer() digunakan untuk membuat fungsi dengan nama stoptimer tanpa parameter apapun

l. digunakan untuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu tulis / menulis dan ketika halaman diload pertama kali maka waktu akan berhenti

m. Berita Terbaru : digunakan untuk membuat tulisan Berita Terbaru : dengan huruf tebal. B artinya bold / tebal.

n. digunakan untuk mendefinisikan inline content dengan nama id tulisan dengan warna merah.

 

Latihan.html

Pembahasan sama dengan script coba2.html, hanya ditambah dengan kode:

a. digunakan untuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu gambar akan berputar keatas.

b.

digunakan untuk mengatur alignment satu blok text dengan nama id yaitu image.

c.

digunakan untuk mengatur paragraph dengan posisi dikanan

d.
digunakan untuk menampilkan gambar dengan nama c.jpg dengan lebar gambar 150 dan tinggi 150

e.
digunakan untuk menampilkan gambar dengan nama b.jpg dengan lebar gambar 150 dan tinggi 150.
digunakan untuk ganti baris / pindah baris.

 

 

C.TUGAS

var img = new Array();

img[0] = “c.jpg”;

img[1] = “b.jpg”;

img[2] = “a.jpg”; 

var banyakGambar = img.length-1;

var no = 0;

function scroll() {

if (no <= banyakGambar) {

document.getElementById(“gbr”).innerHTML=”“;

timer=setTimeout(“scroll()”,86400000);

no++;

}

else {

no = 0;

timer=setTimeout(“scroll()”,10);

} }

Hasil output :
D.KESIMPULAN
Setelah melaksanakan praktikum modul 9 tentang Pemrograman Animasi Dalam Web maka kita mampu membuat animasi sederhana baik untuk teks, gambar, link dan animasi – animasi lain dengan menggunakan javascript.
E.LISTING [terlampir]

 

 
Gambar berubah selang 1 Hari

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