Penggunaan Variabel
Hai, diawal kita ketik atau tulis script dibawah ini pada text editor :
<html>
<head>
<title>Variabel</title>
<script type="text/javascript">
var a, b, c;
a = "Data variabel a";
b = 7;
c = "Ini adalah variabel";
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
</script>
</head>
<body>
</body>
</html>
Simpan file tersebut dengan nama variabel.html<head>
<title>Variabel</title>
<script type="text/javascript">
var a, b, c;
a = "Data variabel a";
b = 7;
c = "Ini adalah variabel";
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
</script>
</head>
<body>
</body>
</html>
Pada contoh diatas baris pertama adalah data yang disimpan pada variabel a, baris kedua adalah data yang disimpan pada variabel b dan baris ketiga adalah data yang ada pada variabel c.
Contoh :
<html>
<head>
<title>Variabel</title>
<script type="text/javascript">
var a;
var b = 7;
a = 2 * b;
document.write("nilai a adalah : " + a);
</script>
</head>
<body>
</body>
</html>
<head>
<title>Variabel</title>
<script type="text/javascript">
var a;
var b = 7;
a = 2 * b;
document.write("nilai a adalah : " + a);
</script>
</head>
<body>
</body>
</html>
Hasilnya :
Contoh :
<html>
<head>
<title>Variabel</title>
<script type="text/javascript">
var a = "123";
var b = "456";
var c = "hallo";
var d = "22hay";
var e = "123,45";
var f = "123.45";
document.write(a+b + "<br>");
document.write(parseInt(a) + parseInt(b) + "<br>");
document.write(parseInt(c) + "<br>");
document.write(parseInt(d) + "<br>");
document.write(parseFloat(e) + "<br>");
document.write(parseFloat(f) + "<br>");
document.write(parseFloat(b) / parseFloat(a));
</script>
</head>
<body>
</body>
</html>
<head>
<title>Variabel</title>
<script type="text/javascript">
var a = "123";
var b = "456";
var c = "hallo";
var d = "22hay";
var e = "123,45";
var f = "123.45";
document.write(a+b + "<br>");
document.write(parseInt(a) + parseInt(b) + "<br>");
document.write(parseInt(c) + "<br>");
document.write(parseInt(d) + "<br>");
document.write(parseFloat(e) + "<br>");
document.write(parseFloat(f) + "<br>");
document.write(parseFloat(b) / parseFloat(a));
</script>
</head>
<body>
</body>
</html>
Hasilnya:
Contoh memproses hasil form dengan javascript :
<html>
<head>
<title>Penjumlahan</title>
<script type="text/javascript">
function hitung() {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var hasil = a + b;
document.getElementById("hasil").value = hasil;
}
</script>
</head>
<body>
<form>
<input type="text" id="a" placeholder="Angka Pertama"><br>
<input type="text" id="b" placeholder="Angka Kedua"><br>
<input type="text" id="hasil" placeholder="Hasil" disabled><br>
<input type="button" id="button" value="Hitung" onclick="hitung()">
</form>
</body>
</html>
<head>
<title>Penjumlahan</title>
<script type="text/javascript">
function hitung() {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var hasil = a + b;
document.getElementById("hasil").value = hasil;
}
</script>
</head>
<body>
<form>
<input type="text" id="a" placeholder="Angka Pertama"><br>
<input type="text" id="b" placeholder="Angka Kedua"><br>
<input type="text" id="hasil" placeholder="Hasil" disabled><br>
<input type="button" id="button" value="Hitung" onclick="hitung()">
</form>
</body>
</html>
Hasilnya :
Contoh menghitung luas dan keliling lingkaran dengan JavaScript :
<html>
<head>
<title>Lingkaran</title>
<script type="text/javascript" language="javascript">
function hitung() {
//hitung keliling
var d = parseInt(document.getElementById('d').value);
var keliling = 3.14 *d;
document.getElementById("keliling").value=keliling;
//hitung luas
var r = d / 2;
var luas = 3.14 *r *r;
document.getElementById("luas").value=luas;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Diameter</td>
<td>:</td>
<td><input type="text" id="d" placeholder="Diameter"></td>
</tr>
<tr>
<td>Luas</td>
<td>:</td>
<td><input type="text" id="luas" placeholder="Luas" disabled></td>
</tr>
<tr>
<td>Keliling</td>
<td>:</td>
<td><input type="text" id="keliling" placeholder="Keliling" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Lingkaran</title>
<script type="text/javascript" language="javascript">
function hitung() {
//hitung keliling
var d = parseInt(document.getElementById('d').value);
var keliling = 3.14 *d;
document.getElementById("keliling").value=keliling;
//hitung luas
var r = d / 2;
var luas = 3.14 *r *r;
document.getElementById("luas").value=luas;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Diameter</td>
<td>:</td>
<td><input type="text" id="d" placeholder="Diameter"></td>
</tr>
<tr>
<td>Luas</td>
<td>:</td>
<td><input type="text" id="luas" placeholder="Luas" disabled></td>
</tr>
<tr>
<td>Keliling</td>
<td>:</td>
<td><input type="text" id="keliling" placeholder="Keliling" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
Perhitungan :
Contoh menghitung luas permukaan, volume dan selimut tabung dengan JavaScript :
<html>
<head>
<title>Lingkaran</title>
<script type="text/javascript" language="javascript">
function hitung() {
//hitung luas permukaan
var r = parseInt(document.getElementById('r').value);
var t = parseInt(document.getElementById('t').value);
var luaspermukaan = 2 * 3.14 * r * ( r + t );//Luas permukaan: 2 π r (r+t)
document.getElementById("luaspermukaan").value=luaspermukaan;
//hitung selimut
var selimut = 2 * 3.14 * r * t;//Luas selimut: 2 π r t
document.getElementById("selimut").value=selimut;
//hitung volume
var volume = 3.14 * r * r * t;//Volume : π r2 t
document.getElementById("volume").value=volume;
}
</script>
</head>
<body>
<form>
<table border="0px">
<tr>
<td>Jari-Jari</td>
<td>:</td>
<td><input type="text" id="r" placeholder="Jari-Jari"></td>
</tr>
<tr>
<td>Tinggi</td>
<td>:</td>
<td><input type="text" id="t" placeholder="Tinggi"></td>
</tr>
<tr>
<td>Luas Permukaan</td>
<td>:</td>
<td><input type="text" id="luaspermukaan" placeholder="Luas Permukaan" disabled></td>
</tr>
<tr>
<td>Volume</td>
<td>:</td>
<td><input type="text" id="volume" placeholder="Volume" disabled></td>
</tr>
<tr>
<td>Selimut</td>
<td>:</td>
<td><input type="text" id="selimut" placeholder="Selimut" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="Hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Lingkaran</title>
<script type="text/javascript" language="javascript">
function hitung() {
//hitung luas permukaan
var r = parseInt(document.getElementById('r').value);
var t = parseInt(document.getElementById('t').value);
var luaspermukaan = 2 * 3.14 * r * ( r + t );//Luas permukaan: 2 π r (r+t)
document.getElementById("luaspermukaan").value=luaspermukaan;
//hitung selimut
var selimut = 2 * 3.14 * r * t;//Luas selimut: 2 π r t
document.getElementById("selimut").value=selimut;
//hitung volume
var volume = 3.14 * r * r * t;//Volume : π r2 t
document.getElementById("volume").value=volume;
}
</script>
</head>
<body>
<form>
<table border="0px">
<tr>
<td>Jari-Jari</td>
<td>:</td>
<td><input type="text" id="r" placeholder="Jari-Jari"></td>
</tr>
<tr>
<td>Tinggi</td>
<td>:</td>
<td><input type="text" id="t" placeholder="Tinggi"></td>
</tr>
<tr>
<td>Luas Permukaan</td>
<td>:</td>
<td><input type="text" id="luaspermukaan" placeholder="Luas Permukaan" disabled></td>
</tr>
<tr>
<td>Volume</td>
<td>:</td>
<td><input type="text" id="volume" placeholder="Volume" disabled></td>
</tr>
<tr>
<td>Selimut</td>
<td>:</td>
<td><input type="text" id="selimut" placeholder="Selimut" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="Hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
Perhitungan :
Contoh menjumlah dan rata-ratakan 10 bilangan dengan JavaScript :
<html>
<head>
<title>Jumlah Rata-Rata</title>
<script type="text/javascript" language="javascript">
function hitung () {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var c = parseInt(document.getElementById('c').value);
var d = parseInt(document.getElementById('d').value);
var e = parseInt(document.getElementById('e').value);
var f = parseInt(document.getElementById('f').value);
var g = parseInt(document.getElementById('g').value);
var h = parseInt(document.getElementById('h').value);
var i = parseInt(document.getElementById('i').value);
var j = parseInt(document.getElementById('j').value);
var jumlah = a + b + c + d + e + f + g + h + i + j;
var hasil = ( a + b + c + d + e + f + g + h + i + j) / 10;
document.getElementById("jumlah").value=jumlah;
document.getElementById("hasil").value=hasil;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Angka pertama</td>
<td>:</td>
<td><input type="text" id="a" placeholder="Angka pertama"></td>
</tr>
<tr>
<td>Angka kedua</td>
<td>:</td>
<td><input type="text" id="b" placeholder="Angka kedua"></td>
</tr>
<tr>
<td>Angka ketiga</td>
<td>:</td>
<td><input type="text" id="c" placeholder="Angka ketiga"></td>
</tr>
<tr>
<td>Angka keempat</td>
<td>:</td>
<td><input type="text" id="d" placeholder="Angka keempat"></td>
</tr>
<tr>
<td>Angka keenam</td>
<td>:</td>
<td><input type="text" id="e" placeholder="Angka kelima"></td>
</tr>
<tr>
<td>Angka ketujuh</td>
<td>:</td>
<td><input type="text" id="f" placeholder="Angka keenam"></td>
</tr>
<tr>
<td>Angka ketujuh</td>
<td>:</td>
<td><input type="text" id="g" placeholder="Angka ketujuh"></td>
</tr>
<tr>
<td>Angka kedelapan</td>
<td>:</td>
<td><input type="text" id="h" placeholder="Angka kedelapan"></td>
</tr>
<tr>
<td>Angka kesembilan</td>
<td>:</td>
<td><input type="text" id="i" placeholder="Angka kesembilan"></td>
</tr>
<tr>
<td>Angka kesepuluh</td>
<td>:</td>
<td><input type="text" id="j" placeholder="Angka kesepuluh"></td>
</tr>
<tr>
<td>Jumlah</td>
<td>:</td>
<td><input type="text" id="jumlah" placeholder="Jumlah" disabled></td>
</tr>
<tr>
<td>Rata - Rata</td>
<td>:</td>
<td><input type="text" id="hasil" placeholder="Rata - Rata" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="Hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Jumlah Rata-Rata</title>
<script type="text/javascript" language="javascript">
function hitung () {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var c = parseInt(document.getElementById('c').value);
var d = parseInt(document.getElementById('d').value);
var e = parseInt(document.getElementById('e').value);
var f = parseInt(document.getElementById('f').value);
var g = parseInt(document.getElementById('g').value);
var h = parseInt(document.getElementById('h').value);
var i = parseInt(document.getElementById('i').value);
var j = parseInt(document.getElementById('j').value);
var jumlah = a + b + c + d + e + f + g + h + i + j;
var hasil = ( a + b + c + d + e + f + g + h + i + j) / 10;
document.getElementById("jumlah").value=jumlah;
document.getElementById("hasil").value=hasil;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Angka pertama</td>
<td>:</td>
<td><input type="text" id="a" placeholder="Angka pertama"></td>
</tr>
<tr>
<td>Angka kedua</td>
<td>:</td>
<td><input type="text" id="b" placeholder="Angka kedua"></td>
</tr>
<tr>
<td>Angka ketiga</td>
<td>:</td>
<td><input type="text" id="c" placeholder="Angka ketiga"></td>
</tr>
<tr>
<td>Angka keempat</td>
<td>:</td>
<td><input type="text" id="d" placeholder="Angka keempat"></td>
</tr>
<tr>
<td>Angka keenam</td>
<td>:</td>
<td><input type="text" id="e" placeholder="Angka kelima"></td>
</tr>
<tr>
<td>Angka ketujuh</td>
<td>:</td>
<td><input type="text" id="f" placeholder="Angka keenam"></td>
</tr>
<tr>
<td>Angka ketujuh</td>
<td>:</td>
<td><input type="text" id="g" placeholder="Angka ketujuh"></td>
</tr>
<tr>
<td>Angka kedelapan</td>
<td>:</td>
<td><input type="text" id="h" placeholder="Angka kedelapan"></td>
</tr>
<tr>
<td>Angka kesembilan</td>
<td>:</td>
<td><input type="text" id="i" placeholder="Angka kesembilan"></td>
</tr>
<tr>
<td>Angka kesepuluh</td>
<td>:</td>
<td><input type="text" id="j" placeholder="Angka kesepuluh"></td>
</tr>
<tr>
<td>Jumlah</td>
<td>:</td>
<td><input type="text" id="jumlah" placeholder="Jumlah" disabled></td>
</tr>
<tr>
<td>Rata - Rata</td>
<td>:</td>
<td><input type="text" id="hasil" placeholder="Rata - Rata" disabled></td>
</tr>
<tr>
<td><input type="button" id="button" value="Hitung" onclick="hitung()"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
Penjumlahan :
Sekian yang dapat saya share di post kali ini terima kasih.


0 komentar:
Posting Komentar