Cara Membuat Program Sederhana dengan JavaScript

By Posted on

Cara Membuat Program Sederhana dengan JavaScript – Sobat Java, apakah kamu sudah pernah mendengar tentang bahasa pemrograman JavaScript? JavaScript adalah bahasa pemrograman yang sangat penting dalam pengembangan web.

Dengan JavaScript, kita dapat membuat halaman web menjadi interaktif dan dinamis. Dalam artikel kali ini kelasjava akan membahas tentang bagaimana cara membuat program sederhana menggunakan JavaScript.

JavaScript merupakan sebuah bahasa pemrograman yang hebat, meskipun terkadang sulit untuk dipahami. Namun, dengan JavaScript, kita bisa membuat berbagai macam program yang bermanfaat dalam pengembangan web. Salah satu contoh program sederhana yang akan kita bahas dalam artikel ini adalah kalkulator pertambahan menggunakan JavaScript.

Alat yang Dibutuhkan untuk Membuat Program JavaScript Sederhana

Sebelum mulai membuat program JS sederhana , pastikan kamu telah menyiapkan beberapa alat berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Cara Mudah Membuat Program Sederhana dengan JavaScript

1. Siapkan Folder dan File

Dalam hal ini kami akan mengambil program JavaScript sederhana dengan membuat kalkulator pertambahan menggunakan JS, untuk folder dan file yang perlu dibuat adalah:

  • Buat folder untuk proyek program sederhana JavaScript Anda.
  • Buat file index.html untuk struktur halaman web.
  • Buat file style.css untuk mendesain tampilan halaman web.
  • Buat file script.js untuk menulis kode JavaScript untuk fungsionalitas dari program JavaScript-nya.
Baca Juga:   Cara Membuat Program Cek Suhu dengan JavaScript

2. Buat Kode HTML (index.html)

Tambahkan struktur dasar HTML untuk program JavaScript agar bisa dijalankan, untuk kode HTML dari program JavaScript tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Kalkulator Sederhana - By: KelasJava</h2>
        <input type="text" id="input1" placeholder="Masukkan Angka Pertama">
        <input type="text" id="input2" placeholder="Masukkan Angka Kedua">
        <button id="addButton">Tambahkan</button>
        <p id="result"></p>
    </div>

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

3. Buat Kode CSS (style.css)

Desain tampilan halaman agar menarik pada website program JavaScript menggunakan CSS, untuk kode CSS dari program JavaScript tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

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

4. Buat Kode JavaScript (script.js)

Tambahkan kode JavaScript untuk menambahkan logika pada perhitungan kalkulator program JavaScript, untuk kode JS-nya kamu bisa menyalin dibawah ini

// Program Kalkulator
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const addButton = document.getElementById('addButton');
const resultDiv = document.getElementById('result');

addButton.addEventListener('click', () => {
    const num1 = parseFloat(input1.value);
    const num2 = parseFloat(input2.value);
    const result = num1 + num2;
    resultDiv.textContent = 'Hasil: ' + result;
});

5. Jalankan Kode

Jika semua file tersebut sudah di isi kode yang sesuai maka jalankan kode dengan membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu Open in Browser.

Baca Juga:   Cara Membuat Game Flappy Bird dengan JavaScript

6. Tampilkan Hasil Program Sederhana

Kamu telah berhasil membuat Program Sederhana berupa kalkulator pertambahan dengan JavaScript dan membuat tampilan webnya menjadi responsif menggunakan CSS, bisa dilihat untuk tampilan hasil pertambahan sesuai dengan form yang diinputkan.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kamu dapat belajar membuat program sederhana dengan JavaScript hanya mengikuti tutorial saja. Kamu bisa belajar seputar materi JavaScript dengan melihat postingan lainnya di kelasjava.com, dan semoga artikel ini bermanfaat bagi kamu yang sedang belajar JavaScript.

Related posts: