කොහොම හරි ගොඩ යන්නත් එපැයිනේ: HTML 5 - JavaScript

මේ තියෙන්නේ HTML, JavaScript භාවිතා කරලා හදපු සරලම Calculator එකක්. JavaScript එකෙන් තමා සියලුම ගණිතකර්ම වැඩ සිදුකරන්නේ.
අපි බලමු ඉතාම සරලව HTML සහ JavaScript භාවිතා කරලා සරල Calculator එකක් සකස් කර ගන්න අයුරු.
මුලින්ම ඉතින් HTML page එකක appearance එක හදාගන්න. form tag එකක් තුල text box, button දාලා.

ඒ tools දාගන්න අපි යොදාගන්නවා input tag එක. text box එකක් text යන්නෙන් ලබාගත හැක. button වර්ග 3ක් ඇත. Button, Reset, Submit යනුවෙනි.මෙහිදී මම යොදාගන්නා සියල්ල Button type එකේ button වේ. JavaScript එකක් වගේ call කරගන්න අපට මේක යොදාගන්න පුළුවන්. Reset button එකෙන් අදාල Reset button එක ඇති form එකේ සියලුම items වල values, Default Values බවට පත් කරයි.Submit button එකෙන් අදාළ Form values, server එකට, server side script එකකට parse කිරීම, submit කිරීම සිදුකරයි.

Button එකක් click කල බව දැනගන්න button එකට තියෙනවා onClick කියල event එකක්. අපි ඒ event එක තුලදී අපේ javascript එකේ අවශ්‍ය function එක call කරනවා.
උදාහරණ,
text box එකකට,
<input type="text" name="screen" width="100" style="align:right" required autofocus />
button එකකට,
<input type="button" name="one" onClick="cal(1)" />

මෙන්න source code එක,

<html>
<head>
<title>HansA - Calculator</title>
<script type="text/javascript">
var tempValue="";
var operator="";
var no1=0;
var no2=0;
function cal(currentValue){
            tempValue+=currentValue;
            document.calculator.screen.value=tempValue;
}
function plus(){
    if(operator==""){
        no1=parseFloat(document.calculator.screen.value);
        operator="+";
        document.calculator.screen.value="";
        document.calculator.screen.placeholder=no1;
        tempValue="";
    }else{
        switch(operator){
            case '+':
                no1=no1+parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="+";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '-':
                no1=no1-parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="+";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '*':
                no1= no1*parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="+";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '/':
                no1=no1/parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="+";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
        }
    }
}
function minus(){
    if(operator==""){
        no1=parseFloat(document.calculator.screen.value);
        operator="-";
        document.calculator.screen.value="";
        document.calculator.screen.placeholder=no1;
        tempValue="";
    }else{
        switch(operator){
            case '+':
                no1=no1+parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="-";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '-':
                no1=no1-parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="-";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '*':
                no1= no1*parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="-";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '/':
                no1=no1/parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="-";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
        }
    }
}
function product(){
    if(operator==""){
        no1=parseFloat(document.calculator.screen.value);
        operator="*";
        document.calculator.screen.value="";
        document.calculator.screen.placeholder=no1;
        tempValue="";
    }else{
        switch(operator){
            case '+':
                no1=no1+parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="*";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '-':
                no1=no1-parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="*";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '*':
                no1= no1*parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="*";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '/':
                no1=no1/parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="*";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
        }
    }
}
function division(){
    if(operator==""){
        no1=parseFloat(document.calculator.screen.value);
        operator="/";
        document.calculator.screen.value="";
        document.calculator.screen.placeholder=no1;
        tempValue="";
    }else{
        switch(operator){
            case '+':
                no1=no1+parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="/";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '-':
                no1=no1-parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="/";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '*':
                no1= no1*parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="/";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
            case '/':
                no1=no1/parseFloat(document.calculator.screen.value);
                tempValue="";
                operator="/";
                document.calculator.screen.value="";
                document.calculator.screen.placeholder=no1;
                break;
        }
    }
}
function eq(){
    no2=document.calculator.screen.value;
    switch(operator){
        case '+':
            document.calculator.screen.value=(parseFloat(no1)+parseFloat(no2));
            break;
        case '-':
            document.calculator.screen.value=(parseFloat(no1)-parseFloat(no2));
            break;
        case '*':
            document.calculator.screen.value=(parseFloat(no1)*parseFloat(no2));
            break;
        case '/':
            document.calculator.screen.value=(parseFloat(no1)/parseFloat(no2));
            break;
    }
    no1=document.calculator.screen.value;
    document.calculator.screen.placeholder="";
    no2=0;
    tempValue="";
    operator="";
}
</script>
</head>
<body>

<form name="calculator">
<table border="2" width="100" bgcolor="yellow">
<tr>
<td colspan="4" align="center"><input type="text" name="screen" style="text-align:right" autofocus required/></td>
</tr>

<tr>
    <td><input type="button" name="one" value="1" onclick="cal('1')"/></td>
    <td><input type="button" name="two" value="2" onclick="cal('2')"/></td>
    <td><input type="button" name="three" value="3" onclick="cal('3')"/></td>
    <td><input type="button" name="sum" value="+" onclick="plus()"/></td>
</tr>

<tr>
    <td><input type="button" name="four" value="4" onclick="cal('4')"/></td>
    <td><input type="button" name="five" value="5" onclick="cal('5')"/></td>
    <td><input type="button" name="six" value="6" onclick="cal('6')"/></td>
    <td><input type="button" name="sub" value="-" onclick="minus()"/></td>
</tr>

<tr>
    <td><input type="button" name="seven" value="7" onclick="cal('7')"/></td>
    <td><input type="button" name="eight" value="8" onclick="cal('8')"/></td>
    <td><input type="button" name="nine" value="9" onclick="cal('9')"/></td>
    <td><input type="button" name="mul" value="x" onclick="product()"/></td>
</tr>

<tr>
    <td><input type="reset" name="clear" value="C" /></td>
    <td><input type="button" name="zero" value="0" onclick="cal('0')"/></td>
    <td><input type="button" name="equal" value="=" onclick="eq()"/></td>
    <td><input type="button" name="divi" value="/" onclick="division()"/></td>
</tr>
</table>
</form>
</body>
</html>

කොහොම හරි ගොඩයන්න පෙරලෙන පිටු

ලේසියෙන්ම හොයාගන්න මෙතනින්

HTML 5 - JavaScript - Simple Calculator

No comments :

Post a Comment