Kali ini kita belajar membangun calculator sederhana menggunakan Javascript. Kita akan fokus pada membuat JavaScript sebagai kode kunci yang membuat tombol +, -, × , ÷ dan= berfungsi. Kode yang dibuat sudah jadi, Anda dapat mengembangkannya sendiri dengan menambahkan function baru untuk beberapa fungsi baru seperti CE, % dan lain - lain.
Dalam membangun sebuah proyek html, tiga kategori umum sebagai dasar untuk menampilkan kode - kode html tersebut, seperti "hello world!" , yang harus dibuat, yaitu CSS, Javascrift dan body html. Hal sama juga berlaku untuk pembuatan html kalkulator menggunakan Javascrift. Pertama kita buatkan kode untuk tampilan pada body halaman.
<!-- create table --> <body> <table border="1"> <tr> <td><input type="button" value="c" onclick="clr()"/> </td> <td colspan="3"><input type="text" id="edu"/></td> <!-- clr() function will call clr to clear all value --> </tr> <tr> <!-- creating buttons and assigning values--> <td><input type="button" value="+" onclick="dis('+')"/> </td> <td><input type="button" value="1" onclick="dis('1')"/> </td> <td><input type="button" value="2" onclick="dis('2')"/> </td> <td><input type="button" value="3" onclick="dis('3')"/> </td> </tr> <tr> <td><input type="button" value="-" onclick="dis('-')"/> </td> <td><input type="button" value="4" onclick="dis('4')"/> </td> <td><input type="button" value="5" onclick="dis('5')"/> </td> <td><input type="button" value="6" onclick="dis('6')"/> </td> </tr> <tr> <td><input type="button" value="*" onclick="dis('*')"/> </td> <td><input type="button" value="7" onclick="dis('7')"/> </td> <td><input type="button" value="8" onclick="dis('8')"/> </td> <td><input type="button" value="9" onclick="dis('9')"/> </td> </tr> <tr> <td><input type="button" value="/" onclick="dis('/')"/> </td> <td><input type="button" value="." onclick="dis('.')"/> </td> <td><input type="button" value="0" onclick="dis('0')"/> </td> <!-- Evaluating function call eval()--> <td><input type="button" value="=" onclick="solve()"/> </td> </tr> </table> </body>
Lalu buat CSS untuk memberikan ukuran, bentuk , latar warna. Dalam membangun tampilan kalkulator, kita akan menentukan elemen tampilan kalkulator pada halaman html. Dalam menentukan tampilan biasanya dipengaruhi oleh selera dan gaya masing - masing. Dimana ini yang disebut nilai seni yang ada didiri kita masing - masing. Dan CSS dibawah ini dapat Anda modifikasi sesuai selera Anda.
<style> input[type="button"] { border-radius: 5px; background-color:#e6e6e6; color: black; border-color:#e6e6e6 ; width:100%; } input[type="text"] { border-radius: 5px; text-align: right; background-color:white; border-color: black ; width:100% } </style>
Setelah terbentuk elemen tampilan dari html kalkilator, kemudian kita membuat tombol - tombol menjadi berfungsi. Disini kita membuat Javascript untuk memfungsikan setiap tombol. Pertama yang dilihat sebelum membuat elemen function, ada berapa banyak tombol yang harus difungsikan. Pada elenen kalkulator ada elemen +, - , ×, ÷ dan =. Masing - masing harus berfungsi dengan benar. Pengujian sebelum ditampilkan bisa menggunakan server lokal seperti xampp. Dan ini elemen Javascript yang sudah dibuat.
<script> //function for displaying values function dis(val) { document.getElementById("edu").value+=val } //function for evaluation function solve() { let x = document.getElementById("edu").value let y = eval(x) document.getElementById("edu").value = y } //function for clearing the display function clr() { document.getElementById("edu").value = "" } </script>
Sekarang proyek bangunan sebuah kalkulator sudah lengkap dan siap ditampilkan pada halaman html. Lakukan pengujian dan jika fungsi masing - masing sudah bisa bekerja dengan benar, baru bisa Anda upload ke halaman html.
Demikian membangun html kalkulator berbasis Javascript. Inti dalam membuat kalkulator html ini, basiknya pada penguasaan dalam membuat CRUD, perbedaannya CRUD dalam dasar tampilan php. Anda juga dapat membuat menggunakan Java, phyton dan Android. Intinya semua sama hanya berbeda pada aturan kode di masing - masing flatform.
Semoga bermanfaat
Artikel Terkait:
- Table- Membuat Tabel Dan Menyisipkan Pre-render
- Web Design Membuat Button Share Ke Sosial Media
- Tutorials Desain Blog di Smartphone
- Tutorials Desain Blog di Smartphone II
- Tutorials Desain Blog di Smartphone III
- Tutorials Desain Blog di Smartphone IV
- Tutorials - Cara Registrasi Blogger ke Adsense Google
- How To Create Menu Tabs
- Blogger - Cara Edit Hyperlink
- Blogger - Kode ID Pelacakan
- Tip Mengembalikan Postingan Blog Terhapus
- Cara Verifikasi Blog Ke Webmaster Tools
- Tips For Blog Validation Into Webmaster Tools
- Tips - Membuat Sitemaps Blog
- Tips To Create Sitemaps Blog
- Tips - Membuat Meta Tags SEO Friendly Blog Dan Website
- Tutorials - Create Mark Up Structured Data At Webmaster Tools
- Tips SEO - Cara Memperbaiki Kesalahan Data Terstruktur
- Tutorials SEO -Tentang Itemscope
- Tutorial - Highlighter Webmaster Tools
- Tutorials - Highlighter Webmaster Tools For Blog And Website
- Webmaster Tools - Fix Crawl Error
- Website - Tip Membuat Button Share Ke Sosial Media
- Cara Menghapus Imageurl, BlogId Dan PostId
- Tip Cara Memasang Lencana Profile Twitter di Blog
- Tips - Memasang Postingan Twitter Di Blog Dan Website
- Tips - Menambahkan Plugin Fanpage Facebook di Blog Dan Website
- Tips - Menambahkan Profile Google + Di Blog Dan WebPage
- Tips - Memasang Lencana Profile Linkedin Di Blog Dan Website
- Blogger - Cara Memasang Postingan Instagram
No comments:
Post a Comment