در این آموزش به شما نشان خواهم داد که چگونه یک ماشین حساب GPA آسان در HTML و جاوا اسکریپت ایجاد کنید.
بخش اول [HTML]:
در <body> فایل HTML خود را به آن اضافه کنید <input>، با id از “ورودی”، و type از متن در خط بعدی، یک را ایجاد کنید <span> با class و id از “خروجی”. بعد a اضافه کنید <button> با یک onmousedown رویداد. تایپ کنید calculate() به درون onmousedown رویداد. دکمه “محاسبه” را بگذارید. این دکمه جاوا اسکریپت را اجرا می کند که خروجی را دریافت می کند.
برگه تقلب:
<input type="text" id="input">
<span class="output" id="output"></span>
<button onmousedown="calculate()">Calculate</button>
قسمت 2 [JavaScript]:
ابتدا یک متغیر به نام ایجاد کنید sum. مقدار این متغیر را تنظیم نکنید (باید به شکل زیر باشد: var sum;). بعد، یک متغیر به نام ایجاد کنید numberOfGrades، و مقدار را روی 1. متغیر numberOfGrades، برای تشخیص تعداد حروف ورودی کاربر استفاده خواهد شد. به عنوان مثال، اگر کاربر ورودی A+, B, B+، سپس در نهایت آن را طوری می کنیم که متغیر numberOfGrades تشخیص می دهد که کاربر 3 درجه حرف را وارد می کند.
پس از آن، یک را ایجاد کنید function تماس گرفت calculate(). باید چیزی شبیه این باشد: function calculate(e){}. در براکت های فرفری این تابع، متغیر را تنظیم کنید numberOfGrades به 1. سپس، متغیر را تنظیم کنید sum به مقدار جعبه ورودی ما در HTML (این باید به شکل زیر باشد: sum = document.getElementById('input').value;). این بدان معنی است که مجموع قبل از محاسبه هر چیزی شبیه ورودی کاربران خواهد بود. پس از انجام همه این کارها، این کد را در خط بعدی اضافه کنید:
if(sum.includes('A+')){
sum = sum.replaceAll('A+', '4.0')
}
if(sum.includes('A')){
sum = sum.replaceAll('A', '4.0');
}
if(sum.includes('A-')){
sum = sum.replaceAll('A-', '3.7');
}
if(sum.includes('B+')){
sum = sum.replaceAll('B+', '3.3');
}
if(sum.includes('B')){
sum = sum.replaceAll('B', '3.0');
}
if(sum.includes('B-')){
sum = sum.replaceAll('B-', '2.7');
}
if(sum.includes('C+')){
sum = sum.replaceAll('C+', '2.3');
}
if(sum.includes('C')){
sum = sum.replaceAll('C', '2.0');
}
if(sum.includes('C-')){
sum = sum.replaceAll('C-', '1.7');
}
if(sum.includes('D+')){
sum = sum.replaceAll('D+', '1.3');
}
if(sum.includes('D')){
sum = sum.replaceAll('D', '1.0');
}
if(sum.includes('D-')){
sum = sum.replaceAll('D-', '0.7');
}
if (sum.includes('F')){
sum = sum.replaceAll('F', '0.0');
}
کاری که این کد انجام می دهد این است که جایگزین تمام درجه های حروف در کد می شود sum متغیر با مقدار امتیاز در خط بعدی باید کد را اضافه کنید:
while(sum.includes(',')){
sum = sum.replace(',', '+');
numberOfGrades++;
}
این کد برای جایگزینی همه کاماهای ورودی کاربران با علائم مثبت است. این sum مقدار متغیر اکنون چیزی شبیه به این خواهد بود: 4.0 + 3.0 + 3.7. اما همانطور که می دانیم، 10.7 معدل نیست به همین دلیل است که متغیر را داریم numberOfGrades. در while حلقه بالا، من آن را به طوری که numberOfGradesهر بار که یک کاما تشخیص داد، مقدار آن یک افزایش می یابد.
اکنون کاری که ما انجام می دهیم میانگین معدل است. این ریاضی واقعا ساده است. تنها کاری که باید انجام دهید این است که تنظیم کنید output عناصر innerHTML به (eval(sum) / numberOfGrades). معادله ریاضی بالا، نمرات اضافه شده را با مقدار نمرات اولیه تقسیم می کند. این به شما نمره میانگین می دهد.
برگه تقلب:
var sum;
var numberOfGrades = 1;
function calculate(e){
numberOfGrades = 1;
sum = document.getElementById('input').value;
if(sum.includes('A+')){
sum = sum.replaceAll('A+', '4.0')
}
if(sum.includes('A')){
sum = sum.replaceAll('A', '4.0');
}
if(sum.includes('A-')){
sum = sum.replaceAll('A-', '3.7');
}
if(sum.includes('B+')){
sum = sum.replaceAll('B+', '3.3');
}
if(sum.includes('B')){
sum = sum.replaceAll('B', '3.0');
}
if(sum.includes('B-')){
sum = sum.replaceAll('B-', '2.7');
}
if(sum.includes('C+')){
sum = sum.replaceAll('C+', '2.3');
}
if(sum.includes('C')){
sum = sum.replaceAll('C', '2.0');
}
if(sum.includes('C-')){
sum = sum.replaceAll('C-', '1.7');
}
if(sum.includes('D+')){
sum = sum.replaceAll('D+', '1.3');
}
if(sum.includes('D')){
sum = sum.replaceAll('D', '1.0');
}
if(sum.includes('D-')){
sum = sum.replaceAll('D-', '0.7');
}
if (sum.includes('F')){
sum = sum.replaceAll('F', '0.0');
}
while(sum.includes(',')){
sum = sum.replace(',', '+');
numberOfGrades++;
}
document.getElementById("output").innerHTML = (eval(sum) / numberOfGrades);
}
با تشکر برای خواندن!
-کوئین
مشاهده پروژه
کد
