welcome to achydexe

widgets

contoh dasar javascript HTML

Memasukkan JavaScript kedalam HTML JavaScript adalah pemrograman sisi klien yang akan dijalankan oleh browser dari pengunjung, dan program JavaScript biasa ditanamkan didalam halaman web untuk menghasilkan halaman yang dinamis. Untuk mempelajari JavaScript sebaiknya anda menguasai dasar-dasar HTML Script sehingga akan memudahkan anda untuk menyisipkan program JavaScript secara baik dan benar.
Ketiklah Contoh berikut dan simpan ke file Hello.html
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Menyembunyikan script terhadap browser non-JavaScript
document.write("Hello world.")
// akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>
Untuk melihat hasilnya, buka file Hello.html dengan internet browser.
Sebenarnya ada dua cara menanamkan JavaScript kddalam dokumen HTML anda, yaitu :
1. Mengapit JavaScript tersebut dengan  tag <SCRIPT>...</SCRIPT> Contoh :
<SCRIPT LANGUAGE="JavaScript">
<!-- Menyembunyikan script terhadap browser non-JavaScript
      Perintah-perintah JavaScript anda diketik disini.
   // --> 
</SCRIPT>
2. Menggunakan tag HTML yang menangani event. Contoh :
<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik disini untuk mengetahui lebih jauh tentang saya'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

 

Dengan menggunakan  Tag <SCRIPT>

Walaupun Netscape Navigator akan mengolah semua teks dalam tag <SCRIPT> sebagai JavaScript, tetapi adalah lebih baik melakukan deklarasi  LANGUAGE yang menentukan jenis bahasa script yang digunakan. karena ada beberapa bahasa script lainnya untuk HTML, mendeklarasikan jenis bahasa script adalah suatu praktek yang baik. Marilah kita memulai dengan suatu program sederhana yang akan mencetak  Hello World.
Contoh :
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Menyembunyikan script terhadap browser non-JavaScript
document.write("Hello world.")
// akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>
Hasil:












Contoh diatas menunjukkan program Javascript diketik diantara  tag <HEAD> dan </HEAD>. Jika contoh JavaScript diatas diketikkan diantara tag <BODY>, juga akan memiliki hasil yang sama. Tetapi karena bagian heading akan dibaca terlebih dahulu dibandingankan dengan bagian <BODY>, menempatkan semua fungsi maupun variabel global pada bagian heading adalah praktek pemrograman yang baik. Dan semua perintah JavaScript yang berkaitan dengan dokumen ditempatkan pada bagian body HTML.
Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk menghindari kesalahan penampilan pada  browser tersebut, anda perlu mengetikkan JavaScript diantara tag komentar HTML sebagai berikut :
<!-- Menyembunyikan script terhadap browser non-JavaScript
Perintah-perintah JavaScript anda ketik disini. 
// akhir dari penyembunyian -->



Catatan
Ingat, selalu mengetik JavaScript diantara baris komentar sehingga browser non Java dapat mengabaikannya, hal ini dilakukan karena siapa saja dapat mengunjungi homepage kita di internet dengan berbagai web browser.

 

Dengan menggunakan Event

Menangani Event akan mengubah halaman yang static menjadi lebih dinamis. Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman. Netscape mengenali sejumlah event, tetapi kita tidak akan mendiskusinya sekarang. 

Contoh:
<FORM>
<INPUT TYPE=BUTTON VALUE="Coba Klik" onClick="alert('Hello world')">
</FORM>
Hasil:

Tidak ada komentar:

Posting Komentar

Langganan: Postingan (Atom)