Contoh Kalkulator Sederhana dengan JavaScript

Rabu, 27 November 2019 edit

Berikut ini contoh pembuatan kalkulator dengan menggunakan JavaScript yang dimodifikasi dari sumbernya di sini. Kalau kita mengikuti instruksi pada sumber tersebut pasti tidak akan berfungsi kalkulatornya. Oleh karena itu dilakukan penyesuaian kode agar berjalan normal. Silakan diamati, dicontoh, dan dikembangkan sendiri.

Dengan menggunakan teori dasar dan kalkulator ini, Anda dapat dengan cepat menemukan jawaban untuk persamaan stoikiometri kimia Anda.

Petunjuk Penggunaan

Isikan dua kotak variabel yang diketahui dan kosongkan satu kotak variabel yang akan dihitung.

Kalkulator Jumlah Zat
Jumlah zat (n): mol
Massa zat (m): g
Massa molar zat (M): g/mol


Kalkulator Molaritas
Konsentrasi Larutan (cM) : M
Jumlah Zat Terlarut (n) : mol
Volume Larutan (V) : L

Free JavaScripts diberikan oleh The JavaScript Source

Berikut ini kode yang dapat salin untuk dicontoh, dikembangkan sendiri. Silakan diblok semua skrip dan disalin (Ctrl+C) kemudian Ctrl+V pada HTML editor blog atau dibuat secara offline sekedar untuk mainan :-D

Dengan menggunakan teori dasar dan kalkulator ini, Anda dapat dengan cepat menemukan jawaban untuk persamaan stoikiometri kimia Anda.
<strong>Petunjuk Penggunaan</strong>
Isikan dua kotak variabel yang diketahui dan kosongkan 1 kotak variabel yang akan dihitung.

<strong>Kalkulator Jumlah Zat</strong>
<form action="#top" name="form">
<table><tbody>
<tr><td>Jumlah zat (<i>n</i>):</td><td><input name="N" size="10" type="text" /> mol</td></tr>
<tr><td>Massa zat (<i>m</i>):</td><td><input name="M" size="10" type="text" /> g</td></tr>
<tr><td>Massa molar zat (<i>M</i>):</td><td><input name="R" size="10" type="text" value="" />&nbsp;g/mol</td></tr><tr><td></td><td><input onclick="NMR()" type="button" value="Hitung" />  <input onclick="clear1()" type="button" value="Hapus" /></td></tr>
</tbody></table>
<hr />

<strong>Kalkulator Molaritas</strong>
<table><tbody>
<tr><td>Konsentrasi Larutan (<i>c<sub>M</sub></i>) :</td><td><input name="C" size="10" type="text" /> M</td></tr>
<tr><td>Jumlah Zat Terlarut (<i>n</i>) :</td><td><input name="A" size="10" type="text" /> mol</td></tr>
<tr><td>Volume Larutan (<i>V</i>) :</td><td><input name="V" size="10" type="text" value="" />&nbsp;L</td></tr>
<tr><td></td><td><input onclick="CVA()" type="button" value="Hitung" />  <input onclick="clear2()" type="button" value="Hapus" /></td></tr>
</tbody></table>
</form>
Free JavaScripts diberikan oleh&nbsp;<a href="https://draft.blogger.com/%E2%80%9Dhttps://javascriptsource.com%E2%80%9D">The JavaScript Source</a>


<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Kim Bratzel :: http://kim.ugtech.net/blog */

function NMR() {
  if (document.form.N.value == "")
    document.form.N.value = document.form.M.value/document.form.R.value
  if (document.form.M.value == "")
    document.form.M.value = document.form.N.value*document.form.R.value
  if (document.form.R.value == "")
    document.form.R.value = document.form.M.value/document.form.N.value
}

function CVA() {
  if (document.form.C.value == "")
    document.form.C.value = document.form.A.value/document.form.V.value
  if (document.form.V.value == "")
    document.form.V.value = document.form.C.value*document.form.A.value
  if (document.form.A.value == "")
    document.form.A.value = document.form.V.value*document.form.C.value
}

function clear1() {
  document.form.N.value = ""
  document.form.M.value = ""
  document.form.R.value = ""
}

function clear2() {
  document.form.C.value = ""
  document.form.V.value = ""
  document.form.A.value = ""
}
</script>

Untuk menjalankan contoh kalkulator kimia secara luring (offline) silakan unduh file-nya dari sini. Kalau perlu silakan edit dengan menggunakan text editor seperti notepad atau notepad++ atau text editor lainnya.

Atau bisa juga menyalin kodenya di bawah ini.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Kim Bratzel :: http://kim.ugtech.net/blog */

function NMR() {
  if (document.form.N.value == "")
    document.form.N.value = document.form.M.value/document.form.R.value
  if (document.form.M.value == "")
    document.form.M.value = document.form.N.value*document.form.R.value
  if (document.form.R.value == "")
    document.form.R.value = document.form.M.value/document.form.N.value
}

function CVA() {
  if (document.form.C.value == "")
    document.form.C.value = document.form.A.value/document.form.V.value
  if (document.form.V.value == "")
    document.form.V.value = document.form.C.value*document.form.A.value
  if (document.form.A.value == "")
    document.form.A.value = document.form.V.value*document.form.C.value
}

function clear1() {
  document.form.N.value = ""
  document.form.M.value = ""
  document.form.R.value = ""
}

function clear2() {
  document.form.C.value = ""
  document.form.V.value = ""
  document.form.A.value = ""
}
</script>
</head>
<body>
Dengan menggunakan teori dasar dan kalkulator ini, Anda dapat dengan cepat menemukan jawaban untuk persamaan stoikiometri kimia Anda.<br/><br/>
<strong>Petunjuk Penggunaan</strong>
Isikan dua kotak variabel yang diketahui dan kosongkan 1 kotak variabel yang akan dihitung.
<br/><br/>
<strong>Kalkulator Jumlah Zat</strong>
<form action="#top" name="form">
<table><tbody>
<tr><td>Jumlah zat (<i>n</i>):</td><td><input name="N" size="10" type="text" /> mol</td></tr>
<tr><td>Massa zat (<i>m</i>):</td><td><input name="M" size="10" type="text" /> g</td></tr>
<tr><td>Massa molar zat (<i>M</i>):</td><td><input name="R" size="10" type="text" value="" />&nbsp;g/mol</td></tr>
<tr><td></td><td><input onclick="NMR()" type="button" value="Hitung" />  <input onclick="clear1()" type="button" value="Hapus" /></td></tr>
</tbody></table>
<hr />
<br/><br/>
<strong>Kalkulator Molaritas</strong>
<table><tbody>
<tr><td>Konsentrasi Larutan (<i>c<sub>M</sub></i>) :</td><td><input name="C" size="10" type="text" /> M</td></tr>
<tr><td>Jumlah Zat Terlarut (<i>n</i>) :</td><td><input name="A" size="10" type="text" /> mol</td></tr>
<tr><td>Volume Larutan (<i>V</i>) :</td><td><input name="V" size="10" type="text" value="" />&nbsp;L</td></tr>
<tr><td></td><td><input onclick="CVA()" type="button" value="Hitung" />  <input onclick="clear2()" type="button" value="Hapus" /></td></tr>
</tbody></table>
</form><br/><br/>
Free JavaScripts diberikan oleh&nbsp;<a href="https://draft.blogger.com/%E2%80%9Dhttps://javascriptsource.com%E2%80%9D">The JavaScript Source</a>
</body>
</html>

Untuk mengenal tentang koding HTML dan JavaScript silakan kunjungi tautan ini. Kita bisa belajar dari nol.
Bagikan di

Tidak ada komentar:

Posting Komentar

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info