Javascript merupakan sebuah bahasa pemograman untuk membuat tampilan website interaktif. Sekali lagi fungsi javascript hanya sebagai fungsi. Sementara untuk menmpilkannya dibutuhkan html. Berikut ini ada 4 cara menyisipkan javascript ke html.
Jika kode tersebut dijalankan pada browser maka akan didapatkan tampilan seperti gambar di bawah ini.
Ketika telah online, website anda. Anda bisa menggunakan hosting penyimpanan file javascript di yourjavascript.com. Upload file javascript anda dan nanti anda akan diberikan kode sisipan melalui email. Pasanglah kode tersebut di halaman html blog atau website anda.
Pemberitahuan akan muncul jika anda klik " Tekan Tombol Dong Bang Tombol Ini".
Nah itulah beberapa cara penyisipan javascript ke html yang saya ketahui. Bagi yang ingin menambahkan, meralat penyampaian saya dipersilahkan di kolom komentar. Maklum ini catatan saya ketika belajar secara otodidak.
Dengan Menggunakan <script>
Cara ini digunakan untuk menyisipkan keseluruhan kode javascript dan html pada satu halaman. Cara ini cocok dilakukan untuk script yang pendek. Jika terlalu panjang tentu akan membuat pusing sendiri.
Adapun format yang digunakan adalah
<script>
Kode javascript
</script>
Fungsi <script> agar browser membaca kode sebagai bukan bagian html. Sementara </script sebagai pembatas akhir kode script. Dalam beberapa literatur juga ada yang menulisakan tag pembuka <script> dengan < script type="text/javascript">. Pada dasarnya kode tersebut sama saja. Sebagai contoh peletakkan kode ini
<!DOCTYPE html>Peletakkan <script> pada bagian <head> HTML berisikan kode javascript : " alert (" Hore aku udah bisa 3 pelajaran sebelumnya"). Kemudian ditutup dengan </script>. alert(pernyataan) adalah fungsi untuk menampilkan sebauh pesan pada browser. Dalam alert dibutuhkan tipe data string [*akan dibahas berikutnya].
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Ini Pelajaran ke Empat</title>
<script>
alert("Hore aku udah bisa 3 pelajaran sebelumnya");
</script>
</head>
<body>
<h1>Pelajaran ke Empat</h1>
<p>Tentang Cara Menyisipkan javascript ke html</p>
<p>Kamu pasti bisa, Cemungudh kk.</p>
</body>
</html>
Jika kode tersebut dijalankan pada browser maka akan didapatkan tampilan seperti gambar di bawah ini.
Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:
Dengan tag <script src="...">
Penggunaan cara ini digunakan ketika kode javascript dirasa terlalu panjang. Sehingga kode tersebut disimpan sebelumnya pada sebuah hosting javascript (untuk website yang telah online sementara untuk masih rancangan saja bisa disimpan di komputer). Cara ini memiliki keunggulan dibandingkan cara pertama.
Pertama, halaman html terlihat lebih rapi, karena tak terlalu banyak kode di dalamnya. Kemudian, ketika ingin mengedit script cukup di edit pada file master javascript yang di hosting saja. Pemakaian kode ini bisa dilakukan pada beberapa website sekaligus. Format penyisipan javascript pada html dengan cara ini adalah.
<script src="alamat script" > </script>Untuk bahan percobaan, kembali ke kode contoh nomor cara pertama. Pindahkan kode yang berwarna merah ke sebuah notepad baru. Simpan dengan nama file "inidariluar.js". Pada file pertama hapus bagian warna merah dan ganti dengan kode <script src="inidariluar.js"/>. Lalu tampilkan lagi javascript yang pertama.
atau bisa dengan
<script src=" alamatscript" />
Ketika telah online, website anda. Anda bisa menggunakan hosting penyimpanan file javascript di yourjavascript.com. Upload file javascript anda dan nanti anda akan diberikan kode sisipan melalui email. Pasanglah kode tersebut di halaman html blog atau website anda.
Dengan Menggunakan Event Handler
Pengunaan cara ini lebih lanjut dibahas pada tutorial selanjutnya. Sebagai gambaran, memasang kode ini fungsi pada javascript akan muncul jika ada aksi seperti kelik tombol pada halaman. Penggunaan ini termasuk lumayan susah. Karena html dan javascript harus berada dalam satu halaman.
Sebagai contoh saja, anda bisa mencoba dengan menggunakan kode dibawah ini.
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Ini masih pelajaran menyisipkan Javascript ke html</title>
</head>
<body>
<h1>Tutorial Menyisipkan Javascript ke html</h1>
<p>Ini Cara yang ke 3</p>
<p>Mau Lihat contohnya ayo </p>
<button onclick="alert('Ini Fungsi yang Saya maksud')">Tekan Dong Bang Tombol Ini
</body>
</html>
 |
| Tampilannya Seperti Ini |
Dengan <ahref:="javascript:"
Penggunaan cara ini hampir sama fungsinya dengan cara sebelumnya. Anda bisa mencoba kode dibawah ini,<!DOCTYPE html>Tampilannya akan terlihat seperti berikut ini.
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Ini masih pelajaran menyisipkan Javascript ke html</title>
</head>
<body>
<h1>Tutorial Menyisipkan Javascript ke html</h1>
<p>Ini Cara yang ke 3</p>
<p>Mau Lihat contohnya ayo </p>
<a href="javascript:alert('Ini Versi Pakai Link!')"> Tekan disini dek...</a>
</body>
</html>
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment