Cara Menambahkan JavaScript di HTML

Daftar Isi

Pendahuluan
Definisi JavaScript
Menambahkan JavaScript di HTML dari File Eksternal Js
Penutup

Pendahuluan

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web yang lebih interaktif dan dinamis. Salah satu cara untuk menyiapkan bahasa pemrograman ini ke dalam halaman HTML adalah dengan menggunakan tag <script>. Javascript bisa ditulis langsung dalam file HTML atau dipisahkan ke dalam file eksternal yang kemudian dihubungkan dengan HTML. Dalam panduan ini kita akan membahas tentang cara menambahkan JavaScript di HTML dari file Eksternal.

Definisi JavaScript

JavaScript atau sering disingkat JS adalah sebuah bahasa pemrograman yang digunakan dalam pengembangan web. Sebagai salah satu teknologi inti web di samping HTML dan CSS, bahasa pemrograman ini sering digunakan untuk membuat halaman web menjadi interaktif dan bisa membangun aplikasi web. Biasanya, browser web modern yang mematuhi standar sudah mendukung JavaScript melalui mesin bawaan tanpa memerlukan plugin tambahan.

Menambahkan JavaScript di HTML dari File Eksternal Js

Untuk mengakomodasi skrip yang lebih besar atau skrip yang akan digunakan dalam beberapa halaman, Anda memerlukan kode JavaScript yang berada dalam satu atau beberapa file Js yang dihubungkan dalam HTML.

1. Buat Template HTML

Adapun cara menambahkan JavaScript dari File Eksternal ke dokumen HTML, Anda bisa memulainya dengan projek kecil. Silahkan Anda masukkan template berikut ini.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Halo Selamat Datang!</title>
</head>

<body>
</body>

</html>

2. Pindahkan kode JavaScript ke file script.js

Setelah memasukkan template diatas, silahkan pindahkan kode JavaScript yang akan menampilkan tanggal sebagai Heading 1 ke file script.js.

let d = new Date();
document.body.innerHTML = "<h1>Hari ini tanggal " + h + "</h1>"

Anda bisa menambahkan referensi pada skrip ini ke bagian <body> dengan baris kode berikut.

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

Tag <script> tersebut menunjuk ke file script.js dalam direktori js/ proyek web kita.

Silahkan masukkan baris kode berikut ke berkas HTML pada bagian <body>, seperti berikut:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hari ini tanggal </title>
</head>

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

</html>

3. Masukkan File style.css

Langkah terakhir, silakan edit file style.css dengan menambahkan warna latar belakang dan gaya seperti berikut.

body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}

Kemudian, silahkan masukkan file CSS tersebut ke dalam <head> di dokumen HTML tadi.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hari ini tanggal </title>
     <link rel="stylesheet" href="css/style.css">
</head>

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

</html>

Sekarang, dengan JavaScript dan CSS yang sudah tersedia, Anda dapat memuat index.html halaman tersebut ke dalam peramban web pilihan Anda.

Penutup

Demikianlah langkah-langkah dalam menambahkan JavaScript ke dalam HTML dari file eksternal .js yang terpisah. Dengan menggunakan bahasa pemrograman ini, Anda bisa menyesuaikan website sesuai dengan kebutuhan. Namun, apabila Anda ingin membuat website yang lebih praktis dengan ratusan template yang bisa langsung digunakan, coba gunakan layanan Website Instan dari IDCloudHost sekarang!