Cara Memanggil JavaScript di HTML

By Posted on

Cara Memanggil JavaScript di HTML- JavaScript adalah bahasa pemrograman yang telah menjadi tulang punggung pengembangan web sejak kemunculannya pada tahun 1995. Dikembangkan oleh Brendan Eich di Netscape Communications Corporation, bahasa ini awalnya dikenal sebagai LiveScript, namun kemudian berganti nama menjadi JavaScript untuk memanfaatkan popularitas bahasa pemrograman Java yang sedang meningkat saat itu.

Kamu pasti sudah familiar dengan peran JavaScript sebagai bahasa pemrograman client-side dalam lingkungan web browser. Ia memiliki kemampuan untuk mengendalikan perilaku dan interaksi pada halaman web yang kita lihat. Dengan JavaScript, kita dapat menciptakan elemen-elemen interaktif seperti form, animasi, popup, dan bahkan fitur-fitur kompleks seperti halaman transaksi.

Pada artikel kali ini kelasjava akan memberikan panduan langkah-langkah dasar dalam memanggil JavaScript di HTML agar kamu dapat memulai pengembangan web menggunakan HTML dan JavaScript dengan lebih percaya diri.

Hal yang Dibutuhkan untuk Memulai Membuat Proyek JavaScript

Sebelum kita mulai untuk membuat proyek JS, pastikan kamu telah menyiapkan beberapa hal berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar program JavaScript.
Baca Juga:   Cara Memunculkan Teks di JavaScript

Ketika semua persiapan sudah siap, mari kita mulai membuat fungsi untuk memanggil JavaScript di dalam HTML.

Cara Mudah Memanggil JavaScript di HTML

1. Siapkan Folder dan File

Pastikan untuk menyiapkan folder proyek dan file-file yang diperlukan, sebagai berikut:

  • Buat Folder: Buat folder untuk proyek Anda.
  • Buat File HTML: Buat file index.html untuk struktur halaman web.
  • Buat File CSS (opsional): Buat file style.css untuk mendesain tampilan halaman web.
  • Buat File JavaScript: Buat file script.js untuk menulis kode JavaScript.

2. Buat Kode HTML (index.html)

Buatlah struktur dasar HTML dan tambahkan tag <script> di bagian bawah body untuk memanggil file JavaScript, untuk kode HTML tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>https://kelasjava.com/</title>
</head>
<body>
    <h1>Memanggil JavaScript di HTML - By: KelasJava</h1>
    <p>Klik tombol di bawah untuk melihat pesan pop-up:</p>
    <button onclick="greet()">Klik Saya</button>
    
    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Jika diperlukan tambahkan kode CSS untuk mengatur tampilan halaman web sesuai keinginanmu, untuk kode CSS tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

h1, p, button {
    text-align: center;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

4. Buat Kode JavaScript (script.js)

Tulis kode JavaScript yang diperlukan untuk memanggil JavaScript di dalam HTML, untuk kode JavaScriptnya bisa salin kode dibawah ini.

// Contoh kode JavaScript
function greet() {
    alert('Hallo, Sobat Java!');
}

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk memastikan bahwa JavaScript dipanggil dengan benar.

Baca Juga:   Cara Memunculkan Teks di JavaScript

6. Hasil Halaman Web

Selamat! Kamu telah berhasil membuat program JavaScript untuk memanggil JavaScript di HTML, untuk menguji fungsinya bisa klik button “Klik Saya”.

Penutup

Cukup sekian tutorial tentang langkah-langkah dasar dalam memanggil JavaScript di dalam HTML. Ikuti setiap langkahnya dengan seksama agar kamu dapat mencapai hasil yang diinginkan, selain itu kamu juga bisa menambahkan beberapa fungsi atau komponen lainnya di HTML dan JavaScript. Selamat mencoba!

Related posts: