Bagaimana kode JavaScript di sisipkan atau ditempatkan pada dokumen HTML?

Dimana kita dapat menempatkan code javascript pada HTML, apakah diantara elemen html atau diluar elemen html? Untuk menemukan jawabannya simak bab berikut.

Table of Contents Show

Tag <script>
Function dan Event JavaScript
JavaScript di <head> atau <body>
JavaScript di <head>
JavaScript di <body>
JavaScript Eksternal
Manfaat JavaScript Eksternal
Referensi Eksternal
Bagaimana kode JavaScript disisipkan atau ditempatkan pada dokumen HTML?
Dimana menuliskan coding JavaScript?
Apa itu kode JavaScript?
Bagaimana cara membuat sebuah fungsi di JavaScript?

Section Artikel

Tag <script>

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

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript pada Body</h2>

<p id="demo"></p>

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

</body>
</html>

Contoh JavaScript lama mungkin menggunakan atribut type: <script type=”text/javascript”>.

Atribut type tidak diperlukan lagi. JavaScript adalah bahasa script default dalam HTML.

Function dan Event JavaScript

Function JavaScript adalah sekumpulan kode JavaScript, yang dapat dijalankan saat “dipanggil”.

Misalnya, suatu function dapat dipanggil saat suatu event terjadi, seperti saat pengguna mengklik tombol.

JavaScript di <head> atau <body>

Anda dapat menempatkan sejumlah script JavaScript dalam dokumen HTML.

JavaScript dapat ditempatkan di tag <head> atau <body> pada bagian halaman HTML, atau keduanya.

JavaScript di <head>

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

Function tersebut dipanggil (invoked) ketika sebuah tombol diklik.

Contoh :

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Merubah Paragraf.";
}
</script>
</head>
<body>

<h2>JavaScript di Head</h2>

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

<button type="button" onclick="myFunction()">Klik disini</button>

</body>
</html>

JavaScript di <body>

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

Function tersebut dipanggil (invoked) ketika sebuah tombol diklik.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript pada bagian Body</h2>

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

<button type="button" onclick="myFunction()">Klik disini</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph diubah.";
}
</script>

</body>
</html>

Menempatkan script di bagian bawah elemen <body> meningkatkan kecepatan tampilan, karena interpretasi script memperlambat tampilan.

JavaScript Eksternal

JavaScript juga dapat ditempatkan di file eksternal.

External file: myScript.js

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

Script eksternal akan praktis jika kode yang sama digunakan di banyak halaman web yang berbeda.

File JavaScript memiliki ekstensi file .js.

Untuk menggunakan script eksternal, letakkan nama file script di atribut src (sumber) dari tag <script>.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

<button type="button" onclick="myFunction()">Klik disini</button>

<p>(myFunction disimpan dalam file eksternal yang disebut "myScript.js")</p>

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

</body>
</html>

Penempatan script eksternal dapat diletakan pada <head> atau <body> sesuai dengan yang diinginkan.

Script eksternal tidak boleh berisi tag <script>

Manfaat JavaScript Eksternal

Menempatkan script di file eksternal memiliki beberapa keuntungan:

Javascript eksternal memisahkan HTML dan kode
JavaScript eksternal membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
File JavaScript yang disimpan dalam cache dapat mempercepat pemuatan halaman

Untuk menambahkan lebih dari satu file script ke sebuah halaman – gunakan beberapa tag script seperti berikut.

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

Referensi Eksternal

Script eksternal dapat direferensikan dengan URL lengkap atau dengan relative path pada halaman web saat ini.

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai penempatan JavaScript. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.

Seperti CSS, kode JavaScript bisa diletakkan secara internal di dalam dokumen HTML, maupun diletakkan secara eksternal dalam sebuah file berekstensi .js. Seperti halnya CSS, metode penempatan JavaScript secara eksternal lebih direkomendasikan. Selain memudahkan pengelolaan kodenya karena terpisah dari dokumen HTML, file JavaScript akan di-cache browser sehingga mempercepat waktu muat halaman web di sesi berikutnya.

Jika diletakkan secara internal, kode JavaScript bisa disisipkan di bagian elemen head maupun elemen body. Berbeda dengan CSS yang lebih disarankan untuk didefinisikan di bagian elemen head, kode JavaScript lebih disarankan untuk diletakkan di elemen body pada bagian akhir. Pertimbangannya karena halaman web menjadi lebih cepat dimuat, tidak terbebani waktu untuk memuat kode JavaScript terlebih dahulu. Hal ini juga berlaku pada metode perujukan file eksternal JavaScript.

Penulisan kode JavaScript secara internal di dokumen HTML diletakkan antara tag pembuka <script> dan tag penutup </script>.

Untuk merujuk file JavaScript eksternal di dokumen HTML, sisipkan URL file-nya menggunakan atribut src di tag pembuka <script>:

Sebagai catatan, pada teknik lama, penulisan tag pembuka <script> disertai atribut type, yaitu:

Namun cara ini sudah tidak diperlukan. Melalui HTML5, kalian cukup menggunakan tag pembuka <script> tanpa disertai atribut type, seperti yang dicontohkan di awal.

Nah sobat Webhozz itulah pembahasan singkat mengenai penempatan javascript. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari javascript, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.

Bagaimana kode JavaScript disisipkan atau ditempatkan pada dokumen HTML?

Kode-kode Javascript disimpan pada sebuah file dengan ekstension '.js'. Kemudian file eksternal ini dapat dipanggil dari dokumen HTML dengan menggunakan atribut 'src' dari tag <script>. File eksternal ini dapat digunakan oleh banyak dokumen HTML.

Dimana menuliskan coding JavaScript?

Console Javascript dapat kita buka melalui Inspect Element->Console. Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan.

Apa itu kode JavaScript?

Javascript adalah bahasa pemrograman yang awalnya dirancang untuk berjalan di atas browser. Namun, seiring perkembangan zaman, javascript tidak hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi Server, Game, IoT, Desktop, dsb.