التعامل مع الأعداد
مفهوم الأعداد في جافاسكربت
الأعداد على اختلاف أشكالها تندرج تحت نوع واحد في جافاسكربت و الذي هو النوع
كيف سيتم التعامل مع الأعداد و كيف سيتم تحويلها هو أمر أنت تحدده من خلال الدوال الجاهزة التي توفرها لك.
في هذا الدرس سنتعرف على جميع الدوال و الثوابت الجاهزة في جافاسكربت التي يمكن استخدامها مع الأعداد سواء لتحويل أنواعها، إجراء عمليات حسابية عليها، توليد أرقام عشوائية و غيرها.
في لغات البرمجة الأخرى غالباً ما نجد أنواع الأعداد يتم تعريفها بدقة أكثر، حيث يتم تعريفها من البداية كأعداد صحيحة ( Integer )، أعداد عشرية ( Float ) إلخ.. و على هذا الأساس يتم التعامل به معها و لكن الأمر مختلف في جافاسكربت و هو أكثر سهولة و مرونة.
تعريف أعداد في جافاسكربت
العدد في جافاسكربت مهما كان نوعه يتم تخزينه في ذاكرة الجهاز مهما كان نوعه بمساحة ثابتة و هي 64 bit.
مفسّر لغة جافاسكربت يخزّن العدد في الذاكرة بمبدأ يسمى Double Precision Floating Point و هذه المعلومة ذكرناها لك فقط حتى تعلم أنه يوجد قواعد و حدود قصوى للأعداد التي يمكنك تخزينها و هذه الأمور سنتطرق لما تحتاجه منها من خلال الأمثلة.
الكثير من المبرمجين يعتقدون أن لغة جافاسكربت سيئة في التعامل مع الأرقام و ذلك لعدم معرفتهم بكيفية تعامل جافاسكربت معها، لذلك نتمنى منك قراءة الملاحظات التي وضعناها على الأمثلة جيداً.
في المثال التالي قمنا بتعريف عددي صحيح ( Integer ) و عدد عشري ( Decimal ).
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
let x = 3; // (integer number) عدد صحيح
let y = 7.5; // (floating-point number) عدد عشري
document.write('x = ' + x + '<br>');
document.write('y = ' + y);
</script>
</body>
</html>
الأعداد الكبيرة في جافاسكربت يمكن كتابتها بأسلوب الأُس ( Exponential Notation )من خلال وضع الحرف
في المثال التالي قمنا باستخدام أسلوب الأُس لكتابة الأعداد بشكل أبسط.
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<script>
let x = 123e4; // 123e4 = 123 × 10000 = 1230000
let y = 123e+4; // 123e+4 = 123 × 10000 = 1230000
let z = 123e-4; // 123e-4 = 123 × -10000 = 0.0123
document.write('x = ' + x + '<br>');
document.write('y = ' + y + '<br>');
document.write('z = ' + z);
</script>
</body>
</html>
في المثال التالي قمنا بتعريف عدد سداسي عشري ( Hexadecimal ) وذلك من خلال كتابة
المثال الثالث
<!DOCTYPE html>
<html>
<body>
<script>
let x = 0xff; // 0xff = 240 + 15 = 255
document.write('x = ' + x);
</script>
</body>
</html>
لا تحتاج معرفة كيف يتم كتابة الأعداد بأسلوب Hexadecimal لأنك لن تحتاجها إلا إذا كنت تبني برنامج خاص بالأنظمة و الشبكات أو الألوان. كما يمكنك استخدام أداة تحويل الوحدات لمعرفة ما هو العدد الصحيح الذي يساويه أي عدد مكتوب بهذا الأسلوب.
حدود الأعداد في جافاسكربت
العدد صحيح إن كان سيتم كتابته بشكل كامل فإنه يمكن أن يتألف من 15 رقم كحد أقصى.
- في المثال التالي قيمة
x ستبقى كما هي لأنها لم تتجاوز 15 رقماً. - أما قيمة
y فإنها ستتغير لأنها تتألف من 16 رقم، أي جاوزت الحد الأقصى للعدد الصحيح.
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
let x = 999999999999999; // x = 999999999999999
let y = 9999999999999999; // y = 10000000000000000
document.write('x = ' + x + '<br>');
document.write('y = ' + y);
</script>
</body>
</html>
في حال كان العدد عشري، فإنه يمكن أن يحتوي 17 عدد كحد أقصى بعد الفاصلة (أي جهة اليمين).
و هنا نود الإشارة أيضاً أنه عند التعامل مع أعداد عشرية قد تكون النتائج غير منطقية رياضياً كما هو المعلوم و ذلك بسبب المبدأ Double Precision Floating Point الذي تستخدمه جافاسكربت في تخزين الأعداد و إليك المثال التالي.
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<script>
let x = 0.1 + 0.2; // x = 0.30000000000000004
document.write('x = ' + x);
</script>
</body>
</html>
كحل للمشكلة السابقة يمكنك ضرب كلا العددين بعشرة حتى يصبحا عددين صحيحين، و من ثم تقوم بقسمة الناتج على عشرة.
المثال الثالث
<!DOCTYPE html>
<html>
<body>
<script>
// بهذه الطريقة نضمن أن يتم إبقاء رقم واحد فقط بعد الفاصلة
let x = (0.1*10 + 0.2*10) / 10;
document.write('x = ' + x);
</script>
</body>
</html>
كحل آخر للمشكلة السابقة يمكنك استخدام الدالة
المثال الرابع
<!DOCTYPE html>
<html>
<body>
<script>
// لتحديد أننا نريد إظهار رقم واحد فقط بعد الفاصلة toFixed(1) استخدمنا الدالة
let x = (0.1 + 0.2).toFixed(1);
document.write('x = ' + x);
</script>
</body>
</html>
دمج الأعداد و النصوص في جافاسكربت
مفسّر لغة جافاسكربت ينفّذ الأوامر الموضوعة واحداً تلو الآخر و عند تنفيذ أي أمر فإنه يبدأ من اليسار إلى اليمين. بالإضافة إلى ذلك فإن الرمز
في المثال التالي قمنا بعرض بعرض أعداد و نصوص. لاحظ أنه طالما أن مفسّر جافاسكربت يرى أعداداً في البداية فإنه يتصرف كعامل جمع، و لكنه بمجرد أن يرى نصاً واحداً فإنه سيكمل التصرّف كعامل دمج مما يعني أنه سيضعهم بجانب بعضهم فقط.
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
let a = 20 + 30; // 50
let b = 20 + '30'; // 2030
let c = 20 + 30 + '40'; // 5040
let d = '20' + 30 + 40; // 203040
let e = 20 + '30' + 40; // 203040
document.write('a = ' + a + '<br>');
document.write('b = ' + b + '<br>');
document.write('c = ' + c + '<br>');
document.write('d = ' + d + '<br>');
document.write('e = ' + e);
</script>
</body>
</html>
في المثال التالي قمنا بعرض ناتج عمليات حسابية مع أننا قمنا بوضعها بعد النصوص. لاحظ أنه في حال كانت الأعداد المراد وضع ناتج حسابها موضوعة بعد نص، فهنا يجب وضعها بين قوسين
المثال الثاني
let a = '5 + 2 = ' + (5+2); // 5 + 2 = 7
let b = '5 - 2 = ' + (5-2); // 5 - 2 = 3
let c = '5 * 2 = ' + (5*2); // 5 * 2 = 10
let d = '5 / 2 = ' + (5/2); // 5 / 2 = 2.5
في المثال التالي قمنا بإجراء عمليات حسابية على أعداد مخزنة كنصوص. لاحظ أن مترجم جافاسكربت في حالة الطرح، الضرب و القسمة يقوم بشكل تلقائي باعتبار النصوص أعداداً و يقوم بحساب الناتج و لكن في حالة الجمع فقط فإن العملية تفشل لأن الرمز
المثال الثالث
<!DOCTYPE html>
<html>
<body>
<script>
let a = '10' + '2'; // 102 <= هنا حصل دمج
let b = '10' - '2'; // 8
let c = '10' * '5'; // 50
let d = '10' / '5'; // 2
document.write('a = ' + a + '<br>');
document.write('b = ' + b + '<br>');
document.write('c = ' + c + '<br>');
document.write('d = ' + d);
</script>
</body>
</html>
مفهوم القيمة NaN
في المثال التالي قمنا بإجراء عمليات حسابية ليس فيها أي منطق. لاحظ أن مترجم جافاسكربت في حال وجد أن العملية الحسابية المراد تنفيذها غير ممكنة فإنه يعطيك
المثال الرابع
<!DOCTYPE html>
<html>
<body>
<script>
let x = 10 - 'codaFox'; // NaN
document.write('x = ' + x);
</script>
</body>
</html>
الكلمة
الطريقة الصحيحة لفحص القيمة NaN
في حال قمت بفحص نوع المتغير بواسطة العامل
أما لو أردت فحص قيمة المتغير لتعرف ما إن كان يمكن تمثيلها أو التعامل معها كعدد، فهنا يجب أن تفحصها بواسطة الدالة
المثال الخامس
<!DOCTYPE html>
<html>
<body>
<script>
let x = 10 - 'CodaFox'; // NaN
document.write(typeof x); // number => هكذا نعلم أنها في الأصل تمثل جواب لعملية حسابية
document.write('<br>');
document.write(isNaN(x)); // true => هكذا نعلم أنها قيمة عددية لا يمكن تمثيلها
</script>
</body>
</html>
مفهوم القيمة Infinity
في المثال التالي قمنا بإجراء عمليات حسابية تتألف من أرقام كبيرة جداً لدرجة أنه لا يمكن تخزين ناتجها. لاحظ أن مترجم جافاسكربت حين يجد أن العدد كبير جداً و يفوق القدرة الإستيعابية للتخزين فإنه يستبدله بالقيمة
المثال السادس
<!DOCTYPE html>
<html>
<body>
<script>
let x = 1e1000; // Infinity
let y = -1e1000; // -Infinity
document.write('x = ' + x + '<br>');
document.write('y = ' + y);
</script>
</body>
</html>
الكلمة
ثوابت و دوال الأعداد في جافاسكربت
جافاسكربت توفر لك الكثير من الدوال الجاهزة التي يمكنك استخدامها للتعامل مع الأعداد، تحويل أنواعها، إجراء عمليات حسابية عليها و غيرها. هذه الدوال منها ما يمكن استخدامه بشكل مباشر، منها ما هو موجود ضمن الكلاس
يكفي فقط أن تعرف أن الثوابت و الدوال التي سنذكرناها متوفرة لتستخدمها عند الحاجة لها مستقبلاً لأنه من الطبيعي جداً أن لا تعرف فائدة جميع ما قمنا بذكره في عالم البرمجة حيث أن أغلبها في الأصل يُستعمل في الغالب في العمليات الحسابية المعقدة التي تُدرَّس في الرياضيات و الفيزياء، لذلك على الأرجح قد لا تستخدم أغلب الثوابت و الدوال المذكورة في المشاريع البرمجية.
دوال يمكن استدعاءها بشكل مباشر
الجدول التالي يحتوي على جميع الدوال الجاهزة التي يمكنك استدعاءها من القيم العددية بشكل مباشر.
الدالة و تعريفها | |
---|---|
1 | |
2 | |
3 | فمثلاً في حال كنت ستستخدمها مع التاريخ، فإنها سترجع لك عدد يمثّل عدد الثواني الموجودة من تاريخ |
4 | في حال عدم تمرير قيمة مكانه فإنه سيتم حذف أي رقم موجود بعد الفاصلة. |
5 | في حال عدم تمرير قيمة مكانه فإنه سيتم إبقاء 100 رقم منه كحد أقصى. |
6 | في حال عدم تمرير قيمة مكانه فإنه سيتم إبقاء 100 رقم منه كحد أقصى. |
دوال الكلاس Number
الجدول التالي يحتوي على جميع الدوال الجاهزة الموجودة في الكلاس
الدالة و تعريفها | |
---|---|
1 |
|
2 |
|
3 |
|
4 | العدد الصحيح يُعتبر عدد آمن طالما أنه يمكن تخزينه في الذاكرة، إذاً يعتبر آمن إذا كانت قيمته ما بين -(253-1) و 253-1 كحد أقصى.
|
5 |
|
6 |
|
في صفحات الويب، الدالتين
ثوابت الكلاس Number
الجدول التالي يحتوي على جميع الثوابت الجاهزة الموجودة في الكلاس
الثابت و تعريفه | |
---|---|
1 | قيمته تساوي 2-52 و التي تساوي 2.220446049250313e-16. |
2 | قيمته تساوي 253 - 1 و التي تساوي 9007199254740991. |
3 | قيمته تساوي - (253 - 1) و التي تساوي -9007199254740991. |
4 | قيمته تساوي (21024 - 2971) و التي تساوي 1.7976931348623157E+308. إذا حاولت تخزين عدد أكبر من هذا فإنه سيفقد قيمته و سيتم وضع القيمة |
5 | قيمته تساوي 2-1074 و التي تساوي 5E-324. إذا حاولت تخزين عدد أدنى من هذا فإنه سيفقد قيمته و سيتم وضع القيمة |
6 | |
7 | إذاً قيمته تساوي القيمة |
8 | إذاً قيمته تساوي القيمة |
دوال الكلاس Math
الجدول التالي يحتوي على جميع الدوال الجاهزة الموجودة في الكلاس
الدالة و تعريفها | |
---|---|
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | أي ترجع قيمة |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | |
26 | |
27 | للدقة فإن العدد الذي ترجعه يكون أكبر من صفر و أصغر من واحد كما يلي 0 > x < 1 |
28 | |
29 | ترجع إذا كان العدد |
30 | |
31 | |
32 | |
33 | |
34 | |
35 |
نود الإشارة إلى أن الترجمات العربية للمصطلحات الأجنبية المذكورة في الجدول السابقة قد تكون غير دقيقة.
ثوابت الكلاس Math
الجدول التالي يحتوي على جميع الثوابت الجاهزة الموجودة في الكلاس
الثابت و تعريفه | |
---|---|
1 | قيمته تساوي 2.718281828459045. |
2 | قيمته تساوي 3.141592653589793. |
3 | قيمته تساوي 2.302585092994046. |
4 | قيمته تساوي 0.6931471805599453. |
5 | قيمته تساوي 0.4342944819032518. |
6 | قيمته تساوي 1.4426950408889634. |
7 | قيمته تساوي 0.7071067811865476. |
8 | قيمته تساوي 1.4142135623730951. |
طريقة توليد عدد عشوائي في جافاسكربت
في حالات كثيرة قد تحتاج إلى توليد أعداد عشوائية و قد تكون بحاجة إلى تحديد نطاق الأعداد العشوائية التي ترغب في توليدها، فمثلاً إذا كنت تبرمج لعبة تتضمن حجر النرد ( Dice ) قد ترغب في الحصول على أعداد عشوائية بين 1 و 6 حصراً.
للحصول على رقم عشوائي، يمكننا استخدام الدالة
في المثال التالي قمنا باستخدام الدالة
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
// هنا سيتم طباعة رقم عشوائي بين 0 و 4
document.write(Math.floor(Math.random() * 5) + '<br>');
// هنا سيتم طباعة رقم عشوائي بين 0 و 5
document.write(Math.floor(Math.random() * 6) + '<br>');
// هنا سيتم طباعة رقم عشوائي بين 0 و 5
document.write(Math.floor(Math.random() * 5) + 1);
</script>
</body>
</html>
في المثال التالي قمنا ببناء دالة، عند استدعائها نمرر لها عددين، فترجع رقم عشوائي بينهما.
ملاحظة: الأعداد التي يتم تمريرها للدالة هي ضمن الأعداد التي يمكن أن ترجعها الدالة.
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<script>
// getRandomNumber() هنا قمنا بتعريف الدالة
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// هنا قمنا بتوليد رقم عشوائي بين 1 و 6 بواسطة الدالة
// x و من ثم قمنا بتخزينه في المتغير getRandomNumber()
let x = getRandomNumber(1, 6);
// x هنا قمنا بطباعة القيمة الموجودة في
document.write('x = ' + x);
</script>
</body>
</html>