Contoh Program Sederhana Menggunakan JavaScript

Program sederhana JavaScript di bawah ini dapat dijadikan contoh bagaimana script berbasis bahasa JavaScript dibuat dan digunakan pada sebuah halaman web.

Script JavaScript dapat berjalan pada browser tanpa memerlukan include library tertentu. Dengan membuat file html dan menempatkan script program JavaScript di antara tag <script> dan </script> maka script javaScript yang dibuat sudah bisa dijalankan..

Penempatan script program JavaScript pada halaman html dapat dilihat pada contoh di bawah ini :

<body>
    <!-- element html -->
    <p>Ini adalah element html</p>
    <p id="hello"></p>

    <!-- script JavaScript -->
    <!-- Ditempatkan pada tag <script></script> -->
    <script>
        document.getElementById('hello').innerHTML = "hello";
    </script>
    
</body>

Dalam sebuah halaman html, script JavaScript biasa di tempatkan pada bagian akhir. Meskipun kita tetap dapat menempatkan script JavaScript di awal dan dimanapun yang kita inginkan pada halaman html. Namun dengan menempatkan script JavaScript pada bagian akhir lebih menguntungkan dari sisi struktur program dan performance page html yang dibuat.

Setelah memahami beberapa materi dasar untuk belajar JavaScript pada tutorial ini kita akan lanjutkan dengan mengerjakan contoh program sederhana menggunakan JavaScript.

3 Contoh Program Sederhana JavaScript

1. Program menghitung diskon

Pada contoh program menghitung diskon ini input yang dimiliki adalah jumlah uang yang harus dibayar oleh pelanggan berdasarkan total belanja yang dilakukan . Jika pelanggan belanja lebih atau sama dengan Rp.100.000 maka program akan memberikan diskon. Jika sebaliknya kecil dari Rp.100.000 maka tidak ada diskon yang diperoleh.

Output dari progam diskon sederhana ini adalah jumlah diskon dan jumlah bayar.

discount.html

<!DOCTYPE html>
<html>

<head>
    <title>Program Discount</title>
</head>

<body>
    <h1>Program Sederhana JavaScript</h1>
    <h2>Mehitung total belanja dan diskon <a href="https://www.indonetsource.com">indonetsource</a></h2>
    Masukkan jumlah belanja : <input id="jumlah_belanja" type="text">
    <button onclick="discount()">Proses</button><br />
    <p id="potongan"></p>
    <p id="jumlah_bayar"></p>
    <script>
        var jumlah_belanja;
        var potonganText = document.getElementById('potongan');
        var jumlah_bayarText = document.getElementById('jumlah_bayar');

        function discount() {
            jumlah_belanja = document.getElementById('jumlah_belanja').value;
            if (jumlah_belanja >= 100000) {
                potonganText.innerHTML = "Jumlah Potongan : 10%";
                jumlah_bayar = jumlah_belanja - (jumlah_belanja * 0.1);
                jumlah_bayarText.innerHTML = "Jumlah bayar : " + jumlah_bayar;
            } else {
                potonganText.innerHTML = "Jumlah Potongan : 0%";
                jumlah_bayarText.innerHTML = "Jumlah bayar : " + jumlah_belanja;
            }
        }
    </script>

</body>

</html>

2. Program menampilkan jumlah karakter

Pada contoh program ini input yang diberikan adalah string pada kolom karakter. Jika sebuah karakter dimasukkan maka akan otomatis terhitung jumlahnya.

Program ini menyerupai fitur wordcount pada microsoft word tetapi proram ini lebih bisa disebut sebagai karakter count.

jumlah_karakter.html

<!DOCTYPE html>
<html>

<head>
    <title>Program Menghitung Jumlah Karakter</title>
</head>

<body>
    <h1>Program Sederhana JavaScript</h1>
    <p>Menghitung Jumlah Karakter <a href="https://www.indonetsource.com">www.indonetsource.com</a></p>        
    Masukkan Karakter : <input id="karakter" type="text" onkeyup="onkeyUp()">   <br/>     
    <p>Jumlah : <span id="jumlah"></span></p>

    <script>
        var karakter;
        var text;
        function onkeyUp() {            
            karakter = document.getElementById('karakter').value;            
            text = karakter            
            document.getElementById('jumlah').innerHTML = text.length;         
        }
    </script>

</body>

</html>

Salah satu fungsi penting dalam pembuatan progam menghitung jumlah karakter di atas adalah event onkeyup(). Counting/penghitungan jumlah karakter dilakukan setiap user melepaskan tombol yang di tekan.

3. Contoh Program Merubah lowercase ke Uppercase JavaScript

Pada contoh ini kita akan merubah huruf kecil menjadi huruf besar mengguakan event onclick(). Fungsi lain yang berperan dalam perubahan ini adalah toUpperCase(). Jika ingin membuat program yang bekerja sebaliknya bisa digunakan toLowerCase(). Contoh program menggunakan to toUpperCase() dapat dilihat pada script di bawah ini:

lower_to_upper.html

<!DOCTYPE html>
<html>

<head>
    <title>Program Merubah Lowercase to Uppercase</title>
</head>

<body>
    <h1>Program Sederhana JavaScript</h1>
    <p><b>Mengubah huruf kecil ke huruf besar <a href="https://www.indonetsource.com">www.indonetsource.com</a></b></p>        
    Masukkan Karakter/Huruf Kecil : <input id="karakter" type="text" >
    <button onclick="onKlick()">Ubah</button>         

    <script>                                        
        var karakter;
        var text;
        function onKlick() {            
            karakter = document.getElementById('karakter').value;            
            text = karakter            
            document.getElementById('karakter').value = text.toUpperCase();         
        }
    </script>

</body>

</html>

Hasil running proggram lower to upper html

contoh program sederhana javascript

Leave a comment