RSS

Belajar Javascript: Membuat Ucapan Selamat Datang dan Selamat Tinggal Pada Halaman Web

21 Feb

Beberapa hari yang lalu saat pulang kuliah, salah seorang teman kos saya menanyakan “cara membuat ucapan selamat datang pada saat halaman web dibuka disertai ucapan selamat tinggal pada saat halaman ditutup”. Ia melihat hal tersebut pada halaman friendster temannya.

Spontan aku menawarkan diri untuk membantu… dan tak sampai tiga menit jadilah script sederhana ini.

<html>

<head>

<title>Welcome and Goodbye by Jack</title>

<script language=”javascript”>

function welcome()

{

alert(“Jack says: Welcome to my page!”);

}

function goodbye()

{

alert(“Jack says: Thank you for visiting my page”);

}

</script>

</head>

<body onLoad=welcome() onUnload=goodbye()>

<center><h1>Javascript is easy and Fun!<h1></center>

</body>

</html>

Pada script di atas, kita menggunakan dua buah function pada javascript, yaitu welcome() dan goodbye() yang masing-masing berisi pesan peringatan (alert). Untuk menampilkannya, kita menggunakan dua buah atribut pada tag body, yaitu onLoad dan onUnload. Fungsi dari onLoad adalah untuk menjalankan script pada saat halaman web dimuat (onload), sedangkan onUnload akan dijalankan pada saat halaman web ditutup (onunload).

Hasilnya???

Saat dibuka…

jswelcome

Saat ditutup…

jsgoodbye

Script di atas dapat ditambahkan pada halaman web Anda. Teman Anda yang tidak tahu bisa jadi iri nih, hehe… script di atas juga dapat dikembangkan menjadi lebih baik lagi…. dan ingat: copy paste sertakan sumber.

Sederhana bukan??

Selamat mencoba..

 

Tentang 7ack

Find me on my Facebook or Twitter.
30 Comments

Posted by pada 21 Februari, 2009 in Computers and Technology, Javascript, Script

 

30 Respon untuk Belajar Javascript: Membuat Ucapan Selamat Datang dan Selamat Tinggal Pada Halaman Web

  1. jerry

    22 Februari, 2009 at 6:27 pm

    thanks but softwarenya… God Bless U !

     
  2. dzail

    21 Maret, 2009 at 1:59 am

    bgz bro…….

    v syng skrng fs kya x g bz pake javascript giiiii

     
  3. Lia

    30 Maret, 2009 at 11:29 am

    thanks,
    bagus banget infonya
    web jadi kerren nih
    JBU

     
  4. 7ack

    30 Maret, 2009 at 2:40 pm

    @ dzail:

    tutorial di atas bisa dipakai di semua halaman web,
    bukan hanya di friendster saja,
    aku sebut friendster hanya salah satu contoh..
    script ini bisa anda letakkan pada website, blog pribadi dan web apa saja (standar HTML) selama anda memiliki akses mengubah isi file.

    selamat mencoba

     
  5. roney

    12 Mei, 2009 at 2:58 pm

    mas oke banget tu maka c yau oy

     
  6. roney

    12 Mei, 2009 at 3:28 pm

    oy mas kok g bisa yooo i mana ni

     
    • 7ack

      30 Juli, 2009 at 12:40 am

      coba aktifkan Javascript di browser,
      cara paling baik adalah mengetik ulang coding di atas, perhatikan tanda petik tunggal (‘) dan ganda (“), biasanya berpengaruh.
      telitilah, pasti bisa :)

       
  7. adrian

    29 Mei, 2009 at 9:27 am

    terima kasih banyak ya buat softwarenya,semoga tuhan memberkati pekerjaan mu and sucses ya.

     
  8. imam

    26 Juli, 2009 at 8:09 pm

    Gak bisa Sob!!

     
    • 7ack

      30 Juli, 2009 at 12:41 am

      coba aktifkan Javascript di browser,
      cara paling baik adalah mengetik ulang coding di atas, perhatikan tanda petik tunggal (’) dan ganda (”), biasanya berpengaruh.
      telitilah, pasti bisa :)

       
  9. hello_guk2

    4 Oktober, 2009 at 11:33 am

    disimpannya dimana bos?? tlg detailnya apakah di bawah pada edit HTML untuk blogspot? thanx

     
  10. hello_guk2

    4 Oktober, 2009 at 11:34 am

    apakah di bawah

     
  11. Suranto simanullang

    23 November, 2009 at 9:15 pm

    Oy, kode html tsb dicopy pastekan dimana?
    Untk fb, atau blog2 gt. .Misalnya untk blog aq di http://surantosimanullang.blogspot.com , dgn cra apakah kode itu akan sy pastekan? Thx. .

     
    • 7ack

      27 November, 2009 at 2:30 pm

      klo utk blogspot sy blm coba juga…

       
  12. saiful hadi

    30 Oktober, 2010 at 10:05 am

    kalau pada blog wordpress bagaimana?

     
  13. saiful hadi

    30 Oktober, 2010 at 10:06 am

    kalau pada blog wordpress bagaimana?tlong di balas….please…

     
    • 7ack

      18 Desember, 2010 at 3:52 pm

      klo blog blm pernah dicoba, tp sprtinya tdk bisa, soalx tdk bisa diedit headernya..
      kalau wordpress instalan sendiri bisa

       
  14. cerita lucu

    3 November, 2010 at 10:49 pm

    gan makasih infonya masih newbie nih…saya ingin membuat ucapan selamat datang untuk menyapa pengunjung… nyari info sebanyak banyak soal ngeblog… ijin bookmark gan url nya.. soalnya bermanfaat

     
  15. dhika

    27 November, 2010 at 4:44 pm

    cara yang di atas cara wordpress apa blogger.com kk???

     
    • 7ack

      18 Desember, 2010 at 3:48 pm

      blogger ato web buatan sendiri,
      blm coba di wp

       
  16. javascriptcode

    31 Desember, 2010 at 3:03 pm

    Tutorialnya kreatif, terima kasih

     
  17. Mstarz

    14 Maret, 2011 at 6:51 pm

    TrimZ ya. . . . Atas infonya. . . .

     
  18. efriey

    12 April, 2011 at 2:26 pm

    tutorial yang membantu bgt, tapi gmana kalau di blog gan…

     
  19. Afif

    24 Mei, 2011 at 10:38 pm

    kakak ajarin memberi alunan musik, ketika blog di buka.
    makasi y kakak.

     
  20. dellibelitelli

    30 Mei, 2011 at 10:29 pm

    Wah info kreatif yg musti dicoba neh..
    izin copy script nya y bos. thank for your good info.

     
  21. Hendrik Ronaldo

    13 Juni, 2011 at 9:37 pm

    thanks info.a gan ,,, kunjungi blog saya yah http://hendrikronaldo.wordpress.com

     
  22. anonymouse juniors

    4 Agustus, 2011 at 2:53 am

    mantab gan,,,
    ane ketinggalan belajar ginian nih,,
    ups ga ad kata trlambat wat belajar,,,

     
  23. Faris

    9 November, 2011 at 4:04 pm

    Gan kalo boleh tau script yang di atas copy terus paste di web ku di taruh dmana?
    Mak’lum bru belajar .
    Next ke email z ea

     
  24. Aries Alvano Va

    12 Desember, 2011 at 2:39 pm

    gan ada ga yang ucapan selamat datangnya haya pada home page aja

     
  25. suyana smart

    11 Maret, 2012 at 11:00 pm

    Gimana cara masangnya di wordpress om?

     

Tinggalkan Balasan

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

 
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 29 pengikut lainnya.