Program JavaScript Menghitung Luas dan Keliling Jajar Genjang Menggunakan Sublime Text
Mei 18, 2019
Edit
Program JavaScript Menghitung Luas dan Keliling Jajar Genjang Menggunakan Sublime Text
Hallo semua ✋, Selamat datang di blog saya, Apa kabar teman semua ? Saya harap semua yang menyempatkan membaca artikel ini sehat yaaa 😌, Oke pada kesempatan kali ini saya akan memberikan sebuah tutorial ataupun cara dalam membuat program javaScript menghitung luas dan kelililng jajar genjang dengan menggunakan sebuah apliksi alat bantu text editor, yaitu dengan menggunakan sublime text, pada pembuatan program ini saya menggunakan aplikasi sublime text yang versi 3 ya teman-teman.
tutorial javascript ini dibuat agar teman-teman paham bagaimana caranya membuat tampilan yang menarik pada program yang kita buat.
tutorial javascript ini dapat anda temukan pada modul-modul yang berbentuk pdf dalam bahasa indonesia pada situs-situs tertentu.
Sebelum kita masuk dalam pembahsan yang saya jadikan judul, alangkah baiknya kita terlebih dahulu mengetahui apasih yang dimaksud dengan sublime ? Apa saja sih yang harus diperbuat untuk membangun program ini ?, Oke langsung saja saya jelaskan ya, Sublime text merupakan aplikasi code text editor yang mana , aplikasi ini dapat dijalankan pada semua media platform, seperti Windows, maupun IOS.
Aplikasi ini bukan merupakan aplikasi opensource, melainkan merupakan aplikasi yang ditemukan oleh komunitas tertentu, oleh karena itu aplikasi ini gratis untuk diDownload.
Oke langsung saja kita masuk pada pembuatan program javascript untuk menghitung luas dan keliling jajar genjang menggunakan aplikasi bantu yaitu Sublime text.
Langkah langkan Pembuatan
1. Silahkan anda buka aplikasi sublime text anda, Kemudian setelah anda membukanya, silahkan anda buat Folder untuk pembuatannya, atau folder keluarannya. di sini saya membuat nama foldernya yaitu ProgramJajarGenjangJS.
2. Kemudian silahkan anda buat file pertama dengan judul jajarGenjangJS.html, ingat ya formatnya harus html, karena disini merupakan file untuk membuka programnya melalui aplikasi internet anda, disinilah kita akan memanggil class atau file lainnya agar program jadi teratur dan terpenting dapat berjalan dengan baik. Silahkan anda copy code berikut lalu pastekan pada file yang telah anda buat pada sublime text tadi.
<!DOCTYPE html>
<html>
<head>
<title>Jajar Genjang</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>Jajar Genjang</th>
</tr>
</thead>
<tbody>
<tr>
<td>Masukan alas</td>
</tr>
<tr>
<td><input type="text" id="ipt_alas"></td>
</tr>
<tr>
<td>Masukan tinggi</td>
</tr>
<tr>
<td><input type="text" id="ipt_tinggi"></td>
</tr>
<tr>
<td><button onclick="hitung()">Hitung</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Luas jajar genjang</td>
</tr>
<tr>
<td><input type="text" id="opt_luas" disabled></td>
</tr>
<tr>
<td>Keliling jajar genjang</td>
</tr>
<tr>
<td><input type="text" id="opt_keliling" disabled></td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript" src="jajarGenjang.js"></script>
</body>
</html>
3. Setelah anda pastekan code diatas, Silahkan anda buat file baru lagi atau class baru lagi dengan judul jajarGenjang.js, kali ini formatnya harus js ya, karena pada file atau class ini akan kita isikan javascript nya, Kemudian setelah anda membuat file yang saya suruh diatas, silahkan anda copykan code yang telah saya buat dibawah ini, Kemudian pastekan pada file yang telah anda buat pada text editor anda tadi.
var luas;
var keliling;
var alas;
var tinggi;
var sisiMiring;
function hitung() {
alas = parseFloat(document.getElementById("ipt_alas").value);
tinggi = parseFloat(document.getElementById("ipt_tinggi").value);
luas = alas * tinggi;
sisiMiring = 3/4 * alas;
keliling = 2 * (alas + sisiMiring);
document.getElementById('opt_luas').value = luas;
document.getElementById('opt_keliling').value = keliling;
}
4. Selanjutnya kita masuk pada tahap yang terakhir yaitu membuat css nya / style pada program yang akan kita buat, Silahkan anda buat file atau class baru yang berjudul style.css, Kemudaian Silahkan anda Copy code yang telah saya buat dibawah ini, lalu pastekan pada aplikasi sublime text anda.
div {
margin: auto ;
width: 400px;
margin-top: 100px;
}
table {
border-style: none;
border-collapse: collapse;
width: 100%;
}
th{
background-color: blue;
padding: 5px;
border: none;
font-size: 16px;
}
td{
border: none;
}
input[type=text]{
padding: 10px;
width: 380px;
border-style: solid;
border-color: #6d6e6a;
font-size: 16px;
}
input[type=text]:disabled{
background-color: white;
}
button {
width: 100%;
height: 40px;
background-color: yellow;
border: none;
color: white;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
Kemudian Silahkan anda save atau simpan, lalu jalankan program yang telah anda buat pada file atau class yang bernama jajarGenjangJS.html tadi, dengan cara klik kanan pada halaman pembuatan class lalu silahkan anda pilih open in browser, Lalu silahkan anda isi program anda tersebut berupa nominal angka, Maka hasil Akhirnya seperti gambar dibawah ini :
Cukup Mudah bukan ? Silahkan ikuti blog saya jika anda menyukainya dan komen jika ada yang kurang paham, Sekian pembahasan pada hari ini.
Wassalam........