Ողջույն հարգելի ընթերցողներ։ Այսօր ուզում եմ Ձեզ ներկայացնել հաշվիչի (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"><-</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-ը չի համապատասխանում նշված գործողության նշաններից որևէ մեկին, ապա հաշվիչում ուղղակի տպվում է արտահայտությունը առանց փոփոխության։
Այսպիսով ավարտեցինք հաշվիչի պատրաստումը։ Հուսով եմ այս նյութը օգտակար եղավ Ձեզ համար։
Հարցեր ունենալու դեպքում կարող եք գրել մեկնաբանություններում։
Շնորհակալությում մեր բլոգից օգտվելու համար։