Implementasi JavaScript Pada Halaman Web - Dalam script atau kode HTML, kode JavaScript di sisipkan di antara tag <script> dan </script>

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 World

JavaScript 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 batchfileArray IndexArrayPHP Global VariabelPengertian Dan Contoh PHP RegexPHP 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 :

JavaScript In Head HTML
JavaScript In Head HTML

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 :

JavaScript In Body HTML
JavaScript In Body HTML

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 :

JavaScript External
JavaScript External

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.


admin

giginau

0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *