First, jQuery refers to a JavaScript library.
What used to take dozens of lines in JavaScript can now be written in just a few lines in jQuery.
If you are interested in web production, you may have heard of jQuery.
I decided to study jQuery a little, so I made a Shoboi calculator app without using the eval function or new Function.
It would be easier to use the eval function, but it’s not very educational, and it’s not very good for security, so I don’t use it.
That aside.
If you are aiming to be a programmer, let’s make a calculator! “You’ll learn a lot~”
……By the way, it’s a shabby (too simple) calculator like this.
|
|
・Functions are +, -, ×, ÷ only
・Decimal point cannot be used
・M (memory) function cannot be used
・Route function cannot be used
Well… it’s too simple, but please forgive me (_)
Below is the code.
HTMLとCSS
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.cal-base table{
width:100%;
height:100%;
}
.cal-base table td{
width:25%;
height:20%;
}
.cal-base table input{
font-size:5vh;
height:100%;
width:100%;
}
</style>
</head>
<body>
<center class="cal-base">
<table border="5">
<tr>
<td colspan="1" style="height:5%;">
<input class="disp" type="text" style="width:100%;" size="20" name="disp" value="" disabled>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input class="cal-click" data-role="cal-number" type="button" value="7"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="8"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="9"></td>
<td><input class="cal-click" data-role="cal-formula" type="button" value="+"></td>
</tr>
<tr>
<td><input class="cal-click" data-role="cal-number" type="button" value="4"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="5"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="6"></td>
<td><input class="cal-click" data-role="cal-formula" type="button" value="-"></td>
</tr>
<tr>
<td><input class="cal-click" data-role="cal-number" type="button" value="1"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="2"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="3"></td>
<td><input class="cal-click" data-role="cal-formula" type="button" value="*"></td>
</tr>
<tr>
<td><input class="clear-btn" type="button" value="C"></td>
<td><input class="cal-click" data-role="cal-number" type="button" value="0"></td>
<td><input class="cal-btn" type="button" value="="></td>
<td><input class="cal-click" data-role="cal-formula" type="button" value="/"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
The CSS is also terrible (+_+) I will fix it little by little when I have time.
jQuery
<script type="text/javascript">
/*
Calculator (four arithmetic operations only)
overview:
When the formula is short, such as 1+2=
Calculated when = (equal) is entered
If the calculation formula is long, such as 33+44-22*1/, calculate while dividing in the background
Calculate 33+44 when - (subtraction) is entered
Calculate 77-22 when * (multiplication) is entered
Calculate 55 x 1 when / (divide) is entered
*/
jQuery(document).ready(function ($) {
let num_1;
let num_2;
let math;
let minus;
let formula_count;
num_1 = null;
num_2 = null;
math = null;
minus = false;
formula_count = 0;
/*
Functions that handle numeric and operator keystrokes
*/
$(".cal-click").on('click',function(){
// processing to check the first key input
//initialize variables and exit when (+, *, /) is entered
if(num_1 == null && math == null){
if($(this).val() == "+" || $(this).val() == "*" || $(this).val() == "/" ){
math = null;
num_1 = null;
num_2 = null;
minus = false;
formula_count = 0;
return;
}else{
//Set a flag when starting from a negative
if($(this).val() == "-"){
minus = true;
num_1 = "-";
}
}
}
/*
Processing when a numerical value is entered
・Display the entered value on the calculator
・Store the entered values in variables (num_1, num_2)
*/
if($(this).attr('data-role') != 'cal-formula'){
// If the first is a negative value, add a negative value to the value and store it in num_1
if(minus){
num_1 = num_1 + $(this).val();
$(".disp").val($(".disp").val()+$(this).val());
formula_count = 0;
minus = false;
return;
}
// Example: 1+2-3*4
// "1" is stored in num_1
if(num_1 == null && math == null){
$(".disp").val('');
$(".disp").val($(".disp").val()+$(this).val());
formula_count = 0;
num_1 = $(this).val();
// Example: 111+2-3*4
// "111" is stored in num_1
}else if(num_1 != null && math == null){
$(".disp").val($(".disp").val()+$(this).val());
formula_count = 0;
num_1 = num_1 + $(this).val();
// Example: 1+2-3*4
// "2" is stored in num_2
}else if(num_2 == null && math != null){
$(".disp").val($(".disp").val()+$(this).val());
formula_count = 0;
num_2 = $(this).val();
//Example: 1+222-3*4
// "222" is stored in num_2
}else if(num_2 != null && math != null){
$(".disp").val($(".disp").val()+$(this).val());
formula_count = 0;
num_2 = num_2 + $(this).val();
}else{
return;
}
/*
Processing when an operator is entered
・Disable operator input when formula_count is 2 or more (prevention of continuous operator input)
・Display the entered operator on the calculator
・Store the input operator in the variable (math)
*/
}else{
formula_count ++;
if(formula_count == 2){
formula_count = 1;
}else if(minus){
$(".disp").val('');
$(".disp").val($(".disp").val()+$(this).val());
}else if(formula_count == 1 && num_1 != null && num_2 == null) {
math = $(this).val();
$(".disp").val($(".disp").val()+$(this).val());
}else if(formula_count == 1 && num_1 != null && num_2 != null){
// "Calculate" calculation() in units of binary operators
// Specifically, when 33+44-22*1/ is entered
// Calculate 33+44 when - (subtraction) is entered
// Calculate 77-22 when * (multiplication) is entered
// Calculate 55 x 1 when / (division) is entered
calculation();
num_2 = null;
math = $(this).val();
$(".disp").val($(".disp").val()+$(this).val());
}else{
return;
}
}
});
/*
function to compute
Arithmetic operators (+, -, *, /)
*/
function calculation(){
switch (math){
case "+":
num_1 = Number(num_1) + Number(num_2);
break;
case "-":
num_1 = Number(num_1) - Number(num_2);
break;
case "*":
num_1 = Number(num_1) * Number(num_2);
break;
case "/":
num_1 = Number(num_1) / Number(num_2);
break;
default:
break;
}
}
/*
clear key
Clear calculator and initialize variables
*/
$(".clear-btn").on('click',function(){
$(".disp").val('');
math = null;
num_1 = null;
num_2 = null;
minus = false;
formula_count = 0;
});
/*
equal key
・Calculate with calculation() and display the result on the calculator
・Initialization
*/
$(".cal-btn").on('click',function(){
calculation();
$(".disp").val('');
$(".disp").val(num_1);
math = null;
num_1 = null;
num_2 = null;
minus = false;
formula_count = 0;
});
});
</script>
If the formula is short, such as 1+2=…
Calculate when = is entered.
However, if the formula is long, for example 33+44-22*1/, it will be calculated little by little in the background.
Calculate 33+44 when – (subtraction) is entered
Calculate 77-22 when * (multiplication) is entered
Calculate 55 x 1 when / (divide) is entered
Of course, those calculation results are not displayed on the calculator. It feels like calculating little by little in units of binary operators. If you use the eval function, such processing is unnecessary. I just don’t like it for security reasons.
Everyone, please become a programmer who can write more elegant code.
