Cara Menambahkan JavaScript

Tag <script>

Dalam HTML, kode JavaScript disisipkan di antara tag <script> dan </script>.

Contoh

<script>
document.getElementById("demo").innerHTML = "JavaScript Pertamaku";
</script>

Hasil

Function dan Event JavaScript

Sebuah function pada JavaScript adalah blok kode JavaScript yang dapat dieksekusi saat "dipanggil".

Misalnya, suatu fungsi dapat dipanggil ketika suatu peristiwa terjadi, seperti ketika pengguna mengklik tombol.

JavaScript di <head> atau <body>

Kita dapat menempatkan sejumlah skrip dalam dokumen HTML.

Skrip dapat ditempatkan di <body> atau di bagian <head> halaman HTML, atau di keduanya.

JavaScript di <head>

Dalam contoh ini, function JavaScript ditempatkan di bagian <head> halaman HTML.

Fungsi dipanggil ketika tombol diklik.

Contoh

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Ini adalah sebuah paragraf.";
      }
    </script>
  </head>
  <body>
    <h2>JavaScript di Head</h2>

    <p id="demo">Sebuah Paragraf.</p>

    <button type="button" onclick="myFunction()">Coba</button>
  </body>
</html>

Hasil

JavaScript di Head

Sebuah Paragraf.

JavaScript di <body>

Dalam contoh ini, function JavaScript ditempatkan di section <body> halaman HTML.

Fungsi dipanggil ketika tombol diklik.

Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript di Body</h2>

    <p id="demo">Sebuah Paragraf.</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Ini adalah sebuah paragraf.";
      }
    </script>
  </body>
</html>

Hasil

JavaScript di Body

Sebuah Paragraf.

JavaScript Eksternal

Skrip juga dapat ditempatkan di file eksternal.

Contoh

File eksternal: myScript.js

function myFunction() { document.getElementById("demo").innerHTML = "Paragraph
changed."; }

Skrip eksternal praktis digunakan ketika kode yang sama digunakan di banyak halaman web yang berbeda.

File JavaScript memiliki ekstensi file .js.

Untuk menggunakan skrip eksternal, masukkan nama file skrip di atribut src (source) pada tag <script>.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Eksternal</h2>

<p id="demo">Sebuah Paragraf.</p>

<button type="button" onclick="myFunction()">Coba</button>

<script src="myScript.js"></script>

</body>
</html>

Kita dapat menempatkan referensi skrip eksternal di <head> atau <body> sesuai keinginan.

Script akan berperilaku seolah-olah terletak persis di mana tag <script> berada.

Catatan: Skrip eksternal tidak boleh berisi tag <script>.

Keuntungan JavaScript Eksternal

Menempatkan skrip di file eksternal memiliki beberapa keuntungan:

Memisahkan HTML dan kode JavaScript
Membuat HTML dan JavaScript lebih mudah dibaca dan di maintenance
File JavaScript yang di-cache dapat mempercepat loading halaman

Untuk menambahkan beberapa file skrip ke satu halaman, gunakan beberapa tag skrip:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referensi Eksternal

Skrip eksternal dapat digunakan dalam 3 cara berbeda:

Dengan URL lengkap (alamat web lengkap)
Dengan jalur file (seperti /js/)
Tanpa jalur apapun

Contoh dibawah ini menggunakan URL lengkap untuk menautkan ke myScript.js.

Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Eksternal</h2>

    <p id="demo">Sebuah Paragraf.</p>

    <button type="button" onclick="myFunction()">Coba</button>

    <script src="https://www.ianzune.com/js/myScript.js"></script>
  </body>
</html>

Contoh dibawah ini menggunakan jalur file untuk menautkan ke file myScript.js.

Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Eksternal</h2>

    <p id="demo">Sebuah Paragraf.</p>

    <button type="button" onclick="myFunction()">Coba</button>

    <script src="/js/myScript.js"></script>
  </body>
</html>

Contoh dibawah ini tidak menggunakan jalur untuk menautkan ke file myScript.js:

Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Eksternal</h2>

    <p id="demo">Sebuah Paragraf.</p>

    <button type="button" onclick="myFunction()">Coba</button>

    <script src="myScript.js"></script>
  </body>
</html>

Sumber referensi: w3schools

Ian Zune

Cari Blog Ini