Hello world js di HTML - Referensi javascript

JavaScript adalah bahasa pemrograman yang memungkinkan kamu untuk membuat konten web yang interaktif.

Bagaimana cara membuat script ‘Hello World’ dengan menggunakan JavaScript di HTML? Setelah membaca artikel ini, kamu akan memahami bagaimana caranya.

Penulisan Script JavaScript di HTML

Script JavaScript biasanya ditulis di dalam tag <script>. Tag ini bisa diletakkan di dalam <head> atau <body> dokumen HTML. Namun, penempatan yang paling umum adalah sebelum tag penutup </body>.

Bagian berikut ini adalah contoh pengkodean JavaScript di bagian body dokumen HTML.

<!DOCTYPE html>
<html>
<body>

<h2>Tampilkan JavaScript di HTML</h2>

<button type="button" onclick="myFunction()">Klik</button>

<p id="demo"></p>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Hello World!";
}
</script>

</body>
</html>

Penjelasan Kode

Mari kita bahas fungsi dan tujuan dari setiap baris kode di dalam contoh tersebut.

<!DOCTYPE html>: Baris ini mendefinisikan bahwa dokumen ini adalah dokumen HTML5.
<html>: Ini adalah tag pembuka HTML. Semua kode HTML harus ditempatkan di antara tag pembuka dan penutup HTML ini.
<body>: Tag ini mendefinisikan body dokumen.
<h2> Tampilkan JavaScript di HTML </h2>: Ini adalah header atau judul di halaman web.
<button type="button" onclick="myFunction()">Klik</button>: Membuat sebuah tombol yang, saat di-klik, akan memanggil fungsi JavaScript myFunction().
<p id="demo"></p>: Membuat paragraph dengan id “demo”, yang nantinya akan diisi oleh script JavaScript kita.
<script>: Ini adalah tag pembuka script.
function myFunction() : Mendefinisikan fungsi JavaScript dengan nama “myFunction”.
document.getElementById("demo").innerHTML = "Hello World!" : Menulis text “Hello World!” ke dalam elemen yang memiliki id “demo”.
</script>: Ini adalah tag penutup script.
</body> dan </html> : Tag penutup body dan html.

Saat tombol “Klik” ditekan, JavaScript akan mengubah konten elemen dengan id “demo” menjadi “Hello World!“.