Cara Menghubungkan Javascript dengan HTML

menghubungkan javascript dengan HTML

Pada kali ini saya akan membagikan cara menghubungkan Javascript dengan HTML. Hal ini dapat dilakukan dengan dua cara, yang pertama ialah meletakkan script langsung di dalam HTML nya, dan yang kedua membuat file Javascipt nya secara terpisah.

JS sangat berperan penting dalam pembuatan website, karena dengan menggunakan Javascipt website akan menjadi lebih interaktif. Dan sama seperti menghubungkan HTML dengan CSS, membuat website menjadi lebih indah. Sehingga pengunjung akan merasa senang ketika mengunjungi website yang kita buat.

Dan tidak usah berlama-lama lagi, langsung saja kita peraktekkan caranya.

Menghubungkan Javascript di dalam HTML

1. Diantara tag <Head> </Head>

Buatlah sebuah file HTML dengan nama terserah di dalam sebuah folder, sebagai contoh berikut ini.

Cara Menghubungkan Javascript dengan HTML diantara tag head

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Menghubungkan Javascript dengan HTML</title>

</head>

<body>

</body>

</html>

selanjutnya kita akan mengetikkan scipt Javascript di tag <Head> di dalam file HTMLnya. Kalian dapat mengetikkan <script> </script> dan diantara kode script nya dibuat tambahkan perintah Javascriptnya, contoh sebagai berikut.

Cara Menghubungkan Javascript dengan HTML - Sintaks Javascript

Kemudian isilah perintah Javascript diantara tag <script>, contoh seperti ini.

<script>
        alert(‘Selamat datang di Blog Computer Natic’);
    </script>

Dan secara keseluruhan akan seperti ini.

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Menghubungkan Javascript dengan HTML</title>
    <script>
        alert(‘Selamat datang di Blog Computer Natic’);
    </script>
</head>
<body>
</body>
</html>

Jika dijalankan maka akan mengasilkan output seperti ini.

2. Diantara tag <body> </body>

Caranya sama dengan cara diatas, hanya saja meletakkan sintaks Javascript nya berada di tag body, sebagai berikut.

Menghubungkan Javascript dengan HTML - Alert Java Script

Maka hasilnya juga sama seperti berikut ini. Terdapat perbedaan dalam peletakkan tag script jika diletakkan di tag head dan tag body. Yaitu kecepatan loadnya, lebih cepat jika diletakkan di tag body dari pada di tag head, karena jika di tag head akan memakan banyak memori sehingga berpengaruh terhadap kecepatannya.

Menghubungkan melalui Eksternal Javascript

Kali ini kita menghubungkan Javascript dengan HTML dengan berbeda file, yang pertama file HTML dan yang kedua file Javascript, dan berikut caranya.

Buatlah file HTML nya dengan nama tersesah.

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Menghubungkan Javascript dengan HTML</title>
</head>
<body>
</body>
</html>

Kemudian buat juga file Javascriptnya dengan nama terserah juga, maka sebagai contoh saya buat serperti berikut

Selanjutnya buatlah script pada HTML dan arahkan ke sumber Javascipt nya, pastikan file HTML dan Javascript nya dalam satu folder yang sama.

<script src=“eksternal.js”></script>

Makan jika dilihat secara keselurahan HTML nya sebagai berikut.

Selanjutnya pada file Javascriptnya (eksternal.js), tuliskan perintah yang ingin dibuat.

alert(‘Selamat Datang di Blog Computer Natic’);

Dan simpan, kemudian jalankan HTMl nya menggunakan browser, maka hasilnya tetap sama seperti diatas.

Selesai.

Dan itulah cara menghubungkan Javascript dengan HTML yang dapat dilakukan melalui internal ataupun eksternal, semoga bermanfaat. Apabila ada yang ingin ditanyakan dapat menuliskannya di kolom komentar. Terima kasih!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *