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