MODUL IX, WEB 2

PEMROGRAMAN ANIMASI DALAM WEB
A.TUJUAN
Mahasiswa mampu membuat animasi sederhana baik untukteks, gambar, link dan animasi – animasi lain dengan menggunakan javascript.
B.PEMBAHASAN
Padahalaman web, seringkali kita menemukan animasi – animasi untuk memperindahhalaman web tersebut. Selain menggunakan flash, kita juga dapat membuat animasidengan memanfaatkan javascript, karena javascript lebih mudah dipelajari. Adabanyak cara untuk membuat efek animasi dengan JavaScript, misalnya animasi tekssederhana, animasi gambar, animasi – animasi ini adalah contoh yang palingmudah, tetapi kita juga dapat membuat efek animasi yang lebih kompleks.
Pembahasanpraktikum :
coba1.html:
a. merupakan bagian kepala. Dibagian ini kita bisamenentukan judul dokumen HTML.
b. merupakan kode untuk mengawali javascript.

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

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

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

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

g. merupakan bagian badan dalam dokumen HTML.

h.STMIKAKAKOM
digunakan untuk membuat link dengan nama STMIKAKAKOM, dengan nama id link1, dan akan menangani kejadian ketika usermenggerakkan krusor kelink STMIK AKAKOM maka link tersebut akan menjadi besartulisannya, ketika user menggerakkan krusor menjauhi link STMIK AKAKOM makalink / 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 GADJAHMADA digunakan untuk membuat link dengan namaUNIVERSITAS GADJAH MADA, dengan nama id link2, dan akan menangani kejadianketika user menggerakkan krusor kelink UNIVERSITAS GADJAH MADA maka linktersebut akan menjadi besar tulisannya, ketika user menggerakkan krusormenjauhi link UNIVERSITAS GADJAH MADA maka link / tulisan tersebut akan menjadikecil seperti semula.

 

coba2.html:

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

b. merupakan kode untuk mengawali javascript.

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

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

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

e. Scrolling Text dengan Marqueedigunakan untuk menjalankan suatu perintah ketika suatu halaman html dibukayaitu 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 untukmengatur alignment satu blok text, yaitu Aku SeorangKapiten , Mempunyai Pedang Panjang , kalau berjalan prok,,prok,, Aku SeorangKapiten dengan lebar 100.
digunakan untuk ganti baris / pindahbaris

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

 

Coba3.html :

a. merupakan bagian kepala. Dibagian ini kita bisamenentukan 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”;

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

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

e.var no=0; merupakan deklarasivariabel no yang berisi 0

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

g.if(no<= banyakGambar)

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

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

  no++;

digunakanuntuk mengecek kondisi variabel no lebih kecil dari variabel banyak Gambar,jikabernilai true maka akan mengerjakan mengakses propertydan fungsi sebuah tag dengan menunjuk gbr dan akan menampilkan gambar yangberasal dari server dengan lebar gambar 100%, tinggi gambar 150, dengan waktuberputar 3000, dan hasilnya variabel no akan ditambah dengan 1.

h. else

no=0;

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

i.digunakanuntuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu gambarakan berputar.

j.

digunakan untuk membuat table dengan lebar 100% danmengatur ketebalan garis pemisah antartabel mengunakan border=’1’ artinya memberikan ketebalan garis sebanyak 1 padatabel.

k.

digunakan untukmembuat 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 satublok 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, denganposisi teks Gambar di atas akan berganti tiap 3 detikberada diposisi tengah.

 

coba4.html :

a. menandakan bahwa kode yang terdapat didalamnya adalahkode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yangterdapat dalam dan umumnya terbagi ataskepala dan badan.

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

c. merupakan kodeuntuk mengawali javascript.

d.var berita = new Array();

   berita[0]=”CuacaYogyakarta Hari ini Berawan”;

   berita[1]=”Terjadikecelakaan Pesawat di Papua”;

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

merupakandeklarasi variable berita untuk membuat array yaitu, berita 0 yang berisi CuacaYogyakarta 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 varaibelpos dengan nilai 0.

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

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

h.function tulis() digunakan untukmembuat 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);

digunakanuntuk mengecek kondisi variabel pos lebih kecil dari variabel maxlength, jikabernilai true maka akan mengerjakan variabel txt danuntuk memperoleh karakter dalam sebuah variable pos yaitu 0, maka akan mengakses property dan fungsi sebuah tag denganmenunjuk tulisan dan akan menampilkan teks dari variabel txt, maka variabel posakan 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);

jikakondisi diatas bernilai false maka variabel pos bernilai 0, variabel nKeditambah dengan 1.Jika variabel nKe lebih kecil dari variabel berita pajang dikurangi 1 maka veriabel nKe bernilai0, variabel maxlength bernilai variabel berita panjang ditambah 1 dengan waktu1000.

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

l. digunakanuntuk 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 artinyabold / tebal.

n. digunakan untuk mendefinisikan inlinecontent dengan nama id tulisan dengan warna merah.

 

Latihan.html

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

a. digunakanuntuk menjalankan suatu perintah ketika suatu halaman html dibuka yaitu gambarakan 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 gambardengan nama c.jpg dengan lebar gambar 150 dan tinggi 150

e.
digunakan untukmenampilkan gambar dengan nama b.jpg dengan lebar gambar 150 dan tinggi150.
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);

} }

Hasiloutput :
D.KESIMPULAN
Setelah melaksanakan praktikum modul 9 tentangPemrograman Animasi Dalam Web maka kita mampu membuat animasi sederhana baikuntuk teks, gambar, link dan animasi – animasi lain dengan menggunakanjavascript.
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