Cetak 'Hello World' di JavaScript

Tutorial ini akan membantu Anda memulai dengan JavaScript dengan menunjukkan cara menyematkan kode JavaScript ke dalam halaman HTML.

Untuk menyisipkan JavaScript ke dalam halaman HTML, Anda menggunakan elemen <script>. Ada dua cara menggunakan elemen <script> dalam halaman HTML:

Menyematkan kode JavaScript langsung ke dalam halaman HTML.
Merujuk ke file kode JavaScript eksternal.

Menyematkan Kode JavaScript pada Halaman HTML

Menempatkan kode JavaScript langsung di dalam elemen <script> tidak disarankan dan sebaiknya hanya digunakan untuk tujuan konsep atau uji coba.

Kode JavaScript di dalam elemen <script> diinterpretasikan dari atas ke bawah. Sebagai contoh:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh JavaScript Hello World</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>

Pada elemen <script>, kami menggunakan fungsi alert() untuk menampilkan pesan Hello, World!

Menyertakan File JavaScript Eksternal

Untuk menyertakan JavaScript dari file eksternal:

Pertama, buat file dengan ekstensi .js, misalnya app.js, dan letakkan di dalam subfolder js. Perhatikan bahwa penempatan file JavaScript di dalam folder js tidak diperlukan, tetapi ini adalah praktik yang baik.
Selanjutnya, gunakan URL ke file kode sumber JavaScript pada atribut src elemen <script>.

Berikut adalah isi file app.js:

alert('Hello, World!');

Dan berikut adalah isi file helloworld.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh JavaScript Hello World</title>
    <script src="js/app.js"></script>
</head>
<body>
</body>
</html>

Jika Anda membuka file helloworld.html di browser web, Anda akan melihat peringatan yang menampilkan pesan Hello, World!

Catatan bahwa Anda dapat memuat file JavaScript dari server jarak jauh, memungkinkan Anda menyajikan JavaScript dari berbagai domain, seperti content delivery network (CDN), untuk mempercepat halaman.

Atribut async dan defer

Untuk mengubah cara browser memuat dan mengeksekusi file JavaScript, gunakan salah satu atribut elemen <script>, yaitu async dan defer.

Atribut-atribut ini hanya berlaku pada file skrip eksternal. Atribut async memberi instruksi kepada browser web untuk mengeksekusi file JavaScript secara asinkron. Atribut async tidak menjamin file skrip dieksekusi sesuai urutan penampilan mereka. Sebagai contoh:

<script async src="service.js"></script>
<script async src="app.js"></script>

File app.js mungkin dieksekusi sebelum file service.js. Oleh karena itu, Anda harus memastikan tidak ada ketergantungan antara keduanya.

Atribut defer meminta browser web untuk mengeksekusi file skrip setelah dokumen HTML telah diurai.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Demonstrasi JavaScript defer</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>

Meskipun kita menempatkan elemen <script> di bagian <head>, skrip akan menunggu browser menerima tag penutup <html> untuk mulai dieksekusi.

Ringkasan

Gunakan elemen <script> untuk menyertakan file JavaScript dalam halaman HTML.
Atribut async elemen <script> memberi instruksi kepada browser web untuk mengambil file JavaScript secara paralel, dan kemudian menguraikan dan mengeksekusinya segera setelah file JavaScript tersedia.
Atribut defer elemen <script> memungkinkan browser web untuk mengeksekusi file JavaScript setelah dokumen telah diurai.

Cetak ‘Hello World’ di JavaScript

Menyematkan Kode JavaScript pada Halaman HTML

Menyertakan File JavaScript Eksternal

Atribut async dan defer

Ringkasan

Abdan Zam Zam Ramadhan