Back to Class 9 page »
Including JavaScript in your page is a fairly simple process.
First, What Is JavaScript?
From the W3C Schools Site:
- JavaScript was designed to add interactivity to HTML pages
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language [means that scripts execute without preliminary compilation]
- Everyone can use JavaScript without purchasing a license
Including the JavaScript
You can include JavaScript in your HTML in two ways:
- Writing the code in your HTML
- Including it as a link to an external file
For the most part, you will include the JavaScript as an external file.
The Script Tag
The tag is what we use to includes our JavaScript. It's a lot like the tag you've already been using to include your CSS files.
Here's a very basic snippet of JavaScript using the script tag. This JavaScript is written directly into our HTML page. It will call and alert box as soon as the page loads.
alert["This alert box was called with the onload event"];
When using the script tag, we must always use the attribute name and value of
type="text/javascript".
Using the script tag to include an external JavaScript file
To include an external JavaScript file, we can use the script tag with the attribute src. You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.
This script tag should be included between the tags in your HTML document.
JavaScript Files
JavaScript files are not HTML files or CSS files.- Always end with the js extension
- Only include JavaScript
It's customary to put all JavaScript files in a folder called js on websites, like so:
Klik di sini
Jika dilihat dari fungsi tag a, kita diarahkan ke URL javascript:alert[‘Belajar JS di Makinrajin’] yang nantinya akan menampilkan alert berisi tulisan tersebut.
4. External
Jika tadi kita telah menuliskan kode JavaScript pada file yang sama dengan HTML, sekarang kita akan menuliskan kode JavaScript pada file yang berbeda. Tapi, tentunya kita butuh tag untuk memanggil file JavaScript supaya terhubung dengan file HTML kita.
File index.html
Belajar JS
File script.js
alert['Belajar JS di Makinrajin']Untuk pemanggilan JavaScript dengan tag memiliki 5 cara, yaitu:
Lalu, apa bedanya? Bedanya terletak pada waktu fetch dan eksekusi kode programnya. Berikut detail gambarnya:
Gambar diambil dari Stackoverflow
Perbedaan Antara defer dan async
Jika kita menggunakan keyword defer saat pemanggilan javascript, maka halaman website akan melakukan fetch [pengambilan isi javascript] bersamaan dengan HTML. Kemudian, setelah itu script pada JavaScript akan dieksekusi saat HTML sudah dirender [halaman website telah ditampilkan].
Namun, jika kita menggunakan async, kita melakukan eksekusi setelah JavaScript berhasil dirender. Jadi, begitu JS berhasil diambil, lalu akan diproses walaupun halaman website belum ditampilkan seluruhnya.
Untuk type module, itu adalah gaya penulisan JavaScript yang membagi tiap komponen JS menjadi berbagai file dengan tugas yang lebih spesifik. Jika file JavaScript kita bersifat modular, maka lebih baik gunakan async. Namun, jika pada kode Javascript terdapat perintah memanggil script JS lainnya, gunakan defer untuk memanggil file tersebut.
Oh iya, satu hal lagi. Alangkah baiknya Anda memanggil file Javascript sebelum tag . Itu supaya JavaScript bisa di-fetch dan di-execute setelah halaman website berhasil dirender sepenuhnya. Hal itu dipercaya bisa meningkatkan performa dan kecepatan website.