Cross Reff: Javascript

Tampilkan postingan dengan label Javascript. Tampilkan semua postingan

Alternatif Penulisan FOR pada JS

Januari 05, 2020 Add Comment

FOR adalah salah satu perulangan yang sering digunakan dalam pemrograman. Secara umum FOR terdiri dari 3 bagian yang saya beri label A, B dan C.

Bagian-bagian dari perulangan FOR diantaranya :

Bagian A akan dijalankan satu kali, bagian ini biasanya untuk memberikan nilai pada suatu variable yang akan digunakan pada perulangan.

Bagian B adalah sebuah kondisi yang bernilai TRUE atau FALSE, kondisi akan menentukan kapan perulangan tersebut akan berhenti, perulangan hanya akan berhenti jika kondisi bernilai FALSE.

Bagian C adalah bagian yang akan dijalankan sebelum menjalankan proses yang ada didalam perulangan, bagian ini biasanya diberi proses increment untuk variable pada bagian A.

Struktur dari dari FOR didalam bahasa pemrograman Javascript :

FOR ( Bagian A; Bagian B; Bagian C ) {
// Perintah Didalam Perulangan
}

Secara umum penulisan perintah perulangan dapat dituliskan seperti :

for(var i = 1; i <= 5; i++) {
    document.write("Perulangan Ke-" + i + "<br>");
}

Tetapi ada cara lain atau alternatif untuk penulisan perulangan FOR dalam Javascript, alternatif penulisan FOR adalah sebagai berikut :

Alternatif 1
Perbedaan alternatif ini adalah terletak pada variable yang diberi nilai. Variable yang diberi nilai di deklarasikan diluar perulangan FOR bukan bersama dengan FOR.

var i;
for(i = 1; i <= 5; i++) {
    document.write("Perulangan Ke-" + i + "<br>");
}

Alternatif 2
Alternatif ini versi simple dari alternatif yang pertama yaitu variable yang digunakan pada perulangan langsung di inisialisasikan atau langsung diberi nilai ( pemberian nilai tidak bersama dengan for ).

var i = 1;
for(; i <= 5; i++) {
    document.write("Perulangan Ke-" + i + "<br>");
}

Alternatif 3
Bagian C pada perulangan dapat dipindahkan kedalam proses yang dijalankan setiap perulangan dilakukan.

for(var i = 1; i <= 5;) {
    document.write("Perulangan Ke-" + i + "<br>");
    i++;
}

Alternatif 4
Pada alternatif ini kita akan membuat FOR menjadi Infinite Loop atau perulangan yang tanpa batas. Lalu untuk menghentikan perulangannya dapat menggunakan IF dan perintah break untuk mengakhiri perulangan.

var i = 1;
for(;;) {
    document.write("Perulangan Ke-" + i + "<br>");
    if(i >= 5) break;
    else i++;
}

Alternatif 5
Alternatif terakhir yaitu penulisan FOR yang lebih dipersingkat lagi. Tetapi cara ini mungkin jarang orang yang mengetahui.

for(var i = 0; ++i <= 5;) {
    document.write("Perulangan Ke-" + i + "<br>");
}

** Untuk bahasa pemrograman lain mungkin beberapa dari alternatif diatas tidak akan bekerja.

Oke, mungkin cukup segitu saja untuk kali ini semoga bermanfaat.

Timmer Sederhana

Desember 16, 2019 Add Comment

Timmer atau pengatur waktu adalah jam tipe khusus yang umumnya digunakan untuk mengatur alur kejadian atau proses. Biasanya stopwatch digunakan untuk menghitung dari nol sampai batas waktu tertentu, sedangakan pengatur waktu menghitung mundur dengan di atur pada interval waktu tertentu, seperti Jam pasir.

Aplikasi timmer ini dibuat dengan menggunakan CSS, HTML dan Javascript.

Source Code ( CSS, HTML, Javascript ) :

<!DOCTYPE html>
<html>
 <head>
  <title>Timmer</title>
  <style>
   body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: arial, sans-serif;
   }
   input {
    width: 256px;
    background: #fff;
    color: #222;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
   }
   input[id="xRes"] { background: #555; color: #fff; }
   button {
    width: 128px;
    background: #111;
    color: #fff;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
   }
   h1 { color: #fff; }
  </style>
 </head>
 <body>
  <table bgcolor="#222" width="100%" height="100%">
   <tr><td align="center">
    <h1 id="xRunTime">00:00:00</h1>
    <input id="xTimmer" placeholder="Timmer JJ:MM:DD"><br>
    <button onclick="xStart()">Mulai</button>
   </td></tr>
  </table>
  <script>
   var xRunTime = document.getElementById("xRunTime");
   var xInterval;
   function xStart() {
    var xData = (document.getElementById("xTimmer").value).split(':');
    var xTimmer = parseInt(xData[2]);
    xTimmer += parseInt(xData[1]) * 60;
    xTimmer += parseInt(xData[0]) * 3600;
    xSetRunTime(xTimmer);
    clearInterval(xInterval);

    xInterval = setInterval(function() {
     xSetRunTime(--xTimmer);
    }, 1000);
   }
   function xSetRunTime(xTimmer) {
    if(xTimmer <= 0) clearInterval(xInterval);
    var hour = parseInt(xTimmer / 3600);
    var min = parseInt((xTimmer % 3600) / 60);
    var sec = parseInt((xTimmer % 3600) % 60);
    xRunTime.innerHTML = (hour > 9 ? hour : '0' + hour) + ":" + (min > 9 ? min : '0' + min) + ":" + (sec > 9 ? sec : '0' + sec);
   }
  </script>
 </body>
</html>

Faktorial ( n! )

Desember 11, 2019 Add Comment

Faktorial dari bilangan asli n adalah hasil perkalian antara bilangan bulat positif yang kurang dari atau sama dengan n. Faktorial ditulis sebagai n! dan disebut n faktorial. Secara umum dapat dituliskan sebagai :

n! = n x ( n - 1 ) x ( n - 2 ) x ( n - 3 ) x ... x 3 x 2 x 1

Program faktorial ini dibuat dengan menggunakan HTML, CSS, dan untuk menghitung faktorialnya menggunakan bahasa pemrograman Javascript. Didalam program ini memanfaatkan perulangan ( for ) untuk mengurangi nilai n sesuai dengan rumus di atas.

CSS :

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: arial, sans-serif;
}
input {
    width: 256px;
    background: #fff;
    color: #222;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
}
input[id="xRes"] { background: #511; color: #fff; }
button {
    width: 128px;
    background: #c22;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
}
h2 { color: #fff; }

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Faktorial (n!)</title>
        <link rel="stylesheet" type="text/css" href="xstyle.css">
    </head>
    <body>
        <table bgcolor="#822" width="100%" height="100%">
            <tr><td align="center">
                <h2>Faktorial (n!)</h2>
                <input id="xNum1" placeholder="Bilangan"><br>
                <input id="xRes" placeholder="Hasil"><br>
                <button onclick="xHitung()">Hitung</button>
            </td></tr>
        </table>
        <script src="xscript.js" type="text/javascript"></script>
    </body>
</html>

Javascript :

function xHitung() {
    var xNum1 = parseInt(document.getElementById("xNum1").value);
    var xRes = 1;

    for(var n = xNum1; n >= 1; n--) xRes *= n;

    document.getElementById("xRes").value = xRes;
}

Kalkulator Sederhana - #1

Desember 11, 2019 Add Comment

Di postingan pertama ini saya akan membagikan source code aplikasi kalkulator sederhana. Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.

Aplikasi kalkulator sederhana ini hanya dapat digunakan untuk melakukan operasi penjumlahan, pengurangan, pembagian dan perkalian. Aplikasi ini dibangun dengan menggunakan HTML, CSS dan Javascript.

CSS :

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: arial, sans-serif;
}
input, select {
    width: 256px;
    background: #fff;
    color: #222;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
    box-sizing: content-box;
}
input[id="xRes"] { background: #155; color: #fff; }
button {
    width: 128px;
    background: #2cc;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
}
h2 { color: #fff; }

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Kalkulator Simple - #1</title>
        <link rel="stylesheet" type="text/css" href="xstyle.css">
    </head>
    <body>
        <table bgcolor="#822" width="100%" height="100%">
            <tr><td align="center">
                <h2>Faktorial</h2>
                <input id="xNum1" placeholder="Bilangan"><br>
                <input id="xRes" placeholder="Hasil"><br>
                <button onclick="xHitung()">Hitung</button>
            </td></tr>
        </table>
        <script src="xscript.js" type="text/javascript"></script>
    </body>
</html>

Javascript :

function xHitung() {
    var xOpr = document.getElementById("xOpr").value;
    var xNum1 = document.getElementById("xNum1").value;
    var xNum2 = document.getElementById("xNum2").value;
    var xRes;

    if(xOpr == '1') xRes = parseInt(xNum1) + parseInt(xNum2);
    else if(xOpr == '2') xRes = parseInt(xNum1) - parseInt(xNum2);
    else if(xOpr == '3') xRes = parseInt(xNum1) * parseInt(xNum2);
    else if(xOpr == '4') xRes = parseInt(xNum1) / parseInt(xNum2);

    document.getElementById("xRes").value = xRes;
}