Cara Implementasi JavaScript Pada Halaman Web ?
Dalam artikel sebelumnya kita sudah membahas apa itu JavaScript. nah untuk artikel kali ini kita akan membahasa tentang bagaimana Cara Implementasi JavaScript Pada Halaman Web. Untuk mempelajari lebih lanjut mari perhatikan poin poin berikut
Isi Artikel
JavaScript Dalam HTML
Dalam script atau kode HTML, kode JavaScript di sisipkan di antara tag <script> dan </script> . berikut contohnya :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Dalam HTML</h2>
<p id="belajar2"></p>
<script>
document.getElementById("belajar2").innerHTML = "Hallo World";
</script>
</body>
</html>
Berikut output :
JavaScript Dalam HTML
Hallo WorldJavaScript terdahulu menggunakan atribut type: <script type = “text/javascript”>. tetapi sekarang atribut type tidak diperlukan lagi. hal ini terjadi karena JavaScript adalah bahasa skrip default dalam HTML.
BACA JUGA : PHP Array Multidimensional, Backup database dengan batchfile, Array Index, Array, PHP Global Variabel, Pengertian Dan Contoh PHP Regex, PHP Form Handling, Cara Implementasi JavaScript
Cara Implementasi JavaScript Pada Halaman Web – Fungsi Dan Event JavaScript
Fungsi JavaScript merupakan sekumpulan kode atau script JavaScript, yang dapat di jalankan saat di panggil. Contohnya, Suatu fungsi dapat dipanggil saat suatu event terjadi, seperti saat pengguna mengklik tombol. Berikut adalah contoh fungsi dalam JavaScript :
function myFunction() {
document.getElementById("belajar2").innerHTML = "Belajar Implementasi JavaScript";
}JavaScript Pada <head>
Skrip dapat ditempatkan di dalam <body> , atau di bagian <head> halaman HTML, atau keduanya. Dalam contoh ini, fungsi JavaScript ditempatkan di bagian <head> pada halaman HTML. berikut adalah contoh JavaScriptdalam <head> :
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("belajar2").innerHTML = "Belajar Implementasi JavaScript";
}
</script>
</head>
<body>
<h2>JavaScript Pada Head HTML</h2>
<p id="belajar2">Belajar JavaScript Pemula </p>
<button type="button" onclick="myFunction()">Tombol</button>
</body>
</html>
Output :
Cara Implementasi JavaScript Pada Halaman Web – JavaScript Pada Body HTML
Pada contoh ini JavaScript akan di tempatkan pada <body> halaman HTML. di mana fungsi akan di panggil ketika event click pada tombol di eksekusi. berikut contohnya :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Pada Body HTML</h2>
<p id="belajar2">Belajar JavaScript</p>
<button type="button" onclick="myFunction()">Tombol</button>
<script>
function myFunction() {
document.getElementById("belajar2").innerHTML = "Belajar JavaScript Di giginau.com";
}
</script>
</body>
</html>
Output :
External JavaScript
JavaScript juga bisa di tempatkan di luar file. caranya adalah dengan membuat external file dengan nama java di ikuti dengan extensi .js (java.js) seperti contoh berikut :
function myFunction() {
document.getElementById("belajar2").innerHTML = "Belajar Implementasi JavaScript";
}Kemudian untuk memanggil file tersebut ikuti script berikut :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript External File</h2>
<p id="demo">Implementasi JavaScript Pada File External</p>
<button type="button" onclick="myFunction()">Tombol</button>
<script src="java.js"></script>
</body>
</html>
Berikut Outputnya :
Untuk menambahkan file external java.js dengan cara :
<script src="java.js"></script>
file external juga dapat di hubungkan file url website seperti contoh :
<script src="https://www.giginau.com/contohsaja/java.js"></script>Keuntungan JavaScript External
Keuntungan External file sebagai berikut : memisahkan HTML dan kode, memungkinkan HTML dan JavaScript lebih mudah dibaca dan mudah untuk pengembangan, dapat mempercepat kecepatan halaman web.
0 Komentar