Rabu, 11 Juli 2012

Cara membuat kalkulator dengan textbox di JavaScript


Berikut comxero (nama blog saya) ingin berbagi ilmu yang comxero dapatkan dari teman-teman yang telah membantu saya. Source code membuat kalkulator sederhana dengan textbox di javascript. Coding ini menggunakan aplikasi gratis yang sudah ada di komputer/notebook teman-teman yaitu notepad. Silahkan dipelajari dan berbagi pada teman anda tapi jangan menghilangkan nama pembuat codingnya.
mazipanneh
Pertama buka aplikasi notepad
jika brother ingin Download file nya : 
lalu isikan coding comxero seperti berikut :

Source code :

<html>
<body>
<head>
<title>UAS WEB ANDI PURWANTO</title>
</head>
<body bg-image="F40.jpeg">
<table border=3 width=100% height=100%>
<tr>
<td colspan=3 align=center height="60px"><font size="5">F A K U L T A S&#160;&#160; I L M U&#160;&#160; K O M P U T E R</font></td>
</tr>
<tr>
    <td width=17%>
        <marquee direction=right><hr width=25  align=left color="blue"/><br/></marquee>
                <marquee direction=left><hr width=50  align=left color="aqua"/><br/></marquee>
        <marquee direction=right><hr width=75 align=left color="red"/><br/></marquee>
        <marquee direction=left><hr width=100 align=left color="green"/><br/></marquee>
        <marquee direction=right><hr width=125 align=left color="gold"/><br/></marquee>
        <marquee direction=left><hr width=150 align=left color="brown"/><br/></marquee>
        <marquee direction=right><hr width=175 align=left color="black"/><br/></marquee>
        <marquee direction=left><hr width=150 align=left color="brown"/><br/></marquee>
        <marquee direction=right><hr width=125 align=left color="gold"/><br/></marquee>
        <marquee direction=left><hr width=100 align=left color="green"/><br/></marquee>
        <marquee direction=right><hr width=75 align=left color="red"/><br/></marquee>
        <marquee direction=left><hr width=50 align=left color="aqua"/><br/></marquee>
        <marquee direction=right><hr width=25  align=left color="blue"/><br/></marquee>
    </td>
    <td align=center>
        <table cellpadding=15 style="font-size:30pt;">
        <form name="form">
        <tr><td colspan=3 align=center><b>Operasi Aritmatika</b></td>
        <tr><td>A</td><td>:</td><td>
                    <input type="text" name="a" size="10" style="font-size:20pt;">    </td></tr>
        <tr><td>B</td><td>:</td><td>
                    <input type="text" name="b" size="10" style="font-size:20pt;">    </td></tr>
        <tr><td>Hasil</td><td>:</td><td>
                    <input type="text" name="hasil" size="10" style="font-size:20pt;">    </td></tr>
        </form></table><p style="font-size:23pt;">U N I V E R S I T A S&#160; K H A T O L I K&#160;&#160; S T . T H O M A S<br>2 0 1

2</p><p style="font-size:30pt;"><u>A n d i&#160; P u r w a n t o&#160; S i r i n g o&#160; r i n g o</u></p>
    </td>
    <td width=17%>
        <marquee direction=right><hr width=25  align=right color="blue"/><br/></marquee>
                <marquee direction=left><hr width=50  align=right color="aqua"/><br/></marquee>
        <marquee direction=right><hr width=75 align=right color="red"/><br/></marquee>
        <marquee direction=left><hr width=100 align=right color="green"/><br/></marquee>
        <marquee direction=right><hr width=125 align=right color="gold"/><br/></marquee>
        <marquee direction=left><hr width=150 align=right color="brown"/><br/></marquee>
        <marquee direction=right><hr width=175 align=right color="black"/><br/></marquee>
        <marquee direction=left><hr width=150 align=right color="brown"/><br/></marquee>
        <marquee direction=right><hr width=125 align=right color="gold"/><br/></marquee>
        <marquee direction=left><hr width=100 align=right color="green"/><br/></marquee>
        <marquee direction=right><hr width=75 align=right color="red"/><br/></marquee>
        <marquee direction=left><hr width=50 align=right color="aqua"/><br/></marquee>
        <marquee direction=right><hr width=25  align=right color="blue"/><br/></marquee>    </td>
</tr>
<tr>
<td colspan=3 align=center height="75px" >
<input type="button" value="  +  " onClick="tambah()" style="height:60px; width:100px; font-size:35pt;">
<input type="button" value="  -  " onClick="kurang()" style="height:60px; width:100px; font-size:35pt;">
<input type="button" value="  x  " onClick="kali()" style="height:60px; width:100px; font-size:35pt;">
<input type="button" value="  /  " onClick="bagi()" style="height:60px; width:100px; font-size:35pt;">
<input type="button" value="  %  " onClick="persen()" style="height:60px; width:100px; font-size:35pt;">
<input type="button" value="  ^  " onClick="pangkat()" style="height:60px; width:100px; font-size:35pt;">
</td><font size="7">
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">   
    function tambah()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=a+b
    form.hasil.value = c
    }

    function kurang()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=a-b
    form.hasil.value=c
    }

    function kali()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=a*b
    form.hasil.value=c
    }

    function bagi()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=a/b
    form.hasil.value = c
    }

    function persen()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=a%b
    form.hasil.value = c
    }

    function pangkat()
    {
    a=eval(form.a.value)
    b=eval(form.b.value)
    c=Math.pow(a, b)
    form.hasil.value = c
    }
    </SCRIPT>
</body>  
</html>

Copy and paste kan di notepad teman-teman.
klik file --- save --- namafile.html
type files nya --- All files

 Hasil output : 
Gambar hasil kalkulator














Download File / coding  kalkulator dengan TextBox

Password : comxero

Demikian postingan comxero untuk kali ini...
yaps brother,,,
terima kasih kunjungannya…
silahkan mencobanya sendiri yah brother…
semoga bermanfaat......

 -------------------------------------------------------Comxero---------------------------------------------------

0 komentar:

Posting Komentar