MENYISIPKAN JAVASCRIPT DI DALAM HTML
1.1. Internal JavaScript
Menyisipkan JavaScript di Dalam HTML
Sebelum mulai masuk mempelajari JavaScript lebih dalam, ada baiknya kita mempelajari dahulu bagaimana cara menyisipkan JavaScript di dalam HTML. Hal ini ditujukan agar kode JavaScript kita bisa dibaca oleh browser, dan bisa berinteraksi dengan kode HTML kita.
Ada dua cara, yaitu:
- Internal JavaScript, yaitu menyisipkan kode JavaScript langsung di dalam file HTML.
- External JavaScript, yaitu membuat file JavaScript sendiri dan menyambungkannya dengan file HTML.
Yuk kita bahas kedua cara di atas!
Internal JavaScript
Untuk menyisipkan kode JavaScript di dalam file HTML, kita bisa menuliskan kode JavaScript di dalam tag <script>. Tag <script> sendiri bisa ditulis di dalam <head> maupun di dalam bagian akhir dari <body>.
Contoh:
<!-- <script> tag di dalam <head> -->
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
<script>
console.log("Halo Semua!"); // output : Halo Semua!
</script>
</head>
<body>
<h2>JavaScript di dalam head</h2>
</body>
</html><!-- <script> tag di dalam <body> -->
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h2>JavaScript di dalam body</h2>
<script>
console.log("Halo Semua!"); // output : Halo Semua!
</script>
</body>
</html>Cobalah buka file HTML tersebut dalam browser. Lalu bukalah console pada browser kalian; akan muncul tulisan "Halo Semua!"
1.2. Eksternal JavaScript
Menyisipkan JavaScript di Dalam HTML
Cara kedua untuk menyisipkan kode JavaScript di dalam kode HTML adalah dengan menggunakan eksternal JavaScript. Eksternal JavaScript yaitu membuat file JavaScript yang terpisah dengan file HTML.
Cara menyambungkannya sama seperti internal JavaScript, yaitu menggunakan tag <script> di dalam element <body>, hanya saja, kita menambahkan attribute src di dalam <script> untuk menyambungkan dengan file eksternal JavaScript kita.
Contoh:
Kita akan membuat dua buah file yaitu script.js dan index.html.
📝Catatan:
- File HTML memiliki extension
.html - File CSS memiliki extension
.css - File JavaScript memiliki extension
.js
Pada file HTML, kita akan sambungkan file JavaScript menggunakan element <script>, seperti ini:
<!-- File index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
<script src="script.js"></script>
</head>
<body>
<h2>Hello, World!</h2>
</body>
</html>// File script.js
console.log("Halo Semua!"); // output : Halo Semua!Sama seperti internal JavaScript, hasil dari cara ini jika dibuka di console akan menghasikan tulisan "Halo Semua!"
Oh iya, kalau kita lihat ada dua garis miring di depan kata File script.js kira-kira tahu tidak fungsinya apa?
Itu adalah cara untuk membuat comment di file JavaScript . Sama fungsinya dengan <!-- --> di dalam file HTML.
Contoh:
// baris ini tidak akan dibaca sebagai kode dalam file JavaScript
// biasanya comment itu untuk menjelaskan kegunaan sebuah fungsi atau variabel
// atau untuk menulis catatan dalam kodeUntuk comment yang lebih dari 2 baris, kita bisa menulis /* di awal dan */ di akhir comment tersebut.
/*
Kalau commentnya
melebihi 2-3 baris,
kita bisa menggunakan multi-line comment seperti ini.
Jadi kita tidak perlu menulis tanda "//" berulang-ulang
*/
