Cara Mereferensikan JavaScript pada Struktur HTML
Sebelum membaca dan mempelajari artikel tutorial ini, saya berharap anda telah membaca tutorial-tutorial sebelumnya. Untuk itu bagi anda yang baru pertama datang dan menjumpai halaman ini, silahkan baca terlebih dahulu tutorial sebelumnya. Yaitu:Setiap contoh yang saya berikan silahkan simpan dalam format atau ekstensi .html kemudian jalankan. Atau silahkan gunakan tool editor HTML_CSS.
Hal yang perlu diketahui adalah bahwa terdapat empat(4) cara untuk mereferensikan javascript, yakni:
1. Menggunakan tag <script>:
Pada metode ini Javascript langsung disertakan atau di tuliskan di dalam struktur file HTML itu sendiri, dengan menggunakan tag script pembuka dan penutup.
<script>
Javascript disini.....
</script>
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Javascript Dasar untuk Pemula</title>
<script type="text/javascript">
function new_line()
{
var a=document.getElementById("div_go");
a.innerHTML+="<p>Selamat...! Anda mulai dapat memahami javascript, lanjutkan belajar anda!</p>";
}
</script>
</head>
<body>
<h1>Materi Tutorial Javascript</h1>
<p> Berikut ini merupakan sedikit contoh fungsi atau program javascript.
Java Script yang di tulis diatas head dan script button dibawah ini<br/> akan
membentuk sebaris kalimat saat button/tombol diklik.<br/>
Sekarang silahkan coba klik tombol ini :<br/></p>
<button id="creat" onclick="new_line()"> Klik Saya</button>
<div id="div_go"></div>
</body>
</html>
<html>
<head>
<title>Tutorial Javascript Dasar untuk Pemula</title>
<script type="text/javascript">
function new_line()
{
var a=document.getElementById("div_go");
a.innerHTML+="<p>Selamat...! Anda mulai dapat memahami javascript, lanjutkan belajar anda!</p>";
}
</script>
</head>
<body>
<h1>Materi Tutorial Javascript</h1>
<p> Berikut ini merupakan sedikit contoh fungsi atau program javascript.
Java Script yang di tulis diatas head dan script button dibawah ini<br/> akan
membentuk sebaris kalimat saat button/tombol diklik.<br/>
Sekarang silahkan coba klik tombol ini :<br/></p>
<button id="creat" onclick="new_line()"> Klik Saya</button>
<div id="div_go"></div>
</body>
</html>
2. Menggunakan tag <script scr=””>:
Sedangkan pada metode ini file Javascript di tulis secara terpisah dengan file HTML, kemudian pada file HTML digunakan fungsi untuk memanggil file Javascript tersebut. Fungsi pemanggilan atau URL pemanggilan Javascript letaknya tidakk selalu sama, ada yang diletakkan dii tag head, ada yang di letakkan sebelum tag </body>, dan ada pula yang diletakkan pada tag HTML terkait.
Contoh:
<script src="directory/folder/nama-script.js"></script>
3. Menggunakan Event Handler (Inline JavaScript):
Pada metode ini Javascript dituiskan langsung pada baris yang dikenai fungsi script tersebut, misalnya sebagai notifikasi form.
Contoh: Silahkan kunjungi halaman kontak, jangan isi bidan apapun lalu klik tombol "Kirim Pesan".
Atau dengan contoh simple ini, silahkan salin dan tempel pada editor multibisnisindo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Javascript Dasar untuk Pemula</title>
</head>
<body>
<h1>Materi Tutorial Javascript</h1>
<button id="creat" onclick="javascript:alert('Selamat Belajar!!!')"> Klik Saya</button>
</body>
</html>
4. Menggunakan URL (href:=”javascript:”):
Penggunaan metode ini sudah jarang di jumpai kerena telah dianggap usang dan disarankan untuk tidakk digunakan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Javascript Dasar untuk Pemula</title>
</head>
<body>
<h1>Materi Tutorial Javascript</h1>
<a href="javascript:alert('Selamat Belajar Kawan...!!!')">Klik Saya</a>
</body>
</html>
Terimakasih telah berkunjung dan membaca tutorial ini,mudah-mudahan apa yang saya berikan melalui tutorial ini berguna bagi anda. Silahkan share artikel ini karena mungkin berguna bagi teman anda,dan memberikan kabar baik serta ilmu berguna bagi orang lain merupakan pahala buat anda.
