Kita dapat meletakkan kode javascript kita dalam file tersendiri ( terpisah dari file html ), sehingga kita dapat menggunakannya berulang kali pada beberapa file html yang lain. Biasanya file external tersebut berisi kumpulan dari fungsi – fungsi yang akan dibutuhkan. Beberapa hal yang perlu diperhatikan adalah :
1.cara pemanggilan file external javascript adalah <script src=”file_external.js”></script> biasanya ditulis didalam tag <head>
2.file external javascript harus berextensi .js
3.dalam file external javascript tidak diperlukan lagi tag <script>
contoh penulisannya adalah
Kedua file fungsi.js dan contoh3.html adalah hasil pemisahan dari file contoh1.html
File fungsi.js
function tampilkan_nama(id_element){
//deklarasi variabel kumpulan_nama sebagai array
var kumpulan_nama= Array("Ahmad","Afandi","Dedi","Auliya","Habib","Darmaji","Aini","Inayah","ida","Kurniawan","Huda");
var waktu = new Date(); /*membuat objek Date() digunakan untuk mengambil nilai waktu sekarang */
var detik = waktu.getSeconds(); /*method getSeconds() untuk mengambil nilai detik saat ini */
var index = detik % kumpulan_nama.length; /* menghasilkan sisa bagi antara variabel detik dan panjang array kumpulan_nama */
var nama_yang_tampil = kumpulan_nama[index]; /* menentukan nama yang akan
ditampilkan berdasarkan nilai index */
var obj = document.getElementById(id_element); /* mengambil element HTML yang memiliki id = id_element */
obj.innerHTML = nama_yang_tampil; //mengganti nilai dari element HTML
}
File contoh3.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi.js"></script>
</head>
<body>
<h1>Bismillahirrohmaanirrohiim</h1>
<h3>Tulisan dibawah ini ditulis dengan menggunakan javascript</h3>
<q>Ini adalah sedikit contoh dari kemampuan javascript</q><br />
<b><i>Letakkan mouse kita diatas element yang berwarna ungu dan perhatikan apa yang terjadi</i></b>
<div id="nama_saya" style="background-color:#dd23ff; width:100px; height:20px;font-weight:bold;font-style:italic;"
onmouseover="javascript:alert('ini adalah respon dari sebuah event\n'+'nama saya adalah : '+ this.innerHTML)"></div>
<script>
setInterval("tampilkan_nama('nama_saya')",1000);
</script>
</body>
</html>
Lihat Demo
Kalau file externalnya ada di 2 folder sebelumnya gimana yah?
BalasHapus