• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • HTML • JavaScript • jQuery • Web  /  Հաշվիչի (calculator) պատրաստում
Calculator
18 Ապրիլի 2016

Հաշվիչի (calculator) պատրաստում

Հեղինակ Տարոն
CSS, HTML, JavaScript, jQuery, Web

Ողջույն հարգելի ընթերցողներ։ Այսօր ուզում եմ Ձեզ ներկայացնել հաշվիչի (calculator) պատրաստումը HTML-ի, CSS-ի և jQuery-ի օգնությամբ։ Նախօրոք ասեմ, որ մեր հաշվիչը լինելու է պարզագույն, որը միաժամանակ չի կարող կատարել մեկից ավել գործողություններ (կարող է կատարել միայն երկու թվերի գումարում, թվի քառակուսի աստիճանի բարձրացում և այլն)։

Մեզ անհրաժեշտ են երեք ֆայլեր՝ index.html, style.css և script.js։

index.html ֆայլում գրում ենք հետևյալ պարզագույն կոդը․

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="calculator">
            <div id="answer"></div>
            <button type="button" id="number-7">7</button>
            <button type="button" id="number-8">8</button>
            <button type="button" id="number-9">9</button>
            <button type="button" id="plus">+</button>
            <button type="button" id="number-4">4</button>
            <button type="button" id="number-5">5</button>
            <button type="button" id="number-6">6</button>
            <button type="button" id="minus">-</button>
            <button type="button" id="number-1">1</button>
            <button type="button" id="number-2">2</button>
            <button type="button" id="number-3">3</button>
            <button type="button" id="multiplication">*</button>
            <button type="button" id="point">.</button>
            <button type="button" id="number-0">0</button>
            <button type="button" id="delete">&lt;-</button>
            <button type="button" id="division">/</button>
            <button type="button" id="reset">C</button>
            <button type="button" id="pow">x<sup>2</sup></button>
            <button type="button" id="sqrt">√x</button>
            <button type="button" id="equals">=</button>
        </div>
    </body>
</html>

Այն ունի հետևյալ տեսքը, որը, մեղմ ասած, գեղեցիկ չէ։ Մեր հաշվիչին տեսք տալու համար style.css ֆայլում գրում ենք հետևյալը․

#calculator {
    margin: auto;
    display: flex;
    flex-direction: row;
    max-width: 300px;
    height: 270px;
    flex-wrap: wrap;
    justify-content: space-around;
}

#answer {
    width: 100%;
    border: 1px solid black;
    padding: 10px;
    height: 25px;
    overflow-x: auto;
    overflow-y: hidden;
}

#calculator button {
    width: 25%;
    background: #FF8800;
    border: 1px solid #fff;
    color: #fff;
    transition: background .2s linear;
}

#calculator button:hover {
    background: #000;
}

Ստացանք հետևյալ տեսքը, որը, համաձայնեք, անհամեմատ ավելի գեղեցիկ է։

Սակայն մեր հաշվիչը դեռ չի կատարում որևէ գործողություն։ Այժմ սկսենք գրել կոդի այն հատվածը, որը ապահովելու է մեր հաշվիչի աշխատանքը։ Դրա համար բացում ենք script.js ֆայլը և նրանում գրում հետևյալ կոդի հատվածը․

jQuery(document).ready(function ($) {
    var expression = '';
    var action = '';
    function plus(expression) {
        var number1 = parseFloat(expression.substring(0, expression.indexOf('+')));
        var number2 = parseFloat(expression.substring(expression.indexOf('+') + 1));
        var answer = '';
        if (!isNaN(number1) && !isNaN(number2)) {
            answer = number1 + number2;
        } else {
            answer = 'Սխալ';
        }
        return answer;
    }
    function minus(expression) {
        var number1 = parseFloat(expression.substring(0, expression.lastIndexOf('-')));
        var number2 = parseFloat(expression.substring(expression.lastIndexOf('-') + 1));
        var answer = '';
        if (!isNaN(number1) && !isNaN(number2)) {
            answer = number1 - number2;
        } else {
            answer = 'Սխալ';
        }
        return answer;
    }
    function multiplication(expression) {
        var number1 = parseFloat(expression.substring(0, expression.indexOf('*')));
        var number2 = parseFloat(expression.substring(expression.indexOf('*') + 1));
        var answer = '';
        if (!isNaN(number1) && !isNaN(number2)) {
            answer = number1 * number2;
        } else {
            answer = 'Սխալ';
        }
        return answer;
    }
    function division(expression) {
        var number1 = parseFloat(expression.substring(0, expression.indexOf('/')));
        var number2 = parseFloat(expression.substring(expression.indexOf('/') + 1));
        var answer = '';
        if (!isNaN(number1) && !isNaN(number2)) {
            if (0 !== number2) {
                answer = number1 / number2;
            } else {
                answer = 'Սխալ';
            }
        } else {
            answer = 'Սխալ';
        }
        return answer;
    }
    $('[id^=number-]').click(function () {
        if (expression !== 'Սխալ') {
            expression += $(this).text();
        }
        $('#answer').text(expression);
    });
    $('#plus').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//) || (!expression.match(/\+|\*|\//) && expression.lastIndexOf('-') === 0)) {
                action = '+';
                expression += action;
            }
        }
        $('#answer').text(expression);
    });
    $('#minus').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            if (!expression.match(/\+|\-|\*|\//)) {
                action = '-';
                expression += action;
            } else if ((expression.match(/\+|\*|\//) && expression.charAt(expression.match(/\+|\*|\//).index + 1) === '') || expression.lastIndexOf('-') === 0) {
                    expression += '-';
            }
        }
        $('#answer').text(expression);
    });
    $('#multiplication').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//) || (!expression.match(/\+|\*|\//) && expression.lastIndexOf('-') === 0)) {
                action = '*';
                expression += action;
            }
        }
        $('#answer').text(expression);
    });
    $('#division').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//) || (!expression.match(/\+|\*|\//) && expression.lastIndexOf('-') === 0)) {
                action = '/';
                expression += action;
            }
        }
        $('#answer').text(expression);
    });
    $('#point').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            var pos = '';
            if (expression.match(/\./)) {
                if (pos = expression.match(/\+|\-|\*|\//)) {
                    var string = expression.substr(pos.index + 1);
                    if (!string.match(/\./)) {
                        expression += '.';
                    }
                }
            } else {
                expression += '.';
            }
        }
        $('#answer').text(expression);
    });
    $('#pow').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//)) {
                var number = parseFloat(expression);
                if (!isNaN(number)) {
                    expression = number * number;
                } else {
                    expression = 'Սխալ';
                }
            } else if (expression.charAt(0) === '-') {
                var number = parseFloat(expression);
                if (!isNaN(number)) {
                    expression = number * number;
                } else {
                    expression = 'Սխալ';
                }
            } else {
                expression = 'Սխալ';
            }
        }
        action = '';
        $('#answer').text(expression);
    });
    $('#sqrt').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//)) {
                var number = parseFloat(expression);
                if (!isNaN(number) && number >= 0) {
                    expression = Math.sqrt(number);
                } else {
                    expression = 'Սխալ';
                }
            } else {
                expression = 'Սխալ';
            }
        }
        action = '';
        $('#answer').text(expression);
    });
    $('#delete').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            expression = expression.substr(0, expression.length - 1);
        } else {
            expression = '';
        }
        $('#answer').text(expression);
    });
    $('#reset').click(function () {
        $('#answer').text('');
        expression = '';
        action = '';
    });
    $('#equals').click(function () {
        if ('' !== expression) {
            switch (action) {
                case '+':
                    expression = plus(expression);
                    break;
                case '-':
                    expression = minus(expression);
                    break;
                case '*':
                    expression = multiplication(expression);
                    break;
                case '/':
                    expression = division(expression);
                    break;
                default:
                    action = '';
                    break;
            }
            $('#answer').text(expression);
        }
    });
});

Մեր հաշվիչն արդեն կատարում է այն, ինչի համար նախատեսված էր։ Արդյունքը կարող եք տեսնել այստեղ։

Այժմ քայլ առ քայլ ուսումնասիրենք վերջին ֆայլում գրված կոդը։

expression-ն իրենից ներկայացնում է այն արտահայտությունը, որը պետք է արտածի հաշվիչը:

action-ը այն գործողությունն է, որը կատարվելու է:

$('[id^=number-]').click(function () {
        if (expression !== 'Սխալ') {
            expression += $(this).text();
        }
        $('#answer').text(expression);
});

Այս մասում գրված է կոդի այն հատվածը, որն աշխատում է թվերի կոճակների վրա սեղմելիս: Այն ուղղակի վերցնում է թիվը և արտապատկերում հաշվիչում (այն դաշտում, որի id-ն answer է), եթե մինչ այդ հաշվիչում արտապատկերված չի եղել <Սխալ> արտահայտությունը:

$('#plus').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//) || (!expression.match(/\+|\*|\//) && expression.lastIndexOf('-') === 0)) {
                action = '+';
                expression += action;
            }
        }
        $('#answer').text(expression);
});

Այս կոդն աշխատում է + նշանի կոճակին սեղմելիս: Այստեղ ստուգվում է, եթե արդեն արտահայտության մեջ կան +, -, /, * գործողությունները, ապա ուղղակի answer դաշտի մեջ գրվում է արտահայտությունն առանց փոփոխության, իսկ եթե այդ նշանները չկան, ապա արտահայտությանն ավելացվում է + նշանը և կրկին արտահայտությունը գրվում է answer դաշտի մեջ: Պայմանի երկրորդ մասը ուղղակի ստուգում է այն դեպքը, երբ թիվը սկսվում է – նշանով։ Այս ամենը կատարվում է, եթե հաշվիչում տպված է <Սխալ>-ից տարբեր որևէ արտահայտություն։

Նույնը կատարվում է *, / գործողությունների ժամանակ, միայն այն տարբերությամբ, որ արտահայտության մեջ գրվում է տվյալ գործողության նշանը:

Մի փոքր այլ է – նշանի կոճակին սեղմելիս աշխատող կոդը։ Այն ունի հետևյալ տեսքը․

$('#minus').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            if (!expression.match(/\+|\-|\*|\//)) {
                action = '-';
                expression += action;
            } else if ((expression.match(/\+|\*|\//) && expression.charAt(expression.match(/\+|\*|\//).index + 1) === '') || expression.lastIndexOf('-') === 0) {
                    expression += '-';
            }
        }
        $('#answer').text(expression);
});

Այստեղ նախորդ դեպքի համեմատ մեկ պայման ավել է ստուգվում։ Այդ պայմանը ապահովում է բացասական թվերի մուտքագրումը։ Այստեղ բացակայում է այն պայմանը, երբ հաշվիչում չկա տպված արտահայտություն։ Դա արված է, որպեսզի թույլատրվի առաջին թիվը մուտքագրել – նշանով։

Մի փոքր այլ է քառակուսի աստիճան բարձրացնելու և քառակուսի արմատ հանելու գործողությունների ժամանակ կատարվող քայլերը:

Նախ դիտարկենք քառակուսի արմատ հանելու գործողությունը.

$('#sqrt').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//)) {
                var number = parseFloat(expression);
                if (!isNaN(number) && number >= 0) {
                    expression = Math.sqrt(number);
                } else {
                    expression = 'Սխալ';
                }
            } else {
                expression = 'Սխալ';
            }
        }
        action = '';
        $('#answer').text(expression);
});

Այստեղ expression-ին վերագրվում է answer դաշտի արժեքը: Հաջորդ քայլում ստուգվում է +, -, /, * նշանների բացակայությունը: Եթե այդ նշաններն առկա են, ապա տպվում է <Սխալ> արտահայտությունը: Եթե այդ նշանները բացակայում են, ապա expression-ը ձևափոխվում է թվի, ստեղծվում է number փոփոխականը, որին վերագրվում է expression արտահայտության թվային տեսքը: Այնուհետև ստուգվում է number-ի թիվ լինելը և ոչ բացասական լինելը: Եթե պայմանը բավարարվում է, ապա հաշվվում է թվի քառակուսի արմատը և տպվում հաշվիչում։ Այս ամենը կատարվում է, եթե հաշվիչում տպված է <Սխալ>-ից տարբեր որևէ արտահայտություն։

Այժմ քննարկենք քառակուսի աստիճան բարձրացնելու գործողությունը։ Այս գործողության համար պատասխանատու կոդը հետևյալն է․

$('#pow').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ' && expression !== '') {
            if (!expression.match(/\+|\-|\*|\//)) {
                var number = parseFloat(expression);
                if (!isNaN(number)) {
                    expression = number * number;
                } else {
                    expression = 'Սխալ';
                }
            } else if (expression.charAt(0) === '-') {
                var number = parseFloat(expression);
                if (!isNaN(number)) {
                    expression = number * number;
                } else {
                    expression = 'Սխալ';
                }
            } else {
                expression = 'Սխալ';
            }
        }
        action = '';
        $('#answer').text(expression);
    });

Այստեղ կատարվում են համարյա նույն քայլերը, ինչ քառակուսի արմատ հանելու գործողության ժամանակ։ Տարբերությունը կայանում է նրանում, որ առաջին պայմանի մեջ մտնելիս (այսինքն արտահայտության մեջ չկան +,-,/,* նշաները) չի ստուգվում թվի ոչ բացասական լինելու պայմանը։ else if-ի մեջ ստուգվում է այն դեպքը, երբ արտահայտության մեջ առկա թիվը բացասական է, այսինքն սկսվում է – նշանով։ Մնացաց քայլերը նույնն են։ Այս ամենը կատարվում է, եթե հաշվիչում տպված է <Սխալ>-ից տարբեր որևէ արտահայտություն։

C կոճակին սեղմելուց աշխատում է հետևյալ կոդը․

$('#reset').click(function () {
        $('#answer').text('');
        expression = '';
        action = '';
});

որն ուղղակի expression և action փոփոխականներին վերագրում է դատարկ արժեքներ և ջնջում է հաշվիչում արտապատկերված արտահայտությունը։

կոդի՝ answer դաշտում գրված արտահայտությունը նույնպես ջնջվում է։

Ջնջելու կոճակը սեղմելիս աշխատում է հետևյալ կոդը․

$('#delete').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            expression = expression.substr(0, expression.length - 1);
        } else {
            expression = '';
        }
        $('#answer').text(expression);
});

Այստեղ ուղղակի expression արտահայտությունից կտրվում է վերջին սիմվոլը (<Սխալ> արտահայությունը ջնջվում է ամբողջությամբ) և ստացված արտահայտությունն արտապատկերվում է հաշվիչում։

Այժմ դիտարկենք . կոճակին սեղմելիս աշխատող կոդը․

$('#point').click(function () {
        expression = $('#answer').text();
        if (expression !== 'Սխալ') {
            var pos = '';
            if (expression.match(/\./)) {
                if (pos = expression.match(/\+|\-|\*|\//)) {
                    var string = expression.substr(pos.index + 1);
                    if (!string.match(/\./)) {
                        expression += '.';
                    }
                }
            } else {
                expression += '.';
            }
        }
        $('#answer').text(expression);
});

Այստեղ գրված պայմանները ապահովում են . սիմվոլի չկրկնվելու դեպքը, այսինքն թվի մեջ չպետք է մեկից ավելի անգամ գրված լինի . նշանը։ 6-րդ տողում գրված պայմանը ստուգում է, եթե արտահայտության մեջ առկա են +,-,/,* նշաններից որևէ մեկը և նրանից հետո չկա գրված . նշանը, ապա գրում է . նշանը արտահայության մեջ, հակառակ դեպքում արտահայտությունը մնում է անփոփոխ: Այս ամենը կրկին կատարվում է, եթե հաշվիչում տպված չէ <Սխալ> արտահայտությունը։

Իսկ հիմա քննարկենք = կոճակին սեղմելիս կատարվող գործողությունները։ Դրանց համապատասխանող կոդը հետևյալն է․

$('#equals').click(function () {
        if ('' !== expression) {
            switch (action) {
                case '+':
                    expression = plus(expression);
                    break;
                case '-':
                    expression = minus(expression);
                    break;
                case '*':
                    expression = multiplication(expression);
                    break;
                case '/':
                    expression = division(expression);
                    break;
                default:
                    action = '';
                    break;
            }
            $('#answer').text(expression);
        }
});

Այստեղ ստուգվում է, եթե expession-ը դատարկ չէ, ապա կանչվում է յուրաքանչյուր գործողության (+,-,/,*) կատարման համար նախատեսված ֆունկցիան, իսկ եթե action-ը չի համապատասխանում նշված գործողության նշաններից որևէ մեկին, ապա հաշվիչում ուղղակի տպվում է արտահայտությունը առանց փոփոխության։

Այսպիսով ավարտեցինք հաշվիչի պատրաստումը։ Հուսով եմ այս նյութը օգտակար եղավ Ձեզ համար։

Հարցեր ունենալու դեպքում կարող եք գրել մեկնաբանություններում։

Շնորհակալությում մեր բլոգից օգտվելու համար։

Կապված գրառումներ

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • Sendmail կարգավորումներ 04/01/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Icon տառատեսակներ 02/21/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։